/* LOOK UP · the only chrome is Morrow's: red, mono, short. Gold belongs to the player. */
:root {
  --feed: #3aa0ff; --lamp: #ffb547; --morrow: #ff2e4d; --night: #070917; --ink: #f4f1ea;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display: "Dela Gothic One", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--ink); overflow: hidden; overscroll-behavior: none; }
body { font: 15px/1.35 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; touch-action: none; user-select: none; -webkit-user-select: none; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }

#hud { position: fixed; inset: 0; pointer-events: none; }
#mute { pointer-events: auto; position: absolute; left: 12px; top: calc(10px + var(--safe-t)); width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18); background: rgba(8,9,20,.45); color: #fff; font-size: 17px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#timer { position: absolute; left: 50%; top: calc(16px + var(--safe-t)); width: min(42vw, 220px); height: 4px; transform: translateX(-50%);
  background: rgba(255,255,255,.12); border-radius: 4px; overflow: hidden; opacity: 0; transition: opacity .4s; }
#timer.on { opacity: 1; }
#timer i { position: absolute; inset: 0; background: linear-gradient(90deg, #ff2e4d, #ff6a5a); transform-origin: left; }
#timer.walk i { background: #3dff8a; box-shadow: 0 0 12px #3dff8a; }
/* Morrow's forecast clock: when it lands. Red and beating in the last ten seconds. */
#clock { position: absolute; left: 50%; top: calc(26px + var(--safe-t)); transform: translateX(-50%); display: flex; gap: 6px; align-items: baseline; font-family: var(--mono); line-height: 1; }
#clock b { font-size: 15px; font-weight: 800; color: #e8f1ff; letter-spacing: .06em; }
#clock small { font-size: 10px; color: #ff8a98; opacity: .8; }
#clock.red b { color: #ff2e4d; font-size: 19px; text-shadow: 0 0 14px rgba(255,46,77,.9); animation: beat .86s ease-out infinite; }
@keyframes beat { 0% { transform: scale(1.18); } 30% { transform: scale(1); } 100% { transform: scale(1); } }

#meter { position: absolute; right: 12px; top: calc(10px + var(--safe-t)); display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 8px;
  padding: 6px 12px 7px 10px; border-radius: 10px; background: rgba(20,2,8,.55); border: 1px solid rgba(255,46,77,.45); font-family: var(--mono); }
#meter small { grid-column: 2; font-size: 9px; letter-spacing: .14em; color: #ff8a98; }
#meter b { grid-column: 2; font-size: 22px; line-height: 1; color: #fff; font-weight: 800; text-shadow: 0 0 12px rgba(255,46,77,.8); }
#meter.bump b { animation: bump .45s cubic-bezier(.2,1.6,.4,1); }
.eye { grid-row: span 2; width: 26px; height: 15px; border-radius: 50%; background: #f4f1ea; position: relative; box-shadow: 0 0 12px rgba(255,46,77,.7); }
.eye::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px; border-radius: 50%; background: radial-gradient(circle, #000 30%, #ff2e4d 34%, #6a0014 100%); }

#taunt { position: absolute; left: 0; right: 0; top: calc(112px + var(--safe-t)); text-align: center; font: 800 clamp(16px, 5vw, 26px)/1.1 var(--mono); color: #ff2e4d;
  letter-spacing: .06em; text-shadow: 0 0 14px rgba(255,46,77,.9), 2px 0 #3aa0ff; animation: glitch .9s steps(2) 2; }
#pop { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font: 800 clamp(30px, 11vw, 60px)/1 var(--mono); color: #fff; letter-spacing: .08em;
  text-shadow: 3px 0 #ff2e4d, -3px 0 #3aa0ff, 0 0 20px rgba(255,255,255,.6); animation: pop .7s cubic-bezier(.2,1.4,.4,1) both; }
#pop.read { color: #ff2e4d; text-shadow: 0 0 22px rgba(255,46,77,.9); }
#pop.gold { color: #ffe2a8; text-shadow: 0 0 22px rgba(255,181,71,.95), 3px 0 #ff9a2e; }
/* Morrow's forecast was "nobody looks up": the number is how wrong it is (a game number, never a score of the person) */
#forecast { position: absolute; left: 12px; top: calc(58px + var(--safe-t)); max-width: 40vw; font-family: var(--mono); line-height: 1; }
#forecast small { display: block; white-space: pre-line; font-size: 8.5px; line-height: 1.3; letter-spacing: .12em; color: #ff8a98; opacity: .85; }
#forecast b { display: block; margin-top: 3px; font-size: 26px; font-weight: 800; color: #ffe2a8; text-shadow: 0 0 14px rgba(255,181,71,.85); }
#lookhint { position: absolute; left: 0; right: 0; bottom: calc(22% + var(--safe-b)); text-align: center; font: 800 clamp(15px, 4.8vw, 22px)/1 var(--mono); letter-spacing: .3em;
  text-indent: .3em; text-transform: uppercase; color: #ffe2a8; text-shadow: 0 0 16px rgba(255,181,71,.9); animation: glow 1.1s ease-in-out infinite alternate; }
@keyframes glow { from { opacity: .55; } to { opacity: 1; } }
/* the instant replay: a gold tag and a recording dot (the shape says it; the word is optional) */
#replay { position: absolute; left: 50%; top: calc(18px + var(--safe-t)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  font: 800 14px/1 var(--mono); letter-spacing: .3em; color: #ffd27a; text-shadow: 0 0 12px rgba(255,181,71,.8); }
#replay i { width: 10px; height: 10px; border-radius: 50%; background: #ff2e4d; box-shadow: 0 0 10px #ff2e4d; animation: glow .5s steps(2) infinite alternate; }

#title { position: fixed; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; animation: title 2.2s ease both; }
#title b { display: block; font: 400 clamp(64px, 22vw, 150px)/1 var(--display); letter-spacing: .02em;
  background: linear-gradient(180deg, #fff6d8 0%, #ffd27a 45%, #ff9a2e 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255,181,71,.75)) drop-shadow(0 4px 0 rgba(90,30,0,.6)); }
#title span { display: block; margin-top: 6px; font: 800 clamp(14px, 4.6vw, 22px)/1 var(--mono); letter-spacing: .6em; color: #ffe2a8; text-indent: .6em; text-shadow: 0 0 10px rgba(255,181,71,.8); }
#title.out { animation: titleOut .5s ease both; }
#title small { display: block; margin-bottom: 8px; font: 800 12px/1 var(--mono); letter-spacing: .4em; text-indent: .4em; color: #ff8a98; }
#title em { display: block; margin-top: 14px; font: 700 clamp(14px, 4.2vw, 19px)/1.2 system-ui, "Hiragino Sans", sans-serif; font-style: normal; color: #fff6d8; text-shadow: 0 0 12px rgba(0,0,0,.9); }

#friend { position: fixed; left: 50%; top: calc(62px + var(--safe-t)); transform: translateX(-50%); max-width: 88vw; padding: 8px 14px; border-radius: 10px;
  background: rgba(20,2,8,.62); border: 1px solid rgba(255,46,77,.5); font: 700 13px/1.3 var(--mono); color: #ffd0d6; text-align: center; }

#hint { position: fixed; left: 50%; bottom: calc(18% + var(--safe-b)); transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; pointer-events: none;
  font: 700 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,226,168,.85); }
#hint .hand { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--lamp); box-shadow: 0 0 18px rgba(255,181,71,.7), inset 0 0 12px rgba(255,181,71,.5);
  animation: swipe 1.6s ease-in-out infinite; }
#stick { position: fixed; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid rgba(255,181,71,.35); pointer-events: none;
  box-shadow: 0 0 22px rgba(255,181,71,.18) inset; }
#stick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff4d6, #ffb547 55%, #c26b0a);
  box-shadow: 0 0 18px rgba(255,181,71,.8); }

#result { position: fixed; inset: auto 0 0 0; padding: 0 14px calc(14px + var(--safe-b)); pointer-events: none; }
.r-sheet { pointer-events: auto; max-width: 460px; margin: 0 auto; padding: 18px 18px 14px; border-radius: 22px; background: linear-gradient(180deg, rgba(10,8,18,.78), rgba(6,6,14,.94));
  border: 1px solid rgba(255,181,71,.28); box-shadow: 0 -10px 60px rgba(0,0,0,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: rise .6s cubic-bezier(.2,1.2,.3,1) both; }
.r-l1 { margin: 0; font: 700 clamp(15px, 4.2vw, 19px)/1.25 system-ui, "Hiragino Sans", sans-serif; color: #9fb4d8; }
.r-l2 { margin: 2px 0 12px; font: 400 clamp(30px, 9.5vw, 46px)/1.05 var(--display); color: var(--lamp); text-shadow: 0 0 18px rgba(255,181,71,.55); }
.r-morrow { padding: 10px 12px; border-radius: 14px; background: rgba(40,4,12,.55); border: 1px solid rgba(255,46,77,.35); font-family: var(--mono); position: relative; }
.r-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.r-row .eye { grid-row: auto; }
.r-label { font-size: 10px; letter-spacing: .16em; color: #ff8a98; }
.r-pct { font-size: 30px; color: #fff; text-shadow: 0 0 14px rgba(255,46,77,.85); }
.r-stamp { display: inline-block; margin: 8px 0 2px; padding: 3px 10px; border: 2px solid var(--morrow); color: var(--morrow); font: 800 14px var(--mono); letter-spacing: .14em;
  transform: rotate(-3deg); animation: stamp .5s .5s cubic-bezier(.2,1.8,.4,1) both; }
.r-called { margin: 6px 0 0; font-size: 12px; color: #d9c7cb; }
.r-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.r-btns button, .r-card { min-height: 46px; border-radius: 14px; border: 0; font: 800 15px system-ui, "Hiragino Sans", sans-serif; cursor: pointer; }
.r-challenge { grid-column: span 2; min-height: 54px !important; background: linear-gradient(180deg, #ffd27a, #ffab2e); color: #2a1400; box-shadow: 0 6px 24px rgba(255,171,46,.4); font-size: 18px !important; }
.r-again { grid-column: span 2; min-height: 42px !important; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.22) !important; }
.r-clip { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2) !important; }
.r-clip:disabled { opacity: .5; }
.r-card { width: 100%; margin-top: 8px; background: transparent; color: #ffe2a8; border: 1px dashed rgba(255,181,71,.4) !important; min-height: 38px; font-size: 13px; }
.r-dock { margin-top: 10px; }
/* the night code: a night the player carries to the app (the door, L2) */
.r-night { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(255,181,71,.08); border: 1px solid rgba(255,181,71,.3); }
.r-night[hidden] { display: none; }
.r-night-k { font: 400 22px var(--display); color: var(--lamp); text-shadow: 0 0 12px rgba(255,181,71,.6); }
.r-night-l { font: 600 11px/1.25 system-ui, "Hiragino Sans", sans-serif; color: #e8d9b8; }
.r-code { font: 800 18px var(--mono); letter-spacing: .18em; color: #fff; }
.r-copy { min-height: 36px; padding: 0 12px; border-radius: 10px; border: 0; background: #f4f1ea; color: #111; font: 800 13px system-ui, "Hiragino Sans", sans-serif; cursor: pointer; }
.r-open { display: block; margin-top: 8px; text-align: center; font: 600 12px system-ui, "Hiragino Sans", sans-serif; color: #b9c6e4; }
.r-open[hidden] { display: none; }

#toast { position: fixed; left: 50%; bottom: calc(40% + var(--safe-b)); transform: translateX(-50%); padding: 8px 14px; border-radius: 10px; background: rgba(0,0,0,.75); font: 700 13px var(--mono); }
#boot { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity .8s; background: var(--night); overflow: hidden; }
.boot-art { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; filter: brightness(.5) saturate(1.15); animation: bootPush 9s ease-out forwards; }
.boot-title { position: relative; display: grid; justify-items: center; gap: 6px; margin-top: -18vh; text-shadow: 0 2px 24px rgba(0,0,0,.8); }
.boot-title b { font: 900 clamp(44px, 14vw, 72px)/1 "Hiragino Mincho ProN", "Yu Mincho", serif; color: #fff; letter-spacing: .06em; }
.boot-title span { font: 800 13px var(--mono); letter-spacing: .5em; color: var(--lamp); padding-left: .5em; }
#boot .boot-line { position: absolute; bottom: 30%; }
@keyframes bootPush { from { transform: scale(1); } to { transform: scale(1.06); } }
#boot.gone { opacity: 0; }
.boot-line { width: 40px; height: 2px; background: var(--lamp); box-shadow: 0 0 12px var(--lamp); animation: boot 1.2s ease-in-out infinite; }
#boot p { position: absolute; bottom: 20%; left: 10%; right: 10%; text-align: center; font: 600 13px var(--mono); color: #ffb3bd; }
#boot.failed { pointer-events: auto; background: var(--night); }

/* desktop: the same game, a wider view; the result sits on the right */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  #result { inset: 0 24px 0 auto; display: grid; align-items: center; width: 440px; padding: 0; }
  .r-sheet { animation-name: slide; }
}

@keyframes bump { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes glitch { 0% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 100% { transform: none; } }
@keyframes pop { 0% { transform: scale(2.2); opacity: 0; } 30% { opacity: 1; } 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(.96); opacity: 0; } }
@keyframes title { 0% { opacity: 0; transform: scale(1.3); filter: blur(10px); } 25% { opacity: 1; transform: scale(1); filter: none; } 100% { opacity: 1; } }
@keyframes titleOut { to { opacity: 0; transform: translateY(-30px) scale(.9); filter: blur(6px); } }
@keyframes swipe { 0%, 100% { transform: translateX(-38px); } 50% { transform: translateX(38px); } }
@keyframes rise { from { transform: translateY(110%); } }
@keyframes slide { from { transform: translateX(120%); } }
@keyframes stamp { from { transform: rotate(-3deg) scale(2.4); opacity: 0; } }
@keyframes boot { 0%, 100% { transform: scaleX(.3); opacity: .4; } 50% { transform: scaleX(1.6); opacity: 1; } }
/* 百鬼夜行 · the night parade */
#paradeBar { position: absolute; left: 50%; top: calc(60px + var(--safe-t)); transform: translateX(-50%); display: flex; gap: 6px; pointer-events: none; }
#paradeBar[hidden] { display: none; }
#paradeBar i { width: 34px; height: 34px; border-radius: 50%; background-size: cover; background-position: center 30%; border: 2px solid rgba(110, 150, 255, .55); filter: grayscale(.9) brightness(.55) sepia(.3) hue-rotate(180deg); transition: filter .4s, border-color .4s, transform .4s; }
#paradeBar i.on, #paradeBar i.me { filter: none; border-color: #ffd27a; box-shadow: 0 0 12px rgba(255, 190, 90, .7); }
#paradeBar i.pop { animation: bump .5s cubic-bezier(.2, 1.6, .4, 1); }
#smack { position: fixed; transform: translate(-50%, -100%); text-align: center; pointer-events: none; z-index: 6; animation: smack 1.1s cubic-bezier(.2, 1.4, .4, 1) both; }
#smack[hidden] { display: none; }
#smack b { display: block; font: 900 clamp(44px, 15vw, 84px)/1 var(--display); color: #fff6d8; -webkit-text-stroke: 3px #1a0a06; paint-order: stroke; transform: rotate(-8deg);
  text-shadow: 0 0 0 #c7372f, 5px 5px 0 #c7372f, 0 0 30px rgba(255, 200, 120, .9); }
#smack b::before { content: ""; position: absolute; left: 50%; top: 45%; width: 220px; height: 220px; transform: translate(-50%, -50%); z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 246, 216, .85) 0 4deg, transparent 4deg 14deg); -webkit-mask: radial-gradient(circle, transparent 30%, #000 32%, #000 60%, transparent 70%); mask: radial-gradient(circle, transparent 30%, #000 32%, #000 60%, transparent 70%); }
#smack span { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 999px; background: rgba(10, 10, 15, .8); border: 1px solid #ffd27a; font: 800 clamp(13px, 4vw, 17px)/1.2 system-ui, "Hiragino Sans", sans-serif; color: #ffd27a; }
@keyframes smack { 0% { opacity: 0; transform: translate(-50%, -100%) scale(2.4); } 12% { opacity: 1; transform: translate(-50%, -100%) scale(.92); } 22% { transform: translate(-50%, -100%) scale(1.04); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -115%) scale(1); } }
#paradeArrows { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
#paradeArrows i { position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%; background-size: cover; background-position: center 30%; border: 3px solid #6e96ff; box-shadow: 0 0 14px rgba(110, 150, 255, .8); animation: glow 1s ease-in-out infinite alternate; }
#paradeArrows i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border: 9px solid transparent; border-left: 13px solid #6e96ff; transform: translate(-50%, -50%) rotate(var(--a)) translateX(30px); }
#paradeArrows i[hidden] { display: none; }
.r-parade { margin: 4px 0 0; text-align: center; }
.r-parade[hidden] { display: none; }
.r-parade p { margin: 8px 0 6px; font: 800 12px/1 var(--mono); letter-spacing: .25em; color: #ffd27a; }
.r-parade p.dim { color: rgba(170, 190, 255, .7); }
.r-roll { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; --face: clamp(34px, 11.2vw, 46px); }
.r-roll i { position: relative; flex: none; width: var(--face); height: var(--face); margin-bottom: 24px; border-radius: 50%; background-size: cover; background-position: center 30%; border: 2px solid rgba(110, 150, 255, .5); filter: grayscale(.85) brightness(.55); }
.r-roll i.on { filter: none; border-color: #ffd27a; box-shadow: 0 0 14px rgba(255, 190, 90, .6); }
#paradeBar i.you, .r-roll i.you { background-size: 180%; background-position: center 4%; background-color: #1b2a5a; }
/* a name is as wide as its face plus the gap and wraps inside it: two names can never print over each other */
.r-roll i small { position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); width: calc(var(--face) + 4px); max-height: 20px; overflow: hidden; white-space: normal; overflow-wrap: anywhere; text-align: center; font: 700 8.5px/1.15 system-ui, "Hiragino Sans", sans-serif; font-style: normal; color: #fff6d8; }
.r-roll + p { margin-top: 4px; }
.r-invite { margin-top: 8px; width: 100%; min-height: 48px; border-radius: 14px; border: 1px solid #ffd27a; background: rgba(255, 210, 122, .12); color: #ffd27a; font: 800 15px system-ui, "Hiragino Sans", sans-serif; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { #smack, #title, #pop, #taunt, #lookhint, #clock b, .r-sheet, .r-stamp, #hint .hand { animation: none !important; } }

/* director (trailer) mode: frame-stepped by tools/lookup_trailer; every word is drawn by the overlay pass */
.director *, .director *::before, .director *::after { animation: none !important; transition: none !important; }
.director #hud, .director #replay, .director #title, .director #hint, .director #friend, .director #stick, .director #boot, .director #result, .director #toast { display: none !important; }

/* The cold open: three Attention Kingdom panels, Morrow's and Riku's voices, ~12 s, once a day.
   Story, never instruction; the panels carry no words, captions come from copy in five languages. */
#coldopen { position: fixed; inset: 0; z-index: 30; background: #05060d; overflow: hidden; }
#coldopen .co-frame { position: absolute; inset: 0; }
#coldopen .co-img { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%) scale(1.06); filter: saturate(1.05) contrast(1.05);
  transition: opacity .28s ease; will-change: transform; }
#coldopen .co-img.push { animation: coPush 5.5s linear both; }
#coldopen .co-img.drift { animation: coDrift 5.5s linear both; }
#coldopen .co-img.rise { animation: coRise 5.5s ease-out both; }
@keyframes coPush { from { transform: translate(-50%, -50%) scale(1.04); } to { transform: translate(-50%, -52%) scale(1.16); } }
@keyframes coDrift { from { transform: translate(-48%, -50%) scale(1.12); } to { transform: translate(-52%, -50%) scale(1.12); } }
@keyframes coRise { from { transform: translate(-50%, -46%) scale(1.14); } to { transform: translate(-50%, -54%) scale(1.06); } }
#coldopen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 45%, rgba(0,0,0,.65) 100%), linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.75) 100%); }
#coldopen .co-cap { position: absolute; left: 22px; right: 22px; bottom: calc(12% + var(--safe-b)); z-index: 2; margin: 0; text-align: center; color: #fff;
  font: 700 clamp(17px, 5vw, 23px)/1.35 system-ui, "Hiragino Sans", "Noto Sans Thai", "Noto Sans KR", sans-serif; text-shadow: 0 2px 6px rgba(0,0,0,.9), 0 0 18px rgba(0,0,0,.8);
  opacity: 0; transition: opacity .25s ease; }
#coldopen .co-cap.on { opacity: 1; }
#coldopen .co-cap.morrow { color: #ffb3bd; font-family: var(--mono); font-weight: 800; letter-spacing: .02em; }
#coldopen .co-skip { position: absolute; right: 14px; top: calc(14px + var(--safe-t)); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.35); color: #fff; font: 800 16px var(--mono); }
#coldopen .co-flash { position: absolute; inset: 0; z-index: 2; background: #fff; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
#coldopen.out { animation: coOut .6s ease both; }
@keyframes coOut { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #coldopen .co-img, .boot-art { animation: none !important; } }
.director #coldopen { display: none !important; }


/* one ending screen (games lift 11-11) */
.r-btns { margin-top: 8px; }
.r-more { margin-top: 8px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); }
.r-more summary { list-style: none; padding: 9px 12px; font: 700 12px system-ui, "Hiragino Sans", sans-serif; color: #b9c6e4; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.r-more summary::-webkit-details-marker { display: none; } .r-more summary::after { content: "＋"; color: #ffd27a; } .r-more[open] summary::after { content: "－"; }
.r-more[open] { padding: 0 10px 10px; } .r-more[open] summary { margin: 0 -10px; }
.r-more .r-clip, .r-more .r-card { display: block; width: 100%; min-height: 44px; border-radius: 14px; font: 800 15px system-ui, "Hiragino Sans", sans-serif; cursor: pointer; margin-top: 8px; }
.r-door { margin-top: 10px; }
.r-sheet { max-height: calc(100dvh - 20px - var(--safe-t)); overflow-y: auto; overscroll-behavior: contain; }
@media (max-height: 640px) {
  .r-sheet { padding: 12px 14px 10px; } .r-l1 { font-size: 13px; } .r-l2 { margin-bottom: 6px; font-size: 26px; } .r-morrow { padding: 6px 10px; } .r-pct { font-size: 22px; } .r-stamp { margin: 2px 0 0; font-size: 11px; } .r-called { display: none; }
  .r-parade p { margin: 6px 0 4px; font-size: 10px; } .r-roll i { margin-bottom: 20px; } .r-challenge { min-height: 46px !important; font-size: 16px !important; } .r-again { min-height: 36px !important; } .r-more summary { padding: 6px 12px; } .r-door { margin-top: 7px; }
}