/* Shared styles for the "lingo" games (Mall Rat, Teacher's Lounge, Corporate Speak). */
.game-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 12px 0 24px; }
#stage { position: relative; width: min(100%, 420px); aspect-ratio: 9 / 16; max-height: calc(100dvh - 160px); background: #0b0a14; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 3px var(--line-2), 0 10px 30px rgba(0,0,0,0.35); touch-action: none; user-select: none; -webkit-user-select: none; }
#stage.shake { animation: shake .45s; }
@keyframes shake { 0%, 100% { transform: translate(0,0); } 10% { transform: translate(-8px, 4px); } 30% { transform: translate(7px, -5px); } 50% { transform: translate(-6px, -3px); } 70% { transform: translate(5px, 4px); } 90% { transform: translate(-3px, 1px); } }
#c { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
#ov { position: absolute; left: 4%; right: 4%; top: 12%; display: flex; flex-direction: column; gap: 8px; z-index: 3; }
#ov.hidden, #chud.hidden, #toast.hidden { display: none; }
.bub { background: #fffdf6; color: #1a1020; border-radius: 12px; padding: 10px 12px; box-shadow: 0 6px 20px rgba(0,0,0,.45); position: relative; }
.bub::after { content: ''; position: absolute; left: 24px; bottom: -10px; border: 10px solid transparent; border-top-color: #fffdf6; border-bottom: 0; }
.bub .who { font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--tag, #c0186c); letter-spacing: 1px; }
.bub p { margin: 6px 0 0; font: 500 16px 'IBM Plex Sans', sans-serif; line-height: 1.3; }
.ask { font-family: 'Press Start 2P', monospace; font-size: 8px; color: #fff; text-shadow: 0 2px 0 #000; letter-spacing: 1px; margin-top: 8px; }
.opts { display: flex; flex-direction: column; gap: 6px; }
.opts button { text-align: left; background: rgba(12, 10, 24, .92); color: #fff; border: 2px solid #5a5470; border-radius: 8px; padding: 8px 10px; font: 500 13px 'IBM Plex Sans', sans-serif; line-height: 1.25; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.opts button b { font-family: 'Press Start 2P', monospace; font-size: 8px; color: #ffd84a; flex: 0 0 auto; }
.opts button:hover:not(:disabled) { border-color: #ffd84a; }
.opts button:disabled { cursor: default; opacity: .6; }
.opts button.ok { border-color: #3cae4f; background: #123a1c; opacity: 1; }
.opts button.bad { border-color: #ff5fa0; background: #3a1020; opacity: 1; }
.tb { height: 6px; background: rgba(0,0,0,.5); border-radius: 3px; overflow: hidden; }
.tb i { display: block; height: 100%; width: 100%; background: #ffd84a; }
.tb i.low { background: #ff5fa0; }
#chud { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; background: radial-gradient(rgba(214,45,48,.35), rgba(0,0,0,.2)); }
#chud span { font-family: 'Press Start 2P', monospace; font-size: 52px; text-align: center; line-height: 1.25; color: #fff; -webkit-text-stroke: 3px #d62d30; text-shadow: 0 6px 0 #5a0b0c, 0 0 30px #ff2a2a; letter-spacing: 4px; animation: pop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 100% { transform: scale(1) rotate(-4deg); opacity: 1; } }
#toast { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); z-index: 3; font-family: 'Press Start 2P', monospace; font-size: 11px; color: #fff; background: rgba(12, 10, 24, .9); padding: 8px 12px; border-radius: 8px; border: 2px solid #ffd84a; white-space: nowrap; pointer-events: none; }
#toast.bad { border-color: #ff5fa0; }
.ctl { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.help { font-size: 13px; color: var(--muted); max-width: 46em; text-align: center; margin: 0; }
kbd { font-family: 'IBM Plex Mono', monospace; font-size: 12px; padding: 1px 6px; border: 2px solid var(--line); border-bottom-width: 3px; border-radius: 4px; }
.scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; width: min(100%, 420px); }
#lb:empty { display: none; }
.gen { width: min(100%, 560px); background: var(--panel-2); border-radius: 8px; box-shadow: inset 0 0 0 3px var(--line-2); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.gen h2 { margin: 0; font-family: Syne, sans-serif; font-weight: 800; font-size: 22px; }
.gen .out { font: 600 20px/1.3 'IBM Plex Sans', sans-serif; min-height: 1.3em; }
.gen .mean { font-size: 14px; color: var(--ink-2); min-height: 1.4em; }
@media (max-width: 480px) { .game-wrap { padding-top: 0; } #stage { border-radius: 0; width: 100vw; margin-inline: calc(50% - 50vw); max-height: calc(100dvh - 120px); } }
@media (display-mode: standalone) { .hud, footer, .help { display: none; } }