:root{
  --bg:#07090d;--panel:#11151d;--panel2:#171c26;--line:#2d3444;
  --gold:#d7b66a;--gold2:#715a2b;--text:#f4efe4;--muted:#939cad;
  --win:#62d79a;--draw:#d2d5dc;--lose:#ed7777;
  --fire:#dd5938;--earth:#50a56b;--frost:#5ba9f2;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:
  radial-gradient(circle at 50% -15%,rgba(112,82,37,.27),transparent 34%),
  radial-gradient(circle at 12% 35%,rgba(91,25,25,.12),transparent 24%),
  linear-gradient(180deg,#090b10,#05070a 78%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.065;background-image:linear-gradient(90deg,transparent 49.7%,rgba(255,255,255,.12) 50%,transparent 50.3%),linear-gradient(transparent 49.7%,rgba(255,255,255,.08) 50%,transparent 50.3%);background-size:52px 52px;mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent)}
button{font:inherit}.app{width:min(1280px,100%);margin:0 auto;padding:14px 14px 28px}

.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:11px 15px;border:1px solid rgba(215,182,106,.3);border-radius:18px;background:linear-gradient(180deg,rgba(24,28,37,.96),rgba(10,12,17,.97));box-shadow:0 18px 55px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.04)}
.brand{display:flex;align-items:center;gap:11px}.crest{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid #80662f;background:radial-gradient(circle,#735a21 0 20%,#211b10 21% 53%,#0d0f14 54%);box-shadow:0 0 24px rgba(215,182,106,.18)}
.brand-name{font:800 16px/1.05 Georgia,serif;letter-spacing:.14em}.brand-sub{font-size:10px;color:var(--muted);letter-spacing:.11em;margin-top:4px}
.round-center{text-align:center}.round-label{font-size:10px;color:var(--muted);letter-spacing:.15em}.timer{font:900 31px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#f8e6b3;margin-top:4px;text-shadow:0 0 20px rgba(215,182,106,.24)}.timer.result{color:#fff}.phase{font-size:10px;margin-top:6px;color:#dbc992;letter-spacing:.11em}
.top-actions{justify-self:end;display:grid;gap:6px}.stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.stat{padding:7px 10px;border-radius:999px;background:#0c0f15;border:1px solid #2d3443;font-size:11px;color:var(--muted)}.stat b{color:var(--text)}.top-buttons{display:flex;justify-content:flex-end;gap:6px}.top-btn{border:1px solid #3a4352;border-radius:9px;background:#10141b;color:#cbd3de;padding:6px 9px;font-size:9px;font-weight:800;cursor:pointer}.top-btn:hover,.top-btn[aria-pressed="true"]{border-color:#8a7140;color:#f2dda3;background:#211c12}

.arena{margin-top:14px;border:1px solid rgba(215,182,106,.27);border-radius:24px;overflow:hidden;background:radial-gradient(circle at 50% 48%,rgba(114,83,35,.12),transparent 28%),linear-gradient(180deg,rgba(23,27,35,.98),rgba(8,10,14,.985));box-shadow:0 25px 75px rgba(0,0,0,.38),inset 0 0 100px rgba(215,182,106,.03)}
.queue-strip{padding:13px 16px;border-bottom:1px solid #272e3b;background:rgba(7,9,13,.36)}.queue-strip.mine{border-top:1px solid #272e3b;border-bottom:0}.queue-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.queue-title{font-size:11px;font-weight:800;letter-spacing:.13em;color:#e6d39a}.queue-meta{font-size:10px;color:var(--muted)}
.queue{display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;min-height:82px;padding-bottom:3px;scrollbar-width:thin;scrollbar-color:#55482e #0a0d12}.qset{flex:0 0 112px;height:78px;border:1px solid #343b4a;border-radius:11px;background:linear-gradient(180deg,#151922,#0c0f14);display:flex;gap:6px;align-items:center;justify-content:center;position:relative;padding-top:8px}.qset.next{border-color:#af8d45;box-shadow:0 0 18px rgba(215,182,106,.13)}.qset .qno{position:absolute;left:6px;top:4px;font:700 8px ui-monospace,monospace;color:#6f788a}.mini-back{width:37px;height:54px;border-radius:7px;border:1px solid #705a2e;background:repeating-conic-gradient(from 45deg,#171a23 0 10deg,#0c0f14 10deg 20deg);box-shadow:inset 0 0 0 3px #090b0f,inset 0 0 0 4px #48391f;display:grid;place-items:center;color:#a98743;font-size:10px}.mini-open{--el:#777;width:55px;height:58px;border-radius:8px;border:1px solid color-mix(in srgb,var(--el) 62%,#b79c5b 38%);background:linear-gradient(180deg,color-mix(in srgb,var(--el) 24%,#171b24),#090c11);display:grid;grid-template-rows:1fr auto;place-items:center;padding:4px;overflow:hidden}.mini-open.fire{--el:var(--fire)}.mini-open.earth{--el:var(--earth)}.mini-open.frost{--el:var(--frost)}.mini-open-icon{font-size:24px;filter:drop-shadow(0 3px 5px #000)}.mini-open-info{max-width:100%;font:800 6px/1.25 ui-monospace,monospace;color:#e9edf3;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-open-info em{display:block;color:#b7c0ce;font-style:normal;font-size:6px}

.battle-area{position:relative;padding:20px 18px 18px}.battle-grid{display:grid;grid-template-columns:minmax(0,1fr) 105px minmax(0,1fr);gap:18px;max-width:1060px;margin:auto;align-items:center}.side{text-align:center}.side-title{font-size:11px;letter-spacing:.15em;color:#9aa3b3;margin-bottom:10px}.pair{display:flex;gap:12px;justify-content:center;align-items:stretch}.card-slot-wrap{width:166px}.slot-label{font-size:9px;letter-spacing:.14em;color:#868fa0;margin-bottom:6px}.slot{height:226px;border:1px dashed #454d5d;border-radius:18px;background:linear-gradient(180deg,rgba(17,21,29,.78),rgba(6,8,11,.86));display:grid;place-items:center;position:relative;overflow:hidden}.slot.open{border-style:solid;border-color:#4b5364}.slot.hidden{border-color:#67552d}.slot.reveal{animation:revealPulse .75s ease}.slot.win{box-shadow:0 0 0 1px rgba(98,215,154,.45),0 0 28px rgba(98,215,154,.18)}.slot.lose{opacity:.82;filter:saturate(.82)}.slot.draw{box-shadow:0 0 0 1px rgba(210,213,220,.25)}
.slot .status-chip{position:absolute;right:7px;top:7px;z-index:5;padding:4px 6px;border-radius:999px;background:rgba(8,10,14,.78);border:1px solid #3b4250;font-size:8px;color:#b4bdcb;letter-spacing:.08em}.slot .status-chip.w{color:var(--win);border-color:rgba(98,215,154,.45)}.slot .status-chip.l{color:var(--lose);border-color:rgba(237,119,119,.45)}.slot .status-chip.d{color:var(--draw);border-color:rgba(210,213,220,.35)}
.versus{text-align:center}.versus .vs{font:900 30px/1 Georgia,serif;color:var(--gold);text-shadow:0 0 22px rgba(215,182,106,.32)}.versus .seal{width:68px;height:68px;margin:13px auto 0;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(215,182,106,.34);background:radial-gradient(circle,#2d2517,#090c11 66%);font-size:27px}.scoreline{margin-top:13px;font:800 12px ui-monospace,monospace;color:#cdbd8f;min-height:18px}

.card{--el:#777;width:100%;height:100%;padding:7px;border-radius:17px;background:linear-gradient(180deg,#2b2f39,#0f1218);border:1px solid color-mix(in srgb,var(--el) 60%,#b79c5b 40%);box-shadow:0 15px 30px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.07)}.card.fire{--el:var(--fire)}.card.earth{--el:var(--earth)}.card.frost{--el:var(--frost)}
.card-frame{height:100%;border-radius:12px;border:1px solid rgba(255,255,255,.075);padding:8px;background:linear-gradient(180deg,color-mix(in srgb,var(--el) 20%,#161921),#090c10 74%);position:relative;overflow:hidden}.card-frame:before{content:"";position:absolute;left:-25%;right:-25%;top:-24%;height:58%;background:radial-gradient(circle,color-mix(in srgb,var(--el) 34%,transparent),transparent 68%);filter:blur(6px)}
.card-name{position:relative;font:800 12px/1.1 Georgia,serif;letter-spacing:.06em}.art{position:relative;height:130px;margin-top:7px;border-radius:10px;border:1px solid rgba(255,255,255,.07);display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--el) 42%,transparent),transparent 31%),linear-gradient(180deg,#171b24,#080a0e);overflow:hidden}.sigil{position:relative;z-index:1;font-size:61px;filter:drop-shadow(0 8px 13px rgba(0,0,0,.55)) drop-shadow(0 0 15px color-mix(in srgb,var(--el) 48%,transparent))}.card-foot{position:relative;margin-top:7px;display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:9px}.element{padding:4px 6px;border-radius:999px;background:color-mix(in srgb,var(--el) 20%,#0a0d12);border:1px solid color-mix(in srgb,var(--el) 50%,#666)}.type-chip{color:#abb3c1;font-size:8px;letter-spacing:.07em}
.card-back{width:100%;height:100%;border-radius:17px;border:1px solid #765f2e;background:radial-gradient(circle at 50% 43%,rgba(215,182,106,.18),transparent 25%),repeating-conic-gradient(from 45deg,#171a23 0 9deg,#0d1016 9deg 18deg);display:grid;place-items:center;box-shadow:inset 0 0 0 7px #090c11,inset 0 0 0 9px #4d3d20}.bigseal{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;border:2px solid #927439;background:radial-gradient(circle,#685122 0 18%,#171a21 20% 64%,#090b0f 66%);font-size:32px;box-shadow:0 0 24px rgba(215,182,106,.18)}

.matchup-stage{position:relative;z-index:27;max-width:700px;min-height:224px;margin:20px auto 0;padding:13px 16px 15px;border:1px solid #303847;border-radius:17px;background:radial-gradient(circle at 50% 42%,rgba(215,182,106,.09),transparent 38%),linear-gradient(180deg,rgba(15,19,26,.97),rgba(7,9,13,.98));overflow:hidden}.matchup-head{display:flex;justify-content:space-between;gap:12px;align-items:center;font:800 9px ui-monospace,monospace;letter-spacing:.1em;color:#9aa4b4}.matchup-head b{color:#e8d18f;font-size:11px}.matchup-line{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:9px;perspective:850px}.matchup-side{text-align:center}.matchup-side small{display:block;margin-bottom:4px;font:800 7px ui-monospace,monospace;letter-spacing:.14em;color:#727d8e}.matchup-card{width:92px;height:124px;opacity:0;filter:blur(3px);transition:transform .48s cubic-bezier(.18,.82,.2,1),opacity .28s ease,filter .35s ease}.matchup-card.opponent{transform:translateX(-160px) rotateY(-34deg) scale(.76)}.matchup-card.mine{transform:translateX(160px) rotateY(34deg) scale(.76)}.matchup-stage.opp-in .matchup-card.opponent,.matchup-stage.mine-in .matchup-card.mine{opacity:1;filter:none;transform:translateX(0) rotateY(0) scale(1)}.matchup-card .card{padding:4px;border-radius:11px}.matchup-card .card-frame{padding:5px;border-radius:8px}.matchup-card .card-name{font-size:8px}.matchup-card .art{height:67px;margin-top:4px}.matchup-card .sigil{font-size:36px}.matchup-card .card-foot{margin-top:4px;font-size:6px}.matchup-card .element{padding:2px 3px}.matchup-card .type-chip{display:none}.matchup-card .card-back{border-radius:11px;box-shadow:inset 0 0 0 4px #090c11,inset 0 0 0 6px #4d3d20}.matchup-card .bigseal{width:44px;height:44px;font-size:19px}.matchup-clash{width:48px;text-align:center;opacity:.38;transform:scale(.72);transition:.3s ease}.matchup-clash span{display:block;font:900 15px Georgia,serif;color:var(--gold)}.matchup-clash i{display:block;font-style:normal;font-size:22px;margin-top:5px}.matchup-stage.resolved .matchup-clash{opacity:1;transform:scale(1.13);filter:drop-shadow(0 0 11px rgba(215,182,106,.55))}.matchup-stage.mine-wins .matchup-card.mine,.matchup-stage.opp-wins .matchup-card.opponent{filter:brightness(1.18);box-shadow:0 0 24px rgba(98,215,154,.25);border-radius:12px}.matchup-stage.mine-wins .matchup-card.opponent,.matchup-stage.opp-wins .matchup-card.mine{opacity:.58;filter:saturate(.55)}.matchup-reason{text-align:center;min-height:18px;margin-top:8px;color:#cdd4df;font-size:11px;opacity:.35;transform:translateY(5px);transition:.25s ease}.matchup-stage.resolved .matchup-reason{opacity:1;transform:none}.matchup-tally{text-align:center;margin-top:5px;font:800 9px ui-monospace,monospace;letter-spacing:.09em;color:#8f9aab}.matchup-stage.waiting .matchup-reason{opacity:.7;transform:none;color:#b9a978}

.predict-panel{max-width:830px;margin:18px auto 2px;padding-top:16px;border-top:1px solid #2b3240;text-align:center}.predict-label{font-size:11px;letter-spacing:.15em;color:#e5d29b}.predict-sub{font-size:11px;color:var(--muted);margin-top:5px}.predict-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.pick{border:1px solid #343b4b;border-radius:14px;background:linear-gradient(180deg,#1b202a,#0d1016);padding:12px 10px;color:#dfe4ec;cursor:pointer;transition:.16s}.pick:hover{transform:translateY(-2px);border-color:#626b7d}.pick b{display:block;font-size:17px}.pick span{display:block;font-size:9px;color:#8f98a8;margin-top:3px;letter-spacing:.08em}.pick[data-pick="W"].selected{border-color:var(--win);box-shadow:0 0 20px rgba(98,215,154,.12)}.pick[data-pick="D"].selected{border-color:var(--draw);box-shadow:0 0 20px rgba(210,213,220,.1)}.pick[data-pick="L"].selected{border-color:var(--lose);box-shadow:0 0 20px rgba(237,119,119,.12)}.pick.locked{opacity:.42;cursor:not-allowed;transform:none}.prediction-state{height:20px;margin-top:8px;font-size:11px;color:#b8c0cd}.prediction-state.good{color:var(--win)}.prediction-state.bad{color:var(--lose)}

.reveal-banner{pointer-events:none;position:absolute;inset:0;display:grid;place-items:center;opacity:0;z-index:20}.reveal-banner.show{animation:banner 1.05s ease}.reveal-banner .txt{font:900 30px/1 Georgia,serif;letter-spacing:.08em;color:#fff;padding:13px 20px;border-radius:13px;background:rgba(5,7,10,.84);border:1px solid rgba(215,182,106,.52);box-shadow:0 0 46px rgba(215,182,106,.18)}
.result-overlay{pointer-events:none;position:absolute;inset:0;display:grid;place-items:center;opacity:0;z-index:25;background:radial-gradient(circle,rgba(7,9,13,.08),rgba(7,9,13,.46) 75%)}.result-overlay.show{animation:resultShow 4.8s ease forwards}.result-box{text-align:center;padding:20px 30px;border:1px solid rgba(215,182,106,.45);border-radius:18px;background:rgba(7,9,13,.88);box-shadow:0 20px 65px rgba(0,0,0,.45)}.result-big{font:900 38px/1 Georgia,serif;letter-spacing:.1em}.result-big.w{color:var(--win)}.result-big.d{color:var(--draw)}.result-big.l{color:var(--lose)}.result-detail{margin-top:9px;color:#c6ceda;font-size:11px}.next-in{margin-top:7px;color:#e0c987;font:700 11px ui-monospace,monospace}

.history{margin-top:14px}.panel{border:1px solid #2a3140;border-radius:18px;background:linear-gradient(180deg,rgba(18,22,29,.96),rgba(9,11,16,.96));padding:13px;min-width:0}.panel-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}.panel-title{font-size:11px;font-weight:800;letter-spacing:.13em;color:#e5d198}.legend{font-size:9px;color:var(--muted)}
.pattern-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px;padding:4px;border:1px solid #2d3442;border-radius:13px;background:#0a0d12;width:max-content;max-width:100%}.pattern-tab{border:1px solid transparent;border-radius:9px;background:transparent;color:#858fa0;padding:8px 12px;font-size:10px;font-weight:800;letter-spacing:.07em;cursor:pointer;transition:.16s;white-space:nowrap}.pattern-tab:hover{color:#d7c793;background:#131720}.pattern-tab.active{color:#f3e2ac;border-color:#6d592f;background:linear-gradient(180deg,#242015,#12100c);box-shadow:inset 0 1px rgba(255,255,255,.04),0 0 18px rgba(215,182,106,.07)}.pattern-view{display:none}.pattern-view.active{display:block}.pattern-view-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.hidden-road{display:grid;grid-template-columns:repeat(10,minmax(84px,1fr));gap:7px}.hidden-cell{position:relative;min-width:0;border:1px solid #303746;border-radius:10px;background:linear-gradient(180deg,#10141b,#090c11);padding:8px 7px;display:flex;align-items:center;gap:7px;min-height:48px;box-shadow:inset 0 1px rgba(255,255,255,.025)}.hidden-cell.latest{border-color:#806a37;box-shadow:0 0 18px rgba(215,182,106,.08)}.hidden-cell .round{position:absolute;right:5px;top:4px;font:700 7px ui-monospace,monospace;color:#5f6878}.hidden-icon{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#171b23;border:1px solid #363e4c;font-size:18px;flex:0 0 auto}.hidden-info{min-width:0}.hidden-type{font-size:9px;font-weight:800;color:#d6dce5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hidden-el{font-size:8px;margin-top:3px;color:#8f98a8}.hidden-cell.fire{border-bottom-color:rgba(221,89,56,.55)}.hidden-cell.earth{border-bottom-color:rgba(80,165,107,.55)}.hidden-cell.frost{border-bottom-color:rgba(91,169,242,.55)}
.result-pattern-panel{border-color:rgba(161,130,70,.42);background:radial-gradient(circle at 15% 0,rgba(156,119,48,.10),transparent 32%),linear-gradient(180deg,rgba(22,25,32,.98),rgba(7,9,13,.98));box-shadow:inset 0 1px rgba(255,255,255,.025),0 10px 30px rgba(0,0,0,.16)}
.road-title-wrap{min-width:0}.road-kicker{margin-top:3px;font:700 8px ui-monospace,monospace;letter-spacing:.18em;color:#6f7888}.road-legend{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.road-legend span{display:flex;align-items:center;gap:4px;font-size:9px;color:#9ea7b5;white-space:nowrap}.road-legend i{width:10px;height:10px;border-radius:50%;border:2px solid currentColor;display:block;background:#0b0e13}.road-legend .rw{color:#62b9ef}.road-legend .rd{color:#66cf8a}.road-legend .rl{color:#ec7777}
.road-summary{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:1px 0 8px;padding:7px 9px;border:1px solid #262d39;border-radius:10px;background:rgba(5,7,10,.58);font-size:9px;color:#858f9f}.trend strong{font-size:10px;color:#e7d49a}.road-counts{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.road-counts b{font:800 9px ui-monospace,monospace}.road-counts .cw{color:#62b9ef}.road-counts .cd{color:#66cf8a}.road-counts .cl{color:#ec7777}
.big-road-shell{position:relative;overflow-x:auto;overflow-y:hidden;border:1px solid #303746;border-radius:12px;background:linear-gradient(180deg,#0b0e13,#080a0e);box-shadow:inset 0 0 28px rgba(0,0,0,.35);scrollbar-width:thin;scrollbar-color:#55482e #0a0d12}.result-road{--road-cell:34px;position:relative;height:calc(var(--road-cell) * 6);min-width:100%;background-image:linear-gradient(to right,rgba(91,101,119,.17) 1px,transparent 1px),linear-gradient(to bottom,rgba(91,101,119,.17) 1px,transparent 1px);background-size:var(--road-cell) var(--road-cell);background-position:-1px -1px}.road-mark{position:absolute;left:calc(var(--col) * var(--road-cell) + 4px);top:calc(var(--row) * var(--road-cell) + 4px);width:calc(var(--road-cell) - 8px);height:calc(var(--road-cell) - 8px);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#111722 0 52%,#090c11 54%);font:900 9px/1 ui-monospace,monospace;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 3px 8px rgba(0,0,0,.38);transition:.2s}.road-mark.w{color:#78c9f4;border:2px solid #4ea7da;text-shadow:0 0 9px rgba(78,167,218,.38)}.road-mark.d{color:#83dfa1;border:2px solid #56bd78;text-shadow:0 0 9px rgba(86,189,120,.32)}.road-mark.l{color:#f28d8d;border:2px solid #df6666;text-shadow:0 0 9px rgba(223,102,102,.34)}.road-mark.latest:after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;right:-1px;top:-1px;background:#e8c66f;box-shadow:0 0 8px #e8c66f}.road-mark:hover{transform:scale(1.09);z-index:3}.road-mark small{position:absolute;left:50%;transform:translateX(-50%);bottom:-12px;font-size:6px;color:#606a7b;opacity:0;pointer-events:none}.road-mark:hover small{opacity:1}.road-endcap{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(transparent,rgba(215,182,106,.24),transparent);pointer-events:none}
.card-road{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.pair-cell{border:1px solid #2d3442;border-radius:9px;background:#0b0e13;padding:6px;min-width:0}.pair-round{font:700 7px ui-monospace,monospace;color:#667083;margin-bottom:4px}.pair-line{display:flex;align-items:center;gap:4px;font-size:8px;color:#aab3c1;white-space:nowrap;overflow:hidden}.pair-line+.pair-line{margin-top:3px}.pi{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;background:#171b23;border:1px solid #333a48;font-size:11px;flex:0 0 auto}.petxt{overflow:hidden;text-overflow:ellipsis}.firetxt{color:#ee8a72}.earthtxt{color:#7dce96}.frosttxt{color:#82bdf3}
.bottomrow{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:12px}.rule-note{font-size:10px;color:#858fa0;line-height:1.55}.rule-note b{color:#d7c48f}.demo-btn{border:1px solid #4a5261;border-radius:10px;background:#11151c;color:#c7cfda;padding:9px 11px;cursor:pointer;font-size:10px;white-space:nowrap}.demo-btn:hover{border-color:#80704b;color:#f0dfad}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;padding:9px 13px;border-radius:999px;background:#161b23;border:1px solid #394150;color:#d9e0ea;font-size:11px;transition:.2s;z-index:100}.toast.show{opacity:1;transform:translate(-50%,0)}
.rules-modal{position:fixed;inset:0;z-index:120;display:none;align-items:flex-end;background:rgba(3,5,8,.76);backdrop-filter:blur(7px);padding-top:30px}.rules-modal.open{display:flex}.rules-sheet{width:min(760px,100%);max-height:88vh;overflow:auto;margin:0 auto;padding:20px;border:1px solid rgba(215,182,106,.35);border-radius:22px 22px 0 0;background:linear-gradient(180deg,#181d27,#0b0e13);box-shadow:0 -24px 70px rgba(0,0,0,.52)}.rules-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.rules-title-row h2{margin:0;color:#f0dc9f;font:800 20px Georgia,serif}.rules-title-row p{margin:6px 0 0;color:#929cad;font-size:11px}.rules-close{width:34px;height:34px;border:1px solid #414958;border-radius:10px;background:#10141a;color:#d9e0e9;font-size:22px;cursor:pointer}.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.rules-grid section{border:1px solid #2d3543;border-radius:14px;background:#10141b;padding:13px}.rules-grid h3{margin:0 0 8px;color:#e5ca80;font-size:12px}.rules-grid ol,.rules-grid ul{margin:0;padding-left:20px;color:#cbd2dc;font-size:11px;line-height:1.65}.match-list{list-style:none;padding-left:0!important}.match-list b{display:inline-block;min-width:62px;color:#f0e2bb}.rule-help{margin:7px 0 0;color:#a4adba;font-size:11px;line-height:1.55}.element-cycle{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:#e2e6ec;font-size:11px}.element-cycle b{color:#d6b765}.rules-confirm{display:block;width:140px;height:40px;margin:16px 0 0 auto;border:1px solid #806735;border-radius:11px;background:#211b10;color:#f0d891;font-weight:900;cursor:pointer}
@keyframes revealPulse{0%{transform:scale(.91) rotateY(70deg);filter:brightness(1.8)}55%{transform:scale(1.035) rotateY(0);filter:brightness(1.35)}100%{transform:scale(1);filter:none}}
@keyframes banner{0%{opacity:0;transform:scale(.82)}20%,70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.06)}}
@keyframes resultShow{0%{opacity:0}8%,90%{opacity:1}100%{opacity:0}}
@media(max-width:980px){.battle-grid{grid-template-columns:1fr 68px 1fr;gap:8px}.pair{gap:6px}.card-slot-wrap{width:132px}.slot{height:188px}.art{height:105px}.sigil{font-size:50px}.versus .seal{width:54px;height:54px}.hidden-road{grid-template-columns:repeat(5,minmax(84px,1fr))}}
@media(max-width:700px){.app{padding:8px}.topbar{grid-template-columns:1fr auto}.top-actions{grid-column:1/-1;justify-self:stretch}.stats,.top-buttons{justify-content:center}.brand-sub{display:none}.battle-area{padding:16px 6px}.battle-grid{grid-template-columns:1fr;gap:12px}.versus{order:2}.side.opp{order:1}.side.mine{order:3}.pair{gap:8px}.card-slot-wrap{width:min(42vw,154px)}.slot{height:205px}.versus .seal{display:none}.qset{flex-basis:112px}.matchup-stage{margin-top:14px;padding:11px 8px}.matchup-line{gap:11px}.matchup-card{width:78px;height:108px}.matchup-card .art{height:56px}.matchup-card .sigil{font-size:31px}.matchup-head{align-items:flex-start;flex-direction:column;gap:4px}.predict-buttons{gap:6px}.pick{padding:10px 5px}.pattern-tabs{width:100%;overflow-x:auto;flex-wrap:nowrap}.pattern-tab{flex:0 0 auto}.hidden-road{grid-template-columns:repeat(2,minmax(0,1fr))}.bottomrow{align-items:stretch;flex-direction:column}.demo-btn{align-self:flex-end}.rules-grid{grid-template-columns:1fr}.rules-sheet{padding:16px}}
.server-status{display:flex;align-items:center;gap:7px;border:1px solid #3b4351;border-radius:999px;background:#0d1117;padding:8px 11px;font:800 9px ui-monospace,monospace;letter-spacing:.08em;color:#8e98a8;white-space:nowrap}.server-status i{width:7px;height:7px;border-radius:50%;background:#727b89;box-shadow:0 0 0 3px rgba(114,123,137,.08)}.server-status.online{border-color:rgba(98,215,154,.42);color:#9eddbd}.server-status.online i{background:var(--win);box-shadow:0 0 10px rgba(98,215,154,.55)}.server-status.reconnecting{border-color:rgba(215,182,106,.38);color:#d8c38d}.server-status.reconnecting i{background:var(--gold);animation:statusPulse 1s infinite}.server-status.offline{border-color:rgba(237,119,119,.34);color:#cf8989}.server-status.offline i{background:var(--lose)}
.slot.placeholder:after{content:"WAIT";font:800 11px ui-monospace,monospace;letter-spacing:.12em;color:#606979}
@keyframes statusPulse{50%{opacity:.35}}