/* Crew story: dialogue scenes, the home episode strip, client reviews, and the story log. */
.arcade-game #modal .story-scene { display: grid; gap: 16px; padding-top: 4px; }
.arcade-game #modal .story-top { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px; }
.arcade-game #modal .story-top .letter-stamp { grid-column: 1; color: var(--game-gold); }
.arcade-game #modal .story-top h2 { grid-column: 1; font-size: 22px; font-weight: 900; color: var(--game-white); letter-spacing: -.6px; }
.arcade-game #modal .story-skip { grid-column: 2; grid-row: 1 / span 2; align-self: start; background: none; border: 0; color: var(--game-dim); font-size: 12px; font-weight: 800; padding: 10px 2px 10px 10px; min-height: 44px; }
.arcade-game #modal .story-stage { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: end; min-height: 168px; }
.arcade-game #modal .story-portrait { width: 96px; height: 104px; display: grid; place-items: end center; }
.arcade-game #modal .story-portrait svg { width: 96px; height: auto; max-height: 104px; animation: story-pop .32s cubic-bezier(.2,1.6,.4,1); }
.arcade-game #modal .story-client .story-portrait svg { width: 84px; }
.arcade-game #modal .story-bubble { position: relative; background: var(--game-white); color: var(--game-ink); border: 3px solid var(--game-line); box-shadow: 0 5px 0 var(--game-line); border-radius: 18px; padding: 13px 15px 15px; animation: story-pop .26s ease-out; }
.arcade-game #modal .story-bubble::before { content: ''; position: absolute; left: -13px; bottom: 22px; width: 18px; height: 18px; background: var(--game-white); border-left: 3px solid var(--game-line); border-bottom: 3px solid var(--game-line); transform: rotate(45deg) skew(10deg, 10deg); }
.arcade-game #modal .story-bubble b { display: inline-block; font-size: 12px; font-weight: 900; color: var(--game-white); background: var(--game-panel); border-radius: 999px; padding: 3px 10px; margin-bottom: 7px; }
.arcade-game #modal .story-boss .story-bubble b { background: var(--game-coral-deep); }
.arcade-game #modal .story-cat .story-bubble b { background: var(--game-gold-deep); color: var(--game-ink); }
.arcade-game #modal .story-bubble p { font-size: 16px; font-weight: 750; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; }
.arcade-game #modal .story-cat .story-bubble p { font-size: 22px; font-weight: 900; }
.arcade-game #modal .story-progress { display: flex; gap: 6px; justify-content: center; }
.arcade-game #modal .story-progress i { width: 22px; height: 6px; border-radius: 3px; background: var(--game-light); }
.arcade-game #modal .story-progress i.on { background: var(--game-gold); }
@keyframes story-pop { from { transform: translateY(8px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .arcade-game #modal .story-portrait svg, .arcade-game #modal .story-bubble { animation: none; } }

.arcade-game .home-episode { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--game-deep); border: 2px solid var(--game-line); box-shadow: 0 3px 0 var(--game-line); border-radius: 14px; padding: 6px 12px 6px 8px; margin: 8px 0 2px; color: var(--game-white); }
.arcade-game .home-episode-cat svg { width: 44px; height: 40px; display: block; }
.arcade-game .home-episode span { display: block; font-size: 10px; font-weight: 800; color: var(--game-gold); }
.arcade-game .home-episode b { display: block; font-size: 14px; font-weight: 900; letter-spacing: -.3px; }
.arcade-game .home-episode small { font-size: 12px; font-weight: 900; color: var(--game-dim); }

.arcade-game #modal .client-review { margin: 4px 0 12px; background: var(--game-white); color: var(--game-ink); border: 2px solid var(--game-line); box-shadow: 0 3px 0 var(--game-line); border-radius: 14px; padding: 10px 13px; text-align: left; }
.arcade-game #modal .client-review span { display: block; font-size: 10px; font-weight: 900; color: var(--game-coral-deep); }
.arcade-game #modal .client-review p { font-size: 14px; font-weight: 750; line-height: 1.6; margin-top: 3px; word-break: keep-all; }
.arcade-game #modal .episode-ready { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--game-gold); color: var(--game-ink); border: 2px solid var(--game-line); box-shadow: 0 4px 0 var(--game-line); border-radius: 14px; padding: 10px 13px; margin: 0 0 12px; }
.arcade-game #modal .episode-ready > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--game-ink); color: var(--game-gold); font-size: 13px; }
.arcade-game #modal .episode-ready b { display: block; font-size: 14px; font-weight: 900; }
.arcade-game #modal .episode-ready small { display: block; font-size: 11px; font-weight: 800; color: var(--game-panel); }

.arcade-game #modal .story-cat-card { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: center; background: var(--game-light); border: 2px solid var(--game-line); box-shadow: 0 4px 0 var(--game-line); border-radius: 16px; padding: 10px 14px; margin-bottom: 14px; }
.arcade-game #modal .story-cat-card svg { width: 70px; height: auto; display: block; }
.arcade-game #modal .story-cat-card span { display: block; font-size: 11px; font-weight: 800; color: var(--game-gold); }
.arcade-game #modal .story-cat-card b { display: block; font-size: 26px; font-weight: 900; color: var(--game-white); }
.arcade-game #modal .story-cat-card b small { font-size: 14px; color: var(--game-dim); margin-left: 4px; }
.arcade-game #modal .story-cat-card div > small { display: block; font-size: 11px; line-height: 1.5; color: var(--game-dim); }
.arcade-game #modal .story-list { display: grid; gap: 8px; margin-bottom: 14px; }
.arcade-game #modal .story-entry { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; background: var(--game-panel); border: 2px solid var(--game-line); border-radius: 14px; padding: 6px 10px; }
.arcade-game #modal .story-entry.locked { opacity: .55; }
.arcade-game #modal .story-entry.done { border-color: var(--game-gold-deep); }
.arcade-game #modal .story-entry-art svg { width: 46px; height: auto; display: block; }
.arcade-game #modal .story-entry b { display: block; font-size: 14px; font-weight: 900; color: var(--game-white); }
.arcade-game #modal .story-entry small { display: block; font-size: 11px; color: var(--game-dim); }
.arcade-game #modal .story-entry-actions { display: flex; gap: 4px; }
.arcade-game #modal .story-entry-actions .text-link { min-height: 40px; padding: 0 8px; font-size: 12px; }
.arcade-game #modal .story-lock { font-size: 11px; font-weight: 800; color: var(--game-dim); }
.arcade-game .game-home { grid-template-areas: "top top" "hero modes" "next modes" "episode modes" "play modes" "credit credit"; }
.arcade-game .home-episode { grid-area: episode; margin: -8px 0 0; }
@media (max-width: 900px) {
  .arcade-game .game-home { grid-template-areas: "top" "hero" "next" "episode" "play" "modes" "credit"; }
  .arcade-game .home-episode { margin: -6px 0 0; }
}

/* First-run coach */
.coach { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.coach[hidden] { display: none; }
.coach-ring { position: absolute; left: -34px; top: -34px; width: 68px; height: 68px; border-radius: 50%; border: 4px solid var(--game-gold); box-shadow: 0 0 0 4px var(--game-line), 0 0 22px var(--game-gold); animation: coach-pulse 1s ease-in-out infinite; }
.coach-ring[hidden] { display: none; }
.coach-card { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(196px + env(safe-area-inset-bottom)); width: min(360px, calc(100% - 32px)); display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; background: var(--game-white); color: var(--game-ink); border: 3px solid var(--game-line); box-shadow: 0 5px 0 var(--game-line); border-radius: 18px; padding: 12px 14px; pointer-events: auto; animation: story-pop .26s ease-out; }
.coach[data-step="goal"] .coach-card, .coach[data-step="low"] .coach-card { bottom: auto; top: calc(150px + env(safe-area-inset-top)); }
.coach-face { grid-row: span 2; align-self: start; display: grid; justify-items: center; gap: 2px; width: 58px; }
.coach-face svg { width: 58px; height: 58px; display: block; background: var(--game-sky); border: 3px solid var(--game-line); border-radius: 50%; }
.coach-face b { font-size: 10px; font-weight: 900; color: var(--game-white); background: var(--game-coral-deep); border-radius: 999px; padding: 2px 8px; }
.coach-card p { font-size: 15px; font-weight: 800; line-height: 1.55; word-break: keep-all; }
.coach-actions { grid-column: 2; display: flex; gap: 8px; justify-content: flex-end; }
.coach-ok { background: var(--game-gold); color: var(--game-ink); border: 2px solid var(--game-line); border-radius: 12px; font-weight: 900; font-size: 13px; padding: 8px 14px; min-height: 40px; }
.coach-ok[hidden] { display: none; }
.coach-skip { background: none; border: 0; color: var(--game-panel); font-size: 12px; font-weight: 800; min-height: 40px; padding: 0 4px; }
.coach-target { outline: 4px solid var(--game-gold) !important; outline-offset: 3px; animation: coach-glow 1s ease-in-out infinite; position: relative; z-index: 31; }
@keyframes coach-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.18; } }
@keyframes coach-glow { 0%, 100% { outline-color: var(--game-gold); } 50% { outline-color: var(--game-white); } }
@media (prefers-reduced-motion: reduce) { .coach-ring, .coach-target, .coach-card { animation: none; } }
.arcade-game #modal .coin-tip { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; text-align: left; background: var(--game-deep); border: 2px solid var(--game-gold-deep); border-radius: 14px; padding: 10px 12px; margin: 0 0 12px; }
.arcade-game #modal .coin-tip i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--game-gold); color: var(--game-ink); font-style: normal; font-weight: 900; }
.arcade-game #modal .coin-tip p { font-size: 13px; line-height: 1.55; color: var(--game-white); word-break: keep-all; }
.arcade-game #modal .coin-tip b { color: var(--game-gold); }

.arcade-game #modal .client-review { display: grid; grid-template-columns: 46px 1fr; column-gap: 10px; }
.arcade-game #modal .client-review > span:not(.client-review-face), .arcade-game #modal .client-review p { grid-column: 2; }
.arcade-game #modal .client-review-face { grid-row: span 2; align-self: center; }
.arcade-game #modal .client-review-face svg { width: 46px; height: 46px; display: block; background: var(--game-sky); border: 2px solid var(--game-line); border-radius: 50%; }
.arcade-game #modal .story-portrait .client-face { width: 88px; background: var(--game-sky); border: 3px solid var(--game-line); border-radius: 50%; }

/* Full-screen cutscene */
.arcade-game #modal[data-view="story"] { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; }
.arcade-game #modal[data-view="story"]::backdrop { background: rgba(5,16,32,.35); backdrop-filter: blur(2px); }
.cutscene { position: relative; width: 100%; height: 100%; cursor: pointer; user-select: none; -webkit-user-select: none; overflow: hidden; }
.cut-backdrop { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,16,32,.0) 30%, rgba(5,16,32,.55) 62%, rgba(5,16,32,.92) 100%); }
.cutscene::before, .cutscene::after { content: ''; position: absolute; left: 0; right: 0; height: 9dvh; background: #050c18; z-index: 3; animation: cut-bars .45s ease-out both; }
.cutscene::before { top: 0; } .cutscene::after { bottom: 0; transform-origin: bottom; }
.cut-top { position: absolute; z-index: 4; top: calc(env(safe-area-inset-top) + 9dvh + 10px); left: 16px; right: 16px; display: flex; align-items: center; gap: 8px; }
.cut-ep { font-size: 11px; font-weight: 900; color: var(--game-ink); background: var(--game-gold); border: 2px solid var(--game-line); border-radius: 999px; padding: 3px 10px; }
.cut-top b { flex: 1; font-size: 14px; font-weight: 900; color: var(--game-white); text-shadow: 0 2px 0 var(--game-line); }
.cut-skip { background: rgba(5,16,32,.6); border: 2px solid var(--game-light); color: var(--game-white); border-radius: 999px; font-size: 12px; font-weight: 800; padding: 6px 12px; min-height: 36px; }
.cut-title { position: absolute; z-index: 6; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; background: rgba(5,12,24,.82); pointer-events: none; animation: cut-title 1.5s ease-in-out both; }
.cut-title span { font-size: 12px; font-weight: 900; letter-spacing: 3px; color: var(--game-mint); }
.cut-title b { font-size: 46px; font-weight: 900; color: var(--game-gold); text-shadow: 0 4px 0 var(--game-line); line-height: 1.1; }
.cut-title h2 { font-size: 26px; font-weight: 900; color: var(--game-white); letter-spacing: -.6px; }
.cut-portrait { position: absolute; z-index: 2; bottom: calc(9dvh + 182px + env(safe-area-inset-bottom)); width: min(62vw, 270px); filter: drop-shadow(0 10px 0 rgba(5,16,32,.45)); }
.cut-portrait.side-left { left: max(0px, calc(50% - 240px)); }
.cut-portrait.side-right { right: max(4px, calc(50% - 230px)); }
.cut-portrait svg { width: 100%; height: auto; display: block; }
.who-client .cut-portrait { width: min(46vw, 190px); }
.who-client .cut-portrait .client-face { background: var(--game-sky); border: 4px solid var(--game-line); border-radius: 50%; box-shadow: 0 6px 0 var(--game-line); }
.who-cat .cut-portrait { width: min(42vw, 170px); }
.cut-portrait.enter.side-left { animation: cut-in-left .38s cubic-bezier(.2,1.3,.4,1) both; }
.cut-portrait.enter.side-right { animation: cut-in-right .38s cubic-bezier(.2,1.3,.4,1) both; }
.cut-portrait.talk { animation: cut-bob .32s ease-out; }
.cut-box { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); bottom: calc(9dvh + 14px + env(safe-area-inset-bottom)); width: min(560px, calc(100% - 24px)); min-height: 160px; background: var(--game-white); color: var(--game-ink); border: 4px solid var(--game-line); border-radius: 20px; box-shadow: 0 7px 0 var(--game-line); padding: 26px 18px 12px; display: grid; grid-template-rows: 1fr auto; }
.cut-name { position: absolute; top: -18px; left: 16px; font-size: 15px; font-weight: 900; color: var(--game-white); background: var(--game-coral-deep); border: 3px solid var(--game-line); border-radius: 12px; padding: 4px 14px; box-shadow: 0 3px 0 var(--game-line); }
.cut-box.side-right .cut-name { left: auto; right: 16px; background: var(--game-panel); }
.who-cat .cut-name { background: var(--game-gold-deep); color: var(--game-ink); }
.cut-text { font-size: 18px; font-weight: 800; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; min-height: 3.2em; }
.who-cat .cut-text { font-size: 30px; }
.cut-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.cut-dots { display: flex; gap: 5px; } .cut-dots i { width: 16px; height: 5px; border-radius: 3px; background: var(--game-dim); } .cut-dots i.on { background: var(--game-coral); }
.cut-next { font-size: 12px; font-weight: 900; color: var(--game-panel); animation: cut-blink 1s ease-in-out infinite; }
@keyframes cut-bars { from { transform: scaleY(0); } }
@keyframes cut-title { 0% { opacity: 0; } 15%, 70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes cut-in-left { from { transform: translateX(-60%) rotate(-6deg); opacity: 0; } }
@keyframes cut-in-right { from { transform: translateX(60%) rotate(6deg); opacity: 0; } }
@keyframes cut-bob { 40% { transform: translateY(-8px); } }
@keyframes cut-blink { 50% { opacity: .35; } }
.mood-shock .cut-portrait.side-left { animation: cut-shake .35s ease-out; }
@keyframes cut-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .cutscene::before, .cutscene::after, .cut-portrait, .cut-next, .cut-title { animation: none !important; } .cut-title { display: none; } }
@media (max-height: 700px) { .cut-portrait { width: min(48vw, 200px); bottom: calc(9dvh + 168px); } .cut-text { font-size: 16px; } }
.arcade-game #modal[data-view="story"] #modal-content { height: 100%; width: 100%; padding: 0; margin: 0; max-width: none; }
.cut-skip:focus:not(:focus-visible), .cutscene:focus { outline: none; }

/* Generated cast images */
.cast-img { display: block; width: 100%; height: auto; pointer-events: none; }
.cut-portrait .cast-img { max-height: 46dvh; width: auto; max-width: 100%; margin: 0 auto; }
.who-client .cut-portrait { width: min(56vw, 240px); }
.who-cat .cut-portrait { width: min(44vw, 180px); }
.coach-face { width: 62px; }
.coach-face .coach-boss { width: 58px; height: 58px; object-fit: cover; background: var(--game-sky); border: 3px solid var(--game-line); border-radius: 50%; }
.arcade-game #modal .client-review-face .cast-head { width: 46px; height: 46px; object-fit: cover; background: var(--game-sky); border: 2px solid var(--game-line); border-radius: 50%; }
.arcade-game .home-episode-cat .cast-img { width: 44px; height: 40px; object-fit: contain; }
.arcade-game #modal .story-cat-card .cast-img { width: 70px; }

/* Gemini-made 3D title logo replaces the CSS text title on home and boot splash. */
.arcade-game .home-title h1.home-logo { font-size: 0; line-height: 0; text-shadow: none; letter-spacing: 0; transform: rotate(-3deg); }
.arcade-game .home-logo img { display: block; width: 100%; max-width: 300px; height: auto; filter: drop-shadow(0 6px 0 rgba(8, 14, 30, .45)); }
.arcade-game .home-mascot .home-boss { display: block; width: 100%; max-width: 210px; height: auto; margin: 0 auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.arcade-game .boot-splash .boot-logo { width: min(260px, 70vw); height: auto; border: 0; border-radius: 0; box-shadow: none; }

/* Rough site theme: hazard tape and concrete grit on the lobby, play button and cutscene. */
:root { --hazard: repeating-linear-gradient(-45deg, #ffc93c 0 12px, #16110a 12px 24px); }
.arcade-game .home-kicker { display: inline-block; padding: 5px 10px 4px; color: #16110a; background: #ffc93c; border: 2px solid #16110a; border-radius: 3px; font-size: 11px; font-weight: 1000; letter-spacing: 0; box-shadow: 0 3px 0 #16110a; transform: rotate(-2deg); }
.arcade-game .game-home { position: relative; }
.arcade-game .game-home::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: 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='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.arcade-game .game-home > * { position: relative; z-index: 1; }
.arcade-game .home-hero { border-bottom: 10px solid transparent; border-image: var(--hazard) 10; padding-bottom: 6px; }
.arcade-game #modal .home-play { border: 3px solid #16110a; outline: 5px solid transparent; background-clip: padding-box; box-shadow: 0 0 0 5px #ffc93c, 0 0 0 8px #16110a, 0 8px 0 3px #16110a; }
.arcade-game #modal .home-play b { letter-spacing: -1px; text-shadow: 0 2px 0 rgba(255, 255, 255, .35); }
.cutscene::before { border-bottom: 8px solid transparent; border-image: var(--hazard) 8; }
.cutscene::after { border-top: 8px solid transparent; border-image: var(--hazard) 8; }
.cut-name { border-radius: 4px; letter-spacing: 0; }
.cutscene.who-boss .cut-name { background: #ffc93c; color: #16110a; }