/* ==========================================================================
   Hitster – Pflaumen-Filz, Schallplatte, Zeitleisten
   ========================================================================== */
.hs { position: absolute; inset: 6px 8px 8px; display: flex; flex-direction: column; gap: 12px; padding: 6px 12px 14px; overflow-x: hidden; overflow-y: auto; color: #f5e9ef; }
.hs-rail { margin: 0 -6px; }
.hs-c { display: inline-flex; gap: 2px; margin-left: 5px; vertical-align: 1px; }
.hs-c i, i.coin { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--mustard); box-shadow: inset 0 0 0 1.5px var(--mustard-d); }
i.coin { width: 11px; height: 11px; margin-left: 3px; vertical-align: -1px; }

/* Plattenspieler */
.hs-deck { position: relative; flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px; }
.hs-vinyl { --v: 92px; position: relative; width: var(--v); height: var(--v); flex: none; border-radius: 50%;
  background: radial-gradient(circle, #c4472f 0 17%, #1a1216 17.5% 19%, #241a1f 19.5% 100%);
  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, .7), inset 0 0 0 2px #120c0f; }
.hs-vinyl::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 3px, rgba(255, 255, 255, .04) 3px 4px); -webkit-mask: radial-gradient(circle, transparent 23%, #000 24%); mask: radial-gradient(circle, transparent 23%, #000 24%); }
.hs-vinyl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 20%, rgba(255, 255, 255, .12) 25%, transparent 32% 70%, rgba(255, 255, 255, .08) 75%, transparent 80%); }
.hs-vinyl i { position: absolute; left: 50%; top: 50%; width: 6%; height: 6%; transform: translate(-50%, -50%); border-radius: 50%; background: #f5e9ef; z-index: 2; }
.hs-vinyl.spin { animation: hsSpin 1.8s linear infinite; }
.hs-vinyl.spin::after { animation: none; }
@keyframes hsSpin { to { transform: rotate(360deg); } }
.hs-eq { display: inline-flex; gap: 3px; align-items: flex-end; height: 22px; }
.hs-eq i { width: 4px; background: var(--mustard); border-radius: 2px; animation: hsEq .9s ease-in-out infinite; }
.hs-eq i:nth-child(2) { animation-delay: -.3s; } .hs-eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes hsEq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.hs-dt { font: 800 15px var(--display); color: #f5e9ef; }
.hs-left-n { position: absolute; right: 4px; top: 4px; font: 800 11px var(--text); color: #c9a9bb; letter-spacing: .06em; }
.hs-left-n::before { content: "♪ "; }
.hs-ctrl { display: flex; gap: 6px; }
.hs-ctrl .iconbtn { width: 38px; height: 38px; }

/* Zeitleiste */
.hs-focus { flex: none; display: flex; flex-direction: column; gap: 8px; }
.hs-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 99px; background: rgba(0, 0, 0, .25); align-self: center; }
.hs-tabs button { display: flex; align-items: center; gap: 6px; border: 0; padding: 4px 12px 4px 4px; border-radius: 99px; background: transparent; color: #e6cfda; font: 700 17px/1 var(--hand); cursor: pointer; }
.hs-tabs button .av { --s: 22px; }
.hs-tabs button.on { background: var(--grain), var(--paper); color: var(--ink); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.hs-tlw { min-width: 0; }
.hs-tlh { display: flex; align-items: center; gap: 8px; margin: 0 2px; font: 700 22px/1 var(--hand); }
.hs-tlh .av { --s: 26px; }
.hs-tlh span { margin-left: auto; font: 800 13px var(--display); color: #c9a9bb; }
.hs-tl { position: relative; display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 18px 6px 18px; scroll-snap-type: x proximity; scrollbar-width: none; }
.hs-tl::-webkit-scrollbar { display: none; }
.hs-card { --cc: var(--teal); flex: none; width: 92px; height: 124px; padding: 8px; border-radius: 8px; scroll-snap-align: center; display: flex; flex-direction: column; justify-content: space-between; color: #fbf6ea;
  background: var(--grain), var(--cc); box-shadow: inset 0 0 0 2px rgba(251, 246, 234, .55), 0 3px 6px rgba(0, 0, 0, .35), 0 10px 14px -6px rgba(0, 0, 0, .5); position: relative; }
.fx-fly .hs-card { width: 100% !important; height: 100% !important; }
.hs-card .yr { font: 800 30px/1 var(--display); font-variation-settings: "opsz" 72, "SOFT" 30; letter-spacing: -.02em; text-align: center; }
.hs-card .t { font: 700 11px/1.2 var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hs-card .a { font: 600 10px/1.2 var(--text); opacity: .8; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hs-card.d50, .hs-card.d60 { --cc: #2e7b77; } .hs-card.d70 { --cc: #c08a2a; } .hs-card.d80 { --cc: #b9442f; } .hs-card.d90 { --cc: #6e3d5b; }
.hs-card.d00 { --cc: #2d3d63; } .hs-card.d10 { --cc: #5d6b34; } .hs-card.d20 { --cc: #a85b30; }
.hs-card.new { box-shadow: inset 0 0 0 2px rgba(251, 246, 234, .55), 0 0 0 3px var(--mustard), 0 14px 18px -6px rgba(0, 0, 0, .6); }
.hs-card.mystery { --cc: #1f1519; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px var(--mustard), 0 10px 18px -6px rgba(0, 0, 0, .6); transform: translateY(-6px) rotate(-2deg); }
.hs-card.mystery .hs-vinyl { --v: 62px; }
.hs-slot { flex: none; width: 12px; position: relative; border: 0; background: none; padding: 0; cursor: default; display: flex; align-items: center; justify-content: center; transition: width .25s var(--spring); }
.hs-slot.can { width: 36px; cursor: pointer; }
.hs-slot.can::before { content: "+"; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 800 18px/1 var(--display); color: var(--ink); background: var(--grain), var(--paper); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); transition: transform .2s var(--spring); }
.hs-slot.can:hover::before { transform: scale(1.15); }
.hs-slot.taken::before { content: none; }
.hs-slot .tok { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; animation: popIn .35s var(--spring); }
.hs-slot .tok .av { --s: 30px; }
.hs-slot.right .tok .av { box-shadow: 0 0 0 3px var(--teal), 0 2px 4px rgba(0, 0, 0, .4); }
.hs-slot.wrong .tok .av { box-shadow: 0 0 0 3px var(--red), 0 2px 4px rgba(0, 0, 0, .4); filter: grayscale(.6); }
.hs-slot.correct::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: 50%; width: 4px; transform: translateX(-50%); border-radius: 4px; background: var(--teal); box-shadow: 0 0 0 2px rgba(46, 123, 119, .35); }
.hs-empty { width: 92px; height: 124px; border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }
.hs-tl.mini { padding: 8px 4px 10px; gap: 6px; }
.hs-tl.mini .hs-card { width: 52px; height: 64px; padding: 4px; border-radius: 6px; }
.hs-tl.mini .hs-card .yr { font-size: 17px; } .hs-tl.mini .hs-card .t { font-size: 8px; -webkit-line-clamp: 1; } .hs-tl.mini .hs-card .a { display: none; }
.hs-tl.mini .hs-empty { width: 52px; height: 64px; }

/* Aktion */
.hs-actw { flex: none; display: flex; flex-direction: column; gap: 8px; }
/* Knöpfe unten am Rand (Daumen), wie in allen Spielen; bei langer Zeitleiste bleiben sie sichtbar */
.hs.player .hs-actw { margin-top: auto; position: sticky; bottom: 0; z-index: 4; padding-top: 6px; }
.hs-cue { display: flex; justify-content: center; }
.hs-btns { display: flex; gap: 8px; justify-content: center; }
.hs-btns .btn { flex: none; }
.hs-btns .btn.grow { flex: 1; max-width: 340px; }

/* Auflösung */
.hs-reveal { flex: none; display: flex; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 10px; color: var(--ink); background: var(--grain), var(--card); box-shadow: var(--shadow-2); animation: hsReveal .6s var(--spring) .55s both; }
.hs-revw:empty { display: none; }
@keyframes hsReveal { from { opacity: 0; transform: perspective(700px) rotateX(70deg) translateY(-20px); } }
.hs-reveal .cover { width: 72px; height: 72px; flex: none; border-radius: 6px; background: #241a1f center / cover no-repeat; box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .5); }
.hs-reveal .info { flex: 1; min-width: 0; }
.hs-reveal .yr { font: 800 36px/1 var(--display); font-variation-settings: "opsz" 144, "SOFT" 30; color: var(--red); }
.hs-reveal .t { font: 800 16px/1.2 var(--display); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-reveal .a { font: 600 13px var(--text); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-reveal .verdict { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font: 800 11px var(--text); letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; color: #fff; background: var(--teal); }
.hs-reveal .verdict .ic { width: 14px; height: 14px; }
.hs-reveal .verdict.no { background: var(--red); }
.hs-reveal .verdict .av { --s: 18px; }

/* Tisch: alle Zeitleisten, die aktuelle groß */
.hs.table { display: grid; grid-template-columns: minmax(260px, 28%) 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 16px 26px; padding: 6px 24px 18px; overflow: hidden; }
.hs.table .hs-rail { grid-column: 1 / -1; }
.hs.table .hs-left { display: flex; flex-direction: column; justify-content: center; gap: 18px; min-height: 0; }
.hs.table .hs-deck { flex-direction: column; }
.hs.table .hs-vinyl { --v: clamp(150px, 17vw, 240px); }
.hs.table .hs-dt { font-size: 22px; }
.hs.table .hs-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; overflow-y: auto; padding-right: 4px; }
.hs.table .hs-tlw { padding: 8px 12px 0; border-radius: 12px; background: rgba(0, 0, 0, .18); transition: background .4s; }
.hs.table .hs-tlw.focus { background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 3px var(--turn-ring); }
.hs.table .hs-tlw.focus .hs-tlh { font-size: 32px; } .hs.table .hs-tlw.focus .hs-tlh .av { --s: 42px; } .hs.table .hs-tlw.focus .hs-tlh span { font-size: 18px; }
.hs.table .hs-tlw.focus .hs-card { width: clamp(100px, 8.2vw, 136px); height: clamp(130px, 10.8vw, 178px); }
.hs.table .hs-tlw.focus .hs-card .yr { font-size: clamp(32px, 2.8vw, 44px); }
.hs.table .hs-tlw.focus .hs-card .t { font-size: 13px; } .hs.table .hs-tlw.focus .hs-card .a { font-size: 12px; }
.hs.table .hs-tlw.focus .hs-tl { padding: 26px 8px 22px; }
.hs.table .hs-tlw.focus .hs-slot .tok .av { --s: 42px; }
.hs.table .hs-tlw.small .hs-tlh { font-size: 22px; } .hs.table .hs-tlw.small .hs-tlh .av { --s: 28px; }
.hs.table .hs-reveal { padding: 16px; gap: 18px; }
.hs.table .hs-reveal .cover { width: clamp(90px, 9vw, 140px); height: clamp(90px, 9vw, 140px); }
.hs.table .hs-reveal .yr { font-size: clamp(44px, 4.6vw, 70px); }
.hs.table .hs-reveal .t { font-size: clamp(18px, 2vw, 26px); } .hs.table .hs-reveal .a { font-size: 17px; }

/* Lobby-Einstellungen */
.hs-cfg { padding: 14px !important; gap: 12px; text-align: left; }
.hs-cfg .row { display: flex; flex-direction: column; gap: 8px; }
.hs-cfg .row > span { font: 800 10.5px var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.hs-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.hs-theme { text-align: left; padding: 8px 10px; border-radius: 8px; border: 0; cursor: pointer; color: var(--ink); background: rgba(43, 35, 30, .06); box-shadow: inset 0 0 0 1px var(--line); }
.hs-theme b { display: block; font: 800 14px var(--display); }
.hs-theme small { font: 600 11px var(--text); color: var(--ink-3); }
.hs-theme.on { background: var(--ink); color: var(--paper); box-shadow: none; }
.hs-theme.on small { color: var(--paper-3); }
.hs-theme[disabled] { cursor: default; }
.hs-input { display: flex; gap: 8px; }
.hs-input input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 8px; border: 0; color: var(--ink); background: rgba(43, 35, 30, .07); box-shadow: inset 0 0 0 1px var(--line-2); font: 600 14px var(--text); outline: none; user-select: text; -webkit-user-select: text; }
.hs-input input:focus { box-shadow: inset 0 0 0 2px var(--teal); }
.hs-status { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(46, 123, 119, .1); font: 600 13px var(--text); color: var(--ink-2); }
.hs-status b { color: var(--ink); }
.hs-status .ic { color: var(--teal); flex: none; }
.hs-status.warn { background: rgba(196, 71, 47, .08); }
.hs-status.warn .ic { color: var(--red); }
.hs-bar { height: 6px; border-radius: 99px; background: rgba(43, 35, 30, .1); overflow: hidden; flex: 1; }
.hs-bar i { display: block; height: 100%; background: var(--teal); transition: width .4s; }
.hs-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.hs-list button { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 0; border-radius: 8px; background: rgba(43, 35, 30, .05); cursor: pointer; text-align: left; color: var(--ink); font: 700 13.5px var(--text); }
.hs-list button img { width: 34px; height: 34px; border-radius: 4px; object-fit: cover; background: var(--paper-3); }
.hs-list button small { margin-left: auto; color: var(--ink-3); font-weight: 600; }
.hs-list button.on { box-shadow: inset 0 0 0 2px var(--teal); }
.hs-sp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 13px var(--text); color: var(--ink-2); }
.hs-sp .ic { color: #1db954; }
.hs-sp .grow { flex: 1; }
.hs-fine { font: 500 11.5px/1.4 var(--text); color: var(--ink-3); }

/* Musik-Freigabe auf dem Musikgerät */
.hs-unlock { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); transform: translateX(-50%); z-index: 85; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 10px; color: var(--ink); background: var(--grain), var(--card); box-shadow: var(--shadow-2); border-left: 5px solid var(--mustard); font: 700 14px var(--text); animation: popIn .4s var(--spring); max-width: 94vw; }