/* Hearthold — the interface. */
:root { --ink: #1c202c; --paper: #fffaf0; --go: #3f9d4d; --hot: #e2553f; --font: ui-rounded, 'SF Pro Rounded', 'Avenir Next', 'Segoe UI', system-ui, sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #bfe6ff; font-family: var(--font); color: var(--paper); touch-action: none; -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
canvas#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
[hidden] { display: none !important; }
button { font-family: var(--font); border: 0; cursor: pointer; color: inherit; }
#top { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 112px); display: flex; justify-content: center; gap: 8px; pointer-events: none; flex-wrap: wrap; }   /* only as wide as its pills: the corners stay free */
.res { display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 7px; border-radius: 999px; background: rgba(28, 32, 44, 0.72); font-weight: 900; font-size: 16px; font-variant-numeric: tabular-nums; }
.res small { font-weight: 700; opacity: 0.7; font-size: 12px; }
.res i { display: inline-block; width: 18px; height: 18px; border-radius: 50%; }
i.grain { background: radial-gradient(circle at 35% 30%, #fff2b0, #f4c84a 60%, #c7922a); } i.stone { background: radial-gradient(circle at 35% 30%, #eef2f6, #aab4bf 60%, #77828f); border-radius: 5px; } i.cup { background: radial-gradient(circle at 35% 30%, #ffe9a6, #ffb300 60%, #c77800); border-radius: 4px 4px 9px 9px; }
#say { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); padding: 9px 16px; border-radius: 14px; background: rgba(28, 32, 44, 0.8); font-weight: 800; font-size: 14px; text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.3s; max-width: 90vw; }
footer { position: fixed; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; justify-content: center; align-items: center; gap: 8px; padding: 0 10px; flex-wrap: wrap; }
footer span { padding: 9px 14px; border-radius: 12px; background: rgba(28, 32, 44, 0.72); font-weight: 800; font-size: 14px; }
button.act { padding: 12px 18px; border-radius: 14px; font-weight: 900; font-size: 16px; color: #fff; background: var(--go); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28); }
button.act:active { transform: translateY(3px); box-shadow: none; }
button.act.alt { background: rgba(28, 32, 44, 0.78); } button.act.hot { background: var(--hot); }
section { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(28, 32, 44, 0.5); padding: 12px; }
.sheet { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: var(--paper); color: var(--ink); width: min(94vw, 460px); max-height: 92vh; }
.sheet h2 { margin: 0; font-size: 22px; font-weight: 900; text-align: center; } .sheet p { margin: 0; font-weight: 700; text-align: center; }
.list { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; overflow: auto; touch-action: pan-y; }
.list button { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; padding: 10px; border-radius: 12px; background: #eee6d6; color: var(--ink); font-weight: 800; font-size: 14px; text-align: left; }
.list button small { font-weight: 700; opacity: 0.75; font-size: 12px; } .list button.no { opacity: 0.5; }
.sheet .act.alt { color: #fff; }