/* Arena (/arena/): the live match lobby, room and match screens. Only ar- classes; see specs/arena-spec.md. */

/* ---- Sidebar tag ---- */
.ar-nav-tag{margin-left:auto; font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 7px; border-radius:var(--radius-tag); border:1px solid var(--color-border-strong);
  color:var(--color-action-insight); line-height:1.4;}
.sidebar.collapsed .ar-nav-tag, .site-sidebar.collapsed .ar-nav-tag{display:none;}

/* ---- Buttons on the light column ---- */
/* The theme's cyan secondary text is faint on white and a disabled button has no style of its own. */
main[data-page="arena"] .btn-secondary{color:#0E7C88; border-color:#0E7C88;}
main[data-page="arena"] .btn-secondary:hover:not(:disabled){background:rgba(14,124,136,.08);}
main[data-page="arena"] .btn:disabled{opacity:.35; cursor:not-allowed;}

/* ---- Page frame ---- */
.ar-lobby{padding-top:var(--space-32); padding-bottom:var(--space-64); font-family:var(--font-body);
  color:var(--color-text-primary);}
.ar-title{font-family:var(--font-display); font-size:40px; font-weight:700; letter-spacing:.01em;
  margin:0 0 var(--space-8);}
.ar-intro{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-12); margin:0 0 var(--space-24);
  font-size:14px; color:rgba(225,230,236,.75);}
.ar-note p{margin:0 0 var(--space-16); font-size:14px; color:rgba(225,230,236,.8);}

/* ---- Connection status ---- */
.ar-status{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:rgba(225,230,236,.65);}
.ar-dot{width:8px; height:8px; border-radius:50%; background:var(--color-border-strong);}
.ar-status-connected .ar-dot{background:var(--color-action-success);}
.ar-status-connecting .ar-dot, .ar-status-reconnecting .ar-dot{background:var(--color-action-insight);}

/* ---- Messages ---- */
.ar-rejected{margin:0 0 var(--space-16); font-size:13px; color:var(--color-action-danger);}
.ar-empty{margin:0; padding:var(--space-24); font-size:14px; color:rgba(225,230,236,.7);
  border:1px dashed var(--color-border-strong); border-radius:var(--radius-container);}

/* ---- Avatars ---- */
.ar-avatar{width:36px; height:36px; flex:0 0 36px; border-radius:50%; object-fit:cover;
  background:var(--color-bg-selected);}
.ar-avatar-initial{display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display);
  font-size:17px; font-weight:700; color:var(--color-action-primary);}

/* ---- Invitations ---- */
.ar-invites{display:flex; flex-direction:column; gap:var(--space-8); margin:0 0 var(--space-24);}
.ar-invite{display:flex; align-items:center; gap:var(--space-12); padding:var(--space-12) var(--space-16);
  background:var(--color-bg-elevated); border:1px solid var(--color-action-primary);
  border-radius:var(--radius-container);}
.ar-invite-out{border-color:var(--color-border-strong);}
.ar-invite-text{flex:1 1 auto; min-width:0; font-size:14px;}
.ar-countdown{font-variant-numeric:tabular-nums; font-size:13px; color:var(--color-action-insight); min-width:32px;
  text-align:right;}
.ar-actions{display:flex; gap:var(--space-8);}

/* ---- Member list ---- */
.ar-members{list-style:none; margin:0; padding:0; background:var(--color-bg-elevated);
  border:1px solid var(--color-border-subtle); border-radius:var(--radius-container); overflow:hidden;}
.ar-member{display:flex; align-items:center; gap:var(--space-12); padding:var(--space-12) var(--space-16);}
.ar-member + .ar-member{border-top:1px solid var(--color-border-subtle);}
.ar-name{flex:1 1 auto; min-width:0; font-size:14px; font-weight:500; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;}
.ar-tag{font-size:11px; font-weight:600; padding:3px 9px; border-radius:var(--radius-tag);
  border:1px solid var(--color-border-strong); color:rgba(225,230,236,.75); white-space:nowrap;}
.ar-tag-available{border-color:var(--color-action-success); color:var(--color-action-success);}
.ar-tag-invited{border-color:var(--color-action-insight); color:var(--color-action-insight);}
.ar-tag-inmatch{background:var(--color-bg-selected);}

/* ---- Phones ---- */
@media (max-width:600px){
  .ar-lobby{padding-top:var(--space-24);}
  .ar-title{font-size:32px;}
  .ar-member, .ar-invite{flex-wrap:wrap;}
  .ar-invite-btn, .ar-actions{flex:1 0 100%;}
  .ar-invite-btn{justify-content:center;}
  .ar-actions .btn{flex:1 1 0; justify-content:center;}
}

/* ---- Room ---- */
.ar-room{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--space-24); align-items:start;}
.ar-room-main{display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-16); min-width:0;}
.ar-room-side{display:flex; flex-direction:column; gap:var(--space-12); min-width:0;}
.ar-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;}

/* picker */
.ar-picker{display:flex; flex-wrap:wrap; gap:var(--space-12); width:100%;}
.ar-field{display:flex; flex-direction:column; gap:6px; flex:1 1 180px; min-width:0;}
.ar-field-label{font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(2,19,41,.6); padding:0;}
/* The page sits in the light content column: --input-bg and --input-border-default resolve to the dark theme at the
   root, so the select reads the column's own tokens. */
.ar-select{font-family:var(--font-body); font-size:14px; color:var(--color-text-primary); background:var(--color-bg-elevated);
  border:1.5px solid var(--color-border-input); border-radius:var(--input-radius); padding:9px 12px; width:100%;}
.ar-select:focus-visible{outline:none; border-color:var(--input-border-focus);}
.ar-select:disabled{opacity:.45; cursor:not-allowed;}
.ar-field-note{font-size:12px; color:rgba(2,19,41,.65);}
.ar-field-error{color:var(--color-action-danger);}

/* source radio */
.ar-source{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-8) var(--space-24); margin:0; padding:0;
  border:0; min-width:0;}
.ar-source legend{flex:1 0 100%; margin-bottom:var(--space-8);}
.ar-radio{display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--space-8); font-size:14px; cursor:pointer;}
.ar-radio input{accent-color:var(--color-action-primary); margin:0;}
.ar-radio-off{cursor:not-allowed; color:rgba(225,230,236,.5);}
.ar-hint{font-size:12px; color:rgba(225,230,236,.55);}

.ar-squad-note{margin:0; font-size:13px; color:rgba(225,230,236,.7);}

/* slot cards */
.ar-slot{display:flex; flex-direction:column; gap:var(--space-8); padding:var(--space-12) var(--space-16);
  background:var(--color-bg-elevated); border:1px solid var(--color-border-subtle); border-radius:var(--radius-container);}
.ar-slot-mine{border-color:var(--color-border-strong);}
.ar-slot-user, .ar-slot-team{display:flex; align-items:center; gap:var(--space-8); min-width:0;}
.ar-slot-team-name{flex:1 1 auto; min-width:0; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ar-crest{width:32px; height:32px; flex:0 0 32px; object-fit:contain;}
.ar-crest-empty{display:inline-block; border-radius:var(--radius-control); background:var(--color-bg-selected)
  var(--icon-crest-placeholder) center/60% no-repeat;}
.ar-tag-ready{border-color:var(--color-action-success); color:var(--color-action-success);}
.ar-tag-off{border-color:var(--color-action-danger); color:var(--color-action-danger);}
.ar-room-buttons{display:flex; flex-wrap:wrap; gap:var(--space-8);}
.ar-room-buttons .btn{flex:1 1 auto; justify-content:center;}
.ar-room-side .ar-rejected{margin:0;}

/* lineup editor: the formation select, one player select per slot, apply */
.ar-lineup{display:flex; flex-direction:column; gap:var(--space-12); padding:var(--space-12) var(--space-16);
  background:var(--color-bg-elevated); border:1px solid var(--color-border-subtle); border-radius:var(--radius-container);}
.ar-lineup-head{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--space-12);}
.ar-lineup-head .ar-field{flex:0 1 180px;}
.ar-lineup-slots{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:var(--space-8);}
.ar-lineup-slot{display:flex; align-items:center; gap:var(--space-8); min-width:0;}
.ar-lineup-slot .ar-select{flex:1 1 auto; min-width:0; padding:6px 10px; font-size:13px;}
.ar-lineup-pos{flex:0 0 32px; text-align:center; font-size:11px; font-weight:600; letter-spacing:.04em; padding:3px 0;
  border-radius:var(--radius-control); background:var(--color-bg-selected); color:var(--color-text-primary);}
.ar-lineup-pos-gk{background:#2e9f50; color:#fff;}
.ar-lineup-pos-df{background:#2f56a8; color:#fff;}
.ar-lineup-pos-mf{background:#e0b92e; color:#1b1d22;}
.ar-lineup-pos-fw{background:#b8352c; color:#fff;}
.ar-lineup-foot{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-12);}

/* squad list */
.ar-squad{width:100%; min-width:0; background:var(--color-bg-elevated); border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-container);}
.ar-squad-head{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-12); padding:var(--space-12) var(--space-16);
  border-bottom:1px solid var(--color-border-subtle);}
.ar-squad-title{font-size:15px;}
.ar-squad-xi{margin-left:auto; font-size:12px; color:var(--color-action-insight);}
.ar-squad-scroll{position:relative; overflow-x:auto;}
.ar-squad-table{width:100%; border-collapse:collapse; font-size:13px;}
.ar-squad-table th, .ar-squad-table td{padding:6px var(--space-12); text-align:left; white-space:nowrap;
  border-top:1px solid var(--color-border-subtle);}
.ar-squad-table thead th{border-top:0; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(225,230,236,.6);}
.ar-squad-table .ar-num{text-align:right; font-variant-numeric:tabular-nums;}
.ar-group-row th{font-family:var(--font-display); font-size:14px; font-weight:700; letter-spacing:.03em;
  background:var(--color-bg-selected);}
.ar-squad-table tr.ar-xi td{background:rgba(97,225,238,.06);}
.ar-squad-table tr.ar-xi td:first-child{box-shadow:inset 3px 0 0 var(--color-action-primary);}
.ar-player{display:flex; align-items:center; gap:var(--space-8);}
.ar-player-name{overflow:hidden; text-overflow:ellipsis; max-width:200px;}
.ar-photo{width:24px; height:24px; flex:0 0 24px; border-radius:50%; object-fit:cover; background:var(--color-bg-selected);}
.ar-photo-initial{display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
  color:var(--color-action-primary);}
.ar-tag-xi{padding:1px 6px; font-size:10px; border-color:var(--color-action-primary); color:var(--color-action-primary);}
.ar-tag-few{padding:1px 6px; font-size:10px; font-weight:500;}
.ar-bars{display:inline-flex; gap:3px; vertical-align:middle;}
.ar-bar{position:relative; display:inline-block; width:40px; height:6px; border-radius:3px; overflow:hidden;
  background:var(--color-border-subtle);}
.ar-bar-fill{position:absolute; left:0; top:0; bottom:0; background:var(--color-action-primary); border-radius:3px;}

@media (max-width:900px){
  .ar-room{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:600px){
  .ar-picker{flex-direction:column;}
  .ar-field{flex:1 1 auto;}
  .ar-squad-xi{margin-left:0; flex:1 0 100%;}
  .ar-use{width:100%; justify-content:center;}
}

/* match */
.ar-match{display:flex; flex-direction:column; gap:var(--space-16);}
.ar-board{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:var(--space-16);
  padding:var(--space-12) var(--space-16); background:var(--color-bg-elevated); border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-container);}
.ar-board-side{display:flex; align-items:center; gap:var(--space-12); min-width:0;}
.ar-board-away{justify-content:flex-end; text-align:right;}
.ar-board-name{min-width:0; font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ar-board-mine .ar-board-name{color:var(--color-action-primary);}
.ar-board-dash{padding:0 .25em; color:rgba(225,230,236,.5);}

.ar-match-foot{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--space-12);}
.ar-legend{display:flex; flex-direction:column; gap:4px; margin:0; min-width:0; font-size:13px;
  color:rgba(225,230,236,.72);}
.ar-leave{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-8);}
.ar-leave-ask{font-size:13px;}

@media (max-width:600px){
  .ar-board{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:var(--space-8); padding:var(--space-8) var(--space-12);}
  .ar-board-side{flex-direction:column; gap:4px;}
  .ar-board-away{flex-direction:column-reverse; align-items:flex-end;}
  .ar-board-name{font-size:14px; max-width:100%;}
  .ar-match-foot{flex-direction:column;}
}

/* lab */
/* /arena/lab/: the offline engine lab. The stage keeps a whole-number scale, so the grid gives it the free width. */
.ar-lab{padding-top:var(--space-32); padding-bottom:var(--space-64); font-family:var(--font-body);
  color:var(--color-text-primary);}
.ar-lab-head{margin:0 0 var(--space-16);}
.ar-lab-sub{margin:0 0 var(--space-16); font-size:14px; color:rgba(2,19,41,.75);}
.ar-lab-tabs .tab{background:none; border-top:0; border-left:0; border-right:0; font-family:inherit;}
/* The controls sit under the stage, so the stage gets the whole content column: 3x (1056 px) fits a 1440 px desktop. */
.ar-lab-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-24); align-items:start;}
.ar-stage{width:100%; min-width:0; display:flex; justify-content:center;}
.ar-stage-canvas{display:block; image-rendering:pixelated; background:#000; border-radius:var(--radius-6);}
.ar-stage-canvas:focus-visible{outline:2px solid var(--color-action-primary); outline-offset:2px;}
/* Fullscreen: a 24 x 24 button in the canvas's top-right corner, shown on hover and focus (always on touch); in
   fullscreen the box is black and centres the canvas, which PitchStage refits to the screen. */
.ar-stage-frame{position:relative; line-height:0;}
.ar-stage-full{position:absolute; top:6px; right:6px; display:flex; align-items:center; justify-content:center; width:24px; height:24px;
  padding:0; border:0; border-radius:4px; color:#e1e6ec; background:rgba(2,19,41,.72); cursor:pointer; opacity:0;
  transition:opacity .15s ease;}
.ar-stage-full[hidden]{display:none;}
.ar-stage:hover .ar-stage-full, .ar-stage-full:focus-visible{opacity:1;}
.ar-stage-full:hover{background:rgba(2,19,41,.9);}
.ar-stage-full:focus-visible{outline:2px solid var(--color-action-primary); outline-offset:1px;}
.ar-stage-full-exit{display:none;}
.ar-stage:fullscreen{width:100vw; height:100vh; align-items:center; justify-content:center; background:#000;}
.ar-stage:fullscreen .ar-stage-full-enter{display:none;}
.ar-stage:fullscreen .ar-stage-full-exit{display:block;}
.ar-stage:fullscreen .ar-stage-canvas{border-radius:0;}
@media (pointer:coarse){ .ar-stage-full{opacity:1;} }
@media (prefers-reduced-motion:reduce){ .ar-stage-full{transition:none;} }
.ar-lab-panel{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:var(--space-16) var(--space-24);
  align-items:start; padding:var(--space-16);
  background:var(--color-bg-elevated); border:1px solid var(--color-border-subtle); border-radius:var(--radius-container);}
.ar-lab-group{display:flex; flex-direction:column; gap:var(--space-8);}
.ar-lab-h{margin:0; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(2,19,41,.65);}
.ar-lab-row{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--space-8);}
.ar-lab-row .ar-field{flex:1 1 100px;}
.ar-lab-group > .ar-field{flex:none;}
.ar-lab-end{margin-left:auto;}
.ar-lab-input{width:100%;}
.ar-lab-seg{display:flex; gap:4px;}
.ar-lab-wrap{flex-wrap:wrap;}
.ar-lab-wrap .ar-lab-chip{flex:1 1 30%; padding:6px 4px;}
.ar-lab-chip{flex:1 1 0; padding:6px 0; font-family:var(--font-body); font-size:12px; font-weight:600;
  color:rgba(2,19,41,.75); background:transparent; border:1px solid var(--color-border-strong);
  border-radius:var(--radius-control); cursor:pointer; font-variant-numeric:tabular-nums;}
.ar-lab-chip.active{color:var(--button-primary-text); background:var(--button-primary-bg); border-color:transparent;}
.ar-lab-chip:focus-visible{outline:2px solid var(--color-action-primary); outline-offset:1px;}
.ar-lab-check{display:flex; align-items:center; gap:var(--space-8); font-size:13px;}
.ar-lab-off{color:rgba(2,19,41,.5);}
.ar-lab-line{margin:0; font-size:12px; color:rgba(2,19,41,.7);}
.ar-lab-bad{color:var(--color-action-danger); font-weight:600;}
.ar-lab-stats{display:grid; grid-template-columns:auto 1fr; gap:4px var(--space-12); margin:0; font-size:13px;}
.ar-lab-stats dt{color:rgba(2,19,41,.6);}
.ar-lab-stats dd{margin:0; font-variant-numeric:tabular-nums;}
.ar-lab-mono{font-family:ui-monospace, Consolas, monospace;}
.ar-lab-later{margin-top:var(--space-16);}
/* Keyboard legend under the stage, on pointer-fine devices only (a touch device has no keys to show). */
.ar-lab-stagecol{display:flex; flex-direction:column; gap:var(--space-8); min-width:0;}
.ar-lab-keys{display:none; margin:0; font-size:12px; text-align:center; color:rgba(2,19,41,.7);}
.ar-lab-keys kbd{padding:0 4px; font-family:ui-monospace, Consolas, monospace; font-size:11px;
  border:1px solid var(--color-border-strong); border-radius:3px; background:rgba(2,19,41,.04);}
@media (pointer:fine){ .ar-lab-keys{display:block;} }
/* 390 px: the 352 px canvas centred with the controls stacked below; nothing may scroll sideways. */
@media (max-width:600px){
  /* The stage bleeds out of the wrap's 32 px side padding, so the canvas centres in the viewport, not the column; the
     -32px / +64px pair depends on .wrap's padding:0 32px in 01-tokens-and-base.css and must follow it. */
  .ar-lab .ar-lab-stage{width:calc(100% + 64px); margin-inline:-32px;}
  .ar-lab-panel{grid-template-columns:minmax(0,1fr); padding:var(--space-12);}
  .ar-lab-keys{text-align:left;}
}

/* Lab Sprites and Pitch tabs (Task 9). */
.ar-lab-sheets, .ar-lab-pitch{display:flex; flex-direction:column; gap:var(--space-24);}
.ar-lab-pitch{flex-direction:row; flex-wrap:wrap; align-items:flex-start;}
.ar-lab-sheet{display:flex; flex-direction:column; gap:var(--space-8); min-width:0;}
.ar-lab-scroll{overflow-x:auto; max-width:100%;}
.ar-lab-canvas{display:block; image-rendering:pixelated; border-radius:var(--radius-6);}
.ar-lab-swatches{display:flex; flex-wrap:wrap; gap:var(--space-8) var(--space-16); margin:0; padding:0; list-style:none; font-size:12px;}
.ar-lab-swatch{display:flex; align-items:center; gap:6px;}
.ar-lab-swatch code{font-family:ui-monospace, Consolas, monospace; color:rgba(2,19,41,.6);}
.ar-lab-chipc{width:14px; height:14px; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(2,19,41,.25);}

/* ---- Match page on the pixel stage (MatchScreen) ---- */
/* The renderer draws score, clock and cards; the chrome carries names above and status, hint and Leave below. */
.ar-mt-names{display:flex; flex-direction:column; gap:2px; min-width:0;}
.ar-mt-member{font-size:12px; color:rgba(225,230,236,.7); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ar-mt-vs{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(225,230,236,.5);}
.ar-mt-stage{min-height:264px;}
.ar-mt-placeholder{display:flex; align-items:center; justify-content:center; width:352px; max-width:100%; height:264px;
  background:#000; border-radius:var(--radius-6); font-size:13px; color:rgba(225,230,236,.75);}
.ar-mt-info{display:flex; flex-direction:column; gap:var(--space-8); min-width:0;}
.ar-mt-status{margin:0; font-size:14px; font-weight:600;}
.ar-mt-final{margin:0; font-family:var(--font-display); font-size:22px; font-weight:700; text-transform:uppercase;
  font-variant-numeric:tabular-nums;}
.ar-mt-touch{display:none;}
@media (pointer:coarse){
  .ar-mt-keys{display:none;}
  .ar-mt-touch{display:inline;}
}
@media (max-width:600px){
  .ar-board-away .ar-mt-names{align-items:flex-end;}
  .ar-mt-final{font-size:18px;}
}