:root {
    --bg: #0d0f1f;
    --card: #171a33;
    --line: rgba(255, 255, 255, 0.1);
    --text: #f5f6ff;
    --dim: #a5a9c8;
    --accent: #6366f1;
    --accent2: #3b82f6;
    --good: #22c55e;
    --bad: #ef4444;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; line-height: 1.5; overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
.wrap { max-width: 460px; margin: 0 auto; padding: 12px 16px 40px; }
.top { display: flex; justify-content: space-between; align-items: center; }
.brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; text-decoration: none; color: var(--dim); }
.top-right { display: flex; gap: 8px; align-items: center; }
.chip { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 15px; }
.icon-btn { background: none; border: 1px solid var(--line); color: var(--text); border-radius: 999px; width: 34px; height: 34px; font-size: 15px; }
.title { font-family: 'Space Grotesk', sans-serif; font-size: 30px; line-height: 1.1; margin-top: 10px; }
.sub { color: var(--dim); font-size: 14px; margin: 2px 0 10px; }
.stage-box { -webkit-touch-callout: none; overscroll-behavior: contain; width: 100%; aspect-ratio: 360 / 600; border-radius: 22px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45); background: #fdf8ee; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
#stage { width: 100%; height: 100%; display: block; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#stage [data-id] { cursor: grab; }
/* invisible overlays (night sky, flood water, lamp glow, smoke...) must never swallow a touch meant for what's under them */
#stage [opacity="0"], #stage [opacity="0.000"] { pointer-events: none; }
#stage text { -webkit-user-select: none; user-select: none; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tries-box { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 13px; }
#tries { display: flex; gap: 4px; }
.try { width: 16px; height: 16px; border-radius: 4px; display: inline-block; }
.try.bad { background: var(--bad); }
.try.good { background: var(--good); }
.btns { display: flex; gap: 8px; }
.btn { border-radius: 12px; padding: 9px 14px; font-weight: 600; font-size: 14px; border: 1px solid var(--line); color: var(--text); background: var(--card); }
.btn.primary { background: var(--accent); border-color: var(--accent); width: 100%; padding: 13px; font-size: 16px; margin-top: 10px; }
.btn.primary:disabled { opacity: 0.6; }
.hint { margin-top: 10px; background: #2a2440; border: 1px solid #4b3f7a; padding: 10px 12px; border-radius: 12px; font-size: 14px; }
.note { background: #1e2a4a; border: 1px solid #2f4a80; padding: 10px 12px; border-radius: 12px; font-size: 14px; margin-bottom: 10px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin-top: 16px; }
.card h2 { font-family: 'Space Grotesk', sans-serif; font-size: 21px; line-height: 1.2; margin-bottom: 6px; }
.card p { color: var(--dim); font-size: 14px; }
.result #result-trick { color: var(--text); }
#share-preview { background: #0f1126; border-radius: 12px; padding: 10px 12px; margin-top: 10px; font-family: inherit; font-size: 14px; white-space: pre-wrap; color: var(--text); }
.small { font-size: 13px; color: var(--dim); margin-top: 8px; }
.signup { border-color: #3d3f8f; background: linear-gradient(180deg, #1c1f45, #171a33); }
.signup input[type=email] { width: 100%; margin-top: 12px; padding: 13px 14px; border-radius: 12px; border: 1px solid #3a3e70; background: #0f1126; color: var(--text); font-size: 16px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 14px; color: var(--text); }
.check input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fine { font-size: 12px !important; margin-top: 10px; }
.ok { color: #86efac !important; font-weight: 600; margin-top: 8px; }
.foot { margin-top: 28px; color: var(--dim); font-size: 13px; text-align: center; }
.foot p + p { margin-top: 6px; }
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: flex-end; justify-content: center; z-index: 20; }
.modal[hidden] { display: none; }
.sheet { background: var(--card); width: 100%; max-width: 460px; border-radius: 22px 22px 0 0; padding: 18px 16px 28px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.sheet-head h2 { font-family: 'Space Grotesk', sans-serif; }
#archive-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.arch { background: #0f1126; border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 10px 0; display: flex; flex-direction: column; align-items: center; }
.arch b { font-size: 16px; }
.arch span { font-size: 11px; color: var(--dim); }
.arch.done { border-color: var(--good); }
.arch.locked { opacity: 0.45; cursor: default; }
.arch.today { border-color: var(--accent); background: #1d2050; }

/* ---------- reel mode (?reel=N): 360x640 css px, rendered at 3x = 1080x1920 ---------- */
#reel-layer { display: none; }
body.reel { background: radial-gradient(circle at 50% 30%, #262b63, #0d0f1f 75%); width: 360px; height: 640px; overflow: hidden; }
body.reel .wrap { padding: 0; max-width: none; }
body.reel .wrap > *:not(.stage-box) { display: none !important; }
body.reel .stage-box { position: absolute; left: 21px; top: 84px; width: 318px; }
body.reel #reel-layer { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#reel-hook { position: absolute; top: 22px; left: 12px; right: 12px; text-align: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 23px; line-height: 1.15; color: #fff; text-shadow: 0 2px 0 #000; }
#hand { position: absolute; left: 0; top: 0; width: 1px; height: 1px; transform-origin: 0 0; z-index: 6; filter: drop-shadow(4px 8px 6px rgba(0, 0, 0, 0.35)); }
#think { position: absolute; left: 50%; top: 560px; transform: translateX(-50%); background: #111827; color: #fff; border: 3px solid #fde047; border-radius: 999px; padding: 6px 18px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 19px; white-space: nowrap; z-index: 7; }
#think b { color: #fde047; font-size: 22px; margin-left: 4px; }
#endcard { position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%, #3b3fa8, #11132b 72%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; z-index: 8; }
#endcard[hidden] { display: none; }
.end-logo { font-size: 74px; }
.end-kick { font-family: 'Space Grotesk', sans-serif; font-size: 20px; color: #fde047; margin-top: 8px; font-weight: 700; }
.end-big { font-family: 'Space Grotesk', sans-serif; font-size: 36px; line-height: 1.05; font-weight: 700; margin-top: 14px; }
.end-url { margin-top: 18px; background: #fff; color: #11132b; font-weight: 800; font-size: 25px; padding: 10px 20px; border-radius: 999px; }
.end-small { margin-top: 16px; color: #c7cbf0; font-size: 14px; }
.end-play { font-size: 18px; color: #fff; font-weight: 600; margin-top: 26px; }
.end-play + .end-url { margin-top: 8px; }
.end-kick { font-size: 24px; }