@charset "UTF-8";
@font-face { font-family:"Cafe WenKai"; src:url('assets/fonts/cafe-wenkai.woff2?v=2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; }
:root {
  /* Defaults are autumn; main.ts applies the current theme's palette (cat-blocks content/themes.ts). */
  --bg:#1d2f27; --text:#f6f1e0; --muted:#c9d3b6; --line:#4f6646; --topbar:#192b26ee; --panel:#1f3a2ef0; --scrim:#13231cb3;
  --choice:#22402f; --choice-line:#7f9a5c; --select:#d4e595; --select-ink:#2f3a12;
  --accent:#d4e595; --accent-ink:#2f3a12; --highlight:#f0b267; --link:#d4e595;
  --button:#34503a; --button-ink:#f6f1e0; --button-line:#7f9a5c; --strong:#d4e595; --strong-ink:#2f3a12;
  --board:#2c3a2a; --grid:#3c4b39; --frame:#a8743f; --frame-outer:#6b4a26; --scene-bg:#1d2f27;
  --scene-image:none; --scene-fallback:linear-gradient(180deg,#22343a,#5a3d22);
  /* The shop itself and the sheet under it keep their own warm colors in every theme. */
  --paper:#faf1de; --ink:#2f3a24; --ink-soft:#5f6650; --card:#fffaf0; --card-line:#e3d5b5;
  --wall:#f3e4c4; --wall-low:#e6d0a6; --wainscot:#9a6a3e; --plank:#a77a4c; --plank-dark:#946a40;
  --wood:#b5814f; --wood-dark:#7a522e; --chair:#5c7a3a; --frame-green:#36502f;
  --good:#5c7412; --good-soft:#eef5d2; --warn:#c4672a; --warn-soft:#fbe9df;
  --avatar-bg:#5c7412;
  color-scheme:dark; color:var(--text); background:var(--bg);
  font-family:"PingFang TC","Microsoft JhengHei",sans-serif; font-synthesis:none;
}
* { box-sizing:border-box; scrollbar-color:#a1af8b var(--bg); }
body { margin:0; min-width:320px; }
button,input,a { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { font:inherit; cursor:pointer; color:inherit; border:0; background:none; padding:0; }
button:disabled { cursor:default; }
a { color:inherit; text-underline-offset:5px; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid var(--highlight); outline-offset:3px; }
::selection { color:var(--accent-ink); background:var(--accent); }
[hidden] { display:none!important; }
.symbols,.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
h1,h2,h3,h4,p { margin:0; }
h1,h2 { font-family:"Cafe WenKai",serif; text-wrap:balance; font-weight:500; }
button:hover:not(:disabled) { filter:brightness(1.05); }

/* ---------- top bar (same as the other games) ---------- */
.topbar { max-width:1280px; margin:auto; padding:14px 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); min-height:72px; background:var(--topbar); }
.shop-link { display:flex; gap:8px; align-items:center; font-size:14px; text-decoration:none; min-height:44px; }
.shop-link svg { width:19px; }
.wordmark { font-family:"Cafe WenKai",serif; font-size:21px; }
.wordmark span { font-size:15px; color:var(--muted); }
.top-actions { display:flex; align-items:center; gap:4px; }
.quiet { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:8px; border-radius:8px; font-size:14px; text-decoration:none; }
.quiet svg { width:20px; height:20px; }
.primary,.outline { border-radius:12px; min-height:52px; padding:12px 22px; font-size:18px; font-weight:600; display:inline-flex; justify-content:center; align-items:center; gap:14px; }
.primary { background:var(--accent); color:var(--accent-ink); box-shadow:0 6px 16px #091c1726; }
.outline { border:1px solid var(--line); font-size:16px; }

/* ---------- lobby ---------- */
.lobby { max-width:1180px; margin:auto; padding:36px 30px 28px; }
.welcome { display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:center; }
.welcome h1 { font-size:clamp(38px,4.8vw,58px); line-height:1.2; letter-spacing:.015em; }
.subtitle { margin-top:14px; font-size:18px; color:var(--highlight); }
.invitation { white-space:pre-line; margin-top:14px; font-size:15px; line-height:1.8; color:var(--muted); }
.welcome-actions { display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.record { margin-top:14px; font-size:13px; color:var(--muted); min-height:1em; }
.lobby-scene { min-height:400px; position:relative; overflow:hidden; border-radius:180px 180px 18px 18px; background:var(--scene-image) center/cover no-repeat,var(--scene-fallback) var(--scene-bg); box-shadow:0 18px 38px #0a201744; border:2px solid var(--frame); }
.lobby-cats { position:absolute; inset:auto 0 0; display:flex; justify-content:center; }
.lobby-cats img { width:30%; margin:0 -3.5%; filter:drop-shadow(0 10px 14px #0006); }
.lobby-cats img:nth-child(odd) { transform:translateY(-6%); }
.section-heading { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin:44px 0 16px; }
.section-heading h2 { font-size:25px; }
.section-heading span { font-size:14px; color:var(--muted); line-height:1.6; }
#book-count { color:var(--highlight); font-variant-numeric:tabular-nums; }
.cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.cat-cards { display:grid; gap:10px; align-content:start; min-width:0; }
.cat-cards h3 { display:flex; align-items:center; gap:10px; font-family:"Cafe WenKai",serif; font-weight:500; font-size:21px; }
.cat-cards h3 small { display:block; font-family:"PingFang TC","Microsoft JhengHei",sans-serif; font-size:12px; color:var(--muted); }
.card { border-radius:14px; padding:12px 14px; font-size:14px; line-height:1.7; }
.card h4 { font-size:15px; margin-bottom:4px; }
.card.learned { background:var(--card); color:var(--ink); border:1px solid var(--card-line); }
.card.learned h4 { color:var(--good); }
.card.locked { border:1px dashed var(--line); color:var(--muted); }
.card.locked h4 { font-weight:500; }
.lobby-footnote { margin-top:36px; padding-top:20px; border-top:1px solid var(--line); font-size:13px; line-height:1.9; color:var(--muted); text-align:center; }
.face { display:inline-block; flex:none; width:40px; height:40px; border-radius:50%; background-color:var(--avatar-bg); background-repeat:no-repeat; box-shadow:0 0 0 2px #fff8; }
.face.dim { filter:grayscale(.8); opacity:.7; }

/* ---------- the shop ---------- */
.shop { max-width:1180px; margin:auto; display:grid; grid-template-columns:minmax(0,1fr) 400px; grid-template-rows:auto 1fr; gap:0 22px; padding:14px 24px 24px; }
.hud { grid-column:1/-1; display:flex; align-items:center; gap:16px; padding:6px 4px 12px; font-variant-numeric:tabular-nums; }
.hud-day { font-family:"Cafe WenKai",serif; font-size:20px; }
.hud-clock { display:grid; gap:4px; font-size:15px; min-width:96px; }
.hud-progress { height:4px; border-radius:2px; background:linear-gradient(90deg,var(--accent) calc(var(--done,0)*100%),var(--line) 0); }
.hud-fish { display:flex; align-items:center; gap:6px; margin-left:auto; font-size:18px; color:var(--highlight); }
.hud-fish svg { width:26px; height:26px; }
.tool { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:6px 12px; border-radius:10px; border:1px solid var(--line); font-size:14px; }
.tool svg { width:18px; height:18px; }
.scene-wrap { display:grid; place-items:start center; min-width:0; }
.scene { position:relative; width:min(100%,calc(100dvh - 140px)); aspect-ratio:1; overflow:hidden; border-radius:22px; isolation:isolate; box-shadow:0 18px 38px #0a201744; user-select:none; -webkit-user-select:none; }

/* The 3D shop (view3d/cafe.ts): the canvas, and the labels it places over the scene */
.scene { background:#2a3a2e; }
.scene-3d { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:pointer; }
.scene-labels { position:absolute; inset:0; z-index:2; pointer-events:none; }
.scene-flat-note { display:none; }
/* without 3D: the painted shop, and everything from the to-do list */
.scene.flat { background:url('assets/painted/shop.webp') center/cover no-repeat; }
.scene.flat .scene-flat-note { display:block; position:absolute; left:12px; right:12px; bottom:12px; margin:0; padding:8px 12px; border-radius:12px; background:#000b; color:#fff; font-size:13px; line-height:1.5; }
/* Guest and item pictures in the sheet and the speech bubbles */
.table-art,.guest-art,.item-art { stroke:none; }
/* White cups and plates sit on cream paper: a thin brown edge keeps them visible. */
.item-art { filter:drop-shadow(0 0 .6px #6b4423) drop-shadow(0 0 .6px #6b4423); }
.bubble { position:absolute; left:50%; bottom:150%; transform:translateX(-50%); z-index:4; display:inline-flex; align-items:center; gap:5px; padding:4px 10px 4px 6px; border-radius:14px; background:var(--paper); color:var(--ink); font-size:12px; line-height:1.3; white-space:nowrap; box-shadow:0 4px 10px #0003; }
.bubble::after { content:''; position:absolute; left:50%; top:100%; margin-left:-6px; border:6px solid transparent; border-top-color:var(--paper); border-bottom:0; }
.bubble b { font-weight:600; }
.bubble .item-art { width:24px; height:24px; }
.bubble .face { width:24px; height:24px; box-shadow:none; }
.bubble.thinking,.bubble.quiet { padding:4px 10px; color:var(--ink-soft); }
.bubble.wait { opacity:.8; }
.bubble.chore { padding:3px 10px; background:#fff; font-weight:600; }
.bubble.hearts { background:none; box-shadow:none; color:#e2557a; font-size:18px; }
.bubble.hearts::after { display:none; }
.bubble.hearts i { font-style:normal; display:inline-block; animation:rise 1.6s ease-out infinite; }
.bubble.hearts i:nth-child(2) { animation-delay:.25s; }
.bubble.hearts i:nth-child(3) { animation-delay:.5s; }
@keyframes rise { 0% { opacity:0; transform:translateY(8px) scale(.6); } 30% { opacity:1; } 100% { opacity:0; transform:translateY(-22px) scale(1.1); } }
.bubble-3d { pointer-events:none; }
.bubble-3d .bubble { position:relative; left:auto; bottom:auto; transform:translateY(-50%); }
.bubble-tag,.table-tag { display:inline-block; padding:3px 11px; border-radius:999px; font-size:13px; font-weight:600; white-space:nowrap; box-shadow:0 4px 10px #0004; }
.bubble-tag { background:var(--highlight); color:#2a1d10; transform:translateY(-50%); }
.table-tag.open { background:var(--paper); color:var(--ink); box-shadow:0 0 0 3px var(--highlight),0 6px 14px #0005; animation:tag-pulse 1.2s ease-in-out infinite; }
.table-tag.closed { background:#000b; color:#fff; font-weight:500; }
@keyframes tag-pulse { 50% { transform:scale(1.08); } }
.event-3d { pointer-events:auto; width:42px; height:42px; border-radius:50%; background:var(--warn); color:#fff; font-size:22px; font-weight:700; box-shadow:0 0 0 4px #fff8,0 6px 14px #0004; cursor:pointer; animation:bob3 1.1s ease-in-out infinite; }
@keyframes bob3 { 50% { transform:translateY(-8px); } }
.scene-side { position:absolute; right:10px; bottom:10px; z-index:5; min-height:40px; padding:0 14px; border-radius:999px; border:2px solid #fff; background:var(--accent); color:var(--accent-ink); font:inherit; font-size:14px; font-weight:600; box-shadow:0 4px 12px #0005; cursor:pointer; }
/* making a drink: the 3D counter shows the cup, so the flat gauge steps aside */
.gauge.in-3d { display:none; }
[data-motion="off"] .table-tag.open,[data-motion="off"] .event-3d { animation:none; }
.toast { position:absolute; left:50%; top:3%; transform:translate(-50%,-8px); z-index:100; max-width:90%; padding:7px 14px; border-radius:999px; background:var(--paper); color:var(--ink); font-size:14px; line-height:1.4; text-align:center; box-shadow:0 6px 16px #0003; opacity:0; transition:opacity .3s,transform .3s; pointer-events:none; }
.toast.show { opacity:1; transform:translate(-50%,0); }

/* ---------- the sheet under the shop ---------- */
.sheet { background:var(--paper); color:var(--ink); border-radius:20px; padding:18px 18px 20px; align-self:start; min-height:300px; box-shadow:0 12px 30px #0a201733; }
.sheet h2 { font-size:21px; line-height:1.4; }
.sheet-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.sheet-head span { font-size:13px; color:var(--ink-soft); white-space:nowrap; font-variant-numeric:tabular-nums; }
.todo { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.todo-item { width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; min-height:54px; padding:8px 10px; border-radius:14px; background:var(--card); border:1px solid var(--card-line); text-align:left; font-size:16px; }
.todo-item .where { min-width:44px; padding:2px 8px; border-radius:999px; background:#efe4c9; font-size:13px; text-align:center; }
.todo-item.happening .where { background:var(--warn); color:#fff; font-weight:700; }
.todo-item .what small { display:block; font-size:12px; color:var(--ink-soft); }
.todo-item .act { padding:6px 14px; border-radius:999px; background:var(--good); color:#fff; font-size:14px; font-weight:600; }
.todo-item:disabled { opacity:.7; }
.todo-item:disabled .act { background:#b9b29c; }
.idle { font-family:"Cafe WenKai",serif; font-size:17px; line-height:1.7; padding:14px 16px; border-left:3px solid var(--warn); background:#f1e6cc; border-radius:0 12px 12px 0; }
.guest-note { display:flex; align-items:center; gap:12px; font-size:15px; line-height:1.6; color:var(--ink-soft); margin-bottom:12px; }
.guest-note .guest-art { width:72px; height:auto; flex:none; border-radius:12px; background:#efe4c9; }
.seat-choices { display:grid; gap:8px; }
.seat-choice { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:52px; padding:8px 14px; border-radius:14px; border:2px solid var(--card-line); background:var(--card); text-align:left; }
.seat-choice b { font-size:16px; }
.seat-choice small { font-size:13px; color:var(--ink-soft); text-align:right; }
.seat-choice:disabled { opacity:.5; }
.text-button { margin-top:10px; min-height:44px; padding:6px 4px; font-size:14px; color:var(--ink-soft); text-decoration:underline; text-underline-offset:4px; }
.brew { display:grid; gap:12px; }
.brew-for { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:10px; font-size:14px; color:var(--ink-soft); }
.brew-for .item-art { grid-row:span 2; width:44px; height:44px; }
.brew-for b { color:var(--ink); font-size:17px; margin-right:8px; }
.brew-for small { font-size:12px; }
.gauge { position:relative; height:38px; border-radius:999px; background:#e9dfc8; overflow:hidden; box-shadow:inset 0 2px 4px #0002; }
.gauge-band { position:absolute; top:0; bottom:0; left:calc(var(--lo)*100%); width:calc((var(--hi) - var(--lo))*100%); background:#b9d27a; }
.gauge-fill { position:absolute; left:0; top:0; bottom:0; width:calc(var(--value,0)*100%); background:#6b442399; }
.gauge[data-kind="tap"] .gauge-fill { display:none; }
.gauge-needle { position:absolute; top:-2px; bottom:-2px; left:calc(var(--value,0)*100%); width:5px; margin-left:-2.5px; border-radius:3px; background:var(--ink); }
.gauge[data-score="2"] .gauge-band { background:#8fbf3a; }
.gauge[data-score="0"] { box-shadow:inset 0 0 0 2px var(--warn); }
.gauge-word { min-height:1.5em; font-size:15px; }
.gauge-button { width:100%; min-height:64px; font-size:19px; background:var(--good); color:#fff; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.gauge-button.pressed { transform:scale(.98); filter:brightness(.9); }
.gauge-button:disabled { opacity:.6; }
.ask { display:grid; gap:12px; }
.ask-who { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-soft); }
.ask-who b { color:var(--ink); }
.ask h2 { font-size:19px; }
.choices { display:grid; gap:8px; }
.choice { min-height:52px; padding:10px 14px; border-radius:14px; border:2px solid var(--card-line); background:var(--card); text-align:left; font-size:16px; line-height:1.5; }
.choice:hover:not(:disabled) { border-color:#c79a5c; }
.choice:disabled { opacity:.5; text-decoration:line-through; }
.answer { padding:10px 12px; border-radius:12px; background:var(--warn-soft); color:#7a3416; font-size:15px; line-height:1.6; }
.answer span { display:block; margin-top:4px; font-size:13px; }
.note { display:grid; gap:12px; }
.note > p:first-of-type { font-size:16px; line-height:1.7; }
.tip { padding:10px 14px; border-radius:0 12px 12px 0; border-left:3px solid var(--good); background:var(--good-soft); font-size:15px; line-height:1.7; }
.tip span { display:block; font-size:12px; font-weight:700; color:var(--good); letter-spacing:.06em; }
.note-extra { font-size:15px; color:#8a4a1c; font-weight:600; }
.note-extra:empty { display:none; }
.note .primary { width:100%; background:var(--good); color:#fff; }

/* ---------- notices and dialogs ---------- */
.storage-notice { position:fixed; pointer-events:none; top:8px; left:15px; right:15px; max-width:600px; margin:auto; padding:14px 18px; border-radius:10px; background:var(--paper); color:var(--ink); font-size:14px; z-index:60; box-shadow:0 8px 24px #0003; }
dialog { color:var(--ink); background:var(--paper); width:min(560px,calc(100% - 28px)); border:0; border-radius:20px; box-shadow:0 24px 80px #0005; padding:0; max-height:88dvh; overflow-y:auto; color-scheme:light; }
dialog::backdrop { background:#0b211cc4; }
.dialog-content { padding:26px 28px; }
dialog h2 { font-size:28px; margin:0 0 16px; }
dialog h3 { font-size:17px; margin:18px 0 8px; font-weight:600; }
dialog p { line-height:1.8; font-size:16px; margin-bottom:12px; }
dialog .muted { font-size:13px; color:#58654f; }
dialog ul { padding-left:22px; line-height:1.85; margin:0 0 12px; }
.dialog-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.dialog-actions button { flex:1; white-space:nowrap; }
.dialog-actions .outline { color:var(--ink); border-color:#a7b094; }
.dialog-actions .primary { background:#536d36; color:white; font-size:16px; }
.cat-word { font-family:"Cafe WenKai",serif; font-size:17px; padding:10px 14px; border-left:3px solid var(--warn); background:#f1e6cc; border-radius:0 12px 12px 0; }
.closing-sum b { font-size:22px; color:#8a4a1c; margin:0 2px; }
.learned-list { list-style:none; padding:0!important; display:grid; gap:8px; }
.learned-list li { display:flex; align-items:center; gap:10px; }
.learned-list .face { width:32px; height:32px; }
.learned-list em { margin-left:8px; padding:1px 8px; border-radius:999px; background:var(--warn); color:#fff; font-style:normal; font-size:12px; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:64px; border-bottom:1px solid #d5d8bc; padding:10px 0; }
.setting-row span { font-size:16px; }
.setting-row small { display:block; font-size:12px; color:#58654f; margin-top:4px; line-height:1.5; }
.setting-row input { width:24px; height:24px; accent-color:#536d36; flex:none; }
.volume-setting { display:flex; justify-content:space-between; margin-top:18px; }
#setting-volume { width:100%; accent-color:#536d36; }
.meow-test { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.meow-test .outline { color:var(--ink); border-color:#a7b094; min-height:44px; padding:6px; font-family:"Cafe WenKai",serif; font-size:17px; }
.noscript { padding:40px; text-align:center; }

[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
[data-motion="off"] .bubble.hearts i { opacity:1; transform:none; }

@media (max-width:900px) {
  .welcome { grid-template-columns:1fr; gap:24px; }
  .lobby-scene { min-height:300px; order:-1; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shop { grid-template-columns:minmax(0,1fr); padding:0 0 16px; gap:0; }
  .hud { padding:8px 16px; }
  .scene { width:min(100%,56dvh); border-radius:0; }
  .sheet { border-radius:20px 20px 0 0; margin-top:-14px; position:relative; z-index:2; min-height:0; padding:18px 16px 22px; }
}
@media (max-width:560px) {
  .topbar { padding:8px 14px; min-height:56px; }
  .wordmark,.top-actions .quiet span { display:none; }
  .lobby { padding:20px 16px 24px; }
  .welcome h1 { font-size:36px; }
  .subtitle { font-size:16px; }
  .welcome-actions button { flex:1; }
  .cards { grid-template-columns:minmax(0,1fr); }
  .cat-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cat-cards h3 { grid-column:1/-1; }
  .hud { gap:12px; }
  .hud-day { font-size:18px; }
  .tool span { display:none; }
  .bubble { font-size:11px; padding:3px 8px 3px 4px; }
  .bubble .item-art,.bubble .face { width:20px; height:20px; }
  .event-3d { width:36px; height:36px; font-size:19px; }
  .toast { font-size:13px; }
  /* a phone has the height: the 3D shop gets a taller view */
  .scene { aspect-ratio:4/5; width:100%; }
}