:root{
  --brand-primary:#1f2a44;
  --brand-secondary:#c49a3a;
  --brand-accent:#3fa7d6;
  --bg:#fffdf8;
  --fg:#101418;
  --muted:#6b7280;
  --ring:#0ea5e9;
  --success:#10b981;
  --error:#ef4444;
  --chip-bg:#f3f4f6;
  --chip-fg:#111827;
  --chip-active-bg:#e5f2ff;
  --chip-active-border:#3b82f6;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b0e12; --fg:#e8eef7; --muted:#99a3b2; --chip-bg:#141a22; --chip-fg:#e8eef7; }
}

/* Layout for top row (logo + wheel + sidebar) */
.top-row{
  display:grid;
  grid-template-columns: 140px 1fr 200px; /* left logo, center wheel, right sidebar */
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}

.logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:6px;
}

.brand-logo{
  width:120px;
  max-width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

/* Keep wheel smaller */
svg{
  width:min(80vw, 300px);
  height:auto;
}

/* Make sure everything else stays centered on smaller screens */
@media (max-width: 740px){
  .top-row{
    grid-template-columns: 1fr;
    justify-items:center;
  }
  .logo-wrap{ order:1; }
  .wheel-wrap{ order:2; }
  .side{ order:3; }
}


html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  display:flex; align-items:center; justify-content:center; padding:12px;
}

/* Brand header */
.brand{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:10px;
}

.brand-logo{
  height:60px;         /* force consistent logo size */
  width:auto;
  max-width:80%;
  object-fit:contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}


.app{width:100%; max-width:900px;}

/* Two-column card: wheel left, sidebar right */
.card{
  background:rgba(255,255,255,0.7);
  backdrop-filter:saturate(1.2) blur(6px);
  border:1px solid rgba(0,0,0,0.06);
  border-radius:18px; padding:14px;
  box-shadow:0 6px 24px rgba(0,0,0,0.06);

  display:grid;
  grid-template-columns: 1fr 200px;
  gap:12px;
}
@media (prefers-color-scheme: dark){
  .card{background:rgba(22,26,34,0.6); border-color:rgba(255,255,255,0.06);}
}

.wheel-wrap{ grid-column:1; display:grid; justify-items:flex-start; align-items:center; padding:8px 0 2px; }
.side{ grid-column:2; align-self:start; display:grid; gap:10px; }

/* Sidebar blocks */
.scorebox{
  background:var(--chip-bg); color:var(--chip-fg);
  border-radius:12px; padding:10px; font-weight:700; display:grid; gap:6px;
}
.modebox{ display:grid; gap:6px; }
.mode-label{ font-size:14px; color:var(--muted); font-weight:700; }
.mode-select{
  padding:8px 10px; border-radius:10px; border:1px solid rgba(0,0,0,0.15);
  background:var(--bg); color:var(--fg); font-weight:700;
}

/* Items below the top row should span both columns (not feedback anymore) */
.prompt, .group, .controls, footer { grid-column: 1 / -1; }

/* Wheel visuals (compact) */
svg{ width:min(88vw, 340px); height:auto; }
.tick{ stroke:currentColor; stroke-width:2.25; opacity:0.95; }
.label{ font-family:"Noto Music", Bravura, Leland, serif; font-weight:600; fill:currentColor; text-anchor:middle; dominant-baseline:middle; font-size:14px; }
.zero-label{ opacity:.6; font-weight:700; }
.active-glow{ filter:drop-shadow(0 0 6px var(--ring)); }
.arrow{ transform-origin:50% 50%; transition:transform 0.85s cubic-bezier(.2,.9,.2,1.01); }
@media (prefers-reduced-motion: reduce){ .arrow{transition-duration:0.2s;} }

/* Prompt & chips */
.prompt{ margin:8px 0 10px; font-weight:700; font-size:clamp(16px,3.4vw,18px); }
.group{ margin-bottom:8px; }
.group h3{ margin:6px 2px; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  appearance:none; border:1.5px solid transparent; background:var(--chip-bg); color:var(--chip-fg);
  padding:10px 12px; border-radius:9999px; font-weight:700; cursor:pointer; user-select:none;
}
.chip[aria-pressed="true"], .chip.active{ background:var(--chip-active-bg); border-color:var(--chip-active-border); }
.chip:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }

/* Controls */
.controls{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }
button.primary{ background:var(--brand-primary); color:white; border:none; padding:10px 14px; border-radius:12px; font-weight:800; cursor:pointer; }
button.secondary{ background:transparent; color:var(--brand-primary); border:2px solid var(--brand-primary); padding:8px 12px; border-radius:12px; font-weight:800; }
.inline-controls{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:14px; }
.toggle{ display:inline-flex; gap:8px; align-items:center; }

/* Feedback (now in sidebar) */
.feedback{ min-height:24px; font-weight:700; }
.ok{ color:var(--success); } .no{ color:var(--error); } .hint{ color:var(--muted); }

/* Footer */
footer{ margin-top:14px; font-size:12px; color:var(--muted); display:flex; justify-content:flex-end; gap:8px; align-items:center; flex-wrap:wrap; }
.linklike{ color:var(--brand-secondary); text-decoration:underline; cursor:pointer; }

/* Stack if very narrow (desktop safety) */
@media (max-width: 740px){
  .card{ grid-template-columns: 1fr; }
  .side{ grid-column: 1; }
}

.brand::after{
  content:'';
  display:block;
  width:100%;
  height:1px;
  background:rgba(0,0,0,0.08);
  margin-top:8px;
}
@media (prefers-color-scheme: dark){
  .brand::after{ background:rgba(255,255,255,0.08); }
}

/* ==== iPhone fix: no vertical centering, respect safe areas, smaller wheel ==== */
@media (max-width: 740px){
  /* Stop vertical centering & use the visible viewport height */
  html, body { height: auto; }
  body{
    display: block;                  /* was flex centered */
    margin: 0;
    /* Safe-area padding on all sides */
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-right: calc(12px + env(safe-area-inset-right));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    padding-left: calc(12px + env(safe-area-inset-left));
  }

  /* Center horizontally via margins instead of flex */
  .app{ max-width: 900px; margin: 0 auto; }

  /* Stack top row (logo, wheel, sidebar) */
  .top-row{ grid-template-columns: 1fr; justify-items: center; }

  /* Give the wheel breathing room and shrink slightly */
  .wheel-wrap{ padding-top: 8px; }
  svg{
    width: 86vw;         /* wide but not full-bleed */
    max-width: 260px;    /* ↓ tweak to 240px if still tight */
    height: auto;
    display: block;
  }
}

/* Older iOS fallback for safe-area */
@supports not (padding: max(0px)) {
  @media (max-width: 740px){
    body{
      padding-top: calc(12px + constant(safe-area-inset-top));
      padding-right: calc(12px + constant(safe-area-inset-right));
      padding-bottom: calc(12px + constant(safe-area-inset-bottom));
      padding-left: calc(12px + constant(safe-area-inset-left));
    }
  }
}

/* ===== iOS/desktop Dark Mode tune-ups ===== */
@media (prefers-color-scheme: dark){
  /* Make buttons pop */
  button.primary{
    background: #c8a046;                 /* gold-ish for strong contrast */
    color: #0b0e12;                      /* dark text for readability */
  }
  button.primary:focus-visible{ outline: 3px solid rgba(200,160,70,.55); }

  button.secondary{
    background: transparent;
    border-color: #c8a046;
    color: #c8a046;
  }

  /* Chip contrast */
  .chip{
    background: #1a2330;                 /* darker chip bg */
    color: #e8eef7;
    border-color: transparent;
  }
  .chip.active, .chip[aria-pressed="true"]{
    background: #1f2a44;                 /* match brand dark blue */
    border-color: #c8a046;               /* gold ring */
  }

  /* Sidebar cards readability */
  .scorebox{
    background: #141a22;
    color: #e8eef7;
  }

  /* Links/“Sjá svarið” */
  .linklike{ color: #c8a046; }
}

/* Mobile-only feedback: show under buttons on phones, hide sidebar feedback there */
.mobile-only{ display:none; }

@media (max-width: 740px){
  /* Show the mobile feedback… */
  .mobile-only{ display:block; margin-top:6px; }
  /* …and hide the sidebar feedback on small screens */
  .side #feedback{ display:none; }
}