:root {
  --bg: #fff4e0;
  --ink: #3d2c1e;
  --accent: #ff8c42;
  --go: #2fbf71;
  --card: #ffffff;
  --shadow: 0 8px 0 rgba(61, 44, 30, .15);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif; touch-action: manipulation; overscroll-behavior: none; }
[hidden] { display: none !important; }

.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3vmin; padding: 4vmin; padding-top: calc(4vmin + env(safe-area-inset-top)); }
.screen.calm { background: #e8f1ff; }
.screen.dark { background: #111; padding: 0; gap: 0; }

button { font: inherit; color: inherit; border: 0; cursor: pointer; }
button:active { transform: translateY(4px); }

.big { width: min(34vmin, 260px); height: min(34vmin, 260px); border-radius: 50%; font-size: min(16vmin, 120px);
  display: grid; place-items: center; box-shadow: var(--shadow); }
.big.primary { background: var(--accent); }
.big.go { background: var(--go); color: #fff; }
.big span { line-height: 1; }

.round { width: min(16vmin, 110px); height: min(16vmin, 110px); border-radius: 50%; background: #fff;
  font-size: min(8vmin, 56px); box-shadow: var(--shadow); display: grid; place-items: center; }
.round.back, .round.skip { position: absolute; top: calc(3vmin + env(safe-area-inset-top)); left: 3vmin; width: min(12vmin, 80px); height: min(12vmin, 80px); font-size: min(6vmin, 40px); }
.round.skip { left: auto; right: 3vmin; opacity: .8; }
.round.book { position: absolute; right: 4vmin; bottom: 4vmin; }

.lock { position: absolute; top: calc(2vmin + env(safe-area-inset-top)); right: 2vmin; width: 48px; height: 48px; border-radius: 50%;
  background: transparent; opacity: .35; font-size: 22px; }

.fino { font-size: min(36vmin, 280px); line-height: 1; animation: bob 3s ease-in-out infinite; }
.screen.calm .fino { font-size: min(22vmin, 160px); animation-duration: 5s; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-2vmin) rotate(2deg); } }

.hint { font-size: min(4vmin, 28px); margin: 0; text-align: center; max-width: 70ch; opacity: .85; }
.hint.onvideo { position: absolute; top: calc(3vmin + env(safe-area-inset-top)); left: 0; right: 0; color: #fff;
  text-shadow: 0 2px 6px #000; font-size: min(5vmin, 34px); pointer-events: none; }

.dots { display: flex; gap: 3vmin; min-height: min(9vmin, 60px); }
.dot { width: min(8vmin, 56px); height: min(8vmin, 56px); border-radius: 50%; background: #fff; border: 4px solid #e0cfae;
  display: grid; place-items: center; font-size: min(5vmin, 36px); }
.dot.full { background: #ffe08a; border-color: #ffb703; }

.card { background: var(--card); border-radius: 6vmin; padding: 4vmin 8vmin; text-align: center; box-shadow: var(--shadow);
  border-top: 2.2vmin solid var(--cat, var(--accent)); max-width: 90vw; }
.card h1 { margin: 0; font-size: min(7vmin, 52px); }
.emoji-xl { font-size: min(28vmin, 220px); line-height: 1.1; }
.emoji-xl.small { font-size: min(18vmin, 130px); }
.chip { display: inline-block; background: var(--cat, var(--accent)); border-radius: 99px; padding: .3em .9em; font-size: min(4vmin, 28px); }
.row { display: flex; align-items: center; gap: 6vmin; }

video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.shutter { position: absolute; bottom: calc(4vmin + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  width: min(20vmin, 130px); height: min(20vmin, 130px); border-radius: 50%; background: #fff; border: 1.6vmin solid rgba(255,255,255,.55);
  background-clip: padding-box; box-shadow: 0 0 0 3px rgba(0,0,0,.2); }
.shutter:active { transform: translateX(-50%) scale(.92); }

#party { background: radial-gradient(circle at 50% 35%, #fff9d6, var(--bg)); overflow: hidden; }
#pPhoto { max-height: 38vh; max-width: 80vw; border-radius: 4vmin; border: 1.4vmin solid #fff; box-shadow: var(--shadow); transform: rotate(-2deg); }
.sticker { font-size: min(32vmin, 240px); line-height: 1; animation: pop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes pop { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0); } }
.bit { position: absolute; top: -10vh; font-size: 6vmin; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(120vh) rotate(360deg); } }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(22vmin, 150px), 1fr)); gap: 3vmin; width: 100%; max-width: 1000px;
  padding: 12vmin 0 4vmin; overflow-y: auto; max-height: 100%; align-content: start; }
#book { justify-content: flex-start; }
.cell { aspect-ratio: 1; border-radius: 4vmin; background: #fff; box-shadow: var(--shadow); position: relative; overflow: hidden;
  display: grid; place-items: center; font-size: min(12vmin, 80px); padding: 0; }
.cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cell .badge { position: absolute; right: 4px; bottom: 2px; font-size: min(6vmin, 40px); text-shadow: 0 1px 3px #fff, 0 0 6px #fff; }

.viewer { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: grid; place-items: center; z-index: 10; }
.viewer img { max-width: 94vw; max-height: 86vh; border-radius: 3vmin; }
.viewer-emoji { position: absolute; right: 5vmin; bottom: 5vmin; font-size: min(18vmin, 120px); }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: grid; place-items: center; z-index: 20; padding: 16px; }
.panel { background: #fff; border-radius: 20px; padding: 24px; width: min(560px, 100%); display: grid; gap: 14px; font-size: 18px; max-height: 94vh; overflow: auto; }
.panel h2 { margin: 0; }
.panel label { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.panel select { font-size: 18px; padding: 6px 10px; }
.panel .check input { width: 28px; height: 28px; }
.small-print { font-size: 14px; opacity: .75; margin: 0; }
.panel-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.plain { padding: 10px 16px; border-radius: 12px; background: #eee; font-size: 16px; }
.plain.danger { background: #ffd6d6; }
.plain.ok { background: var(--go); color: #fff; }
.panel * { user-select: text; -webkit-user-select: text; }

@media (prefers-reduced-motion: reduce) { .fino, .sticker, .bit { animation: none; } }

.round.library { position: absolute; left: 4vmin; bottom: 4vmin; }
.stories { padding-top: 14vmin; grid-template-columns: repeat(auto-fill, minmax(min(34vmin, 230px), 1fr)); }
.story-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1vmin; padding: 2vmin; font-size: min(14vmin, 90px); }
.story-card small { font-size: min(3.4vmin, 22px); font-weight: 600; line-height: 1.2; text-align: center; }
.story-card span { line-height: 1; }
.story-text { max-width: 80ch; padding: 0 6vmin; min-height: 3.6em; }
.panel.wide { width: min(780px, 100%); }
.rec-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid #eee; }
.rec-text { font-size: 15px; grid-column: 1 / -1; }
.rec-row .plain { padding: 8px 12px; }
details > summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
.stories { justify-content: center; }