@font-face {
  font-family:Bangla;
  src:url('fonts/NotoSansBengali-Regular.ttf') format('truetype');
  font-display:swap;
  unicode-range:U+0980-09FF,U+200C-200D;
}
/* Rickshaw Pop: the 3D world fills the screen and everything floats on it as stickers and glass. */
:root {
  --ink:#fff8e7;
  --soft:#ded7ef;
  --muted:#b9b0d3;
  --accent:#ffd23f;
  --accent-2:#17d3bb;
  --error:#ffa0ac;
  --dark:#140f22;
  --page:#140f22;
  --field:#140f22;
  --glass:#171228e6;
  --card:#251d3d;
  --card-on:#34295a;
  --line:#463a6b;
  --lift:#140f22;
  --fade-0:#140f2200;
  --fade-1:#140f22d9;
  --fade-2:#140f22f5;
  --fade-side:#140f22d0;
  --fade-solid:#140f22f7;
  --pink:#d81b54;
  --yellow:#ffd23f;
  --teal:#17d3bb;
  --outline:2.5px solid var(--dark);
  --gutter:clamp(10px,2.6vw,22px);
  --rail:clamp(320px,31vw,440px);
  --inset-b:0px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --floral:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10'%3E%3Crect width='40' height='10' fill='%23ff2e63'/%3E%3Cg fill='%23ffd23f'%3E%3Ccircle cx='10' cy='5' r='3'/%3E%3Ccircle cx='30' cy='5' r='3'/%3E%3C/g%3E%3Cg fill='%2317d3bb'%3E%3Ccircle cx='20' cy='5' r='1.7'/%3E%3Ccircle cx='0' cy='5' r='1.7'/%3E%3Ccircle cx='40' cy='5' r='1.7'/%3E%3C/g%3E%3C/svg%3E");
  --i-sound:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z' fill='%23000'/%3E%3Cpath d='M15.5 9a4 4 0 0 1 0 6M18.5 6a8 8 0 0 1 0 12'/%3E%3C/svg%3E");
  --i-view:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='m4 7.5 8 4.5 8-4.5M12 12v9'/%3E%3C/svg%3E");
  --i-pause:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='4' width='4.5' height='16' rx='1.5'/%3E%3Crect x='13.5' y='4' width='4.5' height='16' rx='1.5'/%3E%3C/svg%3E");
  --i-exit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --i-solo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4 20h10a4 4 0 0 0 0-8H9a4 4 0 0 1 0-8h9'/%3E%3Ccircle cx='19.5' cy='4' r='1.6' fill='%23000'/%3E%3C/svg%3E");
  --i-versus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 4 11 11M4 4h4M4 4v4M20 4 9 15M20 4h-4M20 4v4M6 20l3-3-2-2M18 20l-3-3 2-2'/%3E%3C/svg%3E");
  --i-looks:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1.7 0 2.2-1.300 1.500-2.500-.8-1.400.2-3 1.800-3H18a3 3 0 0 0 3-3c0-5.200-4-9.500-9-9.500ZM7.500 13a1.500 1.500 0 1 1 0-3 1.500 1.500 0 0 1 0 3Zm3-4.500a1.500 1.500 0 1 1 0-3 1.500 1.500 0 0 1 0 3Zm5 0a1.500 1.500 0 1 1 0-3 1.500 1.500 0 0 1 0 3Z'/%3E%3C/svg%3E");
  --i-trophy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10v2h4v3a4 4 0 0 1-4.300 4A5 5 0 0 1 13 14.900V18h3v3H8v-3h3v-3.100A5 5 0 0 1 7.300 12 4 4 0 0 1 3 8V5h4Zm0 4H5v1a2 2 0 0 0 2 2Zm10 0v3a2 2 0 0 0 2-2V7Z'/%3E%3C/svg%3E");
  --i-help:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9a4 4 0 1 1 6.500 3.100c-1.500 1.100-2.500 2-2.500 3.400'/%3E%3Ccircle cx='12' cy='20' r='.8'/%3E%3C/svg%3E");
  color-scheme:light dark;
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Bangla,sans-serif;
  color:var(--ink);
  background:var(--page);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
/* Light mode: warm paper panels floating over the same world. */
@media(prefers-color-scheme:light) {
  :root {
    --ink:#20163a;
    --soft:#3f3556;
    --muted:#5c5270;
    --accent:#a30f3b;
    --accent-2:#07695d;
    --error:#a3122f;
    --page:#fff6e3;
    --field:#ffffff;
    --glass:#fff9ecf2;
    --card:#ffffff;
    --card-on:#ffeeb8;
    --line:#d8ccb0;
    --lift:#fffdf6;
    --fade-0:#fff6e300;
    --fade-1:#fff6e3e0;
    --fade-2:#fff6e3f8;
    --fade-side:#fff6e3d8;
    --fade-solid:#fff6e3fa;
  }
}
* {
  box-sizing:border-box;
}
html,body {
  height:100%;
  margin:0;
  overflow:hidden;
  overscroll-behavior:none;
}
body {
  background:var(--page);
  -webkit-tap-highlight-color:transparent;
}
[hidden] {
  display:none!important;
}
html[lang=bn] * {
  letter-spacing:0!important;
}
[lang=bn],html[lang=bn] h1,html[lang=bn] h2,html[lang=bn] h3 {
  font-family:Bangla,sans-serif;
}
button,input,select {
  font:inherit;
  color:inherit;
}
button,a {
  touch-action:manipulation;
}
button {
  border:0;
  cursor:pointer;
  min-height:44px;
  user-select:none;
  -webkit-user-select:none;
}
button:disabled {
  opacity:.5;
  cursor:not-allowed;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid var(--teal);
  outline-offset:2px;
}
a {
  color:inherit;
}
input,select {
  width:100%;
  min-height:48px;
  padding:10px 12px;
  background:var(--field);
  border:2px solid var(--line);
  border-radius:12px;
  /* 16px stops iOS zooming the page when a field gets focus. */
  font-size:16px;
}
.state-select {
  display:none;
}

/* Sticker buttons */
.primary {
  background:var(--pink);
  color:#fff;
  border:var(--outline);
  border-radius:18px;
  box-shadow:0 6px 0 var(--dark);
  margin-bottom:6px;
  padding:12px 20px;
  font-weight:800;
  font-size:16px;
  transition:transform .08s,box-shadow .08s;
}
.primary:active:not(:disabled) {
  transform:translateY(4px);
  box-shadow:0 2px 0 var(--dark);
}
.secondary {
  background:var(--card-on);
  border:2px solid var(--line);
  border-radius:14px;
  padding:8px 14px;
  font-size:13px;
  font-weight:700;
}
.quiet {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--glass);
  border:2px solid var(--line);
  border-radius:999px;
  padding:0 14px;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  backdrop-filter:blur(6px);
}
.text-button {
  background:none;
  color:var(--muted);
  font-size:13px;
  padding:8px 16px;
}
.eyebrow {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.4px;
  line-height:1.4;
}
.error {
  color:var(--error);
  border-left:3px solid var(--pink);
  padding-left:10px;
  margin:8px 0 0;
  font-size:13px;
  line-height:1.5;
}
@media(hover:hover) {
  .tile:hover,.card:hover:not(:disabled),.secondary:hover,.back:hover,.chip:hover {
    background:var(--card-on);
  }
  .primary:hover:not(:disabled) {
    filter:brightness(1.08);
  }
}

/* The world: always the whole screen, behind everything. */
.arena {
  position:fixed;
  inset:0;
  background:#0a141d;
  overflow:hidden;
}
canvas {
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
}
#board,#board3d {
  position:absolute;
  inset:0;
}
#board3d {
  pointer-events:none;
}
#board:focus-visible {
  outline:0;
}
.preview-tag {
  display:none;
}

/* Top of the home screen */
.site-header {
  position:fixed;
  z-index:3;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:calc(var(--safe-t) + 8px) calc(var(--safe-r) + var(--gutter)) 6px calc(var(--safe-l) + var(--gutter));
}
body:has(#app.playing) .site-header {
  display:none;
}
.brand {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  padding:4px 12px 4px 4px;
  background:var(--yellow);
  color:var(--dark);
  border:var(--outline);
  border-radius:999px;
  box-shadow:0 3px 0 var(--dark);
  text-decoration:none;
  font-size:clamp(13px,3.8vw,17px);
  font-weight:900;
  white-space:nowrap;
}
.brand img {
  width:30px;
  height:30px;
  flex-shrink:0;
  border-radius:50%;
}
.brand-light {
  margin-left:4px;
  color:#a30f3b;
}
.header-actions {
  display:flex;
  gap:6px;
  flex-shrink:0;
}
.header-actions .quiet {
  min-height:40px;
  padding:0 12px;
  font-size:12px;
}

/* Home and menus */
#app:not(.playing) :is(.arena-top,.scoreboard,.arena-bottom,.controls-hint,.touch-controls,.caption,.connection-status) {
  display:none;
}
#app:not(.playing) .setup {
  position:fixed;
  z-index:2;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  max-height:calc(100dvh - 120px);
  padding:0 calc(var(--safe-r) + var(--gutter)) calc(var(--safe-b) + 10px) calc(var(--safe-l) + var(--gutter));
}
/* Home has no panel at all: just a fade so the text stays readable over the world. */
#app:not(.playing) .setup:has(#homeScreen:not([hidden])) {
  padding-top:44px;
  background:linear-gradient(var(--fade-0),var(--fade-1) 42px,var(--fade-2));
  overflow:auto;
}
/* A menu slides up as a sheet of glass, with a rickshaw-art edge. */
#app:not(.playing) .setup:has(#homeScreen[hidden]) {
  height:min(76dvh,720px);
  padding-top:22px;
  background:var(--glass) var(--floral) top/40px 10px repeat-x;
  backdrop-filter:blur(14px);
  border-radius:24px 24px 0 0;
  overflow:hidden;
  animation:rise .22s ease-out;
}
@keyframes rise {
  from { transform:translateY(40px); opacity:.4; }
}
.menu-screen {
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  min-height:0;
  width:100%;
  max-width:620px;
  margin:0 auto;
}
.setup h1 {
  margin:0;
  font-size:clamp(27px,8vw,44px);
  line-height:1.24;
  font-weight:900;
  text-shadow:0 2px 0 var(--lift);
}
.setup h1 span {
  display:block;
}
.setup h1 .accent {
  color:var(--accent);
}
.intro {
  margin:0;
  color:var(--soft);
  font-size:clamp(13px,3.4vw,15px);
  line-height:1.45;
}
.start {
  display:flex;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:clamp(56px,8dvh,70px);
  font-size:clamp(17px,4.8vw,21px);
}
#startButton {
  background:var(--yellow);
  color:var(--dark);
  font-weight:900;
}
.start span {
  display:none;
}
.home-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.best-line {
  margin:0;
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
}
.best-line b {
  margin-left:4px;
  color:var(--accent);
  font-size:16px;
}
.chip {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-width:0;
  min-height:38px;
  padding:0 12px 0 6px;
  background:var(--card);
  border:2px solid var(--line);
  border-radius:999px;
  font-size:13px;
  font-weight:700;
}
.chip span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chip-dot {
  flex-shrink:0;
  width:26px;
  height:26px;
  border-radius:50%;
  border:2px solid var(--dark);
}
/* The dock */
.menu-tiles {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
}
.tile {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  min-width:0;
  padding:8px 2px 6px;
  background:var(--card);
  border:2px solid var(--line);
  border-radius:16px;
  text-align:center;
}
.tile::before {
  content:'';
  width:24px;
  height:24px;
  flex-shrink:0;
  background:var(--c,var(--yellow));
  -webkit-mask:var(--icon) center/contain no-repeat;
  mask:var(--icon) center/contain no-repeat;
}
.tile b {
  font-size:clamp(10px,2.9vw,12.5px);
  font-weight:700;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.tile small {
  display:none;
}
#soloMode {
  --icon:var(--i-solo);
  --c:var(--yellow);
}
#duelMode {
  --icon:var(--i-versus);
  --c:#ff6b8f;
}
#looksButton {
  --icon:var(--i-looks);
  --c:var(--teal);
}
#boardButton {
  --icon:var(--i-trophy);
  --c:#ffb14a;
}
#howButton {
  --icon:var(--i-help);
  --c:#b9a4ff;
}
.card {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  min-width:0;
  min-height:64px;
  padding:10px 14px;
  text-align:left;
  background:var(--card);
  border:2px solid var(--line);
  border-radius:16px;
}
.card b {
  font-size:15px;
  font-weight:800;
  line-height:1.3;
}
.card small {
  font-size:12px;
  line-height:1.35;
  color:var(--muted);
}
.card[aria-pressed=true] {
  background:var(--card-on);
  border-color:var(--yellow);
  box-shadow:0 0 0 2px var(--yellow);
}
.menu-heading {
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.menu-heading h2 {
  margin:0;
  font-size:clamp(21px,5.6vw,27px);
  font-weight:900;
}
.back {
  width:44px;
  flex-shrink:0;
  background:var(--card);
  border:2px solid var(--line);
  border-radius:50%;
  font-size:20px;
}
.menu-scroll {
  flex:1;
  min-height:0;
  overflow:auto;
  padding:3px;
  -webkit-overflow-scrolling:touch;
}
.menu-scroll h3 {
  margin:16px 0 8px;
  font-size:12px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--muted);
}
.menu-scroll h3:first-child {
  margin-top:0;
}
.cards {
  display:grid;
  gap:8px;
  grid-template-columns:minmax(0,1fr);
}
.cards.cards-row {
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.cards-row .card {
  min-height:48px;
  padding:6px;
  align-items:center;
  text-align:center;
}
.cards-row .card b {
  font-size:14px;
}
.cards.cards-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.swatch {
  display:block;
  height:48px;
  border-radius:10px;
  border:2px solid var(--dark);
  margin-bottom:6px;
}
.mode-description {
  margin:12px 0 2px;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}
.rules-text p {
  margin:0 0 12px;
  color:var(--soft);
  font-size:14px;
  line-height:1.65;
}
#codeField label {
  display:block;
  margin:12px 0 6px;
  font-size:12px;
  font-weight:650;
}

.credit {
  display:block;
  flex-shrink:0;
  padding:3px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  text-decoration:none;
}
.credit b {
  color:var(--accent);
}
/* Things that float on the world */
.caption {
  position:absolute;
  z-index:2;
  left:50%;
  bottom:calc(var(--inset-b) + 8px);
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 20px);
  margin:0;
  padding:6px 16px;
  border:var(--outline);
  border-radius:16px;
  background:var(--yellow);
  color:var(--dark);
  font-family:Bangla,sans-serif;
  font-weight:700;
  font-size:clamp(14px,3.8vw,18px);
  line-height:1.4;
  text-align:center;
  pointer-events:none;
}
.caption:empty,.connection-status:empty,.arena:has(#overlay:not([hidden])) .caption {
  display:none;
}
.connection-status {
  position:absolute;
  z-index:2;
  bottom:calc(var(--inset-b) + 54px);
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 20px);
  margin:0;
  padding:4px 12px;
  border-radius:999px;
  background:#7a1228f0;
  color:#fff;
  font-size:12px;
  pointer-events:none;
}
.countdown {
  position:absolute;
  z-index:2;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding-bottom:var(--inset-b);
  color:#fff;
  pointer-events:none;
  text-align:center;
  background:#140f2240;
}
.countdown strong {
  color:var(--yellow);
  font-size:clamp(72px,18vmin,130px);
  line-height:1;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  text-shadow:0 6px 0 var(--dark);
}
.countdown span {
  padding:2px 14px;
  border-radius:999px;
  background:var(--glass);
  color:var(--ink);
  font-size:14px;
}

/* Result, pause and room card */
.overlay {
  position:fixed;
  z-index:20;
  inset:0;
  display:grid;
  overflow:auto;
  padding:calc(var(--safe-t) + 12px) calc(var(--safe-r) + 12px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 12px);
  background:#0a0714b8;
  backdrop-filter:blur(2px);
}
.overlay-panel {
  width:100%;
  max-width:430px;
  margin:auto;
  padding:clamp(22px,3vmin,30px) clamp(16px,4vw,24px) 10px;
  text-align:center;
  background:var(--card) var(--floral) top/40px 10px repeat-x;
  border:var(--outline);
  border-radius:26px;
  box-shadow:0 10px 0 var(--dark);
  overflow:hidden;
  animation:pop .24s cubic-bezier(.2,1.5,.5,1);
}
@keyframes pop {
  from { transform:scale(.88); opacity:0; }
}
.overlay-panel .eyebrow {
  justify-content:center;
  margin-bottom:6px;
  color:var(--accent-2);
}
.overlay-panel h2 {
  margin:0 0 10px;
  color:var(--ink);
  font-size:clamp(23px,6vw,29px);
  line-height:1.36;
  font-weight:900;
  outline:0;
}
.result-score {
  display:block;
  margin-bottom:4px;
  color:var(--accent);
  font-size:clamp(60px,15vmin,88px);
  line-height:1.05;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  text-shadow:0 3px 0 var(--lift);
}
.overlay-panel p {
  margin:0 0 12px;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
  white-space:pre-line;
}
.overlay-panel .rank-text {
  color:var(--accent);
  font-weight:700;
}
.overlay-actions {
  display:grid;
  gap:10px;
  margin-top:6px;
}
.overlay .primary {
  width:100%;
  min-height:56px;
  background:var(--yellow);
  color:var(--dark);
  font-size:18px;
  font-weight:900;
}
.result-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.result-actions button {
  flex:1 1 40%;
}
#joinButton {
  flex-basis:100%;
  background:transparent;
  border-color:var(--accent-2);
  color:var(--accent-2);
}
#roomShare {
  margin-bottom:12px;
}
#roomShare label {
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--muted);
}
#roomShare input {
  margin:6px 0 10px;
  text-align:center;
  color:var(--accent);
  font-weight:800;
  font-size:24px;
  letter-spacing:4px!important;
}
#roomShare .secondary {
  width:100%;
}

/* Dialogs */
dialog {
  width:min(calc(100vw - 24px),460px);
  max-height:calc(100dvh - 24px);
  padding:clamp(20px,4vw,28px) clamp(16px,4vw,26px) clamp(16px,4vw,26px);
  overflow:auto;
  color:var(--ink);
  background:var(--card) var(--floral) top/40px 10px repeat-x;
  border:var(--outline);
  border-radius:24px;
}
dialog::backdrop {
  background:#0a0714c4;
}
dialog h2 {
  margin:0 0 10px;
  font-size:clamp(20px,5vw,25px);
  font-weight:900;
}
dialog p {
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}
.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}
.dialog-heading h2 {
  margin:0;
}
.toggle {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
  border-top:1px solid var(--line);
  font-size:14px;
  font-weight:600;
}
.toggle small {
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:11.5px;
  font-weight:400;
  line-height:1.5;
}
.toggle input {
  flex-shrink:0;
  width:24px;
  height:24px;
  min-height:0;
  accent-color:var(--pink);
}
.audio-note {
  margin:10px 0 0;
  font-size:11px!important;
}
#previewSound {
  width:100%;
}
#voicePreviewCaption {
  position:static;
  transform:none;
  width:auto;
  min-height:22px;
  margin:10px 0 0;
  padding:0;
  border:0;
  background:none;
  color:var(--accent);
  font-size:15px;
}
.dialog-buttons {
  display:flex;
  gap:10px;
  margin-top:18px;
}
.dialog-buttons button {
  flex:1;
  margin-bottom:6px;
}
.board-tabs {
  display:flex;
  gap:4px;
  padding:4px;
  background:var(--field);
  border:2px solid var(--line);
  border-radius:14px;
}
.board-tabs button {
  flex:1;
  min-width:0;
  background:transparent;
  color:var(--muted);
  border-radius:10px;
  font-weight:800;
  font-size:13px;
}
.board-tabs button[aria-pressed=true] {
  background:var(--yellow);
  color:var(--dark);
}
.board-list {
  margin:0;
  padding:0 0 0 28px;
  font-size:14px;
}
.board-list li {
  padding:9px 4px;
  border-bottom:1px solid var(--line);
}
.board-list li span {
  display:inline-block;
  max-width:76%;
  overflow-wrap:anywhere;
}
.board-list b {
  float:right;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.profile-form {
  display:grid;
  gap:6px;
  margin-top:16px;
  padding-top:4px;
  border-top:1px solid var(--line);
}
.profile-form h3 {
  margin:12px 0 4px;
  font-size:15px;
}
.profile-form label {
  margin-top:6px;
  font-size:12px;
  font-weight:650;
}
.profile-form small {
  color:var(--muted);
  font-size:11.5px;
}
.profile-form .primary {
  margin-top:10px;
}
dialog.study-dialog {
  width:100vw;
  max-width:none;
  height:100dvh;
  max-height:none;
  margin:0;
  padding:calc(var(--safe-t) + 32px) 22px 32px;
  border:0;
  border-radius:0;
  color:#222;
  background:#fff;
  color-scheme:light;
}
.study-dialog article {
  max-width:680px;
  margin:auto;
}
.study-dialog h2 {
  font-size:24px;
}
.study-dialog p {
  color:#222;
  font-size:17px;
  line-height:1.9;
}
.study-dialog .study-tag {
  color:#666;
  font-size:12px;
}
.study-dialog .study-formula {
  padding:14px;
  background:#f6f6f6;
  text-align:center;
  font-family:Georgia,serif;
  font-size:clamp(16px,4.6vw,21px);
}
.study-exit {
  margin-top:40px;
  background:transparent;
  color:#999;
  font-size:12px;
}

.card-dialog {
  width:min(calc(100vw - 16px),460px);
  padding:18px 14px 12px;
  text-align:center;
}
.card-dialog .dialog-heading {
  margin-bottom:8px;
  text-align:left;
}
.card-preview {
  display:block;
  width:auto;
  height:min(calc(100dvh - 190px),720px);
  max-width:100%;
  aspect-ratio:9/16;
  margin:0 auto;
  border-radius:10px;
  background:var(--dark);
  touch-action:auto;
}
.card-actions {
  display:flex;
  gap:8px;
  margin-top:10px;
}
.card-actions button {
  flex:1;
  min-height:50px;
  margin-bottom:6px;
  font-size:14px;
}
.card-status {
  min-height:18px;
  margin:2px 0 0;
  font-size:12px;
}
/* Playing: a heads-up display over the world. Empty space lets swipes through to the board. */
#app.playing .setup {
  display:none;
}
#app.playing .game-area {
  position:fixed;
  z-index:1;
  inset:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr) auto auto auto;
  grid-template-areas:'top' 'score' '.' 'status' 'hint' 'touch';
  gap:6px;
  padding:calc(var(--safe-t) + 8px) calc(var(--safe-r) + var(--gutter)) calc(var(--safe-b) + 10px) calc(var(--safe-l) + var(--gutter));
  pointer-events:none;
}
#app.playing .arena {
  z-index:-1;
  pointer-events:auto;
}
#app.playing .overlay {
  pointer-events:auto;
}
.arena-top {
  grid-area:top;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
#arenaLabel {
  display:none;
}
.board-actions {
  display:flex;
  flex:1;
  align-items:center;
  gap:6px;
  min-width:0;
  pointer-events:auto;
}
.board-actions .quiet:not(.mom) {
  width:44px;
  flex-shrink:0;
  padding:0;
  font-size:0;
}
.board-actions .quiet:not(.mom)::before {
  content:'';
  width:21px;
  height:21px;
  background:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;
  mask:var(--icon) center/contain no-repeat;
}
#soundButton {
  --icon:var(--i-sound);
}
#viewButton {
  --icon:var(--i-view);
}
#pauseButton {
  --icon:var(--i-pause);
}
#exitButton {
  --icon:var(--i-exit);
}
.quiet.mom {
  order:-1;
  margin-right:auto;
  min-width:0;
  background:var(--yellow);
  border:var(--outline);
  color:var(--dark);
  font-weight:800;
  padding:0 12px;
  font-size:12.5px;
}
.scoreboard {
  grid-area:score;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  padding:5px 12px 5px 6px;
  background:var(--glass);
  border:2px solid var(--line);
  border-radius:999px;
  backdrop-filter:blur(6px);
}
.score-player {
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.score-player.second {
  justify-content:flex-end;
}
.score-player strong {
  color:var(--accent);
  font-size:clamp(21px,3.4vmin,30px);
  line-height:1;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}
.player-mark {
  display:inline-flex;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:26px;
  height:26px;
  border:2px solid var(--dark);
  border-radius:50%;
  background:#a8f04a;
  color:#163626;
  font-size:12px;
  font-weight:900;
}
.player-mark.p2 {
  background:#ff9a2e;
  color:#342308;
}
.round-label {
  min-width:0;
  overflow:hidden;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.8px;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-align:center;
}
.arena-bottom {
  grid-area:status;
  justify-self:center;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:100%;
  min-width:0;
  padding:3px 12px;
  background:var(--glass);
  border-radius:999px;
  color:var(--soft);
  font-size:12px;
  line-height:1.35;
}
.arena-bottom:has(#statusText:empty),body:has(#overlay:not([hidden])) .arena-bottom {
  display:none;
}
.timer {
  flex-shrink:0;
  color:var(--accent);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.combo {
  display:flex;
  flex-shrink:0;
  align-items:center;
  gap:8px;
  color:var(--accent);
  font-weight:800;
}
progress {
  width:60px;
  height:5px;
  accent-color:var(--yellow);
}
.controls-hint {
  grid-area:hint;
  justify-self:center;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px 14px;
  padding:4px 14px;
  background:var(--glass);
  border-radius:999px;
  color:var(--muted);
  font-size:11px;
}
.controls-hint span {
  display:flex;
  align-items:center;
  gap:3px;
}
kbd {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:21px;
  height:22px;
  padding:2px 5px;
  border:1px solid var(--line);
  border-bottom-width:2px;
  border-radius:5px;
  font:10px inherit;
}
.touch-controls {
  grid-area:touch;
  display:none;
  grid-template-columns:repeat(3,clamp(66px,22vw,92px));
  grid-template-rows:repeat(2,clamp(56px,8.5dvh,76px));
  gap:7px;
  justify-content:center;
  pointer-events:auto;
}
.touch-controls button {
  min-height:0;
  color:#fff;
  background:#140f22b8;
  border:2.5px solid #ffffff55;
  border-radius:20px;
  font-size:clamp(24px,6.6vmin,34px);
  font-weight:900;
  backdrop-filter:blur(6px);
}
.touch-controls button:active {
  background:var(--yellow);
  border-color:var(--dark);
  color:var(--dark);
}
.touch-controls .up {
  grid-column:2;
}
.touch-controls .left {
  grid-column:1;
  grid-row:2;
}
.touch-controls .down {
  grid-column:2;
  grid-row:2;
}
.touch-controls .right {
  grid-column:3;
  grid-row:2;
}
html[data-touch] .touch-controls {
  display:grid;
}
html[data-touch] .controls-hint {
  display:none;
}
@media(max-width:760px) {
  .touch-controls {
    display:grid;
  }
  .controls-hint {
    display:none;
  }
}
@media(max-width:400px) {
  #app.playing .scoreboard {
    flex-wrap:wrap;
    row-gap:1px;
    border-radius:18px;
  }
  #app.playing .round-label {
    order:3;
    flex-basis:100%;
    white-space:normal;
  }
}
@media(max-width:360px) {
  .board-actions .quiet:not(.mom) {
    width:40px;
  }
  .quiet.mom {
    padding:0 8px;
    font-size:11.5px;
  }
  .header-actions .quiet {
    padding:0 9px;
    font-size:11px;
  }
  .brand img {
    display:none;
  }
  .brand {
    padding-left:10px;
  }
}

/* Tablets in portrait: bigger, centred. */
@media(min-width:700px) and (orientation:portrait) {
  #app:not(.playing) .setup:has(#homeScreen[hidden]) {
    height:min(64dvh,760px);
  }
  .tile {
    padding:12px 4px 10px;
  }
  .tile::before {
    width:30px;
    height:30px;
  }
  .tile b {
    font-size:14px;
  }
  .cards.cards-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .cards:not(.cards-row):not(.cards-grid) {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .scoreboard {
    max-width:640px;
    width:100%;
    justify-self:center;
  }
  .score-player {
    font-size:15px;
  }
  .arena-bottom {
    font-size:14px;
  }
}

/* Landscape: panels dock to the side and the world moves over. */
@media(orientation:landscape) and (min-width:700px) {
  #app:not(.playing) .setup,#app:not(.playing) .setup:has(#homeScreen[hidden]) {
    top:0;
    right:auto;
    width:calc(var(--rail) + var(--safe-l));
    height:auto;
    max-height:none;
    padding:calc(var(--safe-t) + 66px) var(--gutter) calc(var(--safe-b) + 14px) calc(var(--safe-l) + var(--gutter));
    border-radius:0;
  }
  #app:not(.playing) .setup:has(#homeScreen:not([hidden])) {
    padding-top:calc(var(--safe-t) + 66px);
    background:linear-gradient(90deg,var(--fade-solid) 78%,var(--fade-side));
  }
  #app:not(.playing) .setup:has(#homeScreen[hidden]) {
    background:var(--glass);
    border-right:4px solid var(--pink);
    animation:slide .22s ease-out;
  }
  #homeScreen .home-spacer {
    flex:1;
  }
  .site-header {
    right:auto;
    width:calc(var(--rail) + var(--safe-l));
  }
  .setup h1 {
    font-size:clamp(30px,3.3vw,52px);
  }
  .intro {
    font-size:clamp(13px,1.1vw,16px);
  }
  .start {
    font-size:clamp(17px,1.5vw,22px);
  }
  .tile::before {
    width:clamp(22px,1.8vw,30px);
    height:clamp(22px,1.8vw,30px);
  }
  .tile b {
    font-size:clamp(10px,.86vw,13px);
  }
}
@keyframes slide {
  from { transform:translateX(-40px); opacity:.4; }
}

/* PC: the score sits top centre, the hint bottom centre, controls off the board. */
@media(orientation:landscape) and (min-width:900px) and (min-height:561px) {
  html:not([data-touch]) #app.playing .game-area {
    grid-template-columns:1fr minmax(0,560px) 1fr;
    grid-template-rows:auto minmax(0,1fr) auto auto;
    grid-template-areas:'. score top' '. . .' 'status status status' 'hint hint hint';
  }
  html:not([data-touch]) .arena-top {
    justify-self:end;
  }
  html:not([data-touch]) .board-actions {
    flex:none;
  }
  html:not([data-touch]) .quiet.mom {
    order:0;
    margin:0;
  }
  html:not([data-touch]) .scoreboard {
    padding:7px 16px 7px 8px;
  }
  html:not([data-touch]) .score-player {
    font-size:14px;
  }
}

/* Short landscape, mostly phones. */
@media(orientation:landscape) and (min-width:700px) and (max-height:560px) {
  .site-header {
    padding-top:calc(var(--safe-t) + 4px);
    padding-bottom:2px;
  }
  .site-header .quiet {
    min-height:34px;
    padding:0 9px;
    font-size:11px;
  }
  .brand {
    padding:2px 9px 2px 3px;
    font-size:13px;
    box-shadow:none;
  }
  .brand img {
    width:24px;
    height:24px;
  }
  #app:not(.playing) .setup,#app:not(.playing) .setup:has(#homeScreen[hidden]),#app:not(.playing) .setup:has(#homeScreen:not([hidden])) {
    padding-top:calc(var(--safe-t) + 44px);
    padding-bottom:calc(var(--safe-b) + 6px);
  }
  .menu-screen {
    gap:6px;
  }
  .setup h1 {
    font-size:19px;
    line-height:1.25;
  }
  .setup h1 span {
    display:inline;
  }
  .intro {
    display:none;
  }
  .start {
    min-height:46px;
    font-size:16px;
    box-shadow:0 4px 0 var(--dark);
  }
  .chip {
    min-height:30px;
    font-size:11px;
  }
  .chip-dot {
    width:20px;
    height:20px;
  }
  .tile {
    padding:4px 1px;
    border-radius:12px;
    gap:1px;
  }
  .tile::before {
    width:18px;
    height:18px;
  }
  .tile b {
    font-size:9.5px;
  }
  .card {
    min-height:44px;
    padding:5px 10px;
  }
  .card b {
    font-size:13px;
  }
  .swatch {
    height:18px;
    margin-bottom:3px;
  }
  .credit {
    padding:0;
    font-size:10px;
  }
  .card-dialog {
    width:min(calc(100vw - 16px),560px);
  }
  .card-dialog[open] {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    column-gap:14px;
    padding:10px;
    align-items:start;
  }
  .card-dialog .dialog-heading {
    grid-column:2;
  }
  .card-preview {
    grid-column:1;
    grid-row:1/span 3;
    height:calc(100dvh - 44px);
  }
  .card-actions {
    grid-column:2;
    flex-direction:column;
  }
  .card-status {
    grid-column:2;
  }
  /* The result card turns sideways: score and roast left, buttons right. */
  .overlay-panel {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:18px;
    max-width:700px;
    padding:18px 16px 8px;
    align-items:center;
  }
  .overlay-panel>* {
    grid-column:1;
  }
  .overlay-panel>.overlay-actions {
    grid-column:2;
    grid-row:1/span 8;
    gap:6px;
    margin:0;
  }
  .overlay-panel .eyebrow {
    margin-bottom:2px;
  }
  .result-score {
    margin:0;
    font-size:44px;
  }
  .overlay-panel h2 {
    margin:0 0 4px;
    font-size:19px;
    line-height:1.3;
  }
  .overlay-panel p {
    margin:0 0 4px;
    font-size:12px;
    line-height:1.4;
  }
  .overlay .primary {
    min-height:46px;
    font-size:16px;
  }
  .result-actions .secondary {
    min-height:40px;
    padding:4px 8px;
  }
  .text-button {
    min-height:34px;
    padding:2px;
  }
}

/* Short windows and touch screens in landscape: a HUD column on the right, thumb on the controls. */
@media(orientation:landscape) and (max-height:560px) {
  .touch-controls {
    display:grid;
  }
  .controls-hint {
    display:none;
  }
  #app.playing .game-area {
    --hud:side;
    grid-template-columns:minmax(0,1fr) clamp(210px,28vw,290px);
    grid-template-rows:auto auto auto minmax(0,1fr);
    grid-template-areas:'. top' '. score' '. status' '. touch';
    gap:5px;
    padding-top:calc(var(--safe-t) + 6px);
    padding-bottom:calc(var(--safe-b) + 6px);
  }
  #app.playing .board-actions .quiet:not(.mom) {
    width:36px;
    min-height:36px;
  }
  #app.playing .quiet.mom {
    flex:1 1 0;
    min-width:0;
    min-height:36px;
    padding:0 6px;
    font-size:10.5px;
    line-height:1.05;
    white-space:normal;
    text-align:center;
  }
  #app.playing .scoreboard {
    padding:3px 8px 3px 4px;
  }
  #app.playing .score-player {
    gap:3px;
    font-size:10.5px;
  }
  #app.playing .score-player strong {
    font-size:18px;
  }
  #app.playing .player-mark {
    width:21px;
    height:21px;
  }
  /* The side panel is narrow, so the round count takes its own line instead of being cut off. */
  #app.playing .scoreboard {
    flex-wrap:wrap;
    row-gap:1px;
    border-radius:16px;
  }
  #app.playing .round-label {
    order:3;
    flex-basis:100%;
    font-size:10px;
    letter-spacing:0;
    white-space:normal;
  }
  #app.playing .arena-bottom {
    padding:2px 8px;
    border-radius:10px;
    font-size:10px;
  }
  #app.playing .touch-controls {
    align-self:end;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(40px,min(70px,17dvh)));
    gap:5px;
    width:100%;
  }
}
@media(orientation:landscape) and (max-width:1366px) {
  html[data-touch] #app.playing .game-area {
    --hud:side;
    grid-template-columns:minmax(0,1fr) clamp(230px,27vw,310px);
    grid-template-rows:auto auto auto minmax(0,1fr);
    grid-template-areas:'. top' '. score' '. status' '. touch';
  }
  html[data-touch] #app.playing .touch-controls {
    align-self:end;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(52px,min(84px,14dvh)));
    width:100%;
  }
}

/* Dialogs with room spread out instead of scrolling. */
@media(min-width:760px) and (min-height:480px) {
  .board-dialog[open] {
    display:grid;
    width:min(calc(100vw - 48px),820px);
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(0,1fr);
    column-gap:26px;
  }
  .board-dialog>.dialog-heading {
    grid-column:1/-1;
  }
  .board-dialog>:not(.dialog-heading,.profile-form) {
    grid-column:1;
  }
  .board-list {
    min-height:0;
    overflow:auto;
  }
  .profile-form {
    grid-column:2;
    grid-row:2/span 3;
    align-self:start;
    margin-top:0;
    padding-top:0;
    padding-left:24px;
    border-top:0;
    border-left:1px solid var(--line);
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}
/* After the base dock rules, so these colours win in light mode. */
@media(prefers-color-scheme:light) {
  #soloMode {
    --c:#a97400;
  }
  #duelMode {
    --c:#c9184a;
  }
  #looksButton {
    --c:#07806f;
  }
  #boardButton {
    --c:#b85c00;
  }
  #howButton {
    --c:#5b3fc4;
  }
}