/* ALIBI — game-scoped layout. Site chrome intentionally excluded. */
:root {
  --bg:#071426; --bg2:#0a1930; --panel:#10243b; --surface:#192c42; --surface2:#243950;
  --text:#f8f2e7; --soft:#cbd3dd; --muted:#91a4bc; --border:#354c64;
  --gold:#f2bf63; --red:#e65550; --blue:#2176d4; --blue2:#1164c0;
  --truth:#2da66a; --lie:#d75b54; --neutral:#75869c;
  --shadow: 0 12px 30px rgba(0,0,0,.18);
  color-scheme:dark;
}
html[data-theme="light"] {
  --bg:#f6f1e9; --bg2:#fffaf2; --panel:#fffaf2; --surface:#f1e8db; --surface2:#e6ddce;
  --text:#231f22; --soft:#3d3b3b; --muted:#6f6d69; --border:#d2c8b8;
  --gold:#9d630b; --red:#b83a39; --blue:#1366c4; --blue2:#09529e;
  --truth:#1d8153; --lie:#ad403f; --neutral:#69737d;
  --shadow:0 10px 25px rgba(45,37,27,.08);
  color-scheme:light;
}
* {box-sizing:border-box}
html {scroll-behavior:smooth}
body {min-width:280px;margin:0;font:16px/1.43 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background-color:var(--bg);background-image:linear-gradient(90deg,#03102255,#05152b55),url("assets/ul-dark-wallpaper.webp");background-size:cover;background-position:center top;background-attachment:fixed;color:var(--text)}
html[data-theme="light"] body {background-image:linear-gradient(#f9f5eecc,#f5efe6dd),url("assets/ul-dark-wallpaper.webp")}
button {font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible {outline:3px solid var(--gold);outline-offset:3px}
button:disabled {cursor:not-allowed}
.hidden {display:none!important}
.game-container {width:min(calc(100% - 30px),1150px);margin:auto;padding:12px 0 45px}
.game-header {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px 2px 12px;border-bottom:1px solid var(--border)}
.game-logo {width:clamp(140px,25vw,205px);max-height:83px;object-fit:contain;object-position:left center;filter:drop-shadow(0 4px 5px #0005)}
.header-actions {display:flex;align-items:center;gap:8px}
.icon-toggle {min-width:44px;height:44px;padding:5px 9px;border:1px solid var(--border);border-radius:13px;background:var(--panel);color:var(--text);font-size:1.45rem}
.icon-toggle:hover {border-color:var(--gold)}
.case-hero {margin:14px 0 10px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(115deg,var(--panel) 5%,var(--bg2));position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 180px;min-height:172px;box-shadow:var(--shadow)}
.hero-copy {padding:19px 10px 19px clamp(18px,3vw,30px);position:relative;z-index:2}
.hero-meta {display:flex;align-items:center;gap:11px;font-size:.68rem;font-weight:900;letter-spacing:.1em;color:var(--gold)}
.hero-dot {color:var(--muted);font-size:1.3rem}
.difficulty {color:var(--gold);letter-spacing:.05em;font-size:1.1rem}
.case-hero h1 {font:800 clamp(1.65rem,3.3vw,2.7rem)/1.05 Georgia,"Times New Roman",serif;margin:6px 0 12px;letter-spacing:-.02em}
.hero-description {font-size:.96rem;line-height:1.44;max-width:680px;color:var(--soft);margin:0}
.hero-portrait {position:relative;display:flex;justify-content:center;align-items:end;overflow:hidden}
.hero-circle {position:absolute;inset:12px 10px -90px 0;border-radius:50%;background:radial-gradient(ellipse,#c08b4b42,#050d1d11 70%)}
.hero-portrait img {position:relative;width:min(215px,125%);height:auto;max-width:none;max-height:218px;object-fit:contain;object-position:center bottom;margin-bottom:-21px;filter:drop-shadow(0 10px 13px #0004)}
.rules-panel {display:flex;align-items:start;gap:20px;background:var(--panel);border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:14px;padding:13px 18px;margin-bottom:21px}
.section-eyebrow {font-size:.7rem;letter-spacing:.1em;font-weight:900;color:var(--gold);white-space:nowrap;padding-top:3px}
.rules-panel ul {margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px 18px}
.rules-panel li {font-size:.88rem;color:var(--text);font-weight:650}
.rules-panel li::before {content:'•';margin-right:8px;color:var(--gold)}
.game-layout {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(290px, .85fr);gap:20px;align-items:start}
.section-line {display:flex;align-items:baseline;justify-content:space-between;margin:0 0 12px;gap:8px}
.section-line h2,.accusation-panel h2 {font:750 1.35rem/1.1 Georgia,serif;margin:0}
.meta-tiny {font-size:.8rem;color:var(--muted)}
.suspects-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.suspect-card {display:flex;align-items:center;gap:13px;min-width:0;min-height:143px;padding:12px 14px;border-radius:15px;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow)}
.suspect-card.truth {border-left:4px solid var(--truth)}
.suspect-card.lie {border-left:4px solid var(--lie)}
.portrait-frame {flex:0 0 90px;width:90px;height:115px;align-self:stretch;overflow:hidden;border-radius:12px;background:radial-gradient(ellipse at center,var(--surface2),var(--surface));display:flex;justify-content:center;align-items:end}
.portrait-frame img {width:100%;height:100%;object-fit:contain;object-position:center bottom}
.suspect-body {min-width:0;flex:1}
.suspect-name {font-size:1rem;font-weight:850;margin:0 0 5px}
.statement-text {font-size:.88rem;line-height:1.35;margin:0 0 8px;color:var(--soft);overflow-wrap:break-word}
.statement-text::before {content:'“'} .statement-text::after {content:'”'}
.mark-controls {display:flex;align-items:center;gap:6px}
.mark-button {width:39px;height:39px;display:grid;place-items:center;border:1px solid var(--border);border-radius:11px;background:var(--surface);font-size:1.24rem;font-weight:900;color:var(--muted);padding:0}
.mark-button:hover {border-color:var(--gold)}
.mark-button.selected {color:#fff;box-shadow:inset 0 -2px 0 #0004,0 0 0 2px var(--bg)}
.mark-button.truth.selected {background:var(--truth);border-color:var(--truth)}
.mark-button.lie.selected {background:var(--lie);border-color:var(--lie)}
.mark-button.unknown.selected {background:var(--neutral);border-color:var(--neutral)}
.game-side {display:grid;gap:12px;position:sticky;top:15px}
.accusation-panel,.hint-panel {background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:17px;box-shadow:var(--shadow)}
.accusation-panel h2 {font-size:1.28rem}
.objective-prompt {font-weight:650;color:var(--soft);font-size:.92rem;margin:10px 0 12px}
.answer-choices {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.answer-choice {display:flex;gap:7px;align-items:center;text-align:left;min-width:0;min-height:47px;padding:5px 7px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-size:.83rem;font-weight:750}
.answer-choice[aria-pressed="true"] {border:2px solid var(--blue);background:var(--surface2);padding:4px 6px}
.answer-thumb {width:32px;height:35px;flex:0 0 32px;border-radius:7px;background:var(--surface2);overflow:hidden;display:grid;align-items:end}
.answer-thumb img {width:100%;height:100%;object-fit:contain;object-position:bottom center}
.primary-button,.secondary-button {width:100%;min-height:46px;padding:10px 15px;border-radius:12px;font-weight:850;letter-spacing:.018em;font-size:.89rem}
.primary-button {background:linear-gradient(170deg,#338ee6,var(--blue2));color:white;border:1px solid #438ed8;margin-top:12px;box-shadow:0 4px 9px #03102044}
.primary-button:disabled {opacity:.5}
.primary-button:not(:disabled):hover {filter:brightness(1.12)}
.secondary-button {border:1px solid var(--border);color:var(--text);background:var(--surface)}
.secondary-button:hover:not(:disabled) {border-color:var(--gold)}
.secondary-button:disabled {opacity:.48}
.feedback {font-size:.83rem;min-height:18px;margin:6px 0;color:var(--gold)}
.game-totals {display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--border);padding-top:11px;color:var(--muted);font-size:.79rem;margin-top:8px}
.hint-top {display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.hint-top h2 {font-size:1rem;margin:0}
.hint-wallet {min-width:42px;border-radius:20px;text-align:center;font-weight:900;color:var(--gold);border:1px solid var(--border);background:var(--surface);padding:3px 10px}
.hint-list {display:grid;gap:8px}
.hint-item {font-size:.84rem;border-left:2px solid var(--gold);padding:8px 10px;background:var(--surface);border-radius:0 9px 9px 0}
.refill-button {margin-top:8px}
.tiny-note {font-size:.74rem;color:var(--muted);min-height:0;margin:5px 0 0}
/* A large, uncluttered conclusion screen instead of a wall of small text. */
.result-panel {margin:22px auto 0;max-width:740px;border-radius:18px;border:1px solid var(--border);background:linear-gradient(120deg,var(--panel),var(--bg2));padding:clamp(20px,4vw,40px);box-shadow:var(--shadow);text-align:center}
.stamp {display:inline-block;color:var(--truth);border:2px solid var(--truth);border-radius:8px;padding:5px 13px;font-weight:950;letter-spacing:.09em;transform:rotate(-4deg)}
.result-panel h2 {font:800 clamp(1.9rem,5vw,3rem)/1.12 Georgia,serif;margin:17px 0}
.result-person {width:130px;height:142px;border:3px solid var(--gold);box-shadow:0 7px 20px #0005;border-radius:18px;overflow:hidden;margin:0 auto;position:relative;background:var(--surface)}
.result-person img {width:100%;height:100%;object-fit:contain;object-position:bottom center}
.result-person strong {position:absolute;bottom:0;left:0;right:0;background:#061426d9;color:#fff;font-size:.85rem;padding:3px}
.result-description {color:var(--soft);font-weight:650}
.perfect-label {color:var(--gold);font-weight:950;letter-spacing:.04em}
.result-stats {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}
.result-stats>div {background:var(--surface);border-radius:12px;padding:10px 5px}
.result-stats span {display:block;font-size:.62rem;color:var(--muted);letter-spacing:.08em;font-weight:800}
.result-stats strong {font-size:1.2rem}
.result-buttons {display:grid;grid-template-columns:1fr 1fr;gap:10px}
.result-buttons .primary-button {margin:0}
.explanation {background:var(--surface);border-radius:12px;margin-top:12px;text-align:left;padding:12px 18px;font-size:.9rem}
.explanation ol {margin:0;padding-left:20px}
.explanation li {margin:8px 0;line-height:1.45}
.result-tail {display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:10px}
.link-button {background:transparent;border:none;text-decoration:underline;color:var(--soft);font-size:.82rem;min-height:44px;padding:10px}
.unavailable-state {margin:30px auto;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:28px;max-width:700px}
.unavailable-state h1 {font:800 1.9rem Georgia,serif}
.unavailable-state p {color:var(--soft)}
@media(max-width:1050px) {.game-layout {grid-template-columns:minmax(0,1fr) 315px}.suspects-list {grid-template-columns:1fr}.suspect-card {min-height:109px}.portrait-frame {height:89px;width:77px;flex-basis:77px}}
@media(max-width:720px) {body {background-attachment:scroll}.game-container {width:calc(100% - 24px);padding-bottom:24px}.game-layout {grid-template-columns:1fr}.game-side {position:static}.suspects-list {grid-template-columns:1fr}.case-hero {grid-template-columns:minmax(0,1fr) 115px;min-height:155px}.hero-copy {padding:15px 5px 15px 17px}.hero-description {font-size:.87rem}.hero-portrait img {width:145px;margin-bottom:-10px}.hero-circle {inset:0 -20px -30px -10px}.rules-panel {display:block;padding:11px 15px}.rules-panel ul {gap:5px;flex-direction:column;margin-top:5px}.rules-panel li {font-size:.86rem}.section-line h2 {font-size:1.25rem}.game-logo {width:155px}}
@media(max-width:395px) {.game-container {width:calc(100% - 18px)}.case-hero {grid-template-columns:minmax(0,1fr) 95px}.hero-portrait img {width:120px}.case-hero h1 {font-size:1.56rem}.hero-description {font-size:.81rem}.suspect-card {padding:11px}.portrait-frame {width:75px;flex-basis:75px;height:95px}.mark-button {width:39px;height:39px}.mark-controls {gap:6px}.result-buttons {grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce) {html{scroll-behavior:auto}*{transition:none!important}}

/* Alibi v0.4 — calendar, local-midnight release and game-specific hint economy. */
.calendar-trigger {display:flex;align-items:center;gap:7px;min-height:44px;padding:5px 11px;border:1px solid var(--border);border-radius:13px;background:var(--panel);color:var(--text);font-weight:750;font-size:.89rem}
.calendar-trigger span:first-child {font-size:1.35rem;line-height:1}
.calendar-trigger:hover {border-color:var(--gold)}
.next-case-countdown {margin:12px auto 18px;max-width:360px;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;border-radius:12px;border:1px solid var(--border);padding:10px;background:var(--surface);color:var(--soft);font-size:.87rem}
.next-case-countdown strong {font-size:1.24rem;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:.065em}
.calendar-backdrop {position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;overflow:auto;background:#030914d6;padding:clamp(10px,3vw,28px)}
.calendar-dialog {width:min(100%,465px);max-height:calc(100vh - 24px);overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:20px;box-shadow:0 18px 65px #0009;color:var(--text);padding:20px}
.calendar-title-row,.calendar-navigation,.calendar-bottom {display:flex;align-items:center;justify-content:space-between;gap:12px}
.calendar-title-row h2 {margin:0;font:800 1.5rem/1.2 Georgia,serif}
.calendar-navigation {margin:15px 0 8px}
.calendar-navigation strong {font-size:1.08rem}
.calendar-navigation button {font-size:1.75rem;line-height:1}
.calendar-weekdays,.calendar-days {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;text-align:center}
.calendar-weekdays {margin:11px 0 6px;font-size:.7rem;letter-spacing:.05em;font-weight:900;color:var(--muted)}
.calendar-day {position:relative;min-height:51px;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);padding:4px 1px}
.calendar-day .day-number {font-weight:850;line-height:1.2}
.calendar-day .day-symbol {font-size:.7rem;line-height:1.15;min-height:11px;color:var(--soft)}
.calendar-day.available:hover {border-color:var(--gold);background:var(--surface2)}
.calendar-day.today {outline:2px solid var(--gold);outline-offset:-2px}
.calendar-day.current {background:var(--surface2);border-color:var(--blue)}
.calendar-day.solved .day-symbol {color:var(--truth)}
.calendar-day.unavailable {opacity:.42;cursor:not-allowed;color:var(--muted);background:var(--surface)}
.calendar-day.blank {border-color:transparent;background:transparent;pointer-events:none}
.calendar-legend {display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:14px 0;font-size:.71rem;color:var(--muted)}
.calendar-bottom {border-top:1px solid var(--border);padding-top:13px;align-items:center}
.calendar-bottom .secondary-button {width:auto;min-width:124px;margin:0}

.unavailable-state .secondary-button {max-width:250px}
body.alibi-calendar-open {overflow:hidden}
@media(max-width:420px) {
 .calendar-dialog {padding:14px;border-radius:15px}
 .calendar-day {min-height:46px;font-size:.85rem}
 .calendar-weekdays,.calendar-days {gap:3px}
 .calendar-legend {gap:8px;font-size:.66rem}
 .calendar-trigger {padding:5px 9px}
 .calendar-bottom {flex-wrap:wrap}

}

@media(max-width:420px) {
 .game-header {gap:8px}
 .game-logo {width:128px}
 .header-actions {gap:5px}
 .calendar-trigger {width:44px;min-width:44px;justify-content:center;padding:5px}
 .calendar-trigger span:last-child {display:none}
}
@media(max-width:320px) {.game-logo {width:116px}}