/* Towkay: liquid-glass themes from the design handoff.
   Coastal Daylight is html[data-theme="day"], Marina Night is html[data-theme="night"];
   theme.js sets the attribute. Glass panels sit over drifting colour blobs. */

:root {
  --font: Manrope, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: Syne, Manrope, ui-rounded, system-ui, sans-serif;
  /* Colour groups are the same in both themes. */
  --heartland: #F5B52A;
  --mature: #FF5E62;
  --east: #1FD1B7;
  --landed: #4FC36A;
  --core: #3E7BFF;
  --hawker: #FF9F43;
  --huat: #FF5E62;
  --gahmen: #8F5BFF;
  --tax: #8A93A0;
  --owner: transparent;
  --c: #8A93A0;
  font-family: var(--font);
}

html, html[data-theme="day"] {
  color-scheme: light;
  --bg: linear-gradient(160deg, #fff6ea 0%, #f3ece2 50%, #eadff1 100%);
  --bg-solid: #f3ece2;
  --ink: #17202a;
  --body: #2b3440;
  --muted: #5b6472;
  --faint: #7b8491;
  --line: rgba(23, 32, 42, 0.12);
  --accent: #0f766e;
  --danger: #c0392b;
  --glass: rgba(255, 255, 255, 0.52);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.3), 0 12px 30px rgba(60, 40, 90, 0.12);
  --tile: rgba(255, 255, 255, 0.55);
  --tile-border: rgba(255, 255, 255, 0.85);
  --tile-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 12px rgba(60, 40, 90, 0.1);
  --special-alpha: 15%;
  --field: rgba(255, 255, 255, 0.65);
  --field-border: rgba(255, 255, 255, 0.9);
  --field-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06);
  --chip: rgba(255, 255, 255, 0.75);
  --chip-border: rgba(255, 255, 255, 0.95);
  --chip-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  --action: linear-gradient(135deg, #ff9f43, #ff5e62);
  --action-shadow: 0 6px 16px rgba(255, 94, 98, 0.35);
  --start: linear-gradient(135deg, #ff9f43, #ff5e62 50%, #c04bff);
  --start-shadow: 0 10px 26px rgba(255, 94, 98, 0.4);
  --corner: linear-gradient(145deg, #17202a, #2d3a4d);
  --mrt-bg: rgba(23, 32, 42, 0.9);
  --wallet: linear-gradient(145deg, #17202a, #2d3a4d);
  --title: linear-gradient(90deg, #ff5e62, #ff9f43, #2a6fdb, #8f5bff, #ff5e62);
  --highlight: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%);
  --highlight-pos: -40px -40px auto auto;
  --rule-1: #e5533c;
  --rule-2: #3e5fa8;
  --rule-3: #5a9a4b;
  --rule-4: #8e24aa;
  --rule-5: #1fa596;
  --blob-1: radial-gradient(circle at 40% 40%, #ffb347, #ff5e62 70%);
  --blob-2: radial-gradient(circle, #2ad4c4, #2a6fdb 75%);
  --blob-3: radial-gradient(circle, #ff7ad9, #8f5bff 75%);
  --blob-4: radial-gradient(circle, #ffe66d, #ffb347 80%);
  --blob-o1: 0.75;
  --blob-o2: 0.65;
  --blob-o3: 0.55;
  --blob-o4: 0.7;
  --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16' fill='none' stroke='%2317202a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6l4-4 4 4M2 10l4 4 4-4'/%3E%3C/svg%3E");
}

html[data-theme="night"] {
  color-scheme: dark;
  --bg: linear-gradient(170deg, #0d1330 0%, #121a3d 45%, #1c1040 100%);
  --bg-solid: #121a3d;
  --ink: #ffffff;
  --body: #d7dcf0;
  --muted: #aab3d6;
  --faint: #aab3d6;
  --line: rgba(255, 255, 255, 0.14);
  --accent: #5ff2dd;
  --danger: #ff6a7a;
  --glass: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.22);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 12px 30px rgba(0, 0, 0, 0.35);
  --tile: rgba(255, 255, 255, 0.1);
  --tile-border: rgba(255, 255, 255, 0.22);
  --tile-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3);
  --special-alpha: 20%;
  --field: rgba(255, 255, 255, 0.1);
  --field-border: rgba(255, 255, 255, 0.25);
  --field-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);
  --chip: rgba(255, 255, 255, 0.14);
  --chip-border: rgba(255, 255, 255, 0.3);
  --chip-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  --action: linear-gradient(135deg, #00f0d1, #0066ff);
  --action-shadow: 0 6px 18px rgba(0, 180, 255, 0.45);
  --start: linear-gradient(135deg, #00f0d1, #3e7bff 50%, #b14bff);
  --start-shadow: 0 10px 26px rgba(0, 180, 255, 0.45);
  --corner: linear-gradient(145deg, #ff3d81, #b14bff);
  --mrt-bg: rgba(10, 14, 35, 0.75);
  --wallet: linear-gradient(145deg, rgba(255, 61, 129, 0.38), rgba(177, 75, 255, 0.38));
  --title: linear-gradient(90deg, #ff3d81, #ffb347, #00f0d1, #b14bff, #ff3d81);
  --highlight: radial-gradient(circle, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 70%);
  --highlight-pos: -50px auto auto -30px;
  --rule-1: #ff6a7a;
  --rule-2: #7fa4ff;
  --rule-3: #8fe07a;
  --rule-4: #d48bff;
  --rule-5: #5ff2dd;
  --blob-1: radial-gradient(circle at 40% 40%, #ff3d81, #ff6a00 75%);
  --blob-2: radial-gradient(circle, #00f0d1, #0066ff 75%);
  --blob-3: radial-gradient(circle, #b14bff, #3d2bff 75%);
  --blob-4: radial-gradient(circle, #ffe14d, #ff9d00 80%);
  --blob-o1: 0.7;
  --blob-o2: 0.6;
  --blob-o3: 0.6;
  --blob-o4: 0.55;
  --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6l4-4 4 4M2 10l4 4 4-4'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { background: var(--bg-solid); color: var(--ink); }
html, body { margin: 0; min-height: 100%; }
body { font-size: 15px; line-height: 1.4; color: var(--ink); -webkit-text-size-adjust: 100%; }
h2, h3, h4, p, dl, dd, ol, ul { margin: 0; padding: 0; }
button, input, select { font: inherit; color: inherit; }

.d-heartland { --d: var(--heartland); }
.d-mature { --d: var(--mature); }
.d-east { --d: var(--east); }
.d-landed { --d: var(--landed); }
.d-core { --d: var(--core); }
.d-mrt { --d: var(--ink); }
.d-hawker, .t-hawker { --d: var(--hawker); }
.t-tax { --d: var(--tax); }
.k-huat { --d: var(--huat); }
.k-gahmen { --d: var(--gahmen); }

/* ---------- background: gradient and drifting blobs ---------- */

@keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(18px, -24px) scale(1.12); } }
@keyframes drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-22px, 18px) scale(0.92); } }
@keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

.blobs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); }
.blobs i { position: absolute; border-radius: 50%; will-change: transform; }
.blobs i:nth-child(1) { width: max(260px, 28vmax); aspect-ratio: 1; left: -80px; top: -60px; background: var(--blob-1); filter: blur(42px); opacity: var(--blob-o1); animation: drift 14s ease-in-out infinite; }
.blobs i:nth-child(2) { width: max(240px, 26vmax); aspect-ratio: 1; right: -90px; top: 120px; background: var(--blob-2); filter: blur(46px); opacity: var(--blob-o2); animation: drift2 17s ease-in-out infinite; }
.blobs i:nth-child(3) { width: max(280px, 30vmax); aspect-ratio: 1; left: 40px; bottom: -40px; background: var(--blob-3); filter: blur(50px); opacity: var(--blob-o3); animation: drift 20s ease-in-out infinite; }
.blobs i:nth-child(4) { width: max(160px, 18vmax); aspect-ratio: 1; right: 30px; bottom: 240px; background: var(--blob-4); filter: blur(36px); opacity: var(--blob-o4); animation: drift2 12s ease-in-out infinite; }
.app, .phone { position: relative; z-index: 1; }

/* ---------- shared controls ---------- */

.glass { background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); }

button { cursor: pointer; border: 0; background: none; border-radius: 16px; padding: 10px 14px; font-weight: 800; touch-action: manipulation; transition: background 0.3s, box-shadow 0.3s, opacity 0.3s, transform 0.1s; }
button:disabled { cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
.primary { background: var(--start); color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: var(--start-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.5); min-height: 48px; }
.primary:disabled { background: rgba(128, 136, 150, 0.45); box-shadow: none; opacity: 0.7; }
.primary:not(:disabled):active, .action:active { transform: scale(0.98); }
.action { background: var(--action); color: #fff; border: 1px solid var(--field-border); box-shadow: var(--action-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.5); height: 48px; padding: 0 20px; }
.ghost { background: var(--field); border: 1px solid var(--field-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); min-height: 44px; font-weight: 700; }
.ghost:disabled { opacity: 0.45; }
.wide { display: block; width: 100%; margin-top: 8px; }
.small { padding: 6px 12px; font-size: 13px; border-radius: 12px; min-height: 0; }
.huge { min-height: 64px; font-size: 22px; border-radius: 18px; margin-top: 0; }
.danger { color: var(--danger); }
.armed { background: var(--danger); color: #fff; border-color: var(--danger); }
input[type="text"], input[type="number"] { height: 48px; min-width: 0; padding: 0 16px; border-radius: 16px; border: 1px solid var(--field-border); background: var(--field); box-shadow: var(--field-shadow); font-weight: 600; font-size: 16px; color: var(--ink); }
input::placeholder { color: color-mix(in srgb, var(--ink) 40%, transparent); }
select { -webkit-appearance: none; appearance: none; height: 44px; min-width: 0; padding: 0 38px 0 16px; border-radius: 14px; border: 1px solid var(--field-border); background: var(--caret) right 14px center / 10px 14px no-repeat, var(--field); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0, 0, 0, 0.06); font-weight: 700; color: var(--ink); }
.row { display: flex; gap: 8px; align-items: center; }
.row > button { flex: 1; }
.fine { font-size: 13px; color: var(--muted); margin-top: 6px; }
.pad { padding: 4px 2px; }

.tok { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; color: #fff; font-weight: 800; font-size: 0.8em; flex: none; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.53), var(--c) 60%); box-shadow: 0 0 10px var(--c); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.tok.big { font-size: 1em; }

.mark { display: flex; align-items: baseline; gap: 0.5em; }
.mark span { font-family: var(--display); font-weight: 800; letter-spacing: 0.12em; line-height: 1; background: var(--title); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
.mark small { font-weight: 700; color: var(--accent); letter-spacing: 0.32em; text-transform: uppercase; font-size: 0.34em; }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: #17202a; color: #fff; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 10; max-width: 90vw; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- cards in the player panel ---------- */

.card { background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); border-radius: 24px; padding: 16px; margin-top: 12px; color: var(--body); }
.card h3 { font-size: 20px; font-weight: 800; margin-top: 4px; color: var(--ink); }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.card dl { margin-top: 10px; }
.card dl > div, .deed dl > div { display: flex; justify-content: space-between; padding: 4px 0; font-variant-numeric: tabular-nums; }
.card dt, .deed dt { color: var(--muted); }
.card dd, .deed dd { color: var(--ink); font-weight: 600; }
.card .total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; font-weight: 800; }
.card .total dt, .card .total dd { color: var(--ink); font-weight: 800; }
.card .row { margin-top: 12px; }
.amount { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--ink); }
.payliao { text-align: center; border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, var(--glass)); }
.payliao .eyebrow { color: var(--accent); }
.payee { display: flex; gap: 8px; justify-content: center; align-items: center; font-weight: 700; color: var(--ink); }
.debt { text-align: center; border-color: color-mix(in srgb, var(--danger) 60%, transparent); }
.debt .amount { color: var(--danger); }
.draw { border-top: 6px solid var(--d); }
.draw .eyebrow { color: var(--ink); }
.draw p { margin-top: 6px; }
.rollcard { padding: 10px; }
.waiting { text-align: center; }
.waiting .fine { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { min-height: 34px; padding: 6px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--d) var(--special-alpha), var(--chip)); border: 1px solid color-mix(in srgb, var(--d) 53%, transparent); }
.enbloc .meter { position: relative; height: 10px; border-radius: 5px; background: var(--line); margin-top: 10px; overflow: hidden; }
.enbloc .meter i { position: absolute; inset: 0 auto 0 0; background: var(--action); }
.enbloc .meter span { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); }

.wallet { background: var(--wallet); color: #fff; border-radius: 24px; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.35); border-bottom: 5px solid var(--owner); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 26px rgba(0, 0, 0, 0.25); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }
.wallet small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }
.wallet .who { display: flex; gap: 10px; align-items: center; }
.wallet .who b { font-weight: 800; }
.wallet .cash { font-size: 34px; font-weight: 800; margin-top: 10px; font-variant-numeric: tabular-nums; }
.wallet .cash.neg { color: #ff9c8a; }
.wallet .sub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wallet .payline { grid-column: 1 / -1; margin-top: 10px; font-size: 12px; line-height: 1.35; opacity: 0.8; }

.section { margin: 18px 4px 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.prop { background: var(--chip); border: 1px solid var(--chip-border); box-shadow: var(--chip-shadow); border-radius: 17px; margin-top: 6px; overflow: hidden; color: var(--body); }
.prophead { display: flex; width: 100%; align-items: center; gap: 10px; text-align: left; border-radius: 0; padding: 12px; color: var(--ink); }
.dot { width: 12px; height: 12px; border-radius: 4px; background: var(--d); box-shadow: 0 0 6px var(--d); flex: none; }
.pname { flex: 1; font-weight: 800; }
.pname small, .prent small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.prent { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.propbody { padding: 0 12px 12px; border-top: 1px solid var(--line); }
.propbody .fine { margin-top: 4px; }
.offerform { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; margin-top: 10px; }
.offerform select, .offerform input { height: 44px; padding-left: 12px; font-size: 15px; }

.standings { list-style: none; margin-top: 12px; color: var(--ink); }
.standings li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.standings b { margin-left: auto; font-variant-numeric: tabular-nums; }
.standings li:first-child { font-size: 1.15em; font-weight: 800; }

/* ---------- setup panel ---------- */

.setup { border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.setup h2, .side .setup h2 { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.joinform { display: flex; gap: 8px; }
.joinform input { flex: 1; }
#lobby-dyn { display: flex; flex-direction: column; gap: 12px; }
.pchips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 34px; }
.pchips .empty { font-size: 13px; font-weight: 500; line-height: 34px; color: var(--faint); }
.pchip { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 6px; border-radius: 17px; background: var(--chip); border: 1px solid var(--chip-border); box-shadow: var(--chip-shadow); font-size: 13px; font-weight: 700; color: var(--ink); }
.pchip .tok { width: 22px; height: 22px; font-size: 11px; }
.pchip .x { padding: 0 6px; min-height: 0; height: 28px; border-radius: 14px; font-size: 16px; font-weight: 700; line-height: 1; color: var(--faint); background: none; border: 0; box-shadow: none; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setrow label { font-size: 16px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.setrow select { font-size: 15px; max-width: 64%; text-overflow: ellipsis; }
.start { display: block; width: 100%; min-height: 54px; border-radius: 18px; font-size: 17px; }
.joinbox { display: flex; gap: 12px; align-items: center; background: var(--field); border: 1px solid var(--field-border); border-radius: 16px; padding: 12px; }
.qr { width: 112px; height: 112px; flex: none; background: #fff; border-radius: 10px; display: grid; place-items: center; overflow: hidden; }
.qr svg { width: 100%; height: 100%; }
.joinurl { font-weight: 800; word-break: break-all; color: var(--ink); }
.joincode { font-family: var(--display); font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: 0.14em; color: var(--ink); }
.roomcode { text-align: center; margin: 0 0 8px; }
.roomcode b { color: var(--ink); letter-spacing: 0.14em; }
.home .fine { margin: 0; }
.phonejoin { flex-wrap: wrap; }
.phonejoin [name="code"] { flex: 0 0 132px; text-transform: uppercase; letter-spacing: 0.14em; }
form[data-code] [name="code"] { text-transform: uppercase; letter-spacing: 0.14em; }
.themebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 0 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.themebar select { height: 38px; font-size: 13px; }

/* ---------- phone (wallet page in couch play) ---------- */

body[data-mode="play"] .phone { max-width: 460px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)); }
.phone > .mark { font-size: 26px; margin: 4px 2px 16px; }
body[data-joined="yes"] .join { display: none; }
body[data-mode="play"]:not([data-phase="lobby"]) .join .joinform { display: none; }

/* ---------- board screen ---------- */

body[data-mode="board"] .app { display: grid; grid-template-columns: minmax(0, 1fr) 372px; height: 100vh; }
.stage { display: grid; place-items: center; padding: 16px; min-width: 0; }
.side { overflow-y: auto; padding: 16px 16px 24px 4px; }
.side h2 { font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 16px 4px 8px; }
body:not([data-phase="lobby"]) .lobby, body:not([data-phase="home"]) .home { display: none; }
body[data-phase="lobby"] .players-section, body[data-phase="home"] .players-section, body:not([data-phase]) .players-section { display: none; }
/* Only the host's device sets the game up; other screens showing the board just watch. */
body[data-host="no"] .lobby .joinform, body[data-host="no"] .lobby h2 + .joinform, body[data-host="no"] #lobby-dyn .setrow, body[data-host="no"] #lobby-dyn .start, body[data-host="no"] .pchip .x { display: none; }

.prow { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; margin-top: 6px; border-radius: 17px; background: var(--chip); border: 1px solid var(--chip-border); box-shadow: var(--chip-shadow); color: var(--ink); }
.prow.turn { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent), var(--chip-shadow); }
.prow.out { opacity: 0.45; }
.pwho { flex: 1; min-width: 0; font-weight: 800; }
.pwho small, .pmoney small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.pmoney { text-align: right; font-variant-numeric: tabular-nums; }
.foot { margin-top: 18px; }

.board { width: min(calc(100vh - 32px), calc(100vw - 404px)); aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); gap: 0.6cqw; container-type: inline-size; }

.tile { position: relative; display: flex; flex-direction: column; padding: 0; text-align: left; overflow: hidden; min-height: 0; border-radius: clamp(8px, 1.6cqw, 14px); background: var(--tile); border: 1px solid var(--tile-border); box-shadow: var(--tile-shadow); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); color: var(--ink); font-weight: 500; }
.tile.owned { border-color: var(--owner); box-shadow: inset 0 0 0 0.35cqw var(--owner), 0 0 1.6cqw color-mix(in srgb, var(--owner) 55%, transparent); }
.tile.here { outline: 0.35cqw solid var(--ink); outline-offset: 0.1cqw; z-index: 1; }
.tile.inspected { outline: 0.35cqw dashed var(--accent); outline-offset: 0.1cqw; z-index: 1; }
.tile .band { height: 1.1cqw; flex: none; background: linear-gradient(90deg, var(--d), color-mix(in srgb, var(--d) 80%, transparent)); box-shadow: 0 2px 8px color-mix(in srgb, var(--d) 53%, transparent); }
.tbody { padding: 0.8cqw 0.9cqw 0; flex: 1; min-height: 0; }
.tname { font-size: 1.5cqw; font-weight: 800; line-height: 1.15; letter-spacing: 0.02em; }
.tmeta { font-size: 1.3cqw; color: var(--muted); margin-top: 0.2cqw; font-variant-numeric: tabular-nums; }
.dev { display: flex; align-items: center; gap: 0.35cqw; margin-top: 0.5cqw; }
.lease { margin-left: 0.3cqw; font-size: 1.15cqw; font-weight: 700; color: var(--muted); }
.dev i { width: 1.1cqw; height: 1.1cqw; border-radius: 0.3cqw; border: 0.15cqw solid var(--d); }
.dev i.on { background: var(--d); box-shadow: 0 0 6px var(--d); }
.units { font-size: 1.2cqw; font-weight: 800; color: var(--ink); margin-top: 0.4cqw; }
.toks { position: absolute; right: 0.7cqw; bottom: 0.7cqw; max-width: 60%; display: flex; gap: 0.3cqw; flex-wrap: wrap-reverse; justify-content: flex-end; font-size: 1.3cqw; }
.t-mrt { background: var(--mrt-bg); color: #fff; border-color: var(--mline); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 14px color-mix(in srgb, var(--mline) 40%, transparent); }
.t-mrt .tmeta { color: rgba(255, 255, 255, 0.7); }
.t-mrt .line { position: absolute; left: 0; right: 0; top: 0; height: 0.9cqw; background: var(--mline); }
.t-mrt .tbody { padding-top: 1.6cqw; }
.t-card, .t-hawker, .t-tax { background: color-mix(in srgb, var(--d) var(--special-alpha), transparent); border-color: color-mix(in srgb, var(--d) 53%, transparent); }
.corner { background: var(--corner); color: #fff; border-color: rgba(255, 255, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 14px rgba(0, 0, 0, 0.25); }
.corner .tname { font-size: 1.8cqw; letter-spacing: 0.04em; }
.corner .tmeta { color: rgba(255, 255, 255, 0.75); }

.center { position: relative; grid-row: 2 / 8; grid-column: 2 / 8; border-radius: clamp(18px, 3cqw, 28px); padding: 2.4cqw; display: flex; flex-direction: column; gap: 1.6cqw; font-size: 1.55cqw; min-height: 0; overflow: hidden; color: var(--body); background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); }
.center::before { content: ""; position: absolute; inset: var(--highlight-pos); width: 22cqw; height: 22cqw; border-radius: 50%; background: var(--highlight); pointer-events: none; }
.center > * { position: relative; }
.center .mark { font-size: 3.2cqw; }
.center .top { display: flex; justify-content: space-between; align-items: center; }
.clock { text-align: right; font-weight: 800; color: var(--ink); white-space: nowrap; }
.clock small { display: block; color: var(--muted); font-weight: 600; }
.now { display: flex; align-items: center; gap: 1.4cqw; background: var(--field); border: 1px solid var(--field-border); box-shadow: var(--field-shadow); border-radius: 1.6cqw; padding: 1.4cqw 1.8cqw; }
.now .tok { font-size: 2cqw; }
.status { flex: 1; font-size: 2cqw; font-weight: 800; line-height: 1.2; color: var(--ink); }
.dice { display: flex; gap: 0.8cqw; }
.die { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35cqw; width: 4.6cqw; height: 4.6cqw; padding: 0.6cqw; background: var(--corner); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 10px rgba(0, 0, 0, 0.25); border-radius: 1cqw; }
.die i { border-radius: 50%; }
.die .pip { background: #fff; }
.event { border-radius: 1.6cqw; padding: 1.4cqw 1.8cqw; background: color-mix(in srgb, var(--d, var(--accent)) 28%, var(--field)); border: 1px solid color-mix(in srgb, var(--d, var(--accent)) 60%, transparent); color: var(--ink); display: flex; gap: 1.4cqw; align-items: baseline; }
.event b { font-size: 2cqw; font-weight: 800; white-space: nowrap; }
.cols { display: grid; grid-template-columns: 5fr 7fr; gap: 1.6cqw; flex: 1; min-height: 0; }
.center h4 { font-size: 1.15cqw; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.8cqw; }
.plan > div { display: flex; align-items: center; gap: 0.8cqw; padding: 0.45cqw 0; color: var(--ink); font-weight: 600; }
.plan b { margin-left: auto; font-variant-numeric: tabular-nums; }
.plan .dot { width: 1.2cqw; height: 1.2cqw; border-radius: 0.3cqw; }
.plan .absd { display: block; color: var(--muted); font-size: 1.3cqw; font-weight: 500; border-top: 1px solid var(--line); margin-top: 0.6cqw; padding-top: 0.9cqw; }
.log { overflow: hidden; min-height: 0; }
.log p { font-size: 1.4cqw; padding: 0.4cqw 0; border-top: 1px solid var(--line); color: var(--muted); }
.log p:first-of-type { color: var(--ink); font-weight: 700; border-top: 0; }
.deed { background: var(--field); border: 1px solid var(--field-border); box-shadow: var(--field-shadow); border-radius: 1.6cqw; padding: 1.6cqw; overflow: hidden; align-self: start; }
.deed .band { height: 1cqw; background: var(--d); border-radius: 0.5cqw; margin-bottom: 1cqw; box-shadow: 0 2px 8px color-mix(in srgb, var(--d) 53%, transparent); }
.deed h3 { font-size: 2cqw; font-weight: 800; color: var(--ink); }
.deed p { margin-top: 0.8cqw; color: var(--muted); }
.deed dl { margin: 0.8cqw 0 1.2cqw; }
.deed dl > div { padding: 0.3cqw 0; }
.deed .small { font-size: 1.3cqw; padding: 0.6cqw 1.2cqw; margin-top: 1cqw; }
.lobby-center { margin: auto; max-width: 56cqw; display: flex; flex-direction: column; gap: 1.2cqw; }
.lobby-center .mark { font-size: 6cqw; flex-direction: column; gap: 1.2cqw; align-items: flex-start; }
.lobby-center .mark small { font-size: 0.3em; }
.tagline { font-size: 2.2cqw; font-weight: 800; line-height: 1.3; color: var(--ink); }
.howto { list-style: none; display: flex; flex-direction: column; gap: 0.9cqw; margin-top: 0.6cqw; font-size: 1.6cqw; line-height: 1.35; font-weight: 500; color: var(--body); }
.howto li:nth-child(1) b { color: var(--rule-1); }
.howto li:nth-child(2) b { color: var(--rule-2); }
.howto li:nth-child(3) b { color: var(--rule-3); }
.howto li:nth-child(4) b { color: var(--rule-4); }
.howto li:nth-child(5) b { color: var(--rule-5); }
.lobby-center .standings { font-size: 1.8cqw; }

/* ---------- stacked layouts: phones and iPad portrait ---------- */

.short { display: none; }

@media (max-width: 900px) {
  body[data-mode="board"] .app { display: block; height: auto; }
  .board { width: calc(100vw - 32px); }
  .stage { padding: 16px 16px 0; }
  /* The current player's controls sit directly under the board. */
  .side { display: flex; flex-direction: column; padding: 18px 16px 28px; overflow: visible; }
  .side .panel { order: -1; }
  .side .lobby { order: -2; }
}

@media (max-width: 700px) {
  .full { display: none; }
  .short { display: inline; }
  .board { gap: 4px; }
  .tile { border-radius: 11px; }
  .tile.owned { box-shadow: inset 0 0 0 2px var(--owner), 0 0 10px color-mix(in srgb, var(--owner) 55%, transparent); }
  .tile .band { height: 6px; }
  .tbody { padding: 5px 4px 0; }
  .tname { font-size: 2.4cqw; line-height: 1; }
  .corner { justify-content: center; }
  .corner .tbody { flex: none; padding: 0 2px; text-align: center; }
  .corner .tname { font-size: 2.1cqw; }
  .t-card .tname, .t-hawker .tname, .t-tax .tname { font-size: 2.25cqw; }
  .tmeta, .lease, .units { display: none; }
  .dev { gap: 2px; margin-top: 4px; flex-wrap: wrap; }
  .dev i { width: 6px; height: 6px; border-radius: 2px; border-width: 1px; }
  .toks { font-size: 2.2cqw; right: 3px; bottom: 3px; max-width: 100%; }
  .t-mrt .line { height: 5px; }
  .t-mrt .tbody { padding-top: 9px; }
  .center { padding: 4.4cqw 3.9cqw; gap: 2cqw; font-size: 2.9cqw; border-radius: 22px; }
  .center::before { width: 38cqw; height: 38cqw; }
  .center .top .mark { font-size: 4cqw; }
  .clock { font-size: 2.7cqw; }
  .now { padding: 2cqw 2.4cqw; gap: 2cqw; border-radius: 14px; }
  .now .tok { font-size: 3.2cqw; }
  .status { font-size: 3.3cqw; }
  .die { width: 7.5cqw; height: 7.5cqw; padding: 1cqw; gap: 0.5cqw; border-radius: 1.6cqw; }
  .event { padding: 2cqw 2.4cqw; flex-direction: column; gap: 0.6cqw; border-radius: 14px; font-size: 2.7cqw; }
  .event b { font-size: 3.2cqw; }
  .cols { display: block; }
  .plan, .center h4 { display: none; }
  .log p { font-size: 2.7cqw; padding: 0.8cqw 0; }
  .center:has(.deed) .now, .center:has(.deed) .event { display: none; }
  .deed { padding: 2.4cqw; border-radius: 14px; font-size: 2.8cqw; }
  .deed .band { height: 1.6cqw; }
  .deed h3 { font-size: 3.4cqw; }
  .deed .small { font-size: 2.6cqw; padding: 1cqw 2cqw; }
  .lobby-center { max-width: none; gap: 2.2cqw; margin: auto 0; }
  .lobby-center .mark { font-size: 8.3cqw; gap: 2.2cqw; }
  .lobby-center .mark small { font-size: 0.335em; }
  .tagline { font-size: 3.3cqw; }
  .howto { font-size: 2.5cqw; gap: 1.4cqw; margin-top: 1cqw; }
  .lobby-center .standings { font-size: 3.2cqw; }
  .wallet { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 12px 16px; border-radius: 22px; }
  .wallet .cash { margin-top: 0; font-size: 26px; text-align: right; }
  .wallet .sub { grid-column: 1 / -1; margin-top: 6px; font-size: 14px; }
  .card { padding: 14px; margin-top: 10px; }
  .card h3 { font-size: 18px; }
  .huge { min-height: 58px; font-size: 20px; }
  .amount { font-size: 34px; }
  /* Keep the Buy and Pay buttons on screen: tighter cards, and no payslip line while a decision is open. */
  .panel:has(.card.buy) .payline, .panel:has(.payliao) .payline { display: none; }
  .card dl { margin-top: 6px; }
  .card dl > div { padding: 2px 0; }
  .card .fine { margin-top: 4px; }
  .card .row { margin-top: 10px; }
}

/* ---------- standalone app (iOS): one device, no server ---------- */

body[data-standalone] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
body[data-standalone] .app { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
body[data-standalone] input, body[data-standalone] select { -webkit-user-select: text; user-select: text; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .blobs i, .mark span { animation: none; }
}