/* Retro arcade skin (loaded last). 1P = green, 2P = red, matching the fencers' masks. */
:root{--bg:#07081a;--panel:#0d1030;--line:#3a4cff;--white:#fbfbf2;--muted:#a9b3d6;--gold:#ffd23f;--red:#3ddc6f;--blue:#ff4b3e;
  --px:'Press Start 2P','DotGothic16',monospace;--jp:'DotGothic16','Noto Sans JP',sans-serif;--edge:#000;font-family:var(--jp)}
body{background:#07081a;background-image:radial-gradient(ellipse at 50% -10%,#1d2a8a 0,transparent 60%),repeating-linear-gradient(0deg,#ffffff05 0 2px,transparent 2px 4px)}
*,*:before,*:after{border-radius:0!important}
h1,h2,h3,strong,b,button,small,span,p,legend,kbd{font-family:var(--jp)}

/* Top bar */
.brand{font-family:var(--px);font-style:normal;font-size:30px;color:var(--gold);letter-spacing:2px;text-shadow:4px 4px 0 #b3261e,8px 8px 0 #000}
.brand-mark{display:none}.brand-dot{color:#fff}
.top-label{font-family:var(--px);font-size:10px;letter-spacing:2px;color:#7f8cff;animation:retro-blink 1.4s steps(1) infinite}
.icon-button{background:#11163f;border:3px solid #fff;box-shadow:4px 4px 0 #000}
.icon-button:hover{background:#2732a0}

/* Arena frame + CRT scanlines */
.arena{border:4px solid #fff;box-shadow:0 0 0 4px #000,8px 8px 0 4px #000,0 0 40px #3a4cff55}
.arena:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;background:repeating-linear-gradient(0deg,#00000024 0 1px,transparent 1px 3px)}
html[data-phase='menu'] .arena,html[data-phase='end'] .arena{border-color:#fff}
canvas#game{image-rendering:pixelated}

/* Scoreboard: fighting-game health bars */
.scoreboard{top:16px;left:18px;right:18px;grid-template-columns:1fr 132px 1fr;gap:10px}
.contestant,.contestant.cpu{background:#000a;border:3px solid #fff;box-shadow:4px 4px 0 #000;padding:8px 12px}
.contestant{border-bottom:3px solid #fff}
.competitor strong{font-family:var(--px);font-size:13px;letter-spacing:1px;color:#fff;text-shadow:2px 2px 0 #000}
.competitor-note{font-family:var(--px);font-size:9px;color:var(--gold)}
.color-chip{width:12px;height:12px;background:var(--red)}.cpu .color-chip{background:var(--blue)}
.hud-portrait{border:2px solid #fff;image-rendering:pixelated}
.score{font-family:var(--px);font-size:38px;letter-spacing:0;color:var(--gold);text-shadow:3px 3px 0 #b3261e,5px 5px 0 #000}
.lights{gap:3px;flex:1;max-width:260px}
.lights i{flex:1;height:16px;transform:none;background:#2a0e14;border:2px solid #000;box-shadow:inset 0 -4px 0 #0005}
.player .lights i.on{background:var(--red);box-shadow:inset 0 -4px 0 #0004,0 0 8px #3ddc6f88}
.cpu .lights i.on{background:var(--blue);box-shadow:inset 0 -4px 0 #0004,0 0 8px #ff4b3e88}
.match-info{background:#000;border:3px solid #fff;box-shadow:4px 4px 0 #000;padding:6px 4px 8px;gap:6px}
.round-label{font-family:var(--px);font-size:8px;color:#fff}
.timer{font-family:var(--px);font-size:26px;color:var(--gold);text-shadow:3px 3px 0 #b3261e}
.match-mode{font-size:10px;color:var(--muted)}
.arena-meta{display:none}

/* Stamina bars + distance */
.energy>div:first-child{font-family:var(--px);font-size:8px;letter-spacing:1px;color:#fff;text-shadow:2px 2px 0 #000}
.energy-track{height:14px;border:3px solid #fff;background:#000;box-shadow:3px 3px 0 #000}
.energy-track i{background:repeating-linear-gradient(90deg,var(--red) 0 10px,#2aa653 10px 12px)}
.cpu .energy-track i{background:repeating-linear-gradient(90deg,var(--blue) 0 10px,#c2302a 10px 12px)}
.distance-info{font-family:var(--px);font-size:9px;line-height:1.6;color:#fff;background:#000c;border:2px solid #fff;padding:6px 4px}

/* Big calls: EN GARDE / ALLEZ / TOUCHÉ */
.bout-call{font-family:var(--px);font-style:normal;font-weight:400;font-size:clamp(22px,4vw,48px);letter-spacing:3px;color:var(--gold);
  text-shadow:-3px 0 0 #000,3px 0 0 #000,0 -3px 0 #000,0 3px 0 #000,6px 6px 0 #b3261e,9px 9px 0 #000}
.bout-call small{font-family:var(--jp);font-size:16px;letter-spacing:1px;color:#fff;text-shadow:2px 2px 0 #000,-2px -2px 0 #000}
.bout-call.player{color:var(--red)}.bout-call.cpu{color:var(--blue)}.bout-call.double{color:var(--gold)}

/* Lobby: PLAYER SELECT */
.start-layer{background:#070a24f2}
.lobby-heading{background:none;border-bottom:3px dashed #3a4cff}
.eyebrow{font-family:var(--px);font-size:10px;letter-spacing:2px;color:var(--gold)}
h1{font-family:var(--jp);font-weight:400;text-shadow:3px 3px 0 #000}
.rule-badges span{font-family:var(--jp);font-weight:400;background:#000;border:2px solid #fff;box-shadow:3px 3px 0 #000}
.selected-character,.selected-character.cpu{background:#000;border:3px solid #fff;border-bottom:6px solid var(--red);box-shadow:5px 5px 0 #000}
.selected-character.cpu{border-bottom-color:var(--blue)}
.selected-copy .side-label{font-family:var(--px);font-size:10px;color:var(--red)}.cpu .side-label{color:var(--blue)}
.selected-copy strong{font-family:var(--px);font-size:clamp(13px,1.5vw,18px);line-height:1.6}
.lobby-portrait,.roster-portrait{image-rendering:pixelated}
.versus,.character-matchup .versus{font-family:var(--px);font-style:normal;font-size:40px;color:var(--gold);text-shadow:4px 4px 0 #b3261e,7px 7px 0 #000;animation:retro-pulse .9s steps(2) infinite}
.side-selector button{background:#000;border:3px solid #6b74b8;font-weight:400}
#choosePlayer[aria-pressed='true']{background:#0f3a20;border-color:var(--red)}#chooseCpu[aria-pressed='true']{background:#3a0f0f;border-color:var(--blue)}
.roster-character{background:#000;border:3px solid #3a4cff;box-shadow:4px 4px 0 #000}
.roster-character:hover{transform:none;border-color:#fff}
.roster-character[aria-pressed='true']{border-color:var(--gold);box-shadow:0 0 0 3px #000,0 0 0 6px var(--gold);animation:retro-pulse 1s steps(2) infinite}
.roster-character strong{font-weight:400}
.roster-badges{font-family:var(--px);font-size:8px;color:#000;background:var(--red)}
.start-card{background:#000;border-top:3px solid #fff}
.difficulty legend{font-family:var(--px);font-size:9px;letter-spacing:1px;color:var(--gold)}
.difficulty label>span{background:#0d1030;border:3px solid #3a4cff;box-shadow:3px 3px 0 #000}
.difficulty b{font-weight:400}
.difficulty input:checked+span{border-color:var(--gold);background:#2732a0;box-shadow:3px 3px 0 #000}
.start-button{font-family:var(--px);font-size:14px;font-weight:400;letter-spacing:1px;color:#000;background:var(--gold);border:4px solid #fff;box-shadow:5px 5px 0 #000,inset -4px -4px 0 #c9971a}
.start-button:not(:disabled){animation:retro-pulse 1.1s steps(2) infinite}
.start-button:hover{filter:none;background:#fff17a}
.start-button:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #000}
.start-footnote{font-size:12px}
.mascot-guide{filter:drop-shadow(3px 3px 0 #000)}

/* Pause / result */
.overlay{background:#000c;backdrop-filter:none}
.small-card{background:#0d1030;border:4px solid #fff;box-shadow:8px 8px 0 #000}
.small-card .eyebrow{font-size:18px;color:var(--gold);text-shadow:3px 3px 0 #b3261e}
.small-card h2{font-weight:400}
.final-score{font-family:var(--px);font-size:44px;text-shadow:4px 4px 0 #b3261e,7px 7px 0 #000}
.winner-portrait{border:4px solid var(--gold);border-radius:0!important}
.result-mascot{filter:drop-shadow(3px 3px 0 #000)}

/* Controls: arcade buttons */
.group-label{font-family:var(--px);font-size:9px;letter-spacing:1px}
.group-label b{font-family:var(--jp);font-weight:400}
.control{background:#11163f;border:3px solid #fff;box-shadow:4px 4px 0 #000}
.control:hover{background:#2732a0;border-color:#fff}
.control.held,.control:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #000;background:#3a4cff;border-color:var(--gold)}
.control strong{font-weight:400}
.control.attack{background:#7a1d18}.control.lunge{background:#7a5a0d}.control.parry{background:#123f7a}.control.disengage{background:#4b1f7a}
.action-top kbd{border:2px solid #fff;background:#000}
.piste-overview{border:3px solid #fff!important;background:#000!important;box-shadow:5px 5px 0 #000}
.piste-caption strong{font-weight:400}
footer p{color:var(--muted)}.tip-label{font-family:var(--px);font-size:9px;font-weight:400}
dialog{background:#0d1030;border:4px solid #fff;box-shadow:8px 8px 0 #000}
.help-grid>div{background:#000;border:2px solid #3a4cff}.close-button{background:#000;border:2px solid #fff}

@keyframes retro-blink{50%{opacity:.25}}
@keyframes retro-pulse{50%{filter:brightness(1.25)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
@media(max-width:700px){.brand{font-size:20px}.score{font-size:28px}.timer{font-size:18px}.competitor strong{font-size:10px}}

/* Phone landscape (touch layout) */
html[data-layout='landscape']:not([data-phase='menu']) .topbar .brand{font-size:13px;text-shadow:2px 2px 0 #b3261e,4px 4px 0 #000}
html[data-layout='landscape']:not([data-phase='menu']) .scoreboard{left:calc(var(--edge-left) + 92px);grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr)}
html[data-layout='landscape']:not([data-phase='menu']) .contestant{padding:4px 8px;border-width:2px;box-shadow:3px 3px 0 #000}
html[data-layout='landscape']:not([data-phase='menu']) .competitor strong{font-size:9px}
html[data-layout='landscape']:not([data-phase='menu']) .score{font-size:18px;text-shadow:2px 2px 0 #b3261e,3px 3px 0 #000}
html[data-layout='landscape']:not([data-phase='menu']) .match-info{padding:3px 2px;border-width:2px;box-shadow:3px 3px 0 #000}
html[data-layout='landscape']:not([data-phase='menu']) .round-label{font-family:var(--jp);font-size:10px}
html[data-layout='landscape']:not([data-phase='menu']) .timer{font-size:14px;text-shadow:2px 2px 0 #b3261e}
html[data-layout='landscape']:not([data-phase='menu']) .energy-track{height:10px;border-width:2px;box-shadow:2px 2px 0 #000}
html[data-layout='landscape']:not([data-phase='menu']) .energy>div:first-child{font-family:var(--jp);font-size:11px}
html[data-layout='landscape']:not([data-phase='menu']) .distance-info{font-family:var(--jp);font-size:12px;padding:3px 6px}
html[data-layout='landscape']:not([data-phase='menu']) .bout-call{font-size:clamp(18px,4vw,34px)}
.control,.control strong,.control .action-icon,.control span{color:#fff!important}
.control:disabled,.control[aria-disabled='true']{opacity:.55}

.control.aim.latched{border-color:var(--gold)!important;background:#6b5208!important;box-shadow:0 0 0 3px #000,0 0 12px #ffd23f88}

/* Phones: no text selection, callout or zoom from long presses and double taps. */
html{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
input,textarea{-webkit-user-select:auto;user-select:auto}
.control{touch-action:none;-webkit-touch-callout:none}
/* Portrait keeps page scrolling over the arena; landscape play locks it. */
.arena,canvas{-webkit-touch-callout:none;touch-action:pan-y}
html[data-layout='landscape']:not([data-phase='menu']) .arena,html[data-layout='landscape']:not([data-phase='menu']) canvas{touch-action:none}

/* Landscape phones: a cross pad on the left (move + line), a diamond on the right (blade). */
html[data-layout='landscape']:not([data-phase='menu']) .movement-group{display:grid;grid-template-columns:repeat(3,62px);grid-template-rows:repeat(3,62px);gap:4px;pointer-events:auto}
html[data-layout='landscape']:not([data-phase='menu']) .movement-buttons,html[data-layout='landscape']:not([data-phase='menu']) .aim-buttons{display:contents}
html[data-layout='landscape']:not([data-phase='menu']) .control.movement,html[data-layout='landscape']:not([data-phase='menu']) .control.aim{width:62px;height:62px;min-height:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-size:12px}
html[data-layout='landscape']:not([data-phase='menu']) .control.movement[data-action='back']{grid-area:2/1}
html[data-layout='landscape']:not([data-phase='menu']) .control.movement[data-action='forward']{grid-area:2/3}
html[data-layout='landscape']:not([data-phase='menu']) .control.aim[data-action='high']{grid-area:1/2}
html[data-layout='landscape']:not([data-phase='menu']) .control.aim[data-action='low']{grid-area:3/2}
html[data-layout='landscape']:not([data-phase='menu']) .movement-group:after{content:'';grid-area:2/2;border:3px dotted #ffffff44}
html[data-layout='landscape']:not([data-phase='menu']) .move-symbol{font-size:22px}
html[data-layout='landscape']:not([data-phase='menu']) .action-buttons{display:grid;grid-template-columns:repeat(3,62px);grid-template-rows:repeat(3,62px);gap:4px}
html[data-layout='landscape']:not([data-phase='menu']) .action-buttons .control{width:62px;height:62px;justify-self:center}
html[data-layout='landscape']:not([data-phase='menu']) .action-buttons .disengage{grid-area:1/2}
html[data-layout='landscape']:not([data-phase='menu']) .action-buttons .parry{grid-area:2/1}
html[data-layout='landscape']:not([data-phase='menu']) .action-buttons .attack{grid-area:2/3}
html[data-layout='landscape']:not([data-phase='menu']) .action-buttons .lunge{grid-area:3/2}
html[data-layout='landscape']:not([data-phase='menu']) .action-buttons .control strong,html[data-layout='landscape']:not([data-phase='menu']) .action-buttons .parry strong,html[data-layout='landscape']:not([data-phase='menu']) .action-buttons .disengage strong{font-size:12px}
html[data-layout='landscape']:not([data-phase='menu']) .action-buttons small{display:none}

/* Portrait phones: both scoreboards fit side by side (names shrink, touch bars go under the score). */
@media (max-width:700px){
  html:not([data-layout='landscape']) .scoreboard{left:8px;right:8px;top:8px;gap:6px;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr)}
  html:not([data-layout='landscape']) .contestant,html:not([data-layout='landscape']) .contestant.cpu{min-width:0;padding:6px 8px;box-shadow:3px 3px 0 #000}
  html:not([data-layout='landscape']) .competitor{min-width:0;gap:4px}
  html:not([data-layout='landscape']) .competitor strong{font-size:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html:not([data-layout='landscape']) .competitor-note,html:not([data-layout='landscape']) .hud-portrait{display:none}
  html:not([data-layout='landscape']) .score-line{display:flex;flex-direction:column;align-items:stretch;gap:4px}
  html:not([data-layout='landscape']) .cpu .score-line{flex-direction:column-reverse}
  html:not([data-layout='landscape']) .score{font-size:24px;text-align:left}
  html:not([data-layout='landscape']) .cpu .score{text-align:right}
  html:not([data-layout='landscape']) .lights{display:flex!important;flex-direction:row!important;max-width:none;width:100%}
  html:not([data-layout='landscape']) .lights i{height:8px;border-width:1px}
  html:not([data-layout='landscape']) .match-info{padding:4px 2px}
  html:not([data-layout='landscape']) .timer{font-size:15px}
  html:not([data-layout='landscape']) .round-label{font-size:7px}
  html:not([data-layout='landscape']) .match-mode{display:none}
}

/* Help: tactics wheel and match-up table */
.tactics h3{font-family:var(--jp);font-weight:400;color:var(--gold);font-size:16px;margin:22px 0 8px}
.tactics .wheel{display:block;width:100%;max-width:420px;margin:8px auto}
.matchup{border-collapse:collapse;width:100%;font-size:13px;margin:8px 0}
.matchup th,.matchup td{border:2px solid #3a4cff;padding:5px 4px;text-align:center;font-weight:400}
.matchup thead th{background:#000;color:var(--gold);font-size:11px}
.matchup tbody th{background:#000;text-align:left;font-size:12px}

/* ===== Game-controller buttons (2026-11-01): a D-pad on the left, round face buttons on the right ===== */
.control-deck{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:16px}
.control-deck .group-label{display:none!important}
.control-deck .movement-group{--pad:62px;display:grid!important;grid-template-columns:repeat(3,var(--pad))!important;grid-template-rows:repeat(3,var(--pad))!important;gap:0!important;flex:0 0 auto!important;margin:0!important;filter:drop-shadow(0 5px 0 #000);pointer-events:auto}
.control-deck .movement-buttons,.control-deck .aim-buttons{display:contents!important}
.control-deck .control.movement,.control-deck .control.aim{width:var(--pad)!important;height:var(--pad)!important;min-height:0!important;padding:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:1px!important;background:#2b2e3b!important;border:0!important;box-shadow:inset 0 3px 0 #ffffff1f!important;color:#e8e8f0!important;font-size:10px}
.control-deck .control.movement[data-action='back']{grid-area:2/1!important;border-radius:12px 0 0 12px!important}
.control-deck .control.movement[data-action='forward']{grid-area:2/3!important;border-radius:0 12px 12px 0!important}
.control-deck .control.aim[data-action='high']{grid-area:1/2!important;border-radius:12px 12px 0 0!important}
.control-deck .control.aim[data-action='low']{grid-area:3/2!important;border-radius:0 0 12px 12px!important}
.control-deck .movement-group:after{content:''!important;grid-area:2/2!important;border:0!important;background:radial-gradient(circle,#1d1f29 0 34%,#2b2e3b 36%)!important}
.control-deck .move-symbol{display:none!important}
.control-deck .control.movement:before,.control-deck .control.aim:before{font-size:20px;line-height:1;color:#c9cbd8}
.control-deck .control.movement[data-action='back']:before{content:'◀'}
.control-deck .control.movement[data-action='forward']:before{content:'▶'}
.control-deck .control.aim[data-action='high']:before{content:'▲'}
.control-deck .control.aim[data-action='low']:before{content:'▼'}
.control-deck .control.movement span:not(.move-symbol),.control-deck .control.aim span{font-size:10px!important;color:#a9adc2!important}
.control-deck .control.movement.held,.control-deck .control.movement:active,.control-deck .control.aim.held,.control-deck .control.aim:active{background:#454a5f!important;transform:none!important}
.control-deck .control.movement.held:before,.control-deck .control.aim.held:before,.control-deck .control.aim.latched:before{color:var(--gold)}
.control-deck .control.aim.latched{background:#4a4220!important;box-shadow:inset 0 0 0 2px var(--gold)!important}

.control-deck .action-group{flex:0 0 auto!important;margin:0!important;pointer-events:auto}
.control-deck .action-buttons{--btn:64px;display:grid!important;grid-template-columns:repeat(3,var(--btn))!important;grid-template-rows:repeat(3,calc(var(--btn) - 6px))!important;gap:0 4px!important}
.control-deck .action-buttons .control{width:var(--btn)!important;height:var(--btn)!important;min-height:0!important;padding:0!important;justify-self:center;align-self:center;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important;border-radius:50%!important;border:3px solid #000!important;box-shadow:inset 0 -6px 0 #00000059,inset 0 4px 0 #ffffff4d,0 5px 0 #000!important;color:#fff!important}
.control-deck .action-buttons .disengage{grid-area:1/2!important;background:#7b3fd0!important}
.control-deck .action-buttons .parry{grid-area:2/1!important;background:#2f6fe0!important}
.control-deck .action-buttons .attack{grid-area:2/3!important;background:#d8332b!important}
.control-deck .action-buttons .lunge{grid-area:3/2!important;background:#e8b20c!important}
.control-deck .action-buttons .lunge *{color:#1b1400!important}
.control-deck .action-buttons small{display:none!important}
.control-deck .action-buttons .action-top{display:flex!important;justify-content:center!important;margin:0!important}
.control-deck .action-buttons .action-icon{font-size:18px!important;height:auto!important;line-height:1!important}
.control-deck .action-buttons .action-top kbd{display:none!important}
.control-deck .action-buttons strong{font-size:10px!important;margin:0!important;font-weight:400!important}
.control-deck .action-buttons .control.held,.control-deck .action-buttons .control:active{transform:translateY(4px)!important;box-shadow:inset 0 -2px 0 #00000059,inset 0 3px 0 #ffffff33,0 1px 0 #000!important;filter:brightness(1.15)}
/* Keyboard hints stay on wide screens, under each pad */
@media (pointer:fine) and (min-width:900px){.control-deck .movement-group{--pad:66px}.control-deck .action-buttons{--btn:70px}}

/* Portrait phones: D-pad and face buttons side by side */
@media (max-width:700px){html:not([data-layout='landscape']) .control-deck{flex-wrap:nowrap!important;gap:6px!important;justify-content:space-between!important}
 html:not([data-layout='landscape']) .control-deck .movement-group{--pad:52px}
 html:not([data-layout='landscape']) .control-deck .action-buttons{--btn:54px;gap:0 2px!important}
 html:not([data-layout='landscape']) .control-deck .action-buttons strong{font-size:9px!important}}
@media (max-width:360px){html:not([data-layout='landscape']) .control-deck .movement-group{--pad:46px}html:not([data-layout='landscape']) .control-deck .action-buttons{--btn:48px}}