/* Seed & Tree. Phone first: everything must work at 380 px wide. */
:root {
  --ink: #2b2418;
  --paper: #f3e7cc;
  --paper-2: #e8d7b0;
  --sepia: #8a6a48;
  --past: #c99a54;
  --future: #19a7d8;
  --future-2: #ff6a3d;
  --good: #3c9a3a;
  --bad: #d0453a;
  --card: rgba(255, 250, 238, 0.97);
  --hud-h: 112px;
  --bar-h: 76px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: var(--paper); color: var(--ink); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
body.era-past { background: radial-gradient(ellipse at 50% 40%, #f6ead0 0%, #e2cfa6 70%, #c9b183 100%); }
body.era-future { background: linear-gradient(180deg, #8fd3ff 0%, #c9efff 55%, #e9f8ff 100%); }
.hidden { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: #6b4a2b; }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; overflow-y: auto; }
#home, #seats { display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px calc(24px + var(--safe-b)); background: radial-gradient(ellipse at 50% 0%, #fff6de 0%, var(--paper) 60%, var(--paper-2) 100%); }
.home-card { width: 100%; max-width: 420px; text-align: center; }
.logo { font-size: 44px; margin: 8px 0 0; }
.logo-arrow { font-size: 26px; vertical-align: middle; margin: 0 8px; color: var(--sepia); }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: 40px; margin: 6px 0 2px; letter-spacing: 0.5px; }
h2 { font-family: Georgia, serif; margin: 4px 0 8px; }
.tagline { font-style: italic; margin: 0 0 14px; color: #5a4632; }
.pitch { margin: 0 0 18px; line-height: 1.45; color: #4a3b2a; }
.small { font-size: 14px; margin: 10px 0; }
.msg { min-height: 1.3em; color: var(--bad); font-weight: 600; }
.code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 3px; background: #fff; padding: 2px 8px; border-radius: 6px; }
.btn { display: inline-block; border: 2px solid var(--ink); background: #fffaf0; border-radius: 12px; padding: 10px 16px; font-weight: 700; }
.btn.big { display: block; width: 100%; padding: 14px; margin: 10px 0; font-size: 18px; }
.btn.primary { background: var(--ink); color: #fff6de; }
.btn.small { padding: 6px 10px; font-size: 14px; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.linkish { background: none; border: none; text-decoration: underline; color: #6b4a2b; }
.form { text-align: left; margin: 8px 0 4px; display: grid; gap: 8px; }
.form label { font-weight: 700; font-size: 14px; }
input[type=text], input[type=password], textarea {
  width: 100%; font: inherit; font-size: 18px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 10px; background: #fff;
}
#joinCode { text-transform: uppercase; letter-spacing: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; }

.seat { display: block; width: 100%; text-align: left; border: 3px solid var(--ink); border-radius: 16px; padding: 14px 16px; margin: 12px 0; position: relative; }
.seat-past { background: linear-gradient(135deg, #f1dfb8, #d8b982); }
.seat-future { background: linear-gradient(135deg, #b9ecff, #7fd6a4); }
.seat-year { display: block; font-family: Georgia, serif; font-size: 30px; font-weight: 700; }
.seat-name { display: block; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; margin-bottom: 4px; }
.seat-desc { display: block; font-size: 14px; line-height: 1.35; }
.seat-taken { display: none; position: absolute; top: 12px; right: 14px; background: var(--ink); color: #fff; border-radius: 8px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.seat:disabled { opacity: 0.55; }
.seat:disabled .seat-taken { display: block; }

/* ---------- game ---------- */
#stage { position: fixed; left: 0; right: 0; top: calc(var(--hud-h) + var(--safe-t)); bottom: calc(var(--bar-h) + var(--safe-b)); }
#view { width: 100%; height: 100%; display: block; touch-action: none; }
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
body.era-past #stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(80, 55, 25, 0.28) 100%); }
#stage.glitch { animation: glitch 0.9s steps(2) 1; }
@keyframes glitch {
  0% { filter: hue-rotate(0) saturate(1); transform: translate(0); }
  15% { filter: hue-rotate(160deg) saturate(3) contrast(1.4); transform: translate(-6px, 2px); }
  30% { filter: invert(0.85) hue-rotate(250deg); transform: translate(5px, -3px) skewX(4deg); }
  45% { filter: hue-rotate(90deg) saturate(4); transform: translate(-3px, 0) skewX(-3deg); }
  60% { filter: invert(1); transform: translate(4px, 3px); }
  80% { filter: hue-rotate(300deg) saturate(2); transform: translate(-2px, -1px); }
  100% { filter: none; transform: none; }
}

#hud { position: fixed; top: 0; left: 0; right: 0; padding: calc(8px + var(--safe-t)) 10px 4px; z-index: 5; pointer-events: none; }
#hud > * { pointer-events: auto; }
.hud-row { display: flex; align-items: center; gap: 6px; }
.era-badge { display: flex; flex-direction: column; line-height: 1; padding: 5px 9px; border-radius: 10px; border: 2px solid var(--ink); background: #fffaf0; min-width: 76px; }
#eraYear { font-family: Georgia, serif; font-weight: 800; font-size: 20px; }
#eraSub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; white-space: nowrap; }
body.era-past .era-badge { background: #f4e3bd; }
body.era-future .era-badge { background: #e3f7ff; border-color: #0b4f6c; }
.clock { flex: 1; text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800; font-size: 26px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
.clock.low { color: var(--bad); animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.pill { padding: 6px 9px; border-radius: 999px; background: #fffaf0; border: 2px solid var(--ink); font-weight: 800; font-size: 14px; white-space: nowrap; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--ink); background: #fffaf0; font-size: 18px; padding: 0; flex: none; }
.inv { display: flex; gap: 5px; margin-top: 6px; overflow-x: auto; scrollbar-width: none; min-height: 28px; }
.inv::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 4px 8px; border-radius: 999px; background: rgba(255, 250, 240, 0.92); border: 1.5px solid rgba(43, 36, 24, 0.5); font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip.bad { border-color: var(--bad); color: var(--bad); }
.chip.empty { opacity: 0.6; font-weight: 500; }
.hint { margin-top: 5px; font-size: 13px; font-weight: 600; background: rgba(255, 250, 240, 0.85); border-radius: 8px; padding: 4px 8px; display: inline-block; max-width: 100%; }
.hint:empty { display: none; }

.tools { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--bar-h) + var(--safe-b)); padding: 8px 6px var(--safe-b); display: flex; gap: 4px; justify-content: center; z-index: 5; background: linear-gradient(0deg, rgba(43, 36, 24, 0.55), rgba(43, 36, 24, 0)); }
.tool { flex: 1 1 0; max-width: 72px; min-width: 0; height: 60px; border-radius: 14px; border: 2px solid var(--ink); background: #fffaf0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px; }
.tool .ti { font-size: 21px; line-height: 1; }
.tool .tl { font-size: 10.5px; font-weight: 800; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tool .tc { font-size: 9.5px; font-weight: 700; opacity: 0.7; }
.tool.on { background: var(--ink); color: #fff6de; transform: translateY(-3px); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2); }
body.era-future .tool.on { background: #0b4f6c; }
.tool:disabled { opacity: 0.4; }

#toasts { position: fixed; left: 0; right: 0; top: calc(var(--hud-h) + var(--safe-t) + 4px); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 6; pointer-events: none; padding: 0 12px; }
.toast { max-width: 360px; padding: 8px 12px; border-radius: 12px; background: rgba(43, 36, 24, 0.92); color: #fff6de; font-weight: 600; font-size: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); animation: toastIn 0.25s ease-out; }
.toast.chat-past { background: #7a5230; }
.toast.chat-future { background: #0b6f94; }
.toast.bad { background: var(--bad); }
.toast.good { background: var(--good); }
.toast.out { opacity: 0; transition: opacity 0.4s; }
@keyframes toastIn { from { transform: translateY(-8px); opacity: 0; } }

.float { position: absolute; left: 0; top: 0; white-space: nowrap; max-width: 260px; white-space: normal; text-align: center; font-weight: 800; font-size: 13px; padding: 4px 8px; border-radius: 10px; background: rgba(255, 250, 240, 0.95); border: 2px solid var(--ink); pointer-events: none; will-change: transform; }
.float.years { background: #ffe9a8; font-size: 12px; }
.float.bad { background: #ffd9d4; border-color: var(--bad); }
.float.ping { background: #fff; font-size: 11px; }

/* ---------- sheets and overlays ---------- */
.sheet { position: fixed; inset: 0; z-index: 20; background: rgba(20, 15, 8, 0.35); display: flex; align-items: flex-end; justify-content: center; }
.sheet-card { position: relative; width: 100%; max-width: 480px; max-height: 78vh; overflow-y: auto; background: var(--card); border-radius: 20px 20px 0 0; padding: 18px 16px calc(18px + var(--safe-b)); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25); animation: sheetIn 0.2s ease-out; }
@keyframes sheetIn { from { transform: translateY(40px); opacity: 0.5; } }
.sheet-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 10px; border: none; background: rgba(0, 0, 0, 0.06); font-size: 16px; }
.sheet h3 { margin: 0 40px 8px 0; font-family: Georgia, serif; font-size: 20px; }
.sheet p { margin: 6px 0 10px; line-height: 1.4; }
.sheet .readable { background: #fff4d6; border-left: 4px solid var(--sepia); padding: 8px 10px; border-radius: 6px; font-family: Georgia, serif; }
.sheet .carved { background: #eee8dc; border-left: 4px solid #6f6a60; padding: 8px 10px; border-radius: 6px; font-family: Georgia, serif; font-style: italic; }
.opts { display: grid; gap: 8px; margin: 10px 0; }
.opts.two { grid-template-columns: 1fr 1fr; }
.opt { text-align: left; border: 2px solid var(--ink); background: #fffaf0; border-radius: 12px; padding: 10px 12px; font-weight: 700; }
.opt small { display: block; font-weight: 500; opacity: 0.75; margin-top: 2px; }
.opt.sel { background: var(--ink); color: #fff6de; }
.row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.row input { flex: 1; }
.presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 12px; }

.overlay { position: fixed; inset: 0; z-index: 15; background: rgba(20, 15, 8, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.overlay-card { width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--card); border-radius: 20px; padding: 20px 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); text-align: center; }
.overlay-card h2 { font-size: 26px; }
.chapter-no { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 800; color: var(--sepia); }
.brief { text-align: left; line-height: 1.45; }
.facts { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.fact { background: #fff; border: 1.5px solid rgba(43, 36, 24, 0.3); border-radius: 10px; padding: 6px 10px; font-size: 13px; font-weight: 700; }
.toolsum { text-align: left; font-size: 14px; margin: 8px 0; padding-left: 18px; }
.toolsum li { margin: 3px 0; }
.stars { font-size: 44px; letter-spacing: 6px; margin: 6px 0; }
.stars .off { opacity: 0.2; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 14px; text-align: left; }
.stats div { background: #fff; border-radius: 10px; padding: 6px 10px; font-size: 14px; }
.stats b { display: block; font-size: 18px; }
.waiting { font-weight: 700; color: var(--sepia); }
.waiting.ok { color: var(--good); }
.share-row { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 8px 0; }

@media (min-width: 700px) {
  :root { --hud-h: 104px; }
  .tool { max-width: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  #stage.glitch { animation: none; }
  .clock.low { animation: none; }
}