@import "_tokens-iogM3U0.css";

:root{
  --rule:#c7ccc4;
  --input-bg:#ffffff;
  --row-alt:#eceee9;
  --good:#2f7d4f;
  --good-bg:#dcecdf;
  --good-ink:#183c26;
  --close:#a9760e;
  --close-bg:#f3e6c6;
  --close-ink:#4a350a;
  --miss-bg:#e2e4de;
  --miss-ink:#6b716a;
  --shadow: 0 1px 0 rgba(28,35,32,.05);
  --focus: 0 0 0 3px rgba(193,68,14,.28);
}
:root[data-theme="dark"]{
  --rule:#343a35;
  --input-bg:#171a17;
  --row-alt:#262b25;
  --good:#5fc98a;
  --good-bg:#173324;
  --good-ink:#bdf0d3;
  --close:#e0b458;
  --close-bg:#3a2f12;
  --close-ink:#f3ddab;
  --miss-bg:#2a2e28;
  --miss-ink:#8b9187;
  --shadow: 0 1px 0 rgba(0,0,0,.3);
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Work Sans",system-ui,-apple-system,sans-serif;
  padding-inline:16px;
  padding-block:28px 60px;
}
h1,h2,h3{text-wrap:balance;}
::selection{background:var(--accent);color:var(--accent-ink);}

.wrap{max-width:680px;margin-inline:auto;display:flex;flex-direction:column;gap:16px;}

/* Masthead */
.masthead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  border-bottom:3px solid var(--ink);
  padding-bottom:10px;
  flex-wrap:wrap;
}
.brand{display:flex;align-items:baseline;gap:10px;}
.brand .logo{
  font-family:"Anton",sans-serif;
  font-size:clamp(2rem,7vw,2.9rem);
  letter-spacing:.01em;
  line-height:.85;
  color:var(--ink);
}
.brand .logo em{font-style:normal;color:var(--accent);}
.kicker{
  font-family:"IBM Plex Mono",monospace;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.issue{
  font-family:"IBM Plex Mono",monospace;
  font-size:.72rem;
  color:var(--ink-soft);
  text-align:right;
  line-height:1.5;
}
.issue b{color:var(--ink);font-weight:600;}

h2 {
    text-align: center;
}


/* Guess panel */
.panel{
  background:var(--panel);
  border:1px solid var(--panel-edge);
  border-radius:6px;
  box-shadow:var(--shadow);
  padding:18px;
  display:flex;flex-direction:column;gap:14px;
    box-shadow: 5px 8px 20px 0px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 5px 8px 20px 0px rgba(0, 0, 0, 0.3);
}

.guessrow{position:relative;display:flex;gap:8px;}
#guessInput{
  flex:1;
  min-width:0; /* sonst erzwingt der implizite Flex-Item-min-width das Input auf seine
                  intrinsische Breite und drückt den Guess-Button auf schmalen Viewports raus */
  font-family:"Work Sans",sans-serif;
  font-size:1rem;
  padding:12px 14px;
  background:var(--input-bg);
  border:1.5px solid var(--panel-edge);
  border-radius:4px;
  color:var(--ink);
}
#guessInput:focus-visible{outline:none;border-color:var(--accent);box-shadow:var(--focus);}
#guessInput:disabled{opacity:.5;}
.go-btn{
  flex-shrink:0;
  font-family:"IBM Plex Mono",monospace;
  font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--ink);color:var(--panel);
  border:none;border-radius:4px;padding:0 18px;cursor:pointer;
}
.go-btn:disabled{opacity:.4;cursor:default;}
.go-btn:focus-visible{outline:none;box-shadow:var(--focus);}

.suggest{
  position:absolute;bottom:calc(100% + 4px);left:0;right:0;
  background:var(--panel);border:1px solid var(--panel-edge);border-radius:4px;
  max-height:220px;overflow-y:auto;z-index:5;box-shadow:0 -8px 20px rgba(0,0,0,.12);
}
.suggest button{
  display:block;width:100%;text-align:left;padding:9px 14px;background:none;border:none;
  font-family:"Work Sans",sans-serif;font-size:.92rem;color:var(--ink);cursor:pointer;
}
.suggest button:hover,.suggest button.active{background:var(--row-alt);}
.suggest[hidden]{display:none;}

.guess-meta{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--ink-faint);
  display:flex;justify-content:space-between;
}

/* Table of guesses */
.chart{border-top:1px solid var(--rule);}
.chart-head,.chart-row{
  display:grid;
  grid-template-columns:1.9fr 1fr .82fr .72fr .72fr .95fr;
  gap:5px;
  align-items:stretch;
}
.chart-head{
  font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);padding-block:8px 6px;
}
.chart-head[hidden]{display:none;}
.chart-row{padding-block:5px 0;}
.chart-row + .chart-row{margin-top:5px;}
.cell{
  border-radius:3px;padding:8px 8px;
  font-size:.82rem;line-height:1.2;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--miss-bg);color:var(--miss-ink);
  min-height:40px;
}
.cell.name{
  justify-content:flex-start;text-align:left;
  background:none;color:var(--ink);font-weight:600;padding-left:2px;
}
.cell.name .artist-name{
    text-decoration: line-through;
    color: var(--accent);
}
.cell .num{
  font-family:"IBM Plex Mono",monospace;color:var(--ink-faint);font-weight:400;margin-right:7px;
}
.cell.good{background:var(--good-bg);color:var(--good-ink);font-weight:600;}
.cell.close{background:var(--close-bg);color:var(--close-ink);font-weight:600;}
.cell .arrow{font-size:1rem;margin-left:3px;}
.empty-hint{
  font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--ink-faint);
  padding:14px 2px;
}
.chart-row.reveal-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.reveal-row .cell.name{flex:1;background:none;}
.reveal-row .reveal-label{font-weight:400;color:var(--ink-faint);}
.reveal-row .reveal-cost{
  flex:none;width:auto;min-height:0;
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--ink-faint);
  background:none;padding:0;
}

/* Discography ticket */
.ticket-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.ticket-head h2{
  font-family:"Anton",sans-serif;font-size:1.05rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink);margin:0;
    text-align: left;
}
.ticket-head span{font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--ink-faint);}
.discog{display:flex;flex-direction:column;gap:6px;}
.clue-value .year{
  font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

/* Clue panel: 5 attribute rows + 4 release rows, each independently
   revealable (free on a matching guess, or bought for rounds). */
.clue-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;background:var(--row-alt);border-radius:4px;
}
.clue-row.revealed{background:var(--good-bg);}
.clue-kind{font-size:.85rem;color:var(--ink-faint);width:16px;text-align:center;flex-shrink:0;}
.clue-label{
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);min-width:60px;flex-shrink:0;
}
.clue-value{
  flex:1;font-family:"IBM Plex Mono",monospace;font-size:.86rem;letter-spacing:.02em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.clue-value.placeholder{color:var(--ink-faint);}
.clue-value .mask{color:var(--ink-faint);}
.clue-actions{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;}

/* Songtitel-Zeilen: nie abschneiden (auch lange Titel brauchen mehrere
   Zeilen), Reveal-Buttons deshalb unter statt neben dem Titel. */
.clue-row.release-row{flex-direction:column;align-items:stretch;gap:8px;}
.clue-row.release-row .clue-title-line{display:flex;align-items:flex-start;gap:10px;}
.clue-row.release-row .clue-value{
  white-space:normal;overflow-wrap:anywhere;overflow:visible;text-overflow:clip;
}
.clue-row.release-row .clue-actions{padding-left:26px;}
.clue-btn{
  font-family:"IBM Plex Mono",monospace;font-size:.64rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:6px 9px;border-radius:4px;border:1px solid var(--panel-edge);background:var(--panel);color:var(--ink);
  cursor:pointer;white-space:nowrap;
}
.clue-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.clue-btn:disabled{opacity:.4;cursor:default;}
.clue-btn .cost{color:var(--accent);margin-left:3px;}

/* Result banner */
.result{
  display:none;flex-direction:column;gap:10px;
  border-radius:6px;padding:16px 18px;
  background:var(--good-bg);color:var(--good-ink);
}
.result.show{display:flex;}
.result.lose{background:var(--close-bg);color:var(--close-ink);}
.result h2{font-family:"Anton",sans-serif;font-size:1.4rem;letter-spacing:.02em;margin:0;text-transform:uppercase;}
.result p{margin:0;font-size:.92rem;}
.result .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px;}
.result button{
  font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;
  padding:9px 14px;border-radius:4px;border:1.5px solid currentColor;background:none;color:inherit;cursor:pointer;
}
.result button:focus-visible{outline:none;box-shadow:var(--focus);}
#shareBtn{
  width:100%;
  background:var(--ink);color:#fff;border-color:var(--ink);
}

.coffee{margin:4px 0 0;text-align:center;}
.coffee-btn{
  display:inline-block;
  padding:9px 16px;border-radius:4px;
  background:#ffd35c;color:#4a3413;
  font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:.78rem;
  letter-spacing:.03em;text-decoration:none;
}
.coffee-btn:hover{background:#ffc738;}
.coffee-btn:focus-visible{outline:none;box-shadow:var(--focus);}

.legend{
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--ink-faint);
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding-top:2px;
}
.legend .sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px;}

.site-footer{
  max-width:680px;margin-inline:auto;
  font-size:.68rem;
  padding-top:6px;line-height:1.8;
}

/* Erinnerungs-Mail: erscheint erst bei Rundenende (assets/game.js). Ohne
   diese Regel würde `.panel{display:flex}` das hidden-Attribut aushebeln
   (Autoren-CSS schlägt die Browser-Default-Regel für [hidden]). */
.reminder[hidden]{display:none;}
.reminder h2{
  font-family:"Anton",sans-serif;font-size:1.05rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink);margin:0 0 4px;
}
.reminder form{display:flex;gap:8px;flex-wrap:wrap;}
.reminder input[type="email"]{
  flex:1;min-width:200px;
  font-family:"Work Sans",sans-serif;font-size:.92rem;
  padding:10px 12px;background:var(--input-bg);border:1.5px solid var(--panel-edge);
  border-radius:4px;color:var(--ink);
}
.reminder input[type="email"]:focus-visible{outline:none;border-color:var(--accent);box-shadow:var(--focus);}
.reminder button{
  font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:.74rem;
  letter-spacing:.05em;text-transform:uppercase;
  background:var(--ink);color:var(--panel);border:none;border-radius:4px;
  padding:10px 16px;cursor:pointer;
}
.reminder button:disabled{opacity:.5;cursor:default;}
.reminder .muted{
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--ink-faint);margin:8px 0 0;
}
.reminder-legal{line-height:1.5;}

/* Konfetti bei Erfolg */
.confetti{
  position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50;
}
.confetti-piece{
  position:absolute;top:-10vh;width:8px;height:14px;opacity:.9;
  animation-name:confetti-fall;animation-timing-function:ease-in;animation-fill-mode:forwards;
}
@keyframes confetti-fall{
  0%{transform:translate(0,0) rotate(0deg);opacity:1;}
  100%{transform:translate(var(--drift),110vh) rotate(var(--rot));opacity:.9;}
}
@media (prefers-reduced-motion:reduce){
  .confetti{display:none;}
}

@media (max-width:480px){
  .chart-head,.chart-row{grid-template-columns:1.5fr .9fr .75fr .68fr .68fr .85fr;gap:4px;}
  .cell{font-size:.7rem;padding:7px 4px;min-height:36px;}
  .issue{text-align:left;}
  .masthead{flex-direction:column;align-items:flex-start;}
}

/* How to play */
.how-to{gap:0;padding-block:12px;}
.how-to summary{
  cursor:pointer;
  font-family:"IBM Plex Mono",monospace;
  font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);
  list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.how-to summary::-webkit-details-marker{display:none;}
.how-to summary::after{content:"+";font-size:1.1rem;color:var(--accent);line-height:1;}
.how-to[open] summary::after{content:"−";}
.how-to summary:focus-visible{outline:none;box-shadow:var(--focus);border-radius:3px;}
.how-to ol{margin:12px 0 0;padding-left:1.3em;display:flex;flex-direction:column;gap:6px;font-size:.92rem;color:var(--ink-soft);line-height:1.45;}
.how-to ol b{color:var(--ink);}