@font-face {
  font-family: 'Kenney Future';
  src: url('./assets/fonts/KenneyFuture.ttf') format('truetype');
}
@font-face {
  font-family: 'Kenney Pixel';
  src: url('./assets/fonts/KenneyPixel.ttf') format('truetype');
}
@font-face {
  font-family: 'Kenney Blocks';
  src: url('./assets/fonts/KenneyBlocks.ttf') format('truetype');
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #10141c; overflow: hidden; }
body {
  font-family: 'Kenney Future', system-ui, sans-serif; color: #eef2f7;
  /* no pinch/double-tap zoom, pull-to-refresh, text selection or tap flashes */
  touch-action: none; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
button { touch-action: manipulation; }

#app { position: fixed; inset: 0; }
#game {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; image-rendering: pixelated; background: #10141c;
  touch-action: none;
}
/* carries the notch / home-bar insets to the canvas renderer */
#safe-probe {
  position: absolute; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* overlays */
.overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  background: radial-gradient(ellipse at center, rgba(16,20,28,0.72), rgba(8,10,15,0.92));
  z-index: 10; backdrop-filter: blur(2px);
}
.overlay.hidden { display: none; }

/* menu card */
.menu-card {
  background: linear-gradient(180deg, #2a3140, #1b2029);
  border: 3px solid #3d4658; border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 28px 34px; max-width: 860px; width: min(92vw, 860px);
}
.menu-card.small { text-align: center; max-width: 460px; }

.title {
  font-family: 'Kenney Blocks', 'Kenney Future', sans-serif;
  font-size: 62px; letter-spacing: 4px; line-height: 1;
  color: #ffd479; text-shadow: 0 4px 0 #b1791f, 0 6px 10px rgba(0,0,0,0.5);
  text-align: center;
}
.death-title { color: #ff6b6b; text-shadow: 0 4px 0 #7a1f1f, 0 6px 10px rgba(0,0,0,0.5); }
.subtitle { text-align: center; color: #9fb0c6; margin: 8px 0 20px; font-size: 15px; }

.menu-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; }
@media (max-width: 680px) { .menu-cols { grid-template-columns: 1fr; } }
/* one city: no picker, just the controls and the way in */
#menu.one-city .menu-left { display: none; }
#menu.one-city .menu-cols { grid-template-columns: 1fr !important; }
#menu.one-city .menu-card { max-width: 620px; }

h2 {
  font-size: 15px; text-transform: uppercase; letter-spacing: 2px;
  color: #7f8ea6; margin-bottom: 12px; border-bottom: 2px solid #333c4c; padding-bottom: 6px;
}

.map-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.map-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: #232a36; border: 2px solid #384154;
  border-radius: 8px; padding: 10px 12px; cursor: pointer; color: #dfe6ef;
  font-family: inherit; text-align: left; transition: transform .06s, border-color .1s, background .1s;
}
.map-btn:hover { transform: translateX(3px); border-color: #5a6b86; background: #2a333f; }
.map-btn.selected { border-color: #ffd479; background: #333a2a; box-shadow: 0 0 0 1px #ffd479 inset; }
.map-name { font-size: 18px; color: #fff; }
.map-meta { font-size: 12px; color: #93a2b8; }

.controls { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: #c7d2e0; }
.hint { margin: 16px 0; font-size: 13px; color: #9fb0c6; line-height: 1.5; }

kbd {
  display: inline-block; min-width: 20px; text-align: center;
  background: #11151d; border: 1px solid #3d4658; border-bottom-width: 3px;
  border-radius: 5px; padding: 2px 6px; font-size: 12px; color: #ffd479; margin: 0 1px;
  font-family: 'Kenney Pixel', monospace;
}

.btn-primary, .btn-secondary {
  font-family: 'Kenney Future', sans-serif; font-size: 18px; letter-spacing: 1px;
  border: none; border-radius: 10px; padding: 14px 20px; cursor: pointer;
  width: 100%; transition: transform .06s, filter .1s;
}
.btn-primary { background: linear-gradient(180deg, #ffd479, #f2a93b); color: #3a2400; border-bottom: 4px solid #b1791f; }
.btn-secondary { background: #2f3948; color: #cdd7e4; border-bottom: 4px solid #1c232d; margin-top: 10px; }
.btn-primary:hover, .btn-secondary:hover { filter: brightness(1.08); }
.btn-primary:active, .btn-secondary:active { transform: translateY(2px); }
.death-btns { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }

/* loading */
.spinner {
  width: 46px; height: 46px; border: 5px solid #2a3140; border-top-color: #ffd479;
  border-radius: 50%; animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#loading p { color: #9fb0c6; }

/* toast */
.toast {
  position: absolute; top: 54px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.72); border: 1px solid #3d4658; border-radius: 8px;
  padding: 8px 16px; font-size: 14px; color: #ffe08a; z-index: 9;
  transition: opacity .3s; pointer-events: none;
}
.toast.hidden { opacity: 0; }

/* the main menu floats over the live city backdrop */
#menu { background: radial-gradient(ellipse at center, rgba(16,20,28,0.25), rgba(8,10,15,0.7)); backdrop-filter: none; }
#menu .menu-card { background: linear-gradient(180deg, rgba(42,49,64,0.92), rgba(27,32,41,0.95)); }

/* ---------- input-mode swaps ---------- */
.touch-only { display: none; }
body.touch .touch-only { display: flex; }
body.touch .kbd-only { display: none; }
.controls b { color: #ffd479; font-weight: normal; }

/* ---------- touch controls ---------- */
#touch-ui { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#touch-ui.hidden, body:not(.touch) #touch-ui { display: none; }

#stick {
  position: absolute; left: 0; top: 0; width: 112px; height: 112px; margin: -56px 0 0 -56px;
  border-radius: 50%; border: 3px solid rgba(255,244,214,0.35); background: rgba(16,20,28,0.28);
  opacity: 0; transition: opacity .12s;
}
#stick.on { opacity: 1; }
#stick-knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; background: rgba(255,212,121,0.85); border-bottom: 4px solid rgba(177,121,31,0.9);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

#top-btns {
  position: absolute; right: calc(12px + env(safe-area-inset-right)); top: 72px;
  display: flex; gap: 10px; pointer-events: auto;
}
.round-btn {
  width: 48px; height: 48px; border-radius: 12px; border: none; cursor: pointer;
  background: rgba(20,16,28,0.72); border-bottom: 3px solid rgba(0,0,0,0.5);
  display: grid; place-items: center; padding: 0;
}
.round-btn.hidden { display: none; }
.round-btn svg { width: 26px; height: 26px; fill: none; stroke: #ffe9b0; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.round-btn.down { transform: translateY(2px); filter: brightness(1.2); }

#act-btn {
  position: absolute; pointer-events: auto;
  right: calc(18px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom));
  min-width: 96px; height: 76px; padding: 0 20px; border: none; border-radius: 38px; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  font-family: 'Kenney Pixel', monospace; font-size: 30px; line-height: 1; color: #3a2400;
  background: linear-gradient(180deg, #ffd479, #f2a93b); border-bottom: 5px solid #b1791f;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  max-width: min(70vw, 360px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: act-pop .16s ease-out;
}
#act-btn.hidden { display: none; }
#act-btn.down { transform: translateY(3px); border-bottom-width: 2px; }
.act-hand { font-size: 26px; }
#act-label { overflow: hidden; text-overflow: ellipsis; }
@keyframes act-pop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- update banner ---------- */
#update-banner {
  position: absolute; z-index: 30; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  width: max-content; max-width: calc(100vw - 24px);
  background: linear-gradient(180deg, #2a3140, #1b2029); border: 2px solid #ffd479; border-radius: 12px;
  padding: 10px 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  font-size: 14px; color: #ffe9b0;
}
#update-banner.hidden { display: none; }
#update-banner button { width: auto; font-size: 15px; padding: 9px 16px; margin: 0; }

/* ---------- small screens ---------- */
.overlay { padding: calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); }
.menu-card { max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
@media (max-width: 680px), (max-height: 560px) {
  .menu-card { padding: 18px 18px; }
  .title { font-size: 40px; letter-spacing: 2px; }
  .subtitle { margin: 6px 0 12px; font-size: 13px; }
  .menu-cols { gap: 16px; }
  .map-list { max-height: 34vh; }
  .map-btn { padding: 12px; }
  .controls { font-size: 13px; gap: 8px; }
  .hint { margin: 10px 0; font-size: 12px; }
}
@media (max-height: 560px) and (min-width: 560px) {
  /* phone on its side: keep the two columns, trim the chrome */
  .menu-cols { grid-template-columns: 1.1fr 1fr; }
  .map-list { max-height: 44vh; }
  .title { font-size: 34px; }
}
/* on touch the top-right buttons live where the toast would be */
body.touch .toast { top: calc(env(safe-area-inset-top) + 130px); max-width: calc(100vw - 32px); text-align: center; }
/* the Enter button never scrolls out of reach on short screens */
@media (max-width: 680px), (max-height: 560px) {
  #start-btn { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -10px 18px rgba(27,32,41,0.95); }
}
@media (max-height: 560px) {
  .menu-card .hint { display: none; }
  .menu-card .subtitle { display: none; }
  .title { font-size: 30px; margin-bottom: 10px; }
  h2 { margin-bottom: 8px; }
  .map-list { max-height: calc(100vh - 170px); }
  .controls { margin-bottom: 12px; }
}

/* sound toggles: <body class="muted"> picks which icon/label shows */
.sound-toggle .snd-on { display: inline; }
.sound-toggle .snd-off { display: none; }
body.muted .sound-toggle .snd-on { display: none; }
body.muted .sound-toggle .snd-off { display: inline; }
.round-btn.sound-toggle svg.snd-on { display: block; }
body.muted .round-btn.sound-toggle svg.snd-on { display: none; }
body.muted .round-btn.sound-toggle svg.snd-off { display: block; }
.menu-sound { margin: 0 0 10px; font-size: 15px; padding: 10px 16px; }
#continue-btn.hidden, #cr-back.hidden { display: none; }

/* inventory */
.inv-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; text-align: left; }
.inv-empty { color: #9fb0c6; text-align: center; margin: 10px 0; }
.inv-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; background: #252d3a; border: 2px solid transparent; }
.inv-row.sel { border-color: #ffd36b; }
.inv-row.held { background: #34402a; }
.inv-icon { width: 26px; height: 26px; flex: none; display: grid; place-items: center; font-size: 20px; }
.inv-shape { width: 20px; height: 20px; border-radius: 4px; }
.inv-balloon { width: 18px; height: 22px; border-radius: 50% 50% 48% 48%; box-shadow: inset -3px -3px 0 rgba(0,0,0,0.18), inset 3px 3px 0 rgba(255,255,255,0.35); position: relative; }
.inv-balloon::after { content: ''; position: absolute; left: 8px; bottom: -6px; width: 1px; height: 6px; background: #e9e4da; }
.inv-tulip { width: 14px; height: 13px; border-radius: 2px 2px 50% 50%; position: relative; box-shadow: inset -2px -2px 0 rgba(0,0,0,0.18); }
.inv-tulip::before { content: ''; position: absolute; left: 4px; top: -3px; width: 6px; height: 5px; background: inherit; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.inv-tulip::after { content: ''; position: absolute; left: 6px; bottom: -8px; width: 2px; height: 8px; background: #4fae5a; }
.inv-name { flex: 1; color: #f2ead8; font-size: 15px; }
.inv-name small { display: block; color: #9fb0c6; font-size: 12px; }
.inv-row button { font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 8px; border: none; cursor: pointer; background: #3a4658; color: #e7eef8; }
.inv-row button.on { background: #f2a93b; color: #3a2400; }
.inv-title { font-size: 30px; margin-bottom: 4px; }
.inv-head { font-size: 15px; letter-spacing: 2px; color: #ffd36b; margin: 8px 0 0; font-weight: normal; }
.inv-row.task { background: #2f2a22; }
.inv-row.task .inv-icon { background: #e9dcbc; border-radius: 3px; }
.inv-row.expired { opacity: 0.6; }
.inv-row.expired .inv-name { text-decoration: line-through; text-decoration-color: rgba(242,234,216,0.5); }
.inv-stamp { display: inline-block; margin-top: 3px; padding: 1px 6px; font-size: 11px; letter-spacing: 1px; color: #ff8a8d; border: 2px solid #e5484d; border-radius: 4px; transform: rotate(-3deg); text-decoration: none; }

/* buying furniture: a card along the bottom of the screen, the shop still showing above it */
#buy {
  position: absolute; z-index: 8; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom)); width: min(560px, calc(100vw - 24px));
}
#buy.hidden { display: none; }
.buy-card {
  display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px;
  background: linear-gradient(180deg, #2a3140, #1b2029); border: 3px solid #3d4658; border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55); animation: act-pop .16s ease-out;
}
#buy-art { width: 112px; height: 112px; flex: none; image-rendering: pixelated; background: #3a3350; border-radius: 10px; border: 2px solid #f3e7c9; }
.buy-info { flex: 1; min-width: 0; }
.buy-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
#buy-name { font-size: 20px; color: #fff; }
#buy-price { font-family: 'Kenney Pixel', monospace; font-size: 30px; color: #ffd479; }
.buy-blurb { font-size: 13px; color: #9fb0c6; margin: 4px 0 2px; min-height: 0; }
.buy-colors { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.buy-colors button {
  width: 40px; height: 40px; border-radius: 10px; border: 3px solid #1b2029; cursor: pointer; padding: 0;
  box-shadow: inset -4px -4px 0 rgba(0,0,0,0.18), inset 3px 3px 0 rgba(255,255,255,0.25);
}
.buy-colors button.sel { border-color: #ffd479; transform: translateY(-2px); }
.buy-note { font-size: 13px; color: #ffe08a; margin: 8px 0 0; min-height: 16px; }
.buy-note.bad { color: #ff9a9d; }
.buy-btns { display: flex; gap: 10px; margin-top: 10px; }
.buy-btns button { margin: 0; padding: 12px 14px; font-size: 16px; }
.buy-btns .btn-primary:disabled { filter: grayscale(0.8) brightness(0.7); cursor: default; }
.buy-keys { margin: 8px 0 0; font-size: 12px; }
@media (max-width: 480px) {
  .buy-card { padding: 12px; gap: 12px; }
  #buy-art { width: 72px; height: 72px; }
  #buy-name { font-size: 16px; }
}

/* reading the post: a sheet of writing paper over the room */
#letter { z-index: 12; background: rgba(12,10,18,0.55); }
.letter-paper {
  width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; box-sizing: border-box;
  padding: 22px 24px 16px; color: #3b3040; border-radius: 4px;
  background: linear-gradient(90deg, transparent 0 9px, rgba(229,72,77,0.28) 9px 10px, transparent 10px), #fbf5e6;
  border-top: 6px solid #e5484d; box-shadow: 0 16px 44px rgba(0,0,0,0.6), inset 0 0 40px rgba(170,140,90,0.18);
  animation: act-pop .18s ease-out; transform: rotate(-0.6deg);
}
.letter-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; color: #8a7466; }
.letter-stamp { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border: 2px dashed #c0393f; border-radius: 3px; color: #c0393f; font-size: 17px; background: #fff3e8; }
#letter-from { font-size: 16px; color: #5a4a52; }
#letter-from::before { content: 'From: '; color: #a08c7e; font-size: 13px; }
.letter-text { white-space: pre-wrap; font-size: 16px; line-height: 26px; }
.letter-gift.hidden { display: none; }
.letter-gift { margin-top: 14px; padding: 8px 12px; background: #fff0c8; border: 2px dashed #e0b450; border-radius: 6px; font-size: 14px; color: #6a4c10; }
.letter-btns { display: flex; gap: 10px; margin-top: 16px; }
.letter-btns button { margin: 0; padding: 12px 14px; font-size: 16px; white-space: nowrap; }
.letter-btns .hidden { display: none; }
.letter-keys { margin: 8px 0 0; font-size: 12px; color: #8a7466; }
@media (max-width: 480px) {
  .letter-paper { padding: 16px 16px 12px; }
  .letter-text { font-size: 15px; line-height: 24px; }
}

/* new game: who are you? */
.cr-card { max-width: 620px; }
.cr-title { font-size: 46px; margin-bottom: 18px; }
.cr-cols { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; }
.cr-stage { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#cr-preview {
  width: 160px; height: 160px; image-rendering: pixelated; border-radius: 12px;
  background: radial-gradient(ellipse at 50% 92%, rgba(0,0,0,0.35) 0 22%, transparent 23%), linear-gradient(180deg, #3a4356, #4c5a48 72%, #56624f);
  border: 3px solid #3d4658;
}
.cr-stage .btn-secondary { font-size: 14px; padding: 9px 12px; }
.cr-picks h2 { margin: 0 0 8px; }
.cr-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cr-swatches button {
  width: 36px; height: 36px; border-radius: 10px; border: 3px solid #1b2029; cursor: pointer; padding: 0;
  box-shadow: inset -4px -4px 0 rgba(0,0,0,0.18), inset 3px 3px 0 rgba(255,255,255,0.25);
}
.cr-swatches button.sel, .cr-style.sel { border-color: #ffd479; transform: translateY(-2px); }
.cr-styles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cr-style {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 4px 3px; cursor: pointer;
  background: #232a36; border: 3px solid #384154; border-radius: 10px; color: #c7d2e0; font-family: inherit; font-size: 12px;
}
.cr-style canvas { width: 40px; height: 27.5px; image-rendering: pixelated; }
.cr-card .hint { text-align: center; }
@media (max-width: 520px) {
  .cr-cols { grid-template-columns: 1fr; gap: 12px; }
  #cr-preview { width: 112px; height: 112px; }
  .cr-stage { flex-direction: row; justify-content: center; gap: 12px; }
  .cr-title { font-size: 32px; margin-bottom: 10px; }
}
@media (max-height: 560px) {
  #cr-preview { width: 112px; height: 112px; }
  .cr-title { font-size: 28px; }
}

/* the name field on the "who are you?" card, for a new player */
.cr-name { display: block; }
.cr-name.hidden { display: none; }
.cr-name input {
  width: 100%; margin-bottom: 14px; padding: 9px 12px; border-radius: 10px; border: 3px solid #384154;
  background: #11151d; color: #fff; font-family: 'Kenney Future', sans-serif; font-size: 18px; letter-spacing: 1px;
}
.cr-name input:focus { outline: none; border-color: #ffd479; }

/* who's playing? */
.pl-card { max-width: 620px; text-align: center; }
.pl-title { font-size: 42px; margin-bottom: 18px; }
.pl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; margin-bottom: 6px; }
.pl-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 10px; cursor: pointer;
  background: #232a36; border: 3px solid #384154; border-radius: 12px; color: #dfe6ef; font-family: inherit;
  transition: transform .06s, border-color .1s, background .1s;
}
.pl-btn:hover { transform: translateY(-2px); border-color: #5a6b86; background: #2a333f; }
.pl-btn.sel { border-color: #ffd479; }
.pl-btn canvas {
  width: 80px; height: 80px; image-rendering: pixelated; border-radius: 10px;
  background: radial-gradient(ellipse at 50% 92%, rgba(0,0,0,0.35) 0 22%, transparent 23%), linear-gradient(180deg, #3a4356, #4c5a48 72%, #56624f);
}
.pl-name { font-family: 'Kenney Future', sans-serif; font-size: 17px; color: #fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-meta { font-size: 13px; color: #93a2b8; }
.pl-new { border-style: dashed; justify-content: center; min-height: 150px; }
.pl-new .pl-plus { font-size: 44px; line-height: 80px; color: #ffd479; }
@media (max-width: 520px) {
  .pl-list { grid-template-columns: repeat(2, 1fr); }
  .pl-title { font-size: 30px; margin-bottom: 10px; }
  .pl-btn canvas { width: 64px; height: 64px; }
  .pl-new { min-height: 126px; }
}

/* trying things on: Threads, Curl Up & Dye, the mirror at home */
.st-card { max-width: 760px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; padding: 22px 26px; }
.st-title { font-size: 40px; margin-bottom: 14px; }
.st-cols { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; min-height: 0; flex: 1; }
.st-stage { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#st-preview {
  width: 160px; height: 160px; image-rendering: pixelated; border-radius: 12px;
  background: radial-gradient(ellipse at 50% 92%, rgba(0,0,0,0.35) 0 22%, transparent 23%), linear-gradient(180deg, #4a3f5c, #5b4b5f 72%, #66545e);
  border: 3px solid #3d4658;
}
.st-cash { font-size: 13px; color: #9fb0c6; }
.st-cash b { font-family: 'Kenney Pixel', monospace; font-size: 26px; color: #ffd479; font-weight: normal; vertical-align: -3px; }
.st-picks { min-height: 0; max-height: 100%; overflow-y: auto; padding: 2px 4px 2px 2px; }
.st-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.st-tabs.hidden, .st-swatches.hidden { display: none; }
.st-tabs button {
  font: inherit; font-size: 12px; padding: 6px 9px; border-radius: 9px; cursor: pointer;
  background: #232a36; border: 2px solid #384154; color: #c7d2e0;
}
.st-tabs button.sel { background: #3a3350; border-color: #ffd479; color: #fff; }
.st-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin-bottom: 12px; }
.st-opt {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 3px 4px; cursor: pointer;
  background: #232a36; border: 3px solid #384154; border-radius: 10px; color: #c7d2e0; font-family: inherit; font-size: 11px; white-space: nowrap;
}
.st-opt canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.st-opt.head canvas { width: 48px; height: 36px; }
.st-opt em { font-style: normal; font-family: 'Kenney Pixel', monospace; font-size: 18px; line-height: 0.8; color: #ffd479; }
.st-opt.sel { border-color: #ffd479; background: #3a3350; transform: translateY(-2px); }
.st-opt.still { cursor: default; }
.st-swatches button { position: relative; }
.st-swatches button.own::after {
  content: '✓'; position: absolute; right: -6px; top: -8px; font-size: 11px; line-height: 16px; width: 16px; height: 16px;
  border-radius: 50%; background: #4fae5a; color: #fff; text-align: center; font-family: system-ui, sans-serif;
}
.st-bill { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 14px 0 0; font-size: 14px; color: #f2ead8; min-height: 20px; }
.st-bill span { white-space: pre; }
.st-bill.empty { color: #7f8ea6; }
.st-note { text-align: center; margin: 8px 0 10px; }
.st-btns { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.st-btns button { margin: 0; padding: 12px 14px; font-size: 16px; }
.st-btns .btn-primary:disabled { filter: grayscale(0.8) brightness(0.7); cursor: default; }
@media (max-width: 560px) {
  .st-card { padding: 16px 14px; }
  .st-cols { grid-template-columns: 1fr; gap: 10px; }
  .st-stage { flex-direction: row; justify-content: center; gap: 14px; }
  #st-preview { width: 104px; height: 104px; }
  .st-title { font-size: 28px; margin-bottom: 10px; }
}
@media (max-height: 560px) {
  .st-card { padding: 12px 18px; }
  #st-preview { width: 96px; height: 96px; }
  .st-title { font-size: 24px; margin-bottom: 8px; }
  .st-note { display: none; }
  .st-bill { margin-top: 8px; }
  .st-opt canvas { width: 36px; height: 36px; }
  .st-opt.head canvas { width: 36px; height: 27px; }
  .st-kinds { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
}