/* Home (6 tiles) + single-game pages. Everything is sized from the viewport, so the page is
   always exactly one screen: it never scrolls and never overflows, at any browser zoom. */
:root{
  --pink:#ff8fd8; --teal:#6fe8d8; --lavender:#b39ef5; --text:#2b1055; --text-muted:#6b5b8a;
  --glass:rgba(255,255,255,.62); --glass-strong:rgba(255,255,255,.82); --line:rgba(43,16,85,.14);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;
  background:linear-gradient(160deg,#ffd1e8 0%,#e2c6f7 45%,#a6ecdd 100%);color:var(--text);
  font-family:'Poppins',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Righteous',system-ui,sans-serif;margin:0;font-weight:400}
body.hub{height:100vh;height:100dvh;display:flex;flex-direction:column;min-width:0}

/* ---------- top bar ---------- */
.bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;min-width:0;
  padding:max(6px,env(safe-area-inset-top)) 12px 6px;background:var(--glass-strong);border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);height:clamp(40px,7.5dvh,56px)}
.bar .back{font-size:12px;font-weight:600;color:var(--text-muted);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.6);flex:0 0 auto;white-space:nowrap}
.bar .brand{display:flex;align-items:center;gap:8px;font-family:'Righteous',system-ui,sans-serif;font-size:clamp(13px,2.6dvh + .6vw,19px);
  min-width:0;overflow:hidden;white-space:nowrap;flex:1 1 auto}
.bar .brand img{height:calc(100% - 4px);max-height:34px;aspect-ratio:1;border-radius:8px;object-fit:cover;flex:0 0 auto}
.bar .brand span{overflow:hidden;text-overflow:ellipsis}
.bar-r{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-width:0}
.bar-r .auth-name-slot{min-width:0}
.bar-r .auth-name{font-size:12px;color:var(--text-muted);font-weight:500;max-width:110px;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.auth-btn{font:600 11.5px/1 'Poppins',system-ui,sans-serif;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.75);color:var(--text);cursor:pointer;white-space:nowrap}
@media (max-width:430px){ .bar .brand span{display:none} .bar-r .auth-name{max-width:70px} }

/* ---------- home: 6 tiles ---------- */
.tiles{flex:1 1 0;min-height:0;display:grid;gap:clamp(8px,2dvh,18px);padding:clamp(8px,2dvh,18px) clamp(10px,3vw,28px);
  grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));
  width:100%;max-width:1100px;margin:0 auto}
@media (orientation:landscape),(min-aspect-ratio:1/1){
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
}
.tile{position:relative;min-width:0;min-height:0;container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(2cqmin);padding:calc(3cqmin);border-radius:calc(8cqmin);background:var(--glass);border:1px solid rgba(255,255,255,.8);
  box-shadow:0 6px 22px rgba(43,16,85,.14);transition:transform .15s,box-shadow .15s;overflow:hidden;cursor:pointer}
.tile:hover,.tile:focus-visible{transform:translateY(-3px);box-shadow:0 12px 30px rgba(43,16,85,.24);outline:none}
.tile:active{transform:scale(.97)}
.tile .logo{flex:0 0 auto;display:block;width:min(100cqw - 6cqmin, 100cqh - 6cqmin - 34cqmin);aspect-ratio:1;height:auto;
  border-radius:calc(7cqmin);object-fit:cover;box-shadow:0 4px 14px rgba(43,16,85,.28)}
.tile .name{flex:0 0 auto;font-family:'Righteous',system-ui,sans-serif;font-size:clamp(14px,min(9cqw,10cqh),26px);line-height:1.5;font-weight:800;margin-top:calc(2cqmin);padding-bottom:2px;
  max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:normal;overflow:visible;text-align:center;padding:0 2px;text-wrap:balance}
.tile.soon{cursor:default;border-style:dashed;border-color:rgba(43,16,85,.3);background:rgba(255,255,255,.4)}
.tile.soon:hover{transform:none;box-shadow:0 6px 22px rgba(43,16,85,.14)}
.tile.soon .logo{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,rgba(179,158,245,.35) 0 10px,rgba(111,232,216,.3) 10px 20px);
  box-shadow:none;font-size:calc(34cqmin);color:rgba(43,16,85,.55);font-family:'Righteous',system-ui,sans-serif}
.tile.soon .name{color:var(--text-muted)}
.foot{flex:0 0 auto;display:flex;justify-content:center;gap:18px;align-items:center;padding:4px 12px max(6px,env(safe-area-inset-bottom));font-size:11.5px;color:var(--text-muted)}
.foot a{padding:3px 6px;font-weight:500}.foot a:hover{color:var(--text)}
@media (max-height:380px){ .foot{display:none} }

/* ---------- single game page ---------- */
.stage{flex:1 1 0;min-height:0;display:grid;gap:clamp(8px,2dvh,22px);padding:clamp(8px,2dvh,22px) clamp(10px,3vw,28px);
  width:100%;max-width:1000px;margin:0 auto;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
@media (orientation:landscape),(min-aspect-ratio:1/1){
  .stage{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:minmax(0,1fr)}
}
.intro{container-type:size;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(3cqmin);
  /* portrait: a short band; landscape: a full column (set below) */
  height:clamp(120px,27dvh,300px)}
@media (orientation:landscape),(min-aspect-ratio:1/1){ .intro{height:auto} }
.intro .glogo{flex:0 0 auto;width:min(100cqw,100cqh - 33cqmin);aspect-ratio:1;height:auto;border-radius:calc(8cqmin);object-fit:cover;box-shadow:0 8px 26px rgba(43,16,85,.32)}
.intro h1{flex:0 0 auto;font-size:clamp(16px,min(10cqw,10cqh),38px);line-height:1.5;font-weight:800;text-align:center;max-width:100%;white-space:normal;overflow:visible;padding:.08em 2px .12em;text-wrap:balance}
.play{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-family:'Righteous',system-ui,sans-serif;letter-spacing:.5px;
  font-size:clamp(14px,min(7cqw,8cqh),24px);padding:.5em 1.6em;border-radius:999px;color:#fff;
  background:linear-gradient(90deg,var(--pink),var(--lavender) 55%,var(--teal));box-shadow:0 6px 18px rgba(179,158,245,.6);white-space:nowrap}
.play:hover{filter:brightness(1.06);transform:translateY(-1px)}
.board{container-type:size;min-width:0;min-height:0;display:flex;flex-direction:column;gap:calc(2.2cqh);padding:clamp(8px,1.6dvh,16px) clamp(10px,2.4vw,18px);
  background:var(--glass);border:1px solid rgba(255,255,255,.8);border-radius:20px;box-shadow:0 6px 22px rgba(43,16,85,.12)}
.board h2{flex:0 0 auto;font-size:clamp(13px,4.6cqh,20px)}
.board .leaderboard{flex:1 1 0;min-height:0;display:flex;flex-direction:column;margin:0;padding:0;border:0}
.board .lb-tabs{flex:0 0 auto;margin:0 0 6px}
.board .lb-tab{font-size:clamp(10px,3.2cqh,13px);padding:clamp(4px,1.2cqh,8px) 0}
.board .lb-rows{flex:1 1 0;min-height:0;container-type:size;display:flex;flex-direction:column}
.board .lb-empty{font-size:clamp(11px,3.4cqh,14px);margin:6px 0}
.board .lb-list{flex:1 1 0;min-height:0;display:grid;grid-template-rows:repeat(10,minmax(0,1fr));list-style:none;margin:0;padding:0;font-size:clamp(9px,min(3.9cqh,4.6cqw),15px)}
.board .lb-list li{display:flex;align-items:center;gap:8px;min-height:0;padding:0;font-size:inherit;overflow:hidden}
.board .lb-rank{width:2.2em;text-align:center;flex:0 0 auto}
.board .lb-name{display:flex;flex-direction:column;justify-content:center;min-width:0;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board .lb-meta{display:block;font-size:.76em;color:var(--text-muted);font-weight:400;overflow:hidden;text-overflow:ellipsis}
@container (max-height:230px){ .lb-meta{display:none} }
.board .lb-share{flex:0 0 auto;align-self:flex-start;margin:6px 0 0;font-size:clamp(10px,3cqh,12.5px);padding:5px 12px}
@container (max-height:200px){ .board .lb-share{display:none !important} }

/* leaderboard widget basics (shared look) */
.lb-tabs{display:flex;gap:6px}
.lb-tab{flex:1;font-family:inherit;font-weight:600;border:none;border-radius:999px;cursor:pointer;color:var(--text-muted);background:rgba(255,255,255,.55)}
.lb-tab.active{color:#fff;background:linear-gradient(90deg,var(--pink),var(--lavender))}
.lb-empty{color:var(--text-muted)}
.lb-list li{border-bottom:1px solid rgba(43,16,85,.07)}
.lb-list li:last-child{border-bottom:none}
.lb-rank{font-weight:700;color:var(--text-muted)}
.lb-name{flex:1}
.lb-score{font-weight:600;flex:0 0 auto}
.lb-share{display:inline-block;font-weight:600;border-radius:999px;background:linear-gradient(90deg,#6fe8d8,#25d366);color:#06331a}
.auth-btn{background:linear-gradient(90deg,var(--pink),var(--lavender))!important;color:#fff!important;border:none!important}

/* game page: clear back button */
.btn-back{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;color:#2b1055;background:linear-gradient(135deg,#fff,#f1e4ff);border:1.5px solid rgba(43,16,85,.35);border-radius:999px;padding:7px 14px;text-decoration:none;box-shadow:0 3px 10px rgba(43,16,85,.18)}

.bar .back{font-size:14px!important;font-weight:800!important;color:#2b1055!important;background:linear-gradient(135deg,#fff,#f1e4ff)!important;border:1.5px solid rgba(43,16,85,.35);padding:8px 16px!important;box-shadow:0 3px 10px rgba(43,16,85,.18)}