/* Cozy pixel diorama: chunky frames, cream dialog boxes, low-res scenes. */
:root {
  --night:#1d1b33; --night-2:#2b2850; --frame:#5a4f8c; --cream:#f4ecd8; --cream-2:#e9dfc6; --ink:#1d1b33; --soft:#544c6e;
  --gold:#ffd27a; --gold-d:#c98a2e; --plum:#3b3670; --plum-d:#262252; --rose:#b8405a; --line:#cbbf9f;
  --health:#4fae5e; --joy:#f08a3c; --trust:#5b86e0; --up:#2f6b2b; --up-bg:#d3ecc4; --down:#8f2f2f; --down-bg:#f4d0c8;
  --title:"Press Start 2P", ui-monospace, monospace; --body:"DotGothic16", ui-monospace, monospace;
  color-scheme:dark;
}
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:var(--body); font-size:17px; color:var(--cream); line-height:1.6; background:var(--night);
  background-image:radial-gradient(#ffffff22 1px, transparent 1px); background-size:24px 24px; }
a { color:var(--gold); }
.card a { color:var(--rose); }
h1, h2, .logo, .title { font-family:var(--title); font-weight:400; line-height:1.5; letter-spacing:0; }
h1 { font-size:18px; margin:.4em 0; }
h2 { font-size:15px; margin:.5em 0; }
h3 { font-family:var(--title); font-size:11px; color:var(--soft); margin:20px 0 6px; }
.center { text-align:center; }
.muted { color:var(--soft); }
.small { font-size:14px; }

/* Frame */
.top { display:flex; justify-content:space-between; align-items:center; padding:16px; max-width:600px; margin:auto; }
.logo { font-size:12px; color:var(--gold); text-decoration:none; white-space:nowrap; }
nav { display:flex; gap:6px; flex:none; }
.top { gap:12px; }
nav a { font-family:var(--body); color:var(--cream); text-decoration:none; padding:8px 12px; background:var(--plum); box-shadow:inset -3px -3px 0 var(--plum-d); }
nav a:hover { background:var(--frame); }
main { max-width:600px; margin:auto; padding:4px 16px 40px; }
.foot { text-align:center; color:#9d95bf; padding:20px; font-size:14px; }

/* Dialog boxes */
.card { position:relative; background:var(--cream); color:var(--ink); border:4px solid var(--ink); box-shadow:0 0 0 4px var(--cream), 0 10px 0 4px #0e0d1c;
  padding:20px 18px; margin:22px 4px; animation:pop-in .25s steps(4) both; }
.card .muted { color:var(--soft); }
.card.soft { background:var(--cream-2); }
@keyframes pop-in { from { opacity:0; transform:translateY(8px); } }
.kicker { font-family:var(--title); font-size:10px; color:var(--soft); line-height:1.8; }
.tale { font-size:18px; line-height:1.65; margin:.5em 0; }
.drop::first-letter { font-family:var(--title); color:var(--rose); font-size:1.25em; }
.intro { font-size:18px; margin:14px 0 0; padding-bottom:12px; border-bottom:4px dotted var(--line); }

/* Stage: a framed diorama window */
.stage { position:relative; height:250px; margin:12px 4px 30px; border:4px solid var(--cream); box-shadow:0 0 0 4px var(--night), 0 0 0 8px var(--frame); overflow:hidden; background:var(--night-2); }
.stage.tall { height:290px; }
.stage .scene, .share-card > .scene { position:absolute; inset:0; width:100%; height:100%; }
svg.scene { visibility:hidden; }
canvas.scene { image-rendering:pixelated; object-fit:cover; object-position:50% 100%; }
.actor, .cast { position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; align-items:flex-end; animation:hop 1.6s steps(2) infinite; }
.cast { gap:10px; }
@keyframes hop { 50% { transform:translateY(-4px); } }
.stage-top { position:absolute; top:10px; left:10px; right:10px; display:flex; align-items:center; gap:10px; }
.pill { font-family:var(--title); font-size:9px; background:var(--ink); color:var(--gold); padding:7px 9px; white-space:nowrap; }
.pill i { font-style:normal; color:#9d95bf; }
.progress { flex:1; height:10px; background:var(--ink); border:2px solid var(--ink); max-width:180px; }
.progress i { display:block; height:100%; background:var(--gold); transition:width .4s steps(6); }
.nameplate { position:absolute; right:10px; bottom:10px; font-family:var(--body); background:var(--ink); color:var(--cream); padding:4px 10px; font-size:15px; }
.nameplate span { color:#9d95bf; }
.big { line-height:0; text-align:center; animation:hop 1.6s steps(2) infinite; }
.big svg { display:inline-block; margin:0 4px; }

/* Stats */
.stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; text-align:left; }
.stat span { font-size:13px; color:var(--soft); text-transform:uppercase; }
.sb { height:12px; border:2px solid var(--ink); background:var(--cream-2); margin-top:2px; }
.sb i { display:block; height:100%; transition:width .5s steps(8); }
.sb i.h { background:var(--health); } .sb i.j { background:var(--joy); } .sb i.t { background:var(--trust); }

/* Story + choices */
.title { margin-top:16px; font-size:14px; }
.choices { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.choice { display:flex; align-items:center; gap:12px; width:100%; min-height:54px; text-align:left; font-family:var(--body); font-size:18px; color:var(--ink);
  background:#fffaf0; border:3px solid var(--ink); box-shadow:inset -4px -4px 0 var(--cream-2), 0 4px 0 var(--ink); padding:10px 12px; cursor:pointer; }
.choice:hover, .choice:focus-visible { background:var(--gold); box-shadow:inset -4px -4px 0 var(--gold-d), 0 4px 0 var(--ink); outline:none; }
.choice:hover .num::before, .choice:focus-visible .num::before { content:"▶"; }
.choice:active { transform:translateY(3px); box-shadow:inset -4px -4px 0 var(--gold-d), 0 1px 0 var(--ink); }
.choice .num { flex:none; width:28px; height:28px; background:var(--ink); color:var(--gold); display:inline-flex; align-items:center; justify-content:center; font-family:var(--title); font-size:10px; }
.choice:hover .num, .choice:focus-visible .num { font-size:0; }
.choice:hover .num::before, .choice:focus-visible .num::before { font-size:11px; }
.choice .lbl { flex:1; }
.choice .risk { flex:none; font-family:var(--title); font-size:8px; color:#fff; background:var(--rose); padding:5px 6px; }
.chose { margin-top:16px; }
.luck { display:inline-block; font-family:var(--title); font-size:11px; margin:8px 0 2px; } .luck.good { color:var(--up); } .luck.bad { color:var(--down); }
.chips { margin:10px 0 14px; }
.chip { display:inline-block; font-size:15px; padding:2px 10px; margin:0 6px 6px 0; border:2px solid currentColor; }
.chip.up { background:var(--up-bg); color:var(--up); } .chip.down { background:var(--down-bg); color:var(--down); }
.journal { margin-top:18px; text-align:left; } .journal summary { cursor:pointer; color:var(--soft); }
.frames { list-style:none; padding:0; }
.frames li { padding:8px 0; border-bottom:3px dotted var(--line); line-height:1.5; }
.frames b { color:var(--soft); font-weight:400; margin-right:4px; }

/* Buttons */
.btn { appearance:none; font-family:var(--body); font-size:18px; cursor:pointer; margin:8px 6px; padding:10px 20px; min-height:48px; border:0; color:var(--ink);
  background:var(--gold); box-shadow:inset -4px -4px 0 var(--gold-d), 0 4px 0 var(--ink); }
.btn:hover { filter:brightness(1.08); }
.btn:active { transform:translateY(3px); box-shadow:inset -4px -4px 0 var(--gold-d), 0 1px 0 var(--ink); }
.btn:focus-visible { outline:3px dashed var(--rose); outline-offset:3px; }
.btn.alt { background:var(--plum); color:var(--cream); box-shadow:inset -4px -4px 0 var(--plum-d), 0 4px 0 var(--ink); }
.hero-btn { font-size:20px; padding:12px 30px; }
.hero-btn::before { content:"▶ "; }
.bar { display:flex; flex-wrap:wrap; justify-content:center; }
.hero h1 { font-size:17px; }

/* Spin */
.spin svg { animation:none; }
.spin.landed svg { animation:land .5s steps(5); } @keyframes land { 0% { transform:translateY(-24px); } 60% { transform:translateY(0); } 80% { transform:translateY(-6px); } }
#spinName { min-height:1.5em; }

/* Ending keepsake */
.card.share-card { overflow:hidden; padding:150px 14px 18px; }
.share-card > .scene { height:260px; bottom:auto; }
.share-card .paper { position:relative; display:flow-root; background:var(--cream); border:4px solid var(--ink); padding:0 14px 16px; }
.share-card .paper .big { margin-top:-110px; }
.ending-title { color:var(--rose); font-size:14px; margin-top:12px; }
.brand { font-family:var(--title); font-size:10px; color:var(--soft); margin-top:12px; }
.share-bar, .share-card .journal, .share-card .hearts { position:relative; }
.share-bar { margin:16px 0 4px; }
.strip { display:flex; align-items:flex-end; gap:2px; height:56px; margin:14px 0 4px; border-bottom:3px solid var(--ink); }
.strip span { flex:1; background:var(--joy); min-height:4px; box-shadow:inset 0 3px 0 #ffc48a; }
.hearts { font-size:20px; }
.pop { display:inline-block; animation:pop .4s steps(3); } @keyframes pop { 50% { transform:scale(1.4); } }
.invite { background:var(--gold); }

/* Reveal */
.reveal { text-align:center; } .reveal [hidden] { display:none; } .reveal #revealBody { text-align:left; }
.odds-big { font-family:var(--title); font-size:16px; color:var(--rose); text-align:center; margin:.6em 0; line-height:1.6; overflow-wrap:anywhere; }
.odds-big span { font-family:var(--body); font-size:16px; color:var(--soft); }
.fact { background:var(--cream-2); border:3px solid var(--ink); padding:10px 12px; margin:10px 0; line-height:1.55; }
.src { white-space:nowrap; font-size:15px; margin-left:4px; }

/* Kind words + forms */
.word { background:#fffaf0; border:3px solid var(--line); padding:6px 10px; margin:6px 0; }
#wordForm { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
input[type=text] { font-family:var(--body); font-size:17px; padding:10px 12px; min-height:48px; border:3px solid var(--ink); background:#fffaf0; color:var(--ink); flex:1 1 220px; border-radius:0; }
input[type=text]:focus { outline:3px dashed var(--rose); outline-offset:2px; }

/* Meadow */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px; margin-top:12px; }
.tile { background:#fffaf0; border:3px solid var(--ink); box-shadow:0 4px 0 var(--ink); padding:0 0 10px; text-align:center; text-decoration:none; color:var(--ink); overflow:hidden; }
.card .tile { color:var(--ink); }
.tile:hover { background:var(--gold); }
.tile .e { position:relative; height:104px; margin-bottom:8px; display:flex; justify-content:center; align-items:flex-end; border-bottom:3px solid var(--ink); }
.tile .e .scene { position:absolute; inset:0; width:100%; height:100%; }
.tile .e svg:not(.scene) { position:relative; display:block; margin-bottom:2px; }
.tile b { font-family:var(--body); font-weight:400; font-size:19px; }
.tile .muted { font-size:14px; padding:0 8px; line-height:1.4; }
.tag { display:inline-block; font-family:var(--title); font-size:8px; color:var(--soft); border:2px solid var(--line); padding:3px 6px; margin-top:6px; }

/* Sources */
table { width:100%; border-collapse:collapse; font-size:16px; margin:6px 0 10px; }
td { padding:7px 6px; border-bottom:3px dotted var(--line); vertical-align:top; }

.stage .scene.leaving { animation:fade-out .6s steps(4) forwards; }
@keyframes fade-out { to { opacity:0; } }

.apps { position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:6px 0 10px; }
.app { font-family:var(--body); font-size:15px; text-decoration:none; color:var(--cream); background:var(--plum); box-shadow:inset -3px -3px 0 var(--plum-d); padding:8px 12px; min-height:40px; display:inline-flex; align-items:center; }
.card .app { color:var(--cream); }
.app:hover { background:var(--frame); }
a.btn { display:inline-flex; align-items:center; text-decoration:none; }
.card a.btn { color:var(--ink); }
.counter { font-size:15px; margin:10px 0 0; }
.foot a { color:#c9c1e8; }
.card ul { padding-left:20px; } .card li { margin:4px 0; }

.lang { display:inline-block; margin-top:10px; }
.lang select { font-family:var(--body); font-size:15px; background:var(--plum); color:var(--cream); border:0; padding:6px 8px; margin-left:6px; box-shadow:inset -3px -3px 0 var(--plum-d); }

#toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:var(--gold); border:3px solid var(--gold); padding:10px 16px; opacity:0; transition:opacity .2s; pointer-events:none; }
#toast.on { opacity:1; }

@media (max-width:420px) {
  h1, .hero h1 { font-size:15px; } .title { font-size:13px; }
  .logo { font-size:10px; } nav a { padding:7px 9px; font-size:15px; }
  .stage { height:220px; } .stage.tall { height:250px; }
  .card { padding:18px 14px; }
}
/* Korean, Japanese and Chinese characters need more pixels than the Latin pixel font's tiny labels. */
:root:not([lang="en"]) :is(.kicker, .pill, .tag, .brand, .risk, .luck, h3, .choice .num) { font-size:13px; }
:root:not([lang="en"]) .logo { font-family:"Press Start 2P", monospace; }
:root:not([lang="en"]) h1, :root:not([lang="en"]) .hero h1 { font-size:22px; }
:root:not([lang="en"]) h2, :root:not([lang="en"]) .ending-title { font-size:19px; }
:root:not([lang="en"]) .title { font-size:21px; }

@media (max-width:360px) { .top { padding:14px 10px; gap:8px; } .logo { font-size:9px; } nav { gap:4px; } nav a { padding:6px 7px; font-size:14px; } }
@media (prefers-reduced-motion: reduce) { .big, .actor, .cast, .pop, .card, .spin svg, .spin.landed svg { animation:none; } }