/* Generated kitchen UI art. Text remains live and accessible; frames use nine slices. */
:root {
  --kitchen-ink: #502b25;
  --kitchen-muted: #86604b;
  --kitchen-cream: #fff0c8;
  --kitchen-wood: #a35636;
  --kitchen-gold: #ffd46e;
  --kitchen-frame: url('../art/ui/panel.webp');
  --button-pixel: 2px;
  --button-radius: 8px;
  --button-border: #62392d;
  --button-main: #ffe5a2;
  --button-dark: #d99a55;
  --button-light: #fff6d5;
  --button-shadow: 4px;
}
#app { border-color: #784a37; box-shadow: 0 0 0 4px #30262b, 0 16px 60px rgba(0, 0, 0, 0.600); }
#screen-song-select, #screen-upload, #screen-result {
  background: linear-gradient(rgba(22, 37, 72, 0.400), rgba(24, 38, 61, 0.788)), url('../art/gameplay/layer-2.png') center top / 100% auto no-repeat, #192943;
  padding: 30px 26px 28px;
}
#screen-song-select::after, #screen-upload::after, #screen-result::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 9px;
  background: repeating-linear-gradient(90deg, #e9f1df 0, #e9f1df 9px, #83bbd3 9px, #83bbd3 18px);
  border-top: 3px solid #593324; pointer-events: none;
}
.brand-title { color: #ffe5a0; text-shadow: 2px 0 #502b25, -2px 0 #502b25, 0 -2px #502b25, 0 3px #502b25, 3px 5px #9b5438; letter-spacing: 2px; }
.brand-subtitle { color: #eed8ad; letter-spacing: 2px; font-size: 10px; }
.card, .song-item, .result-card, .modal-dialog, .home-settings-overlay .modal-dialog, .upload-dropzone {
  border: 20px solid transparent;
  border-image: var(--kitchen-frame) 190 fill / 20px / 0 stretch;
  border-radius: 0; background: none; color: var(--kitchen-ink);
  box-shadow: 0 5px 0 rgba(36, 27, 34, 0.502); image-rendering: pixelated;
  padding: 16px;
}
/* Parametric pixel frame: fixed design-pixel steps at every button size.
   Two overlapping solid silhouettes avoid image-slice joins entirely. */
.pixel-button {
  isolation: isolate; border: 0; border-radius: 0; border-image: none;
  background: none; box-shadow: none; color: var(--kitchen-ink);
  cursor: pointer; image-rendering: pixelated;
  transition: transform 90ms steps(2), filter 90ms;
}
.pixel-button::before, .pixel-button::after {
  --p: var(--button-pixel); --r: var(--button-radius);
  content: ''; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  /* Orthogonal steps only; no rounded arcs or independently scaled corners. */
  --button-shape: polygon(
    var(--r) 0, calc(100% - var(--r)) 0,
    calc(100% - var(--r)) var(--p), calc(100% - var(--p) - var(--p)) var(--p),
    calc(100% - var(--p) - var(--p)) calc(var(--p) + var(--p)), calc(100% - var(--p)) calc(var(--p) + var(--p)),
    calc(100% - var(--p)) var(--r), 100% var(--r),
    100% calc(100% - var(--r)), calc(100% - var(--p)) calc(100% - var(--r)),
    calc(100% - var(--p)) calc(100% - var(--p) - var(--p)), calc(100% - var(--p) - var(--p)) calc(100% - var(--p) - var(--p)),
    calc(100% - var(--p) - var(--p)) calc(100% - var(--p)), calc(100% - var(--r)) calc(100% - var(--p)),
    calc(100% - var(--r)) 100%, var(--r) 100%,
    var(--r) calc(100% - var(--p)), calc(var(--p) + var(--p)) calc(100% - var(--p)),
    calc(var(--p) + var(--p)) calc(100% - var(--p) - var(--p)), var(--p) calc(100% - var(--p) - var(--p)),
    var(--p) calc(100% - var(--r)), 0 calc(100% - var(--r)),
    0 var(--r), var(--p) var(--r),
    var(--p) calc(var(--p) + var(--p)), calc(var(--p) + var(--p)) calc(var(--p) + var(--p)),
    calc(var(--p) + var(--p)) var(--p), var(--r) var(--p));
  -webkit-clip-path: var(--button-shape);
  clip-path: var(--button-shape);
}
.pixel-button::before { background: var(--button-border); }
.pixel-button::after {
  --r: calc(var(--button-radius) - var(--button-pixel));
  top: var(--p); right: var(--p); bottom: var(--p); left: var(--p);
  /* Raise both ends of the bottom shade along the same pixel corner steps.
     Overlapping opaque bands form a continuous curved lip without tile seams. */
  background:
    linear-gradient(var(--button-dark), var(--button-dark)) left bottom / var(--r) calc(var(--button-shadow) + var(--p)) no-repeat,
    linear-gradient(var(--button-dark), var(--button-dark)) right bottom / var(--r) calc(var(--button-shadow) + var(--p)) no-repeat,
    linear-gradient(var(--button-dark), var(--button-dark)) left bottom / calc(var(--p) + var(--p)) calc(var(--button-shadow) + var(--p) + var(--p)) no-repeat,
    linear-gradient(var(--button-dark), var(--button-dark)) right bottom / calc(var(--p) + var(--p)) calc(var(--button-shadow) + var(--p) + var(--p)) no-repeat,
    linear-gradient(var(--button-dark), var(--button-dark)) left bottom / var(--p) calc(var(--button-shadow) + var(--r)) no-repeat,
    linear-gradient(var(--button-dark), var(--button-dark)) right bottom / var(--p) calc(var(--button-shadow) + var(--r)) no-repeat,
    linear-gradient(to bottom, var(--button-light) 0, var(--button-light) calc(100% - var(--button-shadow) - var(--r)), transparent calc(100% - var(--button-shadow) - var(--r))) left top / var(--p) 100% no-repeat,
    linear-gradient(to bottom,
      var(--button-light) 0, var(--button-light) var(--p),
      var(--button-main) var(--p), var(--button-main) calc(100% - var(--button-shadow)),
      var(--button-dark) calc(100% - var(--button-shadow)), var(--button-dark) 100%);
  box-shadow: inset calc(0px - var(--p)) 0 var(--button-dark);
}
.pixel-button:active:not(:disabled) { transform: translateY(2px); }
.pixel-button:disabled { filter: grayscale(1); opacity: .55; cursor: default; transform: none; }
.pixel-button:focus-visible { outline: 3px solid #fff1bc; outline-offset: 3px; }
@media (hover: hover) { .pixel-button:hover:not(:disabled) { filter: brightness(1.06); } }
.btn {
  position: relative; min-height: 54px;
  padding: 12px 20px; font-size: 17px; font-weight: 900;
  letter-spacing: 1px; image-rendering: pixelated; text-shadow: 0 1px #fff3cf;
}
.btn-primary, .btn-accent {
  --button-main: #ff8555; --button-dark: #cb5535; --button-light: #ffbd83;
  background: none; color: #fff3cb;
  text-shadow: 1px 1px #6b3029, -1px -1px #6b3029, 0 2px #6b3029;
}
.btn-secondary { background: none; border-color: transparent; }
.btn:active, .btn:disabled { background: none; box-shadow: none; }
.btn:disabled { color: #5b463b; }
.btn:focus-visible, .diff-btn:focus-visible, .btn-icon-pause:focus-visible, .upload-dropzone:focus-visible {
  outline: 3px solid #fff1bc; outline-offset: 4px;
}
.song-item { min-height: 108px; padding: 14px 12px; }
.song-item.selected { background: none; border-color: transparent; box-shadow: 0 5px 0 rgba(36, 27, 34, 0.502); }
.song-info h3 { color: var(--kitchen-ink); font-size: 18px; }
.song-meta { color: var(--kitchen-muted); font-size: 12px; }
.record-icon { border-color: #51362c; background: #ffd66c; box-shadow: 0 0 0 3px #bf824b, 3px 3px 0 #633a2a; }
.track-art { margin: 30px 0 10px; }
.track-art img { height: 196px; filter: drop-shadow(4px 5px 0 rgba(16, 26, 50, 0.502)); }
.track-art span { margin: 0 0 0 20px; color: #fff0c8; font-weight: 700; text-shadow: 2px 2px #362732; }
.difficulty-group { margin-bottom: 18px; }
.diff-btn + .diff-btn { margin-left: 8px; }
.diff-btn {
  position: relative; margin: 0; color: #654432;
  font: 900 13px var(--ui-font); padding: 12px 0;
}
.diff-btn.selected { outline: 2px solid #ffeaa7; outline-offset: 2px; box-shadow: none; }
#btn-diff-easy.selected, #btn-upload-diff-easy.selected { --button-main: #b8d995; --button-dark: #7eac66; --button-light: #e2f1b9; color: #29432e; }
#btn-diff-normal.selected, #btn-upload-diff-normal.selected { --button-main: #ffd16e; --button-dark: #cb9445; --button-light: #fff0ad; color: #674329; }
#btn-diff-hard.selected, #btn-upload-diff-hard.selected { --button-main: #ff8555; --button-dark: #cb5535; --button-light: #ffbd83; color: #542b25; }
.upload-dropzone { padding: 25px 8px; margin-bottom: 18px; }
.upload-dropzone:active { background: none; border-color: transparent; }
.upload-icon { color: #a55735; text-shadow: 2px 2px #f5cc83; }
.upload-dropzone p { color: #826047 !important; font-size: 12px !important; }
.status-label, .feature-lbl { color: #80604a; }
.status-label { max-width: 125px; }
.feature-val { color: #854c32; font: 900 22px var(--ui-font); }
.feature-box + .feature-box { margin-left: 8px; }
.progress-container, .hud-progress-bar-wrap {
  background: #533a31; border: 2px solid #8c6244; border-radius: 0;
  box-shadow: 0 1px #ffe5ad, inset 0 2px #302727;
}
.progress-container { height: 12px; }
.progress-fill, .hud-progress-fill {
  background: repeating-linear-gradient(90deg, #f4ca70 0 12px, #e8b65f 12px 14px);
  box-shadow: inset 0 2px #ffeba1; border-radius: 0;
}
.game-hud-top { padding: var(--top-safe-area-gap) 16px 12px; align-items: center; background: linear-gradient(rgba(20, 35, 68, 0.565), transparent); }
.hud-score-box {
  min-width: 74px; padding: 5px 8px 4px;
  border: 8px solid transparent; border-image: var(--kitchen-frame) 190 fill / 8px / 0 stretch;
  color: #603729; font: 900 22px var(--ui-font); text-shadow: 0 1px #fff9db;
  letter-spacing: 1px; image-rendering: pixelated;
}
.hud-progress-bar-wrap { height: 10px; margin: 0 12px; }
.btn-icon-pause {
  position: relative; width: 40px; height: 40px; flex-shrink: 0;
}
.btn-icon-pause:active { transform: translateY(2px); }
.pixel-pause { border-color: #653b2b; width: 12px; height: 14px; }
.key-guide-pill {
  position: relative; width: 46px; height: 34px; color: #63402e;
  font: 900 13px var(--ui-font); image-rendering: pixelated;
}
.touch-hotzone:active .key-guide-pill { transform: translateY(2px); filter: brightness(1.15); }
.hud-combo-display { color: #ffe79b; font: 900 28px var(--ui-font); text-shadow: 2px 0 #542f26, -2px 0 #542f26, 0 -2px #542f26, 0 3px #542f26, 3px 4px #a15b32; }
.hud-judgment {
  width: 220px; height: 57px; left: 0; right: 0; margin: 0 auto;
  font-size: 0; color: transparent; text-shadow: none;
  background: url('../art/ui/judgments.webp') center top / 100% 400% no-repeat;
  image-rendering: pixelated;
}
.judgment-perfect { background-position-y: 0%; }
.judgment-great { background-position-y: 33.333333%; }
.judgment-good { background-position-y: 66.666667%; }
.judgment-miss, .judgment-broken { background-position-y: 100%; }
.hud-judgment.active { animation: kitchen-judgment .48s steps(8) forwards; }
@keyframes kitchen-judgment {
  0% { opacity: 1; transform: scale(.8); }
  20% { opacity: 1; transform: scale(1.08); }
  45% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: translateY(-14px); }
}
.countdown-overlay { background: rgba(20, 32, 58, 0.220); }
.countdown-text {
  font: 900 108px var(--ui-font); color: #ffe295;
  -webkit-text-stroke: 3px #573027;
  text-shadow: 0 5px #a85936, 5px 7px #382631;
}
.modal-overlay { background: rgba(16, 27, 53, 0.722); }
.modal-dialog { padding: 22px 16px; max-width: 370px; }
.modal-title { color: #61372a; text-shadow: 0 1px #fff9d9; font-size: 22px; }
.slider-header, .home-settings-hint, .home-settings-help { color: #80533e; }
#text-offset-val { color: #a65b33 !important; }
.home-settings-help { line-height: 1.9; }
.range-slider { background: #9e7250; border: 2px solid #63432e; border-radius: 0; }
.range-slider::-webkit-slider-thumb { width: 22px; height: 22px; border: 3px solid #633a29; background: #f6ce7c; border-radius: 0; box-shadow: inset 0 2px #fff0b9; }
.range-slider::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid #633a29; background: #f6ce7c; border-radius: 0; }
#screen-result { justify-content: center; }
#screen-result > * + * { margin-top: 20px; }
.result-card { width: 100%; max-width: 360px; padding: 18px 14px; text-align: center; }
.rank-badge {
  width: 82px; height: 82px; line-height: 72px; margin: 4px auto 12px;
  border: 5px solid #714329; border-radius: 0; font: 900 60px/72px var(--ui-font);
  box-shadow: inset 0 0 0 3px #fff0b1, 4px 4px #af7850; transform: rotate(-6deg);
}
.rank-s { background: #f8ce6d; color: #88542d; }
.rank-a { background: #b7d99e; color: #456441; }
.rank-b { background: #aad5de; color: #3e6271; }
.rank-c { background: #e9b78c; color: #845438; }
.rank-d { background: #d1bda5; color: #766151; }
.result-score-large { color: #75432d; font-size: 38px; text-shadow: 0 2px #ffefbf; margin-bottom: 2px; }
.result-card > div[style] { color: #9a7154 !important; font-size: 10px !important; letter-spacing: 3px !important; }
.result-stats-table { margin: 16px 0 4px; }
.result-stats-table td { padding: 8px 4px; font-size: 12px; border-bottom: 1px dashed #ccaa78; }
.result-stats-table td:last-child { font: 900 16px var(--ui-font); color: #70452d; }
.stat-p { color: #a56a15; }.stat-g { color: #4e7946; }.stat-gd { color: #3d7b94; }.stat-m { color: #b36155; }
#screen-result { --result-chef-x: 0px; --result-chef-y: 13px; --result-chef-scale: 1.6; }
.result-celebration { position: relative; width: 100%; max-width: 360px; margin: 0; }
.result-celebration.has-food-pile { padding-bottom: 24px; }
#result-eat-canvas { display: block; width: 200px; max-width: 100%; height: auto; margin: 0 auto; image-rendering: pixelated; transform: translate(var(--result-chef-x, 0px), var(--result-chef-y, 0px)) scale(var(--result-chef-scale, 1)); transform-origin: center bottom; }
.result-food-label { font-size: 12px; line-height: 1.6; color: #8c593b; margin: 0 0 8px; min-height: 20px; }
.result-reward-line { display: flex; align-items: center; justify-content: center; margin: 0 0 4px; color: #75432d; font-size: 12px; line-height: 1.6; }
#result-food-icon { display: block; flex: 0 0 40px; width: 40px; height: 40px; image-rendering: pixelated; }
/* Food overlaps the chef's foreground, outside the score card. */
#result-food-pile { position: absolute; z-index: 1; bottom: -10px; left: 50%; transform: translateX(-50%); display: block; width: 200px; max-width: 100%; height: auto; margin: 0; pointer-events: none; image-rendering: pixelated; }
#result-food-pile[hidden] { display: none; }
#screen-result .result-stats-table td { padding-top: 6px; padding-bottom: 6px; }
#screen-result { padding-top: 20px; padding-bottom: 20px; }
#screen-result > * + * { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
  .hud-judgment.active { animation: kitchen-judgment-reduced .5s linear forwards; }
  @keyframes kitchen-judgment-reduced { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
}
.play-hint, .chart-editor-link, #song-load-status { font-size: 13px; line-height: 1.6; color: #efcf99; }
#built-in-songs .song-item { width: 100%; text-align: left; font-family: inherit; cursor: pointer; }
#beat-correction { width: 100%; padding: 10px; background: #f5dfaa; border: 3px solid #774c34; color: #65442f; font-size: 12px; }
#beat-correction[hidden] { display: none; }
#beat-correction p { margin: 0 0 8px; line-height: 1.5; }
#beat-correction input { width: 85px; background: #fff3d3; color: #65442f; border: 1px solid #98724b; padding: 5px; }
#beat-correction .btn { padding: 8px; font-size: 12px; margin: 8px 0 0; }
#screen-upload .upload-dropzone { padding: 12px; }
#screen-upload .card { margin-top: 10px; margin-bottom: 10px; padding: 14px; }
#hud-timing { position: absolute; top: 16%; left: 0; width: 100%; text-align: center; color: #f9dc9b; font-size: 13px; pointer-events: none; text-shadow: 1px 2px #432c30; }
#result-performance { font-size: 10px; line-height: 1.5; color: #8c593b; margin: 0 0 5px; }

/* Menu motion stays separate from the music-driven character and logo transforms. */
@keyframes menu-reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes menu-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes selection-pop { 0% { transform: scale(.97); } 60% { transform: scale(1.015); } 100% { transform: scale(1); } }
@keyframes loading-breathe { 0%, 100% { opacity: .55; } 50% { opacity: .85; } }
@keyframes rank-reveal { from { opacity: 0; transform: rotate(-12deg) scale(.65); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }
@keyframes gameplay-hud-enter { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
/* Finish within the first countdown beat; leave canvas geometry and input zones fixed. */
#screen-gameplay.active.gameplay-entering #game-canvas { animation: menu-fade 420ms ease-out; }
#screen-gameplay.active.gameplay-entering .game-hud-top { animation: gameplay-hud-enter 360ms ease-out 80ms backwards; }
#screen-home.active .home-current-music { animation: menu-reveal 320ms ease-out both; }
#screen-home.active .home-art-button { animation: menu-fade 350ms ease-out backwards; }
#screen-home.active .home-choose { animation-delay: 70ms; }
#screen-home.active .home-import { animation-delay: 140ms; }
#screen-song-select.active > .safe-area-top, #screen-upload.active > .safe-area-top { animation: menu-reveal 220ms ease-out; }
#screen-song-select.active .song-list-scroll { animation: menu-reveal 300ms ease-out; }
#screen-song-select.active > .safe-area-bottom, #screen-upload.active > .safe-area-bottom,
#screen-result.active > .safe-area-bottom { animation: menu-reveal 360ms ease-out; }
#screen-result.active .result-card { animation: menu-reveal 300ms ease-out; }
#screen-result.active .rank-badge { animation: rank-reveal 400ms cubic-bezier(.2,.8,.3,1.2); }
.song-item, .diff-btn, .btn-icon-pause { transition: transform 120ms ease, filter 120ms ease, box-shadow 160ms ease; }
.song-item.selected { outline: 3px solid #ffd46e; outline-offset: -7px; animation: selection-pop 220ms ease-out; }
.diff-btn.selected { animation: selection-pop 180ms ease-out; }
.song-item:active:not(:disabled), .diff-btn:active:not(:disabled) { transform: translateY(2px) scale(.985); }
.song-item:disabled { cursor: wait !important; }
.btn { transition: transform 100ms ease, filter 150ms ease, opacity 180ms ease; }
.btn.is-loading { animation: loading-breathe 900ms ease-in-out infinite; }
.modal-overlay { display: flex; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms ease, visibility 0s linear 160ms; }
.modal-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.modal-overlay .modal-dialog { transform: translateY(14px) scale(.97); transition: transform 180ms ease-out; }
.modal-overlay.active .modal-dialog { transform: translateY(0) scale(1); }
@media (hover: hover) {
  .song-item:hover:not(:disabled), .diff-btn:hover:not(:disabled), .home-settings:hover, .btn-icon-pause:hover { filter: brightness(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  #screen-gameplay.active.gameplay-entering #game-canvas,
  #screen-gameplay.active.gameplay-entering .game-hud-top,
  #screen-home.active .home-current-music, #screen-home.active .home-art-button,
  #screen-song-select.active > .safe-area-top, #screen-upload.active > .safe-area-top,
  #screen-song-select.active .song-list-scroll, #screen-song-select.active > .safe-area-bottom,
  #screen-upload.active > .safe-area-bottom, #screen-result.active > .safe-area-bottom,
  #screen-result.active .result-card, #screen-result.active .rank-badge,
  .song-item.selected, .diff-btn.selected, .btn.is-loading { animation: none; }
  .pixel-button, .btn, .song-item, .diff-btn, .btn-icon-pause, .home-settings, .modal-overlay, .modal-overlay .modal-dialog { transition: none; }
}
/* The special outro keeps its character in the gameplay scene. */
#btn-ending-result { position: absolute; z-index: 40; left: 25%; width: 50%; top: 64%; }
#btn-ending-result[hidden] { display: none; }
#clip-complete-status { position: absolute; z-index: 40; top: 59%; left: 8%; width: 84%; margin: 0; padding: 10px 6px; box-sizing: border-box; text-align: center; color: #fff0bf; background: rgba(20, 24, 41, .8); border-radius: 4px; font-size: 14px; pointer-events: none; }
#clip-complete-status[hidden] { display: none; }
#screen-gameplay.song-ending .touch-hotzones-container,
#screen-gameplay.song-ending #hud-combo,
#screen-gameplay.song-ending #hud-judgment,
#screen-gameplay.song-ending #hud-timing,
#screen-gameplay.clip-complete .touch-hotzones-container,
#screen-gameplay.clip-complete #hud-combo,
#screen-gameplay.clip-complete #hud-judgment,
#screen-gameplay.clip-complete #hud-timing { visibility: hidden; }

/* Cream music sleeves: difficulty colours only the frame and vinyl material. */
#screen-song-select .song-list-scroll { padding: 14px 5px 4px; margin: 2px 0 12px; }
#built-in-songs .song-item {
  position: relative; isolation: isolate; overflow: visible;
  display: block; min-height: 136px; margin-bottom: 22px;
  padding: 15px 43px 15px 99px;
  border: 0; border-image: none; border-radius: 12px;
  background: #fff2dc; color: #402c24;
  box-shadow: 0 4px 0 #674332, 0 7px 12px rgba(10,20,35,.2);
  text-align: left; filter: none;
}
#built-in-songs .song-item::before {
  content: ''; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0;
  border: 12px solid transparent; border-image: url('../art/ui/song-frame.svg') 14 / 12px / 0 stretch;
  pointer-events: none; filter: grayscale(1);
}
#built-in-songs .song-item[data-difficulty="normal"]::before { filter: none; }
#built-in-songs .song-item[data-difficulty="hard"]::before { filter: hue-rotate(140deg) saturate(.6); }
#built-in-songs .song-item[data-difficulty="casual"]::before { filter: hue-rotate(235deg) saturate(.3) brightness(.85); }
#built-in-songs .song-item[data-difficulty="easy"]::before { filter: sepia(.7) saturate(.8) hue-rotate(-18deg) brightness(.8); }
#built-in-songs .song-item.record-muted::before { filter: grayscale(1); opacity: .65; }
#built-in-songs .song-item.selected {
  outline: 2px solid #ffdc85; outline-offset: 3px;
  box-shadow: 0 4px 0 #885435, 0 0 16px rgba(255,206,99,.45);
}
#built-in-songs .song-item:focus { outline: 2px solid #fff3bd; outline-offset: 3px; }
#built-in-songs .song-item .song-info { position: relative; z-index: 1; min-width: 0; }
#built-in-songs .song-info h3 { margin: 0 0 5px; font-size: 20px; line-height: 1.2; color: #38251f; overflow-wrap: break-word; }
#built-in-songs .song-meta { margin-top: 0; color: #755542; font-size: 10px; line-height: 1.5; }
.song-vinyl, .song-garden, .song-crown { position: absolute; display: block; pointer-events: none; background-repeat: no-repeat; background-size: contain; image-rendering: pixelated; }
.song-vinyl { width: 76px; height: 76px; left: 13px; top: 27px; background-image: url('../art/ui/song-vinyl.svg'); }
.song-garden { width: 48px; height: 66px; right: 7px; bottom: 9px; background-image: url('../art/ui/song-garden.svg'); }
.song-crown { display: none; z-index: 3; width: 40px; height: 32px; left: 7px; top: -14px; background-image: url('../art/ui/song-crown.svg'); }
#built-in-songs .song-item[data-difficulty="normal"] .song-vinyl { filter: hue-rotate(325deg); }
#built-in-songs .song-item[data-difficulty="hard"] .song-vinyl { filter: hue-rotate(170deg); }
#built-in-songs .song-item[data-difficulty="casual"] .song-vinyl { filter: sepia(.6) saturate(2) hue-rotate(-15deg); }
#built-in-songs .song-item.record-muted .song-vinyl { filter: grayscale(1); }
#built-in-songs .song-item.record-s .song-crown { display: block; }
#built-in-songs .song-item.selected .song-vinyl::after {
  content: '✓'; position: absolute; left: 0; bottom: -9px; width: 19px; height: 19px;
  background: #fff1bc; border: 2px solid #9c6d43; box-shadow: 1px 2px #70472e;
  color: #63432e; font: bold 13px/15px var(--ui-font); text-align: center;
}
.song-record { margin-top: 7px; padding: 0; border: 0; color: #422c23; font-size: 10px; line-height: 1.6; }
.song-record span { display: block; }
.song-record span:first-child { font-weight: bold; font-size: 12px; line-height: 1.5; }
/* Extra dates stay available on the selected sleeve without crowding the list. */
#built-in-songs .song-item:not(.selected):not([data-unavailable="true"]) .song-record span + span { display: none; }
#built-in-songs .song-item.selected .song-record span + span { color: #806451; }
.song-sheen { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 12px; overflow: hidden; pointer-events: none; }
#built-in-songs .song-item.record-s .song-sheen::after {
  content: ''; position: absolute; pointer-events: none;
  top: -45%; bottom: -45%; left: -60%; width: 32%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform: translateX(0) skewX(-24deg); opacity: 0;
  animation: record-sheen 4.6s cubic-bezier(.35,0,.12,1) infinite;
  animation-play-state: paused;
}
#screen-song-select.active .song-item.record-s .song-sheen::after { animation-play-state: running; }
@keyframes record-sheen {
  0%, 54% { transform: translateX(0) skewX(-24deg); opacity: 0; }
  58% { opacity: .75; }
  84% { transform: translateX(600%) skewX(-24deg); opacity: .75; }
  85%, 100% { transform: translateX(600%) skewX(-24deg); opacity: 0; }
}
.home-cards {
  position: absolute; z-index: 12; left: 25%; bottom: 2%; width: 50%; height: 5%; justify-content: center;
  display: flex; align-items: center; padding: 5px 8px; color: #563827;
  font-family: inherit; font-weight: bold; font-size: 13px;
}
.home-cards small { display: block; font-size: 9px; color: #8a7155; }
.mini-card-icon { display: inline-block; border: 2px solid #906044; padding: 4px 3px; margin-right: 6px; transform: rotate(-12deg); color: #ad7027; }
.home-cards:active { transform: translateY(2px); }
#record-save-status { font-size: 11px; color: #8f4434; }
#built-in-songs .song-item[data-unavailable="true"] { cursor: default; opacity: .8; }
@media (prefers-reduced-motion: reduce) { #built-in-songs .song-item.record-s .song-sheen::after { animation: none; } }
.play-mode-switch { display:flex; width:100%; margin:0 0 8px; }
/* Swipe difficulty strip on the song-select screen (replaces the three diff buttons). */
.difficulty-strip { width:100%; margin-bottom:6px; }
.difficulty-strip-viewport { overflow:hidden; padding:6px 0; touch-action:pan-y; cursor:grab; }
.difficulty-strip-viewport.dragging { cursor:grabbing; }
.difficulty-strip-track { display:flex; align-items:stretch; will-change:transform; }
.diff-card + .diff-card { margin-left:14px; }
.difficulty-strip-track.animating { transition:transform .28s cubic-bezier(.22,1.36,.42,1); }
.diff-card {
  position:relative; box-sizing:border-box; flex:0 0 190px; padding:11px 10px 13px; text-align:center;
  color:#654432; font-family:var(--ui-font);
}
.diff-card.selected { transform:translateY(-2px); outline:2px solid #ffeaa7; outline-offset:2px; }
.diff-card .diff-card-name { display:inline; font-size:18px; font-weight:900; letter-spacing:2px; }
.diff-card .diff-card-cn { display:inline; font-size:12px; letter-spacing:2px; margin:0 0 0 10px; opacity:.85; }
.diff-card.selected[data-diff="casual"] { --button-main:#d6a16e; --button-dark:#a56d43; --button-light:#f5d7a7; color:#40260f; }
.diff-card.selected[data-diff="easy"] { --button-main:#b8d995; --button-dark:#7eac66; --button-light:#e2f1b9; color:#29432e; }
.diff-card.selected[data-diff="normal"] { --button-main:#ffd16e; --button-dark:#cb9445; --button-light:#fff0ad; color:#674329; }
.diff-card.selected[data-diff="hard"] { --button-main:#ff8555; --button-dark:#cb5535; --button-light:#ffbd83; color:#542b25; }
.difficulty-strip-nav { display:flex; align-items:center; justify-content:center; margin-top:0; }
.difficulty-strip-nav > * + * { margin-left:18px; }
.diff-arrow {
  position:relative; width:38px; height:38px;
  font-size:0;
}
.diff-arrow svg { width:20px; height:20px; fill:currentColor; shape-rendering:crispEdges; }
.diff-arrow:disabled { opacity:.35; cursor:default; }
.difficulty-strip-dots { display:flex; }
.diff-strip-dot + .diff-strip-dot { margin-left:9px; }
.diff-strip-dot { position:relative; width:24px; height:28px; border-radius:0; cursor:pointer; background:none; border:0; padding:0; }
.diff-strip-dot::before { content:''; position:absolute; width:10px; height:10px; top:8px; left:6px; background:#a58058; border:2px solid #62392d; box-shadow:inset 2px 2px #d6b88a,0 2px #30262b; }
.diff-strip-dot.on::before { background:#ffd16e; border-color:#fff0ad; box-shadow:inset 2px 2px #fff6d5,0 2px #a56d43; }
.diff-strip-dot:focus-visible { outline:2px solid #fff1bc; outline-offset:2px; }
.diff-strip-dot:active { transform:translateY(2px); }
@media (pointer:coarse) { .difficulty-strip-nav .diff-arrow { display:none; } .difficulty-strip-nav .difficulty-strip-dots { margin-left:0; } }
@media (prefers-reduced-motion:reduce) { .difficulty-strip-track.animating, .diff-card, .diff-arrow { transition:none; } }
.play-mode-switch button { position:relative; flex:1; padding:11px 4px; color:#654931; font: bold 13px var(--ui-font); }
.play-mode-switch button + button { margin-left:8px; }
.reverse-mode-hint { flex-shrink:0; width:100%; margin:0 0 6px; padding:0 4px; color:#ffe6af; text-shadow:0 1px 2px #18243b; text-align:center; font-size:12px; line-height:1.5; animation:reverse-hint-in .18s ease-out; }
.reverse-mode-hint[hidden] { display:none; }
.reverse-mode-hint p { margin:0; }
.reverse-mode-hint .reverse-mode-hint-detail { color:#dfd2b8; font-size:11px; }
@keyframes reverse-hint-in { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .reverse-mode-hint { animation:none; } }
.play-mode-switch button[aria-pressed="true"] { --button-main:#ffd16e; --button-dark:#cb9445; --button-light:#fff0ad; color:#432c27; outline:2px solid #ffeaa7; outline-offset:1px; }
/* 倒反天罡 is an independent on/off toggle (not a play mode): pixel groove switch
   reusing the pixel-button shape language. The knob covers the inactive end icon:
   off covers the broccoli (steak shows), on covers the steak (broccoli shows). */
.play-mode-switch #mode-reverse { padding:0; height:40px; border:0; background:none; cursor:pointer; }
.play-mode-switch #mode-reverse[aria-pressed="true"] { --button-main:#ffe5a2; --button-dark:#d99a55; --button-light:#fff6d5; color:#654931; outline:none; }
.pxf { position:relative; isolation:isolate; }
.pxf::before, .pxf::after {
  --p:2px; --r:6px;
  content:''; position:absolute; z-index:-1; top:0; right:0; bottom:0; left:0; pointer-events:none;
  --pxf-shape: polygon(
    var(--r) 0, calc(100% - var(--r)) 0,
    calc(100% - var(--r)) var(--p), calc(100% - var(--p) - var(--p)) var(--p),
    calc(100% - var(--p) - var(--p)) calc(var(--p) + var(--p)), calc(100% - var(--p)) calc(var(--p) + var(--p)),
    calc(100% - var(--p)) var(--r), 100% var(--r),
    100% calc(100% - var(--r)), calc(100% - var(--p)) calc(100% - var(--r)),
    calc(100% - var(--p)) calc(100% - var(--p) - var(--p)), calc(100% - var(--p) - var(--p)) calc(100% - var(--p) - var(--p)),
    calc(100% - var(--p) - var(--p)) calc(100% - var(--p)), calc(100% - var(--r)) calc(100% - var(--p)),
    calc(100% - var(--r)) 100%, var(--r) 100%,
    var(--r) calc(100% - var(--p)), calc(var(--p) + var(--p)) calc(100% - var(--p)),
    calc(var(--p) + var(--p)) calc(100% - var(--p) - var(--p)), var(--p) calc(100% - var(--p) - var(--p)),
    var(--p) calc(100% - var(--r)), 0 calc(100% - var(--r)),
    0 var(--r), var(--p) var(--r),
    var(--p) calc(var(--p) + var(--p)), calc(var(--p) + var(--p)) calc(var(--p) + var(--p)),
    calc(var(--p) + var(--p)) var(--p), var(--r) var(--p));
  -webkit-clip-path: var(--pxf-shape); clip-path: var(--pxf-shape);
}
.pxf::before { background:#62392d; }
.px-groove::after { --p:2px; --r:4px; top:2px; right:2px; bottom:2px; left:2px;
  background:#5a3f33; box-shadow:inset 0 3px 5px rgba(0,0,0,.55), inset 0 -2px 0 rgba(255,240,200,.12); transition:background .18s; }
#mode-reverse[aria-pressed="true"].px-groove::after { background:#7c5aa8; }
.px-knob { position:absolute; pointer-events:none; }
.px-knob::before { background:#62392d; }
.px-knob::after { --p:2px; --r:4px; top:2px; right:2px; bottom:2px; left:2px;
  background:linear-gradient(to bottom, #fff6d5 0, #fff6d5 2px, #ffe5a2 2px, #ffe5a2 calc(100% - 3px), #d99a55 calc(100% - 3px));
  box-shadow:inset -2px 0 0 #d99a55; }
.capsule-switch .capsule-label { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; font:bold 13px var(--ui-font); color:#ffe5a2; text-shadow:1px 1px rgba(0,0,0,.5); }
.capsule-icon { position:absolute; top:50%; transform:translateY(-50%); width:20px; height:20px; display:flex; align-items:center; justify-content:center; }
.capsule-icon img, .capsule-icon canvas { width:20px; height:20px; image-rendering:pixelated; }
.capsule-veg { left:6px; }
.capsule-meat { right:6px; }
.capsule-switch .capsule-knob { top:5px; bottom:5px; width:26px; left:4px; transition:left .18s; }
.capsule-switch[aria-pressed="true"] .capsule-knob { left:calc(100% - 30px); }
.capsule-switch:active { transform:translateY(2px); }
@media (prefers-reduced-motion: reduce) { .capsule-switch .capsule-knob, .px-groove::after { transition:none; } }
.mode-badges { display:flex; margin-top:7px; }
.mode-badges span { display:inline-block; min-width:62px; margin-right:8px; padding:2px 7px; font-size:12px; line-height:18px; text-align:center; color:#9b7e64; border:2px solid #cdb393; border-radius:3px; background:#faecd5; box-shadow:inset 0 2px #fff9e9,0 1px #dfc6a3; }
.mode-badges .mode-current { background:#ffe29a; border-color:#d6a456; color:#4a321f; font-weight:bold; box-shadow:inset 0 2px #fff4bd,0 1px #b88043; }
.cassette {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  background: #1d3342;
  color: #fff0c2;
  padding: 5px 10px 4px;
  border: 4px solid #10212c;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px #3c566a, 0 4px #09151e;
  margin: 2px 0 4px;
}
.cassette[hidden] { display: none; }
.cassette-tape {
  position: relative;
  width: 100%;
  max-width: 413px;
  margin: 0 auto;
  background-image: url('../art/ui/cassette.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.35));
}
.cassette-tape::before { content:''; display:block; padding-top:57.6271186441%; }
.cassette-window {
  position: absolute;
  left: 38.01%;
  top: 32.77%;
  width: 23.97%;
  height: 14.29%;
  overflow: hidden;
  pointer-events: none;
}
.tape-spool {
  position: absolute;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  animation: none;
}
.tape-spool-left {
  left: -3.03%;
  top: -2.94%;
  width: 32.32%;
  height: 105.88%;
  background-image: url('../art/ui/cassette-spool-left.png');
  background-repeat: no-repeat;
  background-size: contain;
  animation: none;
}
.tape-spool-right {
  left: 54.55%;
  top: -2.94%;
  width: 47.47%;
  height: 105.88%;
  background-image: url('../art/ui/cassette-spool-right.png');
  background-repeat: no-repeat;
  background-size: contain;
  animation: none;
}
.tape-reel {
  display: block;
  position: absolute;
  top: 28.57%;
  width: 12.59%;
  height: 21.85%;
  background-image: url('../art/ui/cassette-reel.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transform-origin: 50% 50%;
  animation: none;
}
.tape-reel-left {
  left: 22.52%;
}
.tape-reel-right {
  left: 64.41%;
}
.is-playing .tape-reel {
  animation: reel-spin 2s steps(48) infinite;
}
.is-playing .tape-spool-left {
  animation: tape-step-left 0.45s steps(1) infinite;
}
.is-playing .tape-spool-right {
  animation: tape-step-right 0.45s steps(1) infinite;
}
.tape-bridge {
  display: none;
}
.cassette-label {
  position: absolute;
  left: 20%;
  top: 11%;
  width: 60%;
  height: 15%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  pointer-events: none;
}
.cassette-label strong {
  display: block;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: bold 16px/1.3 var(--ui-font);
  color: #432b21;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.cassette-edition {
  position: absolute;
  right: 20%;
  top: 22%;
  display: block;
  font: bold 6px/1 var(--ui-font);
  color: #a65b26;
  letter-spacing: .5px;
  white-space: nowrap;
  pointer-events: none;
}
.clip-timeline {
  position: absolute;
  left: 8%;
  top: 57%;
  width: 84%;
  height: 14%;
  box-sizing: border-box;
  background: repeating-linear-gradient(90deg, #13212b 0, #13212b 7px, #425866 8px, #13212b 9px);
  border: 2px solid #283d4c;
  border-radius: 4px;
  margin: 0;
}
.clip-selection {
  position: absolute;
  height: 100%;
  display: flex;
  background: #e89e47;
  border: 2px solid #7d441c;
  box-sizing: border-box;
  min-width: 52px;
}
.clip-selection button {
  touch-action: none;
  user-select: none;
  padding: 0;
  border: 0;
  color: #382b2b;
  background: transparent;
  height: 100%;
}
#clip-start, #clip-end {
  flex: 0 0 28px;
  background: #ffe5a2;
  border: 0;
  color: #5c351c;
  font-weight: bold;
  cursor: ew-resize;
  box-shadow: inset 1px 0 #fff3c9, inset -1px 0 #c28b48;
}
#clip-move {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  color: #3d2516;
  font-weight: bold;
  cursor: grab;
}
.cassette-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: bold 11px var(--ui-font);
  padding: 0 4px;
}
.cassette-controls > * + * { margin-left:6px; }
#clip-time {
  flex-shrink: 0;
  white-space: nowrap;
  color: #ffe5a2;
  text-shadow: 0 1px 2px #0a141b;
}
#clip-preview {
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 84px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0 8px;
  color: #493a30;
  font: bold 12px/16px var(--ui-font);
}
#clip-status {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 0 6px;
  color: #b7cbce;
  text-align: center;
}
@keyframes reel-spin {
  to { transform: rotate(360deg); }
}
@keyframes tape-step-left {
  0%, 100% {
    transform: translate(1px, 0);
    transform: translate(calc(100% / 32), 0);
  }
  33.33% {
    transform: translate(1px, 1px);
    transform: translate(calc(100% / 32), calc(100% / 36));
  }
  66.67% {
    transform: translate(0, 1px);
    transform: translate(0, calc(100% / 36));
  }
}
@keyframes tape-step-right {
  0%, 100% {
    transform: translate(-1px, 0);
    transform: translate(calc(-100% / 47), 0);
  }
  33.33% {
    transform: translate(-1px, -1px);
    transform: translate(calc(-100% / 47), calc(-100% / 36));
  }
  66.67% {
    transform: translate(0, -1px);
    transform: translate(0, calc(-100% / 36));
  }
}
@media (prefers-reduced-motion: reduce) {
  .tape-reel, .tape-spool,
  .is-playing .tape-reel,
  .is-playing .tape-spool-left,
  .is-playing .tape-spool-right {
    animation: none;
    transform: none;
  }
}