/* Flat, dark layout. The logo and small headings are rasterized from supplied artwork/fonts. */
:root { --bg:#111111; --panel:#171717; --line:#414141; --text:#f6f6f6; --muted:#a9a9a9; --blue:#0875b8; --gold:#e8bb52; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scrollbar-gutter:stable; }
body { background:var(--bg); color:var(--text); font:15px/1.45 Arial,Helvetica,sans-serif; margin:0; padding:0 0 88px; }
button,input { font:inherit; }
button { cursor:pointer; color:#f5f5f5; background:#242424; border:1px solid #525252; border-radius:2px; padding:8px 14px; }
button:disabled { opacity:.5; cursor:not-allowed; }
button:hover:not(:disabled) { background:#333; }
a { color:#bde4ff; }
.muted { color:var(--muted); }
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; }
.topbar { border-bottom:1px solid #383838; background:#111; }
.topbar-inner { width:min(100% - 20px,740px); margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:112px; gap:8px; }
.header-group { display:flex; align-items:center; gap:6px; }
.header-right { justify-content:end; }
.header-button { border:0; background:transparent; font-size:23px; line-height:1; padding:0; display:grid; place-items:center; width:35px; height:38px; border-radius:0; }
.header-button:hover,.header-button[aria-expanded=true] { color:var(--gold); background:transparent !important; }
.header-button:last-child { font-size:22px; }
.site-logo { margin:4px 0 0; text-align:center; line-height:0; }
.site-logo img { width:clamp(155px,24vw,213px); max-width:100%; height:auto; vertical-align:middle; }
.container { max-width:640px; padding:16px 14px 28px; margin:auto; }
.mode-switch { display:flex; justify-content:center; gap:8px; margin:0 0 8px; }
.mode-switch button { background:transparent; color:var(--muted); border:0; border-bottom:2px solid transparent; border-radius:0; padding:6px 12px; }
.mode-switch button[aria-pressed=true] { color:#fff; border-bottom-color:var(--blue); }
.mode-switch button:hover:not(:disabled) { color:#fff; background:transparent; }
.mode-heading-row { text-align:center; color:var(--muted); font-size:12px; }
.mode-heading-row h2 { font-size:14px; margin:0 0 3px; font-weight:normal; }
.mode-heading-row p { margin:0; }
.game-area { min-height:480px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:52px 0 18px; }
.game-top { text-align:center; width:100%; }
.clip-text { margin:0 0 8px; color:#ededed; }
.game-top p { margin:4px 0; }
.source-text { font-size:12px; }
.clip-action { margin-top:15px; padding:8px 20px; border:1px solid var(--line); background:#222; }
.guess-panel { width:100%; }
.guess-history { padding:0; list-style:none; margin:0 0 14px; }
.guess-history li { border:1px solid #404040; padding:10px 12px; margin-bottom:5px; font-size:14px; }
.guess-history li:empty { display:none; }
.attempt-text { text-align:right; color:#a9a9a9; font-size:12px; margin:0 0 8px; }
#guessInput { background:#1b1b1b; color:#fff; border:1px solid #565656; padding:12px; width:100%; font-size:15px; border-radius:1px; }
#guessInput:focus { outline:1px solid #90a9ca; }
#guessInput::placeholder { color:#858585; }
.guess-buttons { display:flex; justify-content:space-between; gap:8px; margin-top:10px; }
.primary-button { background:var(--blue); color:white; border:1px solid var(--blue); font-weight:600; }
.primary-button:hover:not(:disabled) { background:#126899; }
.notice { color:var(--gold); min-height:20px; margin:10px 0 0; }
.result-area { min-height:480px; display:flex; flex-direction:column; justify-content:space-between; padding-top:0; }
.song-card { width:100%; display:flex; align-items:center; gap:12px; padding:9px 12px; background:#0a5791; color:white; min-height:74px; }
.song-thumb { width:50px; height:50px; flex:none; background:#0b3558; border:1px solid #80aacc; display:grid; place-items:center; font:700 22px Georgia,serif; }
.song-copy { flex:1; min-width:0; font-size:14px; }
.song-copy strong { display:block; overflow-wrap:anywhere; line-height:1.3; }
.song-copy span { display:block; font-size:12px; opacity:.9; margin-top:3px; }
.song-actions { display:flex; flex-direction:column; gap:3px; align-items:flex-end; flex:none; }
.favorite-song-button { color:white; background:none !important; border:0; padding:0 7px; font-size:25px; }
#resultSoundCloud a { color:#fff; text-decoration:none; font-size:11px; font-weight:bold; white-space:nowrap; }
#resultSoundCloud a:hover { text-decoration:underline; }
.source-label { font-size:11px; }
.result-center { text-align:center; padding:42px 0 18px; }
.result-number { font-size:46px; font-weight:bold; margin:0; }
.result-ticks { display:flex; gap:4px; justify-content:center; margin:5px auto 18px; }
.result-ticks span { display:block; width:20px; height:5px; background:#666; }
.result-ticks .right { background:#159d4e; }
.result-ticks .wrong { background:#d2443a; }
.result-ticks .skip { background:#888; }
.result-message { margin:10px 0 18px; font-size:16px; }
.share-button { letter-spacing:.1em; min-width:102px; }
.next-area { text-align:center; margin-bottom:18px; }
.countdown-row { text-align:center; color:var(--muted); margin:22px auto 16px; }
.countdown-row strong { display:block; color:white; font-size:22px; font-weight:normal; letter-spacing:.12em; margin-top:4px; }
.unlimited-prompt { text-align:center; color:#aaa; font-size:13px; margin:0 0 26px; }
.unlimited-prompt button { color:white; background:transparent; border:0; padding:0; text-decoration:underline; }
footer { text-align:center; color:#8b8b8b; font-size:12px; border-top:1px solid #303030; padding:16px 0; }
.player-bar { background:#111; border-top:1px solid #555; position:fixed; left:0; right:0; bottom:0; z-index:15; min-height:78px; }
.player-inner { width:min(100% - 20px,760px); height:78px; margin:auto; display:flex; align-items:center; gap:14px; }
.player-time { width:45px; text-align:center; flex:none; color:#fff; font-size:13px; font-variant-numeric:tabular-nums; }
.player-icon { background:transparent; border:0; border-radius:0; padding:0; font-size:23px; }
#volumeRange { width:80px; flex:none; }
#seekBar { flex:1; min-width:50px; }
input[type=range] { height:4px; accent-color:#f4f4f4; cursor:pointer; }
input[type=range]:disabled { opacity:.7; }
.player-play { border:2px solid #eee; border-radius:50%; width:51px; height:51px; flex:none; display:grid; place-items:center; background:transparent; padding:0; font-size:20px; }
.player-play:hover:not(:disabled) { background:#262626; }
#siteDialog { border:1px solid #444; width:min(95vw,470px); max-height:min(85dvh,680px); background:#151515; color:#f7f7f7; padding:18px 26px 24px; position:fixed; box-shadow:none; }
#siteDialog::backdrop { background:rgba(0,0,0,.72); }
.dialog-head { display:flex; align-items:center; justify-content:center; position:relative; min-height:42px; margin-bottom:18px; }
.dialog-head h2 { margin:0; font-size:22px; line-height:1; font-family:Georgia,'Times New Roman',serif; letter-spacing:.13em; }
.dialog-head .title-image { max-height:28px; max-width:80%; object-fit:contain; }
.close-dialog { position:absolute; right:0; top:1px; background:transparent; border:0; color:#a5a5a5; font:28px/1 Arial,sans-serif; padding:0 2px; }
.close-dialog:hover { background:transparent !important; color:white; }
.dialog-content { font-size:14px; }
.dialog-content p { margin:0 0 14px; }
.help-row { display:flex; align-items:center; gap:15px; margin:16px 0 20px; }
.help-row > span { color:#999; font-size:24px; width:30px; text-align:center; flex:none; }
.help-row p { margin:0; }
.modal-play { display:block; margin:20px auto 0; padding:10px 25px; }
.modal-subtitle { text-align:center; margin:-10px 0 8px !important; }
.stats-chart { height:160px; display:flex; justify-content:space-around; align-items:flex-end; gap:5px; padding:0 8px; margin-top:6px; }
.stats-chart .bar { background:#0875b8; width:42px; max-width:100%; min-height:3px; position:relative; }
.stats-chart .bar-number { color:white; font-weight:bold; position:absolute; top:4px; left:0; right:0; text-align:center; font-size:13px; }
.stats-chart .bar.zero { background:#373737; }
.stats-chart .bar.zero .bar-number { top:-23px; color:#aaa; }
.chart-axis { display:grid; grid-template-columns:repeat(6,1fr); text-align:center; border-top:1px solid #555; padding-top:6px; font-size:12px; color:#aaa; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px 7px; text-align:center; margin-top:24px; }
.stats-grid div { display:flex; flex-direction:column; gap:0; }
.stats-grid b { font-size:25px; line-height:1.15; }
.stats-grid span { font-size:13px; color:#aaa; }
.stats-grid div:nth-child(4) { grid-column:1/3; }
.stats-note { text-align:center; font-size:12px; margin:18px 0 0 !important; }
.favorite-item { display:flex; align-items:center; justify-content:space-between; gap:15px; border-top:1px solid #3a3a3a; padding:12px 0; }
.favorite-item strong { font-size:14px; }
.favorite-item small { color:#aaa; display:block; }
.favorite-item a { white-space:nowrap; font-size:12px; }
#soundcloudPreview { position:absolute; left:-9999px; top:0; width:1px; height:1px; border:0; pointer-events:none; }
@media(max-width:580px) {
  .topbar-inner { min-height:91px; width:calc(100% - 12px); }
  .site-logo img { width:clamp(130px,37vw,175px); }
  .header-group { gap:1px; }
  .header-button { width:31px; font-size:21px; }
  .container { padding:12px 10px 26px; }
  .game-area,.result-area { min-height:calc(100dvh - 310px); min-height:max(350px, calc(100dvh - 310px)); }
  .game-area { padding-top:26px; }
  .player-inner { gap:8px; width:calc(100% - 16px); }
  .player-time { width:36px; font-size:12px; }
  #volumeRange { width:48px; }
  .player-play { width:43px; height:43px; }
  #siteDialog { padding:16px 18px 20px; }
  .song-card { gap:8px; padding:8px; }
  .song-thumb { width:40px; height:45px; }
  .song-copy { font-size:12px; }
  .song-copy span { font-size:11px; }
}

/* Game UI details, using supplied art and existing Ace Attorney lettering. */
.mode-switch img { height:16px; max-width:130px; width:auto; vertical-align:middle; }
.mode-switch button { display:flex; align-items:center; justify-content:center; min-height:38px; }
.guess-heading { margin:22px 0 10px; height:25px; display:flex; align-items:center; }
.guess-heading img { height:22px; max-width:140px; width:auto; }
.penalty-box { width:min(100%,380px); margin:0 auto 16px; padding:13px 16px 12px; background:#391d21; border:2px solid #824848; border-radius:3px; text-align:center; }
.penalty-label { height:19px; max-width:115px; width:auto; object-fit:contain; display:block; margin:0 auto 9px; }
.penalty-row { display:flex; gap:12px; align-items:center; justify-content:center; }
.penalty-track { position:relative; width:min(100%,286px); height:17px; background:#271f1d; border:2px solid #938055; box-shadow: inset 0 0 0 2px #202020; flex:1; }
.penalty-fill { position:absolute; top:3px; left:3px; bottom:3px; width:calc(100% - 6px); background:#30bb31; border-top:2px solid #72eb52; border-bottom:2px solid #216a22; transition:width .25s steps(6,end); }
.penalty-count { font-weight:700; font-size:12px; min-width:35px; color:#fff5db; font-variant-numeric:tabular-nums; }
.penalty-impact { position:absolute; width:90px; height:90px; right:-40px; top:50%; transform:translateY(-50%) scale(.65); background:url('assets/impact-0.png') no-repeat center / contain; z-index:2; opacity:0; pointer-events:none; }
.penalty-impact.hit { animation:penalty-blast .58s steps(1,end) forwards; }
@keyframes penalty-blast {
  0%{background-image:url('assets/impact-0.png');opacity:1}
  13%{background-image:url('assets/impact-1.png');opacity:1}
  26%{background-image:url('assets/impact-2.png');opacity:1}
  39%{background-image:url('assets/impact-3.png');opacity:1}
  52%{background-image:url('assets/impact-4.png');opacity:1}
  65%{background-image:url('assets/impact-5.png');opacity:1}
  78%{background-image:url('assets/impact-6.png');opacity:1}
  91%{background-image:url('assets/impact-7.png');opacity:1}
  100%{opacity:0}
}
.search-wrap { position:relative; }
.search-wrap > img { width:19px;height:19px;position:absolute;right:12px;top:50%;transform:translateY(-50%); opacity:.65; pointer-events:none; }
#guessInput { padding-right:42px; }
.song-thumb { overflow:hidden; background:#143e64; }
.song-thumb img { width:100%;height:100%; object-fit:cover; display:block; }
#shareButton img { height:15px; width:auto; max-width:80px; vertical-align:middle; }
#nextSongButton img { height:15px; width:auto; max-width:125px; vertical-align:middle; }
.player-icon img { width:20px;height:28px;object-fit:contain; }
.result-verdict { margin:-14px auto 5px; text-align:center; }
.result-verdict img { height:33px; max-width:210px; object-fit:contain; }
.result-verdict[hidden] { display:none; }
@media (prefers-reduced-motion:reduce) { .penalty-impact.hit{animation:none;} .penalty-fill{transition:none;} }
@media(max-width:580px){.penalty-box { width:min(100%,340px); padding:10px 12px; } .penalty-impact { transform:translateY(-50%) scale(.52); } }