/* ============================================================
   Rexy Arcade — layout only.
   Colours, buttons, inputs, tables, tags and status come from
   lib/rexy-theme.css. Anything defined here is structure the
   shared theme does not already provide.
   ============================================================ */

/* ---------- header ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 24px; border-bottom:1px solid var(--border-soft);
  background:var(--surface); position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:14px; min-width:0; cursor:pointer;}
.brand h1{white-space:nowrap;}
/* Clappa, chomping in the corner. One 4-frame sheet stepped by keyframes:
   steps(1) holds each frame rather than cross-fading, and the 0-1-2-3-2-1
   order gives the mouth an open-and-shut cycle rather than a snap back. */
.brand .mark{
  width:38px; height:38px; flex:none;
  background-image:url('art/clappa.png');
  background-repeat:no-repeat;
  background-size:152px 38px;              /* 4 frames across */
  animation:clappa-chomp .78s steps(1,end) infinite;
}
@keyframes clappa-chomp{
  0%    {background-position:   0px 0}
  16.6% {background-position: -38px 0}
  33.3% {background-position: -76px 0}
  50%   {background-position:-114px 0}
  66.6% {background-position: -76px 0}
  83.3% {background-position: -38px 0}
}
@media (prefers-reduced-motion: reduce){
  .brand .mark{animation:none; background-position:0 0}
}
.tagline{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; margin-top:3px;}

.authbar{display:flex; align-items:center; gap:10px; min-width:0;}
.authbar .who{font-size:.8rem; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:44vw;}
.status-dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--faint); transition:background .2s;
}
.status-dot.on{background:var(--ok);}
.status-dot.off{background:var(--faint);}
.status-dot.err{background:#ff7a6a;}

/* ---------- sign-in / profile drawer ---------- */
.drawer{
  position:fixed; inset:0; z-index:30; display:grid; place-items:start center;
  padding:80px 20px 20px; background:rgba(5,7,10,.7);
}
.drawerCard{width:min(440px,100%); padding:22px 24px;}
.small{font-size:.8rem; line-height:1.5;}
.drawerCard p{margin:0 0 4px;}

/* ---------- game grid ---------- */
.wrap{max-width:1160px; margin:0 auto; padding:8px 24px 56px;}
.grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
}
.placeholder{
  grid-column:1/-1; padding:40px; text-align:center; font-size:.85rem;
  border:1px dashed var(--border); border-radius:12px;
}

.gcard{
  display:flex; flex-direction:column; overflow:hidden; text-align:left;
  padding:0; cursor:pointer; transition:transform .14s, border-color .14s;
  border:1px solid var(--border-soft); background:var(--surface); border-radius:12px;
}
.gcard:hover{transform:translateY(-3px); border-color:var(--blue-deep);}
.gcard .thumb{
  aspect-ratio:16/10; background:var(--inset) center/cover no-repeat;
  border-bottom:1px solid var(--border-soft);
}
.gcard .body{padding:14px 16px 16px;}
.gcard h2{font-size:.98rem; margin-bottom:5px;}
.gcard .desc{font-size:.8rem; color:var(--muted); line-height:1.45; min-height:2.3em;}
.gcard .foot{display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-top:12px;}

.badge{
  font-size:.54rem; letter-spacing:.14em; text-transform:uppercase;
  border-radius:20px; padding:3px 9px; border:1px solid var(--border);
  color:var(--muted); white-space:nowrap;
}
.badge.live{color:var(--ok); border-color:rgba(70,211,154,.4);}
.badge.soon{color:var(--faint);}

.hidden{display:none !important;}

/* the header has three things competing for one line - shed them in order */
@media (max-width:820px){ .tagline{display:none;} }
@media (max-width:640px){ .authbar .who{display:none;} }
@media (max-width:560px){
  .topbar{padding:12px 16px;}
  .wrap{padding:8px 16px 40px;}
  .brand h1{font-size:1.15rem;}
  .brand .mark{width:26px; height:26px;}
  .grid{grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:14px;}
  .gameTop{flex-wrap:wrap;}
}

/* ---------- game view ---------- */
.gameTop{display:flex; align-items:center; gap:16px; margin:14px 0 16px;}
.gameTop .gameTitle{flex:1; min-width:0;}
.gameTop h2{font-size:1.05rem;}
.gameTop .small{font-size:.72rem; margin-top:2px;}

.gameLayout{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start;}

.screen{
  background:#000; border:1px solid var(--border-soft); border-radius:12px;
  overflow:hidden; aspect-ratio:16/10; position:relative;
}
.screen iframe{width:100%; height:100%; border:0; display:block;}
.screen:fullscreen, .screen:-webkit-full-screen{aspect-ratio:auto; width:100%; height:100%; border-radius:0;}

.boardPanel{padding:16px 18px 18px; position:sticky; top:84px;}
.boardPanel label:first-of-type{margin-top:0;}
.seg{gap:6px; flex-wrap:nowrap;}
.seg button{flex:1; padding:8px 6px; font-size:.58rem;}
.boardScroll{max-height:44vh; overflow:auto; margin-top:14px;}
.boardScroll th{position:sticky; top:0; background:var(--surface); z-index:1;}
.boardScroll td{font-size:.8rem;}
.boardScroll td.num{white-space:nowrap;}
.rank{color:var(--muted); width:30px;}
.emptyRow td{color:var(--faint); text-align:center; padding:22px 10px;}

@media (max-width:900px){
  .gameLayout{grid-template-columns:1fr;}
  .boardPanel{position:static;}
  .boardScroll{max-height:none;}
}

.hr{height:1px; background:var(--border-soft); margin:16px 0 4px;}