:root{color-scheme:dark;--cream:#fff3cd;--gold:#ffce43;--blue:#04bcff;--red:#ff244f}*{box-sizing:border-box}[hidden]{display:none!important}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#050918}body{display:grid;place-items:center;font-family:Arial,Helvetica,sans-serif;color:var(--cream)}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible{outline:3px solid #fffbc4;outline-offset:4px}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}#stage{position:relative;width:min(100vw,calc(100dvh * 16/9));aspect-ratio:16/9;overflow:hidden;background:#082869;isolation:isolate;container-type:size;box-shadow:0 0 100px #000a}#scene,#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;user-select:none}#scene{z-index:0}#game{z-index:2}.wood{background:#6a362a url('art-v3__wood-board.svg') center/100% 100% no-repeat;border-radius:2.4cqw;filter:drop-shadow(0 8px 2px #10081888);position:relative}.home{position:absolute;inset:0;z-index:4;pointer-events:none}.logo{position:absolute;top:7%;left:50%;width:43%;height:34%;transform:translateX(-50%) rotate(-1deg);display:flex;align-items:center;justify-content:center}.logo:before,.logo:after{content:'';position:absolute;width:1.6%;height:20%;top:-5%;background:repeating-linear-gradient(35deg,#c29653 0 4px,#f5d699 5px 8px,#986428 9px 11px);border:1px solid #593819;border-radius:9px;box-shadow:1px 3px 4px #281425;z-index:2}.logo:before{left:8%}.logo:after{right:8%}.crest{position:absolute;left:50%;top:-22%;transform:translateX(-50%);width:17%;aspect-ratio:1}.crest svg{width:100%;height:100%;fill:#ffcd3a;stroke:#b85f15;stroke-width:3;filter:drop-shadow(0 4px 0 #5e2912)}h1{margin:0;padding:2% 0 0;font-family:Impact,'Arial Black',sans-serif;line-height:.94;font-weight:900;letter-spacing:.08cqw;text-align:center;font-size:6.9cqw;color:#14bdfd;paint-order:stroke fill;-webkit-text-stroke:.2cqw #071c35;text-shadow:0 .28cqw 0 #0082cc,0 .5cqw 0 #024989,0 .75cqw 0 #11182b,0 .9cqw .4cqw #130b19}h1 span{display:block}h1 span:last-child{font-size:5.6cqw;color:#ffd34c;-webkit-text-stroke:.18cqw #39201a;text-shadow:0 .28cqw 0 #e88b14,0 .52cqw 0 #9f390c,0 .72cqw 0 #2e1616}.logo-star{position:absolute;font-style:normal;color:#ffd54d;font-size:3.6cqw;-webkit-text-stroke:1px #995013;text-shadow:0 3px 0 #552014}.logo-star.one{left:4%;top:10%;transform:rotate(-16deg)}.logo-star.two{right:3%;top:10%;transform:rotate(12deg)}.home-actions{position:absolute;left:50%;top:46%;transform:translateX(-50%);width:29%;height:41%;display:flex;flex-direction:column;gap:3%;pointer-events:auto}.art-button{display:block;position:relative;width:100%;height:100%;min-height:0;border:0;padding:0;background:transparent center/100% 100% no-repeat;transition:filter .15s,transform .15s;filter:drop-shadow(0 5px 2px #10091788)}.art-button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.art-button:hover:not(:disabled){filter:brightness(1.17) drop-shadow(0 0 9px #ffc77180);transform:scale(1.025)}.art-button:active:not(:disabled){transform:scale(.98) translateY(2px)}.art-button:disabled{filter:saturate(.3);opacity:.6}.art-play{background-image:url('art-v3__button-play.webp');flex:1.2}.art-levels{background-image:url('art-v3__button-levels.webp');flex:1}.art-settings{background-image:url('art-v3__button-settings.webp');flex:1}.art-ready{background-image:url('art-v3__button-ready.webp')}.art-back{background-image:url('art-v3__button-back.webp')}.art-resume{background-image:url('art-v3__button-resume.webp')}.art-restart{background-image:url('art-v3__button-restart.webp')}.art-home{background-image:url('art-v3__button-home.webp')}.art-next{background-image:url('art-v3__button-next.webp')}.art-replay{background-image:url('art-v3__button-replay.webp')}
.menu-screen,.overlay{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;pointer-events:none}.menu-screen>.wood,.overlay>.wood{pointer-events:auto;animation:panel-in .2s ease-out}@keyframes panel-in{from{opacity:0;translate:0 12px;scale:.98}to{opacity:1;translate:0 0;scale:1}}.plaque{font-family:Georgia,'Times New Roman',serif;font-size:3.6cqw;font-weight:900;letter-spacing:.16cqw;text-shadow:0 2px 0 #ffa86a;color:#31120e;text-align:center;margin:0;background:linear-gradient(#efb680,#d8894a);border:3px solid #4d261e;border-radius:1cqw;box-shadow:inset 0 2px 1px #fff0bc,0 4px 0 #411e18;padding:2% 5%}.plaque:before,.plaque:after{content:'★';font-size:2.1cqw;vertical-align:middle;margin:0 3%}.duelers-panel{width:47%;height:86%;padding:2.3% 2.8% 2%}.dueler-cards{display:flex;gap:4%;height:66%;margin-top:3%}.dueler-card{width:48%;height:100%;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#ffdc9f,#d59458);border:3px solid #522817;border-radius:1.1cqw;box-shadow:inset 0 0 20px #9a4c2955}.dueler-card:before{content:'';position:absolute;inset:8px;border:1px dashed #9e5d3299;border-radius:.7cqw;pointer-events:none}.dueler-card canvas{position:absolute;inset:0 0 18%;width:100%;height:82%}.accessories{position:absolute;left:6%;right:6%;bottom:4%;height:12%;display:flex;justify-content:center;gap:10%}.choice{display:flex;align-items:center;justify-content:center;gap:8%;width:43%;border:2px solid #5d301c;border-radius:10px;background:linear-gradient(#fff0bc,#d89c58);box-shadow:inset 0 2px 0 white,0 3px 1px #713922;color:#5f301b}.choice svg{width:60%;height:100%;fill:currentColor;stroke-width:1}.choice b{font-size:2cqw}.choice:hover{outline:2px solid #33d8ff}.skins{display:flex;justify-content:center;gap:2%;height:5.8%;margin:2% 0}.skin{aspect-ratio:1;border:2px solid #e5b57b;border-radius:50%;box-shadow:inset -4px -5px 6px #0007,inset 3px 3px 5px #fff7,0 2px 0 #201425;position:relative}.skin.selected{outline:3px solid #75e9ff;outline-offset:2px}.duel-actions{display:flex;gap:5%;height:12%;margin-top:1%}.duel-actions .art-ready{width:59%}.duel-actions .art-back{width:41%}.levels-panel{width:43%;height:77%;padding:2.5% 3%}.level-grid{height:68%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4%;margin-top:4%}.level{position:relative;justify-self:center;aspect-ratio:1;border:3px solid #243a65;border-radius:50%;background:radial-gradient(ellipse at 35% 20%,#9decff 0,#299ef1 23%,#0369c2 45%,#173b70 76%,#abd7f6 79%,#3d75a5 84%,#142846 88%,#e0ebff 92%,#3c5a7e 96%);box-shadow:0 5px 1px #251623,0 8px 14px #21163866;color:#ffd953;font-family:Impact,'Arial Black',sans-serif;font-size:3.2cqw;isolation:isolate}.level svg{position:absolute;inset:16%;width:68%;height:68%;fill:#73e6ff;stroke:#0b4982;stroke-width:3;z-index:-1}.level span{paint-order:stroke fill;-webkit-text-stroke:2px #522b1b;text-shadow:0 3px 0 #a16a24}.level:disabled{filter:saturate(.06);opacity:.75}.level:disabled svg{fill:#8899b0;stroke:#172c4d;width:46%;height:46%;inset:27%;z-index:0}.level:not(:disabled):hover{outline:3px solid #ffd34c;filter:brightness(1.16);scale:1.045}.level.latest{outline:3px solid #ffd447;box-shadow:0 0 19px #ffa619b0}.back-button,.primary{color:#fff6da;font-family:Georgia,'Times New Roman',serif;font-weight:900;letter-spacing:.07cqw;paint-order:stroke fill;-webkit-text-stroke:1px #17375a;text-shadow:0 2px 1px #142034;display:flex;align-items:center;justify-content:center;background:linear-gradient(#14b8ff,#0074ef 35%,#0467cf 51%,#023c9c);border:3px solid #1c243f;border-radius:1.3cqw;box-shadow:inset 0 3px 0 #9beaef,inset 0 -4px 0 #003890,0 4px 0 #4a281d,0 0 0 3px #aa642c;font-size:2cqw;padding:2% 3%}.back-button{width:66%;height:10%;margin:4% auto 0}.primary:hover,.back-button:hover{filter:brightness(1.2)}.green{background:linear-gradient(#65ef43,#04c727 42%,#05ae1a 52%,#087710);box-shadow:inset 0 3px 0 #d2ffb0,inset 0 -4px 0 #075618,0 4px 0 #4a281d,0 0 0 3px #b97737}.purple{background:linear-gradient(#c249ff,#850bf5 50%,#6713bf);box-shadow:inset 0 3px 0 #ebaeff,inset 0 -4px 0 #50107e,0 4px 0 #4a281d,0 0 0 3px #ab672e}.settings-panel{width:37%;height:78%;padding:2.5% 3%}.settings-list{height:65%;display:flex;flex-direction:column;gap:4%;padding-top:6%}.setting{flex:1;width:100%;min-height:0;display:flex;align-items:center;gap:5%;border:2px solid #391b20;border-radius:1.1cqw;padding:0 5%;background:linear-gradient(#743d2cdd,#56271ddd);box-shadow:inset 0 2px 0 #dd9b6d,0 3px 0 #3c1b19;color:#fff0cb}.setting>svg{width:2.7cqw;height:2.7cqw;stroke-width:2.2;flex-shrink:0}.setting strong{font-family:Georgia,serif;font-size:1.7cqw;text-shadow:0 2px 1px #351416}.toggle{margin-left:auto;position:relative;display:flex;align-items:center;width:29%;height:53%;border:2px solid #122b16;border-radius:99px;background:linear-gradient(#2df349,#00ac22);box-shadow:inset 0 2px 0 #c8ffc5,0 3px 1px #27111c;padding-left:10%;font-weight:900;font-size:1.2cqw;color:white}.toggle i{position:absolute;right:3%;height:86%;aspect-ratio:1;border:2px solid #2e4e49;border-radius:50%;background:linear-gradient(#fff,#dae4ee);box-shadow:0 2px 2px #10201c}.setting[aria-pressed=false] .toggle{background:linear-gradient(#76869a,#435163);border-color:#26283f;padding-left:37%;font-size:1cqw;box-shadow:inset 0 2px 0 #bbc7d4}.setting[aria-pressed=false] .toggle i{right:auto;left:3%}.chevron{margin-left:auto;font-size:3.5cqw}.controls-panel{width:43%;height:58%;padding:3%}.control-steps{display:flex;justify-content:space-around;height:42%;margin-top:8%;text-align:center}.control-steps>div{display:flex;flex-direction:column;gap:14%;align-items:center;justify-content:center;width:30%}.control-steps span{font-size:3.4cqw;color:#ffe56a;font-family:Impact,sans-serif}.control-steps svg{width:4cqw;height:4cqw}.control-steps strong{font-size:1.4cqw;font-family:Georgia,serif}.key-controls{display:flex;justify-content:center;gap:7%;font-size:.8cqw;margin-top:5%}kbd{padding:3px;border:1px solid #daa977;border-radius:4px}.controls-panel .back-button{height:14%}
#hud{position:absolute;inset:0;z-index:3;pointer-events:none}.health{position:absolute;top:3%;width:28%;height:5.8%;padding:4px;overflow:hidden;border-radius:99px;background:#172440;border:3px solid #10233b;box-shadow:0 3px 0 #0009,inset 0 1px 0 #a4d2f9,0 -2px 0 #8ba0c466}.health.left{left:3%}.health.right{right:3%}.health>div:first-child{position:absolute;top:4px;bottom:4px;left:4px;max-width:calc(100% - 8px);background:linear-gradient(#6cf4ff,#08b1fc 28%,#029fec 52%,#0082bc);border-radius:99px;box-shadow:inset 0 3px 0 #aaf5ff;transition:width .12s}.health.right>div:first-child{left:auto;right:4px;background:linear-gradient(#ff8da6,#ff1d58 28%,#f4034f 52%,#b90244);box-shadow:inset 0 3px 0 #ffd5e0}.hearts{position:absolute;inset:9% auto 6% 4%;display:flex;gap:5px;width:31%}.right .hearts{left:auto;right:4%}.hearts svg{width:33%;height:100%;fill:#ff244f;stroke:#230b21;stroke-width:2.1;filter:drop-shadow(0 2px 0 #ff81a255)}.hearts svg.empty{fill:#4f2255;opacity:.65}.round{position:absolute;left:50%;top:1.4%;transform:translateX(-50%);min-width:15%;height:11%;padding:.5% 1.4%;text-align:center;border:2px solid #487cb37a;border-radius:3cqw;background:linear-gradient(#092454ee,#061a37ee);box-shadow:0 4px 6px #06173780}.round span{display:block;white-space:nowrap;font-size:1.5cqw;font-weight:900;letter-spacing:.04cqw}.round strong{display:block;margin-top:2%;font-size:2.4cqw;color:#ffda6a;font-family:Impact,sans-serif;text-shadow:0 2px 0 #583826}.tools{position:absolute;right:2%;bottom:2%;z-index:11;display:flex;gap:7px}.icon{width:2.5cqw;height:2.5cqw;min-width:24px;min-height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid #91d8ef6b;background:linear-gradient(#163e6ac9,#08152bdb);box-shadow:0 2px 2px #0005;color:#e1edff}.icon svg{width:65%;height:65%}.icon:hover{filter:brightness(1.5)}.icon.muted{opacity:.55}.overlay{z-index:8}.result-panel{width:38%;height:56%;padding:4.5% 4% 2%;text-align:center}.result-star{position:absolute;top:-13%;left:50%;translate:-50% 0;font-size:6cqw;line-height:1;color:#ffd849;-webkit-text-stroke:2px #b86b1b;text-shadow:0 4px 0 #673318}.result-panel h2,.pause-panel h2{font-family:Impact,'Arial Black',sans-serif;font-size:4.7cqw;line-height:1;letter-spacing:.02cqw;margin:0 0 4%;color:#ffcf39;paint-order:stroke fill;-webkit-text-stroke:.17cqw #3d1716;text-shadow:0 .28cqw 0 #e17511,0 .5cqw 0 #652718}.result-panel[data-verdict=win] h2{color:#3accff;text-shadow:0 .28cqw 0 #0879d8,0 .5cqw 0 #003765}.result-panel[data-verdict=loss] h2{color:#ff4562}.stats{display:flex;gap:9%;justify-content:center;margin:3% 0 5%;font-size:1.1cqw;color:#ffe9aa;text-shadow:0 2px 1px #371d1d}.stats b{font-weight:700}.result-panel .art-next{height:28%}.result-panel .art-replay{height:24%;margin-top:3%}.result-panel .primary{width:100%;height:24%;margin-top:3%}.small-home{padding:3% 8%;border:0;background:transparent;color:#ffe3a9;font-size:.85cqw;font-weight:800;letter-spacing:.1cqw}.small-home:hover{color:white}.pause-panel{width:32%;height:70%;padding:4% 3% 3%;text-align:center;display:flex;flex-direction:column;gap:2%}.pause-panel h2{margin-bottom:3%;font-size:4.5cqw}.pause-panel .art-button{flex:1}.pause-panel .primary{flex:.75;width:94%;margin:2% auto 3%;min-height:0;font-size:2cqw}.error-panel{padding:3%;width:43%;text-align:center}.error-panel h2{font-size:2.5cqw}.error-panel p{font-size:1cqw}#bonus-start{position:absolute;top:35%;left:50%;width:20%;transform:translateX(-50%);z-index:6}.bonus-symbol{text-align:center;color:#ffda4a;font-size:6cqw;text-shadow:0 3px 0 #6c2014}#bonus-start .primary{width:100%;height:6cqw}#practice-label{position:absolute;bottom:3.2%;left:50%;translate:-50% 0;z-index:5;background:#142953b5;padding:.4% 1.4%;border:1px solid #5c96c9;border-radius:99px;font-size:.85cqw;font-weight:900;letter-spacing:.18cqw}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(max-width:700px){.tools{bottom:1%;right:1%;gap:4px}.health{border-width:2px;padding:2px}.hearts{gap:2px}.round{border-width:1px}.plaque{border-width:2px}.choice{border-radius:6px}.level{border-width:2px}.skin.selected{outline-width:2px}.primary,.back-button{border-width:2px;-webkit-text-stroke:0}.stats{font-size:1.25cqw}.key-controls{font-size:1cqw}}

/* Final composition and keyboard-only focus treatment. */
.crest{top:-15%}.wood{background-color:transparent}.logo{height:33%;top:8%}.logo h1{transform:rotate(.5deg)}

.toggle{padding-left:.8cqw}.setting[aria-pressed=false] .toggle{padding-left:2.3cqw}

/* High-fidelity wooden art button adaptations and ad retry styles */
.levels-panel .art-back, .settings-panel .art-back, .controls-panel .art-back { width: 48%; height: 11%; margin: 3% auto 0; }
.pause-panel .art-levels { flex: 1; margin: 1% 0; }
.result-panel { width: 44%; height: 66%; padding: 4.5% 4% 2%; }
.result-panel .art-next { height: 26%; }
.result-panel .art-replay { height: 22%; margin-top: 2%; }
.art-ad-retry {
  display: flex; align-items: center; justify-content: center; gap: 3%;
  width: 100%; height: 26%; margin-top: 2%;
  background: linear-gradient(180deg, #ffd752 0%, #f59e0b 46%, #d97706 72%, #b45309 100%);
  border: 3px solid #fef3c7; border-radius: 1.2cqw;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45), inset 0 2px 1px #fffbeb, 0 4px 0 #451a03;
  color: #451a03; font-family: Impact, 'Arial Black', sans-serif; font-size: 2.2cqw; letter-spacing: .06cqw;
  text-shadow: 0 1px 0 #fde68a; cursor: pointer; transition: filter .15s, transform .15s;
}
.art-ad-retry:hover { filter: brightness(1.12) drop-shadow(0 0 14px #fbbf24); transform: scale(1.025); }
.art-ad-retry .ad-badge {
  background: #451a03; color: #fef08a; font-size: 1.2cqw; padding: 2px 7px;
  border-radius: 4px; font-family: Arial, sans-serif; font-weight: 900; font-style: normal;
}
.art-restart-run {
  background-image: url('art-v3__button-restart.webp');
  width: 100%; height: 22%; margin-top: 2%;
}
#ad-overlay {
  position: absolute; inset: 0; z-index: 25;
  background: rgba(3, 9, 25, 0.94);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(5px);
}
.ad-modal {
  width: 44%; padding: 4%; text-align: center;
  border: 3px solid #f59e0b; border-radius: 1.5cqw;
  box-shadow: 0 0 45px rgba(245, 158, 11, 0.4);
}
.ad-modal h3 {
  font-family: Impact, sans-serif; font-size: 3.2cqw; color: #fde68a; margin: 0 0 3%; letter-spacing: .08cqw;
}
.ad-spinner {
  width: 50px; height: 50px; margin: 18px auto;
  border: 5px solid rgba(254, 240, 138, 0.25); border-top-color: #facc15;
  border-radius: 50%; animation: ad-spin 0.8s linear infinite;
}
@keyframes ad-spin { to { transform: rotate(360deg); } }
#ad-message { position:absolute; bottom:1%; left:15%; width:70%; z-index:25; margin:0; text-align:center; color:#fff; background:#241b28; font:16px Arial,sans-serif; }
#ad-message:empty { display:none; }
#desktop-only { z-index:100; background:#181b23; }
#desktop-only h2 { font-size:28px; }
#desktop-only p { font:18px Arial,sans-serif; }
#ad-overlay { z-index:50; }
.result-panel .art-ad-retry { width: min(340px,90%); }
.result-panel .art-restart-run { width:min(280px,85%); }
.art-ad-retry>span,.art-restart-run>span,#restart-button>span { position:static; width:auto; height:auto; clip:auto; overflow:visible; display:block; font: bold 22px Arial,sans-serif; letter-spacing:0; color:#fff5cf; text-shadow:0 2px 2px #32160a; }
.art-restart-run,#restart-button { background-image:none; background-color:#255b90; border:3px solid #93c6ec; border-radius:8px; }
.result-panel .art-ad-retry,.result-panel .art-restart-run { margin:12px auto; }