:root{--bg-void: #07060a;--bg-deep: #0f0b12;--bg-panel: #1a141f;--bg-panel-strong: #221a26;--border-subtle: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .16);--text-primary: #f8f4ef;--text-secondary: #d3c7bf;--text-muted: #9f948b;--accent-primary: #ff6a2d;--accent-primary-glow: rgba(255, 106, 45, .45);--accent-gold: #f6c453;--accent-streak: #48d3ff;--accent-streak-glow: rgba(72, 211, 255, .45);--accent-win: #35d077;--accent-win-glow: rgba(53, 208, 119, .45);--accent-lose: #ff4b4b;--accent-lose-glow: rgba(255, 75, 75, .45);--accent-tie: #f2b44c;--accent-tie-glow: rgba(242, 180, 76, .4);--radius-sm: 10px;--radius-md: 14px;--radius-lg: 18px;--radius-xl: 26px;--transition-fast: .14s ease;--transition-normal: .22s ease;--transition-slow: .4s ease;--top-bar-height: 68px;--shadow-soft: 0 12px 30px rgba(0, 0, 0, .35)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:Rajdhani,sans-serif;background:radial-gradient(900px 450px at 80% -10%,rgba(255,106,45,.25),transparent 60%),radial-gradient(600px 300px at 15% 20%,rgba(246,196,83,.18),transparent 60%),linear-gradient(160deg,#0a070b,#140f16 45%,#0a090e);color:var(--text-primary);line-height:1.4;overflow:hidden}.page{height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden}.page:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:repeating-linear-gradient(120deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 120px),repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0,rgba(0,0,0,.2) 1px,transparent 1px,transparent 6px);opacity:.35;pointer-events:none;mix-blend-mode:soft-light}.top-bar{min-height:var(--top-bar-height);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;background:#09080cbf;border-bottom:1px solid var(--border-subtle);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0;z-index:100}.top-bar:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,106,45,.5),transparent);opacity:.8}.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text-primary);font-weight:600;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;transition:opacity var(--transition-fast)}.brand:hover{opacity:.8}.brand img{width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:#0003}.title-block{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}.title-block h1{font-family:Bebas Neue,sans-serif;font-size:1.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-primary)}.title-sub{font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-muted)}.gg-top-bar-right:empty{min-width:180px;height:36px;border-radius:999px;border:1px dashed rgba(255,255,255,.2);opacity:.6}.game-area{flex:1;display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr) minmax(230px,320px);grid-template-rows:minmax(0,1fr);grid-template-areas:"ladder battle history";gap:16px;padding:16px 20px 24px;max-width:1280px;width:100%;margin:0 auto;height:calc(100vh - var(--top-bar-height));min-height:0;position:relative}.ladder-strip{grid-area:ladder;background:var(--bg-panel);border-radius:var(--radius-xl);border:1px solid var(--border-subtle);padding:14px 12px;position:relative;overflow:hidden}.ladder-strip:before{content:"";position:absolute;top:18px;bottom:18px;left:30px;width:2px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.18),transparent);opacity:.5}.ladder-scroll{height:100%;display:flex;flex-direction:column-reverse;gap:12px;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}.ladder-scroll::-webkit-scrollbar{width:4px}.ladder-scroll::-webkit-scrollbar-track{background:transparent}.ladder-scroll::-webkit-scrollbar-thumb{background:#fff3;border-radius:999px}.ladder-opponent{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--radius-md);position:relative;transition:transform var(--transition-fast),background var(--transition-fast)}.ladder-opponent.is-current{background:#ff6a2d26;box-shadow:inset 0 0 0 1px #ff6a2d4d;transform:translate(4px)}.ladder-opponent.is-defeated{background:#35d0771a}.ladder-opponent.is-defeated:after{content:"CLEARED";position:absolute;right:10px;top:8px;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-win);opacity:.9}.ladder-portrait{width:52px;height:52px;border-radius:var(--radius-md);object-fit:cover;border:2px solid rgba(255,255,255,.12);background:#0006;transition:all var(--transition-normal)}.ladder-opponent.is-current .ladder-portrait{border-color:var(--accent-primary);box-shadow:0 0 18px var(--accent-primary-glow)}.ladder-opponent.is-defeated .ladder-portrait{border-color:var(--accent-win);box-shadow:0 0 18px var(--accent-win-glow)}.ladder-opponent.is-locked .ladder-portrait{filter:grayscale(1) brightness(.1) contrast(1.4);opacity:.2}.ladder-name{font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.ladder-opponent.is-locked .ladder-name{opacity:.35}.ladder-opponent.is-current .ladder-name{color:var(--text-primary)}.ladder-opponent.is-defeated .ladder-name{color:var(--accent-win)}.battle-zone{grid-area:battle;border-radius:var(--radius-xl);border:1px solid var(--border-subtle);background:linear-gradient(160deg,#141016f2,#0a080cf2);box-shadow:var(--shadow-soft);padding:20px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"opponent" "battle" "controls";gap:16px;position:relative;overflow:hidden}.battle-zone:before{content:"";position:absolute;inset:-40% -20% auto;height:120%;background:radial-gradient(closest-side,rgba(255,106,45,.25),transparent 70%);opacity:.7;transform:rotate(-6deg);pointer-events:none}.battle-zone:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.05),transparent 45%);pointer-events:none}.opponent-panel{grid-area:opponent;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding-right:200px;z-index:1}.opponent-portrait-wrap{position:relative}.opponent-portrait{width:150px;height:150px;border-radius:var(--radius-lg);object-fit:cover;border:3px solid rgba(255,106,45,.7);box-shadow:0 0 28px #ff6a2d59}.opponent-comment{font-size:.95rem;color:var(--text-secondary);font-style:italic;min-height:1.6em;padding:10px 14px;background:#09080cbf;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px #ffffff0a;max-width:260px;position:relative}.opponent-comment:before{content:"";position:absolute;left:-6px;top:18px;width:10px;height:10px;background:#09080cbf;border-left:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);transform:rotate(45deg)}.streak-tracker{position:absolute;top:18px;right:18px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding:14px 18px;background:#09080cb3;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);box-shadow:0 0 0 1px #ffffff08;z-index:1}.streak-tracker.is-high{border-color:#48d3ffcc;box-shadow:0 0 24px #48d3ff40;animation:streak-charge 1.4s ease-in-out infinite}.streak-tracker.is-bust{animation:streak-bust .45s ease}@keyframes streak-bust{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.streak-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--text-muted)}.streak-display{display:flex;align-items:baseline;gap:6px;font-family:Bebas Neue,sans-serif}.streak-count{font-size:2.8rem;font-weight:700;line-height:1}.streak-tracker.is-high .streak-count{color:var(--accent-streak);text-shadow:0 0 16px rgba(72,211,255,.6)}.streak-separator{font-size:1.3rem;color:var(--text-muted)}.streak-goal{font-size:1.3rem;color:var(--text-secondary)}.streak-pips{display:grid;grid-template-columns:repeat(10,minmax(10px,1fr));gap:4px;width:100%}.streak-pip{height:8px;border-radius:999px;background:#ffffff14;border:1px solid rgba(255,255,255,.15);transition:all var(--transition-fast)}.streak-pip.is-filled{background:var(--accent-win);border-color:var(--accent-win);box-shadow:0 0 8px var(--accent-win-glow)}.streak-pip.is-high{background:var(--accent-streak);border-color:var(--accent-streak);box-shadow:0 0 8px var(--accent-streak-glow)}@keyframes streak-charge{0%,to{box-shadow:0 0 18px #48d3ff33}50%{box-shadow:0 0 28px #48d3ff73}}.battle-display{--duel-glow: rgba(255, 255, 255, .08);grid-area:battle;display:flex;align-items:center;justify-content:center;gap:28px;padding:20px;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.08);background:#0a080c99;box-shadow:0 0 24px var(--duel-glow);opacity:0;transform:scale(.92);transition:all var(--transition-normal);position:relative;z-index:1}.battle-display.is-win{--duel-glow: var(--accent-win-glow)}.battle-display.is-lose{--duel-glow: var(--accent-lose-glow)}.battle-display.is-tie{--duel-glow: var(--accent-tie-glow)}.battle-display.is-visible{opacity:1;transform:scale(1)}.battle-display.is-animate{animation:duel-pop .32s ease}@keyframes duel-pop{0%{transform:scale(.96)}60%{transform:scale(1.02)}to{transform:scale(1)}}.battle-display:after{content:"";position:absolute;bottom:-14px;left:50%;transform:translate(-50%);font-family:Bebas Neue,sans-serif;font-size:1.1rem;letter-spacing:.3em;text-transform:uppercase;opacity:0;transition:opacity var(--transition-fast)}.battle-display.is-win:after{content:"WIN";color:var(--accent-win);opacity:1}.battle-display.is-lose:after{content:"LOSS";color:var(--accent-lose);opacity:1}.battle-display.is-tie:after{content:"TIE";color:var(--accent-tie);opacity:1}.battle-side{display:flex;flex-direction:column;align-items:center;gap:8px}.battle-choice{width:92px;height:92px;border-radius:var(--radius-lg);background:#08070bd9;border:2px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px #ffffff05;transition:all var(--transition-normal)}.battle-choice img{width:62px;height:62px;object-fit:contain}.battle-side.is-winner .battle-choice{border-color:var(--accent-win);box-shadow:0 0 20px var(--accent-win-glow)}.battle-side.is-loser .battle-choice{border-color:var(--accent-lose);opacity:.55}.battle-side.is-tie .battle-choice{border-color:var(--accent-tie)}.battle-label{font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}.battle-vs{font-family:Bebas Neue,sans-serif;font-size:1.6rem;letter-spacing:.2em;color:var(--text-secondary)}.controls{grid-area:controls;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;z-index:1}.choice-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 20px;min-width:120px;background:linear-gradient(180deg,#281c1ee6,#100c10e6);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);color:var(--text-primary);font-family:inherit;font-weight:600;text-transform:uppercase;letter-spacing:.14em;position:relative;overflow:hidden}.choice-btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(120deg,rgba(255,255,255,.08),transparent 40%);opacity:0;transition:opacity var(--transition-fast)}.choice-btn:hover:not(:disabled){border-color:#ff6a2d99;transform:translateY(-2px);box-shadow:0 10px 18px #0006}.choice-btn:hover:not(:disabled):after{opacity:1}.choice-btn:active:not(:disabled){transform:translateY(0)}.choice-btn:disabled{opacity:.5;cursor:not-allowed}.choice-btn img{width:52px;height:52px;object-fit:contain;transition:transform var(--transition-fast)}.choice-btn:hover:not(:disabled) img{transform:scale(1.08)}.history-section{grid-area:history;background:var(--bg-panel);border-radius:var(--radius-xl);border:1px solid var(--border-subtle);padding:14px 16px;display:flex;flex-direction:column;min-height:0;overflow:hidden}.history-title{font-family:Bebas Neue,sans-serif;font-size:1rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}.history-scroll{display:flex;flex-direction:column;gap:12px;overflow-y:auto;overflow-x:hidden;padding-right:4px;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;scroll-snap-type:y proximity}.history-scroll::-webkit-scrollbar{width:4px}.history-scroll::-webkit-scrollbar-track{background:transparent}.history-scroll::-webkit-scrollbar-thumb{background:#fff3;border-radius:999px}.history-round{display:flex;flex-direction:column;gap:10px;padding:12px;background:#0a080cbf;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.1);position:relative;scroll-snap-align:start;animation:history-shift .18s ease var(--history-delay, 0ms) both}.history-round:nth-child(2n){background:#0e0a10d9}.history-round.is-new{border-color:#48d3ff66;box-shadow:0 0 18px #48d3ff40;animation:history-pop .36s ease both}.history-duel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.history-choice{position:relative;display:flex;align-items:center;justify-content:center;min-height:86px;padding:10px;border-radius:var(--radius-md);background:#08070bd9;border:2px solid rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px #ffffff08}.history-choice.is-win{border-color:var(--accent-win);box-shadow:0 0 14px var(--accent-win-glow)}.history-choice.is-lose{border-color:var(--accent-lose);box-shadow:0 0 14px var(--accent-lose-glow)}.history-choice.is-tie{border-color:var(--accent-tie);box-shadow:0 0 14px var(--accent-tie-glow)}.history-label{position:absolute;top:8px;left:8px;display:flex;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}.history-icon{width:60px;height:60px;object-fit:contain}.history-empty{color:var(--text-muted);font-size:.85rem;padding:8px}@keyframes history-shift{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes history-pop{0%{opacity:.6;transform:translateY(14px) scale(.98)}70%{opacity:1;transform:translateY(-2px) scale(1.01)}to{transform:translateY(0) scale(1)}}.intro-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#060508eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:60;animation:overlay-in .35s ease}.intro-card{width:min(420px,88vw);padding:24px 26px;background:#0c0a10f2;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 45px #00000080;text-align:center;display:flex;flex-direction:column;gap:12px}.intro-title{font-family:Bebas Neue,sans-serif;font-size:2rem;letter-spacing:.2em;text-transform:uppercase}.intro-line{font-size:.95rem;color:var(--text-secondary)}.intro-btn{margin-top:8px;align-self:center;padding:12px 30px;font-family:Bebas Neue,sans-serif;font-size:1.1rem;letter-spacing:.2em;text-transform:uppercase;color:#140f16;background:var(--accent-primary);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.intro-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px #ff6a2d59}.victory-overlay,.complete-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#07060aeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:50;animation:overlay-in .35s ease}@keyframes overlay-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.victory-content,.complete-content{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;position:relative}.victory-burst,.complete-burst{position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(53,208,119,.4) 0%,transparent 70%);animation:burst-pulse 2.2s ease infinite;z-index:-1}.complete-burst{background:radial-gradient(circle,rgba(246,196,83,.4) 0%,transparent 70%)}@keyframes burst-pulse{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.18);opacity:1}}.victory-title,.complete-title{font-family:Bebas Neue,sans-serif;font-size:2.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-win);text-shadow:0 0 30px rgba(53,208,119,.5)}.complete-title{color:var(--accent-gold);text-shadow:0 0 30px rgba(246,196,83,.5)}.victory-text,.complete-text{font-size:1.1rem;color:var(--text-secondary)}.victory-btn,.complete-btn{padding:14px 34px;font-family:Bebas Neue,sans-serif;font-size:1.1rem;letter-spacing:.18em;text-transform:uppercase;color:#140f16;background:var(--accent-win);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.complete-btn{background:var(--accent-gold)}.victory-btn:hover,.complete-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px #35d07759}.complete-btn:hover{box-shadow:0 12px 24px #f6c45359}@media (max-width: 1100px){.game-area{grid-template-columns:minmax(140px,200px) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,.7fr);grid-template-areas:"ladder battle" "history history";height:calc(100vh - var(--top-bar-height))}.opponent-panel{padding-right:160px}.history-section{min-height:170px}}@media (max-width: 800px){.game-area{grid-template-columns:1fr;grid-template-areas:"battle" "ladder" "history";padding:14px 16px 24px}.ladder-strip{padding:12px}.ladder-strip:before{display:none}.ladder-scroll{flex-direction:row-reverse;overflow-x:auto;overflow-y:hidden}.ladder-opponent{grid-template-columns:1fr;text-align:center;min-width:80px}.ladder-opponent.is-current{transform:none}.ladder-opponent.is-defeated:after{right:6px;top:6px}.battle-zone{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto;grid-template-areas:"opponent" "streak" "battle" "controls"}.opponent-panel{grid-template-columns:1fr;justify-items:center;text-align:center;padding-right:0}.opponent-comment{max-width:100%}.opponent-comment:before{left:50%;top:-6px;transform:translate(-50%) rotate(45deg)}.streak-tracker{position:static;grid-area:streak;align-items:center;justify-self:center}.history-section{padding:12px}}@media (max-width: 560px){.top-bar{padding:10px 14px}.title-block h1{font-size:1.4rem}.opponent-portrait{width:120px;height:120px}.gg-top-bar-right:empty{min-width:120px}.battle-choice{width:70px;height:70px}.battle-choice img{width:48px;height:48px}.choice-btn{min-width:96px;padding:10px 14px}.choice-btn img{width:42px;height:42px}.history-duel{gap:8px}.history-choice{min-height:70px}.history-icon{width:48px;height:48px}}[hidden]{display:none!important}