/* Layout concept: console de modérateur en colonne unique (tablette de commandement),
   avec le rôle secret du joueur en grande plaque maintenue au doigt. */
:root{
  --bg:#080b12; --bg2:#0d1220; --surface:#121929; --surface2:#19223a; --line:#27324d;
  --fg:#e7ebf4; --muted:#93a0bb; --star:rgba(255,255,255,.55);
  --gold:#f0c24b; --gold-fill:#f0c24b; --gold-ink:#1b1405;
  --rebel:#62b6ff; --rebel-bg:#0e2640; --sith:#ff6166; --sith-bg:#3a1118; --ok:#4ade80;
  --display:'Oxanium','Segoe UI',system-ui,sans-serif;
  --body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --label:'Barlow Condensed','Arial Narrow',sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#edf0f6; --bg2:#e3e8f1; --surface:#ffffff; --surface2:#f1f4fa; --line:#c9d2e2;
    --fg:#121826; --muted:#56627d; --star:rgba(20,32,70,.16);
    --gold:#8a6300; --gold-fill:#f0c24b; --gold-ink:#1b1405;
    --rebel:#0b5fb8; --rebel-bg:#dcebfb; --sith:#c0212f; --sith-bg:#fbe0e2; --ok:#15803d;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#edf0f6; --bg2:#e3e8f1; --surface:#ffffff; --surface2:#f1f4fa; --line:#c9d2e2;
  --fg:#121826; --muted:#56627d; --star:rgba(20,32,70,.16);
  --gold:#8a6300; --gold-fill:#f0c24b; --gold-ink:#1b1405;
  --rebel:#0b5fb8; --rebel-bg:#dcebfb; --sith:#c0212f; --sith-bg:#fbe0e2; --ok:#15803d;
  color-scheme:light;
}
*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--fg); font-family:var(--body); font-size:16px; line-height:1.5;
  padding-block:18px 48px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  min-height:100%;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background-color:var(--bg);
  background-image:
    radial-gradient(1.2px 1.2px at 8% 12%, var(--star), transparent 60%),
    radial-gradient(1px 1px at 23% 64%, var(--star), transparent 60%),
    radial-gradient(1.4px 1.4px at 41% 28%, var(--star), transparent 60%),
    radial-gradient(1px 1px at 57% 82%, var(--star), transparent 60%),
    radial-gradient(1.2px 1.2px at 71% 9%, var(--star), transparent 60%),
    radial-gradient(1px 1px at 86% 47%, var(--star), transparent 60%),
    radial-gradient(1.3px 1.3px at 93% 90%, var(--star), transparent 60%),
    radial-gradient(1px 1px at 33% 93%, var(--star), transparent 60%);
  background-size:520px 520px;
}
.wrap{max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:18px}
h1,h2,h3{font-family:var(--display); margin:0; text-wrap:balance; line-height:1.15}
h1{font-size:clamp(1.7rem,6vw,2.5rem); font-weight:800; letter-spacing:.02em}
h2{font-size:1.2rem; font-weight:700; letter-spacing:.03em}
h3{font-size:1rem; font-weight:700}
p{margin:0}
.eyebrow{font-family:var(--label); text-transform:uppercase; letter-spacing:.16em; font-size:.82rem; color:var(--muted); font-weight:600}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.top{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap}
.top .brand{display:flex; flex-direction:column; gap:4px; min-width:0}
.top h1 span{color:var(--gold)}
.chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--label); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.85rem; padding:4px 10px; border:1px solid var(--line); border-radius:4px; background:var(--surface)}
.chip.rebel{color:var(--rebel); border-color:var(--rebel); background:var(--rebel-bg)}
.chip.sith{color:var(--sith); border-color:var(--sith); background:var(--sith-bg)}
.chip.gold{color:var(--gold); border-color:var(--gold)}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:16px; display:flex; flex-direction:column; gap:12px; min-width:0}
.panel.flat{background:transparent}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.grow{flex:1 1 auto; min-width:0}
.btn{
  font:600 .95rem/1 var(--display); letter-spacing:.04em; cursor:pointer;
  background:var(--surface2); color:var(--fg); border:1px solid var(--line); border-radius:6px;
  padding:11px 16px; min-height:44px; touch-action:manipulation;
}
.btn:hover{border-color:var(--gold)}
.btn:focus-visible,.tab:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.holdbox:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.btn.gold{background:var(--gold-fill); color:var(--gold-ink); border-color:var(--gold-fill)}
.btn.gold:hover{filter:brightness(1.06)}
.btn.danger{color:var(--sith); border-color:var(--sith)}
.btn.sm{padding:8px 12px; min-height:36px; font-size:.85rem}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn.on{background:var(--gold-fill); color:var(--gold-ink); border-color:var(--gold-fill)}
input[type=text]{
  font:500 1rem var(--body); color:var(--fg); background:var(--bg2); border:1px solid var(--line);
  border-radius:6px; padding:10px 12px; min-height:44px; width:100%; min-width:0;
}
input[type=text]::placeholder{color:var(--muted); opacity:.8}
label.field{display:flex; flex-direction:column; gap:4px; min-width:0}
label.field>span{font-family:var(--label); text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; color:var(--muted); font-weight:600}
.tabs{display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--line); position:sticky; top:env(safe-area-inset-top,0px); background:var(--bg); z-index:5; padding-top:4px}
.tab{font:600 .92rem var(--display); letter-spacing:.05em; background:none; border:0; border-bottom:3px solid transparent; color:var(--muted); padding:12px 14px; cursor:pointer; white-space:nowrap; min-height:44px}
.tab[aria-selected="true"]{color:var(--gold); border-bottom-color:var(--gold)}
.codebox{font-family:var(--display); font-weight:800; font-size:clamp(2.2rem,11vw,3.4rem); letter-spacing:.24em; color:var(--gold); text-align:center; padding:.1em 0 .1em .24em}
.qrwrap{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
#qr{background:#fff; padding:12px; border-radius:6px; width:176px; height:176px; flex:0 0 auto}
#qr svg{width:100%; height:auto; display:block}
.plist{display:flex; flex-direction:column; gap:10px}
.prow{display:grid; grid-template-columns:1fr; gap:8px; padding:12px; border:1px solid var(--line); border-radius:6px; background:var(--bg2)}
.prow .fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px}
.prow .meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:space-between}
.sw{font-family:var(--display); font-weight:700; color:var(--gold); overflow-wrap:anywhere}
.status{font-family:var(--label); letter-spacing:.1em; text-transform:uppercase; font-size:.8rem; font-weight:600}
.status.on{color:var(--ok)} .status.off{color:var(--muted)} .status.dead{color:var(--sith)}
.script{white-space:pre-wrap; font-size:1rem; line-height:1.6; background:var(--bg2); border:1px solid var(--line); border-radius:6px; padding:14px; overflow-wrap:anywhere}
details.sec{border:1px solid var(--line); border-radius:8px; background:var(--surface)}
details.sec>summary{cursor:pointer; padding:14px 16px; font-family:var(--display); font-weight:700; letter-spacing:.03em; display:flex; justify-content:space-between; gap:10px; align-items:center; list-style:none; min-height:48px}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary::after{content:"+"; color:var(--gold); font-size:1.3rem; line-height:1}
details.sec[open]>summary::after{content:"–"}
details.sec>.body{padding:0 16px 16px; display:flex; flex-direction:column; gap:12px}
.scriptblock{display:flex; flex-direction:column; gap:6px}
.scriptblock .cap{display:flex; justify-content:space-between; gap:8px; align-items:center; flex-wrap:wrap}
.blur{filter:blur(7px); user-select:none}
.pips{display:flex; gap:6px; flex-wrap:wrap}
.pip{width:26px; height:34px; border:1px solid var(--line); border-radius:3px; background:var(--bg2)}
.pip.l.f{background:var(--rebel); border-color:var(--rebel)}
.pip.s.f{background:var(--sith); border-color:var(--sith)}
.pip.c.f{background:var(--gold-fill); border-color:var(--gold-fill)}
.track{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px}
.track .box{display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid var(--line); border-radius:6px; background:var(--bg2)}
.counter{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.counter b{font-family:var(--display); font-size:1.4rem; min-width:2.6ch; text-align:center; font-variant-numeric:tabular-nums}
table{border-collapse:collapse; width:100%; font-size:.92rem}
th,td{border-bottom:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top}
th{font-family:var(--label); text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; color:var(--muted)}
.tablewrap{overflow-x:auto}
.holdbox{
  position:relative; border:2px solid var(--line); border-radius:10px; padding:26px 18px; min-height:260px; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center; gap:12px; background:var(--surface); cursor:pointer;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:manipulation;
}
.holdbox .reveal{display:none; width:100%}
.holdbox.on .reveal{display:flex; flex-direction:column; gap:12px; align-items:center}
.holdbox.on .cover{display:none}
.holdbox.on.rebel{border-color:var(--rebel); background:var(--rebel-bg)}
.holdbox.on.sith{border-color:var(--sith); background:var(--sith-bg)}
.holdbox.small{min-height:140px; padding:16px}
.rolename{font-family:var(--display); font-weight:800; font-size:clamp(1.6rem,7vw,2.3rem); letter-spacing:.03em}
.holdbox.rebel .rolename{color:var(--rebel)} .holdbox.sith .rolename{color:var(--sith)}
.glyph{width:64px; height:64px}
.known{display:flex; flex-direction:column; gap:6px; width:100%; max-width:420px}
.known .k{display:flex; justify-content:space-between; gap:10px; padding:8px 12px; border:1px solid var(--line); border-radius:6px; background:var(--bg2); text-align:left}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(18px + env(safe-area-inset-bottom,0px)); background:var(--gold-fill); color:var(--gold-ink); padding:10px 16px; border-radius:6px; font-weight:600; z-index:20; max-width:90vw}
.banner{padding:12px 14px; border:1px solid var(--gold); border-radius:6px; color:var(--fg); background:var(--surface2)}
.banner.err{border-color:var(--sith)}
.win{padding:14px; border-radius:6px; font-family:var(--display); font-weight:700; text-align:center}
.win.r{background:var(--rebel-bg); color:var(--rebel); border:1px solid var(--rebel)}
.win.s{background:var(--sith-bg); color:var(--sith); border:1px solid var(--sith)}
ul.tight{margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:6px}
.homegrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
.codein{text-transform:uppercase; letter-spacing:.3em; font-family:var(--display); font-weight:700; font-size:1.4rem; text-align:center}
@media (prefers-reduced-motion: no-preference){ .holdbox,.btn{transition:border-color .15s, background .15s} }