@font-face {
  font-family: GothicByte;
  src: url('../../libs/fonts/GothicByte.ttf') format('truetype');
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: var(--ui-font);
  color: #161616;
  background: #f0f0f0;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; font-family: var(--ui-font); }
html { overflow-x: clip; }
body { min-height: 100vh; min-height: 100svh; overflow-x: clip; }

.player-page {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 24px;
}
.player-page::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: '';
  pointer-events: none;
  background: url('../img/goblin-castle.gif') center / cover no-repeat;
  filter: grayscale(100%) brightness(1.35);
}

.player-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 28px;
  width: min(760px, 100%);
  min-height: 390px;
  padding: 30px;
  border: 3px solid #111;
  background: #fff;
  box-shadow: 8px 8px 0 #111;
}
.art { justify-self: center; width: 100%; max-width: 230px; }
.ada-image { display: block; width: 100%; height: auto; image-rendering: pixelated; filter: brightness(var(--ghost-brightness,.55)); transition: filter 250ms steps(4,end); }
@media (min-width: 601px) { .ada-image { transform: translateX(-35px); } }
.deck { min-width: 0; width: 100%; }
.deck h1 {
  margin: 0 0 26px;
  padding-bottom: 12px;
  border-bottom: 2px solid #ccc;
  color: #111;
  font: 22px/1.5 var(--ui-font);
  letter-spacing: .4px;
}
.now {
  min-height: 30px;
  margin-bottom: 19px;
  overflow: hidden;
  color: #111;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 15px/1.5 var(--ui-font);
}
.transport { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 20px; }
.transport button {
  width: 40px;
  height: 38px;
  border: 3px solid #111;
  border-radius: 0;
  background: #f5f5f5;
  color: #111;
  box-shadow: 4px 4px 0 #111;
  cursor: pointer;
  font: 16px var(--ui-font);
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
  transition: transform 90ms steps(3, end), box-shadow 90ms steps(3, end), background-color 90ms steps(3, end);
}
.transport button:hover { background: #ddd; }
.transport button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #111; }
.transport .play { width: 48px; height: 46px; border-color: #111; background: #111; color: #fff; }
.transport .play:hover { background: #333; }
.seek {
  position: relative;
  display: flex;
  align-items: center;
  height: 18px;
  padding: 3px;
  border: 2px solid #111;
  background: #ddd;
  box-shadow: 3px 3px 0 #111;
  cursor: pointer;
  touch-action: pan-y;
}
.seek span { display: block; width: 0; height: 8px; background: #111; }
.times { display: flex; justify-content: space-between; margin-top: 7px; color: #555; font: 14px var(--ui-font); }
.load {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 20px;
  padding: 11px 13px;
  border: 2px solid #111;
  background: #fff;
  color: #111;
  box-shadow: 3px 3px 0 #111;
  cursor: pointer;
  font: 14px/1.4 var(--ui-font);
  transition: transform 90ms steps(3, end), box-shadow 90ms steps(3, end), background-color 90ms steps(3, end);
}
.load:hover { background: #e9e9e9; }
.load:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #111; }

.playlist { max-height: 100px; margin-top: 14px; overflow: auto; overscroll-behavior: contain; }
.track {
  display: block;
  width: 100%;
  padding: 7px 5px;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid #ddd;
  background: transparent;
  color: #333;
  cursor: pointer;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 14px var(--ui-font);
}
.track::before { content: '▶ '; color: #111; }
.track.selected { background: #e8e8e8; color: #111; }
.track.selected::before { content: '♪ '; }
:focus-visible { outline: 3px solid #111; outline-offset: 3px; }

.corner-widget { position: absolute; z-index: 5; top: calc(100% + 37px); left: -3px; width: 62px; height: 62px; }
.corner-tile {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 3px solid #111;
  background: #fff;
  box-shadow: 8px 8px 0 #111;
  cursor: pointer;
  transition: transform 90ms steps(3, end), box-shadow 90ms steps(3, end);
}
.corner-tile { color: #111; font: 40px/1 var(--ui-font); }
.corner-tile span { transform: translateY(4px); }
.corner-tile:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #111; }
.tile-message { position: absolute; bottom: calc(100% + 5px); left: calc(100% - 32px); display:flex; flex-direction:column; align-items:center; gap:3px; width:116px; height:auto; overflow:visible; }
.tile-message[hidden] { display: none; }
.tile-message img { display: block; width:68px; height:61px; object-fit: fill; image-rendering: pixelated; }.ghost-quote{display:none;max-width:116px;padding:3px 4px;border:2px solid #111;background:#fff;color:#111;box-shadow:2px 2px 0 #111;text-align:center;font:14px var(--ui-font);white-space:nowrap}
.tile-message:not([hidden]) { animation: bubble-rise .18s ease-out; }
@keyframes bubble-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }





@media (max-height: 560px) and (max-width: 900px) {
  .player-page { align-content: start; padding-top: max(16px, env(safe-area-inset-top)); }
  .player-card { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Pixel equalizer, track lengths, and touch feedback. */
.visualizer{display:flex;justify-content:center;align-items:flex-end;gap:3px;height:34px;margin:9px auto 2px;overflow:hidden}
.visualizer i{display:block;width:4px;height:3px;background:#111;image-rendering:pixelated}
.player-status{margin-top:8px;color:#111;font:14px/1.5 var(--ui-font);text-align:center}
.player-status:empty{display:none}
.track{display:flex;align-items:center;gap:8px}
.track-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-duration{flex:none;font:14px var(--ui-font);color:#555}



/* CURSE sound dial: stepped pixel styling. */
.curse-control{position:relative;max-width:250px;margin:10px auto 14px;padding:7px 9px;border:2px solid #111;background:#f5f5f5;box-shadow:3px 3px 0 #111}
.curse-heading{display:flex;justify-content:space-between;color:#111;font:14px var(--ui-font)}
.curse-dial-field{display:flex;justify-content:space-between;align-items:center;gap:5px;min-height:54px}
.curse-scale{color:#555;font:14px var(--ui-font);white-space:nowrap}
.curse-dial{position:relative;display:grid;place-items:center;flex:0 0 92px;height:54px}
.curse-range{position:absolute;z-index:3;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:none}
.curse-knob{position:relative;width:42px;height:42px}
.curse-knob-shadow,.curse-knob-face{position:absolute;inset:0;clip-path:polygon(25% 0,75% 0,75% 10%,90% 10%,90% 25%,100% 25%,100% 75%,90% 75%,90% 90%,75% 90%,75% 100%,25% 100%,25% 90%,10% 90%,10% 75%,0 75%,0 25%,10% 25%,10% 10%,25% 10%)}
.curse-knob-shadow{background:#111;transform:translate(3px,3px)}
.curse-knob-face{z-index:1;background:#111}
.curse-knob-face::before{position:absolute;inset:3px;content:'';background:#eee;clip-path:polygon(25% 0,75% 0,75% 10%,90% 10%,90% 25%,100% 25%,100% 75%,90% 75%,90% 90%,75% 90%,75% 100%,25% 100%,25% 90%,10% 90%,10% 75%,0 75%,0 25%,10% 25%,10% 10%,25% 10%)}
.curse-needle{position:absolute;z-index:2;top:5px;left:50%;width:3px;height:13px;background:#111;transform:translateX(-50%) rotate(var(--curse-angle,-135deg));transform-origin:50% 16px}
.curse-mode{min-height:10px;color:#111;text-align:center;font:14px var(--ui-font)}
.curse-range:focus-visible{opacity:0;outline:3px solid #a52c3b;outline-offset:2px}



/* Minecraft-inspired ghost health using the supplied pixel sprite sheet. */
.art{position:relative}.ghost-health{position:absolute;top:-57px;left:50%;z-index:1;transform:translateX(-50%);width:165px;height:33px}
.health-meter{display:flex;width:165px;height:33px;background:none;filter:grayscale(1)}.health-heart{flex:0 0 33px;width:33px;height:33px;background-image:url('../img/health-ui.png');background-repeat:no-repeat;background-size:99px 231px;image-rendering:pixelated}.health-heart[data-state="full"]{background-position:0 0}.health-heart[data-state="half"]{background-position:-66px -33px}.health-heart[data-state="empty"]{background-position:0 -198px}@media (min-width:601px){.ghost-health{left:calc(50% - 15px)}}
.art.ghost-awaken .ada-image{animation:ghost-awaken 1.1s steps(5,end) 1}
@keyframes ghost-awaken{0%,100%{filter:brightness(var(--ghost-brightness,1)) drop-shadow(0 0 0 transparent)}35%{filter:brightness(1.7) drop-shadow(0 0 7px #fff)}65%{filter:brightness(1.25) drop-shadow(0 0 4px #fff)}}.health-notice{position:absolute;top:65%;left:50%;z-index:5;transform:translate(-50%,-50%);padding:4px 6px;border:2px solid #111;background:#fff;color:#111;box-shadow:3px 3px 0 #111;font:14px var(--ui-font);white-space:nowrap;pointer-events:none}
.health-notice[hidden]{display:none}
.health-notice.show{animation:health-notice-pop 180ms steps(3,end) both}
@keyframes health-notice-pop{from{opacity:0;transform:translate(-50%,calc(-50% + 5px)) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.donation-link{margin-right:auto;margin-left:auto;color:#111;text-align:center;text-decoration:none}
.upload-note{display:block;width:100%;max-width:260px;margin:7px auto 0;color:#555;text-align:center;font:14px/1.5 var(--ui-font)}

.art.secret-unlocked .ada-image{animation:secret-burst 1s steps(4,end) 1}
@keyframes secret-burst{0%,100%{filter:brightness(var(--ghost-brightness,1))}25%{filter:brightness(2) invert(1)}50%{filter:brightness(1.8) drop-shadow(0 0 10px #fff)}75%{filter:brightness(1.2) invert(0)}}
.player-page::after{position:fixed;z-index:-1;inset:0;content:'';background:#fff;opacity:0;pointer-events:none}
.player-page.full-flash::after{animation:page-full-flash .75s steps(4,end) 1}
@keyframes page-full-flash{0%,100%{opacity:0}20%,48%{opacity:.72}34%,66%{opacity:.12}}


/* Full-screen game-style start screen. */
.start-screen{position:fixed;z-index:9999;inset:0;display:grid;place-items:center;background:url('../img/goblin-castle.gif') center / cover no-repeat;filter:grayscale(100%) brightness(1.35);opacity:1;transition:opacity 180ms steps(4,end)}
.start-screen[hidden]{display:none}
.start-screen.is-leaving{opacity:0;pointer-events:none}
.start-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:110px;height:64px;padding:5px;border:3px solid #111;border-radius:0;background:#fff;color:#111;box-shadow:6px 6px 0 #111;cursor:pointer;font:16px var(--ui-font);transition:transform 90ms steps(3,end),box-shadow 90ms steps(3,end),background-color 90ms steps(3,end);-webkit-font-smoothing:none}
.start-button:hover{background:#e5e5e5}
.start-button:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #111}
@media(prefers-reduced-motion:reduce){.start-screen{transition:none}.start-button{transition:none}}

/* Keep the ghost health row within its narrow column on phones. */


.curse-step{display:grid;flex:0 0 28px;place-items:center;width:28px;height:30px;padding:0;border:2px solid #111;border-radius:0;background:#fff;color:#111;box-shadow:2px 2px 0 #111;cursor:pointer;font:14px/1 var(--ui-font);transition:transform 90ms steps(3,end),box-shadow 90ms steps(3,end),background-color 90ms steps(3,end);-webkit-font-smoothing:none}
.curse-step:hover{background:#e5e5e5}
.curse-step:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #111}