@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;900&family=Barlow+Condensed:wght@700;800;900&family=Inter:wght@400;500;600&display=swap');
:root{--accent:#ce2941;--accent-bright:#ff5261;--damage:#ff4655;--play-width:100vw;--play-height:100vh;--play-width:100dvw;--play-height:100dvh;--safe-top:env(safe-area-inset-top);--safe-right:env(safe-area-inset-right);--safe-bottom:env(safe-area-inset-bottom);--safe-left:env(safe-area-inset-left);color-scheme:dark;font-family:Inter,sans-serif;color:#ece7e9;background:#08090d;font-synthesis:none}
*{box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden}body{margin:0;overscroll-behavior:none}button,input{font:inherit}button{color:inherit;cursor:pointer;border:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px}button:disabled{opacity:.35;cursor:default}button svg{width:23px;height:23px;flex-shrink:0}
.playfield{position:fixed;left:0;top:0;width:var(--play-width);height:var(--play-height);overflow:hidden;container:playfield / size;transform-origin:0 0}
.app{width:100%;height:100%;min-height:0;padding:max(10px,var(--safe-top)) max(10px,var(--safe-right)) max(10px,var(--safe-bottom)) max(10px,var(--safe-left));display:flex;flex-direction:column;gap:10px}
.topbar{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 5px}.player-picker{display:flex;align-items:center;gap:16px}.player-picker>span{font-size:9px;letter-spacing:2px;color:#918d89}.segmented{display:flex;padding:3px;gap:2px;background:#15161c;border:1px solid #333038;border-radius:8px}.segmented button{width:37px;height:34px;background:transparent;border-radius:4px;color:#aaa3a1;font-size:14px}.segmented button[aria-pressed=true]{color:#fff7f8;background:var(--accent);box-shadow:0 0 18px #e52a4333;font-weight:600}.header-actions{display:flex;align-items:center;gap:8px}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border-radius:8px;color:#c5bcc1}.toolbar-button{display:flex;align-items:center;gap:8px;background:transparent;padding:10px;font-size:12px;color:#c5bcc1}.icon-button:hover,.toolbar-button:hover{background:#ffffff0a;color:#ffe3e8}
.board{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px}.board[data-count="2"]{grid-template-columns:1fr}.board[data-count="3"] .player:last-child{grid-column:1/-1}.board[data-count="5"],.board[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}.board[data-count="5"] .player:nth-child(4){grid-column:span 2}
.player{position:relative;isolation:isolate;border:1px solid #8e394a80;border-radius:12px;overflow:hidden;user-select:none;-webkit-user-select:none;background:#14151b;container-type:size;box-shadow:0 0 24px #0007}
.backdrop{position:absolute;inset:0;background-color:var(--color,#1f1a27);background-image:var(--background,none);background-position:center;background-size:cover;transition:opacity .5s;z-index:-3}.player::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0202074d,#02020730),radial-gradient(ellipse at center,#0008,transparent 75%);z-index:-2;pointer-events:none}.player::after{content:'';position:absolute;inset:5px;border:1px solid #ef536a30;border-radius:6px;pointer-events:none;z-index:4}
.player-inner{position:absolute;inset:0;display:flex;flex-direction:column}.player.rotated .player-inner{transform:rotate(180deg)}
.player-top{display:flex;align-items:center;justify-content:space-between;padding:4px 9px 0 17px;z-index:5;min-height:52px;position:relative}.player-name{font-family:Cinzel,Georgia,serif;font-size:clamp(12px,3.5cqw,19px);letter-spacing:1px;font-weight:700;text-shadow:0 2px 5px #000,0 0 14px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 50px)}.player-menu{width:48px;height:48px;color:#fff1f4;background:#08091070;border:1px solid #f16a7d3b;border-radius:50%}.player-menu svg{width:28px;height:28px}
.life-area{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;padding-bottom:20px}
.life{padding:0 8px;margin:0;background:none;color:#fff5f6;font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-size:min(60cqw,70cqh);line-height:.85;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums;position:relative;z-index:2;-webkit-text-stroke:2px #070509;paint-order:stroke fill;text-shadow:0 5px 0 #070509,0 8px 15px #000,0 0 25px #000,0 0 3px #000;cursor:default;touch-action:manipulation}
.life[data-digits="3"]{font-size:min(44cqw,68cqh)}.life[data-digits="4"]{font-size:min(33cqw,65cqh)}.life[data-digits="5"]{font-size:min(27cqw,65cqh)}
.life-control{position:absolute;top:0;bottom:0;width:50%;display:flex;align-items:center;background:transparent;color:#fff3f5;text-shadow:0 2px 5px #000,0 0 9px #000;font-family:'Barlow Condensed',sans-serif;font-size:clamp(28px,8cqw,54px);font-weight:700;z-index:1;touch-action:none}.life-control.minus{left:0;justify-content:flex-start;padding-left:5%}.life-control.plus{right:0;justify-content:flex-end;padding-right:5%}.life-control span{opacity:.85}.life-control.minus span{color:var(--damage)}
.flash{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0}.flash.hit{background:radial-gradient(ellipse,#ff465555,#c914305c);animation:hit .32s ease-out;box-shadow:inset 0 0 80px #ed233e66}.flash.heal{background:radial-gradient(ellipse,#f5ffdd55,#66dda93d);animation:hit .32s ease-out;box-shadow:inset 0 0 80px #b2ffb444}@keyframes hit{0%{opacity:.9}100%{opacity:0}}
.death{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;z-index:3;background:#030305;transition:opacity .35s}.skull{width:min(65cqw,72cqh);height:min(65cqw,72cqh);color:#ded8da;filter:drop-shadow(0 0 25px #cf9ca730)}.skull .eyes{fill:#030305}
.player.dead .death{opacity:1}.player.dead .backdrop{opacity:0}.player.dead .life{opacity:0}.player.dead .life-control{z-index:4}.player.dead .life-control span{opacity:.35}.player.dead .player-name{color:#9a8b92}
body.immersive .app{padding:0;gap:0;min-height:0}body.immersive .topbar,body.immersive .player-top{display:none}body.immersive .board{gap:3px}body.immersive .player{border-radius:0;border-color:#4b2932}body.immersive .life-area{padding:0}body.immersive .life{font-size:min(68cqw,87cqh)}body.immersive .life[data-digits="3"]{font-size:min(48cqw,82cqh)}body.immersive .life[data-digits="4"]{font-size:min(35cqw,80cqh)}body.immersive .life[data-digits="5"]{font-size:min(28cqw,80cqh)}
dialog{background:linear-gradient(145deg,#231920,#101117);color:#eee4e8;border:1px solid #7e3446;border-radius:14px;padding:24px;position:fixed;left:50%;top:50%;right:auto;bottom:auto;margin:0;transform:translate(-50%,-50%);width:min(500px,calc(var(--play-width) - 24px));max-width:none;max-height:calc(var(--play-height) - 24px);overflow-y:auto;box-shadow:0 20px 100px #000b}dialog::backdrop{background:#020205c9;backdrop-filter:blur(8px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px}h2{margin:0;font-family:Cinzel,Georgia,serif;font-size:24px;font-weight:600}
.field-label{font-size:10px;color:#c69da9;letter-spacing:2px;display:block}.name-input{width:100%;border:1px solid #583441;border-radius:7px;background:#08090f80;padding:13px;color:#fff3f6;margin:8px 0 18px;font-size:16px}.background-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.camera-button{display:flex;align-items:center;justify-content:center;width:52px;height:45px;border-radius:7px;border:1px solid #bd3c56;background:#421821;color:#ffb5c1}
.color-picker{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}.color-swatch{width:32px;height:32px;border-radius:50%;border:2px solid #ffffff30;background:var(--swatch);box-shadow:inset 0 0 10px #0003}.color-swatch[aria-pressed=true]{outline:2px solid var(--accent-bright);outline-offset:3px}
.background-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.art-swatch{aspect-ratio:.8;border-radius:6px;background:var(--swatch,#312539) center/cover;border:1px solid #c44b6550;position:relative;overflow:hidden}.art-swatch span{position:absolute;inset:auto 0 0;padding:16px 2px 5px;background:linear-gradient(transparent,#000d);font-family:Cinzel,serif;font-size:9px;color:#fff2f5}.art-swatch[aria-pressed=true]{outline:2px solid var(--accent-bright);outline-offset:2px}
.primary-button,.secondary-button{padding:13px 20px;border-radius:7px;font-size:13px;font-weight:600}.primary-button{background:var(--accent);color:#fff7f8}.secondary-button{background:#303039;color:#e6dce1}dialog>.primary-button{width:100%;margin-top:24px}.dialog-help{color:#afa1a8;font-size:12px;line-height:1.7}.dialog-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.history-entry{display:block;text-align:left;width:100%;margin:8px 0;padding:14px;border:1px solid #573340;background:#24232a;border-radius:8px}.history-entry:hover{border-color:var(--accent)}.history-entry strong{display:block;font-size:13px;margin-bottom:7px}.history-entry small{color:#b3a1aa;font-size:11px}.history-totals{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.history-totals span{padding:5px 8px;background:#08090f80;border-radius:4px;font-size:11px}
.toast{position:fixed;z-index:30;bottom:24px;left:50%;transform:translate(-50%,12px);background:var(--accent);color:#fff7f8;border:1px solid #f06c82;padding:12px 18px;border-radius:7px;font-size:12px;max-width:90%;text-align:center;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@container playfield (max-width:700px){.app{padding:max(6px,var(--safe-top)) max(5px,var(--safe-right)) max(6px,var(--safe-bottom)) max(5px,var(--safe-left));gap:6px}.topbar{min-height:44px;padding:0 1px;gap:4px}.player-picker{gap:5px}.player-picker>span{display:none}.segmented{gap:0;padding:2px}.segmented button{width:28px;height:32px;font-size:12px}.header-actions{gap:1px}.icon-button{width:38px;height:40px}.toolbar-button{padding:8px 5px;gap:4px;font-size:11px}.toolbar-button svg{width:17px;height:17px}.board{gap:5px}.player{border-radius:9px}.player-top{padding:3px 6px 0 11px;min-height:46px}.player-name{font-size:12px;letter-spacing:.2px}.player-menu{width:44px;height:44px}.life-area{padding-bottom:10px}.life{font-size:min(68cqw,72cqh);-webkit-text-stroke:1.5px #070509}.background-picker{gap:7px}dialog{padding:18px}}
@container playfield (max-width:355px){.segmented button{width:25px}.toolbar-button{font-size:10px}.toolbar-button svg{display:none}}
@container playfield (max-height:500px){.app{padding:max(3px,var(--safe-top)) max(3px,var(--safe-right)) max(3px,var(--safe-bottom)) max(3px,var(--safe-left));gap:3px}.topbar{min-height:34px}.segmented button{height:28px}.icon-button{height:32px}.player-top{min-height:36px}.player-menu{width:34px;height:34px}.life-area{padding-bottom:5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.player.dead .life{z-index:5}
.board{overflow:clip}.player.dead{background:#030305}

#energy-saving[aria-pressed=true]{color:#b8e0ae;background:#28402b;border:1px solid #6b8d5f}
body.energy-saving *,body.energy-saving *::before,body.energy-saving *::after{animation:none!important;transition:none!important}
.energy-saving .player{box-shadow:none}
.energy-saving .player::before{background:#000b}
.energy-saving .flash{display:none}
.energy-saving .life{ text-shadow:0 3px 0 #070509 }
.energy-saving .player-name,.energy-saving .life-control{text-shadow:0 2px 2px #000}
.energy-saving .skull{filter:none}
.energy-saving dialog::backdrop{backdrop-filter:none}

.player .player-menu{width:56px;height:56px;flex-shrink:0;background:#fff;color:#141219;border:2px solid #fff;box-shadow:0 2px 8px #0005}
.player .player-menu:hover{background:#f3e8ed;color:#141219}
.player .player-menu svg{width:34px;height:34px}
.player .player-top{min-height:60px;flex-shrink:0}
.player .player-name{max-width:calc(100% - 64px)}
#fullscreen{width:auto;min-width:116px;height:52px;padding:0 16px;flex-shrink:0;background:linear-gradient(145deg,#b5253d,#7d192c);color:#fff5f6;border:1px solid #ba3a53;border-radius:12px;font-size:15px;font-weight:600;white-space:nowrap}
#exit-fullscreen{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:40;width:48px;height:48px;background:#08090da6;color:#fff1f5eb;border:1px solid #ffb1bf45;border-radius:50%;box-shadow:0 2px 12px #0006}
#exit-fullscreen[hidden]{display:none}
#exit-fullscreen svg{width:26px;height:26px;stroke-width:2;filter:drop-shadow(0 1px 2px #000)}
#exit-fullscreen:focus-visible{color:#fff;background:#17151ded}
@media(hover:hover){#exit-fullscreen:hover{color:#fff;background:#17151ded}}
.energy-saving #exit-fullscreen svg{filter:none}
.energy-saving .player .player-menu,.energy-saving #exit-fullscreen{box-shadow:none}
@container playfield (max-width:355px){#history{width:36px;height:40px;padding:0;justify-content:center}#history span{display:none}#history svg{display:block;width:23px;height:23px}}

body:not(.immersive) .player{touch-action:none;-webkit-touch-callout:none}
body:not(.immersive) .life-control{pointer-events:none;opacity:.22}
body:not(.immersive) .player-name,body:not(.immersive) .life{cursor:grab}
.board.reordering{cursor:grabbing}
.board .player.drag-source{opacity:.25}
.board .player.drop-target::after{inset:2px;border:3px solid var(--accent-bright);background:#ff526118}
.player.drag-ghost{position:fixed;z-index:35;margin:0;pointer-events:none;opacity:.9;outline:2px solid var(--accent-bright);box-shadow:0 14px 40px #000b;will-change:transform}
.drag-ghost .flash{display:none}
.energy-saving .player.drag-ghost{box-shadow:none}

/* Arcade totals slightly overlap the fixed-size life number and rotate with their player. */
.life-change{--combo-color:var(--damage);--combo-flash:#ff8a94;position:absolute;top:8cqh;left:50%;transform:translateX(-50%) rotate(-7deg);z-index:10;pointer-events:none;white-space:nowrap;opacity:1;transition:opacity .24s,translate .24s;font-family:'Barlow Condensed',Impact,sans-serif;font-size:min(24cqw,20cqh,80px);font-weight:900;font-style:italic;line-height:.9;letter-spacing:-.02em}
.life-change[data-digits="4"]{font-size:min(19cqw,20cqh,80px)}
.life-change[data-digits="5"]{font-size:min(16cqw,20cqh,80px)}
.life-change[hidden]{display:none}
.life-change[data-tone="healing"]{--combo-color:#9dffbd;--combo-flash:#d8ffe4;transform:translateX(-50%) rotate(5deg)}
.life-change[data-tone="neutral"]{--combo-color:#eee6eb;--combo-flash:#fff4f6}
.life-change::before{content:'';position:absolute;inset:12% -10% -9%;background:#08050bef;clip-path:polygon(7% 15%,33% 7%,26% 0,92% 9%,87% 35%,100% 32%,90% 89%,61% 96%,68% 100%,0 90%,5% 59%,0 62%);border-bottom:3px solid var(--combo-color);transform:skewX(-10deg);z-index:-1}
.life-change span{display:block;padding:.08em .3em;color:var(--combo-color);-webkit-text-stroke:1.5px #17080b;paint-order:stroke fill;text-shadow:0 2px 0 #17080b,2px 4px 0 #17080b,0 0 12px #000;font-variant-numeric:tabular-nums;transform-origin:center bottom}
.life-change[data-pulse="0"] span{animation:combo-pop-a .22s ease-out}
.life-change[data-pulse="1"] span{animation:combo-pop-b .22s ease-out}
.life-change.fading{opacity:0;translate:0 -8px}
@keyframes combo-pop-a{0%{transform:scale(1.18) rotate(5deg);color:var(--combo-flash)}65%{transform:scale(.96) rotate(-2deg)}100%{transform:scale(1)}}
@keyframes combo-pop-b{0%{transform:scale(1.18) rotate(-5deg);color:var(--combo-flash)}65%{transform:scale(.96) rotate(2deg)}100%{transform:scale(1)}}
.energy-saving .life-change span{text-shadow:0 2px 0 #17080b}

/* Setup follows the phone; only the open game forces a landscape surface. */
@media(orientation:portrait){
 body.immersive{--play-width:100vh;--play-height:100vw;--play-width:100dvh;--play-height:100dvw;--safe-top:env(safe-area-inset-right);--safe-right:env(safe-area-inset-bottom);--safe-bottom:env(safe-area-inset-left);--safe-left:env(safe-area-inset-top)}
 body.immersive .playfield{transform:translateX(100vw) rotate(90deg);transform:translateX(100dvw) rotate(90deg)}
 body.immersive dialog{transform:translate(-50%,-50%) rotate(90deg)}
 body:not(.immersive) .topbar{flex-direction:column;align-items:stretch;gap:8px;flex-shrink:0}
 body:not(.immersive) .player-picker{justify-content:center}
 body:not(.immersive) .header-actions{justify-content:space-between}
 body:not(.immersive) .board[data-count="5"],body:not(.immersive) .board[data-count="6"]{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
 body:not(.immersive) .board[data-count="5"] .player:nth-child(4){grid-column:auto}
 body:not(.immersive) .board[data-count="5"] .player:last-child{grid-column:1/-1}
 body:not(.immersive) dialog{padding:18px}
}

#reset{width:auto;min-width:100px;height:52px;padding:0 14px;flex-shrink:0;border:1px solid #773044;border-radius:12px;background:#28141d;color:#f7dce3;font-size:14px;font-weight:600;white-space:nowrap}
#reset:hover{background:#42202c;border-color:var(--accent-bright)}
#fullscreen:hover{background:#b5253d;border-color:var(--accent-bright)}

.player-stats-panel{padding:14px;margin:0 0 20px;background:#09090f77;border:1px solid #583441;border-radius:9px}
.stats-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stats-link{padding:7px 0;background:transparent;color:#ff9eae;font-size:12px;text-decoration:underline;text-underline-offset:3px}
.stats-counts{display:flex;gap:32px;margin-top:12px}.stats-counts[hidden]{display:none}
.stats-total{display:flex;flex-direction:column;gap:3px;min-width:42px}.stats-total b{font-family:'Barlow Condensed',sans-serif;font-size:32px;line-height:1;color:#fff0f4;font-variant-numeric:tabular-nums}.stats-total span{font-size:11px;color:#beacb4}
.player-stats-panel .dialog-help{margin:10px 0 0}.stats-list{list-style:none;padding:0;margin:16px 0}.stats-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;padding:15px 12px;margin:8px 0;border:1px solid #583441;background:#09090f66;border-radius:8px;align-items:center}
.stats-name{grid-column:1/-1;text-align:left;font-family:Cinzel,Georgia,serif;font-size:17px;font-weight:600;background:transparent;padding:0;overflow-wrap:anywhere;color:#fff0f4}.stats-name:hover{color:#ff9eae}.stats-delete{min-height:40px;padding:8px 10px;background:#421821;color:#ffb5c1;border:1px solid #863047;border-radius:6px;font-size:12px}
.stats-row .stats-total:first-of-type{justify-self:start}.field-error{color:#ff9eae;font-size:12px;line-height:1.5;margin:0 0 14px}.field-error:empty{display:none}.name-input[aria-invalid=true]{border-color:#ff5261}