.game-intro {
    width: min(880px, calc(100vw - 40px));
    max-height: calc(100dvh - 40px);
    padding: 36px;
    border: 2px solid #7ca1c2;
    background: #102238;
    color: #f3f5f8;
    box-shadow: 0 12px 0 #07132080, 0 28px 80px #0007;
    overflow: auto;
}
.game-intro[open] { display: grid; grid-template-columns: 190px 1fr; gap: 30px; align-items: center; }
.game-intro::backdrop { background: #061426a8; backdrop-filter: blur(3px); }
.intro-owl { width: 100%; height: auto; align-self: end; }
.intro-copy small { color: #b8d5ed; letter-spacing: .12em; font-size: 11px; }
.intro-copy h2 { margin: 12px 0 18px; font-size: clamp(24px, 3vw, 34px); line-height: 1.12; }
.intro-copy p { font-size: 16px; line-height: 1.55; color: #e0e8ef; }
.intro-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.intro-actions button { padding: 13px 17px; border: 1px solid #7e98af; background: #152d45; color: #edf4fa; font-weight: 700; cursor: pointer; }
.intro-actions [data-intro-start] { background: #0033ff; border-color: #7290ff; color: white; }
.intro-actions button:hover { filter: brightness(1.15); }
.intro-actions button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.owl-portrait { overflow: hidden; }
.owl-portrait .owl-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    opacity: 0;
}
.owl-portrait .owl-neutral { opacity: 1; }
.owl-portrait.owl-ready[data-expression="interest"] .owl-neutral,
.owl-portrait.owl-ready[data-expression="discovery"] .owl-neutral { opacity: 0; }
.owl-portrait.owl-ready[data-expression="interest"] .owl-interest,
.owl-portrait.owl-ready[data-expression="discovery"] .owl-discovery { opacity: 1; }
.owl-portrait.owl-ready[data-expression="neutral"] .owl-neutral {
    animation: guide-neutral 5.6s steps(1,end) infinite;
}
.owl-portrait.owl-ready[data-expression="neutral"] .owl-blink {
    animation: guide-blink 5.6s steps(1,end) infinite;
}
@keyframes guide-neutral {
    0%,52.5%,100% { opacity: 1; }
    50% { opacity: 0; }
}
@keyframes guide-blink {
    0%,52.5%,100% { opacity: 0; }
    50% { opacity: 1; }
}
/* Speech owns the portrait until the line ends; hover cannot interrupt it. */
.is-typing .owl-portrait.owl-ready .owl-frame { animation: none; opacity: 0; }
.is-typing[data-mouth="closed"] .owl-portrait.owl-ready .owl-neutral,
.is-typing[data-mouth="half"] .owl-portrait.owl-ready .owl-half,
.is-typing[data-mouth="open"] .owl-portrait.owl-ready .owl-open { opacity: 1; }
body[data-guided-room="employee"] #scene[data-room="employee"] .usb-room-link[data-situation="ransomware"] {
    outline: 3px solid #0033ff;
    outline-offset: 3px;
    background: #0033ff20;
    animation: first-workstation 1.8s ease-in-out infinite;
}
@keyframes first-workstation { 50% { outline-color: #dcecff; background: #0033ff38; } }
@media (max-width: 700px) {
    .game-intro { padding: 24px; }
    .game-intro[open] { grid-template-columns: 100px 1fr; gap: 18px; }
    .intro-owl { align-self: start; margin-top: 30px; }
    .intro-actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    .owl-portrait .owl-frame { animation: none !important; }
    body[data-guided-room] .usb-room-link { animation: none !important; }
}