/* ============================================================
   The visual system
   Palette: laminated office signage, dark-mode intranet
   ============================================================ */
:root{
  /* Dusk on Isla Solana: a violet night, coral light, gold on the water. */
  --ink:#1a1026;          /* deep dusk   */
  --ink2:#221432;
  --panel:#2a1a3a;
  --panel2:#342247;
  --line:#5a3a6a;
  --line-soft:rgba(255,255,255,.08);   /* the same edge, whispered — see the mobile block */
  --text:#fff1e6;
  --dim:#c7a6bd;
  --brand:#ff6f91;        /* coral pink  */
  --hold:#ffb347;         /* sunset gold */
  --good:#5ad4a8;
  --bad:#ff5f56;
  --purple:#c79bff;
  --carpet:#3a2448;
  --radius:12px;
  --mono:ui-monospace,"Cascadia Mono","Consolas","DejaVu Sans Mono",monospace;
  --ui:"Trebuchet MS","Segoe UI",Tahoma,Verdana,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* No double-tap zoom anywhere, not just on the canvas: a double tap on a
   button, a card or the HUD zoomed the whole page. Panning and scrolling stay;
   the explicit touch-action:none rules elsewhere win over this. */
html,body,*{touch-action:manipulation}
/* A home-screen app on an iPhone can report itself shorter than the glass
   (by the status bar, or the home bar) while drawing from the very top, and
   what was left over showed as a black bar along the bottom. The page itself
   is made as tall as the screen there, so nothing behind the world is ever
   short of it (#stage, css/hud.css, goes further). */
@media (display-mode: standalone){
  html,body{min-height:calc(100% + env(safe-area-inset-bottom))}
  @supports (height:100lvh){ html,body{min-height:max(100lvh,calc(100% + env(safe-area-inset-bottom)))} }
}
body{
  background:var(--ink);color:var(--text);font-family:var(--ui);
  overflow:hidden;-webkit-tap-highlight-color:transparent;
  /* The page never scrolls, but a phone will still rubber-band it and offer to
     refresh — mid-shift, from a thumb that was steering. */
  overscroll-behavior:none;
  /* All three, prefixed: Safari before 16.4 ignores unprefixed user-select, so a
     thumb steering would select text; -webkit-touch-callout stops the
     long-press magnifier. */
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
button{font-family:inherit;color:inherit}
/* `inset:0` on a fixed element uses the large viewport, putting the bottom of
   the game under a visible address bar. `dvh` fixes it; R.fitViewport() then
   pins it to visualViewport exactly. */
#app{position:fixed;left:0;top:0;width:100%;height:100vh;display:flex;align-items:center;justify-content:center}
@supports (height:100dvh){ #app{height:100dvh} }

/* ---------- shared bits ---------- */
.badge{
  display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--hold);border:1px solid var(--line);
  padding:3px 8px;border-radius:4px;background:rgba(255,179,71,.06)
}
.btn{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:8px;padding:10px 16px;cursor:pointer;
  font-size:14px;letter-spacing:.02em;transition:transform .08s,border-color .15s,background .15s;
}
.btn:hover{border-color:var(--brand);background:linear-gradient(180deg,#2a3648,var(--panel2))}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--hold);outline-offset:2px}
.btn.primary{border-color:var(--brand);box-shadow:0 0 0 1px rgba(255,111,145,.18),0 8px 24px -12px var(--brand)}
.btn.small{padding:6px 10px;font-size:12px}
.btn:disabled{opacity:.4;cursor:not-allowed;border-color:var(--line)}
.btn:disabled:hover{background:linear-gradient(180deg,var(--panel2),var(--panel));border-color:var(--line)}
.kbd{font-family:var(--mono);font-size:11px;background:#0c1018;border:1px solid var(--line);
  border-bottom-width:2px;border-radius:4px;padding:2px 6px;color:var(--hold)}
.scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.scroll::-webkit-scrollbar{width:8px}
.scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}

/* signature: every panel is a laminated office sign with a hanging tab */
.sign{position:relative;background:linear-gradient(180deg,var(--panel),var(--ink2));
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 30px 80px -30px #000,inset 0 1px 0 rgba(255,255,255,.05)}
.sign::before{content:"";position:absolute;top:-1px;left:22px;right:22px;height:3px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);opacity:.7}
.sign-title{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px dashed var(--line);padding:12px 16px;display:flex;
  justify-content:space-between;align-items:center;gap:8px}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  justify-content:center;padding:24px;text-align:center;
  /* A phone in landscape is shorter than the hero is tall. Let the screen scroll
     rather than quietly cropping the buttons off the bottom edge. */
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-top:calc(24px + env(safe-area-inset-top));
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
  background:radial-gradient(1200px 700px at 50% 30%,#182233,var(--ink) 70%)}
.screen.on{display:flex;animation:fadeIn .45s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}


#nameScreen .sign{width:min(520px,94vw);padding:0 0 22px}
#nameInput{width:calc(100% - 44px);margin:18px 22px 6px;background:#0b0f16;border:1px solid var(--line);
  border-radius:8px;color:var(--text);font-family:var(--mono);font-size:20px;padding:14px 16px;text-align:center;letter-spacing:.08em}
#nameInput:focus{outline:none;border-color:var(--brand)}
.field-note{color:var(--dim);font-size:12px;padding:0 22px 12px}

/* ---------- the character creator ----------
   Preview and pickers side by side where there is width, stacked where not:
   the character must always show. */
/* Over the game, which follows it in the page: the wardrobe opens this in play. */
#lookScreen{z-index:27}
#lookScreen .sign{width:min(680px,94vw);padding:0 0 18px}
.look-body{display:flex;gap:18px;align-items:stretch;padding:18px 22px 4px;text-align:left}
/* 140x200 fits the 56px sprite at a whole-number 3x scale, plus margin. */
#lookView{flex:0 0 140px;width:140px;height:200px;border-radius:10px;
  border:1px solid var(--line);background:
    linear-gradient(180deg,#0e131c,#0a0d14);
  /* Pixel art at whole-number scale. The canvas draws nearest-neighbour too;
     this is for the browser's own upscale on a HiDPI screen. */
  image-rendering:pixelated}
.look-pick{flex:1 1 auto;display:flex;flex-direction:column;gap:8px;min-width:0}
.look-row{display:grid;grid-template-columns:88px 1fr;gap:10px;align-items:center}
.look-row label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.look-row select{width:100%;min-width:0;background:#0b0f16;border:1px solid var(--line);
  border-radius:7px;color:var(--text);font-family:var(--ui);font-size:13px;padding:8px 9px}
.look-row select:focus{outline:none;border-color:var(--brand)}
/* One part at a time: tabs along the top, then its styles as chips and its
   colours as swatches (engine/look.js render()). */
.look-tabs{display:flex;flex-wrap:wrap;gap:4px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.look-tab{background:transparent;border:1px solid transparent;border-radius:999px;color:var(--dim);
  font-family:var(--ui);font-size:12px;padding:5px 10px;cursor:pointer}
.look-tab:hover{color:var(--text)}
.look-tab.on{color:var(--text);border-color:var(--brand);background:rgba(255,111,145,.12)}
.look-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.look-label b{color:var(--text);font-weight:400;letter-spacing:.06em}
.look-styles{display:flex;flex-wrap:wrap;gap:5px}
.look-chip{background:#0b0f16;border:1px solid var(--line);border-radius:999px;color:var(--text);
  font-family:var(--ui);font-size:12px;padding:6px 11px;cursor:pointer}
.look-chip:hover{border-color:var(--dim)}
.look-chip.on{border-color:var(--brand);background:rgba(255,111,145,.18)}
.look-swatches{display:flex;flex-wrap:wrap;gap:6px}
.look-swatch{width:28px;height:28px;border-radius:50%;padding:0;cursor:pointer;background:var(--sw);
  border:2px solid rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.look-swatch:hover{border-color:var(--dim)}
.look-swatch.on{border-color:#fff;box-shadow:0 0 0 2px var(--brand),inset 0 0 0 1px rgba(0,0,0,.35)}
.look-tab:focus-visible,.look-chip:focus-visible,.look-swatch:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.look-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:6px 22px 0}
#lookNote{display:none}
#lookNote.on{display:block;color:var(--hold)}