/* Visual polish layered after the base styles and genre backgrounds. */

.app {
  width: min(100%, 920px);
  margin: 0 auto;
}

.board { isolation: isolate; }
.board::before { position:absolute; inset:0; z-index:0; content:""; pointer-events:none; background:linear-gradient(180deg,#ffffff12 0%,#ffffff08 55%,#00000008 100%); }
.item { z-index:2; overflow:hidden; background:#fffffff2; border:2px solid #ffffffd9; box-shadow:0 7px 0 #00000024,0 6px 18px #0000002b,inset 0 0 0 1px #ffffffc7; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); transition:transform .14s ease,box-shadow .14s ease,background .14s ease,border-color .14s ease; }
.item:active { transform:scale(.95); }
.item.correct { z-index:10; background:#fff8b8; border-color:#ffd84d; box-shadow:0 0 0 5px #ffffffd9,0 0 28px 10px #ffe05eaa,0 8px 0 #e3a91a; animation:correct-pop .72s cubic-bezier(.2,.9,.28,1.25) 1; }
.item.wrong { border-color:#ff5c5c; background:#fff2f2; box-shadow:0 0 0 4px #ffffffcc,0 0 18px 6px #ff5c5c66,0 7px 0 #bd3b3b; animation:wrong-shake .4s ease 1; }
.mark { z-index:50; width:min(38vw,180px); color:transparent; font-size:0; border:14px solid #ef3e3e; background:transparent; box-shadow:none; filter:drop-shadow(0 5px 2px #0003); }
.mark::after { content:none; }

.level-control { padding:12px 14px 10px; background:#fff9e8; border:3px solid #ffd36c; border-radius:18px; }
.level-control.is-fixed { background:#eef8ff; border-color:#70c8ff; }
.level-readout { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-weight:800; }
.level-readout strong { color:#ef6c00; font-size:24px; font-weight:1000; }
.level-control.is-fixed .level-readout strong { color:#1679b8; }
.level-range { width:100%; height:34px; margin:5px 0 0; accent-color:#ff9f1c; cursor:pointer; }
.level-range:disabled { cursor:not-allowed; opacity:.55; }
.range-labels { display:flex; justify-content:space-between; margin-top:-5px; color:#806b5d; font-size:12px; font-weight:800; }
.level-hint { margin:4px 0 0; color:#795548; font-size:12px; font-weight:700; }

#settings { align-items:flex-start; padding-top:max(10px,calc(var(--safe-top) + 6px)); padding-bottom:max(14px,calc(var(--safe-bottom) + 10px)); scroll-padding-top:max(10px,calc(var(--safe-top) + 6px)); }
#settings .card { margin:0 auto; flex:0 0 auto; }

/* Quick-start UX: genre + start fit in the first viewport. */
.quick-start-card { padding-top:12px; padding-bottom:14px; }
.settings-head-row { position:relative; display:flex; align-items:center; justify-content:center; min-height:38px; }
.settings-head-row h1 { margin:0; font-size:clamp(28px,7vw,38px); }
.mini-home-link { position:absolute; right:0; top:0; display:grid; place-items:center; width:38px; height:38px; color:#4b372d; text-decoration:none; background:#fff7df; border:2px solid #ffd36c; border-radius:12px; }
.genre-title { margin-top:4px; }
.quick-start-card .genre-carousel { margin-top:-4px; padding-top:4px; padding-bottom:8px; }
.quick-start-card .genre-carousel-hint { margin:-2px 0 6px; }
.quick-start-button { margin-top:4px; padding:12px; font-size:22px; }
.quick-start-card .data-status { margin:6px 0 0; min-height:0; }
.advanced-settings { margin-top:8px; border:2px solid #ffd36c; border-radius:16px; background:#fffaf0; overflow:hidden; }
.advanced-settings summary { padding:11px 14px; cursor:pointer; list-style:none; font-weight:1000; text-align:center; }
.advanced-settings summary::-webkit-details-marker { display:none; }
.advanced-settings summary::after { content:" ▼"; font-size:12px; }
.advanced-settings[open] summary::after { content:" ▲"; }
.advanced-settings-body { padding:0 12px 12px; }

@media (min-width:700px) {
  .app { gap:10px; padding-inline:16px; }
  .top { padding:10px 14px; }
  .question { font-size:clamp(30px,4.5vw,42px); }
  .sub { font-size:16px; }
  .board { border-width:5px; border-radius:30px; }
  .item { padding:7px; border-radius:24px; }
  .status,.restart { font-size:18px; }
}

@media (max-width:480px) {
  #settings { padding-top:max(8px,calc(var(--safe-top) + 4px)); padding-inline:8px; }
  #settings .card { width:100%; }
  .quick-start-card { padding:10px; border-width:5px; }
  .quick-start-card .genre-carousel { --genre-card-size:min(56vw,210px); }
  .quick-start-card .genre-card-title { font-size:clamp(20px,6vw,28px); }
  .quick-start-card .genre-carousel-hint { font-size:11px; }
  .quick-start-button { padding:11px; margin-top:2px; font-size:21px; }
  .item { padding:3px; border-width:1px; border-radius:15px; box-shadow:0 5px 0 #00000020,0 4px 12px #00000024; }
  .item.compact { border-radius:12px; }
  .mark { border-width:9px; }
}

@media (max-height:720px) and (max-width:480px) {
  .settings-head-row { min-height:32px; }
  .settings-head-row h1 { font-size:26px; }
  .mini-home-link { width:32px; height:32px; }
  .quick-start-card .genre-carousel { --genre-card-size:min(49vw,180px); padding-bottom:4px; }
  .quick-start-card .genre-carousel-hint { margin:-4px 0 3px; }
  .quick-start-button { padding:9px; font-size:19px; }
  .advanced-settings { margin-top:5px; }
  .advanced-settings summary { padding:8px 12px; }
}

@media (prefers-reduced-motion:reduce) { .item,.mark { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
@keyframes correct-pop { 0%{transform:scale(1)}35%{transform:scale(1.13) rotate(2deg)}65%{transform:scale(1.06) rotate(-1deg)}100%{transform:scale(1.08)} }
@keyframes wrong-shake { 0%,100%{transform:translateX(0) scale(1)}18%{transform:translateX(-10px) scale(.98)}36%{transform:translateX(9px) scale(.98)}54%{transform:translateX(-7px) scale(.98)}72%{transform:translateX(5px) scale(.99)} }