/* ============================================================
   Game: pencil grid, pen marks, drawn keys, turn sticky, hand-off
   ============================================================ */
.turn-pill-bar { display: flex; justify-content: flex-start; padding: 8px 0 2px 60px; flex-shrink: 0; }
.turn-pill {
    --tilt: -2deg;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: var(--paper-2);
    box-shadow: var(--shadow-note);
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--ink-2);
    transform: rotate(var(--tilt));
    transition: background var(--dur) var(--ease-smooth), color var(--dur) var(--ease-smooth);
}
.turn-pill:empty { display: none; }
.turn-pill.my-turn { background: var(--sticky-yellow); color: var(--ink); animation: stickOn 0.45s var(--ease-spring); }
.turn-pill.game-over { background: var(--sticky-pink); color: var(--ink); }

/* Board */
.board-area { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px 20px 6px 50px; container-type: size; }
.board { position: relative; height: min(100cqh, calc(100cqw * 6 / 5)); max-height: 400px; aspect-ratio: 5 / 6; transform: rotate(-1deg); }
@supports not (height: 100cqh) { .board { height: 100%; } }
.board.pass-out { animation: noteOut 0.45s var(--ease-smooth) both; }
.board.pass-in { animation: noteIn 0.5s var(--ease-spring) both; }
.grid { display: grid; grid-template-rows: repeat(6, 1fr); grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; height: 100%; }

.cell {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-hand);
    font-size: clamp(1.6rem, 5vh, 2.6rem);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    border: 1.5px dashed var(--pencil);
    border-radius: 3px;
    color: var(--ink-me);
    user-select: none;
    -webkit-user-select: none;
}
.cell.ink-them { color: var(--ink-them); }
.cell.filled { border-color: rgba(43, 43, 43, 0.5); }
.cell.typing-preview { color: var(--ink-them); opacity: 0.75; animation: typingPulse 1s infinite; }

/* Pen marks. Highlighter sits under the letter, ring and strike on top. */
.cell.present::before {
    content: '';
    position: absolute;
    left: 10%; right: 8%; top: 28%; height: 44%;
    background: var(--highlighter);
    transform: skewX(-8deg);
    transform-origin: left center;
    z-index: -1;
}
.cell.absent { color: var(--ink-3); }
.cell.absent::after {
    content: '';
    position: absolute;
    left: 12%; right: 12%; top: 50%; height: 2.5px;
    background: var(--ink);
    transform: rotate(-8deg);
    transform-origin: left center;
}
.cell .ring { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); overflow: visible; pointer-events: none; }
.cell .ring path { fill: none; stroke: var(--pen-red); stroke-width: 2.6; stroke-linecap: round; }

/* Drawn-in marks on a fresh reveal */
.cell.reveal.present::before { animation: highlight 0.35s var(--ease-smooth) both; animation-delay: var(--delay, 0ms); }
.cell.reveal.absent::after { animation: strike 0.3s var(--ease-smooth) both; animation-delay: var(--delay, 0ms); }
.cell.reveal .ring path { stroke-dasharray: 220; stroke-dashoffset: 220; animation: drawRing 0.5s var(--ease-smooth) forwards; animation-delay: var(--delay, 0ms); }
.cell.reveal { animation: inkSettle 0.35s var(--ease-smooth) both; animation-delay: var(--delay, 0ms); }

/* Toast: a small pink sticky over the board */
.toast { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 20; pointer-events: none; max-width: 100%; }
.toast #message-display {
    display: inline-block;
    max-width: 88vw;
    padding: 6px 14px;
    background: var(--sticky-pink);
    box-shadow: var(--shadow-note);
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--ink);
    opacity: 0;
    transform: rotate(-2deg) scale(0.9);
    transition: opacity var(--dur) var(--ease-smooth), transform var(--dur) var(--ease-spring);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.toast #message-display.visible { opacity: 1; transform: rotate(-2deg) scale(1); }
.toast #message-display.success { background: var(--sticky-green); }
.toast #message-display.error { background: var(--sticky-pink); color: var(--pen-red); }
.toast #message-display.warning { background: var(--sticky-yellow); }

/* Hand-off: the note is folded and passed */
.turn-silhouette {
    position: absolute;
    inset: -12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(251, 246, 233, 0.86);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-slow) var(--ease-smooth);
    z-index: 15;
}
.turn-silhouette.active { opacity: 1; pointer-events: auto; }
.turn-silhouette-title { font-family: var(--font-hand); font-weight: 700; font-size: 2rem; color: var(--ink-me); margin-bottom: 8px; transform: rotate(-2deg); }
.turn-silhouette.active .turn-silhouette-title { animation: stickOn 0.5s var(--ease-spring); }
.turn-silhouette-subtitle { font-size: 1.15rem; color: var(--ink-2); line-height: 1.4; }
.turn-silhouette-word { font-family: var(--font-hand); font-weight: 700; color: var(--ink-them); letter-spacing: 0.15em; }
.turn-silhouette .plane { display: block; margin: 0 auto 10px; width: 56px; height: 56px; }
.turn-silhouette.active .plane { animation: planeGlide 1.6s var(--ease-smooth) infinite; }

/* Handwritten margin hints (ui/hints.js) */
.hint {
    position: absolute;
    z-index: 25;
    max-width: 190px;
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.05;
    color: var(--ink-them);
    pointer-events: none;
    transform: rotate(-4deg);
    text-shadow: 0 0 6px var(--paper), 0 0 10px var(--paper), 0 0 14px var(--paper);
    animation: hintIn 0.45s var(--ease-spring) both;
}
.hint.leaving { animation: hintOut 0.3s var(--ease-smooth) both; }
.hint { display: flex; align-items: flex-start; gap: 6px; white-space: nowrap; max-width: none; }
.hint .arrow { display: inline-block; font-size: 1.3em; line-height: 0.8; }
.hint.text-left { text-align: right; }
.keyboard { position: relative; }
@keyframes hintIn { 0% { opacity: 0; transform: rotate(-4deg) translateY(8px) scale(0.9); } 60% { opacity: 1; transform: rotate(-4deg) translateY(-2px) scale(1.04); } 100% { opacity: 1; transform: rotate(-4deg) translateY(0) scale(1); } }
@keyframes hintOut { to { opacity: 0; transform: rotate(-4deg) translateY(-6px); } }

/* Drawn keys */
.keyboard { flex-shrink: 0; width: 100%; padding: 6px 10px calc(10px + var(--safe-bottom)); user-select: none; -webkit-user-select: none; transition: opacity var(--dur) var(--ease-smooth); }
.keyboard.hidden { opacity: 0.35; pointer-events: none; }
.keyboard-row { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; }
.keyboard-row:last-child { margin-bottom: 0; }
.key {
    flex: 1 1 0;
    min-width: 0;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.6px solid var(--ink);
    border-radius: var(--sketch-radius);
    background: var(--paper-2);
    box-shadow: var(--shadow-key);
    font-family: var(--font-body);
    font-size: 1.45rem;
    text-transform: lowercase;
    color: var(--ink);
    transition: transform var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth), background var(--dur) var(--ease-smooth), color var(--dur) var(--ease-smooth);
}
.key:active, .key.pressed { transform: translate(1.5px, 2px); box-shadow: none; background: var(--paper-3); }
.key.wide { flex: 1.7 1 0; font-size: 1.05rem; white-space: nowrap; text-transform: none; }
.key svg { width: 22px; height: 22px; }
.key-spacer { flex: 0.5 1 0; }
.key.correct { border-color: var(--pen-red); border-width: 2.4px; box-shadow: 1.5px 2px 0 var(--pen-red); color: var(--pen-red); }
.key.present { background: var(--highlighter-solid); }
.key.absent { color: var(--ink-3); border-color: var(--ink-faint); box-shadow: none; text-decoration: line-through; background: transparent; }
.key.enter-key.ready { background: var(--sticky-yellow); animation: wobble 0.5s ease-in-out; }

/* Countdown: written in, one number at a time */
#countdown-screen.active { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 100dvh; text-align: center; }
.countdown-number { font-family: var(--font-hand); font-size: clamp(7rem, 46vw, 13rem); font-weight: 700; line-height: 1; color: var(--ink-me); animation: scribbleIn 0.7s var(--ease-spring); transform: rotate(-4deg); }
.countdown-number.go { color: var(--pen-red); }
.countdown-text { font-family: var(--font-hand); font-weight: 700; font-size: 2rem; margin-top: 14px; }
.countdown-mode { margin-top: 8px; color: var(--ink-2); font-size: 1.15rem; }

/* Paper confetti + stamp on a win (elements are created by ui/vfx.js) */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 900; overflow: hidden; }
.scrap { position: absolute; top: -20px; width: 14px; height: 18px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15); animation: scrapFall var(--fall, 2.2s) cubic-bezier(0.3, 0.6, 0.6, 1) forwards; }
.scribble-burst { position: absolute; width: 140px; height: 140px; pointer-events: none; z-index: 30; }
.scribble-burst path { fill: none; stroke: var(--pen-red); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: burstLine 0.45s var(--ease-out-expo) forwards; }

/* --- Animations ------------------------------------------------- */
@keyframes inkIn { 0% { transform: scale(0.55) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.12) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.cell.pop { animation: inkIn 160ms var(--ease-smooth); }
@keyframes inkSettle { 0% { transform: scale(1); } 40% { transform: scale(1.06) rotate(-1deg); } 100% { transform: scale(1); } }
@keyframes highlight { from { transform: skewX(-8deg) scaleX(0); } to { transform: skewX(-8deg) scaleX(1); } }
@keyframes strike { from { transform: rotate(-8deg) scaleX(0); } to { transform: rotate(-8deg) scaleX(1); } }
@keyframes drawRing { to { stroke-dashoffset: 0; } }
@keyframes shake { 0%, 100% { transform: rotate(0) translateX(0); } 20%, 60% { transform: rotate(-3deg) translateX(-5px); } 40%, 80% { transform: rotate(3deg) translateX(5px); } }
.cell.row-shake { animation: shake 450ms ease-in-out; }
@keyframes winBounce { 0%, 20% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-24px) rotate(-6deg); } 55% { transform: translateY(4px) rotate(3deg); } 70% { transform: translateY(-10px); } 100% { transform: translateY(0) rotate(0); } }
.cell.bounce { animation: winBounce 900ms var(--ease-out-expo); }
.cell.bounce-delay-0 { animation-delay: 0ms; } .cell.bounce-delay-1 { animation-delay: 90ms; } .cell.bounce-delay-2 { animation-delay: 180ms; } .cell.bounce-delay-3 { animation-delay: 270ms; } .cell.bounce-delay-4 { animation-delay: 360ms; }
@keyframes typingPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } }
@keyframes scribbleIn { 0% { transform: scale(0.4) rotate(-14deg); opacity: 0; } 55% { transform: scale(1.12) rotate(1deg); opacity: 1; } 100% { transform: scale(1) rotate(-4deg); } }
@keyframes noteOut { to { transform: translateX(120%) rotate(12deg); opacity: 0; } }
@keyframes noteIn { from { transform: translateX(-120%) rotate(-12deg); opacity: 0; } to { transform: translateX(0) rotate(-1deg); opacity: 1; } }
@keyframes planeGlide { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 50% { transform: translate(14px, -8px) rotate(4deg); } }
@keyframes scrapFall { 0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; } 100% { transform: translate3d(var(--drift, 0px), 105vh, 0) rotate(var(--spin, 540deg)); opacity: 0.9; } }
@keyframes burstLine { to { stroke-dashoffset: 0; } }

@media (min-width: 600px) {
    .board-area { padding: 14px 24px 14px 56px; }
    .keyboard { max-width: 520px; margin: 0 auto; }
    .key { height: 50px; }
}
@media (min-width: 1024px) {
    .board { max-height: 520px; }
    .board-area { padding: 10px 30px 20px 60px; }
    .turn-pill-bar { padding-top: 12px; }
}