*{box-sizing:border-box;margin:0}
/* --muted must hold 4.5:1 on white (WCAG AA small text) — it labels every section header. */
:root{--bg:#F4EFE7;--panel:#fff;--ink:#2B2A28;--muted:#6E6A61;--accent:#9C7A4D;--danger:#B04343;--line:#E4DCCE}
body{font:14px/1.45 "Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--ink);height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
header{display:flex;align-items:center;justify-content:space-between;padding:8px 22px;min-height:56px;border-bottom:1px solid var(--line);background:var(--panel);flex:none;flex-wrap:wrap;gap:6px}
.lockModel{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink,#333);margin-right:4px;cursor:pointer;user-select:none;white-space:nowrap}
.lockModel input{accent-color:#1A1A1A;cursor:pointer}
/* The "back to Anna's Corner" link riding inside the h1 — it is the only way home on a
   phone, where the h1's own text is hidden. */
.homeLink{font:600 12px/1 "Segoe UI",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--muted);text-decoration:none;vertical-align:middle;margin-right:10px;white-space:nowrap}
.homeLink:hover{color:var(--accent)}
/* Occasion picker: a native <select> so the phone gets its own wheel and keyboard users
   get arrow-key selection for free. */
#occasion{font:inherit;font-size:12.5px;padding:5px 6px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer;max-width:130px}
#occasion:hover{border-color:var(--accent)}
#occasion:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.occLabel{color:var(--muted)}
.sec h3{display:flex;align-items:center;justify-content:space-between}
.subhead{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:12px 0 6px}
.lockBtn{background:none;border:none;cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;opacity:.4;filter:grayscale(1)}
.lockBtn.locked{opacity:1;filter:none}
.lockBtn:hover{opacity:1}
h1{font-family:Didot,"Bodoni MT","Playfair Display",Georgia,serif;font-size:21px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.actions{display:flex;gap:8px}
.btn{font:inherit;padding:7px 14px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;color:var(--ink)}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.primary:hover{background:#000;color:#fff}
.btn.ghost{background:transparent}
#btnSurprise{background:linear-gradient(135deg,#E8A33D 0%,#FF4D94 48%,#6E4265 100%);color:#fff;border:none;font-weight:600;box-shadow:0 2px 8px rgba(255,77,148,.4)}
#btnSurprise:hover{filter:brightness(1.12);color:#fff;box-shadow:0 3px 12px rgba(255,77,148,.55)}
main{flex:1;display:flex;min-height:0}
#stageWrap{width:46%;min-width:420px;padding:18px;display:flex;position:relative}
#stage{flex:1;display:flex}
#stage svg{width:100%;height:100%;border-radius:14px;box-shadow:0 10px 30px rgba(60,45,20,.12)}
#controls{flex:1;display:flex;flex-direction:column;min-width:0;padding:18px 22px 0 4px}
#tabs{display:flex;gap:6px;margin-bottom:14px}
.tab{font:inherit;padding:7px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer}
.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
#panel{overflow-y:auto;padding-bottom:24px;padding-right:14px}
.sec{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.sec h3{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font:inherit;padding:8px 13px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;color:var(--ink)}
.chip:hover{border-color:var(--accent)}
.chip.sel{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.dis{opacity:.35;cursor:not-allowed}
.chip.dis:hover{border-color:var(--line)}
.swatches{display:flex;flex-wrap:wrap;gap:9px}
.swatch{width:28px;height:28px;border-radius:50%;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0}
.swatch.sel{outline:2px solid var(--accent);outline-offset:2px}
.swatch.custom{overflow:hidden;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);display:inline-block}
.swatch.custom input{opacity:0;width:100%;height:100%;cursor:pointer;border:0;padding:0}
/* Keyboard focus must read distinctly from selection (selection = accent outline). */
.chip:focus-visible,.swatch:focus-visible,.tab:focus-visible,.mtab:focus-visible,.lockBtn:focus-visible,.diceBtn:focus-visible,.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* The current color's name, echoed beside phone color rows (tooltips never show on touch). */
.mval{flex:none;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;align-self:center;padding:0 2px}
/* Surprise Me FAB: on phones the header is the worst one-handed reach zone, so the game's
   primary action floats over the stage's bottom corner instead. */
#fabSurprise{display:none;position:absolute;right:14px;bottom:12px;width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;font-size:24px;align-items:center;justify-content:center;background:linear-gradient(135deg,#E8A33D 0%,#FF4D94 48%,#6E4265 100%);color:#fff;box-shadow:0 3px 12px rgba(255,77,148,.5);z-index:30}
/* Header buttons collapse to icons on phones (.bIcon) and show text on desktop (.bTxt). */
.bIcon{display:none}
/* Fullscreen look view: the ⛶ button over the stage hides header + dock + FAB so the
   model fills the screen; same button (or Escape) exits. */
#btnFs{position:absolute;top:26px;right:26px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.85);color:var(--ink);cursor:pointer;font-size:18px;line-height:1;z-index:30}
#btnFs:hover{border-color:var(--accent);color:var(--accent)}
body.fsMode header,body.fsMode #controls,body.fsMode #fabSurprise{display:none}
body.fsMode main{overflow:hidden}
body.fsMode #stageWrap{width:100%;min-width:0;height:100dvh;flex:1 1 auto;padding:10px}
.lookRow{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line)}
.lookRow .nm{flex:1;font-weight:600}
.lookRow .dt{color:var(--muted);font-size:12px}
.saveRow{display:flex;gap:8px}
.saveRow input{flex:1;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.empty{color:var(--muted);padding:12px 2px}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:10px;transition:transform .25s;z-index:50}
#toast.show{transform:translateX(-50%) translateY(0)}
.toastBtn{margin-left:14px;background:#fff;color:var(--ink);border:none;border-radius:7px;padding:6px 14px;font:inherit;font-weight:600;cursor:pointer}
/* Pattern chips carry a live swatch beside their label. */
.patChip{display:inline-flex;align-items:center;gap:7px;padding:6px 10px}
.patChip svg{display:block;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);pointer-events:none}
.patChip span{pointer-events:none}
.lookThumb{border-radius:8px;flex:none}
.lockBtn,.diceBtn{background:none;border:none;cursor:pointer;font-size:14px;line-height:1;padding:2px 4px}
.diceBtn:hover{transform:rotate(-18deg)}
.secBtns{display:flex;gap:2px;align-items:center}
#sweepOverlay{position:fixed;top:70px;left:26px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px;box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:40;font-size:13px;max-width:400px}
#sweepOverlay b{font-size:16px}
.actions{flex-wrap:wrap}
/* Old-school visitor counter (counter.js) pinned to the bottom-right, clear of the model. */
#hitDock{position:fixed;right:22px;bottom:14px;z-index:45;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 10px;box-shadow:0 4px 14px rgba(60,45,20,.14)}
.hit-counter{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--muted)}
.hit-counter-label{font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.hit-digits{display:inline-flex;gap:2px}
.hit-digit{font-family:"Courier New",Courier,monospace;font-weight:700;font-size:12px;line-height:1;color:#39ff14;background:#0d0d0d;padding:3px 4px;border-radius:3px;box-shadow:inset 0 0 4px rgba(0,0,0,.9),0 0 2px rgba(57,255,20,.5);text-shadow:0 0 5px rgba(57,255,20,.85)}
/* Phone: sit just above the fixed control dock, on the LEFT (the Surprise FAB owns the
   bottom-right corner of the stage), so it never overlaps controls, model or FAB. */
@media(max-width:700px){#hitDock{left:12px;right:auto;bottom:calc(16.5em + 12px)}.hit-counter-label{display:none}}
/* The app hides the h1 on phones to slim the header, but on the SITE the h1 carries the
   "back to Anna's Corner" link — keep the link, hide only the title text. */
@media(max-width:700px){h1{display:block;flex:none}h1 .h1txt{display:none}}

/* The app hides the h1 on phones to slim the header, but on the SITE the h1 carries the
   "back to Anna's Corner" link — keep the link, hide only the title text. */
@media(max-width:700px){h1{display:block;flex:none}h1 .h1txt{display:none}}
/* Tablet: stack stage over controls, page scrolls as one column. */
@media(max-width:980px){
  main{flex-direction:column;overflow:auto}
  #stageWrap{width:100%;min-width:0;height:58vh;flex:none}
  #controls{padding:14px 16px 0 16px}
  #panel{overflow-y:visible;padding-right:0}
}
/* Phone: game layout. The model fills all space above a fixed control dock; every choice is a
   horizontally swipeable row — no vertical scrolling to reach a control. */
@media(max-width:700px){
  /* Header is two fixed rows — title + toggles, then the four buttons filling the width.
     Nothing scrolls or overflows. */
  /* One slim header row: title dropped, action buttons are icons beside the two toggles. */
  header{padding:2px 10px;flex-wrap:nowrap;gap:8px;min-height:0}
  /* Keep the h1 BOX (it carries the "← Home" link, the only way back to Anna's Corner on a
     phone) and hide only the title text. Do NOT collapse to display:none here: this block
     wins on cascade order and would take the link with it. */
  h1{display:block;flex:none}
  h1 .h1txt{display:none}
  .actions{flex:1;flex-wrap:nowrap;gap:4px;justify-content:space-between;overflow-x:auto;scrollbar-width:none}
  .actions::-webkit-scrollbar{display:none}
  .btn{padding:5px 9px;font-size:12.5px;white-space:nowrap;flex:none;min-height:42px}
  .bTxt{display:none}
  .bIcon{display:inline;font-size:17px;line-height:1}
  .lockModel{font-size:11.5px;flex:none;margin-right:0;padding:8px 0}
  /* "For" is redundant once the row is tight — the occasion names speak for themselves. */
  .occLabel{display:none}
  #occasion{max-width:96px;font-size:12px;min-height:42px}
  #btnFs{top:10px;right:12px;width:38px;height:38px}
  /* Surprise lives in the FAB over the stage on phones — drop the header copy. */
  #btnSurprise{display:none}
  #fabSurprise{display:flex}
  main{flex-direction:column;overflow:hidden}
  #stageWrap{width:100%;min-width:0;flex:1 1 auto;min-height:0;height:auto;padding:4px 8px}
  /* Fixed dock height so the model NEVER changes size as menus change. Sized in em (not px)
     so Android font scaling grows the dock instead of clipping the option row. The dock is a
     flex column: tabs are pinned (flex:none) and the panel gets exactly the remaining space,
     scrolling internally — so panel content can never ride up over the tab pills. */
  #controls{flex:none;height:16.5em;max-height:55dvh;overflow:hidden;padding:6px 10px 8px 10px;display:flex;flex-direction:column}
  #tabs{flex:none}
  #panel{flex:1;min-height:0}
  #tabs{overflow-x:auto;margin-bottom:8px;scrollbar-width:none}
  #tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap;flex:none;padding:7px 14px}
  #panel{overflow:hidden auto;padding:0}
  .mrow{display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 2px;align-items:center;
    /* Scrollbars are hidden, so fade the edges to signal there's more off-screen. */
    mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent)}
  .mrow::-webkit-scrollbar{display:none}
  .mrow .chip,.mrow .swatch,.mrow .lockBtn{flex:none;white-space:nowrap}
  .mrow .chips,.mrow .swatches{display:contents}
  .mtab{font:inherit;font-size:12px;letter-spacing:.05em;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--muted);flex:none;white-space:nowrap}
  /* Ink on-state (not accent): white-on-accent was 3.96:1, and the active pill is the one
     thing the player must always be able to read. */
  .mtab.on{background:var(--ink);border-color:var(--ink);color:#fff}
  .sec{padding:12px}
}
/* Motion here is all decoration — the toast slide, the dice tilt, the scroll-into-view that
   recenters a selected chip. None of it carries meaning, so drop it all when asked. */
@media(prefers-reduced-motion:reduce){
  #toast{transition:none}
  .diceBtn:hover{transform:none}
  html{scroll-behavior:auto}
}
/* Touch devices: 44px+ tap targets on everything the finger actually uses. */
@media(pointer:coarse){
  .chip{padding:11px 15px;min-height:44px}
  .swatch{width:40px;height:40px;margin:2px}
  .lockBtn,.diceBtn{font-size:18px;padding:10px 11px;min-width:44px;min-height:44px}
  .tab{padding:10px 18px;min-height:44px}
  .mtab{min-height:44px;padding:10px 14px}
}