/* Shared pixel furniture. Existing skin colors and material art remain intact. */
@font-face {
  font-family:'Fusion Pixel Domino';
  src:url('/fonts/fusion-pixel/fusion-pixel-12px-proportional-zh_hans.otf.woff2') format('woff2');
  font-style:normal; font-weight:400; font-display:swap;
}
body {
  --font-ui:'Fusion Pixel Domino','PingFang SC','Microsoft YaHei',sans-serif;
  --mono:'Fusion Pixel Domino','SFMono-Regular',Consolas,monospace;
  --pixel-cut:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px));
  font-family:var(--font-ui); font-synthesis:none;
}
/* The bundled pixel font lacks Thai and some Vietnamese glyphs. */
html:lang(th) body { --font-ui:'Leelawadee UI','Segoe UI',sans-serif; --mono:Consolas,monospace; }
html:lang(vi) body { --font-ui:'Segoe UI',Arial,sans-serif; --mono:Consolas,monospace; }
body,body *,body *::before,body *::after {
  font-family:var(--font-ui); font-weight:400 !important; font-synthesis:none;
  -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision;
}
body :is(code,pre,kbd) { font-family:var(--mono); }
body :is(button,input,select,dialog,.domino,.pip,.theme-option,.theme-option img,.subtle-badge) { border-radius:0; }
body :is(.workspace,.workspace::before,.table-frame,.score-panel,.proof-card,.seed-card) { border-radius:0; }
body .workspace { box-shadow:inset 0 0 0 2px var(--frame-dark),0 0 0 1px var(--frame-light),0 0 0 3px var(--frame-dark),4px 6px 0 3px #0005; }
body .table-frame { box-shadow:inset 0 0 0 2px var(--frame-dark),inset 0 0 0 4px var(--frame-light),inset 0 0 0 5px var(--frame-dark),3px 5px 0 #0004; }
body :is(.score-panel,.proof-card) { border-width:2px; box-shadow:inset 0 0 0 2px #00000012,3px 3px 0 var(--frame-dark); }
body :is(.primary-button,.secondary-button,.proof-button,.danger-button) { border-width:2px; box-shadow:inset 0 2px 0 #ffffff14,0 3px 0 var(--frame-dark); }
body .primary-button { background:var(--accent); }
body :is(.primary-button,.secondary-button,.proof-button,.danger-button):active:not(:disabled) { box-shadow:inset 0 2px 0 #ffffff14,0 1px 0 var(--frame-dark); }
body .domino { box-shadow:inset 0 0 0 1px var(--tile-line),0 3px 0 var(--tile-shade),0 5px 0 var(--tile-shadow); }
body .pip.on { border-radius:0; }
body dialog { box-shadow:inset 0 0 0 3px var(--frame-dark),inset 0 0 0 5px var(--frame),0 0 0 2px var(--frame-dark),6px 6px 0 #0007; }
body :is(.modal-title,.proof-card h2,.sp-title,.table-heading h1) { letter-spacing:.025em; }
body .brand-icon { transform:none; }

/* Compact navigation follows the Blackjack lobby. */
body .topbar {
  display:grid; grid-template-columns:max-content minmax(0,1fr) auto; align-items:center;
  width:100%; max-width:1140px; height:auto; min-height:84px; gap:18px;
  margin:20px auto 0; padding:14px 18px;
  border:2px solid var(--line); background:var(--panel); box-shadow:3px 3px 0 var(--frame-dark);
}
body .topbar .brand { grid-column:1; grid-row:1; gap:12px; }
body .topbar .brand b { font-size:24px; letter-spacing:2px; white-space:nowrap; }
body .topbar .topnav { grid-column:2; grid-row:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px; min-width:0; width:auto; margin:0; }
body .topbar .topnav .nav-button {
  display:inline-flex; justify-content:center; align-items:center; gap:7px; min-width:56px; min-height:44px;
  padding:9px 12px; border:1px solid var(--line-soft); color:var(--text); background:var(--panel-deep);
  box-shadow:0 2px 0 var(--frame-dark); font-size:14px; line-height:1.3; white-space:nowrap;
}
body .topbar .topnav .nav-button:is(:hover,:focus-visible) { border-color:var(--accent); background:var(--panel-raised); color:var(--heading); }
body .topbar .topnav .nav-button svg { flex:none; width:18px; height:18px; color:var(--gold); }
body .topbar .topnav .nav-icon { display:inline-grid; place-items:center; flex:none; width:18px; height:18px; color:var(--gold); font-size:18px; line-height:1; }
body :is(.topbar,.table-heading) #coin-hub {
  grid-column:3; grid-row:1; min-width:144px; display:flex; align-items:center; gap:8px; margin:0;
  padding:5px 12px; border:1px solid var(--accent); border-left-width:3px;
  background:var(--panel-raised); box-shadow:inset 0 0 0 2px #00000012;
}
body :is(.topbar,.table-heading) .coin-balance-button { gap:10px; flex:1; }
body :is(.topbar,.table-heading) .coin-balance-copy { gap:1px; }
body :is(.topbar,.table-heading) .coin-balance-copy>small { font-size:14px; }
body :is(.topbar,.table-heading) .coin-balance-line>b { font-size:24px; line-height:1.2; }
body :is(.topbar,.table-heading) .coin-balance-line>small { display:none; }
body :is(.topbar,.table-heading) .coin-emblem { width:23px; height:26px; border-width:2px; }
body :is(.topbar,.table-heading) .coin-emblem::after { font-size:14px; }
body :is(.topbar,.table-heading) .wallet-add { flex:none; min-width:40px; min-height:40px; padding:0; border:0; background:transparent; color:var(--gold); font-size:24px; box-shadow:none; }
body :is(.topbar,.table-heading) .wallet-add:is(:hover,:focus-visible) { background:var(--panel-deep); }
body .topbar #coin-shop-button { min-width:56px; min-height:44px; gap:7px; padding:9px 12px; font-size:14px; }

/* Three clear game cards, followed by one seed control. */
.home-view { width:100%; max-width:1140px; margin:0 auto; padding:32px 0 36px; }
.home-heading { display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:16px; margin-bottom:22px; }
.home-heading h1 { margin:0; padding-left:16px; border-left:5px solid var(--accent); font-size:36px; line-height:1.3; letter-spacing:.025em; }
.home-room-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.home-friend-button { display:flex; gap:20px; align-items:center; min-height:44px; padding:9px 14px; color:var(--text); background:var(--panel); border:1px solid var(--line); box-shadow:0 2px 0 var(--frame-dark); font-size:14px; }
.home-friend-button span { color:var(--gold); font:20px/1 var(--mono); }
.home-friend-button:is(:hover,:focus-visible) { border-color:var(--accent); background:var(--panel-raised); }
.home-friend-button:disabled { opacity:.6; }
.variant-grid { gap:20px; }
.variant-card { position:relative; border:2px solid var(--line); background:var(--panel); box-shadow:3px 4px 0 var(--frame-dark); transition:border-color 100ms,background-color 100ms; }
.variant-card:hover:not(:disabled) { transform:none; background:var(--panel-raised); border-color:var(--accent); }
.variant-card:active:not(:disabled) { transform:translateY(2px); }
.variant-card:focus-visible { outline-offset:4px; }
.variant-card-locked { cursor:default; border-color:var(--line-soft); }
.variant-card-locked .variant-art { filter:saturate(.72); }
.variant-card-locked .variant-card-start { color:var(--muted); background:var(--panel-deep); border-style:dashed; box-shadow:none; }
.variant-art { height:204px; background:var(--felt-pattern),var(--felt-base); border-bottom:4px solid var(--frame); box-shadow:inset 0 0 0 5px var(--frame-dark),inset 0 0 0 7px var(--frame-light); }
.variant-art::after { inset:16px; border:2px solid var(--felt-line); clip-path:var(--pixel-cut); }
.variant-art-mark { top:27px; right:26px; color:var(--felt-muted); font:18px/1 var(--mono); opacity:1; }
.variant-bones,.art-all-fives .variant-bones,.art-block .variant-bones { position:relative; gap:10px; transform:none; }
.variant-bones .domino { width:46px; height:auto; background:var(--tile-face); box-shadow:inset 0 0 0 1px var(--tile-line),0 4px 0 var(--tile-shade),4px 8px 0 var(--tile-shadow); }
.variant-bones .domino:nth-child(1) { transform:translateY(10px); }
.variant-bones .domino:nth-child(2) { transform:translateY(-12px); }
.variant-bones .domino:nth-child(3) { transform:translateY(4px); }
.art-all-fives .variant-bones .domino:nth-child(2) { transform:translateY(-20px); }
.art-block .variant-bones { gap:5px; }
.art-block .variant-bones .domino:nth-child(1),.art-block .variant-bones .domino:nth-child(3) { transform:translateY(7px); }
.art-block .variant-bones .domino:nth-child(2) { transform:translateY(7px); }
.variant-art-floor { position:absolute; left:27px; right:27px; bottom:29px; height:4px; border-block:1px solid var(--felt-line); }
.variant-card-copy { padding:21px; }
.variant-card-copy>strong { font-size:28px; line-height:1.35; letter-spacing:.025em; }
.variant-tag { margin:7px 0 0; font-size:14px; color:var(--muted); }
.variant-card-start { min-height:46px; padding:11px 14px; margin-top:23px; border:1px solid var(--line); background:var(--panel-raised); color:var(--heading); box-shadow:0 3px 0 var(--frame-dark); font-size:18px; }
.variant-card:first-child .variant-card-start { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
.variant-card-start>span { font:22px/1 var(--mono); }
.resume-game { margin-bottom:19px; padding:14px 18px; border:1px solid var(--line); box-shadow:0 3px 0 var(--frame-dark); }
.resume-game strong { font-size:18px; }
.resume-game small { font-size:14px; }
#home-seed-slot { margin-top:24px; }
.home-seed-control {
  width:100%; margin:0; padding:18px 20px;
  border:2px solid var(--line); background:var(--panel); box-shadow:3px 4px 0 var(--frame-dark);
}
.home-seed-control form { grid-template-columns:minmax(180px,1fr) minmax(0,2fr); gap:8px 24px; }
.home-seed-control label { font-size:18px; }
.home-seed-edit input { font-size:16px; }
.home-seed-status { font-size:14px; }
.home-seed-help { margin-top:4px; font-size:14px; }

/* Table controls share one row, with no empty lobby header above them. */
body[data-view='table'] .topbar { display:none; }
body .table-heading { min-height:50px; }
.table-heading-actions { display:flex; align-items:center; gap:12px; flex:none; }
body .table-heading #coin-hub { min-width:152px; padding:2px 6px 2px 10px; }
body .table-heading #leave-button { min-height:50px; }
body[data-view='table'] .sidebar { padding-top:70px; }

@media(max-width:850px) {
  body[data-view='table'] .sidebar { padding-top:0; }
}
@media(max-width:520px) {
  body .table-heading { gap:7px; align-items:center; }
  body .table-heading h1 { display:grid; gap:5px; flex:1; font-size:16px; }
  .table-heading .subtle-badge { width:fit-content; font-size:11px; padding:2px 5px; }
  .table-heading-actions { gap:6px; }
  body .table-heading #coin-hub { min-width:0; gap:0; padding:2px 3px 2px 8px; }
  body .table-heading .coin-emblem { display:none; }
  body .table-heading .coin-balance-line>b { font-size:20px; }
  body .table-heading .coin-balance-copy>small { font-size:12px; }
  body .table-heading #leave-button { min-width:76px; padding-inline:7px; font-size:13px; }
}

@media(max-width:1120px) {
  body .topbar { column-gap:14px; padding-inline:14px; }
  body .topbar .brand { gap:8px; }
  body .topbar .brand b { font-size:22px; }
  body .topbar .topnav .nav-button { padding-inline:8px; font-size:14px; }
  body .topbar #coin-shop-button { padding-inline:8px; }
  body .topbar #coin-hub { min-width:126px; padding-left:9px; }
}
@media(max-width:960px) {
  body .topbar { grid-template-columns:minmax(0,1fr) auto; gap:14px 20px; }
  body .topbar .topnav { grid-column:1/-1; grid-row:2; justify-self:end; width:auto; justify-content:flex-end; gap:8px; }
  body .topbar .topnav .nav-button { min-width:0; font-size:14px; }
  body .topbar #coin-hub { grid-column:2; grid-row:1; }
  .home-view { padding-top:26px; }
  .variant-grid { gap:14px; }
  .variant-art { height:170px; }
  .variant-card-copy { padding:17px; }
  .variant-card-copy>strong { font-size:24px; }
  .variant-bones .domino { width:40px; }
  .variant-art-mark { top:23px; right:22px; font-size:16px; }
}
@media(max-width:620px) {
  body .topbar .topnav { display:grid; width:100%; grid-template-columns:repeat(10,minmax(0,1fr)); }
  body .topbar .topnav .nav-button { grid-column:span 2; }
  body .topbar .topnav :is(#home-button,#quick-proof-button) { order:1; grid-column:span 5; flex-direction:row; min-height:40px; }
  .home-view { padding:24px 0 30px; }
  .home-heading { flex-direction:row; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
  .home-heading h1 { font-size:30px; padding-left:12px; border-left-width:4px; }
  .home-friend-button { gap:9px; padding:8px 10px; font-size:14px; }
  .variant-grid { grid-template-columns:1fr; gap:16px; }
  .variant-card { grid-template-columns:33% minmax(0,1fr); }
  .variant-art { height:100%; min-height:176px; border-right:3px solid var(--frame); border-bottom:0; }
  .variant-art::after { inset:11px; }
  .variant-art-mark { top:20px; right:17px; font-size:14px; }
  .variant-bones,.art-all-fives .variant-bones,.art-block .variant-bones { gap:6px; transform:none; }
  .variant-bones .domino { width:34px; }
  .variant-bones .domino:nth-child(3) { display:none; }
  .variant-bones .pip-half { padding:4px; }
  .variant-art-floor { left:20px; right:20px; bottom:24px; }
  .variant-card-copy { padding:17px; }
  .variant-card-copy>strong { font-size:24px; }
  .variant-tag { font-size:14px; margin-top:5px; }
  .variant-card-start { min-height:44px; margin-top:18px; padding:9px 11px; font-size:18px; }
  #home-seed-slot { margin-top:20px; }
  .home-seed-control { padding:16px; }
  .home-seed-control form { grid-template-columns:minmax(0,1fr); gap:9px; }
  .home-seed-status { grid-column:1; }
}
@media(max-width:470px) {
  body .app-shell { width:calc(100% - 24px); }
  body .topbar { margin-top:12px; padding:12px 10px; gap:13px 12px; }
  body .topbar .brand b { font-size:24px; }
  body .topbar .topnav { gap:5px; }
  body .topbar .topnav .nav-button { flex-direction:column; gap:5px; padding:7px 3px; min-height:53px; font-size:12px; }
  body .topbar .topnav .nav-button svg { width:16px; height:16px; }
  body .topbar #coin-shop-button { min-width:0; min-height:53px; padding:7px 3px; font-size:12px; }
  body .topbar #coin-hub { min-width:130px; padding:4px 7px 4px 10px; }
  body .topbar .coin-balance-line>b { font-size:24px; }
  .home-room-actions { width:100%; justify-content:space-between; }
  .home-room-actions .home-friend-button { flex:1; justify-content:space-between; }
  .variant-card-copy { padding:15px; }
  .variant-card-start { padding-inline:10px; }
  .resume-game { gap:10px; padding:12px; }
  .resume-game>span:last-child { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { .variant-card { transition:none; } }
/* Demo edition contains a free table only; the server also enforces this. */
body.demo-mode :is(#coin-shop-button,#coin-hub,#wallet-add,#wallet-button,#home-wallet-slot,#table-wallet-slot,#table-chip-slot),
#opponent-type { display:none !important; }