/* ============================================================
     GROOVY — 1968–1976 concert-poster / sleeve-art theme
     ============================================================ */
  :root {
    --bg: #f2e2c4;        /* aged paper */
    --panel: #faf0da;     /* cream card */
    --panel2: #f0dfbc;    /* deeper cream */
    --cream: #372414;     /* ink (text) */
    --orange: #d95b1e;    /* burnt orange */
    --red: #b23222;       /* brick — coaster side */
    --teal: #5f7233;      /* olive/avocado — listen side */
    --dim: #8b6b45;       /* faded brown */
    --border: #372414;    /* ink borders */
    --mustard: #e9a733;
    --shadow: #372414;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: var(--bg);
    background-image:
      radial-gradient(circle at 50% -10%, #f9edd2 0%, #f2e2c4 45%, #e8d2a8 100%);
    color: var(--cream);
    font-family: Georgia, 'Times New Roman', serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 32px 16px 64px;
  }
  .wrap { width: 100%; max-width: 640px; }

  header { text-align: center; margin-bottom: 28px; }
  .tag {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cream);
    background: var(--mustard);
    border: 2px solid var(--border);
    border-radius: 20px;
    padding: 4px 14px;
    box-shadow: 2px 2px 0 var(--shadow);
  }
  .sunrise {
    width: 200px; height: 100px;
    margin: 10px auto 0;
    border-radius: 200px 200px 0 0;
    background: radial-gradient(circle at 50% 100%,
      transparent 0 22%,
      #b23222 22% 38%,
      #d95b1e 38% 54%,
      #e9a733 54% 70%,
      #5f7233 70% 86%,
      transparent 86%);
  }
  h1 {
    font-family: 'Shrikhand', Georgia, serif;
    font-weight: normal;
    font-size: clamp(30px, 6vw, 44px);
    line-height: 1.1;
    letter-spacing: 1px;
    color: var(--cream);
    text-shadow: 3px 3px 0 var(--mustard);
    margin-top: 2px;
  }
  h1 em { color: var(--orange); font-style: italic; text-shadow: 3px 3px 0 #f3d9a8; }
  .sub {
    color: #6b4f2e; margin-top: 10px; font-style: italic; font-size: 15px;
    max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.5;
  }

  .card {
    background: var(--panel);
    border: 3px solid var(--border);
    border-radius: 16px;
    padding: 26px;
    box-shadow: 6px 6px 0 var(--shadow);
  }

  .modes { display: flex; gap: 8px; margin-bottom: 20px; }
  .mode-btn {
    flex: 1;
    background: var(--panel2);
    border: 2px solid var(--border);
    color: #6b4f2e;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px;
    border-radius: 999px;
    cursor: pointer;
  }
  .mode-btn.active {
    background: var(--mustard);
    color: var(--cream);
    box-shadow: 2px 2px 0 var(--shadow);
  }

  label.fieldlabel { display: block; font-size: 14px; color: #6b4f2e; margin-bottom: 8px; }
  input[type="text"] {
    width: 100%;
    background: #fffaf0;
    border: 2px solid var(--border);
    border-radius: 8px;
    color: var(--cream);
    font-family: inherit;
    font-size: 17px;
    padding: 13px 14px;
    outline: none;
  }
  input[type="text"]:focus { border-color: var(--orange); box-shadow: 2px 2px 0 var(--shadow); }

  .suggest-wrap { position: relative; }
  .suggest {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: #fffaf0; border: 2px solid var(--border); border-radius: 10px;
    max-height: 320px; overflow-y: auto; z-index: 10;
    box-shadow: 4px 4px 0 var(--shadow);
  }
  .suggest .hint {
    font-family: 'Courier New', monospace; font-size: 12px;
    color: var(--dim); padding: 10px 14px;
  }
  .sug-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; cursor: pointer;
    border-top: 1px dashed #d8c092;
  }
  .sug-item:first-child { border-top: none; }
  .sug-item:hover, .sug-item.sel { background: #f5e3bd; }
  .sug-item img {
    width: 44px; height: 44px; border-radius: 4px; flex: none;
    background: var(--panel2); border: 1px solid var(--border); object-fit: cover;
  }
  .sug-item .t { min-width: 0; }
  .sug-item .album {
    font-size: 15px; color: var(--cream);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sug-item .artist {
    font-size: 12px; color: var(--dim);
    font-family: 'Courier New', monospace; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sug-item .yr { margin-left: auto; color: #b08d5a; font-family: 'Courier New', monospace; font-size: 12px; flex: none; }

  .drop {
    border: 3px dashed #a17c48;
    border-radius: 14px;
    padding: 30px 16px;
    text-align: center;
    color: var(--dim);
    cursor: pointer;
    transition: border-color .15s;
  }
  .drop:hover, .drop.drag { border-color: var(--orange); color: var(--cream); }
  .drop .big { font-size: 34px; display: block; margin-bottom: 8px; }
  .drop img { max-width: 100%; max-height: 220px; border-radius: 8px; border: 2px solid var(--border); display: block; margin: 0 auto 8px; }
  #fileInput { display: none; }

  .go {
    width: 100%;
    margin-top: 18px;
    background: var(--orange);
    color: #fff8ea;
    border: 3px solid var(--border);
    border-radius: 999px;
    font-family: inherit;
    font-weight: bold;
    font-size: 17px;
    padding: 14px;
    cursor: pointer;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: 4px 4px 0 var(--shadow);
  }
  .go:hover { background: #e96f2d; }
  .go:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow); }
  .go:disabled { opacity: .4; cursor: not-allowed; }

  /* Analysis phase */
  .hidden { display: none !important; }
  .analysis { text-align: center; padding: 10px 0; }
  .vinyl {
    width: 130px; height: 130px;
    margin: 6px auto 22px;
    border-radius: 50%;
    background:
      radial-gradient(circle at center, var(--mustard) 0 18%, #241a10 18% 20%,
        #2e2115 20% 23%, #191008 23% 26%, #2e2115 26% 29%, #191008 29% 32%,
        #2e2115 32% 35%, #191008 35% 38%, #2e2115 38% 41%, #191008 41% 44%,
        #2e2115 44% 47%, #191008 47% 100%);
    border: 3px solid var(--border);
    box-shadow: 5px 5px 0 var(--shadow);
    animation: spin 1.6s linear infinite;
    position: relative;
  }
  .vinyl::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--panel); transform: translate(-50%,-50%);
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .step {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    color: var(--red);
    min-height: 22px;
  }
  .track {
    height: 10px; background: #e8d2a8; border-radius: 6px;
    margin-top: 18px; overflow: hidden; border: 2px solid var(--border);
  }
  .track > div { height: 100%; width: 0%; background: var(--orange); transition: width .5s; }

  /* Verdict */
  .verdict-head { text-align: center; margin-bottom: 22px; }
  .stamp {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: clamp(16px, 4vw, 26px);
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 12px 26px;
    border: 3px solid;
    border-radius: 6px;
    transform: rotate(-3deg);
    margin: 8px 0 14px;
    background: rgba(255,250,240,.6);
    box-shadow: 3px 3px 0 var(--shadow);
  }
  .stamp.listen { color: var(--teal); border-color: var(--teal); }
  .stamp.coaster { color: var(--red); border-color: var(--red); }
  .subject { font-size: 18px; font-style: italic; color: var(--cream); }
  .blurb { color: #6b4f2e; margin-top: 12px; font-size: 15px; line-height: 1.55; }

  .duel { display: flex; gap: 12px; margin: 22px 0; }
  .duel .side {
    flex: 1; background: var(--panel2); border: 2px solid var(--border);
    border-radius: 12px; padding: 14px; text-align: center;
  }
  .duel .side.winner { background: #f7e6b8; box-shadow: 3px 3px 0 var(--shadow); }
  .duel .num { font-size: 34px; font-weight: bold; }
  .duel .lbl { font-family: 'Courier New', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); margin-top: 4px; }
  .duel .listen-num { color: var(--teal); }
  .duel .coaster-num { color: var(--red); }

  .metrics { margin-top: 6px; }
  .metric { margin-bottom: 12px; }
  .metric .row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
  .metric .name { color: var(--cream); }
  .metric .val { color: var(--dim); font-family: 'Courier New', monospace; }
  .metric .bar { height: 10px; background: #e8d2a8; border: 2px solid var(--border); border-radius: 6px; overflow: hidden; }
  .metric .bar > div { height: 100%; border-radius: 4px; width: 0%; transition: width .9s cubic-bezier(.2,.8,.3,1); }

  .fineprint {
    margin-top: 20px; padding-top: 16px; border-top: 2px dashed #a17c48;
    font-family: 'Courier New', monospace; font-size: 12px; color: var(--dim); line-height: 1.6;
  }
  .actions { display: flex; gap: 10px; margin-top: 20px; }
  .actions button {
    flex: 1; background: var(--panel2); color: var(--cream);
    border: 2px solid var(--border); border-radius: 999px;
    font-family: inherit; font-size: 15px; padding: 12px; cursor: pointer;
    box-shadow: 2px 2px 0 var(--shadow);
  }
  .actions button:hover { background: var(--mustard); }
  .actions button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--shadow); }
  footer { text-align: center; color: #a17c48; font-size: 12px; margin-top: 26px; font-style: italic; }

  /* Daily Docket */
  .daily { text-align: center; background: #f7e6b8; }
  .docket-tag {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 12px; font-weight: bold; letter-spacing: 2px;
    text-transform: uppercase; color: #fff8ea;
    background: var(--red); border: 2px solid var(--border);
    border-radius: 6px; padding: 5px 14px;
    transform: rotate(-1.5deg);
    box-shadow: 2px 2px 0 var(--shadow);
  }
  .docket-record {
    font-size: 22px; font-style: italic; color: var(--cream);
    margin: 16px 0 4px; line-height: 1.3;
  }
  .docket-sub {
    font-family: 'Courier New', monospace; font-size: 11px;
    color: var(--dim); margin-top: 12px; letter-spacing: .5px;
  }
  .daily .go { margin-top: 14px; }

  .streak {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 13px; font-weight: bold; color: var(--cream);
    background: var(--mustard); border: 2px solid var(--border);
    border-radius: 999px; padding: 6px 16px; margin-top: 12px;
    box-shadow: 2px 2px 0 var(--shadow);
  }

  /* Head-to-Head */
  .versus { text-align: center; }
  .vs-tag { background: var(--mustard); color: var(--cream); }
  .versus .go { margin-top: 16px; }
  .vs-card.pick { min-height: 84px; background: var(--panel); }
  .vs-cover {
    display: block; width: 72px; height: 72px;
    margin: 0 auto 10px; border-radius: 6px;
    border: 2px solid var(--border); background: var(--panel2);
    object-fit: cover;
  }
  .feud-context {
    font-family: 'Courier New', monospace; font-size: 12px;
    color: var(--dim); line-height: 1.5; margin-top: 10px;
    max-width: 460px; margin-left: auto; margin-right: auto;
  }
  .feud-head {
    font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold;
    letter-spacing: 2.5px; text-transform: uppercase; color: var(--dim);
    margin: 22px 0 10px; padding-top: 16px;
    border-top: 1px dashed #d8c092;
  }
  .feud-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px; max-height: 240px; overflow-y: auto; padding: 2px;
  }
  .feud-chip {
    background: var(--panel2); border: 2px solid var(--border);
    border-radius: 8px; padding: 9px 6px; cursor: pointer;
    font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold;
    letter-spacing: .5px; text-transform: uppercase; color: #6b4f2e;
    line-height: 1.35;
  }
  .feud-chip:hover { color: var(--cream); border-color: var(--orange); }
  .feud-chip.active {
    background: var(--mustard); color: var(--cream);
    box-shadow: 2px 2px 0 var(--shadow);
  }
  .vs-card.pick .vs-name { min-height: 0; font-size: 15px; }
  .vs-grid { display: flex; align-items: stretch; gap: 10px; margin: 16px 0 6px; }
  .vs-card {
    flex: 1; background: var(--panel2); border: 2px solid var(--border);
    border-radius: 12px; padding: 14px 10px; text-align: center;
    display: flex; flex-direction: column; justify-content: center;
  }
  .vs-card.winner { background: #f7e6b8; box-shadow: 3px 3px 0 var(--shadow); }
  .vs-card .vs-name { font-size: 14px; font-style: italic; color: var(--cream); line-height: 1.35; min-height: 38px; }
  .vs-card .vs-num { font-size: 40px; font-weight: bold; color: var(--teal); margin-top: 8px; }
  .vs-card.losing .vs-num { color: var(--dim); }
  .vs-card .vs-lbl { font-family: 'Courier New', monospace; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); }
  .vs-card .vs-sub { font-family: 'Courier New', monospace; font-size: 11px; color: var(--red); margin-top: 6px; }
  .vs-badge {
    align-self: center; flex: none;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--red); color: #fff8ea;
    border: 2px solid var(--border);
    font-family: 'Courier New', monospace; font-weight: bold; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 2px 2px 0 var(--shadow);
    transform: rotate(-6deg);
  }
  /* Top navigation between pages */
  .topnav { display: flex; gap: 8px; justify-content: center; margin: 18px 0 26px; flex-wrap: wrap; }
  .topnav a {
    text-decoration: none;
    background: var(--panel2);
    border: 2px solid var(--border);
    border-radius: 999px;
    color: #6b4f2e;
    font-family: 'Courier New', monospace;
    font-size: 12px; font-weight: bold;
    letter-spacing: 1px; text-transform: uppercase;
    padding: 10px 18px;
  }
  .topnav a:hover { color: var(--cream); }
  .topnav a.active {
    background: var(--mustard); color: var(--cream);
    box-shadow: 3px 3px 0 var(--shadow);
  }

  .actions { flex-wrap: wrap; }
  .actions button { min-width: 128px; }