:root{--wood: #3a2414;--wood-2: #4e3220;--wood-3: #6b4426;--stone: #efe3c8;--stone-dark: #2e2a27;--gold: #d8a93b;--gold-2: #f3cf6b;--red: #b01e28;--blue: #2f7fe0;--text: #f6ecd6;--muted: #c9b591;--nakhwa: #e8862a;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--wood);color:var(--text);font-family:Cairo,system-ui,sans-serif;overscroll-behavior:none}body{background:radial-gradient(circle at 50% 0%,rgba(216,169,59,.15),transparent 60%),repeating-linear-gradient(45deg,rgba(0,0,0,.12) 0 12px,transparent 12px 24px),var(--wood)}#app{height:100%}button{font-family:inherit}.hidden{display:none!important}.screen{min-height:100%;padding:16px;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:14px}.screen.center{justify-content:center;align-items:stretch}.brand{text-align:center;padding:8px 0 4px}.logo{font-family:Reem Kufi,serif;font-size:clamp(40px,12vw,64px);font-weight:700;color:var(--gold-2);text-shadow:0 3px 0 #6b3d10,0 6px 18px rgba(0,0,0,.5);line-height:1.1}.logo-sub{letter-spacing:.25em;color:var(--muted);font-size:12px;font-weight:600}.panel{background:linear-gradient(180deg,#efe3c814,#00000026),var(--wood-2);border:2px solid var(--wood-3);border-radius:14px;padding:14px 16px;box-shadow:inset 0 0 0 1px #f3cf6b1f,0 6px 18px #00000059}.panel h2,.panel h3{margin:0 0 8px;font-family:Reem Kufi,serif;color:var(--gold-2)}.panel p{margin:6px 0;color:var(--muted);line-height:1.6}.row{display:flex;align-items:center;justify-content:space-between;gap:10px}.hint{font-size:13px;color:var(--muted)}.err{color:#ff8a80;min-height:1.2em}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:12px;padding:10px 18px;font-weight:800;font-size:16px;color:#2a1606;background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 4px #8a5d14,0 6px 14px #00000059;cursor:pointer;transition:transform .08s}.btn:active{transform:translateY(3px);box-shadow:0 1px #8a5d14}.btn:disabled{filter:grayscale(1);opacity:.6;cursor:not-allowed}.btn.big{font-size:20px;padding:14px 18px;width:100%}.btn.alt{background:linear-gradient(180deg,#5aa0ef,var(--blue));color:#fff;box-shadow:0 4px #1b4f8f,0 6px 14px #00000059}.btn.ghost{background:transparent;color:var(--gold-2);border:2px solid var(--wood-3);box-shadow:none}.btn.small{font-size:13px;padding:6px 12px}.login{display:flex;flex-direction:column;gap:10px;text-align:center}.login input{font:inherit;font-size:18px;padding:12px;border-radius:10px;border:2px solid var(--wood-3);background:#2a1a0e;color:var(--text);text-align:center}.profile{display:flex;justify-content:space-between;align-items:center}.pname{font-size:22px;font-weight:800}.pstats{color:var(--muted);font-size:13px}.trophies{font-size:24px;font-weight:800;color:var(--gold-2)}.play{display:flex;flex-direction:column;gap:12px}.deck{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.card{--f1: #fff4b8;--f2: #f2b632;--f3: #9a5a10;--b1: #ffe0a0;--b2: #e2852c;--b3: #6a2e0a;--rib: #7a3a0c;position:relative;aspect-ratio:3 / 4;border-radius:12px;border:4px solid transparent;background:linear-gradient(180deg,#ffffff73,#fff0 22%) padding-box,radial-gradient(ellipse 34% 7% at 50% 74%,rgba(40,10,0,.45),transparent 100%) padding-box,repeating-conic-gradient(from 4deg at 50% 40%,rgba(255,255,255,.16) 0 7deg,transparent 7deg 18deg) padding-box,radial-gradient(circle at 50% 38%,var(--b1),var(--b2) 52%,var(--b3) 100%) padding-box,linear-gradient(160deg,var(--f1),var(--f2) 40%,var(--f3) 75%,var(--f2)) border-box;box-shadow:0 0 0 2px #1a0d04,0 5px 0 1px #1a0d04,0 9px 14px #00000080,inset 0 0 0 1.5px #0000008c,inset 0 -14px 18px #00000040;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none;cursor:pointer}.card.type-spell{--f1: #ffe2ff;--f2: #e46ad8;--f3: #6a1a72;--b1: #ffc8f4;--b2: #b0409e;--b3: #3e0c44;--rib: #5a1460}.card.type-building{--f1: #f2fbff;--f2: #8ec4e6;--f3: #2e5674;--b1: #d8f0ff;--b2: #4a86b0;--b3: #142a3e;--rib: #1e3e58}.card:after{content:"";position:absolute;inset:-40% -60% auto auto;width:120%;height:80%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.35) 48%,rgba(255,255,255,.05) 56%,transparent 60%);pointer-events:none}.card img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none;filter:drop-shadow(1.5px 0 0 #1a0d04) drop-shadow(-1.5px 0 0 #1a0d04) drop-shadow(0 1.5px 0 #1a0d04) drop-shadow(0 -1.5px 0 #1a0d04) drop-shadow(0 4px 3px rgba(20,6,0,.45)) saturate(1.2) contrast(1.06)}.card .cost{position:absolute;top:2px;left:2px;width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:grid;place-items:center;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.9) 0 12%,transparent 26%),radial-gradient(circle at 40% 40%,#ffc070,var(--nakhwa) 50%,#8a3008);border:2px solid #1a0d04;box-shadow:0 2px #00000080;z-index:2}.card .cost>b{display:inline-block;transform:rotate(45deg);font-family:Cairo,sans-serif;font-size:17px;font-weight:900;color:#fff;-webkit-text-stroke:3px #3a1200;paint-order:stroke fill}.card .cname{position:absolute;bottom:0;left:0;right:0;padding:2px 2px 3px;text-align:center;font-size:13px;font-weight:900;color:#fff;-webkit-text-stroke:3px #1a0d04;paint-order:stroke fill;background:linear-gradient(180deg,color-mix(in srgb,var(--rib) 70%,transparent),var(--rib) 40%,color-mix(in srgb,var(--rib) 70%,#000));border-top:2px solid rgba(0,0,0,.55);box-shadow:inset 0 1px #ffffff40;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1}.deck.all .card{opacity:.55}.deck.all .card.chosen{opacity:1;outline:3px solid var(--gold-2)}.detail{min-height:3.5em;margin:10px 0}.matches{display:flex;flex-direction:column;gap:6px}.match{display:grid;grid-template-columns:60px 1fr auto 44px;gap:8px;padding:6px 10px;border-radius:8px;background:#0003;font-size:14px}.match.win .mres{color:#7ee08a}.match.loss .mres{color:#ff8a80}.mdelta{text-align:right;color:var(--gold-2)}.mopp{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaders{margin:0;padding-left:22px}.leaders li{padding:3px 0}.leaders li span:last-child{float:right;color:var(--gold-2)}.battle{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;max-width:760px;margin:0 auto;-webkit-user-select:none;user-select:none;background:#1a2a10}.b-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px 8px;background:linear-gradient(180deg,#3a2414,#24160c);border-bottom:3px solid #120a04;box-shadow:0 3px 10px #00000080;position:relative;z-index:2}.b-player{display:flex;flex-direction:column;min-width:0}.b-name{font-weight:900;font-size:17px;color:#ffb0b0;text-shadow:0 2px 0 #3a0a0a,0 0 8px rgba(255,60,60,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}.b-tr{font-size:12px;color:var(--muted)}.b-mid{display:flex;flex-direction:column;align-items:center}.b-crowns{font-size:24px;font-weight:900;display:flex;gap:8px;align-items:center;text-shadow:0 2px 0 #000}.c-me{color:#8fc1ff}.c-opp{color:#ff9b9b}.b-timer{font-weight:900;font-size:18px;padding:0 14px;border-radius:10px;background:linear-gradient(180deg,#4a3020,#1d120a);border:2px solid #8a5a2e;box-shadow:inset 0 1px #ffffff26,0 2px #000;text-shadow:0 2px 0 #000}.b-timer.double{color:var(--nakhwa)}.b-timer.double:after{content:" ×2"}.b-quit{background:none;border:0;color:var(--muted);font-size:22px;cursor:pointer}.b-stage{flex:1;min-height:0;position:relative;touch-action:none}.b-stage canvas{display:block;position:absolute;left:0;top:0;touch-action:none}.b-bottom{padding:8px 10px 10px;background:linear-gradient(180deg,#4a2e18,#2a1a0e 40%,#1d1209);border-top:3px solid #120a04;box-shadow:0 -4px 12px #00000080,inset 0 1px #f3cf6b40;position:relative;z-index:2}.b-hand-row{display:flex;gap:8px;align-items:flex-end}.b-next{width:12%;text-align:center;font-size:11px;font-weight:800;color:var(--muted)}.b-next img{width:100%;aspect-ratio:3 / 4;object-fit:cover;background:radial-gradient(circle at 50% 35%,#6a5a48,#2a1e14);border:2px solid #6b4426;border-radius:8px;filter:saturate(.8)}.b-hand{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,15vh));justify-content:center;gap:8px}.b-hand .card{width:100%;margin:0 auto;transition:transform .12s cubic-bezier(.3,1.6,.5,1),filter .2s}.b-hand .card.selected{transform:translateY(-14px) scale(1.06);outline:3px solid #fff;outline-offset:1px}.b-hand .card.poor{filter:grayscale(.85) brightness(.7)}.b-nakhwa{position:relative;height:26px;margin:10px 0 0 26px;border-radius:13px;background:linear-gradient(180deg,#0e0804,#2a1a0e);border:3px solid #120a04;box-shadow:0 0 0 2px #8a5a2e,inset 0 3px 6px #0009;overflow:visible}.b-nakhwa .nk-fill,.b-nakhwa .nk-ticks{border-radius:10px;overflow:hidden}.nk-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(180deg,#ffd9a0,#ffa040 30%,var(--nakhwa) 60%,#a8520f);box-shadow:inset 0 -3px #00000040;transition:width .1s linear}.nk-ticks{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(10,1fr)}.nk-ticks i{border-right:1px solid rgba(0,0,0,.35)}.nk-val{position:absolute;left:-30px;top:50%;width:40px;height:46px;transform:translateY(-50%);display:grid;place-items:center;padding-top:8px;font-size:20px;font-weight:900;text-shadow:0 2px 0 #4a1a00;background:radial-gradient(circle at 38% 60%,#ffd08a,var(--nakhwa) 45%,#8a3e0a 90%);clip-path:path("M20 0 C 26 12, 38 22, 38 31 A 18 15 0 0 1 2 31 C 2 22, 14 12, 20 0 Z");filter:drop-shadow(0 2px 0 #000);z-index:1}.nk-label{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:900;text-shadow:0 2px 0 #000}.b-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#140c06b3;padding:16px;z-index:5}.b-overlay .panel{text-align:center;max-width:360px;width:100%}.result{font-family:Reem Kufi,serif;font-size:52px;margin:0}.result.win{color:var(--gold-2)}.result.loss{color:#ff8a80}.result.draw{color:var(--muted)}.result-crowns{font-size:28px;font-weight:800;margin:8px 0}.result-trophies b.up{color:#7ee08a}.result-trophies b.down{color:#ff8a80}.b-toast{position:absolute;left:50%;top:64px;transform:translate(-50%) translateY(-10px);background:#000000bf;border:1px solid var(--gold);padding:6px 14px;border-radius:10px;font-weight:700;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:6;text-align:center;max-width:90%}.b-toast.show{opacity:1;transform:translate(-50%) translateY(0)}.spinner{width:44px;height:44px;margin:8px auto;border-radius:50%;border:4px solid var(--wood-3);border-top-color:var(--gold-2);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.b-banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.3);display:flex;flex-direction:column;align-items:center;padding:10px 28px;border-radius:14px;background:linear-gradient(180deg,#3c1e0aeb,#1e0e04eb);border:3px solid var(--gold-2);box-shadow:0 0 40px #ffbe5080,0 6px #1a0d04;opacity:0;pointer-events:none;z-index:6;white-space:nowrap;text-align:center}.b-banner b{font-family:Reem Kufi,serif;font-size:40px;line-height:1.1;color:var(--gold-2);text-shadow:0 3px 0 #2a1606,0 0 18px rgba(255,200,90,.7)}.b-banner small{font-size:14px;font-weight:700;letter-spacing:.5px;color:#f3eee2}.b-banner.good b{color:#8fc1ff;text-shadow:0 3px 0 #0a1a30,0 0 18px rgba(80,160,255,.8)}.b-banner.good{border-color:#8fc1ff;box-shadow:0 0 40px #50a0ff80,0 6px #1a0d04}.b-banner.bad b{color:#ff8a80;text-shadow:0 3px 0 #300a0a,0 0 18px rgba(255,80,80,.8)}.b-banner.bad{border-color:#ff8a80;box-shadow:0 0 40px #ff505080,0 6px #1a0d04}.b-banner.show{animation:banner-pop 2.2s ease-out forwards}@keyframes banner-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-6deg)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(2deg)}20%{transform:translate(-50%,-50%) scale(1) rotate(0)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-60%) scale(.9)}}.b-hand .card.selected{box-shadow:0 0 18px #ffffffb3,0 3px #2a1606}.b-hand .card:not(.poor) .cost{animation:cost-glow 1.6s ease-in-out infinite}@keyframes cost-glow{50%{box-shadow:0 0 10px #ff9bd8}}.b-tools{display:flex;align-items:center;gap:2px}.b-snd{background:none;border:0;font-size:18px;cursor:pointer;padding:2px 4px;position:relative;filter:drop-shadow(0 1px 1px #000)}.b-snd.off{opacity:.4}.b-snd.off:after{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;background:#ff8a80;transform:rotate(-35deg)}.b-stage:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(120% 70% at 20% 0%,rgba(255,200,120,.16),transparent 60%),radial-gradient(ellipse at center,transparent 55%,rgba(20,8,0,.55) 100%)}.battle.overtime .b-stage:after{background:radial-gradient(ellipse at center,transparent 50%,rgba(160,20,20,.5) 100%);animation:ot-pulse 1.2s ease-in-out infinite}@keyframes ot-pulse{50%{opacity:.45}}.b-crowns span.pop{display:inline-block;animation:crown-pop .7s cubic-bezier(.2,1.6,.4,1)}@keyframes crown-pop{0%{transform:scale(.4)}40%{transform:scale(2);text-shadow:0 0 16px currentColor}to{transform:scale(1)}}.b-crowns .crown{display:inline-block;animation:crown-bob 2.4s ease-in-out infinite}@keyframes crown-bob{50%{transform:translateY(-2px) rotate(-6deg)}}.b-count{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);font-family:Reem Kufi,serif;font-size:96px;font-weight:700;color:#fff;text-shadow:0 4px 0 #2a1606,0 0 30px rgba(255,200,90,.8);opacity:0;pointer-events:none;z-index:6}.b-count.show{animation:count-pop 1s ease-out forwards}.b-count.urgent{color:#ff8a80;text-shadow:0 4px 0 #300a0a,0 0 30px rgba(255,60,60,.9)}@keyframes count-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}15%{opacity:.95;transform:translate(-50%,-50%) scale(1)}70%{opacity:.8}to{opacity:0;transform:translate(-50%,-50%) scale(.8)}}.card.flying{position:fixed;z-index:50;pointer-events:none;margin:0;max-height:none}.b-hand .card.ready{animation:card-ready .35s ease-out}@keyframes card-ready{40%{transform:translateY(-6px) scale(1.06);box-shadow:0 0 16px #ffbe50e6,0 3px #2a1606}}.b-hand .card.selected.ready{animation:none}.b-hand .card img{transition:transform .15s}.b-hand .card.selected img{animation:card-wiggle .9s ease-in-out infinite}@keyframes card-wiggle{50%{transform:rotate(-4deg) scale(1.05)}}.nk-fill:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);background-size:200% 100%;animation:nk-shine 2.4s linear infinite}@keyframes nk-shine{0%{background-position:150% 0}to{background-position:-50% 0}}.b-nakhwa.full{border-color:var(--gold-2);animation:nk-full .8s ease-in-out infinite}@keyframes nk-full{50%{box-shadow:0 0 14px #ffaa3ce6}}.b-overlay .panel{position:relative;z-index:1;animation:panel-in .5s cubic-bezier(.2,1.4,.4,1)}@keyframes panel-in{0%{transform:scale(.6) translateY(30px);opacity:0}}.b-overlay.end-win .result{animation:result-glow 1.6s ease-in-out infinite}@keyframes result-glow{50%{text-shadow:0 0 24px rgba(255,210,100,.9);transform:scale(1.05)}}.b-overlay.end-loss .panel{filter:saturate(.7)}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.confetti i{position:absolute;top:-20px;width:8px;height:14px;border-radius:2px;animation:confetti-fall linear infinite}@keyframes confetti-fall{to{transform:translate(var(--sway),110vh) rotate(var(--spin))}}.logo{background:linear-gradient(100deg,var(--gold-2) 40%,#fff6d6 50%,var(--gold-2) 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:logo-shine 5s linear infinite;filter:drop-shadow(0 3px 0 #6b3d10) drop-shadow(0 6px 12px rgba(0,0,0,.5));text-shadow:none}@keyframes logo-shine{0%{background-position:120% 0}to{background-position:-120% 0}}.hero{display:block;margin:-4px auto -10px;width:190px;max-width:60%;animation:hero-float 4s ease-in-out infinite;filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}@keyframes hero-float{50%{transform:translateY(-6px)}}.brand{position:relative}.brand .b-tools{position:absolute;top:4px;right:0}.btn.big{position:relative;overflow:hidden}.btn.big:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);background-size:250% 100%;animation:logo-shine 3.5s linear infinite;pointer-events:none}.btn:hover{filter:brightness(1.08)}.deck .card{transition:transform .12s}.deck .card:hover{transform:translateY(-3px) rotate(-1deg)}.screen>section{animation:rise-in .4s ease-out both}.screen>section:nth-child(3){animation-delay:.05s}.screen>section:nth-child(4){animation-delay:.1s}.screen>section:nth-child(5){animation-delay:.15s}@keyframes rise-in{0%{opacity:0;transform:translateY(12px)}}@media (min-aspect-ratio: 1/1){.battle{max-width:none;display:grid;grid-template-columns:minmax(150px,1fr) min(70vh,62vw) minmax(240px,1fr);grid-template-rows:100%}.b-top{grid-column:1;grid-row:1;flex-direction:column;justify-content:center;align-items:center;gap:22px;padding:20px 14px;border-bottom:0;border-right:3px solid #120a04;background:linear-gradient(90deg,#24160c,#3a2414);text-align:center}.b-player{align-items:center}.b-name{max-width:100%;white-space:normal}.b-mid{gap:8px}.b-crowns{font-size:34px}.b-timer{font-size:26px;padding:2px 18px}.b-stage{grid-column:2;grid-row:1}.b-bottom{grid-column:3;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:20px 16px 20px 22px;border-top:0;border-left:3px solid #120a04;background:linear-gradient(270deg,#24160c,#3a2414)}.b-hand-row{flex-direction:column;align-items:center;gap:12px}.b-hand{order:1;width:100%;grid-template-columns:repeat(2,minmax(0,min(140px,15vh)));gap:14px 12px}.b-next{order:2;width:64px}.b-toast{top:20px}}@media (max-aspect-ratio: 1/1){.b-hand{grid-template-columns:repeat(4,minmax(0,13vh))}}.home{height:100%;max-width:560px;margin:0 auto;display:grid;grid-template-rows:auto 1fr auto;background:radial-gradient(120% 60% at 50% 18%,rgba(255,196,92,.22),transparent 60%),linear-gradient(180deg,#2b1a0d,#3a2414 40%,#24160c);box-shadow:0 0 60px #0009}.topbar{display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(180deg,#1d120a,#2e1c0f);border-bottom:3px solid #120a04;box-shadow:0 3px 10px #00000080,inset 0 -1px #f3cf6b33;z-index:2}.tb-player{display:flex;align-items:center;gap:8px;min-width:0;flex:1}.tb-badge{flex:none;width:40px;height:44px;display:grid;place-items:center;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%);background:linear-gradient(180deg,#8fc1ff,#2f7fe0 55%,#1b4f8f);box-shadow:inset 0 0 0 3px #ffffff59}.tb-badge span{font-family:Reem Kufi,serif;font-size:20px;font-weight:700;color:#fff;text-shadow:0 2px 0 #0a2a50}.tb-who{min-width:0}.tb-name{font-weight:900;font-size:16px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 0 #000}.tb-sub{font-size:11px;color:var(--muted)}.tb-res{display:flex;gap:6px}.pill{position:relative;display:flex;align-items:center;height:26px;padding:0 10px 0 22px;margin-left:12px;border-radius:13px;background:linear-gradient(180deg,#0e0804,#2a1a0e);border:2px solid #120a04;box-shadow:0 0 0 1px #8a5a2e}.pill i{position:absolute;left:-12px;top:50%;transform:translateY(-50%);font-style:normal;font-size:22px;filter:drop-shadow(0 2px 0 #000)}.pill b{font-weight:900;font-size:15px;color:var(--gold-2);text-shadow:0 1px 0 #000}.pill.crowns b{color:#fff}.tb-tools{display:flex;align-items:center;gap:2px}.ping{display:inline-flex;align-items:flex-end;gap:2px;padding:2px 6px;border-radius:8px;background:#00000059;font-size:12px;line-height:1;white-space:nowrap}.ping i{width:3px;border-radius:1px;background:#fff3}.ping i:nth-child(1){height:5px}.ping i:nth-child(2){height:8px}.ping i:nth-child(3){height:11px;margin-right:3px}.ping b{font-weight:900;font-variant-numeric:tabular-nums}.ping small{font-size:9px;opacity:.7;margin-left:1px}.ping.good{color:#7ee08a}.ping.good i{background:#7ee08a}.ping.ok{color:#f3cf6b}.ping.ok i:nth-child(-n+2){background:#f3cf6b}.ping.bad{color:#ff8a80}.ping.bad i:nth-child(1){background:#ff8a80}.ping.none{color:var(--muted)}.view{overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain;padding:12px 12px 18px;display:flex;flex-direction:column;gap:12px}.view::-webkit-scrollbar{display:none}.view>section{flex:none;animation:rise-in .35s ease-out both}.view>section:nth-child(2){animation-delay:.05s}.view>section:nth-child(3){animation-delay:.1s}.view h3{margin:0 0 8px;font-family:Reem Kufi,serif;color:var(--gold-2)}.arena-title{position:relative;z-index:1}.arena{display:flex;flex-direction:column;align-items:center;gap:8px}.arena-title{display:flex;flex-direction:column;align-items:center;line-height:1.15;text-align:center}.arena-title small{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--muted)}.arena-title b{font-family:Reem Kufi,serif;font-size:34px;color:#fff;text-shadow:0 3px 0 #2a1606,0 0 2px #2a1606,0 0 18px rgba(255,200,90,.55)}.arena-title span{font-size:13px;font-weight:800;color:var(--gold-2)}.arena-stage{position:relative;width:100%;display:grid;place-items:center;margin-top:-34px;padding-bottom:10px;perspective:700px;overflow:hidden}.rays{position:absolute;left:50%;top:46%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,rgba(255,214,120,.16) 0 9deg,transparent 9deg 22deg);mask-image:radial-gradient(circle,#000 15%,transparent 62%);-webkit-mask-image:radial-gradient(circle,#000 15%,transparent 62%);animation:rays-spin 40s linear infinite;pointer-events:none}@keyframes rays-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.arena-board{position:relative;width:clamp(150px,calc((100dvh - 510px)*.78),min(70%,300px));aspect-ratio:389 / 543;border-radius:14px;overflow:hidden;transform:rotateX(24deg);transform-origin:50% 100%;border:4px solid #f3cf6b;background:#3a2a1c;box-shadow:0 0 0 3px #2a1606,0 18px 30px #0009,0 0 50px #ffbe5059;display:grid;place-items:center}.arena-board .spinner{position:absolute}.arena-board.ready .spinner{display:none}.arena-img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}.arena-board.ready .arena-img{opacity:1}.road{width:100%;display:flex;flex-direction:column;align-items:center;gap:3px}.road-bar{position:relative;width:min(92%,380px);height:22px;border-radius:11px;background:linear-gradient(180deg,#0e0804,#2a1a0e);border:2px solid #120a04;box-shadow:0 0 0 2px #8a5a2e,inset 0 3px 6px #0009;overflow:hidden}.road-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(180deg,#fff1b8,var(--gold-2) 35%,var(--gold) 70%,#8a5d14);box-shadow:inset 0 -3px #0003}.road-bar span{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:13px;font-weight:900;color:#fff;text-shadow:0 1px 0 #000,0 0 3px #000}.road-next{font-size:12px;color:var(--muted);font-weight:700}.play-row{display:flex;gap:10px;align-items:stretch}.battle-btn,.practice-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;cursor:pointer;position:relative;overflow:hidden;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;color:#fff;transition:transform .08s,filter .15s}.battle-btn{flex:1;padding:12px 10px 14px;background:linear-gradient(180deg,#ffe58a,#f8c43a 45%,#e19a16);border:3px solid #2a1606;box-shadow:0 6px #8a5d14,0 6px 0 2px #2a1606,0 12px 24px #00000073,inset 0 3px #fff9;animation:battle-pulse 2.2s ease-in-out infinite}.battle-btn b{font-family:Reem Kufi,serif;font-size:40px;font-weight:700;-webkit-text-stroke:2px #4a2a06;paint-order:stroke fill;text-shadow:0 4px 0 #4a2a06}.battle-btn small{font-size:15px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:#4a2a06}@keyframes battle-pulse{50%{transform:scale(1.025);filter:brightness(1.06)}}.practice-btn{width:34%;padding:8px 6px 10px;background:linear-gradient(180deg,#8fc8ff,#4a94ec 50%,#2768c4);border:3px solid #0a1a30;box-shadow:0 6px #1b4f8f,0 6px 0 2px #0a1a30,0 12px 24px #00000073,inset 0 3px #ffffff80}.practice-btn i{font-style:normal;font-size:22px}.practice-btn b{font-family:Reem Kufi,serif;font-size:22px;text-shadow:0 2px 0 #0a2a50}.practice-btn small{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.battle-btn:after,.practice-btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);background-size:250% 100%;animation:logo-shine 3.5s linear infinite;pointer-events:none}.battle-btn:active,.practice-btn:active{transform:translateY(4px);animation:none}.battle-btn:active{box-shadow:0 2px #8a5d14,0 2px 0 2px #2a1606}.practice-btn:active{box-shadow:0 2px #1b4f8f,0 2px 0 2px #0a1a30}.deck-strip{cursor:pointer;padding:10px 12px 12px;border-radius:14px;background:linear-gradient(180deg,#00000040,#0006);border:2px solid var(--wood-3);box-shadow:inset 0 0 0 1px #f3cf6b1f}.deck-strip h3{font-size:15px;margin:0}.mini-deck{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin-top:8px}.mini-deck .card{border-width:2px;border-radius:7px;box-shadow:0 0 0 1px #1a0d04,0 3px #1a0d04;pointer-events:none}.mini-deck .card img{filter:drop-shadow(1px 0 0 #1a0d04) drop-shadow(-1px 0 0 #1a0d04) drop-shadow(0 1px 0 #1a0d04)}.mini-deck .card .cost{width:16px;height:16px;border-width:1px;top:1px;left:1px}.mini-deck .card .cost>b{font-size:10px;-webkit-text-stroke-width:2px}.mini-deck .card .cname{display:none}.avg{display:inline-flex;align-items:center;gap:4px;font-weight:900;color:#ffc27a}i.drop{display:inline-block;width:13px;height:13px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:radial-gradient(circle at 35% 30%,#ffd08a,var(--nakhwa) 55%,#8a3e0a);border:1px solid #2a1606}.deck-box .actions{margin-top:10px}.card.slot{cursor:default;background:#0000004d;border:2px dashed rgba(243,207,107,.35);box-shadow:inset 0 3px 8px #00000080}.card.focus{outline:3px solid #fff;outline-offset:1px}.view .deck.all .card{opacity:1}.card-detail{min-height:96px}.card-detail p{margin:4px 0 8px}.cd-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.cd-head b{font-family:Reem Kufi,serif;font-size:20px;color:var(--gold-2)}.cd-head span{color:var(--muted);font-weight:700}.cd-head em{margin-left:auto;font-style:normal;font-size:11px;font-weight:900;padding:2px 8px;border-radius:8px;background:#8a5424;text-transform:uppercase}.cd-head em.type-spell{background:#5e2454}.cd-head em.type-building{background:#3c5468}.cd-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}.cd-stats div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:6px;padding:4px 8px;border-radius:8px;background:#0000004d}.cd-stats i{grid-row:span 2;align-self:center;font-style:normal;font-size:18px}.cd-stats small{font-size:10px;color:var(--muted)}.cd-stats b{font-size:15px}.view .match{grid-template-columns:70px 1fr auto 56px;align-items:center;border-left:4px solid var(--muted)}.view .match.win{border-left-color:#2f7fe0;background:linear-gradient(90deg,#2f7fe040,#0003)}.view .match.loss{border-left-color:#b01e28;background:linear-gradient(90deg,#b01e2840,#0003)}.view .match small{display:block;font-size:10px;color:var(--muted);font-weight:600}.mres{font-weight:900}.mcrowns{display:flex;gap:4px;align-items:center;font-weight:900}.view .leaders{padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}.view .leaders li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:#00000038}.view .leaders li span:last-child{float:none}.view .leaders li.top{background:linear-gradient(90deg,#f3cf6b38,#0003)}.view .leaders li.me{outline:2px solid #8fc1ff}.rank{text-align:center;font-weight:900;font-size:16px;color:var(--muted)}.top .rank{font-size:22px}.lname{font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lname small{display:block;font-size:10px;color:var(--muted);font-weight:600}.ltr{font-weight:900;color:var(--gold-2)}.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.steps li{display:flex;gap:10px;align-items:center;padding:6px 10px;border-radius:10px;background:#0003}.steps i{font-style:normal;font-size:24px}.steps p{margin:0;font-size:14px}.tabbar{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:0 4px calc(4px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#2e1c0f,#1d120a);border-top:3px solid #120a04;box-shadow:0 -4px 12px #00000080,inset 0 1px #f3cf6b40;z-index:2}.tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:6px 2px 4px;border-radius:12px 12px 0 0;line-height:1.1;transition:transform .15s,background .15s}.tab i{font-style:normal;font-size:24px;filter:grayscale(.6) drop-shadow(0 2px 0 #000);transition:transform .15s,filter .15s}.tab span{font-size:11px;font-weight:800}.tab small{font-size:9px;opacity:.7}.tab.on{color:#fff;background:linear-gradient(180deg,#6b4426,#3a2414);box-shadow:inset 0 2px #f3cf6b80;transform:translateY(-6px)}.tab.on i{filter:drop-shadow(0 2px 0 #000);transform:scale(1.25)}.tab.main i{font-size:28px}.b-tools .ping{margin-right:4px}@media (min-aspect-ratio: 1/1){.b-top .b-tools{flex-wrap:wrap;justify-content:center}}@media (max-width: 380px){.tb-res .pill.crowns,.ping small{display:none}}.deck-box .err:empty{display:none}html,body{overflow:hidden}.screen{height:100%;overflow-y:auto;scrollbar-width:none}.screen::-webkit-scrollbar{display:none}.b-emote-btn{position:absolute;left:8px;bottom:8px;z-index:4;width:48px;height:48px;border-radius:50%;border:3px solid #0a1a30;background:radial-gradient(circle at 35% 30%,#fff 0 10%,transparent 30%),linear-gradient(180deg,#a8d4ff,#3f86e0);box-shadow:0 4px #1b4f8f,0 6px 10px #00000080;font-size:22px;cursor:pointer;transition:transform .1s,opacity .2s}.b-emote-btn:active{transform:translateY(3px);box-shadow:0 1px #1b4f8f}.b-emote-btn.cooling{opacity:.45}.b-emotes{position:absolute;left:8px;bottom:64px;z-index:5;display:grid;grid-template-columns:repeat(3,76px);gap:6px;padding:8px;border-radius:16px;background:linear-gradient(180deg,#3a2414f5,#1d1209f5);border:3px solid #120a04;box-shadow:0 0 0 2px #8a5a2e,0 10px 24px #0009;transform-origin:0 100%;animation:emotes-in .18s cubic-bezier(.2,1.5,.4,1)}@keyframes emotes-in{0%{transform:scale(.4);opacity:0}}.emo{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:12px;padding:4px 2px 3px;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;color:#2a1606;background:linear-gradient(180deg,#fffaf0,#e8d8b8);box-shadow:0 3px #8a6a40,inset 0 -2px #0000001a}.emo:active{transform:translateY(2px);box-shadow:0 1px #8a6a40}.emo i{font-style:normal;font-size:28px;line-height:1.1}.emo span{font-size:10px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.emo.mute{background:linear-gradient(180deg,#e8e0d0,#b8a888)}.emo.mute.on{background:linear-gradient(180deg,#ffb0a8,#e06050);color:#fff}.b-bubbles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:3}.bubble{position:absolute;left:50%;display:flex;flex-direction:column;align-items:center;min-width:96px;padding:6px 14px;border-radius:18px;background:linear-gradient(180deg,#fff,#f1e8d6);border:3px solid #1a0d04;box-shadow:0 4px #00000059,0 8px 18px #00000073;color:#2a1606;white-space:nowrap;animation:bubble-pop 2.8s ease-out forwards}.bubble:after{content:"";position:absolute;left:50%;width:16px;height:16px;background:inherit;border:3px solid #1a0d04;border-top:0;border-left:0;transform:translate(-50%) rotate(45deg)}.bubble.mine{bottom:21%;border-color:#1b4f8f}.bubble.mine:after{bottom:-10px;border-color:#1b4f8f}.bubble.theirs{top:13%;border-color:#8a1a1a}.bubble.theirs:after{top:-10px;transform:translate(-50%) rotate(225deg);border-color:#8a1a1a}.bubble i{font-style:normal;font-size:40px;line-height:1.05;animation:emo-wiggle .6s ease-in-out 3}.bubble b{font-family:Reem Kufi,serif;font-size:18px;line-height:1.2}.bubble small{font-size:11px;font-weight:800;color:#7a5a3a}@keyframes bubble-pop{0%{opacity:0;transform:translate(-50%) scale(.2)}10%{opacity:1;transform:translate(-50%) scale(1.15)}16%{transform:translate(-50%) scale(.95)}22%{transform:translate(-50%) scale(1)}85%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%) translateY(-8px) scale(.9)}}@keyframes emo-wiggle{25%{transform:rotate(-12deg) scale(1.1)}75%{transform:rotate(12deg) scale(1.1)}}.card.slot:after{display:none}.view.v-battle{padding-bottom:10px;gap:10px}@media (max-aspect-ratio: 1/1){.battle{display:block}.b-stage{position:absolute;top:0;right:0;bottom:0;left:0}.b-top{position:absolute;top:0;left:0;right:0;padding:calc(4px + env(safe-area-inset-top)) 10px 6px;background:linear-gradient(180deg,#1d120af0,#1d120a8c);border-bottom:0;box-shadow:none}.b-name{font-size:15px}.b-mid{flex-direction:row;align-items:center;gap:10px}.b-crowns{font-size:21px;gap:5px}.b-timer{font-size:16px;padding:0 10px}.b-quit{font-size:20px}.b-bottom{position:absolute;left:0;right:0;bottom:0;padding:6px 8px calc(8px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#4a2e18db,#2a1a0e 26%,#1d1209)}.b-hand{grid-template-columns:repeat(4,minmax(0,min(12vh,21vw)));gap:6px}.b-nakhwa{margin-top:8px;height:22px}.b-toast{top:calc(var(--hud-top, 0px) + 10px)}}.b-emote-btn{bottom:calc(var(--hud-bottom, 0px) + 8px)}.b-emotes{bottom:calc(var(--hud-bottom, 0px) + 64px)}.bubble.mine{bottom:calc(var(--hud-bottom, 0px) + 13%)}.bubble.theirs{top:calc(var(--hud-top, 0px) + 8%)}button.road{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:0}.arena-title{cursor:pointer}.road-next{color:var(--gold-2)}.road-head{display:flex;align-items:center;gap:12px}.road-head div{display:flex;flex-direction:column;line-height:1.1}.road-head b{font-family:Reem Kufi,serif;font-size:24px;color:var(--gold-2);text-shadow:0 2px 0 #000}.road-head small{color:var(--muted);font-weight:800}.map{position:relative;width:100%;border-radius:16px;overflow:hidden;border:3px solid #120a04;box-shadow:0 0 0 2px #8a5a2e,0 10px 24px #00000080,inset 0 0 60px #5a320a8c;background:radial-gradient(60% 30% at 20% 15%,rgba(255,255,255,.25),transparent),radial-gradient(50% 25% at 80% 60%,rgba(120,70,20,.18),transparent),radial-gradient(70% 20% at 30% 85%,rgba(120,70,20,.15),transparent),linear-gradient(180deg,#e8d5a8,#d9bf86 50%,#e2c894)}.map svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.map .trail{fill:none;stroke:#5032148c;stroke-width:7;stroke-dasharray:2 12;stroke-linecap:round}.map .path{fill:none;stroke:#f3cf6b;stroke-width:9;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(255,200,80,.9))}.map .path.done{stroke:#e0a42c}.stop{position:absolute;width:0;height:0}.medal{position:absolute;left:-38px;top:-38px;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.7),transparent 35%),radial-gradient(circle,hsl(var(--hue) 70% 58%),hsl(var(--hue) 60% 32%));border:4px solid #f3cf6b;box-shadow:0 0 0 3px #2a1606,0 6px #2a1606,0 10px 16px #0006;z-index:2}.medal i{font-style:normal;font-size:36px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4))}.medal em{position:absolute;right:-6px;bottom:-6px;font-style:normal;font-size:22px;filter:drop-shadow(0 2px 0 #000)}.stop.locked .medal{filter:grayscale(.85) brightness(.8);border-color:#9a8a70}.stop.here .medal{animation:medal-glow 1.6s ease-in-out infinite}@keyframes medal-glow{50%{box-shadow:0 0 0 3px #2a1606,0 6px #2a1606,0 0 28px 8px #ffd25ad9}}.label{position:absolute;top:-44px;width:150px;padding:6px 10px 8px;border-radius:12px;background:#fff8e6db;border:2px solid rgba(90,60,30,.5);box-shadow:0 4px 10px #3c1e0040;color:#3a2410;line-height:1.15;z-index:1}.stop.left .label{left:46px}.stop.right .label{right:46px;text-align:right}.label small{display:block;font-size:10px;font-weight:900;letter-spacing:.05em;color:#8a6a40}.label b{display:block;font-family:Reem Kufi,serif;font-size:19px;color:hsl(var(--hue) 60% 28%)}.label span{display:block;font-size:12px;font-weight:800}.label p{margin:3px 0 4px;font-size:11px;line-height:1.3;color:#6a4a2a}.label u{text-decoration:none;display:inline-block;font-size:12px;font-weight:900;padding:1px 8px;border-radius:8px;background:#3a2410;color:#f3cf6b}.stop.locked .label{opacity:.75}.me-pin{position:absolute;width:0;height:0;z-index:3}.me-pin span{position:absolute;left:-21px;top:-52px;width:42px;height:46px;display:grid;place-items:center;clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%);background:linear-gradient(180deg,#8fc1ff,#2f7fe0 55%,#1b4f8f);font-family:Reem Kufi,serif;font-size:20px;font-weight:700;color:#fff;text-shadow:0 2px 0 #0a2a50;filter:drop-shadow(0 4px 3px rgba(0,0,0,.5));animation:pin-bob 1.4s ease-in-out infinite}.me-pin small{position:absolute;left:50%;top:2px;transform:translate(-50%);white-space:nowrap;padding:1px 7px;border-radius:8px;background:#1b4f8f;border:2px solid #fff;color:#fff;font-size:11px;font-weight:900}@keyframes pin-bob{50%{transform:translateY(-5px)}}@media (max-width: 380px){.label{width:136px}.label p{display:none}}