:root{--red:#ff1744;--lime:#c9ff00;--gold:#ffd42a;--ink:#070707;--panel:#141414;--line:#363636;--paper:#f7f7f3;--display:"MatClash Display","Arial Narrow",sans-serif;--body:"MatClash Body",Arial,sans-serif}
@font-face{font-family:"MatClash Display";src:url("assets/mat-clash-display.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"MatClash Body";src:url("assets/mat-clash-body.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;width:100%;background:#070707;color:#fff;font-family:var(--display)}
body{background:radial-gradient(circle at 50% 34%,#292929 0,#111 38%,#050505 78%);overflow-x:hidden}
button{font:inherit;cursor:pointer}
.game-shell{width:min(100%,1080px);max-width:1080px;margin-inline:auto;min-height:100vh;padding:12px clamp(10px,2vw,22px) 28px;overflow:hidden}
.topbar{height:68px;display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--line)}
.logo{width:150px;height:58px;object-fit:contain}
.bout-label{display:flex;flex:1;align-items:center;justify-content:center;gap:10px;font-size:1.05rem;letter-spacing:.08em}
.bout-label span{color:var(--lime)}.bout-label b{background:var(--red);color:white;padding:5px 9px;transform:skew(-8deg)}
.top-actions{display:flex;align-items:center;gap:8px}
.rules-btn{min-height:42px;border:1px solid rgba(201,255,0,.72);border-radius:7px;background:linear-gradient(180deg,#171717,#0b0b0b);color:var(--lime);padding:7px 13px;letter-spacing:.065em;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 14px rgba(0,0,0,.42);transition:border-color .18s,background .18s,transform .18s}
.rules-btn:hover{border-color:var(--lime);background:#181d0b;transform:translateY(-1px)}
.rules-btn span{width:23px;height:23px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;font:700 .88rem/1 var(--body)}
.universe-btn{min-height:42px;border:1px solid #555;border-radius:7px;background:linear-gradient(180deg,#1d1d1d,#090909);color:#fff;padding:6px 10px;display:flex;align-items:center;gap:7px;letter-spacing:.05em;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 14px #000}.universe-btn span{width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:var(--red);color:white}.universe-btn b{color:var(--gold);white-space:nowrap}
.scoreboard{display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:stretch;margin:10px 0;border:2px solid #333;background:#0b0b0b;box-shadow:0 8px 35px #000}
.score{display:flex;align-items:center;justify-content:center;gap:11px;padding:10px}
.score small{font-size:.78rem;letter-spacing:.12em}.score strong{font-size:2.2rem;line-height:1}
.score.cpu{border-right:1px solid #333}.score.you{border-left:1px solid #333;color:var(--lime)}
.mat-state{text-align:center;padding:8px 4px;display:grid;gap:2px}
.mat-state span{color:var(--red);font-size:.65rem;letter-spacing:.18em}.mat-state strong{font-size:1.05rem;letter-spacing:.08em}.mat-state small{font-family:Arial,sans-serif;font-size:.72rem;color:#bbb}
.arena{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(300px,1fr) auto;width:100%;max-width:100%;min-width:0;min-height:680px;border:1px solid #444;border-radius:24px;overflow:hidden;background:linear-gradient(145deg,#171717,#070707 54%,#161616);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 55px #000}
.arena:before{content:"";position:absolute;inset:18% 8%;border:3px solid #262626;border-radius:50%;box-shadow:0 0 0 22px #0c0c0c,0 0 0 25px #202020;pointer-events:none}
.cpu-zone,.player-zone,.center-mat{position:relative;z-index:1;min-width:0;max-width:100%}
.cpu-zone{padding:12px 14px 0}.player-zone{padding:0 14px 12px}
.zone-label{display:flex;justify-content:space-between;color:#aaa;font-size:.75rem;letter-spacing:.12em}.zone-label b{color:#fff}
.cpu-hand{height:72px;display:flex;justify-content:center;padding-top:6px;overflow:hidden}
.cpu-card{height:78px;width:53px;object-fit:cover;border-radius:5px;margin-left:-25px;box-shadow:0 3px 8px #000;transform:rotate(var(--r))}
.cpu-card:first-child{margin-left:0}
.center-mat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;min-width:0}
.action-stage{position:relative;width:min(100%,620px);height:270px;display:grid;place-items:center;isolation:isolate;overflow:hidden}
.stage-ring{position:absolute;left:50%;top:51%;width:74%;height:66%;transform:translate(-50%,-50%);border:3px solid var(--lime);border-radius:50%;background:radial-gradient(circle,rgba(45,45,45,.92),rgba(8,8,8,.96) 68%);box-shadow:0 0 0 10px rgba(201,255,0,.05),0 0 48px rgba(201,255,0,.13)}
.fighter{position:absolute;bottom:8px;width:170px;height:235px;margin:0;z-index:3;transform-origin:50% 90%;filter:drop-shadow(0 15px 12px #000);will-change:transform,filter,opacity}
.fighter img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
.fighter figcaption{position:absolute;bottom:0;padding:5px 12px;background:#0b0b0b;border:2px solid #fff;letter-spacing:.12em;font-size:.78rem;box-shadow:4px 4px 0 var(--red)}
.cpu-fighter{left:4%}.cpu-fighter figcaption{left:6px}.player-fighter{right:4%}.player-fighter figcaption{right:6px;color:var(--lime);border-color:var(--lime)}
.last-play{position:relative;z-index:4}.last-play img{width:88px;height:121px;object-fit:cover;border-radius:8px;box-shadow:0 12px 28px #000;border:1px solid #777;transform:rotate(-2deg)}
.impact-flash{position:absolute;left:50%;top:48%;width:95px;height:95px;z-index:7;transform:translate(-50%,-50%) scale(0);border-radius:50%;background:radial-gradient(circle,#fff 0,var(--lime) 23%,var(--red) 48%,transparent 72%);opacity:0}
.action-label{position:absolute;left:50%;bottom:8px;z-index:8;transform:translateX(-50%) skew(-8deg);padding:5px 15px;background:#111;border:2px solid var(--lime);color:var(--lime);font-size:1.05rem;letter-spacing:.1em;box-shadow:5px 5px 0 var(--red)}
.opening-draw{position:absolute;inset:0;z-index:30;display:grid;grid-template-rows:auto 1fr;align-items:center;padding:12px 24px;background:radial-gradient(circle at center,rgba(35,35,35,.98),rgba(0,0,0,.98) 75%);border:2px solid var(--lime);border-radius:18px;box-shadow:0 0 44px rgba(201,255,0,.24)}
.opening-draw h3{margin:0;text-align:center;color:var(--lime);font-size:1.25rem;letter-spacing:.1em}
.draw-matchup{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.draw-side{display:grid;justify-items:center;gap:5px;color:#fff}.draw-side.you{color:var(--lime)}.draw-side span{font-size:.8rem;letter-spacing:.14em}.draw-side b{font-size:1.55rem;line-height:1}
.draw-vs{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--red);border:2px solid white;font-size:.9rem}
.flip-card{width:90px;height:124px;perspective:900px}.flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.8,.2,1)}.opening-draw.revealed .flip-inner{transform:rotateY(180deg)}
.flip-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:8px;border:1px solid #777;backface-visibility:hidden;box-shadow:0 10px 22px #000}.flip-front{transform:rotateY(180deg)}
.callout{font-family:var(--body);font-weight:700;min-height:28px;text-align:center;padding:0 18px;color:#fff;font-size:1rem}
.match-actions,.defense-actions{display:flex;gap:8px;justify-content:center}
.primary,.secondary{min-height:45px;border:0;padding:0 18px;letter-spacing:.06em;clip-path:polygon(7% 0,100% 0,93% 100%,0 100%)}
.primary{background:linear-gradient(135deg,var(--lime),#f1ff60);color:#050505}.secondary{background:#252525;color:white;border:1px solid #555}
.momentum-ready{min-height:45px;border:2px solid #fff;padding:0 18px;background:linear-gradient(135deg,var(--red),#ff4b75);color:#fff;letter-spacing:.07em;clip-path:polygon(7% 0,100% 0,93% 100%,0 100%);animation:momentumPulse .9s ease-in-out infinite alternate}
@keyframes momentumPulse{to{filter:drop-shadow(0 0 11px var(--lime));transform:translateY(-2px)}}
button:disabled{opacity:.35;cursor:not-allowed}.hidden{display:none!important}
.player-hand{width:100%;max-width:100%;min-width:0;height:190px;display:flex;align-items:flex-end;gap:10px;overflow-x:auto;overflow-y:hidden;padding:18px 16px 14px;scroll-snap-type:x mandatory;scroll-padding:16px;scrollbar-width:auto;scrollbar-color:var(--lime) #1b1b1b;overscroll-behavior-x:contain;touch-action:pan-x;-webkit-overflow-scrolling:touch}
.player-hand::-webkit-scrollbar{height:10px}.player-hand::-webkit-scrollbar-track{background:#1b1b1b;border-radius:10px}.player-hand::-webkit-scrollbar-thumb{background:var(--lime);border-radius:10px;border:2px solid #1b1b1b}
.card-btn{border:0;background:transparent;padding:0;flex:0 0 105px;scroll-snap-align:start;transition:transform .16s,filter .16s;position:relative}
.card-btn:last-child{margin-right:12px}.card-btn img{width:105px;height:145px;object-fit:cover;border-radius:8px;display:block;box-shadow:0 8px 15px #000}
.card-btn.legal{transform:translateY(-12px);filter:drop-shadow(0 0 7px var(--lime))}.card-btn.legal:hover{transform:translateY(-20px) scale(1.04)}
.card-btn.illegal{filter:grayscale(.7) brightness(.48)}
.hint{margin:2px 0 0;text-align:center;color:#ddd;font:700 .82rem var(--body)}
.score strong.score-pop{animation:scorePop .55s ease-out;color:#fff}
@keyframes scorePop{0%{transform:scale(1)}35%{transform:scale(1.55);text-shadow:0 0 18px var(--lime)}100%{transform:scale(1)}}
.match-feed{margin-top:10px;border-left:5px solid var(--red);background:#141414;padding:10px 14px;display:flex;gap:14px;align-items:center}
.match-feed b{color:var(--red);letter-spacing:.08em;white-space:nowrap}.match-feed p{font:700 .9rem var(--body);margin:0;color:#ddd}
dialog{width:min(92vw,510px);border:2px solid var(--lime);border-radius:18px;background:#111;color:white;padding:22px;box-shadow:0 25px 80px #000}
dialog::backdrop{background:rgba(0,0,0,.84);backdrop-filter:blur(5px)}
.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h2{margin:0;color:var(--lime);font-size:1.8rem;font-style:italic}.modal-head button{border:0;background:none;color:#fff;font-size:2rem}
.rules-grid{display:grid;gap:8px;margin:16px 0;font-family:var(--body);line-height:1.35}.rules-grid p{display:grid;grid-template-columns:105px 1fr;gap:10px;margin:0;padding:9px 10px;background:#191919;border-left:3px solid var(--lime)}.rules-grid b{color:var(--red);letter-spacing:.04em}.rules-grid span{color:#e7e7e7}
dialog>.primary{width:100%;margin-top:10px}
.threat-card{display:block;width:130px;height:178px;object-fit:cover;margin:14px auto;border-radius:8px}
#defenseText,#resultText{font:700 1rem/1.45 var(--body);text-align:center;color:#ddd}
#resultDialog{text-align:center}.result-badge{display:inline-block;background:var(--lime);color:#050505;padding:6px 18px;transform:skew(-8deg);font-size:1.2rem}
#resultDialog h2{font-size:2rem;margin:14px 0 4px}.result-badge.loss{background:var(--red);color:white}
.reward-summary{margin:13px 0 0;padding:10px;border:1px solid #434343;background:#090909;color:var(--lime);font:700 .92rem var(--body);letter-spacing:.04em}.unlock-notice{margin-top:8px;padding:10px;background:linear-gradient(135deg,var(--gold),#ff7a00);color:#080808;font-size:1rem;letter-spacing:.04em}
.result-actions{display:grid;gap:9px;margin-top:14px}.result-actions .primary{width:100%}.shop-game{min-height:45px;display:grid;place-items:center;border:1px solid var(--lime);border-radius:6px;color:var(--lime);text-decoration:none;letter-spacing:.07em;background:#0b0b0b}.shop-game:hover{background:#171d08;color:#e7ff86}
.universe-kicker{text-align:center;color:#ddd;font:700 .86rem var(--body);letter-spacing:.08em}.universe-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:14px 0}.universe-stats div{display:grid;gap:3px;padding:12px 5px;text-align:center;background:#080808;border:1px solid #333}.universe-stats b{color:var(--lime);font-size:1.45rem}.universe-stats span{font:700 .64rem var(--body);color:#aaa;letter-spacing:.04em}.xp-track{height:12px;border:1px solid #555;background:#050505;overflow:hidden}.xp-track div{height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--gold),var(--lime));transition:width .4s}.next-unlock{text-align:center;color:var(--gold);font-size:.82rem;letter-spacing:.06em}.unlock-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.look-card{position:relative;min-height:72px;border:1px solid #444;border-radius:8px;background:#0a0a0a;color:white;padding:8px;text-align:left;display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:8px}.look-card i{grid-row:1/3;width:26px;border-radius:4px;background:linear-gradient(145deg,#303030,#070707);box-shadow:inset 0 0 0 2px #777}.look-card b{font-size:.82rem}.look-card span{font:700 .65rem var(--body);color:#888}.look-card.active{border-color:var(--lime);box-shadow:0 0 13px rgba(201,255,0,.3)}.look-card.voltage i{background:linear-gradient(145deg,#00efff,#c9ff00)}.look-card.redline i{background:linear-gradient(145deg,#ff1744,#35000b)}.look-card.gold i{background:linear-gradient(145deg,#fff0a2,#cc7900)}.look-card.locked{filter:grayscale(1);opacity:.5}.save-note{text-align:center;color:#888;font:700 .72rem var(--body)}
.skin-voltage .card-btn img,.skin-voltage .cpu-card,.skin-voltage .last-play img{border:2px solid #5dffef;box-shadow:0 0 12px #00d9ff}.skin-redline .card-btn img,.skin-redline .cpu-card,.skin-redline .last-play img{border:2px solid #ff3158;box-shadow:0 0 13px rgba(255,23,68,.88)}.skin-gold .card-btn img,.skin-gold .cpu-card,.skin-gold .last-play img{border:2px solid #ffd42a;box-shadow:0 0 15px rgba(255,212,42,.85)}
@media(min-width:760px){
  .game-shell{padding-top:18px}.arena{min-height:720px}.cpu-hand{height:90px}.cpu-card{height:92px;width:62px}
  .action-stage{height:300px}.fighter{width:190px;height:265px}.last-play img{width:102px;height:140px}.player-hand{height:225px}
  .card-btn{flex-basis:132px}.card-btn img{width:132px;height:182px}
}
@media(max-width:430px){
  .game-shell{width:100%;padding:8px 8px 22px;margin:0 auto}.topbar{height:58px;gap:6px}.logo{width:88px}.bout-label{display:none}.top-actions{margin-left:auto;gap:5px}.universe-btn,.rules-btn{min-height:36px;padding:5px 7px;font-size:.62rem;gap:4px}.universe-btn span,.rules-btn span{width:20px;height:20px;font-size:.7rem}.universe-btn b{font-size:.62rem}
  .scoreboard{grid-template-columns:.9fr 1.4fr .9fr}.score{gap:5px;padding:8px 3px}.score small{font-size:.66rem}.score strong{font-size:1.7rem}.mat-state strong{font-size:.92rem}
  .arena{min-height:630px;border-radius:18px}.arena:before{inset:19% 2%}.action-stage{height:230px;width:100%}.fighter{width:118px;height:178px;bottom:12px}.cpu-fighter{left:0}.player-fighter{right:0}.fighter figcaption{font-size:.65rem;padding:3px 7px}.stage-ring{width:82%;height:62%}.last-play img{width:70px;height:96px}.action-label{font-size:.8rem;padding:4px 10px;bottom:4px}
  .opening-draw{padding:10px 12px}.opening-draw h3{font-size:1rem}.draw-matchup{gap:8px}.flip-card{width:70px;height:96px}.draw-vs{width:34px;height:34px}.draw-side b{font-size:1.25rem}
  .callout{font-size:.88rem;min-height:40px}.player-hand{height:166px;padding-inline:10px}
  .card-btn{flex-basis:92px}.card-btn img{width:92px;height:127px}
  .rules-grid p{grid-template-columns:1fr;gap:3px}.universe-stats b{font-size:1.15rem}.unlock-grid{grid-template-columns:1fr}
}
@keyframes chargeLeft{0%{transform:translateX(0) rotate(0)}45%{transform:translateX(-92px) rotate(-9deg) scale(1.08)}75%{transform:translateX(-72px) rotate(-5deg)}100%{transform:translateX(0)}}
@keyframes chargeRight{0%{transform:translateX(0) rotate(0)}45%{transform:translateX(92px) rotate(9deg) scale(1.08)}75%{transform:translateX(72px) rotate(5deg)}100%{transform:translateX(0)}}
@keyframes fallLeft{0%{transform:translate(0,0) rotate(0)}52%{transform:translate(-45px,35px) rotate(-62deg) scale(.93)}85%,100%{transform:translate(-38px,47px) rotate(-74deg) scale(.88)}}
@keyframes fallRight{0%{transform:translate(0,0) rotate(0)}52%{transform:translate(45px,35px) rotate(62deg) scale(.93)}85%,100%{transform:translate(38px,47px) rotate(74deg) scale(.88)}}
@keyframes reverseLeft{0%{transform:translate(0,25px) rotate(-10deg)}42%{transform:translate(-90px,-15px) rotate(-28deg) scale(1.08)}72%{transform:translate(-55px,5px) rotate(-8deg)}100%{transform:translate(0,0)}}
@keyframes reverseRight{0%{transform:translate(0,25px) rotate(10deg)}42%{transform:translate(90px,-15px) rotate(28deg) scale(1.08)}72%{transform:translate(55px,5px) rotate(8deg)}100%{transform:translate(0,0)}}
@keyframes escapeLeft{0%{transform:translate(0,25px)}35%{transform:translate(45px,-5px) rotate(8deg)}100%{transform:translate(-80px,-4px) rotate(-4deg)}}
@keyframes escapeRight{0%{transform:translate(0,25px)}35%{transform:translate(-45px,-5px) rotate(-8deg)}100%{transform:translate(80px,-4px) rotate(4deg)}}
@keyframes pressLeft{0%,100%{transform:translateX(0)}45%{transform:translateX(-62px) translateY(20px) rotate(-14deg) scale(1.05)}}
@keyframes pressRight{0%,100%{transform:translateX(0)}45%{transform:translateX(62px) translateY(20px) rotate(14deg) scale(1.05)}}
@keyframes shake{0%,100%{transform:translateX(0)}30%{transform:translateX(-8px) rotate(-4deg)}60%{transform:translateX(8px) rotate(4deg)}}
@keyframes reboundLeft{0%{transform:translateX(0)}45%{transform:translateX(-65px) rotate(-8deg)}75%{transform:translateX(34px) rotate(12deg)}100%{transform:translateX(0)}}
@keyframes reboundRight{0%{transform:translateX(0)}45%{transform:translateX(65px) rotate(8deg)}75%{transform:translateX(-34px) rotate(-12deg)}100%{transform:translateX(0)}}
@keyframes flash{0%,25%{opacity:0;transform:translate(-50%,-50%) scale(.1)}42%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}75%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}
.action-stage.is-animating .impact-flash{animation:flash .85s ease-out .25s}
.action-stage.is-animating[data-who="player"][data-action="takedown"] .player-fighter{animation:chargeLeft 1.25s ease-in-out}
.action-stage.is-animating[data-who="player"][data-action="takedown"] .cpu-fighter{animation:fallLeft 1.25s ease-in-out}
.action-stage.is-animating[data-who="cpu"][data-action="takedown"] .cpu-fighter{animation:chargeRight 1.25s ease-in-out}
.action-stage.is-animating[data-who="cpu"][data-action="takedown"] .player-fighter{animation:fallRight 1.25s ease-in-out}
.action-stage.is-animating[data-who="player"][data-action="reversal"] .player-fighter{z-index:5;animation:reverseLeft 1.25s ease-in-out}.action-stage.is-animating[data-who="player"][data-action="reversal"] .cpu-fighter{animation:fallLeft 1.25s ease-in-out}
.action-stage.is-animating[data-who="cpu"][data-action="reversal"] .cpu-fighter{z-index:5;animation:reverseRight 1.25s ease-in-out}.action-stage.is-animating[data-who="cpu"][data-action="reversal"] .player-fighter{animation:fallRight 1.25s ease-in-out}
.action-stage.is-animating[data-who="player"][data-action="escape"] .player-fighter{animation:escapeRight 1.25s ease-out}.action-stage.is-animating[data-who="cpu"][data-action="escape"] .cpu-fighter{animation:escapeLeft 1.25s ease-out}
.action-stage.is-animating[data-who="player"][data-action^="nearfall"] .player-fighter{z-index:5;animation:pressLeft 1.25s ease-in-out}.action-stage.is-animating[data-who="player"][data-action^="nearfall"] .cpu-fighter{animation:shake .32s linear 3}
.action-stage.is-animating[data-who="cpu"][data-action^="nearfall"] .cpu-fighter{z-index:5;animation:pressRight 1.25s ease-in-out}.action-stage.is-animating[data-who="cpu"][data-action^="nearfall"] .player-fighter{animation:shake .32s linear 3}
.action-stage.is-animating[data-who="player"][data-action="pin"] .player-fighter{z-index:5;animation:pressLeft 1.25s ease-in-out}.action-stage.is-animating[data-who="player"][data-action="pin"] .cpu-fighter{animation:fallLeft 1.25s ease-in-out}
.action-stage.is-animating[data-who="cpu"][data-action="pin"] .cpu-fighter{z-index:5;animation:pressRight 1.25s ease-in-out}.action-stage.is-animating[data-who="cpu"][data-action="pin"] .player-fighter{animation:fallRight 1.25s ease-in-out}
.action-stage.is-animating[data-who="player"][data-defended="true"] .player-fighter{animation:reboundLeft 1.25s ease-out}.action-stage.is-animating[data-who="cpu"][data-defended="true"] .cpu-fighter{animation:reboundRight 1.25s ease-out}
.action-stage.is-animating[data-action="momentum"] .stage-ring{box-shadow:0 0 25px var(--lime),0 0 70px var(--red)}.action-stage.is-animating[data-action="momentum"] .fighter{animation:shake .32s linear 3}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}