:root{
  --ink:#171419;--paper:#e8dfd0;--panel:rgba(25,22,28,.96);--panel2:#241f28;
  --pink:#ef83c3;--green:#86d37a;--yellow:#eeeA72;--muted:#9c929f;--line:rgba(232,223,208,.16)
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#141116;color:var(--paper);font-family:Georgia,"Times New Roman",serif}
button{font:inherit;color:inherit}
button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
#app,.screen{width:100%;height:100%}.screen{display:none;position:relative}.screen.active{display:grid}
#menu{place-items:center;padding:18px;overflow:auto;background:
radial-gradient(circle at 18% 12%,rgba(239,131,195,.16),transparent 25%),
radial-gradient(circle at 85% 82%,rgba(134,211,122,.10),transparent 28%),
repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),#151217}
#menu:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E")}
.menu-card{position:relative;width:min(1200px,100%);padding:26px;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:0 30px 100px rgba(0,0,0,.55)}
.menu-card:before,.menu-card:after{content:"";position:absolute;width:34px;height:34px;border-color:rgba(232,223,208,.45)}.menu-card:before{left:10px;top:10px;border-left:2px solid;border-top:2px solid}.menu-card:after{right:10px;bottom:10px;border-right:2px solid;border-bottom:2px solid}
.title-block{max-width:100%}.eyebrow{margin:0 0 6px;letter-spacing:.24em;font:700 .72rem/1.3 Arial,sans-serif;color:var(--yellow)}
h1{margin:0;font:900 clamp(3.6rem,9vw,7.3rem)/.78 Arial,sans-serif;letter-spacing:-.085em;text-shadow:4px 4px 0 #000}h1 span{color:var(--pink)}
.subtitle{margin:18px 0 3px;font-size:1.2rem;font-weight:700}.deck{margin:0 0 19px;color:#c4bbc7;font:400 .87rem/1.55 Arial,sans-serif}
.mode-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}.mode,.secondary,.primary{border:1px solid var(--line);border-radius:4px;padding:11px 15px;background:#211c25;cursor:pointer;transition:.14s transform,.14s background}.mode:hover,.secondary:hover,.primary:hover{transform:translateY(-2px)}.mode.active{background:var(--paper);color:var(--ink);font-weight:900}.primary{background:var(--pink);border-color:transparent;color:#161219;font-weight:900}.primary:disabled{opacity:.55;cursor:wait;transform:none}.secondary{background:#28222c}
.selectors{display:grid;grid-template-columns:1fr 1fr;gap:18px}.selector-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.selector-heading h2{margin:0;font:900 .86rem Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase}.selector-heading span{color:var(--pink);font-size:.92rem}
.character-grid{display:grid;grid-template-columns:repeat(5,minmax(78px,1fr));gap:7px}.char-card{position:relative;height:128px;border:1px solid var(--line);border-radius:5px;background:#211c25;overflow:hidden;cursor:pointer;padding:0;text-align:left;transition:.14s transform,.14s border-color}.char-card:hover{transform:translateY(-2px);border-color:rgba(232,223,208,.45)}.char-card.selected{border:3px solid var(--yellow);box-shadow:0 0 0 2px rgba(238,234,114,.17)}.char-card .portrait{position:absolute;inset:0 0 24px;width:100%;height:calc(100% - 24px);object-fit:contain;object-position:center bottom;filter:saturate(.72) contrast(1.06);background:linear-gradient(145deg,#3a323d,#171419)}.char-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(17,14,19,.92) 82%);pointer-events:none}.char-card .sprite{position:absolute;right:5px;bottom:23px;width:auto;height:40px;image-rendering:pixelated;filter:drop-shadow(0 2px 1px #000);z-index:2}.char-card .name{position:absolute;left:7px;right:3px;bottom:5px;z-index:3;font:800 .67rem Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.char-card small{position:absolute;left:6px;top:6px;z-index:3;padding:2px 5px;background:rgba(15,12,17,.75);font:800 .53rem Arial,sans-serif;letter-spacing:.06em;color:var(--yellow)}
.menu-actions{display:flex;gap:11px;margin-top:18px}.menu-actions button{min-width:180px}.legal{font:400 .65rem/1.4 Arial,sans-serif;color:#817683;margin:14px 0 0}
#gameScreen{background:#000;place-items:center}#game{display:block;width:100%;height:100%;object-fit:contain;touch-action:none;background:#aaa;image-rendering:auto}
#hud{pointer-events:none;position:absolute;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:min(760px,72vw);gap:12px;text-shadow:0 2px 7px #000;font-family:Arial,sans-serif}.score-block{display:flex;align-items:center;gap:10px;font-weight:900}.score-block.right{justify-content:flex-end}.score-block strong{display:grid;place-items:center;width:52px;height:52px;background:rgba(18,15,20,.82);border:2px solid rgba(232,223,208,.46);border-radius:4px;font-size:2rem}.score-block span{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-block.left span{color:var(--pink)}.score-block.right span{color:var(--green)}#status{padding:8px 12px;border:1px solid rgba(232,223,208,.32);border-radius:3px;background:rgba(18,15,20,.77);font-size:.75rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.top-actions{position:absolute;right:12px;top:max(10px,env(safe-area-inset-top));display:flex;gap:6px}.top-actions button{width:38px;height:38px;border:1px solid rgba(232,223,208,.34);background:rgba(18,15,20,.78);border-radius:3px;cursor:pointer;font-weight:900}
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,8,11,.76);backdrop-filter:blur(6px);z-index:15}.overlay>div{width:min(420px,90vw);padding:30px;border-radius:6px;background:#201b24;border:1px solid var(--line);text-align:center;box-shadow:0 25px 70px rgba(0,0,0,.5)}.overlay h2{font-size:2rem;margin:8px 0 22px}.overlay button{display:block;width:100%;margin-top:9px}.hidden{display:none!important}
#touchControls{display:none;position:absolute;inset:0;pointer-events:none}.touch-side{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(2,62px);gap:7px;pointer-events:auto}.left-side{left:12px}.right-side{right:12px}.touch-side button{height:52px;border-radius:4px;border:1px solid rgba(232,223,208,.4);background:rgba(18,15,20,.62);font:800 .68rem Arial,sans-serif;touch-action:none}.touch-side .hit{background:rgba(239,131,195,.62)}
dialog{width:min(620px,90vw);border:1px solid var(--line);border-radius:6px;background:#201b24;color:var(--paper);padding:26px;box-shadow:0 30px 90px rgba(0,0,0,.6)}dialog::backdrop{background:rgba(0,0,0,.75);backdrop-filter:blur(7px)}dialog h2{margin-top:0}.close{float:right;border:0;background:transparent;font-size:1.7rem;cursor:pointer}.controls-help{display:grid;grid-template-columns:1fr 1fr;gap:20px}.controls-help p,.help-copy{line-height:1.8;color:#cfc5d0;font-family:Arial,sans-serif;font-size:.88rem}kbd{display:inline-block;min-width:28px;text-align:center;padding:2px 6px;border-radius:3px;background:#342d38;border:1px solid #514656;box-shadow:inset 0 -2px rgba(0,0,0,.25);font-family:Arial,sans-serif}
@media(pointer:coarse),(max-width:820px){#touchControls{display:block}.selectors{grid-template-columns:1fr}.character-grid{grid-template-columns:repeat(5,minmax(58px,1fr))}.menu-card{padding:19px}.char-card{height:100px}.char-card .sprite{height:32px}.controls-help{grid-template-columns:1fr}.right-side{display:none}.local-mode .right-side{display:grid}#hud{width:78vw}.score-block span{display:none}}
@media(max-height:720px) and (min-width:820px){.menu-card{padding:18px}.char-card{height:98px}.deck,.legal{display:none}.subtitle{margin:10px 0}.mode-row{margin-bottom:10px}.menu-actions{margin-top:10px}}


/* Match access, wallet and multiplayer lobby */
.access-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 16px;padding:10px 12px;border:1px solid var(--line);background:rgba(12,10,14,.46);font-family:Arial,sans-serif}
.access-copy{display:flex;flex-direction:column;gap:3px}.access-copy strong{font-size:.73rem;letter-spacing:.14em;color:var(--yellow)}.access-copy span{font-size:.72rem;color:#b8aeb9}
.wallet-btn{min-width:160px;border:1px solid rgba(238,234,114,.42);border-radius:4px;padding:10px 13px;background:#302936;color:var(--yellow);font:900 .72rem Arial,sans-serif;cursor:pointer}
.wallet-btn.connected{color:#161219;background:var(--yellow)}
.multiplayer-panel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-7px 0 16px;padding:10px;border:1px dashed rgba(134,211,122,.42);background:rgba(22,31,24,.45);font-family:Arial,sans-serif}
.multiplayer-panel button{padding:8px 11px}.multiplayer-label{color:var(--green);font-size:.67rem;font-weight:900;letter-spacing:.14em}.multiplayer-panel #lobbyStatus{flex:1 1 260px;color:#afa8b0;font-size:.68rem}

/* Lore portraits and HP panels */
.fighter-card{position:absolute;top:82px;width:190px;height:112px;display:flex;gap:9px;padding:8px;border:1px solid rgba(232,223,208,.30);background:linear-gradient(180deg,rgba(24,20,26,.92),rgba(16,13,18,.78));box-shadow:0 8px 25px rgba(0,0,0,.32);font-family:Arial,sans-serif;z-index:4;pointer-events:none;overflow:hidden}
.fighter-card:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 4px);pointer-events:none}
.fighter-left{left:14px;border-left:4px solid var(--pink)}.fighter-right{right:14px;flex-direction:row-reverse;text-align:right;border-right:4px solid var(--green)}
.fighter-card img{width:72px;height:94px;object-fit:cover;object-position:center top;filter:saturate(.72) contrast(1.07);background:#2b252d}
.fighter-info{min-width:0;flex:1;align-self:flex-end}.fighter-info strong{display:block;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fighter-info span{display:block;margin-top:6px;font-size:.68rem;color:#d4cbd5}.fighter-info span b{font-size:.86rem;color:#fff}
.hp-track{height:9px;margin-top:5px;border:1px solid rgba(255,255,255,.25);background:#161217;overflow:hidden}.hp-track i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#7ecf70,#dce66b);transition:width .22s ease,filter .22s ease}.fighter-right .hp-track i{margin-left:auto}
.game-wallet{width:auto!important;min-width:74px;padding:0 9px!important;font:800 .64rem Arial,sans-serif!important}.game-wallet.connected{background:rgba(238,234,114,.88)!important;color:#151217}
.toast{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:30;padding:10px 15px;border:1px solid rgba(232,223,208,.35);background:rgba(20,16,22,.94);box-shadow:0 10px 30px rgba(0,0,0,.4);font:800 .72rem Arial,sans-serif;letter-spacing:.04em}

@media(max-width:1000px){.fighter-card{top:72px;width:148px;height:92px}.fighter-card img{width:55px;height:74px}.fighter-info strong{font-size:.66rem}.fighter-info span{font-size:.6rem}.top-actions{top:auto;bottom:12px}.game-wallet{display:none}}
@media(max-width:720px){.fighter-card{top:64px;width:118px;height:74px;padding:5px}.fighter-card img{width:42px;height:62px}.fighter-info strong{font-size:.58rem}.fighter-info span{margin-top:3px;font-size:.54rem}.hp-track{height:6px}.access-row{align-items:flex-start;flex-direction:column}.wallet-btn{width:100%}.multiplayer-panel{align-items:stretch}.multiplayer-panel button{flex:1 1 30%}}