:root {
  --ink: #16121f;
  --paper: #fff8ee;
  --pink: #ff3ea5;
  --lime: #c6ff00;
  --cyan: #00e5ff;
  --sun: #ffe600;
  --grape: #7b2fff;
  --display: "Unbounded", system-ui, sans-serif;
  --body: "Space Grotesk", system-ui, sans-serif;
  --u: min(1vw, 1.8vh);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #ffc2e2; color: var(--ink); font-family: var(--body); }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui button, #ui .opt, #ui .card, .join-card { pointer-events: auto; }
[hidden] { display: none !important; }
kbd { font: 700 .9em var(--body); padding: .1em .5em; border: 2px solid var(--ink); border-radius: 8px; background: #fff; box-shadow: 2px 2px 0 var(--ink); }

.screen { position: absolute; inset: 0; padding: calc(var(--u) * 4); }

@keyframes pop { from { transform: scale(.4) rotate(-10deg); } }

/* ---------- the library: SMARTRIX launcher, light build ----------
   Pure white, system type, borderless cards; focus is lift + shadow, never an outline or tint. */
:root {
  --t1: #0e1117; --t2: #4a5160; --t3: #8a90a0; --line: rgba(16, 20, 28, .08); --chipbg: #f2f3f5;
  --lift: 0 1px 2px rgba(16, 20, 28, .05), 0 14px 34px rgba(16, 20, 28, .09);
  --focus: 0 2px 8px rgba(16, 20, 28, .08), 0 34px 80px rgba(16, 20, 28, .24);
  --glide: cubic-bezier(.2, .9, .25, 1);
  --sys: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}
body.at-home { background: #fff; }
body.at-home #gl, body.at-home #sound { display: none; }
#home { padding: 0; font-family: var(--sys); color: var(--t1); letter-spacing: -.006em; background: #fff; }

/* floating glass sidebar: an icon rail that opens when it has focus */
.side { position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 2); bottom: calc(var(--u) * 2); width: calc(var(--u) * 7.2); z-index: 3; display: flex; flex-direction: column; padding: calc(var(--u) * 1.6) calc(var(--u) * 1.1);
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(40px) saturate(1.6); backdrop-filter: blur(40px) saturate(1.6);
  border: 1px solid rgba(16, 20, 28, .06); border-radius: calc(var(--u) * 2.8); box-shadow: 0 2px 6px rgba(16, 20, 28, .05), 0 30px 80px rgba(16, 20, 28, .14);
  overflow: hidden; transition: width .42s var(--glide); pointer-events: auto; }
body.sideOpen .side, body:not(.tv) .side:hover { width: calc(var(--u) * 26); }
.profile { display: flex; align-items: center; gap: calc(var(--u) * 1.2); margin-bottom: calc(var(--u) * 1.4); white-space: nowrap; }
.me-ico { flex: none; width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); border-radius: 50%; display: grid; place-items: center; background: var(--t1); }
.me-ico svg, .ni svg { width: 56%; height: 56%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pn b { display: block; font-size: calc(var(--u) * 1.7); font-weight: 600; }
.pn small { font-size: calc(var(--u) * 1.35); color: var(--t3); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.ni { display: flex; align-items: center; gap: calc(var(--u) * 1.3); padding: calc(var(--u) * .35); border-radius: 999px; font-size: calc(var(--u) * 1.6); font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .18s, color .18s; }
.ni .ic { flex: none; width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); border-radius: 50%; display: grid; place-items: center; background: rgba(16, 20, 28, .06); }
.ni .ic svg { stroke: var(--t1); }
.ni .tx, .pn { opacity: 0; transition: opacity .18s; }
body.sideOpen .ni .tx, body.sideOpen .pn, body:not(.tv) .side:hover .ni .tx, body:not(.tv) .side:hover .pn { opacity: 1; transition: opacity .25s .12s; }
.ni.on .ic { background: var(--t1); } .ni.on .ic svg { stroke: #fff; }
.ni.fc { background: var(--t1); color: #fff; box-shadow: 0 10px 26px rgba(16, 20, 28, .24); }
.ni.fc .ic { background: rgba(255, 255, 255, .16); } .ni.fc .ic svg { stroke: #fff; }
.ni .dot { margin-left: auto; margin-right: calc(var(--u) * .8); width: 10px; height: 10px; border-radius: 50%; background: #2bd96b; }

.lmain { position: absolute; inset: 0; left: calc(var(--u) * 11.5); padding: calc(var(--u) * 4.4) calc(var(--u) * 4) calc(var(--u) * 2.5) 0; display: flex; flex-direction: column; overflow: hidden; }
.sec { font-size: calc(var(--u) * 2.3); font-weight: 600; margin: calc(var(--u) * 3) 0 calc(var(--u) * .6); color: var(--t1); letter-spacing: -.015em; font-family: var(--sys); }
.k { font-size: calc(var(--u) * 1.05); font-weight: 600; letter-spacing: .22em; color: var(--t3); margin: 0; }
.s { font-size: calc(var(--u) * 1.4); color: var(--t3); margin: calc(var(--u) * .8) 0 0; line-height: 1.4; }
.s b { color: var(--t1); font-weight: 600; }
.hint { margin: auto 0 0; font-size: calc(var(--u) * 1.3); color: var(--t3); }
.hint b { color: var(--t1); font-weight: 600; }

/* controllers: is a phone connected? */
.ctl { display: flex; gap: calc(var(--u) * 1.6); align-items: stretch; min-height: calc(var(--u) * 13); }
.cc { display: flex; align-items: center; gap: calc(var(--u) * 1.5); padding: calc(var(--u) * 1.6) calc(var(--u) * 2.2) calc(var(--u) * 1.6) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 2.2); background: #fff; border: 1px solid var(--line); box-shadow: var(--lift); min-width: calc(var(--u) * 21); }
.cc.pop { animation: rise .5s var(--glide); }
@keyframes rise { from { transform: translateY(12px) scale(.96); opacity: 0; } }
.phone { position: relative; flex: none; width: calc(var(--u) * 3.6); height: calc(var(--u) * 6.2); border-radius: calc(var(--u) * .9); background: var(--t1); padding: 3px; }
.phone i { position: absolute; inset: 4px 4px 10px; border-radius: calc(var(--u) * .5); background: var(--c); }
.phone::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 34%; height: 3px; transform: translateX(-50%); border-radius: 2px; background: rgba(255, 255, 255, .5); }
.cc b { display: block; font-size: calc(var(--u) * 1.9); font-weight: 600; }
.cc .st { display: flex; align-items: center; gap: .45em; font-size: calc(var(--u) * 1.35); color: var(--t2); margin-top: .25em; }
.cc .st::before { content: ""; width: .62em; height: .62em; border-radius: 50%; background: #2bd96b; box-shadow: 0 0 0 4px rgba(43, 217, 107, .18); }
.cc.off { opacity: .55; } .cc.off .st::before { background: #b8bcc6; box-shadow: none; }
.cc .seat { margin-left: auto; padding-left: calc(var(--u) * 1.4); font-size: calc(var(--u) * 1.2); font-weight: 600; color: var(--t3); align-self: flex-start; }
.cc.add { background: var(--chipbg); border: none; box-shadow: none; gap: calc(var(--u) * 1.2); cursor: pointer; }
.cc.add .plus { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: calc(var(--u) * 2.4); color: var(--t2); }
.cc.add small { display: block; font-size: calc(var(--u) * 1.25); color: var(--t3); margin-top: .2em; }
.cc.add .mini { display: flex; gap: 4px; margin-top: .45em; }
.cc.add .mini span { width: 1.7em; height: 2.1em; border-radius: 7px; background: #fff; display: grid; place-items: center; font-weight: 700; font-size: calc(var(--u) * 1.35); }
/* nobody connected yet: the code and QR sit right on the launcher */
.empty-ctl { flex: 1; display: flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.8) calc(var(--u) * 1.8) calc(var(--u) * 1.8); border-radius: calc(var(--u) * 2.6); background: #fff; border: 1px solid var(--line); box-shadow: var(--lift); }
.empty-ctl .qr { flex: none; width: calc(var(--u) * 15); }
.empty-ctl h3 { margin: calc(var(--u) * .5) 0 0; font-size: calc(var(--u) * 2.8); font-weight: 600; letter-spacing: -.02em; }
.empty-ctl .codebox { margin-top: calc(var(--u) * 1.4); }
.codebox { display: flex; gap: calc(var(--u) * 1); }
.codebox span { width: calc(var(--u) * 5.2); height: calc(var(--u) * 6.4); border-radius: calc(var(--u) * 1.4); background: var(--chipbg); display: grid; place-items: center; font-size: calc(var(--u) * 3.6); font-weight: 700; color: var(--t1); }
.qr svg { width: 100%; height: auto; display: block; }
.qr svg path { fill: var(--t1); }
.qr svg rect { fill: #fff; }

/* games: borderless cards on white, the name underneath; focus lifts the card */
.shelf-zone { overflow: visible; padding: calc(var(--u) * 1.6) 0 calc(var(--u) * 1); }
.shelf { display: flex; gap: calc(var(--u) * 2.2); transition: transform .45s var(--glide); }
.tile { flex: none; width: calc(var(--u) * 25); cursor: pointer; }
.tile .art { position: relative; aspect-ratio: 16 / 10; border-radius: calc(var(--u) * 2); background: var(--bg) center / cover no-repeat; box-shadow: var(--lift); display: grid; place-items: center; font-size: calc(var(--u) * 7); transition: transform .3s var(--glide), box-shadow .3s var(--glide); overflow: hidden; }
.tile .tag { position: absolute; top: calc(var(--u) * 1); left: calc(var(--u) * 1); font: 600 calc(var(--u) * 1.05) var(--sys); letter-spacing: .08em; padding: .45em .9em; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--t1); }
.tile .tag.dark { background: var(--t1); color: #fff; }
.tile .nm { margin-top: calc(var(--u) * 1.2); font-size: calc(var(--u) * 1.7); font-weight: 600; color: var(--t2); transition: color .2s; }
.tile .tsub { font-size: calc(var(--u) * 1.25); color: var(--t3); margin-top: .2em; opacity: 0; transition: opacity .2s; }
.tile.soon .art { filter: saturate(.35); opacity: .7; }
.tile.fc .art, body:not(.tv) .tile:hover .art { transform: translateY(calc(var(--u) * -.8)) scale(1.05); box-shadow: var(--focus); }
.tile.fc .nm { color: var(--t1); }
.tile.fc .tsub, body:not(.tv) .tile:hover .tsub { opacity: 1; }

/* ---------- panels over the library (SMARTRIX pair-sheet style) ---------- */
.sheet-wrap { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); pointer-events: auto; font-family: var(--sys); color: var(--t1); }
.sheet { position: relative; width: min(92vw, calc(var(--u) * 86)); max-height: 88vh; overflow: auto; padding: calc(var(--u) * 4) calc(var(--u) * 5); border-radius: calc(var(--u) * 3); background: #fff; box-shadow: 0 2px 8px rgba(16, 20, 28, .06), 0 40px 110px rgba(16, 20, 28, .22); animation: rise .35s var(--glide); }
.sheet h2 { font-size: calc(var(--u) * 3); font-weight: 600; letter-spacing: -.015em; margin: calc(var(--u) * .8) 0 calc(var(--u) * 2); }
.sx { position: absolute; top: calc(var(--u) * 1.6); right: calc(var(--u) * 1.6); width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-radius: 50%; border: none; background: var(--chipbg); font-size: calc(var(--u) * 2.2); line-height: 1; color: var(--t1); cursor: pointer; }
.sx:hover { background: var(--t1); color: #fff; }
.connect { display: grid; grid-template-columns: calc(var(--u) * 26) 1fr; gap: calc(var(--u) * 4); align-items: center; }
.connect h2 { margin-bottom: calc(var(--u) * 1.6); }
.warn { margin: calc(var(--u) * 1.4) 0 0; font-size: calc(var(--u) * 1.3); background: #fff3f3; border-radius: 12px; padding: calc(var(--u) * .9); color: #8a1f1f; }
.plist { display: flex; flex-direction: column; gap: calc(var(--u) * .8); }
.pl { display: flex; align-items: center; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 1) calc(var(--u) * 1.4); border-radius: calc(var(--u) * 1.8); background: #fff; border: 1px solid var(--line); font-size: calc(var(--u) * 1.6); cursor: pointer; transition: transform .2s var(--glide), box-shadow .2s; }
.pl.fc { box-shadow: var(--focus); transform: scale(1.02); }
.pl .phone { width: calc(var(--u) * 2.6); height: calc(var(--u) * 4.4); }
.pl b { font-weight: 600; }
.pl small { margin-left: auto; color: var(--t3); }
.pl .x { font-size: calc(var(--u) * 1.25); font-weight: 600; padding: .45em 1em; border-radius: 999px; background: var(--chipbg); }
.pl.fc .x { background: var(--t1); color: #fff; }
.plist .empty { font-size: calc(var(--u) * 1.6); color: var(--t3); }
#set-rows .row { font-family: var(--sys); }
#set-rows .row > b { font: 600 calc(var(--u) * 1.6) var(--sys); }
#set-rows .row.focus { border-color: transparent; background: var(--chipbg); }
#set-rows .opt { font: 600 calc(var(--u) * 1.5) var(--sys); border: none; background: var(--chipbg); }
#set-rows .opt.on { background: var(--t1); color: #fff; box-shadow: none; transform: none; }
#set-rows input { font: 600 calc(var(--u) * 1.6) var(--sys); padding: .55em 1em; border: 1px solid var(--line); border-radius: 999px; width: calc(var(--u) * 26); background: #fff; }

#setup { background: rgba(255, 255, 255, .86); backdrop-filter: blur(6px); display: flex; flex-direction: column; justify-content: center; align-items: center; }

/* ---------- setup ---------- */
.setup-card { width: min(92vw, calc(var(--u) * 86)); padding: calc(var(--u) * 2.4); border: 4px solid var(--ink); border-radius: calc(var(--u) * 3); background: #fff; box-shadow: 12px 12px 0 var(--ink); }
.setup-head { display: flex; gap: calc(var(--u) * 2); align-items: center; }
.setup-head .emoji { display: grid; place-items: center; width: calc(var(--u) * 8); height: calc(var(--u) * 8); border: 4px solid var(--ink); border-radius: calc(var(--u) * 2); background: var(--pink); box-shadow: 4px 4px 0 var(--ink); }
.setup-head .emoji .glyph { width: 80%; }
.setup-head h2 { font: 900 calc(var(--u) * 4) var(--display); margin: 0; color: var(--pink); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.setup-head p { font: 700 calc(var(--u) * 1.7) var(--body); margin: 0; }
.rows { display: flex; flex-direction: column; gap: calc(var(--u) * .7); margin: calc(var(--u) * 1.6) 0; }
.row { display: flex; align-items: center; gap: calc(var(--u) * 1.5); padding: calc(var(--u) * .8); border-radius: calc(var(--u) * 1.6); border: 3px solid transparent; }
.row.focus { border-color: var(--ink); background: #fff3fa; }
.row > b { font: 800 calc(var(--u) * 1.6) var(--display); width: calc(var(--u) * 16); }
.opt { font: 800 calc(var(--u) * 1.6) var(--display); padding: calc(var(--u) * .9) calc(var(--u) * 1.6); border: 3px solid var(--ink); border-radius: 99px; background: #fff; cursor: pointer; }
.opt.on { background: var(--lime); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-2deg); }
.opt.dis { opacity: .35; cursor: not-allowed; }
.go { margin-left: auto; font: 900 calc(var(--u) * 2.4) var(--display); padding: calc(var(--u) * 1.2) calc(var(--u) * 3); border: 4px solid var(--ink); border-radius: calc(var(--u) * 2); background: var(--pink); color: #fff; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; box-shadow: 6px 6px 0 var(--ink); cursor: pointer; }
.how { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1.2); }
.how div { padding: calc(var(--u) * 1.2); border: 3px solid var(--ink); border-radius: calc(var(--u) * 1.4); background: var(--paper); display: flex; flex-direction: column; gap: 4px; }
.how b { font: 800 calc(var(--u) * 1.4) var(--display); }
.how span { font: 500 calc(var(--u) * 1.3) / 1.3 var(--body); }

/* ---------- in-game HUD ---------- */
#scoreboard { position: absolute; top: calc(var(--u) * 2); left: calc(var(--u) * 2); right: calc(var(--u) * 2); display: flex; justify-content: space-between; pointer-events: none; }
.sb { display: flex; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * .8) calc(var(--u) * 1.8) calc(var(--u) * .8) calc(var(--u) * .8); border: 4px solid var(--ink); border-radius: 99px; background: #fff; box-shadow: 5px 5px 0 var(--ink); }
.sb:last-child { flex-direction: row-reverse; padding: calc(var(--u) * .8) calc(var(--u) * .8) calc(var(--u) * .8) calc(var(--u) * 1.8); }
.sb .pts { min-width: calc(var(--u) * 7); height: calc(var(--u) * 7); padding: 0 calc(var(--u) * 1); border-radius: 99px; border: 3px solid var(--ink); background: var(--c); display: grid; place-items: center; font: 900 calc(var(--u) * 4.4) var(--display); }
.sb .pts.bump { animation: pop .45s cubic-bezier(.2, 1.8, .4, 1); }
.sb .nm { font: 900 calc(var(--u) * 2.2) var(--display); }
.sb .srv { font-size: calc(var(--u) * 2.4); animation: bob2 .5s ease-in-out infinite alternate; }
@keyframes bob2 { to { transform: translateY(-5px) rotate(15deg); } }
#banner { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
#banner h2 { font: 900 calc(var(--u) * 9) var(--display); margin: 0; color: var(--sun); -webkit-text-stroke: calc(var(--u) * .4) var(--ink); paint-order: stroke fill; text-shadow: 8px 8px 0 var(--ink); animation: slam .5s cubic-bezier(.2, 1.6, .4, 1); }
#banner p { font: 800 calc(var(--u) * 2.4) var(--display); margin: calc(var(--u) * 1) auto 0; padding: calc(var(--u) * .6) calc(var(--u) * 2); background: #fff; border: 3px solid var(--ink); border-radius: 99px; }
@keyframes slam { from { transform: scale(2.4) rotate(-8deg); opacity: 0; } }
#callouts { position: absolute; inset: 0; }
.co { position: absolute; top: 30%; transform: translate(-50%, -50%); font: 900 var(--fs) var(--display); color: var(--c, #fff); -webkit-text-stroke: calc(var(--fs) * .07) var(--ink); paint-order: stroke fill; text-shadow: calc(var(--fs) * .08) calc(var(--fs) * .08) 0 var(--ink); white-space: nowrap; animation: co var(--ms, 900ms) cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes co { 0% { transform: translate(-50%, -50%) scale(.2) rotate(-12deg); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.15) rotate(3deg); opacity: 1; } 25% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); } 80% { opacity: 1; } 100% { transform: translate(-50%, -80%) scale(1); opacity: 0; } }
.co small { display: block; text-align: center; font-size: .42em; margin-top: .1em; }
#rally { position: absolute; top: calc(var(--u) * 3.4); left: 50%; transform: translateX(-50%); font: 900 calc(var(--u) * 2.2) var(--display); padding: calc(var(--u) * .6) calc(var(--u) * 2); border: 3px solid var(--ink); border-radius: 99px; background: var(--sun); box-shadow: 4px 4px 0 var(--ink); }
#tip { position: absolute; bottom: calc(var(--u) * 3); left: 50%; transform: translateX(-50%); font: 700 calc(var(--u) * 1.8) var(--body); padding: calc(var(--u) * .7) calc(var(--u) * 2); border-radius: 99px; background: rgba(22, 18, 31, .82); color: #fff; white-space: nowrap; }
#tip:empty { display: none; }
#results { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 248, 238, .35); }
.res { width: min(90vw, calc(var(--u) * 60)); padding: calc(var(--u) * 3); border: 4px solid var(--ink); border-radius: calc(var(--u) * 3); background: #fff; box-shadow: 12px 12px 0 var(--ink); text-align: center; animation: slam .5s cubic-bezier(.2, 1.6, .4, 1); margin-left: auto; margin-right: calc(var(--u) * 6); }
.res h2 { font: 900 calc(var(--u) * 5) var(--display); margin: 0; color: var(--c); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--ink); }
.res .big { font: 900 calc(var(--u) * 7) var(--display); margin: calc(var(--u) * .5) 0; }
.res .vibe { font: 700 calc(var(--u) * 2) var(--body); margin: 0 0 calc(var(--u) * 2); }
.res dl { display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u) * .6) calc(var(--u) * 2); text-align: left; font: 700 calc(var(--u) * 1.6) var(--body); margin: 0 0 calc(var(--u) * 2.5); }
.res dt { opacity: .65; } .res dd { margin: 0; font-family: var(--display); }
.res .btns { display: flex; gap: calc(var(--u) * 1.5); justify-content: center; }
.res button { font: 900 calc(var(--u) * 1.8) var(--display); padding: calc(var(--u) * 1.2) calc(var(--u) * 2.4); border: 3px solid var(--ink); border-radius: 99px; background: var(--lime); box-shadow: 4px 4px 0 var(--ink); cursor: pointer; }
.res button + button { background: #fff; }

#toasts { position: absolute; bottom: calc(var(--u) * 3); right: calc(var(--u) * 3); display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.toast { font: 800 calc(var(--u) * 1.7) var(--display); padding: calc(var(--u) * .9) calc(var(--u) * 1.8); border: 3px solid var(--ink); border-radius: 99px; background: var(--c, #fff); box-shadow: 4px 4px 0 var(--ink); animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
#sound { position: absolute; bottom: calc(var(--u) * 2); left: calc(var(--u) * 2); font: 700 calc(var(--u) * 1.4) var(--body); padding: calc(var(--u) * .7) calc(var(--u) * 1.4); border: 3px solid var(--ink); border-radius: 99px; background: #fff; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; z-index: 3; }
body.ingame #sound { opacity: .7; }

@media (max-aspect-ratio: 4/3) {
  .connect { grid-template-columns: 1fr; }
  .how { grid-template-columns: 1fr 1fr; }
  .empty-ctl .qr { width: calc(var(--u) * 12); }
}
.cc .pad-ico { flex: none; width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); border-radius: 50%; display: grid; place-items: center; font-size: calc(var(--u) * 2.3); background: var(--c); }
.sb .pt { font: 900 calc(var(--u) * 2) var(--display); padding: .15em .6em; border-radius: 99px; background: var(--ink); color: #fff; }
.res button.fc { outline: 4px solid var(--ink); outline-offset: 4px; transform: scale(1.06); }

/* SMARTRIX GAME LAUNCHER: drawn tile art (no emoji), the JUST VIBES shelf, the leave prompt */
.brand { position: absolute; top: calc(var(--u) * 1.5); margin: 0; font: 600 calc(var(--u) * 1.15) var(--sys); letter-spacing: .24em; color: var(--t3); }
.brand b { color: var(--t1); font-weight: 700; }
.tile .art .glyph { width: 46%; height: auto; filter: drop-shadow(0 2px 6px rgba(16, 20, 28, .18)); }
.tile .art .mark { position: absolute; right: calc(var(--u) * 1.4); bottom: calc(var(--u) * 1.1); font: 900 calc(var(--u) * 2) / .95 var(--display); color: #fff; text-align: right; letter-spacing: .02em; }
.tile .art:has(.mark) .glyph { width: 38%; transform: translate(-22%, -6%); }
.sec .crumb { color: var(--t3); }
.sec .sep { color: var(--t3); margin: 0 .45em; }
.sec small { font-size: .55em; font-weight: 500; color: var(--t3); margin-left: .8em; letter-spacing: 0; }
.cc .pad-ico svg { width: 62%; fill: none; stroke: var(--t1); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#leave { z-index: 20; }
.sheet.leave { width: min(92vw, calc(var(--u) * 64)); text-align: center; }
.sheet.leave h2 { margin: 0 0 calc(var(--u) * 3); }
.leave-btns { display: flex; gap: calc(var(--u) * 1.6); justify-content: center; }
.leave-btns button { min-width: calc(var(--u) * 16); font: 600 calc(var(--u) * 1.8) var(--sys); padding: calc(var(--u) * 1.2) calc(var(--u) * 2.4); border-radius: 999px; border: none; background: var(--chipbg); color: var(--t1); cursor: pointer; transition: transform .2s var(--glide), background .2s, color .2s; }
.leave-btns button.fc, .leave-btns button:hover { background: var(--t1); color: #fff; transform: scale(1.06); }