/* ==========================================================================
   ROOMS BRIDGE
   Hands index.html's existing class names the console design system's shapes,
   the same way css/console-bridge.css does for the panel. The landing keeps its
   markup ids and every handler; only the surfaces change.

   Loaded AFTER css/console.css, which supplies the tokens.

   SCOPE OF THIS PASS: the public landing only. The admin zone below it keeps
   its own look, so the last section here repairs the two class names the two
   stylesheets happen to share (.stat, .mini) wherever the admin zone uses them.
   ========================================================================== */

/* ---------- page shell ---------- */
html{background:var(--void)}
/* layer 3 centred the whole landing with `body{display:flex;align-items:center}`
   — correct for three cards, wrong for a page with a full-bleed header */
body{display:block;font-family:var(--body);font-size:14px;color:var(--txt);padding:0 0 40px;
  background:
    radial-gradient(1100px 460px at 50% -6%, var(--glow), transparent 68%),
    radial-gradient(700px 400px at 8% 30%, color-mix(in srgb,var(--acc2) 10%,transparent), transparent 65%),
    linear-gradient(180deg,var(--bg2),var(--void));
  background-attachment:fixed}
.wrap{max-width:1320px;margin:0 auto;padding:16px}

/* ---------- header ---------- */
.brand{display:flex;align-items:center;gap:16px;padding:0 22px;height:62px;margin:0;
  background:linear-gradient(180deg,var(--chrome1),var(--chrome2));
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.brand::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--acc),var(--acc2),transparent);opacity:.55}
/* the pre-bridge mobile skin drew a SECOND wordmark via ::after (it zeroed the
   h1 and re-rendered it). The bridge keeps the real h1 at every width, so that
   ::after must never render — with it, phones show "DEVIL'S INKDEVIL'S INK". */
.brand h1::after{content:none}
/* line-height is pinned because the old mobile skin zeroes it — a 0-height
   line box gives background-clip:text nothing to paint and the wordmark
   turns invisible on phones */
.brand h1{font-family:var(--disp);font-size:20px;line-height:1.1;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin:0;white-space:nowrap;
  background:linear-gradient(96deg,#fff,var(--acc) 62%,var(--acc2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand .markimg{width:30px;height:30px;border-radius:50%;flex:0 0 auto;object-fit:cover;
  box-shadow:0 0 20px var(--glow2)}
/* the admin buttons were fixed to the viewport corner; they live in the bar now */
.brand .adminbtn{position:static;flex:0 0 auto;
  font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);background:rgba(255,255,255,.02);
  border:1px solid var(--line);border-radius:3px;padding:8px 14px;cursor:pointer;transition:color .18s,border-color .18s,background-color .18s,box-shadow .18s,opacity .18s,transform .18s}
.brand .adminbtn:hover{color:var(--txt);border-color:var(--line2);box-shadow:0 0 14px var(--glow)}
.brand .adminbtn.awopen{color:var(--txt);border-color:var(--acc);
  background:linear-gradient(180deg,var(--wash),rgba(20,8,17,.9))}

/* ---------- tally ---------- */
.tally .lamp{background:var(--dimmer);box-shadow:none;animation:none}
.tally:not(.off) .lamp{background:var(--live);
  box-shadow:0 0 10px var(--live),0 0 22px color-mix(in srgb,var(--live) 60%,transparent);
  animation:pulse 2.4s ease-in-out infinite}
.tally.off{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 85%)}
.tally.off .st{color:var(--dim)}

/* ---------- join bar ---------- */
.joinbar .inp{min-width:0}
.warn{border-radius:0;margin-bottom:16px}
.aerr{display:none;margin:10px 0 0;padding:10px 13px;border-radius:3px;
  background:color-mix(in srgb,var(--cut1) 22%,transparent);
  border:1px solid var(--cutedge);color:#ffd9e0;font-size:13px}
.aerr.show{display:block}

/* ---------- room plates ---------- */
.roomgrid{margin-bottom:6px}
.room{display:block;color:inherit;text-decoration:none;padding:17px 17px 16px;
  transition:color .2s,border-color .2s,background-color .2s,box-shadow .2s,opacity .2s,transform .2s;cursor:pointer;text-align:left;font:inherit}
.room .rtop{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.room .rlive em{font-style:normal}
.room .rmeta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--dimmer);
  margin-bottom:13px;min-height:16px}
.room .rmeta b{color:var(--dim);font-weight:600}
.room .renin{flex:1;min-width:0;padding:7px 10px;font-size:14px}
/* rename and forget are once-in-a-room-lifetime actions: present, not resident */
.room .rtools{position:absolute;top:9px;right:9px;display:flex;gap:5px;opacity:0;transition:color .18s,border-color .18s,background-color .18s,box-shadow .18s,opacity .18s,transform .18s}
.room:hover .rtools,.room:focus-within .rtools{opacity:1}
.room .rtools .act{width:26px;height:26px;padding:0;line-height:1;border-radius:3px;cursor:pointer;
  background:var(--well);border:1px solid var(--line);color:var(--dimmer);font-size:12px}
.room .rtools .act:hover{color:var(--txt);border-color:var(--acc)}
.room.new{width:100%}
/* layer 1 owns a bare `.live` rule — a 9px status dot on the old room row. The
   design system puts `live` on the PLATE, so without this the whole card
   collapses to a 9px circle. Geometry only; the plate keeps its own surface. */
.room.live{width:auto;height:auto;border-radius:0;flex-shrink:initial}

/* ---------- start a tournament ---------- */
.startgrid{display:grid;grid-template-columns:minmax(300px,.8fr) 1.4fr;gap:16px;align-items:start}
.mod > .lbl{justify-content:flex-start}
.mod .lbl.lpsub{display:block;margin:14px 0 6px;border:0;padding:0;color:var(--dim);font-size:11.5px}
.mod .lbl.lpsub::before{display:none}
.gamerow button[disabled]{cursor:default;opacity:1}
.gamerow button[disabled]:not(.on){color:var(--dimmer)}
.linky{background:none;border:0;padding:0;margin:14px 0 0;cursor:pointer;
  font-family:var(--body);font-size:12.5px;color:var(--dim);
  border-bottom:1px dotted var(--dimmer)}
.linky:hover{color:var(--acc);border-color:var(--acc);text-decoration:none}
.advcode{display:none}
.advcode.show{display:block}
.uimode{margin-left:auto;background:none;border:0;cursor:pointer;
  font-family:var(--disp);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dimmer)}
.uimode:hover{color:var(--acc)}

/* the theme picker keeps its own markup (.tcard/.tc-strip/.tc-name from
   js/themes.js) and wears the swatch shape */
.themerow{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px;
  margin-bottom:16px}
.tcard{padding:8px;cursor:pointer;border:1px solid var(--line);border-radius:3px;
  background:var(--well);transition:color .18s,border-color .18s,background-color .18s,box-shadow .18s,opacity .18s,transform .18s;text-align:center;display:block;width:100%}
.tcard:hover{border-color:var(--line2)}
.tcard.on{border-color:var(--acc);box-shadow:0 0 18px var(--glow)}
.tcard .tc-strip{display:flex;gap:3px;align-items:center;justify-content:center;
  margin-bottom:6px;padding:0;border:0;background:none!important;height:auto}
.tcard .tc-strip s{height:8px;flex:1;border-radius:1px;text-decoration:none}
.tcard .tc-strip s.dm{width:8px;flex:0 0 auto;height:8px;transform:rotate(45deg)}
.tcard .tc-name{display:block;font-family:var(--disp);font-size:9.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.tcard.on .tc-name{color:var(--txt)}

.createrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.createrow .hint{margin:0;flex:1;min-width:200px}
.take.busy{opacity:.6;cursor:default}
/* the big scoreboard preview is not part of the agreed landing; the markup
   stays because paintPrev() writes to it without a null check */
.bigprev{display:none!important}
.empty.hide{display:none}

@media (max-width:900px){
  .startgrid{grid-template-columns:1fr}
  .brand{height:auto;flex-wrap:wrap;padding:10px 14px;position:static}
  .joinbar{flex-wrap:wrap}
}

/* ==========================================================================
   ADMIN ZONE REPAIRS
   This pass does not redesign the admin zone, but console.css claims two class
   names it uses. Both rules below restore index.html's own values at a
   specificity the design system cannot reach, so nothing under #adminZone or
   .adminwin moves until that pass happens.
   ========================================================================== */
#adminZone .stat,.adminwin .stat{display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;border-radius:999px;background:var(--card2);
  border:1px solid var(--line);color:var(--muted);font-size:9.5px;
  font-family:"Saira",sans-serif;letter-spacing:.14em;text-transform:uppercase}
#adminZone .mini,.adminwin .mini{font-family:"Saira",sans-serif;font-size:12.5px;
  font-weight:600;letter-spacing:.02em;text-transform:none;border-radius:8px;
  padding:8px 11px;background:var(--field);border:1px solid var(--line);color:var(--ink)}
#adminZone .who,.adminwin .who{display:inline;margin:0}
#adminZone .empty,.adminwin .empty{padding:0;text-align:left;font-size:12.5px}

/* ==========================================================================
   ADMIN ZONE + WINDOW (b163) — the rooms page catches up with the panel.
   Same full_admin frame the panel's window got in b161; the zone's cards and
   rows wear the plate language instead of the old rounded style.
   ========================================================================== */

/* ---------- the signed-in zone ---------- */
.adminzone{border-top:1px solid var(--line)}
.azhead{position:static;padding:12px 0 2px;background:none;border:0;backdrop-filter:none;
  border-radius:0;box-shadow:none}
.azhead h2{font-family:var(--disp);font-size:14px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--txt)}
.azhead h2::before{content:"";display:inline-block;width:8px;height:8px;transform:rotate(45deg);
  background:var(--acc);box-shadow:0 0 12px var(--acc);margin-right:11px;vertical-align:middle}
.azwho{font-family:var(--disp);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dimmer)}
.alink{color:var(--dim);font-family:var(--disp);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase}
.alink:hover{color:var(--acc)}
#adminZone .stat,.adminwin .stat{border-radius:2px;background:var(--well);
  font-family:var(--disp);font-size:10px;font-weight:600;color:var(--dim)}
#adminZone .stat.on{color:var(--txt)}

/* the five totals become the mock's stat tiles */
.azstat{border-radius:3px;background:var(--well);border:1px solid var(--line);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.azstat b{font-family:var(--disp)}
.azstat span{font-family:var(--disp);font-size:9.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dimmer)}
.azstat.islive b{color:var(--live);text-shadow:0 0 14px color-mix(in srgb,var(--live) 50%,transparent)}

/* cards and their rows */
.azcard{border-radius:0;box-shadow:none;
  background:linear-gradient(158deg,var(--plate),var(--plate2));border:1px solid var(--line);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.azcard h2{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--txt);display:flex;align-items:center;gap:10px;
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.azcard h2::before{content:"";width:8px;height:8px;transform:rotate(45deg);flex:0 0 auto;
  background:var(--acc);box-shadow:0 0 12px var(--acc)}
.aroom,.adminrow{border-radius:3px;background:var(--well);border:1px solid var(--line)}
.aroom:hover{border-color:var(--line2)}
.permchip{border-radius:2px;font-family:var(--disp);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.permchip.on{border-color:var(--acc);color:var(--txt);
  background:linear-gradient(180deg,var(--wash),rgba(18,7,15,.9));box-shadow:0 0 14px var(--glow)}

/* ---------- the window: full_admin frame, mirrored from console-bridge ---------- */
.adminwin{background:rgba(6,2,7,.72);backdrop-filter:blur(7px);padding:26px}
.adminwin .aw-card{width:min(1180px,100%);height:min(760px,92vh);display:grid;
  grid-template-columns:224px 1fr;flex-direction:initial;padding:0;border-radius:0;
  background:linear-gradient(158deg,rgba(28,13,25,.97),rgba(12,5,12,.98));
  border:1px solid var(--line2);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  box-shadow:0 0 90px var(--glow);position:relative;overflow:hidden}
.adminwin .aw-card::before{content:"";position:absolute;left:18px;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--acc),var(--acc2),transparent);opacity:.8}
.adminwin .aw-rail{border-right:1px solid var(--line);padding:20px 0 14px;
  display:flex;flex-direction:column;min-height:0;
  background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)}
.adminwin .aw-rail .cap{padding:0 20px 14px;display:flex;align-items:center;gap:10px}
.adminwin .aw-rail .cap .orb{width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 34% 28%,var(--orb1),var(--acc) 48%,var(--orb2) 78%,var(--orb3));
  box-shadow:0 0 20px var(--glow2)}
.adminwin .aw-rail .cap b{font-family:var(--disp);font-size:13px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--txt)}
.adminwin .aw-nav{width:auto;flex:1;padding:0;display:flex;flex-direction:column;gap:0;
  border-right:0;overflow-y:auto}
.adminwin .aw-nav button{display:flex;align-items:center;gap:11px;padding:12px 20px;
  background:none;border:0;border-left:2px solid transparent;border-radius:0;cursor:pointer;
  color:var(--dim);font-family:var(--disp);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;text-align:left;
  transition:color .15s,background-color .15s,border-color .15s}
.adminwin .aw-nav button::before{content:"";width:7px;height:7px;transform:rotate(45deg);
  background:currentColor;opacity:.55;flex:0 0 auto}
.adminwin .aw-nav button:hover{color:var(--txt);background:rgba(255,255,255,.03)}
.adminwin .aw-nav button.on{color:var(--txt);border-left-color:var(--acc);
  background:linear-gradient(90deg,var(--wash),transparent);
  text-shadow:0 0 16px var(--glow2);box-shadow:none}
.adminwin .aw-nav button.hide{display:none}
.adminwin .aw-rail .foot{margin-top:auto;padding:14px 20px 0;border-top:1px solid var(--line)}
.adminwin .awwho{flex:initial;font-family:var(--disp);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dimmer)}
.adminwin .aw-right{display:flex;flex-direction:column;min-width:0;min-height:0}
.adminwin .aw-head{display:flex;align-items:center;gap:14px;padding:20px 26px 14px;border-bottom:0}
.adminwin .aw-head b{font-family:var(--disp);font-size:20px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--txt)}
.adminwin .aw-head .alink{margin-left:auto;border:1px solid var(--line);border-radius:3px;
  padding:8px 14px;background:rgba(255,255,255,.02);cursor:pointer}
.adminwin .aw-head .alink:hover{color:var(--txt);border-color:var(--line2)}
.adminwin .aw-body{flex:1;min-width:0;min-height:0;overflow-y:auto;padding:6px 26px 22px}
.adminwin .aw-body .azcard{clip-path:none;border:0;background:transparent}
.adminwin .aw-body .azcard h2{border-bottom:1px solid var(--line)}
@media (max-width:900px){
  .adminwin{padding:0}
  .adminwin .aw-card{grid-template-columns:1fr;height:100%;clip-path:none}
  .adminwin .aw-rail{flex-direction:row;align-items:center;padding:10px 8px;border-right:0;
    border-bottom:1px solid var(--line)}
  .adminwin .aw-rail .cap{padding:0 10px}
  .adminwin .aw-nav{flex-direction:row;overflow-x:auto}
  .adminwin .aw-nav button{white-space:nowrap;border-left:0;border-bottom:2px solid transparent}
  .adminwin .aw-nav button.on{border-bottom-color:var(--acc)}
  .adminwin .aw-rail .foot{display:none}
}