/* Mode cards and Lexa share the game's existing surfaces and theme colors. */
:root { --stack-gap:20px; }
.game-page .top-bar { padding-block:var(--logo-inset); margin-bottom:var(--stack-gap); position:relative; top:auto; }
.game-page .game-left { gap:var(--stack-gap); }
.game-page .game-extras { margin-top:0; }
.game-page .game-toolbar { margin-top:var(--stack-gap); }
.mode-intro { display:grid; grid-template-columns:48px minmax(0,1fr) auto; grid-template-areas:"icon title share"; align-items:center; gap:16px; padding:18px 20px; margin:0; background:var(--bg-white); border:1px solid var(--gray-light); border-radius:var(--radius); box-shadow:var(--shadow-soft); }
.mode-intro-icon { grid-area:icon; }
.mode-intro-copy { grid-area:title; min-width:0; }
.mode-intro .social-share { grid-area:share; }
.mode-intro-icon,.mode-panel-icon { display:grid; place-items:center; flex:none; width:48px; height:48px; border-radius:14px; background:var(--mode-tint); color:var(--mode-accent); font-size:32px; font-weight:700; line-height:1; }
.mode-symbol { display:block; flex:none; width:28px; height:28px; }
.mode-panel-icon .mode-symbol { width:22px; height:22px; }
.mode-eyebrow { color:var(--mode-accent); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.mode-heading { display:flex; align-items:center; gap:12px; min-width:0; overflow-x:auto; scrollbar-width:thin; }
.mode-intro h1 { flex:none; font-size:25px; line-height:1.25; margin:2px 0 4px; white-space:nowrap; }
.mode-intro p:not(.mode-eyebrow) { color:var(--text-muted); font-size:13px; }
.mode-rules { display:flex; flex:none; flex-wrap:nowrap; gap:6px; justify-content:flex-start; }
.mode-rules span { padding:5px 9px; border:1px solid var(--gray-light); border-radius:8px; font-size:12px; color:var(--text-muted); white-space:nowrap; }
.mode-panels { display:flex; flex-direction:column; gap:20px; min-width:0; }
.mode-panel { min-width:0; border-radius:var(--radius); background:var(--bg-white); box-shadow:var(--shadow-md); overflow:hidden; }
.mode-panel > summary { list-style:none; display:flex; align-items:center; gap:10px; padding:18px; cursor:pointer; font-size:15px; font-weight:700; }
.mode-panel > summary::-webkit-details-marker { display:none; }
.mode-panel > summary::after { content:'⌄'; margin-left:auto; color:var(--text-muted); transition:transform .2s; }
.mode-panel[open] > summary::after { transform:rotate(180deg); }
.mode-panel summary small { display:block; color:var(--text-muted); font-size:11px; font-weight:400; margin-top:2px; }
.mode-panel-icon { width:36px; height:36px; border-radius:10px; font-size:23px; }
.mode-panel-body { padding:0 18px 18px; }
.mode-metrics,.daily-word-streaks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 12px; }
.mode-metrics > div,.daily-word-streaks > div { padding:12px; background:var(--bg-main); border:1px solid var(--gray-light); border-radius:10px; }
.mode-metrics dt,.daily-word-streaks dt { font-size:11px; color:var(--text-muted); }
.mode-metrics dd,.daily-word-streaks dd { font-size:30px; font-weight:800; line-height:1.4; color:var(--blue); }
.mode-panel-note,.marathon-leaderboard p { color:var(--text-muted); font-size:12px; line-height:1.6; }
.marathon-leaderboard { padding:0; }
.marathon-leaderboard h2 { font-size:14px; }
.marathon-leaderboard table { font-size:12px; width:100%; margin-top:12px; }
.marathon-leaderboard th { font-size:11px; color:var(--text-muted); font-weight:600; }
.marathon-leaderboard td:first-child { width:28px; font-weight:700; color:var(--blue); }
.marathon-leaderboard tr:nth-child(-n+3) td { background:var(--bg-main); }
.marathon-leaderboard th,.marathon-leaderboard td { padding:9px 5px; border-bottom:1px solid var(--gray-light); }
.daily-word-stats { max-width:none; border:0; border-radius:0; margin:0; padding:0; background:none; }
.daily-word-stats h2 { font-size:12px; color:var(--text-muted); font-weight:500; margin-bottom:10px; }
.daily-word-stats summary { font-size:13px; padding:10px 0; border-top:1px solid var(--gray-light); color:var(--blue); }
.daily-word-calendar li > :is(time,button) { min-height:40px; }
.daily-word-history-range { font-size:11px; margin-bottom:8px; }
.daily-word-legend { font-size:10px; }
#modePanelsMobileSlot:empty { display:none; }
.media-preferences { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.game-media-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
.game-media-controls label { display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-size:12px; }
.game-media-controls input,[data-mascot-animation],[data-game-sounds] { accent-color:var(--blue); }
.game-media-controls label:has(input:disabled) { opacity:.6; cursor:default; }
.mode-guide { margin-top:14px; padding-top:12px; border-top:1px solid var(--gray-light); text-align:left; }
.mode-guide summary { color:var(--blue); font-size:12px; font-weight:600; cursor:pointer; }
.mode-guide p { color:var(--text-muted); font-size:12px; line-height:1.65; margin-top:8px; }
.cup > .mode-guide { margin:0 0 20px; padding:14px 18px; background:var(--bg-card); border:1px solid var(--gray-light); border-radius:var(--radius); }
.rules-mode-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding:5px; margin-bottom:20px; border-radius:12px; background:var(--bg-main); }
.rules-mode-tabs button { min-width:0; padding:10px 5px; border:1px solid var(--mode-edge); border-radius:8px; font:inherit; font-size:12px; color:var(--mode-accent); background:var(--mode-tint); cursor:pointer; }
.rules-mode-tabs button[aria-selected="true"] { background:var(--mode-accent); border-color:var(--mode-accent); color:var(--mode-active-ink); font-weight:700; }
.rules-mode-tabs button:focus-visible { outline:2px solid var(--mode-accent); outline-offset:2px; }
.rules-mode-panel { padding:16px; border:1px solid var(--mode-edge); border-radius:12px; background:var(--mode-tint); }
.rules-mode-panel[hidden] { display:none; }
.rules-mode-panel h3 { font-size:18px; line-height:1.4; margin-bottom:10px; }
.rules-mode-panel p { color:var(--text-muted); }
.rules-mode-panel ol { padding-left:22px; margin:16px 0 20px; }
.rules-mode-panel li { padding-left:4px; margin:10px 0; }
.rules-mode-panel li::marker { color:var(--mode-accent); font-weight:700; }
#rulesModalBG { --rules-top:clamp(16px,5vh,48px); align-items:flex-start; padding-block:var(--rules-top) 16px; }
#rulesModal { padding:0; max-height:calc(100dvh - var(--rules-top) - 16px); }
#rulesModal .modal-body { min-height:0; scrollbar-gutter:stable; }
#rulesModal .modal-header { flex:none; padding:12px 16px; background:var(--mode-tint); border-color:var(--mode-edge); }
.game-page .modal { padding:0; }
.game-page .modal .modal-header { flex:none; gap:12px; padding:12px 16px; background:var(--mode-solo-tint); border-color:var(--mode-solo-edge); }
.game-page .modal .modal-header .modal-title { margin:0; min-width:0; font-family:inherit; font-size:22px; font-weight:700; line-height:1.25; }
.game-page #rulesModal .modal-header { background:var(--mode-tint); border-color:var(--mode-edge); }
.game-page .modal .modal-body { min-height:0; }
.auth-tabs { display:flex; gap:16px; padding:0; border:0; border-bottom:1px solid var(--gray-light); background:transparent; margin-bottom:24px; }
.auth-tabs .auth-tab { flex:1; min-width:0; min-height:46px; padding:10px 4px; border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; color:var(--text-muted); font-family:inherit; font-size:16px; font-weight:600; line-height:1.3; cursor:pointer; }
.auth-tabs .auth-tab.active { border-bottom-color:var(--mode-marathon-accent); background:transparent; color:var(--mode-marathon-accent); }
.auth-tabs .auth-tab:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.auth-form .auth-transfer { display:flex; align-items:flex-start; gap:10px; margin-top:18px; font-size:14px; line-height:1.5; cursor:pointer; }
.auth-transfer input { flex:none; width:18px; height:18px; margin-top:2px; }
@media (max-width:1024px) {
    #rulesModalBG { padding:0; }
    #rulesModal { max-height:none; }
    .game-page .modal .modal-header, .game-page #rulesModal .modal-header { padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left)); }
}

/* A vector character: eyes, ears, tail and expressions remain crisp at every size. */
.mascot-card { padding:14px 18px; }
.lexa { text-align:center; color:var(--text-main); }
.lexa-art { display:block; width:172px; height:auto; margin:0 auto; overflow:visible; }
.lexa-copy .mascot-name { font-size:17px; }
.lexa-copy p { font-size:12px; color:var(--text-muted); min-height:1.6em; margin-top:2px; }
.lexa-body,.lexa-head,.lexa-tail,.lexa-eyes { transform-box:fill-box; transform-origin:50% 90%; }
.lexa-pupils { transform:translate(var(--look-x,0px),var(--look-y,0px)); transition:transform .12s ease-out; }
.lexa-happy-eyes,.lexa-frown,.lexa-sparkles { display:none; }
.lexa[data-animated="true"] .lexa-body { animation:lexa-breathe 4s ease-in-out infinite; }
.lexa[data-animated="true"] .lexa-eyes { animation:lexa-blink 6s infinite; transform-origin:center; }
.lexa[data-emotion="thinking"] .lexa-head,.lexa[data-emotion="preparing"] .lexa-head,.lexa[data-emotion="hint"] .lexa-head { transform:rotate(-8deg); }
.lexa[data-emotion="typing"] .lexa-head { transform:rotate(4deg); }
.lexa[data-emotion="win"] .lexa-eyes,.lexa[data-emotion="progress"] .lexa-eyes { display:none; }
.lexa[data-emotion="win"] .lexa-happy-eyes,.lexa[data-emotion="progress"] .lexa-happy-eyes,.lexa[data-emotion="win"] .lexa-sparkles { display:block; }
.lexa[data-emotion="win"][data-animated="true"] .lexa-body { animation:lexa-celebrate .8s ease-in-out 3,lexa-breathe 4s 2.4s infinite; }
.lexa[data-emotion="win"][data-animated="true"] .lexa-tail { animation:lexa-wag .6s ease-in-out 4; }
.lexa[data-emotion="loss"] .lexa-frown,.lexa[data-emotion="retry"] .lexa-frown { display:block; }
.lexa[data-emotion="loss"] .lexa-smile,.lexa[data-emotion="retry"] .lexa-smile { display:none; }
.lexa[data-emotion="loss"] .lexa-head { transform:translateY(3px) rotate(-5deg); }
.lexa[data-animated="false"] * { animation:none!important; transition:none!important; }
.lexa[data-animated="false"] .lexa-pupils { transform:none; }
@keyframes lexa-breathe { 0%,100% {transform:translateY(0)} 50% {transform:translateY(-3px)} }
@keyframes lexa-blink { 0%,43%,47%,100% {transform:scaleY(1)} 45% {transform:scaleY(.1)} }
@keyframes lexa-celebrate { 0%,100% {transform:translateY(0)} 45% {transform:translateY(-9px) rotate(-3deg)} 70% {transform:translateY(-4px) rotate(3deg)} }
@keyframes lexa-wag { 0%,100% {transform:rotate(0)} 50% {transform:rotate(12deg)} }
@media (prefers-reduced-motion:reduce) { .lexa * { animation:none!important; transition:none!important; } }
@media (max-width:1200px) and (min-width:1025px) {
    :is(.marathon-mode,.daily-word-mode) .game-layout { grid-template-columns:200px minmax(0,1fr) 275px; gap:16px; }
}
@media (max-width:1024px) {
    :root { --stack-gap:10px; }
    .mode-intro { padding:12px; gap:10px; grid-template-columns:40px minmax(0,1fr) auto; }
    .mode-intro-icon { width:40px; height:40px; font-size:27px; }
    .mode-intro h1 { font-size:21px; }
    .mode-intro p:not(.mode-eyebrow) { font-size:12px; }
    .mode-rules span { padding:3px 7px; font-size:11px; }
    .game-right.mode-panels { display:flex!important; width:100%; gap:10px; }
    #modePanelsMobileSlot { margin:0 auto 20px; }
    .mode-panel > summary { padding:12px 14px; }
    .mode-panel-body { padding:0 14px 14px; }
    .game-left .mascot-card { display:block; grid-column:1 / -1; padding:5px 12px; box-shadow:var(--shadow-soft); }
    .mascot-card .lexa { display:flex; align-items:center; text-align:left; gap:10px; }
    .mascot-card .lexa-art { width:68px; margin:0; flex:none; }
    .lexa-copy .mascot-name { font-size:14px; }
    .lexa-copy p { font-size:11px; }
}

@media (max-width:640px) {
    .mode-intro { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"eyebrow share" "heading heading"; gap:6px 10px; }
    .mode-intro-icon { display:none; }
    .mode-intro-copy { display:contents; }
    .mode-intro-copy > .mode-eyebrow { grid-area:eyebrow; }
    .mode-heading { grid-area:heading; gap:8px; }
    .mode-intro h1 { font-size:18px; margin:0; }
    .mode-rules { gap:4px; }
    .mode-rules span { padding:0; border:0; font-size:11px; }
    .mode-rules span + span::before { content:'·'; margin-inline-end:4px; }
}
@media (max-width:360px) {
    .mode-intro h1 { font-size:17px; }
    .mode-heading { gap:6px; }
    .mode-rules { gap:3px; }
    .mode-rules span + span::before { margin-inline-end:3px; }
}

/* A staggered card fan lives in the actual board; no extra grid or popup. */
.word-selecting { position:relative; }
.word-selecting > .grid-row { pointer-events:none; perspective:850px; }
.word-selection-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.selection-card { position:relative; transform-style:preserve-3d; transition:none!important; }
.selection-card::after { content:''; position:absolute; inset:-1px; border:2px solid #60a5fa; border-radius:inherit; backface-visibility:hidden; transform:rotateY(180deg) translateZ(1px); background-color:#2563eb; background-image:linear-gradient(rgb(255 255 255 / 13%) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / 13%) 1px,transparent 1px); background-size:12px 12px; box-shadow:inset 0 0 0 4px rgb(255 255 255 / 10%); }
.cup-grid.word-selecting { perspective:850px; }
.cup-preparing #cup-opponents,.cup-preparing #cup-guess-form,.cup-preparing #cup-suggestions { display:none!important; }
@media (max-width:480px) {
    .mode-eyebrow { font-size:9px; }
    .media-preferences { grid-template-columns:1fr; gap:10px; }
    .rules-mode-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .rules-mode-tabs button { min-height:44px; font-size:13px; }
    .rules-mode-panel { font-size:14px; }
}