/* =============================================================
   REMBAYUNG FURY
   Warm lamplit palette: teak, brass and chilli red — a kedai at
   night, not a dashboard.
   ============================================================= */
:root{
  --ink:#1a1310;
  --panel:#241b16;
  --panel-2:#2f231c;
  --line:#4a3527;
  --cream:#f0e2c8;
  --muted:#a8927a;
  --brass:#d8a13a;
  --brass-hi:#f5c542;
  --chilli:#c8553d;
  --leaf:#5fa855;
  --blue:#5b8fbd;
  --shadow:0 14px 40px rgba(0,0,0,.55);
  --r:12px;

  /* Pixel type. Silkscreen carries the UI; Press Start 2P is reserved
     for display moments — it is very wide and unreadable in a table.
     Both fall back to a monospace stack for glyphs they lack (the
     baht, peso and yen signs in the globe panel, for instance). */
  --font-ui:'Silkscreen','Courier New',ui-monospace,monospace;
  --font-display:'Press Start 2P','Silkscreen',ui-monospace,monospace;
}

*{box-sizing:border-box}
/* An author `display` rule beats the UA stylesheet's [hidden]{display:none},
   so #app / #modal / #peakFlag would stay visible. Restore the attribute. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--ink); color:var(--cream);
  font:13px/1.65 var(--font-ui);
  overflow:hidden; user-select:none;
  /* aliased rendering keeps the pixel glyphs crisp instead of blurring
     them into a smooth vector face */
  -webkit-font-smoothing:none;
  font-smooth:never;
  text-rendering:geometricPrecision;
}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}

/* ---------- boot ---------- */
#boot{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 35%,#3a2417,#140e0a 70%);
}
.boot-inner{text-align:center; width:min(90vw,460px)}
#boot h1{
  font:400 30px/1.25 var(--font-display); letter-spacing:.04em; margin:0 0 10px;
  color:var(--brass-hi); text-shadow:0 3px 0 #6d4415,0 12px 34px rgba(216,161,58,.35);
}
#boot h1 span{display:block; color:var(--chilli); font-size:24px; letter-spacing:.10em; margin-top:8px}
.tag{color:var(--muted); font-style:italic; margin:0 0 26px}
.bar{height:7px; background:#2a1d14; border-radius:99px; overflow:hidden; border:1px solid var(--line)}
.bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--chilli),var(--brass-hi)); transition:width .25s}
#bootmsg{margin-top:12px; color:var(--muted); font-size:12px; letter-spacing:.05em}

/* ---------- layout ---------- */
#app{height:100%; display:flex; flex-direction:column}

/* ---------- HUD ---------- */
#hud{
  display:flex; align-items:center; gap:18px; padding:10px 16px;
  background:linear-gradient(#2b201a,#221913);
  border-bottom:1px solid var(--line); z-index:20;
}
.hud-left{display:flex; align-items:center; gap:12px}
#clock{width:66px; height:66px; flex:none}
.timebox #hudTime{font:400 17px/1 var(--font-display); letter-spacing:.02em}
.timebox #hudDate{font-size:11px; color:var(--muted); margin-top:6px}
.pill{
  display:inline-block; margin-top:5px; padding:2px 9px; border-radius:99px;
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  background:#3a2a1e; color:var(--brass); border:1px solid var(--line);
}
.pill.open{background:#20401f; color:#9fdc93; border-color:#3d6b39}
.pill.peak{background:#4a1d16; color:#ff9b83; border-color:#7d3325}

.hud-stats{display:flex; gap:8px; margin-left:auto; flex-wrap:wrap}
.stat{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:6px 12px; min-width:86px;
}
.stat label{display:block; font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.stat b{font:400 14px/1.3 var(--font-ui)}
.hud-right{display:flex; gap:6px; margin-left:8px}

.ghost{
  background:var(--panel); border:1px solid var(--line); border-radius:9px;
  padding:8px 12px; font-size:12.5px; transition:.15s;
}
.ghost:hover{background:var(--panel-2); border-color:var(--brass)}
.primary{
  background:linear-gradient(#e0b04a,#c1862a); color:#2a1a08; font-weight:700;
  border-radius:9px; padding:9px 16px; font-size:12.5px; white-space:nowrap;
  box-shadow:0 3px 0 #7d5514; transition:.15s;
}
.primary:hover{filter:brightness(1.08)}
.primary:active{transform:translateY(2px); box-shadow:0 1px 0 #7d5514}
.primary:disabled{opacity:.45; cursor:not-allowed}

/* ---------- stage ---------- */
#stage{position:relative; flex:1; overflow:hidden; background:#100c09}
#world{position:absolute; inset:0; width:100%; height:100%; cursor:grab}
#world.grabbing{cursor:grabbing}
#world.placing{cursor:crosshair}

#peakFlag{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  background:linear-gradient(#d0472f,#9c2f1c); color:#ffe7d8;
  padding:7px 22px; border-radius:99px; font:400 9px/1 var(--font-display);
  letter-spacing:.22em; box-shadow:0 6px 22px rgba(208,71,47,.5);
  animation:pulse 1.1s ease-in-out infinite; z-index:12;
}
@keyframes pulse{50%{transform:translateX(-50%) scale(1.045)}}

/* ---------- side trays ---------- */
#queueTray,#advisor{
  position:absolute; width:236px; background:rgba(36,27,22,.94);
  border:1px solid var(--line); border-radius:var(--r); padding:12px;
  backdrop-filter:blur(8px); box-shadow:var(--shadow); z-index:10;
}
#queueTray{left:14px; top:14px; max-height:calc(100% - 110px); overflow:auto}
#advisor{right:14px; top:14px; width:260px}
#queueTray h4,#advisor h4{
  margin:0 0 9px; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--brass);
}
.hint{font-size:10.5px; color:var(--muted); margin:9px 0 0; line-height:1.45}

.party{
  display:flex; align-items:center; gap:9px; padding:7px 9px; margin-bottom:5px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:9px;
  cursor:pointer; transition:.12s;
}
.party:hover{border-color:var(--brass)}
.party.sel{border-color:var(--brass-hi); background:#3d2c1c; box-shadow:0 0 0 2px rgba(245,197,66,.25)}
.party .n{font-weight:700; font-size:15px; width:20px; text-align:center}
.party .meter{flex:1; height:5px; background:#1a1310; border-radius:99px; overflow:hidden}
.party .meter i{display:block; height:100%; background:var(--leaf)}
.party.warn .meter i{background:var(--brass)}
.party.bad .meter i{background:var(--chilli)}
.empty{color:var(--muted); font-size:11.5px; font-style:italic; padding:6px 2px}

.adv{
  display:flex; gap:8px; padding:7px 0; font-size:11.5px; line-height:1.45;
  border-top:1px solid rgba(74,53,39,.6);
}
.adv:first-child{border-top:0}
.adv .dot{width:7px; height:7px; border-radius:99px; flex:none; margin-top:5px}
.adv.ok .dot{background:var(--leaf)} .adv.warn .dot{background:var(--brass)} .adv.bad .dot{background:var(--chilli)}

/* ---------- toolbar ---------- */
#toolbar{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; padding:8px; z-index:14; flex-wrap:nowrap;
  max-width:calc(100vw - 24px);
  background:rgba(36,27,22,.95); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); backdrop-filter:blur(8px);
}
.tool{
  background:var(--panel-2); border:1px solid var(--line); border-radius:9px;
  padding:9px 13px; font-size:12px; white-space:nowrap; transition:.15s;
}
.tool:hover{border-color:var(--brass); background:#3a2a1e}
.tool.active{background:var(--brass); color:#2a1a08; font-weight:700; border-color:var(--brass-hi)}

/* ---------- camera angle panel ---------- */
#viewPanel{
  position:absolute; right:14px; top:14px; width:262px; z-index:18;
  background:rgba(36,27,22,.97); border:1px solid var(--brass);
  border-radius:var(--r); padding:14px; box-shadow:var(--shadow); backdrop-filter:blur(8px);
}
#viewPanel h4{
  margin:0 0 12px; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--brass);
}
#viewPanel label{
  display:block; font-size:10.5px; color:var(--muted); margin-bottom:11px;
  text-transform:uppercase; letter-spacing:.08em;
}
#viewPanel label b{
  float:right; color:var(--cream); font-family:var(--font-ui); letter-spacing:0;
  text-transform:none;
}
#viewPanel input[type=range]{width:100%; margin-top:5px; accent-color:var(--brass)}

.vmode,.vpresets{display:flex; gap:5px; margin-bottom:13px}
.vmode button,.vpresets button{
  flex:1; padding:7px 4px; font-size:10.5px; border-radius:8px;
  background:var(--panel-2); border:1px solid var(--line); transition:.14s;
}
.vmode button:hover,.vpresets button:hover{border-color:var(--brass)}
.vmode button.on,.vpresets button.on{background:var(--brass); color:#2a1a08;
  font-weight:700; border-color:var(--brass-hi)}
.vpresets{margin-top:4px}
.vfoot{display:flex; gap:6px; justify-content:flex-end; margin-top:12px}
#vReadout{font-family:var(--font-ui); color:var(--brass); font-size:10px; word-break:break-all}

/* ---------- toast ---------- */
#toast{
  position:absolute; bottom:82px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:6px; align-items:center;
  pointer-events:none; z-index:16;
}
.msg{
  background:rgba(24,17,13,.96); border:1px solid var(--line); border-left:3px solid var(--brass);
  padding:8px 15px; border-radius:8px; font-size:12.5px; box-shadow:var(--shadow);
  animation:rise .3s ease-out;
}
.msg.bad{border-left-color:var(--chilli)}
.msg.good{border-left-color:var(--leaf)}
@keyframes rise{from{opacity:0; transform:translateY(10px)}}

/* ---------- modal ---------- */
#modal{
  position:fixed; inset:0; z-index:40; display:grid; place-items:center;
  background:rgba(8,5,3,.72); backdrop-filter:blur(4px);
}
.sheet{
  position:relative; width:min(94vw,980px); max-height:88vh; overflow:auto;
  background:linear-gradient(#2a1f19,#221913); border:1px solid var(--line);
  border-radius:16px; padding:26px 28px; box-shadow:var(--shadow);
}
.close{position:absolute; top:12px; right:16px; font-size:26px; color:var(--muted); line-height:1}
.close:hover{color:var(--cream)}
.sheet h2{margin:0 0 8px; font:400 15px/1.45 var(--font-display); color:var(--brass-hi)}
.sheet .sub{color:var(--muted); font-size:12.5px; margin:0 0 20px}
.sheet h3{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass); margin:22px 0 10px}

table{width:100%; border-collapse:collapse; font-size:12.5px}
th{
  text-align:left; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); padding:7px 9px; border-bottom:1px solid var(--line);
}
td{padding:7px 9px; border-bottom:1px solid rgba(74,53,39,.45)}
tr:hover td{background:rgba(255,255,255,.025)}
td.num,th.num{text-align:right; font-family:var(--font-ui)}
.pos{color:#8fd47f} .neg{color:#e08b76}

input[type=number],input[type=text],select{
  background:#1a1310; border:1px solid var(--line); color:var(--cream);
  border-radius:7px; padding:5px 8px; width:92px; font:inherit; font-size:12.5px;
}
input:focus,select:focus{outline:0; border-color:var(--brass)}
input[type=range]{width:150px; accent-color:var(--brass)}

/* ---------- menu thumbnails ---------- */
.menutable td.pic{width:52px; padding:3px 6px}
.menutable td.pic img{
  display:block; width:40px; height:40px; image-rendering:pixelated;
  background:#1c1512; border:1px solid var(--line); border-radius:7px;
}
.menutable .nopic{
  display:block; width:40px; height:40px; border-radius:7px;
  background:#1c1512; border:1px dashed var(--line);
}
.menutable td{vertical-align:middle}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:14px}
.card h4{margin:0 0 6px; font-size:13px}
.card p{margin:0; font-size:11.5px; color:var(--muted); line-height:1.5}
.kv{display:flex; justify-content:space-between; padding:5px 0; font-size:12.5px; border-bottom:1px solid rgba(74,53,39,.4)}
.kv b{font-family:var(--font-ui)}
.kv.total{border-bottom:0; border-top:2px solid var(--line); margin-top:6px; padding-top:10px; font-size:15px}

.stars{color:var(--brass-hi); letter-spacing:1px}
.badge{
  display:inline-block; padding:2px 8px; border-radius:99px; font-size:10px;
  letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--line); background:#33251c;
}
.badge.chef{color:#e8a06a; border-color:#6d4526}
.badge.waiter{color:#8fbde0; border-color:#2f4f68}
.badge.robo{color:#9fd8c8; border-color:#2c5a4e}

.mini{padding:5px 11px; font-size:11.5px; border-radius:7px; background:var(--panel-2); border:1px solid var(--line)}
.mini:hover{border-color:var(--brass)}
.mini.danger:hover{border-color:var(--chilli); color:#f0a893}
.mini.go{background:linear-gradient(#e0b04a,#c1862a); color:#2a1a08; font-weight:700; border:0}

/* ---------- globe ---------- */
#globeWrap{position:relative; background:#0d1420; border:1px solid var(--line); border-radius:12px; overflow:hidden}
#globeCanvas{display:block; width:100%; height:auto; cursor:grab}
#globeCanvas:active{cursor:grabbing}
/* Silkscreen is an 8px bitmap face — it is only crisp at 8px and whole
   multiples of it. The 10px this used to be sat off the pixel grid and
   the browser antialiased it into a smear. */
.globe-hint{position:absolute; left:12px; bottom:10px; font-size:8px; color:#7f93a6;
  letter-spacing:.10em; pointer-events:none}
tr[data-terr]{cursor:pointer}
tr[data-terr].sel td{background:rgba(245,197,66,.13)}

/* ---------- tutorial ---------- */
#tutorial{position:fixed; inset:0; z-index:60; pointer-events:none}
.tut-card{
  position:absolute; bottom:96px; left:50%; transform:translateX(-50%);
  width:min(92vw,520px); background:linear-gradient(#32241b,#261b14);
  border:1px solid var(--brass); border-radius:14px; padding:20px 22px;
  box-shadow:0 18px 50px rgba(0,0,0,.6); pointer-events:auto;
}
.tut-step{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass)}
.tut-card h3{margin:7px 0 10px; font:400 13px/1.5 var(--font-display); color:var(--brass-hi)}
.tut-card p{margin:0 0 16px; font-size:13px; line-height:1.6; color:#e2d3ba}
.tut-actions{display:flex; justify-content:space-between; align-items:center}

/* ---------- scrollbars ---------- */
::-webkit-scrollbar{width:9px; height:9px}
::-webkit-scrollbar-track{background:#1a1310}
::-webkit-scrollbar-thumb{background:#4a3527; border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:#63472f}

@media (max-width:900px){
  .hud-stats .stat:nth-child(n+5){display:none}
  #advisor{display:none}
}

/* ---------- furniture orientation editor ---------- */
.seatgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px}
.seatslot{
  background:var(--panel); border:1px solid var(--line); border-radius:11px;
  padding:10px; text-align:center;
}
.seatslot img,.seatslot .ss-none{
  display:block; width:78px; height:78px; margin:6px auto; image-rendering:pixelated;
  background:repeating-conic-gradient(#2c2420 0% 25%,#1d1815 0% 50%) 50%/10px 10px;
  border:1px solid var(--line); border-radius:8px;
}
.seatslot .ss-none{display:grid; place-items:center; color:var(--chilli)}
.ss-lab{font-size:11px; color:var(--brass-hi)}
.ss-hint{font-size:9.5px; color:var(--muted); line-height:1.35; min-height:26px}
.ss-ctrl{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:6px}
.ss-ctrl span{font-size:11px; color:var(--muted); min-width:44px}

.seatrow{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap}
.seatpreview{
  border:1px solid var(--line); border-radius:11px; image-rendering:pixelated;
  background:#6d5b47;
}
.seatactions{display:flex; flex-direction:column; gap:7px; min-width:200px}

/* ---------- quick layout bar ---------- */
#editbar{
  position:absolute; bottom:74px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px; padding:8px 12px; z-index:15;
  background:rgba(36,27,22,.96); border:1px solid var(--brass);
  border-radius:13px; box-shadow:var(--shadow); backdrop-filter:blur(8px);
  max-width:calc(100vw - 28px); flex-wrap:wrap;
}
.eb-title{
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass); padding-right:4px;
}
.eb{
  display:flex; align-items:center; gap:6px; padding:7px 12px; font-size:11.5px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:9px; transition:.14s;
}
.eb b{font-size:13px; line-height:1; color:var(--brass)}
.eb:hover{border-color:var(--brass); background:#3a2a1e}
.eb.on{background:var(--brass); color:#2a1a08; font-weight:700; border-color:var(--brass-hi)}
.eb.on b{color:#2a1a08}
.eb-hint{
  font-size:10px; color:var(--muted); padding-left:6px; max-width:230px; line-height:1.35;
}
@media (max-width:820px){ .eb-hint{display:none} }

/* =============================================================
   PIXEL-ART CHROME
   -------------------------------------------------------------
   The world, the sprites and the type are all pixel art; the
   panels were the last thing still rendering as smooth modern UI
   (soft radii, gaussian shadows, backdrop blur, gradients).

   This pass replaces those with 16-bit chrome: square chunky
   frames, an inner bevel (light top edge / dark bottom edge),
   hard offset drop shadows instead of blurred ones, flat fills
   with a 1px scanline dither, and buttons that physically depress
   by 2px. Nothing here is blurred — a gaussian blur is the one
   thing a pixel display cannot do.
   ============================================================= */
:root{
  --px-hi:rgba(255,226,170,.10);   /* top bevel  */
  --px-lo:rgba(0,0,0,.45);         /* bottom bevel */
  --px-drop:rgba(0,0,0,.55);       /* hard shadow */
  --px-dither:repeating-linear-gradient(
      0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 2px);
}

/* ---- shared frame ---- */
#hud, #queueTray, #advisor, #viewPanel, #editbar, #toolbar,
.sheet, .tut-card, .stat, .card, .seatslot, .msg{
  border-radius:0 !important;
  backdrop-filter:none !important;
  background-image:var(--px-dither);
}

#queueTray, #advisor, #viewPanel, #editbar, #toolbar, .sheet, .tut-card{
  background-color:#241b16;
  border:3px solid var(--line);
  box-shadow:
    inset 0 3px 0 var(--px-hi),
    inset 0 -3px 0 var(--px-lo),
    6px 6px 0 var(--px-drop);
}
#viewPanel, .tut-card{ border-color:var(--brass); }

#hud{
  border-bottom:3px solid var(--line);
  box-shadow:inset 0 -3px 0 var(--px-lo), 0 4px 0 rgba(0,0,0,.35);
  background:#2b201a;
}

.stat, .card, .seatslot{
  background-color:#2a201a;
  border:2px solid var(--line);
  box-shadow:inset 0 2px 0 var(--px-hi), inset 0 -2px 0 var(--px-lo);
}

/* ---- buttons: raised, then physically pressed ---- */
.ghost, .tool, .mini, .eb, .vmode button, .vpresets button{
  border-radius:0;
  border:2px solid var(--line);
  background-color:#33261d;
  background-image:var(--px-dither);
  box-shadow:inset 0 2px 0 var(--px-hi), inset 0 -2px 0 var(--px-lo), 3px 3px 0 var(--px-drop);
  transition:none;
}
.ghost:hover, .tool:hover, .mini:hover, .eb:hover,
.vmode button:hover, .vpresets button:hover{
  background-color:#40301f; border-color:var(--brass);
}
.ghost:active, .tool:active, .mini:active, .eb:active,
.vmode button:active, .vpresets button:active{
  transform:translate(3px,3px); box-shadow:inset 0 2px 0 var(--px-hi);
}

.tool.active, .eb.on, .vmode button.on, .vpresets button.on{
  background-color:var(--brass); background-image:none; color:#2a1a08;
  border-color:var(--brass-hi);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.32), inset 0 -2px 0 rgba(0,0,0,.32);
  transform:translate(3px,3px);
}

.primary{
  border-radius:0;
  /* set the colour and the gradient separately: the `background`
     shorthand followed by `background-image:none` would cancel it */
  background-color:#c1862a;
  background-image:linear-gradient(#e6b957,#c1862a);
  border:2px solid #7d5514;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.30), 4px 4px 0 var(--px-drop);
  transition:none;
}
.primary:active{ transform:translate(4px,4px); box-shadow:inset 0 2px 0 rgba(255,255,255,.30); }
.primary:disabled{ transform:none; }

/* ---- smaller chrome ---- */
.party{
  border-radius:0; border:2px solid var(--line);
  background-color:#2f231c; background-image:var(--px-dither);
  box-shadow:inset 0 2px 0 var(--px-hi);
}
.party.sel{ box-shadow:inset 0 2px 0 var(--px-hi), 0 0 0 2px var(--brass-hi); }
.party .meter, .bar{ border-radius:0; }
.party .meter i, .bar i{ border-radius:0; }

.pill, .badge{ border-radius:0; border-width:2px; }
.msg{
  border-radius:0; border:2px solid var(--line); border-left-width:5px;
  background-color:#1d1511; box-shadow:4px 4px 0 var(--px-drop);
}
input[type=number], input[type=text], select{
  border-radius:0; border-width:2px;
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.35);
}
.close{ border-radius:0 }
#peakFlag{
  border-radius:0; border:2px solid #7d2a18;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.22), 4px 4px 0 var(--px-drop);
}
#globeWrap, #globeCanvas, .seatpreview, .menutable td.pic img, .menutable .nopic{
  border-radius:0;
}
.seatslot img, .seatslot .ss-none{ border-radius:0; border-width:2px; }

/* the boot screen belongs to the same world */
#boot .bar{ border-radius:0; border-width:2px; box-shadow:inset 2px 2px 0 rgba(0,0,0,.4) }

/* ---------- master placement adjuster ---------- */
#adjPanel{
  position:absolute; left:14px; top:14px; width:250px; z-index:19;
  background-color:#241b16; background-image:var(--px-dither);
  border:3px solid var(--brass); padding:14px;
  box-shadow:inset 0 3px 0 var(--px-hi), inset 0 -3px 0 var(--px-lo), 6px 6px 0 var(--px-drop);
  max-height:calc(100% - 120px); overflow:auto;
}
#adjPanel h4{
  margin:0 0 4px; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--brass);
}
.adj-note{margin:0 0 12px; font-size:10px; color:var(--muted); line-height:1.4}
.adj-group{
  margin:12px 0 8px; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cream); border-bottom:2px solid var(--line); padding-bottom:4px;
}
#adjPanel label{
  display:block; font-size:10px; color:var(--muted); margin-bottom:9px;
  text-transform:uppercase; letter-spacing:.07em;
}
#adjPanel label b{float:right; color:var(--cream); letter-spacing:0; text-transform:none}
#adjPanel input[type=range]{width:100%; margin-top:4px; accent-color:var(--brass)}
#adjReadout{font-size:9px; color:var(--brass); word-break:break-all; line-height:1.5}

/* ---------- plant picker ---------- */
.plantgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:6px}
.plantpick{
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 6px;
  background-color:#2a201a; background-image:var(--px-dither);
  border:2px solid var(--line); border-radius:0; text-align:center;
  box-shadow:inset 0 2px 0 var(--px-hi), inset 0 -2px 0 var(--px-lo);
}
.plantpick:hover{border-color:var(--brass); background-color:#3a2a1e}
.plantpick.on{
  border-color:var(--brass-hi); background-color:#3d2c1c;
  box-shadow:inset 0 2px 0 var(--px-hi), 0 0 0 2px rgba(245,197,66,.35);
}
.plantpick img{
  width:56px; height:56px; image-rendering:pixelated;
  background:repeating-conic-gradient(#241d18 0% 25%,#1b1512 0% 50%) 50%/10px 10px;
}
.pp-name{font-size:10.5px; color:var(--cream); line-height:1.25}
.pp-note{font-size:9px; color:var(--muted); line-height:1.3}
@media (max-width:760px){ .plantgrid{grid-template-columns:repeat(2,1fr)} }

/* ---------- layout export box ---------- */
.layoutbox{
  width:100%; min-height:72px; resize:vertical;
  background:#140f0c; border:2px solid var(--line); border-radius:0;
  color:var(--brass); font:10px/1.5 var(--font-ui); padding:8px;
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.4); word-break:break-all;
}
.layoutbox:focus{outline:0; border-color:var(--brass)}

/* ---------- edit mode ---------- */
.tool.edit-toggle b{color:var(--brass); margin-right:4px}
.tool.edit-toggle.active b{color:#2a1a08}
/* A border on the stage so there is never any doubt which mode you are in. */
#stage.editmode{box-shadow:inset 0 0 0 3px rgba(245,197,66,.55)}
#stage.editmode #world{cursor:pointer}
#stage.carrying #world{cursor:grabbing}

#pieceMenu{
  position:absolute; z-index:19; transform:translate(-50%,-100%);
  background:rgba(36,27,22,.97); border:1px solid var(--brass);
  border-radius:10px; padding:7px 9px 6px; box-shadow:var(--shadow);
  text-align:center; pointer-events:auto; white-space:nowrap;
}
#pieceMenu #pmName{
  display:block; font-size:9px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--brass); margin-bottom:5px;
}
#pieceMenu .pm-row{display:flex; gap:5px; justify-content:center}
#pieceMenu .pm{
  width:34px; height:30px; font-size:15px; line-height:1;
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  transition:.12s;
}
#pieceMenu .pm:hover{border-color:var(--brass); background:#3a2a1e}
#pieceMenu .pm.danger:hover{border-color:var(--chilli); color:#ff9b83}
#pieceMenu .pm:disabled{opacity:.3; cursor:not-allowed}
#pieceMenu .pm-hint{
  display:block; margin-top:5px; font-size:8px; color:var(--muted); letter-spacing:.05em;
}

/* ---------- the expansion ladder ---------- */
.terrtable tr.terr-head td{background:rgba(245,197,66,.07); border-top:2px solid rgba(245,197,66,.28);
  padding-top:10px; padding-bottom:8px; letter-spacing:.06em}
.terrtable tr.terr-head.shut td{background:rgba(120,130,140,.06); border-top-color:rgba(150,160,170,.20)}
.terrtable tr.terr-head .sub{display:inline; font-size:8px}
.terrtable tr.shut td{opacity:.45}

/* The hint sits on its own row and never wraps, so the bar keeps a
   predictable height instead of growing into the toolbar below it. */
#editbar .eb-hint{flex-basis:100%; white-space:nowrap; text-align:center; padding-top:2px}

/* ---------- trophies ---------- */
.trophybar{height:9px; background:#1a1310; border:1px solid var(--line); border-radius:99px;
  overflow:hidden; margin:0 0 16px}
.trophybar i{display:block; height:100%; background:linear-gradient(90deg,var(--chilli),var(--brass-hi))}
h3.trophy-h{margin:18px 0 8px}
h3.trophy-h .sub{font-size:9px; color:var(--muted); letter-spacing:.06em}
.trophygrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:7px}
.trophy{
  position:relative; padding:9px 10px 9px 30px; border-radius:9px;
  background:var(--panel-2); border:1px solid var(--line); opacity:.5;
}
.trophy.won{opacity:1; border-color:#6b5a2c; background:#33271a}
.trophy .t-mark{position:absolute; left:9px; top:8px; font-size:13px; color:var(--muted)}
.trophy.won .t-mark{color:var(--brass-hi)}
.trophy .t-name{display:block; font-size:10.5px; color:var(--cream); letter-spacing:.04em}
.trophy.won .t-name{color:var(--brass-hi)}
.trophy .t-desc{display:block; font-size:9px; color:var(--muted); line-height:1.5; margin-top:3px}
.trophy .t-when{display:block; font-size:8px; color:#7f6a4a; margin-top:4px; letter-spacing:.06em}
.trophy.secret .t-name{font-style:italic; color:var(--muted)}

/* ---------- build cards: show what you are buying ---------- */
.card-top{display:flex; align-items:center; gap:10px; margin-bottom:7px}
.card-pic{
  width:60px; height:60px; flex:none; object-fit:contain;
  image-rendering:pixelated;
  background:linear-gradient(#2a1f18,#211812);
  border:1px solid var(--line); border-radius:8px; padding:3px;
}
.card-glyph{
  width:60px; height:60px; flex:none; display:grid; place-items:center;
  font-size:24px; color:var(--brass);
  background:linear-gradient(#2a1f18,#211812);
  border:1px solid var(--line); border-radius:8px;
}
.card-head{min-width:0}
.card-head h4{margin:0}
.card-price{font:600 15px ui-monospace,monospace; color:var(--brass-hi); margin-top:3px}

/* ---------- the bank ---------- */
.card.bank.shut{opacity:.55}
.bank-no{color:#e39a86}
.bankrow{display:flex; gap:5px; flex-wrap:wrap; margin-top:8px}
.bankrow .mini{display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 9px}
.bank-inst{font-size:8px; opacity:.85; letter-spacing:.03em}

/* ---------- achievement notifications ---------- */
#trophyHost{
  position:fixed; top:96px; right:14px; z-index:70;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.trophy-pop{
  display:flex; align-items:flex-start; gap:10px;
  width:290px; padding:11px 13px;
  background:linear-gradient(#3a2b18,#2a1f13);
  border:2px solid var(--brass); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(245,197,66,.18);
  opacity:0; transform:translateX(26px);
  transition:opacity .32s ease, transform .32s cubic-bezier(.2,.9,.3,1.3);
}
.trophy-pop.in{opacity:1; transform:translateX(0)}
.trophy-pop .tp-star{
  font-size:22px; line-height:1; color:var(--brass-hi); flex:none; margin-top:2px;
  text-shadow:0 0 10px rgba(245,197,66,.7);
}
.trophy-pop .tp-body{display:flex; flex-direction:column; gap:3px; min-width:0}
.trophy-pop .tp-kicker{
  font-size:8px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
}
.trophy-pop .tp-name{font-size:11px; color:var(--brass-hi); letter-spacing:.04em}
.trophy-pop .tp-desc{font-size:8.5px; color:var(--muted); line-height:1.55}

/* ---------- title screen ---------- */
#start{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 30%,#3a2417,#100b07 72%);
}
.start-inner{width:min(94vw,660px); text-align:center}
/* The title. Big enough to be the first thing in the room, and it
   ARRIVES rather than just being there: the letters drop in one after
   another, REMBAYUNG lands, then FURY hits harder and knocks the whole
   block half a pixel sideways. Everything after that is a slow ember
   breath, so the screen is never quite still.

   Per-letter spans are built in JS (dressTitle) because the animation
   needs a stagger index per character and hand-writing 13 of them into
   the markup would rot the moment the name changed. */
#start h1{
  font:400 clamp(30px, 6.6vw, 64px)/1.06 var(--font-display);
  /* Per-letter spans are inline-blocks, so without this the browser is
     free to break the word between two letters — and it did, right
     across the middle of the name. */
  white-space:nowrap;
  letter-spacing:.04em; margin:0 0 14px;
  color:var(--brass-hi);
  text-shadow:0 4px 0 #6d4415, 0 0 26px rgba(255,186,74,.30), 0 18px 54px rgba(216,161,58,.42);
  animation:rf-breathe 4.2s ease-in-out 1.6s infinite;
}
#start h1 span{
  display:block; color:var(--chilli); white-space:nowrap;
  font-size:clamp(26px, 5.2vw, 52px); letter-spacing:.13em; margin-top:12px;
  text-shadow:0 4px 0 #5b1d13, 0 0 30px rgba(200,60,42,.44);
}
#start h1 i{
  display:inline-block; font-style:normal; opacity:0;
  animation:rf-slam .44s cubic-bezier(.2,1.5,.32,1) forwards;
  animation-delay:calc(var(--i) * 52ms);
}
#start h1 span i{
  animation:rf-slam-hard .5s cubic-bezier(.2,1.6,.3,1) forwards;
  animation-delay:calc(620ms + var(--i) * 62ms);
}
@keyframes rf-slam{
  0%   {opacity:0; transform:translateY(-.6em) scale(1.55) rotate(-5deg)}
  58%  {opacity:1; transform:translateY(.07em) scale(.93) rotate(1deg)}
  100% {opacity:1; transform:none}
}
/* FURY comes down heavier and overshoots further */
@keyframes rf-slam-hard{
  0%   {opacity:0; transform:translateY(-.85em) scale(2.1) rotate(7deg)}
  52%  {opacity:1; transform:translateY(.13em) scale(.86) rotate(-2deg)}
  76%  {transform:translateY(-.03em) scale(1.05)}
  100% {opacity:1; transform:none}
}
/* the impact shove, once, as FURY lands */
#start h1.hit{animation:rf-shake .34s steps(2,end) 1, rf-breathe 4.2s ease-in-out 1.6s infinite}
@keyframes rf-shake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-3px,2px)}  40%{transform:translate(3px,-2px)}
  60%{transform:translate(-2px,-1px)} 80%{transform:translate(2px,1px)}
}
@keyframes rf-breathe{
  0%,100%{text-shadow:0 4px 0 #6d4415, 0 0 26px rgba(255,186,74,.30), 0 18px 54px rgba(216,161,58,.42)}
  50%    {text-shadow:0 4px 0 #6d4415, 0 0 40px rgba(255,201,102,.52), 0 22px 66px rgba(216,161,58,.55)}
}
@media (prefers-reduced-motion:reduce){
  #start h1, #start h1 i, #start h1 span i, #start h1.hit{animation:none; opacity:1; transform:none}
}
.start-tag{color:var(--muted); font-style:italic; margin:0 0 22px; font-size:11px}
.start-blurb{
  color:var(--cream); font-size:10px; line-height:1.9; margin:0 auto 26px;
  max-width:430px; opacity:.88;
}
.start-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.start-go{min-width:168px; padding:13px 20px; font-size:13px}
.start-save{margin:16px 0 0; font-size:9px; color:var(--muted); letter-spacing:.05em}
.start-keys{
  display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:center;
  margin-top:30px; padding-top:18px; border-top:1px solid var(--line);
}
.start-keys span{font-size:8.5px; color:#7f6a4a; letter-spacing:.07em}
.start-keys b{color:var(--brass); font-weight:400}

/* ---------- title-screen menu ---------- */
.start-view{animation:startIn .22s ease}
@keyframes startIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.start-h{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass); margin:0 0 14px;
}
.start-body{
  text-align:left; max-width:440px; margin:0 auto; color:var(--cream);
  font-size:9.5px; line-height:2; opacity:.9;
}
.start-body p{margin:0 0 11px}
.start-body b{color:var(--brass-hi); font-weight:400}
.start-body .dim{color:var(--muted); font-style:italic}
.start-links{display:flex; gap:14px; justify-content:center; margin-top:22px; flex-wrap:wrap}
.start-link{
  font-size:9.5px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid transparent; padding:3px 1px;
}
.start-link:hover{color:var(--brass-hi); border-bottom-color:var(--brass)}
.start-link.back{display:block; margin:22px auto 0}
.start-body.set{max-width:360px}
.setrow{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px solid rgba(74,53,39,.5); cursor:pointer;
}
.setrow span{font-size:9.5px; letter-spacing:.06em; color:var(--cream)}
.setrow span b{float:right; margin-left:10px; color:var(--brass); font-weight:400}
.setrow input[type=range]{width:150px}
.setrow input[type=checkbox]{width:16px; height:16px; accent-color:var(--brass)}

/* =============================================================
   PHONE
   The game is a canvas with panels floating over it, so the work
   is making the chrome get out of the way rather than reflowing
   a document. Gestures need `touch-action:none` on the canvas or
   the browser eats the drag to scroll the page.
   ============================================================= */
#world{touch-action:none}
#stage{touch-action:none}

@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) {
  /* --- HUD: two tight rows instead of one wide one --- */
  #hud{gap:8px; padding:7px 9px; flex-wrap:wrap}
  #clock{width:44px; height:44px}
  .timebox #hudTime{font-size:13px}
  .timebox #hudDate{font-size:8px; margin-top:3px}
  .pill{font-size:8px; padding:1px 7px; margin-top:3px}
  .hud-stats{gap:5px; width:100%; margin-left:0; order:3}
  .stat{min-width:0; flex:1 1 0; padding:4px 7px}
  .stat label{font-size:7.5px; letter-spacing:.06em}
  .stat b{font-size:11px}
  .hud-right{margin-left:auto}
  .hud-right .ghost{padding:7px 9px; font-size:11px}

  /* --- trays: narrow, and out of the way of the thumbs --- */
  #queueTray,#advisor{
    width:150px; padding:8px; font-size:10px; border-radius:9px;
    max-height:34vh; overflow:auto;
  }
  #queueTray{left:7px; top:7px}
  #advisor{right:7px; top:7px; width:158px}
  #queueTray h4,#advisor h4{font-size:8.5px; margin-bottom:6px}
  .hint,.adv{font-size:9px}
  .party .n{font-size:12px; width:15px}

  /* --- toolbar: scrolls sideways, thumb-sized --- */
  #toolbar{
    bottom:7px; left:7px; right:7px; transform:none; max-width:none;
    overflow-x:auto; justify-content:flex-start; padding:6px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  #toolbar::-webkit-scrollbar{display:none}
  .tool{padding:11px 13px; font-size:11px; flex:0 0 auto}

  /* the edit bar sits above it and scrolls the same way */
  #editbar{
    bottom:62px; left:7px; right:7px; transform:none; max-width:none;
    overflow-x:auto; flex-wrap:nowrap; padding:6px 8px;
  }
  #editbar::-webkit-scrollbar{display:none}
  .eb{flex:0 0 auto; padding:9px 11px}
  .eb-title{flex:0 0 auto}

  /* --- modals take the screen; they are the whole task on a phone --- */
  #modal{padding:0}
  /* The PANEL is .sheet. An earlier version of this rule said
     `#modal .card`, which also matched every content card inside the
     panel and blew each one out to a full 100vw — 12px past its own
     padded parent. */
  #modal .sheet{
    max-width:none; width:100vw; max-height:100dvh; height:100dvh;
    border-radius:0; border:0;
  }
  #modalBody{padding:14px 12px 90px}
  .grid2{grid-template-columns:1fr}
  table{font-size:9px}
  th,td{padding:5px 4px}

  /* --- floating bits scale up so a finger can hit them --- */
  #pieceMenu .pm{width:44px; height:40px; font-size:18px}
  #trophyHost{top:auto; bottom:120px; right:7px; left:7px}
  .trophy-pop{width:auto}

  /* --- title screen --- */
  #start h1{font-size:clamp(30px,11vw,46px)}
  #start h1 span{font-size:clamp(24px,8.4vw,36px)}
  .start-blurb,.start-body{font-size:9px; line-height:1.85}
  .start-go{min-width:0; width:100%; padding:15px}
  .start-actions{flex-direction:column}
  .start-keys{gap:5px 11px}
  #viewPanel,#adjPanel{width:min(94vw,300px); max-height:70dvh; overflow:auto}
}

/* very small phones: drop the trays entirely, the canvas is the game */
@media (max-width: 420px){
  #queueTray,#advisor{display:none}
}

/* ---------- phone: panels that were built for a desktop ---------- */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) {
  /* Nothing may push the panel sideways. Wide content scrolls inside
     its own box instead — a table you can swipe beats a table with its
     last three columns off the edge of the phone. */
  #modalBody{overflow-x:hidden}
  #modalBody table{
    display:block; width:100%; overflow-x:auto; white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }
  #modalBody table::-webkit-scrollbar{height:4px}
  #modalBody table::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px}

  /* the menu carries a thumbnail per row; shrink it rather than lose it */
  .menutable td.pic img,.menutable .nopic{width:26px; height:26px}
  .menutable input[type=number]{width:62px}

  /* seat previews sit side by side on a desktop — stack them */
  .seatgrid{grid-template-columns:repeat(2,1fr)}
  .seatpreview{width:100%; height:auto; max-width:200px; margin:0 auto}

  /* the globe canvas is fixed-width; let it shrink with the panel */
  #globeWrap{width:100%; overflow:hidden}
  #globeCanvas{width:100%; height:auto}

  /* trophies: one column reads better than two squeezed ones */
  .trophygrid{grid-template-columns:1fr}

  /* and the residual sliver from card padding */
  #modal .sheet,#modalBody{overflow-x:hidden}
  .grid2{min-width:0}
  .card{min-width:0; overflow-wrap:anywhere}
}

/* ---------- phone: the last three offenders ---------- */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) {
  /* .card sits at 100% of a padded parent, so its own border pushed it
     12px past the edge. Let the border sit inside the width. */
  #modalBody .card{max-width:100%; box-sizing:border-box}
  #modalBody .grid2{width:100%; max-width:100%}

  /* the seat picker lays its slots out in a row that never wrapped */
  .seatslot{width:auto !important; max-width:100%}
  #modalBody .seatslot{flex:1 1 130px; min-width:0}
  .ss-lab{max-width:100%; overflow-wrap:anywhere; white-space:normal}
}

/* ---------- tile palette ---------- */
.tilegrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr));
  gap:6px; margin:0 0 14px}
.tilepick{padding:3px; border:2px solid var(--line); border-radius:8px;
  background:var(--panel-2); line-height:0; transition:.12s}
.tilepick img{width:100%; height:auto; image-rendering:pixelated; border-radius:4px}
.tilepick:hover{border-color:var(--brass)}
.tilepick.on{border-color:var(--brass-hi); box-shadow:0 0 0 2px rgba(245,197,66,.3)}

/* ---------- tiles palette: grouped by surface ---------- */
h3.tile-h{margin:14px 0 7px; font-size:10px}
h3.tile-h .sub{display:inline; font-size:8px; margin-left:6px; letter-spacing:.04em}
.tilepick.tarmac{
  background:repeating-linear-gradient(45deg,#2b2d30 0 5px,#232528 5px 10px);
  min-height:52px;
}

/* ---------- adjuster checkboxes ---------- */
label.adj-check{
  display:flex; align-items:center; gap:8px; margin:8px 0 4px;
  font-size:9px; color:var(--cream); cursor:pointer; letter-spacing:.04em;
}
label.adj-check input{width:15px; height:15px; accent-color:var(--brass)}

/* ---------- visiting a branch ---------- */
#branchBar{
  position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:22;
  display:flex; align-items:center; gap:14px; padding:9px 14px;
  background:rgba(36,27,22,.96); border:1px solid var(--brass);
  border-radius:12px; box-shadow:var(--shadow); backdrop-filter:blur(8px);
}
#branchBar #branchWho{font-size:10px; letter-spacing:.06em; color:var(--brass-hi)}
@media (max-width:760px){
  #branchBar{left:7px; right:7px; transform:none; flex-wrap:wrap; justify-content:space-between}
}

/* Overtime money. Every figure the player is being asked to SPEND
   past closing reads in chilli, so the bill is the loudest thing in
   the panel rather than a number buried in a sentence. */
.cost-ot{color:var(--chilli); font-weight:700}

/* The nudge pad. Laid out as a cross rather than a row so the
   arrows read as directions on the floor instead of four more
   buttons in a toolbar. */
.pm-dpad{display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:4px}
.pm-dpad{grid-template-columns:repeat(2,1fr)}

/* Name box on the title screen. Deliberately optional-looking —
   it sits above the buttons rather than in front of them, because a
   blank one is a valid answer and should not read as a wall. */
.start-name{display:flex; flex-direction:column; gap:6px; align-items:center; margin:0 0 14px}
.start-name span{font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.start-name input, .setrow input[type=text]{
  font:400 12px/1 var(--font-body); color:var(--cream); text-align:center;
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; min-width:190px; outline:none;
}
.start-name input:focus, .setrow input[type=text]:focus{border-color:var(--brass)}
.setrow input[type=text]{text-align:left; min-width:0; width:150px; padding:7px 9px}

/* The identity gate. Same ground as the title screen so it reads as the
   same product rather than a login bolted onto the front. */
#gate{
  /* Above the boot screen (100) and the title screen (120): this is
     the FIRST thing, so nothing may paint over it. */
  position:fixed; inset:0; z-index:140; display:flex;
  align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 38%, #2a1d16 0%, #150e0a 70%, #0c0806 100%);
}
#gate[hidden]{display:none}
.gate-inner{width:min(92vw,420px); text-align:center; padding:26px 22px}
.gate-inner h2{
  font:400 clamp(24px,5.4vw,38px)/1.1 var(--font-display); margin:0 0 10px;
  color:var(--brass-hi); letter-spacing:.04em;
  text-shadow:0 3px 0 #6d4415, 0 0 24px rgba(255,186,74,.26);
}
.gate-sub{color:var(--cream); font-size:10px; line-height:1.8; margin:0 0 22px; opacity:.9}
#gateGoogle{display:flex; justify-content:center; min-height:44px; margin-bottom:14px}
#gate .start-go{width:100%; max-width:240px}
.gate-fine{color:var(--muted); font-size:9px; line-height:1.9; margin:20px auto 0; max-width:330px}
.gate-note{color:var(--brass); font-size:9px; line-height:1.8; margin:10px 0 0; min-height:12px}

/* the diner-layer picker, matching the text inputs beside it */
.setrow select{
  font:400 11px/1 var(--font-body); color:var(--cream);
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  padding:7px 9px; outline:none;
}
.setrow select:focus{border-color:var(--brass)}

/* Kanta Review. Deliberately plain and list-like rather than
   styled up: it is meant to read as other people talking about
   the shop, not as another readout the game is giving you. */
.kanta-row{border-top:1px solid var(--line); padding:8px 0 6px}
.kanta-row:first-of-type{border-top:0}
.kanta-head{display:flex; align-items:center; gap:8px}
.kanta-head b{font-size:10px; letter-spacing:.06em; color:var(--cream)}
.kanta-stars{letter-spacing:1px; font-size:10px}
.kanta-on{color:var(--brass-hi)} .kanta-off{color:#4a3a2a}
.kanta-text{margin:3px 0 0; font-size:10px; line-height:1.7; color:var(--muted)}
.kanta-fix{margin:10px 0 0; font-size:10px; line-height:1.7; color:var(--brass)}

/* The founder feed. A plain running list — every line is one
   movement of money, newest at the top. */
.fdr-row{display:flex; justify-content:space-between; align-items:baseline;
  padding:4px 0; border-top:1px solid var(--line); font-size:10px}
.fdr-row:first-child{border-top:0}
.fdr-why{color:var(--muted); letter-spacing:.04em}

/* The tutorial hand. Above everything except the tutorial card
   itself, and it nudges toward its target so the eye catches the
   movement before it reads the words. */
#tutHand{
  position:fixed; width:52px; height:44px; z-index:150;
  background-repeat:no-repeat; background-size:contain;
  image-rendering:pixelated; pointer-events:none;
  animation:tut-nudge 1.1s ease-in-out infinite;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.55));
}
#tutHand[hidden]{display:none}
#tutHand.flip{transform:scaleX(-1); animation-name:tut-nudge-flip}
@keyframes tut-nudge{0%,100%{margin-left:0} 50%{margin-left:-7px}}
@keyframes tut-nudge-flip{0%,100%{margin-left:0} 50%{margin-left:7px}}
@media (prefers-reduced-motion:reduce){#tutHand{animation:none}}

/* The tuning readout and its copy button. The text wraps and can
   be selected by hand, but the button is the point: this line is
   what gets handed over, so taking it should be one press. */
.adj-readout{margin-top:10px; border-top:1px solid var(--line); padding-top:8px}
.adj-readout .hint{user-select:text; word-break:break-word; margin:0 0 6px}
.adj-readout button{width:100%}

/* Suggestions, bottom right of the title screen. Small and out of
   the way until pressed — it should be findable, not the first
   thing competing with New Game. */
#suggestBox{position:fixed; right:14px; bottom:14px; z-index:130; width:min(88vw,300px);
  display:flex; flex-direction:column; align-items:flex-end; gap:6px}
#suggestBox[hidden]{display:none}
#suggestToggle{
  font:400 9px/1 var(--font-body); letter-spacing:.10em; text-transform:uppercase;
  color:var(--brass); background:rgba(36,27,22,.94); border:1px solid var(--brass);
  border-radius:8px; padding:9px 12px; cursor:pointer;
}
#suggestToggle:hover{color:var(--brass-hi); border-color:var(--brass-hi)}
#suggestPanel{
  width:100%; background:rgba(30,22,18,.97); border:1px solid var(--line);
  border-radius:10px; padding:12px; box-shadow:var(--shadow);
}
#suggestPanel[hidden]{display:none}
#suggestPanel label{display:block; font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px}
#suggestText{width:100%; box-sizing:border-box; resize:vertical;
  font:400 11px/1.6 var(--font-body); color:var(--cream);
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  padding:8px; outline:none}
#suggestText:focus{border-color:var(--brass)}
.sg-row{display:flex; gap:6px; margin-top:8px}
.sg-row button{flex:1}
.sg-note{margin:8px 0 0; font-size:9px; line-height:1.7; color:var(--muted)}

/* Credit at the foot of the title screen. Quiet on purpose — it
   should be found by someone looking for it, not compete with
   the button that starts the game. */
.start-credit{
  margin:22px 0 0; font-size:9px; line-height:1.8; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); opacity:.75;
}
.start-credit b{color:var(--brass); font-weight:400}

/* Food drifting up the title screen. Behind the menu and
   pointer-transparent, so it can never sit between the player and
   the button that starts the game. */
#startFood{
  position:absolute; inset:0; overflow:hidden;
  pointer-events:none; z-index:0;
}
#startFood .sf{
  position:absolute; bottom:-90px; opacity:0;
  image-rendering:pixelated;
  animation:sfRise linear forwards;
}
@keyframes sfRise{
  0%   {transform:translate(0,0) scale(.86);        opacity:0}
  14%  {opacity:.55}
  70%  {opacity:.42}
  100% {transform:translate(var(--drift,0), -78vh) scale(1.04); opacity:0}
}
/* The menu itself has to sit above the drift. */
#start .start-inner{position:relative; z-index:1}

@media (prefers-reduced-motion: reduce){
  #startFood{display:none}
}

/* A piece-menu button that is currently ON — the green-placer
   quarter turn, which is a state rather than an action. */
.pm.on{color:#8ce88c; border-color:#8ce88c; background:rgba(140,232,140,.12)}