:root{
  --gold:#ffd36a;--gold-deep:#f2aa32;--wood:#5c2e1b;--caramel:#a76736;--red:#a93025;
  --coral:#ff665b;--turquoise:#36b8b7;--blue:#60b9f2;--night:#252b52;--blossom:#f5a6cb;--paper:#f7e6c3
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;height:100%;overscroll-behavior:none}
html{background:#141b38}
body{width:100%;height:100dvh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 10%,#354d67 0%,#161c39 68%,#0b1022 100%);font-family:"Trebuchet MS","Arial Rounded MT Bold",system-ui,sans-serif;color:#fff2ce;-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:3px solid #a1eeff;outline-offset:4px}
button:active{transform:translateY(3px) scale(.985)}
.game-frame{width:min(100vw,calc(100dvh * 9 / 16),640px);aspect-ratio:9/16;overflow:hidden;isolation:isolate;position:relative;container-type:inline-size;box-shadow:0 10px 65px rgba(0,0,0,.75);background:#102a40}
.screen-stack,.screen{width:100%;height:100%}
.screen{display:none;position:relative;overflow:hidden}
.screen.active{display:block}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.scene{background-position:center;background-size:cover;background-repeat:no-repeat}
.intro{background-image:url('assets/finy_world_day.webp')}
.ending{background-image:url('assets/finy_world_night.webp')}
.victory{background-image:url('assets/finy_world_festival.webp')}
.scene-vignette,.night-shade,.festival-glow{position:absolute;inset:0;pointer-events:none}
.scene-vignette{background:linear-gradient(180deg,rgba(18,30,48,.07),rgba(10,24,42,.09) 36%,rgba(14,19,34,.13) 70%,rgba(9,11,29,.38))}
.night-shade{background:linear-gradient(180deg,rgba(17,18,61,.35) 0%,rgba(19,16,48,.20) 35%,rgba(12,16,47,.46) 100%)}
.festival-glow{background:linear-gradient(180deg,rgba(82,20,55,.10) 0%,rgba(243,125,41,.09) 35%,rgba(48,18,39,.28) 100%)}
/* Shared fantasy UI: live text and live buttons. */
.fantasy-button{position:relative;display:block;border:2px solid #f9d981;box-shadow:0 4px 0 #662e1c,0 8px 15px #130c24a3,inset 0 0 0 3px #b87838,inset 0 2px 7px #fff6c582;
  border-radius:12px 12px 17px 17px;color:#ffecaa;text-shadow:1px 2px 1px #542215;line-height:1.1;font-weight:1000;font-family:Georgia,"Trebuchet MS",serif;
  transition:filter .17s ease,transform .1s ease;background:#a93025;min-height:40px;padding:10px 15px}
.fantasy-button:hover{filter:brightness(1.13) drop-shadow(0 0 7px #ffdc77aa)}
.fantasy-button:active{box-shadow:0 1px 0 #662e1c,0 2px 5px #130c2490,inset 0 0 0 3px #b87838;transform:translateY(4px) scale(.99)}
.fantasy-button::before,.fantasy-button::after{content:"✿";position:absolute;top:50%;transform:translateY(-50%);font-size:clamp(10px,2.8vw,17px);color:#ffdf8b;text-shadow:0 1px #9a4825}
.fantasy-button::before{left:4%}.fantasy-button::after{right:4%}
.fantasy-button.crimson{background:linear-gradient(180deg,#e04d32 0%,#a93025 45%,#771c1b 100%)}
.fantasy-button.parchment{background:linear-gradient(180deg,#fff8db,#e9c691 100%);color:#63371c;text-shadow:0 1px #fff8d8;border-color:#f3d18f}
.fantasy-button.walnut{background:linear-gradient(#ad6e3c,#60351e);color:#ffdfa5}
/* Start screen */
.title-emblem{position:absolute;z-index:3;width:64%;left:18%;top:35.2%;height:22%;display:flex;align-items:center;justify-content:center;flex-direction:column;
  background:radial-gradient(ellipse at center,rgba(82,30,17,.96) 0%,rgba(105,40,16,.92) 59%,rgba(42,26,27,.08) 77%,transparent 81%);
  filter:drop-shadow(0 8px 12px #220e1b88)}
.title-emblem::before{content:"";position:absolute;inset:8% 1%;border-radius:48%;border:clamp(2px,.8vw,5px) ridge #e6a85c;box-shadow:inset 0 0 0 3px #63311e,0 0 16px #ffdb8280;opacity:.94;z-index:-1}
.logo-ornament{margin-bottom:-2%;font-size:clamp(11px,3.5vw,23px);color:#ffe0a1;text-shadow:0 1px #5d2415}
.title-emblem h1{margin:0;line-height:1.13;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:clamp(77px,21vw,142px);font-weight:1000;letter-spacing:-.09em;padding-right:.08em;
  background:linear-gradient(#fff8c4 4%,#ffe08c 38%,#ffb638 53%,#ee8428 85%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1.1px #913b1b;filter:drop-shadow(2px 4px 1px #4c1a11) drop-shadow(0 0 6px #f9c86b78);}
.logo-tassels{position:absolute;bottom:0;width:100%;display:flex;justify-content:space-between;padding:0 12%}
.logo-tassels span{height:clamp(18px,4vw,30px);width:4px;background:#ca3e31;border-radius:6px;box-shadow:0 6px 0 2px #a42126}
.intro-zodiacs{position:absolute;inset:0;pointer-events:none;z-index:2}
.zodiac-floating{position:absolute;left:var(--x);top:var(--y);width:var(--d);aspect-ratio:1;border-radius:50%;filter:drop-shadow(0 0 7px var(--glow)) drop-shadow(0 4px 6px #11163392);transform:translate(-50%,-50%);animation:floatMedallion var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay)}
.zodiac-floating img{width:100%;height:100%;object-fit:contain;display:block}
.intro-actions{position:absolute;z-index:5;bottom:9.2%;left:18%;width:64%;display:grid;gap:12px}
.intro-actions .fantasy-button{font-size:clamp(23px,6.1vw,39px);height:clamp(45px,7.2vh,68px)}
.intro-actions .help-button{font-size:clamp(20px,5vw,32px);height:clamp(44px,6.2vh,59px)}
.petals{position:absolute;z-index:1;inset:0;pointer-events:none;overflow:hidden}
.petals span{position:absolute;top:-5%;color:#ffd0df;text-shadow:0 1px #cc6492;opacity:.8;animation:petalFall linear infinite}
.petals span:nth-child(1){left:14%;font-size:12px;animation-duration:11s;animation-delay:-2s}
.petals span:nth-child(2){left:72%;font-size:15px;animation-duration:15s;animation-delay:-10s}
.petals span:nth-child(3){left:49%;font-size:9px;animation-duration:13s;animation-delay:-6s}
.petals span:nth-child(4){left:89%;font-size:13px;animation-duration:17s;animation-delay:-4s}
@keyframes floatMedallion{from{transform:translate(-50%,-50%) translateY(-4px) rotate(-3deg)}to{transform:translate(-50%,-50%) translateY(5px) rotate(3deg)}}
@keyframes petalFall{0%{transform:translate(0,-20px) rotate(0)}100%{transform:translate(-42px,110vh) rotate(570deg)}}
/* Gameplay */
.game{display:none;flex-direction:column;gap:1.4%;padding:2.1% 2.4% 2.5%;background:linear-gradient(165deg,#25395e,#182a4a)}
.game.active{display:flex}
.game-hud{flex:none;height:11.7%;display:flex;align-items:stretch;gap:1.8%;min-height:0}
.hud-panel{border:2.3px ridge #f0be66;border-radius:10px;box-shadow:inset 0 0 0 2px #a36739,0 3px 6px #0a10207d;background:linear-gradient(155deg,#7d4629,#4c2a20);display:flex;flex-direction:column;justify-content:center;color:#fff0bb;min-width:0;position:relative}
.hud-kicker{font-weight:900;letter-spacing:.02em;color:#ffdfa0;text-shadow:0 1px #4f2519;font-size:clamp(10px,2.3vw,15px)}
.target-panel{flex:1;padding:3% 2% 3% 3%}
.score-panel{width:22%;text-align:center;align-items:center;padding:2% 0}
.score-panel strong{font-size:clamp(26px,7vw,46px);line-height:1.15;font-weight:1000;color:#ffe19b;text-shadow:0 2px #5a281d}
.clock-panel{width:29%;align-items:center;text-align:center;padding:1.8% 2%}
.clock-panel strong{font-size:clamp(17px,4.4vw,26px);color:#fff3c6;text-shadow:0 2px #39222e;white-space:nowrap;line-height:1.23}
.timer-track{width:92%;height:clamp(8px,1.4vh,15px);border:1.5px solid #d5a35b;background:#331f28;border-radius:99px;overflow:hidden;margin-top:2%}
.timer-fill{height:100%;background:linear-gradient(90deg,#33c1c1,#53e4dd);width:100%;transform-origin:left;will-change:transform}
.arena-wrap{flex:1;min-height:0;position:relative;overflow:hidden;border:3px ridge #eec77e;border-radius:16px;box-shadow:inset 0 0 0 2px #5e422f,0 4px 10px #07132b99;background:#204a64}
#arena{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}
.arena-message{position:absolute;left:50%;top:2%;transform:translateX(-50%);font-weight:900;text-align:center;color:#fff4be;text-shadow:0 2px #563127,0 0 10px #15192d;font-size:clamp(15px,4vw,25px);white-space:nowrap;max-width:100%;pointer-events:none}
.arena-message:empty{display:none}
.legacy-accessories{display:none!important}
/* Game over */
.end-content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9% 7% 12%;gap:3%}
.end-title{font:bold italic clamp(46px,12vw,75px)/1 Georgia,serif;letter-spacing:-.04em;color:#d9e6fa;text-align:center;text-shadow:0 3px #45506b,0 6px 5px #10112b,0 0 14px #c9d4fd7a;margin:0}
.sad-mouse{width:79%;aspect-ratio:302/131;position:relative;margin:2% 0;animation:sadBreathe 3s ease-in-out infinite alternate}
.sad-mouse img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 13px #050d20)}

.ending-reason{font-size:clamp(12px,3.1vw,19px);text-align:center;line-height:1.45;max-width:91%;color:#f8eddd;text-shadow:0 2px 4px #061131;margin:0;min-height:5%}
.wood-results,.champion-board{width:100%;background:linear-gradient(160deg,#814b2d,#4a2924);border:3px ridge #ecc274;border-radius:15px;box-shadow:inset 0 0 0 3px #a46a3a,0 8px 14px #071024b0;color:#ffebbb}
.wood-results{padding:5% 4%;display:grid;gap:10px}
.wood-results>div{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:clamp(13px,3.4vw,20px)}
.wood-results strong{color:#ffe28d;font-size:clamp(16px,4.2vw,25px);text-align:right}
.end-actions,.victory-actions{width:100%;display:flex;gap:3%}
.end-actions .fantasy-button,.victory-actions .fantasy-button{flex:1;min-width:0;font-size:clamp(16px,4.1vw,24px);min-height:clamp(46px,6.4vh,64px)}
@keyframes sadBreathe{from{transform:translateY(2px)}to{transform:translateY(-3px)}}
/* Victory */
.victory-content{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2.2%;padding:8% 5.5% 5%}
.victory-heading{text-align:center;flex:none;filter:drop-shadow(0 4px 5px #8e471d)}
.victory-heading h2{font:bold clamp(27px,7.2vw,46px)/1 Georgia,serif;letter-spacing:-.035em;margin:0;color:#ffe091;-webkit-text-stroke:.7px #88411a;text-shadow:1px 3px #913e1b,0 0 11px #ffd162}
.victory-heading span{display:block;margin-top:1.8%;font-weight:900;letter-spacing:.24em;font-size:clamp(11px,2.5vw,16px);color:#fff2c2;text-shadow:0 1px 4px #572a30}
.trophy-stage{width:100%;min-height:0;flex:1;position:relative;display:flex;align-items:center;justify-content:center}
.trophy-halo{position:absolute;top:14%;left:24%;width:52%;aspect-ratio:1;background:radial-gradient(circle,#fff7bdba 0%,#ffd25e80 36%,transparent 72%);filter:blur(6px);animation:haloPulse 2.6s ease-in-out infinite alternate}
.trophy-art{position:relative;z-index:3;width:39%;height:56%;max-height:320px;filter:drop-shadow(0 6px 10px #7d2c2688);animation:trophyRise .8s .4s both}
.victory-zodiacs{position:absolute;inset:0;z-index:4;pointer-events:none}
.victory-medallion{position:absolute;width:var(--d);aspect-ratio:1;left:var(--x);top:var(--y);transform:translate(-50%,-50%);filter:drop-shadow(0 0 7px #ffdc82c1);animation:medalAppear .45s calc(1.2s + var(--delay)) both,medalFloat 2.6s 1.7s ease-in-out infinite alternate}
.victory-medallion img{width:100%;height:100%}
.champion-board{flex:none;padding:3.5% 3%;text-align:center;animation:panelAppear .65s 1.85s both}
.champion-board>strong{display:block;color:#ffe88c;font-size:clamp(17px,4.7vw,28px)}
.champion-board p{margin:2% 0;font-size:clamp(13px,3.1vw,18px)}
.champion-board b{color:#fff1b0;font-weight:1000}
#newRecord{display:block;color:#ffef79;font-weight:1000;letter-spacing:.05em;font-size:clamp(12px,3.5vw,19px)}
#newRecord[hidden]{display:none}
.victory-actions{flex:none;animation:panelAppear .5s 2.7s both}
.skip-victory{background:transparent;border:0;text-decoration:underline;color:#fff0bc;font-size:clamp(11px,2.5vw,16px);cursor:pointer;min-height:30px;z-index:8;text-shadow:0 1px 3px #35223d}
.victory.skip-animations *{animation:none!important;transition:none!important}
.firework{position:absolute;z-index:2;color:#ffe28e;text-shadow:0 0 10px #ffdd71;pointer-events:none;opacity:.86;animation:firework 2s ease-in-out infinite alternate}
.fw1{top:14%;left:12%;font-size:34px}.fw2{top:19%;right:10%;font-size:27px;animation-delay:-1s;color:#ffb9e5}.fw3{top:48%;left:5%;font-size:22px;animation-delay:-.5s}
@keyframes trophyRise{from{transform:translateY(18%) scale(.7);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes medalAppear{from{opacity:0;transform:translate(-50%,-30%) scale(.4)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes medalFloat{from{transform:translate(-50%,-51%)}to{transform:translate(-50%,-46%)}}
@keyframes panelAppear{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes haloPulse{from{opacity:.68;transform:scale(.9)}to{opacity:1;transform:scale(1.1)}}
@keyframes firework{from{opacity:.2;transform:scale(.65) rotate(-5deg)}to{opacity:1;transform:scale(1.23) rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.zodiac-floating,.petals span,.sad-mouse,.victory *,.firework{animation:none!important}}
@media (max-width:380px){.hud-panel{border-width:2px}.hud-kicker{font-size:10px}.clock-panel strong{font-size:17px}.end-content{gap:2.5%}}

.skip-victory[hidden]{display:none}


/* FINY V6: interactive Start screen plus simplified gameplay overlay. */
@media (max-aspect-ratio:9/16){
  .game-frame{width:100vw;height:100dvh;aspect-ratio:auto;max-width:none}
}
.intro{background-image:url('assets/finy_world_day.webp');background-position:center center;background-size:cover;isolation:isolate}
.intro .scene-vignette{
  background:linear-gradient(180deg,rgba(17,23,38,.17) 0%,rgba(16,26,39,.01) 18%,rgba(18,24,39,.12) 50%,rgba(14,18,32,.08) 70%,rgba(10,13,29,.4) 100%);
  z-index:0;
}
.intro-atmosphere{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.mist-cloud{position:absolute;width:60%;height:9%;border-radius:50%;opacity:.14;filter:blur(13px);background:radial-gradient(ellipse,#fffbe8,transparent 70%);animation:mistTravel 19s ease-in-out infinite alternate}
.cloud-one{top:31%;left:-25%}.cloud-two{top:53%;right:-15%;animation-delay:-9s;animation-duration:24s}
.warm-spark{position:absolute;color:#fff5bd;text-shadow:0 0 9px #fff9ac,0 0 15px #ffd76c;opacity:.64;animation:twinkle 3.2s ease-in-out infinite alternate}
.spark-one{left:39%;top:32%;font-size:clamp(10px,2.5cqw,18px)}
.spark-two{right:31%;top:49%;font-size:clamp(8px,2cqw,15px);animation-delay:-1.4s}
.spark-three{left:46%;top:17%;font-size:clamp(8px,2cqw,15px);animation-delay:-2.2s}
.intro-zodiacs{position:absolute;inset:0;z-index:3;pointer-events:none}
.zodiac-floating{
  position:absolute;left:var(--x);top:var(--y);width:var(--d);height:var(--d);
  border-radius:50%;isolation:isolate;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 3px 4px rgba(11,26,33,.52));
  animation:startPortraitFloat var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay);
  will-change:transform;
}
.zodiac-floating img{position:relative;z-index:2;width:100%;height:100%;display:block;object-fit:contain;border-radius:50%;
  box-shadow:0 0 0 1.3px rgba(255,246,189,.67),0 0 12px 2px var(--glow);}
.medallion-halo{position:absolute;inset:-5%;border:2px solid var(--glow);border-radius:50%;filter:blur(4px);opacity:.65;animation:haloBreathe 3.8s ease-in-out infinite alternate;pointer-events:none}
.title-emblem{position:absolute;z-index:4;left:19%;top:31%;width:62%;height:auto;aspect-ratio:900/430;display:block;background:none;filter:drop-shadow(0 7px 9px rgba(23,13,15,.55));pointer-events:none;}
.title-emblem::before{display:none}
.finy-logo{display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 0 3px #fadd7b88)}
.logo-sparkle{position:absolute;top:19%;right:10%;color:#fff9c7;font-size:clamp(9px,3cqw,24px);text-shadow:0 0 7px #fff08a,0 0 14px #ffb33a;animation:twinkle 2.7s ease-in-out infinite alternate;opacity:.7}
.intro-actions{position:absolute;z-index:8;left:18%;width:64%;top:85%;height:9.5%;bottom:auto;display:flex;align-items:stretch;}
.start-ornate-button{position:relative;display:grid;place-items:center;width:100%;border:0;background-color:transparent;padding:0;cursor:pointer;appearance:none;-webkit-appearance:none;background-repeat:no-repeat;background-position:center;background-size:100% 100%;font-family:Georgia,"Trebuchet MS",serif;font-weight:900;letter-spacing:-.02em;white-space:nowrap;text-align:center;transition:transform .09s ease,filter .16s ease;filter:drop-shadow(0 3px 4px #1a081c7a);user-select:none;-webkit-user-select:none;touch-action:manipulation;height:100%;flex:none;background-image:url('assets/finy_btn_start.svg');font-size:clamp(21px,6.7cqw,43px);color:#fff2bc;text-shadow:0 2px 2px #4c1d16,0 0 6px #ffe2918a}
.start-ornate-button span{transform:translateY(-2px);pointer-events:none}
.start-ornate-button:hover{filter:brightness(1.09) drop-shadow(0 0 7px #ffe4a86b)}
.start-ornate-button:active{transform:scale(.96);filter:brightness(1.2)}
.start-ornate-button:focus-visible{outline:3px solid #fff6bd;outline-offset:2px;border-radius:14px}
.intro .petals{z-index:7;pointer-events:none}
.intro .petals span:nth-child(5){left:7%;font-size:11px;animation-duration:14s;animation-delay:-8s}
.intro .petals span:nth-child(6){left:35%;font-size:14px;animation-duration:18s;animation-delay:-12s}
.intro .petals span:nth-child(7){left:61%;font-size:10px;animation-duration:16s;animation-delay:-4s}
.intro .petals span:nth-child(8){left:95%;font-size:15px;animation-duration:19s;animation-delay:-15s}
@keyframes startPortraitFloat{from{transform:translate(-50%,-50%) translateY(-1.5px) rotate(-1deg)}to{transform:translate(-50%,-50%) translateY(2.5px) rotate(1deg)}}
@keyframes haloBreathe{from{opacity:.34;transform:scale(.99)}to{opacity:.77;transform:scale(1.04)}}
@keyframes mistTravel{from{transform:translateX(-8%)}to{transform:translateX(20%)}}
@keyframes twinkle{from{opacity:.23;transform:scale(.82)}to{opacity:.86;transform:scale(1.14)}}
@media(prefers-reduced-motion:reduce){
  .intro .zodiac-floating,.intro .medallion-halo,.intro .petals span,.intro .mist-cloud,.intro .warm-spark,.intro .logo-sparkle{animation:none!important;transform:none!important}
  .intro .zodiac-floating{transform:translate(-50%,-50%)!important}
}

/* V6 gameplay: share Start's CLEAN scenery; dynamic HUD only target portrait, score and clock. */
.game{background: url('assets/finy_world_day.webp') center center / cover no-repeat;}
.arena-wrap{background: rgba(10,24,39,.15);}
.target-panel{flex:none;width:23%;padding:1%;align-items:center;justify-content:center;}
.target-panel #targetIcon{display:block;width:min(15cqw,68px);height:min(15cqw,68px);aspect-ratio:1;object-fit:contain;border-radius:50%;filter:drop-shadow(0 0 4px #ffd56b88);}
.score-panel{flex:1;width:auto;}
.clock-panel{flex:none;width:36%;}
/* Neither the level nor stage number is shown during play; state remains intact. */


/* FINY V7 — display-only minimalism. Gameplay calculations are unchanged. */
.clock-panel{
  padding:0 3.5%;align-items:center;justify-content:center;
  width:36%;
}
.clock-panel .timer-track{
  width:100%;height:clamp(12px,2.65cqw,20px);
  margin:0;border:2px solid #f0c778;
  background:linear-gradient(180deg,#372015,#44291d);
  box-shadow:0 0 0 1px #794021,inset 0 2px 5px rgba(7,10,17,.56),0 1px 5px rgba(255,226,146,.25);
  border-radius:999px;
  overflow:hidden;
}
.clock-panel .timer-fill{
  height:100%;width:100%;
  background:#36b8b7;
  box-shadow:inset 0 2px 5px #e0ffeb88,0 0 8px #45d7d377;
  border-radius:999px;
  transform:scaleX(1);transform-origin:left center;
  will-change:transform,background-color;
}
/* Game Over: centered golden numeric score only. */
.end-content{gap:3.6%;justify-content:center}
.wood-results{
  display:flex;align-items:center;justify-content:center;
  width:68%;min-height:clamp(72px,16cqw,118px);
  padding:3% 5%;
  border-radius:14px;
}
.wood-results #endScore{
  display:block;margin:auto;text-align:center;white-space:nowrap;
  font-size:clamp(40px,11cqw,78px);
  font-weight:1000;line-height:1.1;
  color:#ffdf78;
  text-shadow:0 2px 0 #8a4b24,0 4px 9px rgba(0,0,0,.55),0 0 10px #f3bd6470;
  font-variant-numeric:tabular-nums;
}
/* Victory: use space formerly occupied by the statistics for the trophy & animals. */
.victory-content{gap:3.2%;padding:8% 5.5% 6%}
.trophy-stage{flex:1;min-height:0}
.trophy-art{width:43%;height:61%}
.victory-actions{margin-top:1%;}
@media(max-width:380px){
  .clock-panel{padding:0 2.5%}
  .wood-results{width:72%}
}

/* FINY V8: independent quiet music control, no changes to gameplay HUD */
.game-frame{position:relative}
.music-toggle{
  position:absolute;z-index:50;top:calc(7px + env(safe-area-inset-top, 0px));
  left:calc(7px + env(safe-area-inset-left, 0px));
  width:clamp(29px,6.7cqw,38px);height:clamp(29px,6.7cqw,38px);
  display:grid;place-items:center;line-height:1;font-size:clamp(17px,4.5cqw,22px);
  border:1.5px solid #f7d77f;border-radius:50%;
  color:#ffe5a6;background:linear-gradient(140deg,#613521,#8a4526);
  box-shadow:0 2px 7px #071022a0,inset 0 0 0 1px #ab7b4a;
  cursor:pointer;opacity:.85;touch-action:manipulation;
}
.music-toggle[aria-pressed="false"]{opacity:.55;filter:grayscale(.3)}
.music-toggle:focus-visible{outline:3px solid #d3ffff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.music-toggle{transition:none}}

/* V9 unified mouse/touch/pen feedback; touches on the arena cannot scroll or select text. */
#arena, .arena-wrap { -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
#arena { touch-action:none; cursor:pointer; }
button { touch-action:manipulation; user-select:none; -webkit-user-select:none; }
button:active { filter:brightness(1.13); }