/* Tokens first. The shell's slot is the one that must survive every redesign:
   inside the Second Draft shell a 48px round button floats in the bottom-right
   corner, 16px in from each edge, above everything. Nothing tappable goes
   there. Applied everywhere, shell or not, so one stylesheet stays right. */
:root {
  --shell-switcher-size: 48px;
  --shell-switcher-inset: 16px;
  --shell-switcher-gap: 16px;
  --shell-slot: 80px; /* inset + size + gap: the corner the shell owns */

  --ink: #1f1d1b;
  --quiet: #6b6560;
  --paper: #f7f5f2;
  --card: #ffffff;
  --line: #e4dfd9;
  --accent: #5b3a5e;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--font); }
body { min-height: 100dvh; }

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 20px calc(env(safe-area-inset-bottom, 0px) + var(--shell-slot));
}
.page-heading { font-size: 1.6rem; margin: 0 0 8px; }
.quiet { color: var(--quiet); margin: 0; }

button, input, select, textarea { font: inherit; }
.button {
  appearance: none; border: 0; border-radius: 12px; padding: 12px 18px;
  background: var(--accent); color: #fff; cursor: pointer;
}

/* Messages that are not the page: keep out of the shell's 80×80 corner. */
#toast {
  position: fixed; left: 16px; right: var(--shell-slot);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--shell-switcher-inset));
  pointer-events: none;
}
#toast:empty { display: none; }
#toast > * { background: var(--ink); color: var(--paper); border-radius: 12px; padding: 12px 16px; }
:root { --paper: #faf8f0; --ink: #294738; --quiet: #687567; --accent: #366747; --line: #dce3d5; }
.page {max-width: 960px; padding-top: 26px;}
header {display:flex; align-items:center; gap:12px; font-size:13px; font-weight:700;}
.brand-mark {font-size:30px; color:#6a8d51;}.tiny {margin-left:auto; font-size:10px; letter-spacing:1.5px; color:var(--quiet)}
.intro {text-align:center; margin:54px auto 0}.eyebrow {font-size:10px;letter-spacing:2px;font-weight:750;color:#6b805d}.page-heading {font-family:Georgia,serif;font-weight:normal;font-size:58px;line-height:1.05;letter-spacing:-2px;margin:18px 0}.page-heading span {color:#d0a046}p {color:var(--quiet);font-size:14px;line-height:1.7}.garden-art {height:215px;position:relative;max-width:420px;margin:0 auto;overflow:hidden}.hill {position:absolute;bottom:-70px;left:0;width:100%;height:160px;border-radius:50%;background:#e5ecd9}.plant {position:absolute;font-size:83px;bottom:22px;z-index:1}.p1 {left:50px;transform:rotate(-12deg)}.p2{left:158px;bottom:35px}.p3{right:35px;transform:rotate(12deg)}.sun{position:absolute;right:38px;top:0;font-size:50px;color:#ddb750}.cloud{position:absolute;left:40px;top:12px;font-size:45px;color:#dce3d5}.art-caption{position:absolute;bottom:0;z-index:2;width:100%;text-align:center;font-size:11px;font-style:italic;color:#657557}.card {background:#fffef9;border:1px solid var(--line);border-radius:24px;box-shadow:0 8px 25px #334d3610}.entry {max-width:420px;margin:22px auto;padding:28px}.entry h2 {margin:0;font:26px Georgia,serif}.entry p {margin:8px 0 22px}label{display:block;font-size:12px;font-weight:700;margin:15px 0 6px}label span{font-weight:400;color:var(--quiet);margin-left:5px}input{width:100%;border:1px solid #d8ded0;border-radius:10px;background:#fafbf6;padding:13px;color:var(--ink);min-height:48px}button {cursor:pointer;min-height:46px}button:focus-visible,input:focus-visible,summary:focus-visible {outline:3px solid #d5ac4f;outline-offset:3px}.primary{border:0;border-radius:11px;padding:14px 18px;background:var(--accent);color:white;font-weight:650;width:100%;margin-top:22px;text-align:center}.primary span{float:right}.primary:hover{background:#284f35}button:disabled{cursor:default}.primary:disabled{opacity:.5}.footnote{text-align:center;font-size:11px;margin-top:23px}.message{font-size:13px;margin-top:12px}.text-button{margin-left:auto;border:0;background:transparent;color:#6c665d;text-decoration:underline;font-size:12px}.play-heading{text-align:center;margin:44px 0 25px}.play-heading .page-heading{font-size:42px}.players{display:flex;gap:12px;max-width:580px;margin:0 auto 18px}.player{flex:1;display:flex;align-items:center;gap:9px;background:#efeee4;border-radius:14px;padding:13px;font-size:12px;min-width:0}.player strong{overflow-wrap:anywhere}.player small{display:block;color:var(--quiet);font-size:10px}.player.you{background:#e9eedc}.avatar{font-size:25px}.dot{width:7px;height:7px;border-radius:50%;background:#bdbfb4;margin-left:auto;flex-shrink:0}.dot.online{background:#6e9656}.game-card{padding:25px;max-width:580px;margin:auto}.round-line{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;color:var(--quiet)}.game-card h2{font:26px Georgia,serif;margin-bottom:8px}.game-card p{font-size:13px;margin-top:0;min-height:44px}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.flower{border:1px solid #dce2cf;border-radius:18px;background:#f2f4e8;padding:13px 4px;transition:background .2s}.flower:not(:disabled):hover{background:#e4edce;transform:translateY(-2px)}.flower.bloom{background:#fff3d7;border-color:#ead9ad}.blossom{display:block;font-size:52px}.needs{display:flex;justify-content:center;gap:8px;margin-top:8px}.needs span{font-size:14px;border-radius:50%;background:#e3e7d8;opacity:.3;width:25px;height:25px}.needs .done{opacity:1;background:#fff}.secondary{border:1px solid var(--line);border-radius:10px;background:#e9eedc;color:var(--ink);padding:8px 15px;margin-top:10px}details{max-width:580px;margin:18px auto;font-size:12px}summary{cursor:pointer;padding:10px 0}#toast:not(:empty){padding:14px;background:var(--ink);color:white;border-radius:12px;font-size:13px;z-index:10}
@media(max-width:600px){.tiny{display:none}.intro{margin-top:38px}.page-heading{font-size:46px}.entry{padding:24px}.garden-art{height:190px}.play-heading .page-heading{font-size:36px}.game-card{padding:20px}.players{gap:8px}.player{padding:10px;gap:6px}.avatar{font-size:22px}.board{gap:9px}.blossom{font-size:43px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Keep the shell corner clear at every scroll position, including mid-round. */
body {height:100dvh;overflow:hidden;}
.page {height:calc(100dvh - var(--shell-slot) - env(safe-area-inset-bottom, 0px));overflow-y:auto;overscroll-behavior:contain;padding-bottom:24px;}