/* Casino's Stripe Worlds: frosted-glass HUD over a golden-hour 3D market, after Casino's concept art.
   Navy ink on frosted panels, violet-to-pink glow for Node and primary actions, marigold for doors and focus. */
:root {
  --ink: #1E2448;
  --ink-soft: #545C80;
  --paper: rgba(247, 246, 252, 0.86);
  --paper-solid: #F7F6FC;
  --glass-dark: rgba(24, 24, 48, 0.62);
  --line: rgba(30, 36, 72, 0.14);
  --pave: #CFC3AE;
  --lawn: #5F9140;
  --violet: #8B5CF6;
  --pink: #F472B6;
  --cyan: #67E8F9;
  --mint: #8B5CF6; /* legacy token name: Node's colour is now violet */
  --mint-deep: #6D3BE8;
  --marigold: #FFB547;
  --bezel: rgba(24, 24, 48, 0.72);
  --danger: #C0262D;
  --glow: linear-gradient(90deg, #67E8F9, #8B5CF6 45%, #F472B6);
  --display: "Avenir Next", Futura, "Futura PT", "Trebuchet MS", sans-serif;
  --body: "Avenir Next", "Segoe UI", "Gill Sans", "Trebuchet MS", sans-serif;
  --tablet-w: 400px;
  --blur: blur(14px) saturate(1.3);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: #2A2745; color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.45; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app { position: fixed; inset: 0; }
.town { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: pointer; }
.town:focus-visible { outline: 4px solid var(--marigold); outline-offset: -6px; }

button, input, select, textarea { font: inherit; color: inherit; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(30,36,72,.55); }

/* Shown until the first 3D frame is drawn. */
.loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: radial-gradient(circle at 50% 40%, #3B3470, #1A1830 70%); color: #fff; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; z-index: 3; transition: opacity .6s ease; }
.loading.done { opacity: 0; pointer-events: none; }
.orb-dot.big { width: 64px; height: 64px; box-shadow: 0 0 40px rgba(139,92,246,.9); }

/* Floating labels over the 3D scene (Node's name tag and its speech bubble). */
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.orb-tag, .orb-bubble { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; }
.orb-tag { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #fff; background: rgba(30,28,60,.7); border: 1px solid rgba(196,181,253,.6); border-radius: 999px; padding: 2px 9px; }
.orb-bubble { font-size: 14px; font-weight: 700; color: var(--ink); background: var(--paper-solid); border-radius: 14px; padding: 6px 12px; box-shadow: 0 0 0 2px rgba(139,92,246,.6), 0 8px 24px rgba(20,16,50,.35); }

/* Town sign */
/* C5: sign and controls share one flow container, so the controls wrap below the sign instead of over it. */
.hud-top { position: absolute; top: 14px; left: 14px; right: calc(var(--tablet-w) + 26px); display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 12px; pointer-events: none; }
.app.tablet-closed .hud-top { right: 14px; }
.hud-top > * { pointer-events: auto; }
.townsign { flex: 0 1 340px; min-width: 0; max-width: 340px; background: var(--glass-dark); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 18px; padding: 11px 16px 10px; box-shadow: 0 10px 30px rgba(10,8,30,.3); }
.townsign h1 { font-family: var(--display); font-weight: 800; font-size: 27px; line-height: 1; margin: 0 0 2px; letter-spacing: .02em; text-transform: uppercase; background: linear-gradient(180deg, #FFFFFF, #E6DDFB); -webkit-background-clip: text; background-clip: text; color: transparent; }
.strap { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: #E9E4FF; }
.progress { margin: 0; font-weight: 700; font-size: 14.5px; color: #FFFFFF; }
.boundary { margin: 6px 0 0; font-size: 12px; color: #CFCAE8; line-height: 1.35; }

/* Top controls */
.topbar { flex: 1 1 260px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; min-width: 0; }
.chip-btn { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: var(--glass-dark); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); color: #fff; font-weight: 700; font-size: 13.5px; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; text-decoration: none; box-shadow: 0 6px 18px rgba(10,8,30,.25); }
.chip-btn:hover { border-color: rgba(196,181,253,.9); }
.chip-btn:active { transform: translateY(1px); }
.chip-btn[aria-pressed="true"] { background: linear-gradient(90deg, rgba(139,92,246,.85), rgba(244,114,182,.85)); border-color: transparent; }
#btn-help { width: 38px; justify-content: center; padding: 0; font-family: var(--display); font-size: 17px; }

/* Casino-style cards: Stripe Market badge and Node's live shopping card. */
.hud-cards { flex: 1 1 100%; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none !important; margin-top: -4px; }
.glass-card { background: var(--paper); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid rgba(255,255,255,.7); border-radius: 14px; padding: 10px 14px; box-shadow: 0 12px 30px rgba(14,10,40,.28); min-width: 220px; max-width: 280px; }
.card-kicker { margin: 0; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.card-line { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-soft); display: flex; gap: 6px; align-items: center; }
.card-line.strong { color: var(--ink); font-weight: 600; }
.orb-dot { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #1E1A30 0 22%, var(--violet) 24% 44%, #F4F3F8 46%); box-shadow: 0 0 8px rgba(139,92,246,.8); flex: none; }
.meter { margin-top: 8px; height: 6px; border-radius: 3px; background: rgba(30,36,72,.15); overflow: hidden; }
.meter span { display: block; height: 100%; width: 10%; background: var(--glow); border-radius: 3px; transition: width .5s ease; }
.keyhints { position: absolute; left: 50%; transform: translateX(calc(-50% - var(--tablet-w) / 2)); bottom: 18px; display: flex; gap: 10px; pointer-events: none; }
.app.tablet-closed .keyhints { transform: translateX(-50%); }
.keyhints span { display: inline-flex; align-items: center; gap: 7px; background: rgba(24,24,48,.62); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 5px 11px 5px 5px; border-radius: 8px; border: 1px solid rgba(196,181,253,.45); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
kbd { display: inline-block; min-width: 22px; text-align: center; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 5px; padding: 1px 5px; font-family: var(--display); font-weight: 700; font-size: 12px; }

.prompt { position: absolute; left: calc((100vw - var(--tablet-w)) / 2); bottom: 64px; transform: translateX(-50%); background: rgba(24,24,48,.78); color: #fff; padding: 9px 18px 9px 9px; border-radius: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; white-space: nowrap; border: 1px solid transparent; background-image: linear-gradient(rgba(30,28,58,.9), rgba(30,28,58,.9)), var(--glow); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 0 22px rgba(139,92,246,.45); }
.app.tablet-closed .prompt { left: 50%; }
.prompt kbd { margin-right: 8px; font-size: 14px; min-width: 26px; }

.toasts { position: absolute; left: 14px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 28px)); pointer-events: none; }
.toast { background: var(--paper); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid rgba(255,255,255,.7); border-left: 6px solid var(--violet); border-radius: 12px; padding: 8px 12px; box-shadow: 0 10px 26px rgba(14,10,40,.25); font-size: 14px; }
.toast.warn { border-left-color: var(--marigold); }

/* Touch controls: shown on coarse pointers and narrow screens. */
.touchpad, .act { display: none; }
@media (pointer: coarse), (max-width: 700px) {
  .touchpad { display: grid; position: absolute; left: 14px; bottom: 16px; grid-template: 52px 52px 52px / 52px 52px 52px; gap: 2px; }
  .pad { border: 1px solid var(--line); background: rgba(251,250,255,.92); border-radius: 14px; font-size: 18px; box-shadow: 0 6px 16px rgba(14,10,40,.14); touch-action: none; user-select: none; -webkit-user-select: none; }
  .pad.active { background: var(--marigold); }
  .pad.up { grid-area: 1 / 2; } .pad.left { grid-area: 2 / 1; } .pad.right { grid-area: 2 / 3; } .pad.down { grid-area: 3 / 2; }
  .act { display: block; position: absolute; right: 16px; bottom: 30px; min-width: 104px; min-height: 64px; border-radius: 22px; border: 1px solid rgba(255,255,255,.6); background: var(--marigold); font-family: var(--display); font-weight: 700; font-size: 17px; box-shadow: 0 6px 16px rgba(14,10,40,.14); }
  .act:disabled { background: #E4E1EE; color: var(--ink-soft); box-shadow: none; border-color: var(--ink-soft); }
  .toasts { bottom: 190px; }
  .prompt { display: none; }
}

/* The tablet: a physical device docked on the right. */
.tablet { position: absolute; top: 12px; right: 12px; bottom: 12px; width: var(--tablet-w); display: flex; }
.app.tablet-closed .tablet { display: none; }
.bezel { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; background: var(--bezel); border: 1px solid rgba(255,255,255,.6); border-radius: 30px; padding: 12px; box-shadow: 0 6px 16px rgba(14,10,40,.14); }
.tablet-head { min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--paper); padding: 2px 4px 10px; }
.node-face { width: 44px; height: 36px; border-radius: 12px; background: var(--ink); border: 2.5px solid var(--mint); display: flex; justify-content: center; align-items: center; gap: 8px; flex: none; }
.node-face span { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.app.node-busy .node-face { box-shadow: 0 0 0 4px rgba(46,230,197,.35); }
.node-status { flex: 1; min-width: 0; }
.node-name { margin: 0; font-family: var(--display); font-weight: 700; font-size: 18px; }
.tagline { font-family: var(--body); font-weight: 400; font-size: 13px; color: #CFCBE8; margin-left: 4px; }
.status-line { margin: 0; font-size: 14px; color: #E9E6FA; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collapse { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 16px; cursor: pointer; box-shadow: 0 6px 16px rgba(14,10,40,.14); }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: var(--ink); padding: 4px; border-radius: 14px 14px 0 0; }
.tabs [role="tab"] { border: 0; border-radius: 10px; background: transparent; color: #D9D5F0; padding: 8px 2px; font-weight: 600; font-size: 14px; cursor: pointer; }
.tabs [role="tab"][aria-selected="true"] { background: var(--paper); color: var(--ink); }
.count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--marigold); color: var(--ink); font-size: 12px; }
.count:empty { display: none; }
.screen { flex: 1; min-height: 0; min-width: 0; overflow: auto; background: var(--paper); border-radius: 0 0 16px 16px; padding: 4px 16px 20px; overscroll-behavior: contain; }
[role="tabpanel"]:focus-visible { outline-offset: -3px; box-shadow: none; }
.panel-title { font-family: var(--display); font-weight: 700; font-size: 17px; margin: 18px 0 6px; }
.hint { font-size: 13.5px; color: var(--ink-soft); margin: 4px 0; }
.error { color: var(--danger); font-weight: 600; font-size: 14px; margin: 6px 0; min-height: 0; }
.error:empty { display: none; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }

/* Errand tickets: torn-paper slips pinned to the board. */
.errands { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.errand { width: 100%; text-align: left; border: 2px dashed var(--ink); border-radius: 6px; padding: 9px 12px; background: #FFF7E0; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.errand strong { font-family: var(--display); font-size: 15px; }
.errand .budget { font-weight: 700; white-space: nowrap; }
.errand .detail { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-soft); }
.errand[aria-pressed="true"] { border-style: solid; background: #D8FBF3; box-shadow: inset 6px 0 0 var(--mint); }
.errand.done { background: #EFEDF6; cursor: default; border-style: solid; border-color: #A7A2C2; }
.stars { color: #C47F00; letter-spacing: 1px; font-size: 15px; }

.field-label { display: block; font-weight: 600; font-size: 14px; margin: 10px 0 4px; }
textarea, input[type="text"], input[type="search"], select { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; padding: 8px 10px; font-size: 16px; }
textarea { resize: vertical; min-height: 78px; }
input.short { width: 76px; }
.market-filters .row label { flex: 1 1 100px; margin: 0; }
.market-filters select, .market-filters .short { margin-top: 3px; }
.chips { border: 0; padding: 0; margin: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); border-radius: 999px; background: #FFFFFF; padding: 4px 11px; font-size: 14px; cursor: pointer; min-height: 32px; }
.chip[aria-pressed="true"] { background: var(--mint); font-weight: 600; }
.primary, .secondary { min-height: 44px; padding: 8px 18px; border: 1px solid var(--line); border-radius: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px rgba(14,10,40,.14); }
.primary { background: var(--mint); font-family: var(--display); font-size: 16px; }
.secondary { background: #FFFFFF; }
a.secondary { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
.secondary[aria-pressed="true"] { background: var(--mint); }
.primary:disabled, .secondary:disabled { opacity: .55; cursor: not-allowed; }
.secondary.danger { color: var(--danger); }
.small { min-height: 34px; padding: 4px 11px; font-size: 14px; border-radius: 9px; box-shadow: 0 6px 16px rgba(14,10,40,.14); }

.log { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 3px solid var(--mint); display: grid; gap: 4px; font-size: 14px; }
.log li { position: relative; }
.log li::before { content: ""; position: absolute; left: -19px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 2.5px solid var(--mint-deep); }
.log:empty::after { content: "Node’s notes appear here as it shops."; color: var(--ink-soft); }

/* Hanging price tags. */
.tags-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.tag { position: relative; background: #FFFFFF; border: 1px solid var(--line); border-radius: 6px 14px 14px 6px; padding: 10px 12px 10px 30px; box-shadow: 0 6px 16px rgba(14,10,40,.14); }
.tag::before { content: ""; position: absolute; left: 10px; top: 16px; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); }
.tag.over { background: #FFF2EE; }
.tag-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.tag-name { font-family: var(--display); font-weight: 700; font-size: 16px; margin: 0; }
.tag-price { font-family: var(--display); font-weight: 700; font-size: 18px; white-space: nowrap; }
.tag-price small { font-family: var(--body); font-weight: 400; font-size: 12px; }
.tag-shop { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.tag-blurb { margin: 4px 0 0; font-size: 14px; }
.facts { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 0; padding: 0; list-style: none; }
.fact { font-size: 12.5px; border-radius: 6px; padding: 1px 7px; background: #EFEDF6; }
.fact.yes { background: #D8FBF3; }
.fact.no { background: #FFE3DC; }
.fact.badge { background: var(--marigold); font-weight: 700; }
.tag .row { margin-top: 9px; }
.compare-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.compare-pick input { width: 20px; height: 20px; accent-color: var(--mint-deep); }

.side { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.side-col { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: #FFFFFF; font-size: 13.5px; }
.side-col h3 { font-family: var(--display); font-size: 15px; margin: 0 0 6px; }
.side-col dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; }
.side-col dt { color: var(--ink-soft); }
.side-col dd { margin: 0; font-weight: 600; }

.stamps { list-style: none; padding: 0; margin: 6px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stamp { border: 2.5px dashed #A7A2C2; border-radius: 50%; aspect-ratio: 1; display: grid; place-items: center; text-align: center; font-family: var(--display); font-size: 12.5px; font-weight: 700; color: #8F8AAD; padding: 6px; }
.stamp.got { border-style: solid; border-color: var(--ink); color: var(--ink); transform: rotate(-6deg); }
.shelf { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; }
.shelf li { border-bottom: 2px solid #E4E1EE; padding: 6px 0; display: flex; justify-content: space-between; gap: 8px; font-size: 14.5px; }
.shelf:empty::after { content: "Nothing kept yet. Keep an item from a shop or from Node’s comparison."; color: var(--ink-soft); font-size: 14px; }
.review { border: 1px solid rgba(255,255,255,.6); border-radius: 16px; background: #D8FBF3; padding: 12px 14px; margin-top: 12px; box-shadow: 0 6px 16px rgba(14,10,40,.14); }
.review h2 { font-family: var(--display); margin: 0 0 4px; font-size: 20px; }
.review p { margin: 4px 0; }

/* Shop, map and help sheets. */
.sheet { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(42,35,70,.38); padding: 16px; z-index: 5; }
.sheet[hidden] { display: none; }
.sheet-inner { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--paper); border: 1px solid rgba(255,255,255,.6); border-radius: 22px; padding: 16px 18px 18px; box-shadow: 0 6px 16px rgba(14,10,40,.14); overscroll-behavior: contain; }
.shop-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.shop-head h2, #map-title, #help-title { font-family: var(--display); font-weight: 700; font-size: 24px; margin: 0; }
.shop-sign { background: #FFFFFF; border: 1px solid rgba(255,255,255,.6); border-radius: 10px; padding: 4px 16px; box-shadow: inset 0 -4px 0 var(--shop, var(--violet)); }
.shop-sign img { display: block; height: 26px; width: auto; max-width: 220px; margin: 6px 4px; }
.shop-sign.dark { background: var(--ink); }
.shop-sign.icon { display: flex; align-items: center; gap: 10px; padding-left: 8px; }
.shop-sign.icon img { height: 34px; margin: 3px 0; border-radius: 8px; }
.shop-theme { margin: 10px 0 0; font-weight: 600; }
.keeper { display: flex; gap: 12px; align-items: center; margin: 10px 0; padding: 10px; border-radius: 14px; background: var(--shop-trim, #EFEDF6); }
.keeper-face { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--shop, var(--marigold)); }
.keeper-name { margin: 0; font-weight: 700; }
.keeper-line { margin: 0; font-size: 14.5px; }
.shop-errand { background: #D8FBF3; border-radius: 10px; padding: 6px 10px; font-size: 14px; margin: 6px 0; }
.disclaimer { margin-top: 12px; }
.minimap { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; background: var(--lawn); }
.map-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.map-list button { width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; padding: 8px 10px; cursor: pointer; box-shadow: 0 6px 16px rgba(14,10,40,.14); }
.map-list strong { display: block; font-family: var(--display); }
.map-list span { font-size: 13px; color: var(--ink-soft); }
.steps { padding-left: 22px; display: grid; gap: 8px; }
.failure { position: absolute; inset: 0; display: grid; place-items: center; background: var(--paper); }

/* Phones: the tablet becomes a bottom sheet over the lower part of the town. */
@media (max-width: 700px) {
  :root { --tablet-w: 0px; }
  .hud-top, .app.tablet-closed .hud-top { top: 8px; left: 8px; right: 8px; gap: 6px; }
  .townsign { flex: 1 1 100%; padding: 5px 10px 6px; max-width: none; border-width: 2.5px; border-radius: 12px; box-shadow: 0 6px 16px rgba(14,10,40,.14); display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; }
  .townsign h1 { font-size: 18px; margin: 0; }
  .progress { font-size: 12.5px; }
  .boundary { grid-column: 1 / -1; font-size: 11px; margin-top: 1px; }
  .topbar { flex: 1 1 100%; justify-content: flex-start; gap: 6px; }
  .chip-btn { min-height: 34px; padding: 3px 11px; font-size: 13.5px; box-shadow: 0 6px 16px rgba(14,10,40,.14); }
  #btn-help { width: 34px; }
  .toast:not(:last-child) { display: none; }
  .toast { font-size: 13.5px; padding: 6px 10px; }
  #btn-motion, #btn-exit { display: none; }
  .tablet { left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 60vh; height: 60dvh; z-index: 4; }
  .bezel { border-radius: 26px 26px 0 0; border-bottom: 0; padding: 8px 8px 0; box-shadow: 0 -10px 30px rgba(14,10,40,.3); }
  .tablet-head { padding: 0 4px 6px; }
  .screen { padding: 2px 12px 24px; border-radius: 0; }
  .app:not(.tablet-closed) .touchpad, .app:not(.tablet-closed) .act { display: none; }
  .map-list { grid-template-columns: 1fr; }
  .sheet { padding: 0; place-items: end stretch; }
  .sheet-inner { width: 100%; max-height: 88vh; max-height: 88dvh; border-radius: 22px 22px 0 0; border-bottom: 0; }
  .side { grid-auto-columns: minmax(140px, 1fr); }
}

/* ----- Glass skin (Casino's concept UI). Later rules win over the structural rules above. ----- */
.bezel { background: var(--bezel); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid rgba(196,181,253,.35); border-radius: 24px; box-shadow: 0 18px 50px rgba(10,8,30,.45); }
.tablet-head { color: #fff; }
.node-face { width: 42px; height: 42px; border-radius: 50%; border: 0; background: radial-gradient(circle at 50% 50%, #120E1C 0 15%, var(--violet) 17% 33%, #2A2340 35% 44%, #F4F3F8 46%); box-shadow: 0 0 18px rgba(139,92,246,.7); }
.node-face span { display: none; }
.app.node-busy .node-face { box-shadow: 0 0 0 4px rgba(244,114,182,.4), 0 0 24px rgba(139,92,246,.9); }
.tagline { color: #CFCAE8; }
.collapse { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.35); box-shadow: none; }
.sheet .collapse { background: rgba(30,36,72,.08); color: var(--ink); border-color: var(--line); }
.tabs { background: transparent; padding: 0 2px; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.tabs [role="tab"] { color: #CFCAE8; text-transform: uppercase; letter-spacing: .05em; font-size: 12.5px; font-weight: 700; border-radius: 0; padding: 10px 2px 9px; background: transparent; box-shadow: none; }
.tabs [role="tab"][aria-selected="true"] { background: transparent; color: #fff; box-shadow: inset 0 -3px 0 var(--pink); }
.screen { background: rgba(247,246,252,.9); border-radius: 0 0 18px 18px; }
.panel-title { font-weight: 800; letter-spacing: .02em; color: var(--ink); }
textarea, input[type="text"], input[type="search"], select { border: 1px solid rgba(30,36,72,.22); background: #fff; border-radius: 10px; box-shadow: inset 0 1px 2px rgba(14,10,40,.06); }
.chip { border: 1px solid rgba(30,36,72,.3); background: rgba(255,255,255,.7); text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.chip[aria-pressed="true"] { background: var(--glow); color: #fff; border-color: transparent; }
.primary, .secondary { border-radius: 10px; text-transform: uppercase; letter-spacing: .05em; font-size: 13.5px; box-shadow: 0 6px 16px rgba(14,10,40,.16); }
.primary { color: #fff; border: 2px solid transparent; background-image: linear-gradient(#2E3360, #2E3360), var(--glow); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 0 18px rgba(139,92,246,.45); font-family: var(--display); }
.primary:hover:not(:disabled) { box-shadow: 0 0 26px rgba(244,114,182,.6); }
.secondary { background: #3A3F6B; color: #fff; border: 1px solid rgba(255,255,255,.18); }
a.secondary { color: #fff; }
.secondary[aria-pressed="true"] { background: var(--glow); }
.secondary.danger { background: #fff; color: var(--danger); border-color: rgba(192,38,45,.4); }
.small { box-shadow: none; }
.errand { border: 1px solid rgba(30,36,72,.16); border-radius: 12px; background: #fff; box-shadow: 0 4px 12px rgba(14,10,40,.06); }
.errand[aria-pressed="true"] { background: #F3EEFF; box-shadow: inset 4px 0 0 var(--violet), 0 0 0 2px rgba(139,92,246,.35); }
.errand.done { background: #EEEDF4; }
.log { border-left-color: var(--violet); }
.log li::before { border-color: var(--violet); }
.tag { border-radius: 14px; border: 1px solid rgba(30,36,72,.14); background: #fff; padding: 11px 13px 11px 13px; box-shadow: 0 6px 18px rgba(14,10,40,.08); }
.tag::before { display: none; }
.tag.over { background: #FFF6F2; }
.fact { background: #EEEDF6; border-radius: 999px; padding: 1px 8px; }
.fact.yes { background: #EDE7FF; }
.fact.badge { background: linear-gradient(90deg, #F472B6, #8B5CF6); color: #fff; text-transform: uppercase; letter-spacing: .05em; font-size: 11.5px; box-shadow: 0 0 12px rgba(244,114,182,.5); }
.review { border: 1px solid rgba(139,92,246,.35); background: #F3EEFF; box-shadow: 0 0 20px rgba(139,92,246,.2); }
.stamp.got { border-color: var(--violet); color: var(--ink); }
.sheet { background: rgba(14,12,34,.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.sheet-inner { background: rgba(247,246,252,.92); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid rgba(255,255,255,.8); border-radius: 20px; box-shadow: 0 24px 60px rgba(10,8,30,.5); }
.shop-sign { border: 1px solid var(--line); border-radius: 10px; }
.lede { margin: 6px 0 10px; font-size: 17px; font-weight: 600; color: var(--violet); }
.help .card-kicker { color: var(--ink-soft); font-size: 12.5px; }
.minimap { border: 1px solid var(--line); background: var(--lawn); }
.map-list button { border: 1px solid var(--line); background: #fff; box-shadow: 0 4px 12px rgba(14,10,40,.06); }
@media (pointer: coarse), (max-width: 700px) {
  .pad { background: rgba(24,24,48,.6); color: #fff; border: 1px solid rgba(255,255,255,.3); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
  .pad.active { background: var(--glow); }
  .act { color: #fff; border: 2px solid transparent; background-image: linear-gradient(#2E3360, #2E3360), var(--glow); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 0 22px rgba(139,92,246,.5); text-transform: uppercase; letter-spacing: .05em; }
  .act:disabled { background-image: none; background: rgba(24,24,48,.5); color: #B9B5D0; border-color: rgba(255,255,255,.2); box-shadow: none; }
  .keyhints { display: none; }
}
@media (max-width: 700px) {
  .townsign h1 { font-size: 18px; }
  .strap { display: none; }
  .hud-cards { margin-top: 0; }
  .shopping .card-line.strong { display: none; }
  .shopping { max-width: none; width: 100%; padding: 6px 11px; }
  .shopping .card-kicker { font-size: 12.5px; }
  .app:not(.tablet-closed) .hud-cards { display: none; }
  .glass-card { min-width: 0; padding: 8px 11px; }
  .market-badge { display: none; }
  .bezel { border-radius: 22px 22px 0 0; }
}
@media (max-height: 560px) { .keyhints { display: none; } }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }