/* After Class — all game styles.
 *
 * Every piece of UI has two faces. The cute one is the default: pastel paper, pink hearts,
 * a little heart cursor. When the story goes wrong, #game gets the "uncanny" class and the
 * same pieces turn into their twins: drained colors, eyes instead of hearts, torn tape.
 */
:root {
  --ink: #5b3d4c;
  --ink-soft: #8a6878;
  --paper: #fffaf6;
  --paper2: #ffeef4;
  --line: #ffc9dc;
  --pink: #ff7eb0;
  --pink-deep: #e2487f;
  --peach: #ffb38a;
  --mint: #8fdccf;
  --lav: #b9a3f0;
  --butter: #fff3c4;
  --danger: #e0483c;
  --who: #ff7eb0;
  --arrow: "♥";
  --sticker: "✿";
  --font: "M PLUS Rounded 1c", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Segoe UI", system-ui, sans-serif;
  --display: "Mochiy Pop One", "M PLUS Rounded 1c", "Segoe UI", system-ui, sans-serif;
  --hand: "Gaegu", "Ink Free", "Comic Sans MS", cursive;
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='28' viewBox='0 0 26 28'%3E%3Cpath d='M3 2 L3 21 L8.2 16.2 L11.6 24 L15 22.5 L11.6 15 L18.5 15 Z' fill='%23ff7eb0' stroke='white' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M20 4.5c1-1.6 3.6-1 3.6 1 0 1.6-2.4 3-3.6 4-1.2-1-3.6-2.4-3.6-4 0-2 2.6-2.6 3.6-1z' fill='%23ff7eb0' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E") 3 2, auto;
}

/* The other face. */
#game.uncanny {
  --ink: #e9dfe0;
  --ink-soft: #a89a9d;
  --paper: #1c191e;
  --paper2: #262026;
  --line: #4d3a3f;
  --pink: #8d8389;
  --pink-deep: #b3303a;
  --peach: #7a6a63;
  --butter: #2b2620;
  --arrow: "◉";
  --sticker: "✕";
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='28' viewBox='0 0 26 28'%3E%3Cpath d='M3 2 L3 21 L8.2 16.2 L11.6 24 L15 22.5 L11.6 15 L18.5 15 Z' fill='%23222' stroke='%23b3303a' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='20' cy='6' r='3.4' fill='none' stroke='%23b3303a' stroke-width='1.4'/%3E%3Ccircle cx='20' cy='6' r='1.2' fill='%23b3303a'/%3E%3C/svg%3E") 3 2, auto;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #2a1d25; color: var(--ink); font-family: var(--font); overflow: hidden; }
button { font: inherit; color: inherit; cursor: inherit; }

#game { position: fixed; inset: 0; overflow: hidden; user-select: none; cursor: var(--cursor); }
#game * { cursor: inherit; }

/* ---------- stage ---------- */
#stage, #bg, #sprites { position: absolute; inset: 0; }
.bg-img { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity .8s ease; }
.bg-img.in { opacity: 1; }
/* Behind the menu: an unlit space with spike tape on the floor. */
.bg-img.void { background: radial-gradient(ellipse 60% 70% at 50% 8%, #3a3340 0, #121016 55%, #060507 100%); }
.bg-img.void .mark {
  position: absolute; bottom: 6%; translate: -50% 0; padding: .2rem .9rem; font-family: ui-monospace, Consolas, monospace; font-size: .8rem;
  letter-spacing: .2em; color: #191619; background: #d8d0b8; opacity: .55; rotate: -2deg; box-shadow: 0 0 20px rgba(0,0,0,.6);
}
.bg-img.void .mark:nth-child(2) { rotate: 1.5deg; }

.sprite {
  position: absolute; bottom: -2%; height: 96%; translate: -50% 0; transform-origin: 50% 100%;
  transition: left .5s ease, filter .3s ease, opacity .45s ease, translate .45s ease;
  filter: drop-shadow(0 10px 24px rgba(90,40,60,.28));
  pointer-events: none;
  animation: breathe 5.5s ease-in-out infinite;
}
.sprite.enter { opacity: 0; translate: -50% 22px; }
.sprite.leave { opacity: 0; translate: -50% 12px; }
.sprite.dim { filter: brightness(.68) saturate(.85) drop-shadow(0 10px 24px rgba(90,40,60,.28)); }
.sprite.talk { animation: talk .32s ease-out, breathe 5.5s ease-in-out .32s infinite; }
.sprite.is-corrupt { animation: rgbsplit .18s steps(2) infinite; }
@keyframes breathe { 50% { transform: scale(1.004, 1.009); } }
@keyframes talk { 40% { transform: translateY(-9px); } }
@keyframes rgbsplit {
  0% { filter: drop-shadow(4px 0 0 rgba(255,0,60,.7)) drop-shadow(-4px 0 0 rgba(0,255,230,.6)); transform: none; }
  50% { filter: drop-shadow(-6px 0 0 rgba(255,0,60,.7)) drop-shadow(5px 0 0 rgba(0,255,230,.6)); transform: translateX(1%) skewX(-2deg); }
  100% { filter: drop-shadow(3px 0 0 rgba(255,0,60,.7)) drop-shadow(-2px 0 0 rgba(0,255,230,.6)); transform: translateX(-1%); }
}
/* Mannequins: nobody breathes behind the menu. */
#game.mood-still .sprite { animation: none !important; filter: brightness(.82) contrast(1.05) drop-shadow(0 30px 40px rgba(0,0,0,.7)); }
#game.mood-still .sprite.dim { filter: brightness(.5) drop-shadow(0 30px 40px rgba(0,0,0,.7)); }

.ghost {
  position: absolute; bottom: 22%; width: 13vh; height: 46vh; transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 12%, rgba(10,10,14,.9) 0 18%, transparent 19%),
    radial-gradient(ellipse 55% 70% at 50% 75%, rgba(10,10,14,.85) 0 60%, transparent 62%);
  filter: blur(6px); opacity: .55; transition: opacity .8s;
  animation: ghostsway 2.2s ease-in-out infinite;
}
.ghost.out { opacity: 0; }
@keyframes ghostsway { 50% { transform: translateX(-48%) scaleY(1.02); } }

/* ---------- dialogue ---------- */
#ui { position: absolute; inset: 0; pointer-events: none; transition: opacity .3s; }
#ui > * { pointer-events: auto; }

#say {
  position: absolute; left: 50%; bottom: 5.5%; translate: -50% 0;
  width: min(1100px, 94vw); min-height: 21vh; padding: 2.2rem 2.6rem 1.6rem;
  color: var(--ink);
  background:
    radial-gradient(circle, var(--paper2) 1.6px, transparent 2px) 0 0 / 18px 18px,
    linear-gradient(180deg, var(--paper), var(--paper));
  border: 3px solid var(--line); border-radius: 30px;
  box-shadow: 0 7px 0 var(--line), 0 18px 40px rgba(120,50,80,.25);
  transition: opacity .3s, background .4s, border-color .4s, box-shadow .4s, border-radius .4s;
}
#say::after {
  content: var(--sticker); position: absolute; right: 1.1rem; top: -.95rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--paper); border: 3px solid var(--line); color: var(--pink); font-size: 1.05rem;
  rotate: 12deg; transition: rotate .4s;
}
#say.narration { --who: var(--pink); }
#say-name {
  position: absolute; top: -1.25rem; left: 2rem;
  padding: .3rem 1.3rem .36rem; border-radius: 999px;
  background: var(--who); color: #fff; font-family: var(--display); font-size: 1.02rem; letter-spacing: .04em;
  border: 3px solid var(--paper); box-shadow: 0 4px 0 rgba(0,0,0,.08), 0 6px 14px rgba(120,50,80,.2);
  rotate: -2deg; transition: rotate .3s, filter .4s;
}
#say-name::after { content: " ♡"; font-size: .85em; opacity: .9; }
#say-text { font-size: clamp(1.04rem, 1.55vw, 1.3rem); line-height: 1.85; white-space: pre-wrap; min-height: 3.6em; font-weight: 500; }
#say.narration #say-text { color: var(--ink-soft); }
#say.who-me #say-name { background: #c9a6b6; }
#say.who-office { border-color: rgba(224,72,60,.6); }
#say.who-office #say-name { background: var(--danger); }
#say.who-k #say-text { font-family: ui-monospace, Consolas, monospace; color: #8e8e8e; text-transform: lowercase; }
#say.who-k #say-name { background: #333; color: #aaa; }
#say.who-k #say-name::after, #say.who-office #say-name::after { content: ""; }
#say.corrupt { border-color: rgba(255,0,60,.6); animation: boxjitter .12s steps(2) infinite; }
#say.corrupt #say-text { color: #ffd6dc; text-shadow: 2px 0 rgba(255,0,60,.7), -2px 0 rgba(0,255,230,.6); }
@keyframes boxjitter { 50% { translate: calc(-50% + 3px) 0; } }
.say-arrow { position: absolute; right: 1.8rem; bottom: .9rem; font-size: 1.1rem; color: var(--pink); opacity: 0; }
.say-arrow::before { content: var(--arrow); }
#say.ready .say-arrow { opacity: 1; animation: bob 1s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(4px) scale(1.1); } }
#game.ui-hidden #ui { opacity: 0; pointer-events: none; }
#game.ui-hidden #ui > * { pointer-events: none; }

/* uncanny dialogue: same box, but wrong */
#game.uncanny #say {
  border-radius: 6px; border-style: solid;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #221d23, #151216);
  box-shadow: 0 7px 0 #0b090c, 0 0 0 1px rgba(179,48,58,.25), 0 18px 50px rgba(0,0,0,.6);
}
#game.uncanny #say::after { rotate: 0deg; color: var(--pink-deep); }
#game.uncanny #say-name { filter: saturate(.25) brightness(.8); rotate: 3deg; border-color: #151216; clip-path: polygon(0 0, 100% 6%, 97% 100%, 4% 92%); }
#game.uncanny #say-name::after { content: ""; }
#game.uncanny .say-arrow { color: var(--pink-deep); }
#game.uncanny #say.ready .say-arrow { animation: blink 3.2s steps(1) infinite; }
@keyframes blink { 0%, 90% { transform: scaleY(1); } 92%, 95% { transform: scaleY(.1); } }

/* ---------- quick menu ---------- */
#quick {
  position: absolute; left: 50%; bottom: .7%; translate: -50% 0;
  display: flex; gap: .2rem; padding: .2rem .35rem; border-radius: 999px;
  background: var(--paper); border: 2px solid var(--line); box-shadow: 0 4px 12px rgba(120,50,80,.18);
}
#quick button {
  background: none; border: none; padding: .22rem .7rem; font-size: .74rem; font-weight: 700; letter-spacing: .06em; border-radius: 999px;
  color: var(--ink-soft); transition: color .15s, background .15s, transform .15s;
}
#quick button:hover { color: #fff; background: var(--pink); transform: translateY(-1px); }
#quick button.on { color: #fff; background: var(--pink-deep); }
#quick .q-wrong { display: none; }
#game.uncanny #quick { border-radius: 4px; box-shadow: none; }
#game.uncanny #quick .q-cute { display: none; }
#game.uncanny #quick .q-wrong { display: inline; font-family: ui-monospace, Consolas, monospace; text-transform: lowercase; letter-spacing: .02em; }
#game.uncanny #quick button:hover { background: var(--pink-deep); }

/* ---------- choices ---------- */
#choices {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  display: none; flex-direction: column; gap: .75rem; width: min(560px, 90vw); z-index: 5;
}
.choice {
  position: relative; display: flex; align-items: center; gap: .9rem;
  padding: .9rem 1.2rem; border-radius: 22px; font-size: 1.08rem; font-weight: 700; text-align: left;
  background: var(--paper); color: var(--ink); border: 3px solid var(--line);
  box-shadow: 0 5px 0 var(--line), 0 12px 26px rgba(120,50,80,.22); transition: transform .15s, border-color .15s, box-shadow .15s, background .15s;
  overflow: hidden; animation: choicein .4s cubic-bezier(.3,1.6,.5,1) both;
}
.choice:nth-child(2) { animation-delay: .07s; }
.choice:nth-child(3) { animation-delay: .14s; }
.choice::after { content: "♡"; position: absolute; right: 1rem; color: var(--line); font-size: 1.2rem; transition: color .15s, transform .2s; }
.choice:hover { transform: translateY(-3px) rotate(-.6deg); border-color: var(--pink); background: var(--paper2); box-shadow: 0 8px 0 var(--pink), 0 16px 30px rgba(255,126,176,.3); }
.choice:hover::after { content: "♥"; color: var(--pink); transform: scale(1.3); }
.choice-key { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; font-weight: 800; background: var(--pink); color: #fff; }
.choice-text { flex: 1; padding-right: 1.6rem; }
.choice-tag { flex: none; font-size: .72rem; letter-spacing: .06em; padding: .2rem .55rem; border-radius: 6px; background: #1d1d22; color: #9a9a9a; font-family: ui-monospace, Consolas, monospace; margin-right: 1.4rem; }
@keyframes choicein { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.choice.hijacked { background: #1a0d10; color: #ff6b6b; border-color: var(--danger); }
.choice.hijacked .choice-key { background: var(--danger); }
#game.uncanny .choice { border-radius: 4px; box-shadow: 0 4px 0 #0b090c; }
#game.uncanny .choice::after { content: "✕"; color: var(--line); }
#game.uncanny .choice:hover { transform: translateX(4px); background: #2a2026; border-color: var(--pink-deep); box-shadow: 0 4px 0 var(--pink-deep); }
#game.uncanny .choice:hover::after { content: "◉"; color: var(--pink-deep); transform: none; }
#game.uncanny .choice-key { border-radius: 2px; background: var(--pink-deep); }

/* the moment it turns */
#game.ui-flip #ui, #game.ui-flip #screen { animation: uiflip .7s steps(6) both; }
@keyframes uiflip {
  0% { filter: none; transform: none; }
  20% { filter: invert(1) hue-rotate(160deg); transform: translateX(-6px) skewX(4deg); }
  40% { filter: none; transform: translateX(5px); }
  60% { filter: saturate(3) hue-rotate(-40deg); transform: skewX(-6deg); }
  100% { filter: none; transform: none; }
}

/* ---------- fx layers ---------- */
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
#fx > * { pointer-events: auto; }
#fx > .fx-layer, #fx > .toast, #fx > .pa-banner, #fx > .daycard, #fx > .memo-toast { pointer-events: none; }
.fx-layer { position: absolute; inset: 0; }

/* day card: a torn-off calendar page */
.daycard {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(circle, rgba(255,255,255,.5) 2px, transparent 2.5px) 0 0 / 26px 26px,
    linear-gradient(160deg, #ffe3ee, #fff1e0 60%, #e9f6ff);
  animation: fadein .6s ease both; color: var(--ink);
}
.daycard.out { animation: fadeout .7s ease both; }
.daycard-title { font-family: var(--display); font-size: clamp(2.6rem, 7.5vw, 5.4rem); color: var(--pink-deep); letter-spacing: .04em;
  text-shadow: 0 4px 0 #fff, 0 8px 20px rgba(226,72,127,.25); animation: dayin .9s cubic-bezier(.3,1.6,.5,1) both; }
.daycard-line { width: 0; height: 4px; border-radius: 4px; background: var(--pink); margin-bottom: 1.2rem; animation: grow 1.2s ease .2s forwards; }
.daycard-dots { display: flex; gap: .7rem; margin-top: 1.4rem; font-size: 1.5rem; color: var(--line); }
.daycard-dots i { font-style: normal; transition: transform .3s; }
.daycard-dots i.past { color: var(--pink); }
.daycard-dots i.now { color: var(--pink-deep); animation: beat 1s ease-in-out infinite; }
@keyframes beat { 30% { transform: scale(1.35); } 50% { transform: scale(1); } }
.daycard-sub { margin-top: .6rem; color: var(--ink-soft); letter-spacing: .12em; font-size: 1rem; font-weight: 700; }
@keyframes dayin { from { opacity: 0; transform: scale(.6) rotate(-6deg); } }
@keyframes grow { to { width: min(320px, 60vw); } }
.daycard.wrong { background: #0d0b0e; color: #ddd; }
.daycard.wrong .daycard-title { color: #e9e1e1; text-shadow: 3px 0 rgba(255,0,60,.5), -3px 0 rgba(0,255,230,.4); animation: dayin .9s ease both; }
.daycard.wrong .daycard-line { background: var(--danger); }
.daycard.wrong .daycard-dots { color: #333; }
.daycard.wrong .daycard-dots i.past { color: #555; }
.daycard.wrong .daycard-dots i.now { color: var(--danger); }
.daycard.wrong .daycard-sub { color: #ff8a80; animation: flicker 2s steps(1) infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: .2; } 50% { opacity: 1; } 82% { opacity: .5; } }
@keyframes fadein { from { opacity: 0; } }
@keyframes fadeout { to { opacity: 0; } }

/* the school PA: a cheerful notice, until it isn't */
.pa-banner {
  position: absolute; top: 5%; left: 50%; transform: translateX(-50%); width: min(720px, 92vw);
  background: var(--butter); color: #5b4630; border: 3px solid #ffd98a; border-radius: 22px;
  padding: .9rem 1.4rem 1rem; box-shadow: 0 6px 0 #ffd98a, 0 14px 30px rgba(120,90,40,.2); animation: slidedown .5s cubic-bezier(.3,1.6,.5,1) both;
}
.pa-banner.out { animation: fadeout .5s ease both; }
.pa-head { font-size: .78rem; font-weight: 800; letter-spacing: .14em; color: #c98a1c; margin-bottom: .35rem; }
.pa-text { font-size: 1.05rem; line-height: 1.6; font-weight: 500; }
#game.uncanny .pa-banner { background: rgba(20,8,10,.94); color: #f1e1e1; border-color: rgba(224,72,60,.7); border-radius: 4px; box-shadow: 0 0 40px rgba(224,72,60,.25); }
#game.uncanny .pa-head { color: #ff8a80; }
.pa-banner.broken { background: rgba(20,8,10,.94); color: #ffb3ad; border-color: rgba(224,72,60,.7); border-radius: 4px; box-shadow: 0 0 40px rgba(224,72,60,.3);
  animation: slidedown .5s ease both, boxjitter .15s steps(2) infinite; }
.pa-banner.broken .pa-head { color: #ff8a80; }
@keyframes slidedown { from { opacity: 0; transform: translate(-50%, -16px); } }

.toast {
  position: absolute; max-width: 34ch; font-size: 1rem; color: rgba(255,225,225,.9); font-style: italic;
  text-shadow: 0 0 12px rgba(255,0,60,.5), 0 1px 3px #000; animation: fadein 1.2s ease both;
}
.toast.out { animation: fadeout 1.2s ease both; }

/* a memory kept */
.memo-toast {
  position: absolute; left: 1.4rem; top: 1.4rem; display: flex; align-items: center; gap: .8rem; padding: .7rem 1.1rem .7rem .8rem;
  background: var(--paper); color: var(--ink); border: 3px solid var(--line); border-radius: 18px; box-shadow: 0 5px 0 var(--line), 0 12px 28px rgba(120,50,80,.25);
  animation: memoin .5s cubic-bezier(.3,1.6,.5,1) both; max-width: min(380px, 80vw);
}
.memo-toast.out { animation: fadeout .5s ease both; }
.memo-toast small { display: block; color: var(--ink-soft); font-size: .72rem; letter-spacing: .06em; }
.memo-toast b { font-size: .98rem; }
.memo-icon { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--pink); color: #fff; font-weight: 800; }
#game.uncanny .memo-toast { border-radius: 4px; box-shadow: none; }
#game.uncanny .memo-icon { background: #3a2e33; border-radius: 2px; }
@keyframes memoin { from { opacity: 0; transform: translateY(-14px) scale(.9); } }

/* ---------- the phone ---------- */
.phone-wrap { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(60,20,40,.35); animation: fadein .3s ease both; }
.phone-wrap.out { animation: fadeout .35s ease both; }
.phone {
  width: min(360px, 90vw); height: min(620px, 86vh); display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 10px solid #fff; outline: 3px solid var(--line); border-radius: 42px;
  box-shadow: 0 30px 60px rgba(60,20,40,.4); animation: phonein .5s cubic-bezier(.3,1.4,.5,1) both;
}
@keyframes phonein { from { transform: translateY(60px) rotate(4deg); opacity: 0; } }
.phone-top { display: flex; justify-content: space-between; padding: .5rem 1.2rem .2rem; font-size: .72rem; font-weight: 800; color: var(--ink-soft); }
.phone-head { padding: .5rem 1rem .7rem; text-align: center; border-bottom: 2px solid var(--paper2); }
.phone-head b { display: block; font-family: var(--display); color: var(--pink-deep); font-size: 1.05rem; }
.phone-head small { color: var(--ink-soft); font-size: .72rem; }
.phone-msgs { flex: 1; overflow: auto; padding: .8rem .8rem 1rem; display: flex; flex-direction: column; gap: .45rem;
  background: radial-gradient(circle, var(--paper2) 1.4px, transparent 1.8px) 0 0 / 16px 16px; }
.bubble-row { display: flex; flex-direction: column; align-items: flex-start; max-width: 82%; animation: bubblein .3s cubic-bezier(.3,1.5,.5,1) both; }
.bubble-row.me { align-self: flex-end; align-items: flex-end; }
.bubble-name { font-size: .68rem; font-weight: 800; color: var(--who); margin: 0 .5rem .1rem; }
.bubble { padding: .5rem .85rem; border-radius: 18px 18px 18px 6px; background: #fff; border: 2px solid var(--who); font-size: .93rem; line-height: 1.45; color: var(--ink); white-space: pre-wrap; }
.bubble-row.me .bubble { border-radius: 18px 18px 6px 18px; background: var(--pink); border-color: var(--pink); color: #fff; }
.bubble-row.deleted .bubble { font-style: italic; color: #999; border-style: dashed; background: transparent; }
.bubble-row.k .bubble { font-family: ui-monospace, Consolas, monospace; background: #222; color: #aaa; border-color: #444; }
.typing { display: inline-flex; gap: 3px; }
.typing b { width: 6px; height: 6px; border-radius: 50%; background: var(--who); animation: dots 1s infinite; }
.typing b:nth-child(2) { animation-delay: .15s; } .typing b:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 50% { transform: translateY(-4px); opacity: .4; } }
@keyframes bubblein { from { opacity: 0; transform: translateY(8px) scale(.9); } }
.phone-foot { padding: .5rem; text-align: center; font-size: .72rem; color: var(--ink-soft); opacity: 0; transition: opacity .3s; }
.phone-wrap.done .phone-foot { opacity: 1; }
#game.uncanny .phone { border-color: #0e0c0f; outline-color: #3a2e33; border-radius: 14px; }
#game.uncanny .phone-msgs { background: #141115; }
#game.uncanny .bubble { background: #1e1a1f; color: #ddd; }
#game.uncanny .bubble-row.me .bubble { background: #4a3a40; border-color: #4a3a40; }

/* ---------- OS dialog, credits, letters ---------- */
.os-dialog {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: min(460px, 92vw);
  background: #f3f3f3; color: #111; font-family: "Segoe UI", system-ui, sans-serif; font-size: .9rem;
  border: 1px solid #888; box-shadow: 0 12px 40px rgba(0,0,0,.6); user-select: none; cursor: default;
}
.os-title { display: flex; justify-content: space-between; padding: .45rem .7rem; background: #fff; border-bottom: 1px solid #ddd; }
.os-body { display: flex; gap: 1rem; padding: 1.2rem 1rem; line-height: 1.5; }
.os-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #f0b400; color: #fff; font-weight: 700; display: grid; place-items: center; }
.os-buttons { display: flex; flex-direction: column; gap: .4rem; padding: 0 1rem 1rem; }
.os-buttons button { text-align: left; padding: .5rem .8rem; background: #fff; border: 1px solid #ccc; color: #111; }
.os-buttons button:hover { background: #e5f1fb; border-color: #0078d4; }
#game.frozen #stage, #game.frozen #ui { filter: grayscale(.6) brightness(.8); pointer-events: none; }

.credits { position: absolute; inset: 0; background: #fff3f7; color: var(--ink); overflow: hidden; display: flex; justify-content: center; }
#game.uncanny .credits { background: #000; color: #eee; }
.credits-roll { position: absolute; top: 100%; text-align: center; font-size: 1.2rem; line-height: 1.6; animation: roll linear forwards; }
.credits-roll b { font-family: var(--display); font-size: 2.4rem; color: var(--pink-deep); letter-spacing: .04em; }
.credits-roll i { color: var(--pink-deep); font-style: normal; font-weight: 800; }
.credits-roll p { margin: .2rem 0; min-height: 1.6em; }
.credits.melt .credits-roll { animation: melt 1.4s ease-in forwards !important; }
@keyframes roll { to { transform: translateY(calc(-100% - 100vh)); } }
@keyframes melt { to { filter: blur(8px); transform: translateY(-40vh) scaleY(3); opacity: 0; } }

.letter { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.6); animation: fadein .5s ease both; }
.letter-paper {
  width: min(560px, 92vw); max-height: 80vh; overflow: auto; padding: 2rem 2.2rem;
  background: repeating-linear-gradient(180deg, transparent 0 1.66rem, #e8dcef 1.66rem calc(1.66rem + 1px)), #fbf6e8;
  color: #2b2633; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.6); transform: rotate(-1deg);
}
.letter-paper pre { white-space: pre-wrap; font-family: var(--hand); font-size: 1.2rem; line-height: 1.66rem; margin: 0 0 1.2rem; }
.letter-actions { display: flex; gap: .8rem; justify-content: flex-end; }
.letter-actions button { padding: .6rem 1.2rem; border-radius: 999px; border: 2px solid #c7bba3; background: #fff; color: #2b2633; font-weight: 700; }
.letter-actions button:first-child { background: #82d3ca; border-color: #5fb4ab; }

.ending-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: radial-gradient(circle, rgba(255,255,255,.6) 2px, transparent 2.5px) 0 0 / 26px 26px, #ffe8f0; color: var(--ink); animation: fadein 1.2s ease both;
}
#game.uncanny .ending-card { background: rgba(5,4,8,.96); color: #eee; }
.ending-kind { letter-spacing: .3em; font-size: .85rem; font-weight: 800; color: var(--ink-soft); }
.ending-name { font-family: var(--display); font-size: clamp(2.2rem, 6vw, 4.2rem); color: var(--pink-deep); }
.ending-mem { color: var(--ink-soft); margin: 0; }
.ending-card button, .panel button, .title-buttons button {
  padding: .65rem 1.5rem; border-radius: 999px; border: 3px solid var(--line); font-weight: 800;
  background: var(--paper); color: var(--ink); letter-spacing: .04em; box-shadow: 0 4px 0 var(--line);
  transition: transform .15s, background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.ending-card button:hover, .panel button:hover, .title-buttons button:hover {
  background: var(--pink); color: #fff; border-color: var(--pink); box-shadow: 0 4px 0 var(--pink-deep); transform: translateY(-2px);
}
#game.uncanny .ending-card button, #game.uncanny .panel button, #game.uncanny .title-buttons button { border-radius: 3px; box-shadow: none; }
#game.uncanny .ending-card button:hover, #game.uncanny .panel button:hover, #game.uncanny .title-buttons button:hover { background: var(--pink-deep); border-color: var(--pink-deep); transform: none; }

#reticle {
  position: absolute; left: 0; top: 0; width: 60px; height: 60px; z-index: 30; display: none; pointer-events: none;
  border: 2px solid rgba(255,80,80,.7); border-radius: 50%; transform: translate(-200px, -200px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.4);
  transition: transform .25s ease-out;
}
#reticle::before, #reticle::after { content: ""; position: absolute; background: rgba(255,80,80,.7); }
#reticle::before { left: 50%; top: -10px; bottom: -10px; width: 2px; transform: translateX(-1px); }
#reticle::after { top: 50%; left: -10px; right: -10px; height: 2px; transform: translateY(-1px); }

/* ---------- whole-game effects ---------- */
#game.fx-glitch #stage { animation: glitch .12s steps(2) infinite; }
@keyframes glitch {
  0% { transform: translate(0); filter: hue-rotate(0); clip-path: inset(0 0 0 0); }
  33% { transform: translate(-8px, 3px); filter: hue-rotate(90deg) saturate(2); clip-path: inset(12% 0 40% 0); }
  66% { transform: translate(6px, -2px); filter: hue-rotate(-60deg); clip-path: inset(50% 0 8% 0); }
  100% { transform: translate(0); }
}
#game.fx-shake { animation: shake .08s linear infinite; }
@keyframes shake { 25% { transform: translate(4px, -3px); } 50% { transform: translate(-4px, 2px); } 75% { transform: translate(3px, 3px); } }
#game.fx-tear #stage { animation: tear .1s steps(3) infinite; }
@keyframes tear {
  0% { clip-path: polygon(0 0, 100% 0, 100% 30%, 0 34%, 0 50%, 100% 47%, 100% 100%, 0 100%); transform: translateX(-14px); }
  50% { clip-path: polygon(0 0, 100% 0, 100% 60%, 0 58%, 0 70%, 100% 76%, 100% 100%, 0 100%); transform: translateX(18px); filter: invert(.2); }
  100% { clip-path: none; transform: none; }
}
#game.fx-static::after, #game.fx-rewind::after {
  content: ""; position: absolute; inset: 0; z-index: 25; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px),
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: noise .1s steps(2) infinite;
}
@keyframes noise { 50% { background-position: 0 3px, 40px 70px; } }
#game.fx-rewind #stage { filter: saturate(.3) contrast(1.3); transform: skewX(-3deg); }
#game.mood-wrong #stage { filter: saturate(.55) hue-rotate(-12deg) contrast(1.08); }
#game.mood-wrong #stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.55));
}
#game.mood-red #stage { filter: sepia(.4) saturate(2.2) hue-rotate(-30deg) brightness(.75); }

/* ---------- screens: notebook paper with washi tape ---------- */
#screen { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
#screen > * { pointer-events: auto; }
#screen:empty { display: none; }
.panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(620px, 94vw); max-height: 88vh; overflow: auto; padding: 2rem 2.2rem 1.6rem 3rem; color: var(--ink);
  background:
    linear-gradient(90deg, transparent 2rem, #ffb3cc 2rem, #ffb3cc calc(2rem + 2px), transparent calc(2rem + 2px)),
    repeating-linear-gradient(180deg, transparent 0 1.9rem, #f3e2ea 1.9rem calc(1.9rem + 1px)),
    var(--paper);
  border-radius: 20px; box-shadow: 0 8px 0 var(--line), 0 30px 70px rgba(80,30,50,.35);
  animation: panelin .4s cubic-bezier(.3,1.5,.5,1) both;
}
.panel::before {
  content: ""; position: sticky; display: block; top: -2rem; margin: -2rem auto .8rem; width: 140px; height: 26px; rotate: -3deg;
  background: repeating-linear-gradient(45deg, rgba(255,126,176,.75) 0 8px, rgba(255,214,230,.75) 8px 16px); box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
@keyframes panelin { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } }
.panel.center { text-align: center; }
.panel h2 { margin: 0 0 1rem; font-family: var(--display); font-weight: 400; color: var(--pink-deep); letter-spacing: .03em; }
.panel .hint { color: var(--ink-soft); margin-top: -.4rem; }
.panel .row { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.2rem; }
.panel .row.left { justify-content: flex-start; }
.panel .keys { margin: 1.2rem 0 0; font-size: .8rem; color: var(--ink-soft); text-align: center; }
.ending-note { color: var(--ink-soft); margin: 0; }
.panel label { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: .9rem 0; font-weight: 700; }
.panel label.check { justify-content: flex-start; }
.panel input[type=range] { width: 55%; accent-color: var(--pink); }
.panel input[type=checkbox] { accent-color: var(--pink); width: 1.1rem; height: 1.1rem; }
#game.uncanny .panel {
  border-radius: 4px; box-shadow: 0 0 0 1px #3a2e33, 0 30px 70px rgba(0,0,0,.6);
  background: repeating-linear-gradient(180deg, transparent 0 1.9rem, #2a2228 1.9rem calc(1.9rem + 1px)), var(--paper);
}
#game.uncanny .panel::before { background: repeating-linear-gradient(45deg, #3a3236 0 8px, #2a2428 8px 16px); clip-path: polygon(0 10%, 100% 0, 92% 100%, 6% 85%); }
#name-in {
  width: 100%; padding: .8rem 1rem; font: inherit; font-size: 1.3rem; font-weight: 700; text-align: center; color: var(--ink);
  background: #fff; border: 3px solid var(--line); border-radius: 999px; outline: none;
}
#game.uncanny #name-in { background: #151216; border-radius: 3px; }
#name-in:focus { border-color: var(--pink); }
#name-in.shake { animation: shake .08s linear 4; }
.quit-msg { font-size: 1.3rem; line-height: 1.6; }

.slots { display: flex; flex-direction: column; gap: .5rem; }
.slot { display: flex; gap: 1rem; align-items: center; text-align: left; padding: .75rem 1rem; border-radius: 16px; border: 3px solid var(--line); background: #fff; color: var(--ink); font-weight: 700; }
.slot:hover { border-color: var(--pink); }
.slot.has-thumb { background: linear-gradient(90deg, #fff 45%, rgba(255,255,255,.55)), var(--thumb) right / cover no-repeat; }
.slot.empty { color: var(--ink-soft); }
.slot-n { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--pink); color: #fff; font-weight: 800; flex: none; }
.slot.k { border-color: rgba(150,150,150,.5); background: #2a2a2e; color: #aaa; font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }
.slot.k .slot-n { background: #111; color: #888; }
#game.uncanny .slot { background: #19161a; border-radius: 3px; }
#game.uncanny .slot.has-thumb { background: linear-gradient(90deg, #19161a 45%, rgba(25,22,26,.6)), var(--thumb) right / cover no-repeat; }
#game.uncanny .slot-n { background: #3a2e33; border-radius: 2px; }

.log { max-height: 58vh; overflow: auto; display: flex; flex-direction: column; gap: .7rem; padding-right: .5rem; }
.log-line { line-height: 1.55; color: var(--ink-soft); }
.log-line b { color: var(--pink-deep); margin-right: .4rem; }
.log-line s { color: #e0483c; }
.log-line.k { font-family: ui-monospace, Consolas, monospace; color: #8e8e8e; }

/* ---------- scrapbook ---------- */
.panel.scrapbook { width: min(760px, 95vw); }
.sb-progress { height: 14px; border-radius: 999px; background: var(--paper2); border: 2px solid var(--line); overflow: hidden; }
.sb-progress span { display: block; height: 100%; background: repeating-linear-gradient(45deg, var(--pink) 0 10px, #ff9cc4 10px 20px); border-radius: 999px; transition: width .6s; }
.sb-hearts { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; justify-content: center; margin: .2rem 0 .8rem; }
.sb-heart { color: var(--who); font-size: 1.05rem; letter-spacing: .08em; }
.sb-heart b { color: var(--ink); font-size: .85rem; letter-spacing: 0; margin-right: .2rem; }
.sb-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 1rem; }
.panel .sb-tabs button { padding: .4rem .9rem; font-size: .85rem; box-shadow: none; border-width: 2px; }
.panel .sb-tabs button.on { background: var(--pink); color: #fff; border-color: var(--pink); }
.sb-tabs small { opacity: .75; margin-left: .2rem; }
.sb-page { min-height: 220px; }
.sb-list { list-style: none; padding: 0; margin: 0; font-family: var(--hand); font-size: 1.35rem; }
.sb-list li { display: flex; align-items: center; gap: .7rem; line-height: 1.9rem; color: var(--ink-soft); }
.sb-list li.got { color: var(--ink); }
.sb-list li.got span:last-child { text-decoration: line-through; text-decoration-color: var(--pink); text-decoration-thickness: 2px; }
.sb-box { flex: none; width: 1.3rem; height: 1.3rem; border: 2px solid var(--pink); border-radius: 5px; display: grid; place-items: center; color: var(--pink-deep); font-weight: 800; font-family: var(--font); font-size: .95rem; background: #fff; }
.sb-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.mini-pol { margin: 0; padding: 8px 8px 10px; background: #fff; box-shadow: 0 6px 16px rgba(80,30,50,.18); rotate: -2deg; }
.mini-pol:nth-child(2n) { rotate: 2deg; }
.mini-img { position: relative; aspect-ratio: 16 / 10; background: #ddd center / cover no-repeat; overflow: hidden; filter: grayscale(1) contrast(1.05); }
.mini-img img { position: absolute; left: 50%; bottom: -60%; height: 170%; translate: -50% 0; }
.mini-pol.ghosted .mini-img::after { content: ""; position: absolute; right: 12%; bottom: 0; width: 18%; height: 80%; border-radius: 40% 40% 0 0; background: rgba(10,10,14,.75); filter: blur(5px); }
.mini-pol figcaption { margin-top: .4rem; font-family: var(--hand); font-size: 1.05rem; color: #3b2a33; text-align: center; line-height: 1.1; }
.mini-pol.blank .mini-img { background: #2b2630; filter: none; }
.mini-pol.blank figcaption { color: #aaa; }
.sb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; }
.sb-card { padding: .9rem 1rem; background: #fff; border: 2px solid var(--line); border-radius: 14px; rotate: -.6deg; }
.sb-card:nth-child(2n) { rotate: .8deg; }
.sb-card b { display: block; color: var(--pink-deep); margin-bottom: .2rem; }
.sb-card p { margin: 0; font-family: var(--hand); font-size: 1.15rem; line-height: 1.3; color: var(--ink); }
.sb-card.blank { background: transparent; border-style: dashed; }
.sb-card.blank b, .sb-card.blank p { color: var(--ink-soft); }
#game.uncanny .sb-card, #game.uncanny .sb-box { background: #19161a; border-radius: 3px; }
#game.uncanny .sb-box { color: #e9dfe0; border-color: var(--pink-deep); }
#game.uncanny .mini-pol { background: #d8d4cc; }

/* ---------- title ---------- */
.title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 6vh;
  background: linear-gradient(180deg, rgba(255,214,232,.25) 0%, rgba(255,240,246,0) 40%, rgba(255,214,232,.55) 90%); }
.title-sparkles i {
  position: absolute; top: -6%; font-style: normal; color: #fff; font-size: 1.4rem; opacity: .85;
  text-shadow: 0 0 10px rgba(255,126,176,.8); animation: fall linear infinite;
}
.title-sparkles i:nth-child(3n) { color: #ffd1e3; font-size: 1rem; }
@keyframes fall { to { transform: translate(40px, 112vh) rotate(360deg); } }
.title-girls img { position: absolute; bottom: -6%; height: 88%; translate: -50% 0; filter: drop-shadow(0 12px 30px rgba(90,40,60,.3)); transition: scale 6s ease-in, left 6s ease-in, filter 1.5s; }
.title-girls img:nth-child(1), .title-girls img:nth-child(2) { height: 80%; }
.title-card {
  position: relative; text-align: center; padding: 1.4rem 2.6rem 1.4rem; border-radius: 34px; color: var(--ink);
  background: rgba(255,250,246,.92); border: 4px solid #fff; box-shadow: 0 8px 0 var(--line), 0 24px 50px rgba(120,50,80,.3);
}
.title-ribbon { display: inline-block; margin-bottom: .4rem; padding: .2rem 1rem; border-radius: 999px; background: var(--pink); color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .14em; }
.title-card h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(2.8rem, 8vw, 5.2rem); letter-spacing: .02em; line-height: 1.05;
  color: var(--pink); text-shadow: 3px 3px 0 #fff, -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 0 8px 0 var(--line); }
.title h1 .dead { opacity: .15; }
.title-sub { margin: .5rem 0 1.1rem; color: var(--ink-soft); font-weight: 800; letter-spacing: .14em; text-transform: lowercase; }
.title-buttons { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
.title-foot { position: relative; margin: 1rem 0 0; font-size: .78rem; font-weight: 800; letter-spacing: .14em; color: #fff; text-shadow: 0 1px 4px rgba(120,50,80,.6); }
.title-card { animation: titlecard 1s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes titlecard { from { opacity: 0; transform: translateY(30px) scale(.95); } }
.title-girls img { animation: titlein 1.2s ease both; }
.title-girls img:nth-child(2) { animation-delay: .15s; }
.title-girls img:nth-child(3) { animation-delay: .3s; }
@keyframes titlein { from { opacity: 0; translate: -50% 30px; } }

/* rerun: the same title, drained */
.title.rerun { background: linear-gradient(180deg, rgba(10,8,12,.35), rgba(10,8,12,.8) 90%); }
.title.rerun .title-girls img { filter: saturate(.35) brightness(.72) drop-shadow(0 12px 30px rgba(0,0,0,.5)); }
.title.rerun .title-card { background: rgba(20,17,22,.92); border-color: #2a2228; border-radius: 6px; box-shadow: 0 0 0 1px #3a2e33, 0 24px 50px rgba(0,0,0,.6); animation-duration: .01s; }
.title.rerun .title-ribbon { background: #3a2e33; color: #b9adb1; border-radius: 2px; }
.title.rerun h1 { color: #e9e1e1; text-shadow: 3px 0 rgba(255,0,60,.35), -3px 0 rgba(0,255,230,.3); }
.title.rerun .title-sub { color: #ff9a92; }
.title.rerun .title-foot { font-family: ui-monospace, Consolas, monospace; letter-spacing: .1em; color: rgba(255,255,255,.45); text-shadow: none; }
/* when they're caught out of pose, they snap back with no transition at all */
.title.snap .title-girls img { transition: none !important; }
.title-girls img.near { scale: 1.32; left: 74% !important; filter: saturate(.15) brightness(.9) contrast(1.2) drop-shadow(0 20px 40px rgba(0,0,0,.7)) !important; z-index: 2; }
.title-whisper {
  position: absolute; right: 6%; top: 18%; max-width: 22ch; font-family: var(--hand); font-size: 1.7rem; line-height: 1.15; color: rgba(255,255,255,.85);
  text-shadow: 0 0 8px rgba(0,0,0,.8); rotate: -4deg; opacity: 0; transition: opacity 2.5s;
}
.title-whisper.on { opacity: 1; }
.title.snap .title-whisper { transition: none; }

/* Sayo's door: a pencil drawing that draws itself next to the menu */
.door-btn {
  position: absolute; left: calc(50% + min(330px, 40vw)); bottom: 10vh; width: 88px; height: 132px; padding: 0; border: none; background: none; color: #e8e2d4;
  display: grid; place-items: end center; filter: drop-shadow(0 0 6px rgba(0,0,0,.6));
}
.door-btn svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.door-btn path { stroke-dasharray: 520; stroke-dashoffset: 520; animation: draw 2.6s ease-in-out 1.8s forwards; }
.door-btn circle { opacity: 0; animation: fadein .3s ease 4.2s reverse forwards; fill: currentColor; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.door-btn span { position: relative; margin-bottom: -1.6rem; font-family: var(--hand); font-size: 1.3rem; opacity: 0; animation: appear .6s ease 4.3s forwards; }
@keyframes appear { to { opacity: 1; } }
.door-btn:hover { color: #fff; filter: drop-shadow(0 0 12px rgba(255,255,255,.6)); }
.door-btn:hover svg { transform: perspective(300px) rotateY(-14deg); transform-origin: left center; transition: transform .4s; }

.door-open { position: absolute; inset: 0; z-index: 60; perspective: 1400px; background: radial-gradient(ellipse at 50% 30%, #2b2530, #050406 70%); }
.door-open * { animation: none !important; transition: none !important; }
.door-open .leaf { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; transition: transform 1.8s cubic-bezier(.55,0,.3,1) !important; backface-visibility: hidden; }
.door-open .leaf.l { left: 0; transform-origin: left center; }
.door-open .leaf.r { right: 0; transform-origin: right center; }
.door-open .leaf-inner { position: absolute; top: 0; bottom: 0; width: 100vw; }
.door-open .leaf.r .leaf-inner { left: -50vw; }
.door-open .leaf-inner > .bg-img, .door-open .leaf-inner > .title { position: absolute; inset: 0; opacity: 1; }
.door-open.open .leaf.l { transform: rotateY(-104deg); }
.door-open.open .leaf.r { transform: rotateY(104deg); }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  .sprite { height: 72%; bottom: 20%; }
  #say { min-height: 26vh; padding: 1.8rem 1.2rem 1.2rem; bottom: 6%; }
  #say-name { left: 1rem; }
  #quick { max-width: 96vw; overflow-x: auto; }
  #quick button { padding: .2rem .4rem; font-size: .66rem; }
  .title-girls img { height: 62% !important; bottom: 30%; }
  .title-card { padding: 1.1rem 1.1rem 1rem; }
  .door-btn { left: auto; right: 4%; bottom: 3vh; width: 60px; height: 90px; }
  .panel { padding: 1.6rem 1.2rem 1.2rem 2.4rem; }
}

/* ---------- newer meta pieces ---------- */
.polaroid-wrap { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); animation: fadein .4s ease both; }
.polaroid-wrap.out { animation: fadeout .5s ease both; }
.polaroid { width: min(620px, 86vw); padding: 14px 14px 18px; background: #f6f2e9; box-shadow: 0 30px 80px rgba(0,0,0,.6); transform: rotate(-2.5deg); animation: develop 2.4s ease both; }
.polaroid img { display: block; width: 100%; }
.polaroid-cap { margin-top: 12px; color: #2b2633; font-family: var(--hand); font-size: 1.4rem; text-align: center; min-height: 1.4em; }
@keyframes develop { from { filter: brightness(2.4) contrast(.3) sepia(.4); transform: rotate(-6deg) translateY(30px); } 60% { filter: brightness(1.2) contrast(.8); } }

.plead { position: absolute; left: 50%; top: 18%; translate: -50% 0; width: min(560px, 90vw); padding: 1.2rem 1.6rem; border-radius: 16px; color: #f2e4e4;
  background: rgba(30,12,16,.95); border: 1px solid var(--danger); box-shadow: 0 0 50px rgba(224,72,60,.35); text-align: center; animation: fadein .4s ease both; z-index: 50; }
.plead.out { animation: fadeout .8s ease both; }
.plead-text { font-size: 1.15rem; line-height: 1.6; }
.plead-hint { margin-top: .6rem; font-size: .78rem; color: #ff9a92; letter-spacing: .08em; }

.ctx { position: fixed; z-index: 100; min-width: 240px; padding: .35rem 0; border-radius: 8px; background: #1b1820; border: 1px solid #3a3442; box-shadow: 0 12px 40px rgba(0,0,0,.6); font-size: .9rem; color: #eee; }
.ctx-item { padding: .45rem 1rem; }
.ctx-item.off { color: #6d6576; }
.ctx-item:not(.off):hover { background: var(--danger); color: #fff; }
.ctx hr { border: none; border-top: 1px solid #3a3442; margin: .3rem 0; }

/* free demo */
.panel a.buy { display: inline-block; padding: .85rem 1.8rem; border-radius: 999px; background: var(--pink); color: #fff; font-weight: 800; text-decoration: none; letter-spacing: .04em; box-shadow: 0 5px 0 var(--pink-deep); transition: transform .15s; }
.panel a.buy:hover { transform: translateY(-2px); }
.panel.demo-end p { line-height: 1.6; }

/* =====================================================================
   2.0 — the second term: minigames, the Office's computer, the Hearing
   ===================================================================== */

/* the Office's achievements: shiny, and wrong */
.achieve { position: absolute; right: 1.4rem; top: 1.4rem; display: flex; align-items: center; gap: .8rem; padding: .7rem 1.2rem .7rem .8rem; z-index: 30;
  background: linear-gradient(135deg, #2b2330, #17131a); color: #f4e9c8; border: 1px solid #b89b52; border-radius: 10px; box-shadow: 0 0 30px rgba(184,155,82,.35);
  animation: memoin .5s cubic-bezier(.3,1.6,.5,1) both; max-width: min(380px, 80vw); }
#fx > .achieve { pointer-events: none; }
.achieve.out { animation: fadeout .6s ease both; }
.achieve small { display: block; font-size: .66rem; letter-spacing: .18em; color: #b89b52; }
.achieve b { font-size: .98rem; }
.achieve-icon { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: #b89b52; color: #17131a; font-size: 1.2rem; }

/* a choice with a clock on it */
.choice-timer { width: min(560px, 90vw); height: 6px; border-radius: 3px; background: rgba(0,0,0,.25); position: relative; margin-top: .3rem; }
.choice-timer span { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 3px; background: var(--pink); transition: width .2s linear; }
.choice-timer small { position: absolute; right: 0; top: 10px; font-size: .72rem; color: rgba(255,255,255,.75); letter-spacing: .1em; text-shadow: 0 1px 3px #000; }

/* every minigame is a full-screen layer in #fx */
.mg { position: absolute; inset: 0; z-index: 15; display: grid; place-items: center; background: rgba(20,10,16,.55); animation: fadein .35s ease both; }
.mg.out { animation: fadeout .4s ease both; pointer-events: none; }
.mg .row { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.mg .row.left { justify-content: flex-start; }
.mg button { padding: .55rem 1.3rem; border-radius: 999px; border: 3px solid var(--line); font-weight: 800; background: var(--paper); color: var(--ink); box-shadow: 0 4px 0 var(--line); }
.mg button:hover:not(:disabled) { background: var(--pink); color: #fff; border-color: var(--pink); box-shadow: 0 4px 0 var(--pink-deep); }
.mg button:disabled { opacity: .45; }
#game.uncanny .mg button { border-radius: 3px; box-shadow: none; }
.mg input, .mg textarea { font: inherit; color: var(--ink); background: #fff; border: 3px solid var(--line); outline: none; }
.mg input:focus, .mg textarea:focus { border-color: var(--pink); }
.mg .shake { animation: shake .08s linear 4; }
.mg .hidden { display: none !important; }

/* one line on a list */
.ask-card { width: min(520px, 92vw); padding: 1.6rem 1.8rem 1.4rem 2.8rem; color: var(--ink); border-radius: 18px; text-align: center;
  background: linear-gradient(90deg, transparent 1.8rem, #ffb3cc 1.8rem, #ffb3cc calc(1.8rem + 2px), transparent calc(1.8rem + 2px)),
    repeating-linear-gradient(180deg, transparent 0 1.9rem, #f3e2ea 1.9rem calc(1.9rem + 1px)), var(--paper);
  box-shadow: 0 8px 0 var(--line), 0 30px 70px rgba(80,30,50,.35); animation: panelin2 .4s cubic-bezier(.3,1.5,.5,1) both; rotate: -1deg; }
@keyframes panelin2 { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.ask-card h3 { margin: 0 0 .4rem; font-family: var(--display); font-weight: 400; color: var(--pink-deep); }
.ask-hint { margin: 0 0 1rem; color: var(--ink-soft); }
.ask-card input { width: 100%; padding: .6rem 1rem; font-family: var(--hand); font-size: 1.6rem; text-align: center; border-radius: 12px; }
#game.uncanny .ask-card { border-radius: 4px; background: var(--paper); box-shadow: 0 0 0 1px #3a2e33, 0 30px 70px rgba(0,0,0,.6); }
#game.uncanny .mg input, #game.uncanny .mg textarea { background: #151216; color: var(--ink); border-radius: 3px; }

/* the five-star survey */
.survey { width: min(400px, 92vw); padding: 1.4rem; border-radius: 22px; background: #fff; color: #444; box-shadow: 0 30px 70px rgba(0,0,0,.4); text-align: center; font-size: .95rem; }
.survey-head { font-weight: 800; color: #3a7bd5; margin-bottom: 1rem; }
.survey-head small { display: block; font-weight: 500; color: #999; font-size: .75rem; margin-top: .2rem; }
.survey-q p { margin: .4rem 0; }
.stars { display: flex; justify-content: center; gap: .3rem; }
.mg .stars button { border: none; box-shadow: none; background: none; font-size: 2.2rem; padding: 0 .1rem; color: #f5b400; }
.mg .stars button:hover:not(:disabled) { background: none; color: #f5b400; box-shadow: none; transform: scale(1.15); }
.survey-note { min-height: 1.4em; color: #3a7bd5; font-size: .85rem; }
.mg .survey-no { margin-top: .8rem; border: none; box-shadow: none; background: none; color: #bbb; font-size: .72rem; font-weight: 500; padding: .2rem; text-decoration: underline; }
.mg .survey-no:hover:not(:disabled) { background: none; color: #999; box-shadow: none; }
.mg .survey-no.shrink { font-size: .6rem; opacity: .6; }
.survey textarea { width: 100%; padding: .5rem; border-radius: 10px; resize: none; }
#game.uncanny .survey textarea { background: #fff; color: #444; }

/* Rei's viewfinder */
.mg-view { background: #000; --x: 50vw; --y: 50vh; }
#game .mg-view, #game .mg-view * { cursor: none; }
.view-scene { position: absolute; inset: 0; background: center / cover no-repeat; filter: saturate(.35) brightness(1.5) contrast(1.05); }
.view-k { position: absolute; width: 7vw; min-width: 50px; height: 34vh; translate: -50% -35%; filter: blur(12px); opacity: .7; transition: filter .15s;
  background: radial-gradient(ellipse 36% 13% at 50% 12%, rgba(8,8,12,.92) 97%, transparent 100%), linear-gradient(transparent 22%, rgba(8,8,12,.86) 29%, rgba(8,8,12,.86) 100%);
  border-radius: 45% 45% 12% 12% / 20% 20% 6% 6%; }
.view-k.pulse { animation: kpulse 1.6s ease-in-out infinite; }
.view-k.found { opacity: 1; }
@keyframes kpulse { 50% { opacity: .98; } }
.view-mask { position: absolute; inset: 0; background: radial-gradient(circle 120px at var(--x) var(--y), transparent 97%, rgba(0,0,0,.87) 100%); pointer-events: none; }
.view-mask.flash { animation: viewflash .5s ease; }
@keyframes viewflash { 0% { background: #fff; } }
.view-ring { position: absolute; left: var(--x); top: var(--y); width: 240px; height: 240px; translate: -50% -50%; border: 2px solid rgba(255,255,255,.55); border-radius: 50%; pointer-events: none; transition: border-color .2s; }
.view-ring i { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; translate: -50% -50%; border: 2px solid rgba(255,255,255,.7); }
.view-ring.near { border-color: #8fdccf; }
.view-prompt { position: absolute; bottom: 7%; left: 50%; translate: -50% 0; margin: 0; color: #eee; font-size: 1.05rem; text-shadow: 0 1px 4px #000; text-align: center; width: 90vw; pointer-events: none; }
.view-count { position: absolute; right: 4%; top: 4%; margin: 0; color: #ff9b3d; font-family: ui-monospace, Consolas, monospace; letter-spacing: .1em; pointer-events: none; }

/* a page of Sayo's sketchbook */
.draw-page { padding: 1rem 1.2rem 1.2rem; background: #fbf7ee; border-radius: 6px; box-shadow: 0 30px 70px rgba(0,0,0,.5); rotate: .8deg; text-align: center; }
.draw-prompt { margin: 0 0 .6rem; font-family: var(--hand); font-size: 1.5rem; color: #3b3440; max-width: 340px; }
.draw-page canvas { display: block; width: min(300px, 60vw); max-height: 62vh; aspect-ratio: 360 / 510; height: auto; margin: 0 auto; background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(59,52,64,.06) 23px 24px), #fbf7ee; border: 1px dashed rgba(59,52,64,.25); touch-action: none; }
#game .draw-page canvas { cursor: crosshair; }
.door-btn svg.drawn path { stroke-dasharray: none; stroke-dashoffset: 0; animation: fadein 1.4s ease 1.6s both; stroke-width: 2.6; }
.sb-card.door-card svg { display: block; width: 90px; height: 128px; margin: .3rem auto; fill: none; stroke: #3b3440; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#game.uncanny .sb-card.door-card svg { stroke: var(--ink); }

/* the pose rehearsal, behind the menu */
.mg-pose { background: radial-gradient(ellipse 60% 70% at 50% 8%, #3a3340 0, #121016 55%, #060507 100%); }
.pose-stage { position: absolute; inset: 0; }
.pose-stage img { position: absolute; bottom: -6%; height: 84%; translate: -50% 0; filter: drop-shadow(0 12px 30px rgba(0,0,0,.6)); }
.pose-stage img[data-g="rei"], .pose-stage img[data-g="sayo"] { height: 76%; }
.mg-pose.resting .pose-stage img { filter: saturate(.4) brightness(.8) drop-shadow(0 12px 30px rgba(0,0,0,.6)); }
.mg-pose.caught { animation: caughtflash .5s ease; }
@keyframes caughtflash { 0% { box-shadow: inset 0 0 0 100vmax rgba(224,72,60,.45); } }
.pose-eye { position: absolute; top: 4%; left: 50%; translate: -50% 0; width: 140px; }
.pose-eye svg { width: 100%; overflow: visible; }
.pose-eye .lid { fill: #e9e1e1; stroke: #b3303a; stroke-width: 3; transform-origin: 50% 50%; transform: scaleY(.06); transition: transform .25s; }
.pose-eye circle { fill: #b3303a; transform-origin: 50% 50%; transform: scale(0); transition: transform .25s; }
.pose-eye[data-state="warn"] .lid { transform: scaleY(.35); }
.pose-eye[data-state="open"] .lid { transform: scaleY(1); }
.pose-eye[data-state="open"] circle { transform: scale(1); }
.pose-hud { position: absolute; left: 50%; bottom: 4%; translate: -50% 0; width: min(560px, 92vw); padding: .8rem 1rem; border-radius: 6px; background: rgba(15,12,16,.88); color: #e9dfe0; text-align: center; }
.pose-tip { margin: 0 0 .5rem; font-size: .9rem; }
.pose-bar { height: 10px; border-radius: 5px; background: #2a2228; overflow: hidden; }
.pose-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8fdccf, #b9a3f0); transition: width .1s linear; }
.pose-strikes { margin: .4rem 0 0; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; color: #ff9a92; letter-spacing: .1em; }
.pose-fail { position: absolute; inset: 0; display: grid; place-content: center; gap: 1rem; text-align: center; background: rgba(40,6,10,.8); color: #ff9a92; font-family: ui-monospace, Consolas, monospace; }
.mg-pose.won .pose-hud { box-shadow: 0 0 40px rgba(143,220,207,.5); }

/* patch notes: a launcher popup that is far too pleased with itself */
.patch { width: min(520px, 92vw); padding: 1.4rem 1.6rem; border-radius: 16px; background: linear-gradient(180deg, #fff 0, #fff4f8 100%); color: #5b3d4c; box-shadow: 0 0 0 3px #ffc9dc, 0 30px 80px rgba(0,0,0,.45); }
.patch-head { font-size: 1.05rem; margin-bottom: .8rem; }
.patch-head span { float: right; padding: .1rem .6rem; border-radius: 999px; background: #ff7eb0; color: #fff; font-weight: 800; font-size: .85rem; }
.patch ul { margin: 0; padding: 0 0 0 1.1rem; list-style: none; max-height: 52vh; overflow: auto; }
.patch li { margin: .35rem 0; position: relative; }
.patch li::before { content: "+"; position: absolute; left: -1.1rem; color: #3cae7a; font-weight: 800; }
.patch li.minus::before { content: "−"; color: #e0483c; }
.patch li.warn::before { content: "!"; color: #e0a03c; }
.patch-foot { margin: .9rem 0 0; font-size: .8rem; color: #a08090; }
.mg .patch button { border-color: #ffc9dc; background: #fff; color: #5b3d4c; box-shadow: 0 4px 0 #ffc9dc; border-radius: 999px; }

/* the Hearing */
.mg-hearing { background: rgba(30,6,10,.82); }
.hear { width: min(760px, 95vw); max-height: 94vh; display: flex; flex-direction: column; padding: 1.1rem 1.3rem; border-radius: 6px; background: #17131a; color: #e9dfe0; border: 1px solid #5a2a30; box-shadow: 0 0 60px rgba(224,72,60,.25); }
.mg-hearing.hurt .hear { animation: shake .08s linear 4; border-color: #e0483c; }
.hear-top { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; font-family: ui-monospace, Consolas, monospace; font-size: .78rem; letter-spacing: .1em; color: #a89a9d; }
.hear-office { color: #e0483c; font-weight: 700; }
.hear-hearts { color: #ff7eb0; }
.hear-lines { margin: .9rem 0 .4rem; padding: 0; list-style: none; counter-reset: st; }
.hear-lines li { counter-increment: st; margin: .35rem 0; padding: .55rem .8rem .55rem 2.4rem; border: 1px solid #3a2e33; border-radius: 4px; position: relative; line-height: 1.45; }
.hear-lines li::before { content: counter(st); position: absolute; left: .8rem; color: #e0483c; font-weight: 800; }
.hear-lines li:hover { border-color: #8d8389; background: #1f1a22; }
.hear-lines li.on { border-color: #e0483c; background: #2a1418; }
.hear-msg { min-height: 1.5em; margin: .3rem 0 .6rem; color: #a89a9d; font-size: .9rem; }
.hear-msg.bad { color: #ff9a92; }
.hear-msg.hint { color: #8fdccf; }
.hear-proofs { flex: 1; overflow: auto; max-height: 32vh; padding: .2rem; border-top: 1px solid #3a2e33; }
.hear-proofs h4 { margin: .6rem 0 .3rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #8d8389; }
.mg .proof { margin: .15rem; padding: .3rem .7rem; border-radius: 3px; border: 1px solid #3a2e33; background: #211c24; color: #e9dfe0; font-weight: 500; font-size: .85rem; box-shadow: none; }
.mg .proof:hover:not(:disabled) { background: #2e2731; color: #fff; border-color: #8d8389; box-shadow: none; }
.mg .proof.on { border-color: #8fdccf; background: #1b2c2a; color: #c8fff4; }
.mg .hear .row button { border-radius: 3px; box-shadow: none; border: 1px solid #5a4a50; background: #241e26; color: #e9dfe0; }
.mg .hear .row button:hover:not(:disabled) { background: #e0483c; border-color: #e0483c; color: #fff; box-shadow: none; }
.hear-stamp { position: absolute; left: 50%; top: 45%; translate: -50% -50%; padding: .4rem 1.4rem; font-family: var(--display); font-size: clamp(2rem, 7vw, 4rem); color: #fff; background: #e0483c; rotate: -8deg; box-shadow: 0 0 0 6px #17131a, 0 0 0 9px #e0483c; animation: stamp .35s cubic-bezier(.2,1.8,.4,1) both; white-space: nowrap; }
@keyframes stamp { from { scale: 2.4; opacity: 0; } }

/* OFFICE-PC */
.mg-desk { background: #000; }
.desk { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, #3b5a8a, #1c2b45 70%); font-family: "Segoe UI", system-ui, sans-serif; color: #111; overflow: hidden; }
.desk-icons { position: absolute; left: 1rem; top: 1rem; display: grid; grid-template-columns: repeat(2, 84px); gap: .6rem; }
.mg .desk-icon { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .5rem .2rem; border: 1px solid transparent; border-radius: 4px; background: none; box-shadow: none; color: #fff; font-weight: 500; font-size: .78rem; text-shadow: 0 1px 2px #000; }
.mg .desk-icon span { font-size: 1.7rem; line-height: 1; font-family: ui-monospace, Consolas, monospace; }
.mg .desk-icon:hover:not(:disabled) { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); box-shadow: none; color: #fff; }
.desk-note { position: absolute; right: 1.2rem; top: 1.2rem; width: 250px; padding: .9rem 1rem; background: #fff6a8; color: #3b3440; font-family: var(--hand); font-size: 1.15rem; line-height: 1.2; rotate: 2deg; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.desk-note ol { margin: .4rem 0 0; padding-left: 1.2rem; }
.desk-note li { margin: .3rem 0; }
.desk-note li.ok { text-decoration: line-through; opacity: .55; }
.desk-note small { display: block; font-size: .95rem; opacity: .75; }
.desk-note code { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
.desk-note p { margin: .5rem 0 0; color: #c0392b; }
.desk-win { position: absolute; left: 50%; top: 46%; translate: -50% -50%; width: min(760px, 94vw); height: min(520px, 76vh); display: flex; flex-direction: column; background: #f3f3f3; border: 1px solid #777; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.win-bar { display: flex; justify-content: space-between; align-items: center; padding: .3rem .4rem .3rem .8rem; background: #fff; border-bottom: 1px solid #ccc; font-size: .85rem; }
.mg .win-bar button { padding: .1rem .6rem; border: none; border-radius: 0; box-shadow: none; background: none; color: #111; }
.mg .win-bar button:hover:not(:disabled) { background: #e81123; color: #fff; box-shadow: none; }
.win-body { flex: 1; overflow: auto; padding: .8rem; font-size: .88rem; position: relative; }
.mg .win-body .row button, .mg .pw-box button { padding: .3rem .9rem; border-radius: 3px; border: 1px solid #aaa; background: #fff; color: #111; box-shadow: none; font-weight: 600; font-size: .82rem; }
.mg .win-body .row button:hover:not(:disabled), .mg .pw-box button:hover:not(:disabled) { background: #e5f1fb; border-color: #0078d4; color: #111; box-shadow: none; }
.win-text { white-space: pre-wrap; font-family: ui-monospace, Consolas, monospace; font-size: .82rem; line-height: 1.5; margin: 0; color: #222; }
.dim { color: #777; }
.mail { display: grid; grid-template-columns: 240px 1fr; gap: .8rem; height: 100%; }
.mail-list { margin: 0; padding: 0; list-style: none; border-right: 1px solid #ddd; overflow: auto; }
.mail-list li { padding: .5rem .6rem; border-bottom: 1px solid #e3e3e3; display: grid; gap: .1rem; }
.mail-list li:hover { background: #e5f1fb; }
.mail-list li.unread b { color: #0063b1; }
.mail-list li.unread b::before { content: "● "; font-size: .7rem; }
.mail-list span { font-size: .82rem; }
.mail-list small { color: #888; font-size: .72rem; }
.mail-read h4 { margin: 0 0 .2rem; }
.mail-read { overflow: auto; }
.files { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; }
.mg .file { padding: .3rem .6rem; border: 1px solid #ccc; border-radius: 3px; background: #fff; color: #111; box-shadow: none; font-weight: 500; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
.mg .file:hover:not(:disabled) { background: #e5f1fb; border-color: #0078d4; color: #111; box-shadow: none; }
.file-view { border-top: 1px solid #ddd; padding-top: .6rem; }
.board { margin: 0; padding: 0; list-style: none; }
.board li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .6rem; border-bottom: 1px solid #ddd; }
.board li:hover { background: #fff8e0; }
.board small { color: #888; flex: none; }
.thread h4 { margin: 0 0 .6rem; }
.post { padding: .5rem .7rem; margin-bottom: .4rem; background: #fff; border: 1px solid #e3e3e3; border-radius: 3px; }
.post b { color: #117743; font-size: .8rem; }
.post small { margin-left: .6rem; color: #999; font-size: .72rem; }
.post p { margin: .3rem 0 0; white-space: pre-wrap; }
.eng label { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: .6rem 0; font-weight: 600; }
.eng-bar { width: 55%; height: 8px; border-radius: 4px; background: #ddd; overflow: hidden; }
.eng-bar i { display: block; height: 100%; background: #e0483c; }
.eng-tog b { padding: .1rem .6rem; border-radius: 3px; font-size: .78rem; color: #fff; }
.eng-tog b.on { background: #2e8b57; }
.eng-tog b.off { background: #888; }
.pw-box { margin-top: .8rem; padding: .8rem; border: 1px solid #aaa; background: #fff; }
.pw-box p { margin: 0 0 .4rem; }
.mg .pw-box input { width: 100%; padding: .3rem .5rem; border: 1px solid #aaa; border-radius: 0; background: #fff; color: #111; }
.desk-task { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; display: flex; align-items: center; gap: 1rem; padding: 0 .8rem; background: rgba(16,18,24,.92); color: #ddd; font-size: .82rem; }
.desk-task .start { font-weight: 700; color: #e0483c; letter-spacing: .08em; }
.task-msg { flex: 1; color: #9fd8ff; font-style: italic; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mg .desk-task button { padding: .25rem .9rem; border-radius: 3px; border: 1px solid #555; background: #2a2d36; color: #eee; box-shadow: none; font-weight: 600; }
.mg .desk-task button:not(:disabled) { border-color: #e0483c; animation: beat 1.4s ease-in-out infinite; }
.task-clock { font-family: ui-monospace, Consolas, monospace; }

/* the terminal (inside OFFICE-PC, and alone at the end) */
.term { height: 100%; display: flex; flex-direction: column; background: #0c0c0c; color: #cfcfcf; font-family: ui-monospace, Consolas, monospace; font-size: .84rem; margin: -.8rem; padding: .6rem .8rem; height: calc(100% + 1.6rem); }
.term.full { position: absolute; inset: 0; margin: 0; padding: 1.4rem 1.6rem; font-size: 1rem; height: auto; }
.term-out { flex: 1; overflow: auto; }
.term-out pre { margin: 0 0 .2rem; white-space: pre-wrap; font: inherit; }
.term-out pre.cmd { color: #8ae68a; }
.term-out pre.bad { color: #ff7a7a; }
.term-out pre.hint { color: #8fdccf; font-style: italic; }
.term-in { display: flex; gap: .5rem; align-items: center; }
.term-ps { color: #8ae68a; white-space: nowrap; }
.mg .term-in input { flex: 1; border: none; background: none; color: #fff; font: inherit; padding: .2rem 0; border-radius: 0; }
#game.uncanny .mg .term-in input { background: none; }
.mg-term { background: #0c0c0c; }

/* the second-term title: the Office made it cute again, on purpose */
.title.term2 .title-sub { color: #ff9a92; letter-spacing: .1em; }

/* graduated: a photo instead of a menu */
.title.graduated { justify-content: center; gap: 1.2rem; }
.grad-photo { position: relative; margin: 0; padding: 12px 12px 8px; background: #f6f2e9; box-shadow: 0 24px 60px rgba(60,20,40,.4); rotate: -2deg; width: min(520px, 84vw); animation: develop 2.4s ease both; }
.grad-img { position: relative; height: min(300px, 32vh); overflow: hidden; background: url(../assets/bg/beach.webp) center / cover; }
.grad-img img { position: absolute; bottom: -60%; height: 160%; translate: -50% 0; }
.grad-photo figcaption { margin-top: .5rem; text-align: center; font-family: var(--hand); font-size: 1.3rem; color: #3b2a33; }
.title.graduated .title-card { animation-delay: .6s; }
@media (max-width: 720px) {
  .desk-note { width: 180px; font-size: .95rem; top: auto; bottom: 50px; }
  .desk-icons { grid-template-columns: repeat(3, 74px); }
  .mail { grid-template-columns: 1fr; }
  .mail-list { max-height: 30vh; border-right: none; }
}