/* BE THE FEED — Morrow's night console over Mei's room.
   Sol swaps art in via ASSET markers (briefs/ASSETS_04_BE_THE_FEED_PROMPTS.md).
   Keep ids, data-screen and data-for. */
:root { --lab:#f4f4f2; --ink:#0b0b0c; --signal:#e5132b; --riku:#f2a541; --night:#0e1a2b; --dim:#9a9a9a;
  --card-art: none; /* ASSET: per-hook card art via [data-hook] rules below */ }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#0b0b0c; color:#f4f4f2;
  font:500 16px/1.45 system-ui,"Hiragino Sans","Noto Sans JP",sans-serif; overflow-x:hidden; -webkit-user-select:none; user-select:none; }
main { min-height:100svh; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto 1fr; gap:10px;
  padding:max(12px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); max-width:520px; margin:0 auto; }

.bar { display:flex; justify-content:space-between; align-items:center; }
.brand { font:700 11px ui-monospace,monospace; letter-spacing:.14em; color:#6a6a6a; }
.mute { width:40px; height:40px; border-radius:50%; border:1px solid #3a3a3a; background:none; color:#f4f4f2; font-size:16px; }
.machine { font:700 12.5px/1.45 ui-monospace,monospace; letter-spacing:.04em; color:var(--signal); margin:0; min-height:3em; }

/* ── The room ── */
.stageWrap { position:relative; border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.6); }
#room { display:block; width:100%; aspect-ratio:1/1; }
.hud { position:absolute; left:12px; top:10px; display:flex; align-items:baseline; gap:6px; pointer-events:none; }
.kept { font:800 clamp(34px,11vw,54px)/1 ui-monospace,monospace; color:var(--signal); text-shadow:0 2px 12px rgba(0,0,0,.6); letter-spacing:-.03em; }
.keptLabel { font:700 11px ui-monospace,monospace; color:#f4f4f2; opacity:.7; letter-spacing:.1em; }
.kept.bump { animation:bump .25s ease-out; }
@keyframes bump { 40% { transform:scale(1.18); } }
[data-screen="console"] .hud, [data-screen="escape"] .hud, [data-screen="escaped"] .hud { visibility:hidden; }

/* Notifications rising from Mei's phone */
.notes { position:absolute; inset:0; pointer-events:none; }
.note { position:absolute; left:40%; top:30%; transform:translate(-50%,0); padding:8px 12px; border-radius:14px; white-space:nowrap;
  background:rgba(250,250,250,.94); color:#0b0b0c; font:700 13px system-ui,"Hiragino Sans",sans-serif; box-shadow:0 8px 24px rgba(0,0,0,.4);
  border-left:4px solid var(--tint,#6ec3ff); animation:float 1.6s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes float { 0% { opacity:0; transform:translate(-50%,10px) scale(.8); } 15% { opacity:1; transform:translate(-50%,0) scale(1.05); }
  70% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-90px) scale(.95); } }
.glitchLayer { position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:0; }
.glitchLayer.on { animation:glitch .35s steps(3); }
@keyframes glitch { 0% { opacity:.9; background:repeating-linear-gradient(0deg,rgba(229,19,43,.5) 0 2px,transparent 2px 7px); transform:translateX(-6px); }
  50% { opacity:.6; transform:translateX(5px); } 100% { opacity:0; } }

/* ── Panels ── */
.panel { display:none; align-self:start; }
[data-screen="console"] [data-for="console"], [data-screen="play"] [data-for="play"],
[data-screen="end"] [data-for="end"], [data-screen="escape"] [data-for="escape"],
[data-screen="escaped"] [data-for="escaped"] { display:block; animation:enter .35s ease-out both; }
@keyframes enter { from { opacity:0; transform:translateY(8px); } }
.ask { margin:0 0 8px; color:#cfcfcf; }
.dim { color:var(--dim); margin:0 0 8px; } .small { font-size:12px; }
.label { font:700 11px ui-monospace,monospace; letter-spacing:.08em; color:#8a8a8a; text-transform:uppercase; margin:10px 0 4px; }

.timer { height:5px; background:#222; border-radius:3px; overflow:hidden; margin-bottom:10px; }
.timer i { display:block; height:100%; width:100%; background:var(--signal); transform-origin:left; }
.timer.hurry i { background:#ff5a4e; box-shadow:0 0 12px var(--signal); }

.hooks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.hooks button { position:relative; min-height:118px; border:0; border-radius:14px; background:#f4f4f2 var(--card-art) center/cover; color:#0b0b0c; padding:10px 6px;
  font:700 13px/1.2 system-ui,"Hiragino Sans",sans-serif; display:grid; gap:6px; place-items:center; align-content:center; touch-action:manipulation;
  overflow-wrap:anywhere; box-shadow:0 6px 0 rgba(0,0,0,.45), inset 0 -4px 0 var(--tint,#ccc); animation:deal .3s cubic-bezier(.2,.9,.3,1.2) both;
  transition:transform .08s; }
.hooks button[data-hook="rage"] { --card-art:url('./assets/hook_rage.webp'); }
.hooks button[data-hook="compare"] { --card-art:url('./assets/hook_compare.webp'); }
.hooks button[data-hook="cliffhanger"] { --card-art:url('./assets/hook_cliffhanger.webp'); }
.hooks button[data-hook="cute"] { --card-art:url('./assets/hook_cute.webp'); }
.hooks button[data-hook="alarm"] { --card-art:url('./assets/hook_alarm.webp'); }
.hooks button[data-hook="autoplay"] { --card-art:url('./assets/hook_autoplay.webp'); }
.hooks button[data-hook="friend"] { --card-art:url('./assets/hook_friend.webp'); }
.hooks button:nth-child(2) { animation-delay:.05s; } .hooks button:nth-child(3) { animation-delay:.1s; }
@keyframes deal { from { opacity:0; transform:translateY(30px) rotate(-4deg); } }
.hooks button b { font-size:32px; line-height:1; }
.hooks button[data-hook="friend"] { background:#fff4dd; box-shadow:0 6px 0 rgba(0,0,0,.45), inset 0 -4px 0 var(--riku); }
.hooks button:active { transform:translateY(4px); }
.hooks button.sent { animation:send .35s cubic-bezier(.5,0,.8,.3) forwards; }
@keyframes send { to { opacity:0; transform:translateY(-160px) scale(.6) rotate(6deg); } }
.hooks.locked button:not(.sent) { opacity:.3; transition:opacity .2s; }

.tactics { display:flex; gap:10px; font-size:30px; min-height:40px; flex-wrap:wrap; }
.tactics span { display:inline-grid; place-items:center; width:48px; height:48px; border-radius:12px; background:#1a1a1d; border:1px solid #333;
  animation:stampIn .3s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes stampIn { from { opacity:0; transform:scale(1.8) rotate(-12deg); } }
.riku { margin:14px 0; padding:14px; border-radius:12px; background:linear-gradient(135deg,var(--night),#1b2a40); color:#f4efe6; border:1px solid rgba(242,165,65,.35); }
.trapAsk { color:#f4f4f2; font-weight:700; margin:6px 0 0; }
.row { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
button.primary, button.ghost, a.door { padding:14px 18px; border-radius:999px; font:700 15px system-ui,"Hiragino Sans",sans-serif; text-decoration:none; }
button.primary { background:#f4f4f2; color:#0b0b0c; border:0; }
button.primary.big { width:100%; padding:18px; font-size:17px; }
button.ghost { background:none; color:#f4f4f2; border:2px solid #f4f4f2; }
a.door { background:var(--night); color:var(--riku); border:1px solid var(--riku); }

/* ── Escape: hold to put it down ── */
.hold { position:relative; display:block; margin:6px auto 0; width:min(60vw,230px); aspect-ratio:1; border-radius:50%; border:0;
  background:radial-gradient(circle at 50% 40%,#23232a,#101014); color:#f4f4f2; font:800 18px system-ui,"Hiragino Sans",sans-serif; touch-action:none;
  box-shadow:0 12px 40px rgba(0,0,0,.6); transition:transform .15s; }
.hold.down { transform:scale(.95); }
.hold svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.hold circle { fill:none; stroke:#2a2a2e; stroke-width:6; }
.hold #ring { stroke:var(--riku); stroke-dasharray:289; stroke-dashoffset:289; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(242,165,65,.7)); }
.hold.pulled { animation:shake .32s; }
@keyframes shake { 20% { transform:translateX(-10px); } 60% { transform:translateX(10px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .note { opacity:1; }
}

/* Codex visual QA: the room stays the hero while controls feel touchable. */
.primary,.door,.hold,.trapAsk button { transition:transform .18s ease,filter .18s ease,box-shadow .18s ease; }
.primary:hover,.door:hover,.trapAsk button:hover { transform:translateY(-2px); filter:brightness(1.07); }
button:focus-visible,a:focus-visible { outline:3px solid #f2a541; outline-offset:4px; }