*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --clr-forest:        #65A603;
      --clr-forest-dark:   #467302;
      --clr-void:          #222601;
      --clr-moss:          #565902;
      --clr-amber-dark:    #734B02;
      --clr-gold:          #E8B44A;
      --clr-gold-dim:      #b88a30;

      --bg-deep:    #07090000;
      --bg-panel:   rgba(22, 26, 1, 0.88);
      --bg-input:   rgba(8, 10, 0, 0.55);

      --border-subtle: rgba(101, 166, 3, 0.14);
      --border-dim:    rgba(101, 166, 3, 0.28);
      --border-active: rgba(101, 166, 3, 0.55);

      --text-primary:   #deeaaa;
      --text-secondary: rgba(222, 234, 170, 0.55);
      --text-muted:     rgba(222, 234, 170, 0.28);
      --text-error:     #e8604a;

      /* MTG colours */
      --mana-W-bg: radial-gradient(circle at 38% 38%, #fffce0, #c8aa50);
      --mana-W-fg: #5a430a;
      --mana-U-bg: radial-gradient(circle at 38% 38%, #60b8f0, #0a4c8a);
      --mana-U-fg: #d0eeff;
      --mana-B-bg: radial-gradient(circle at 38% 38%, #7050a0, #120820);
      --mana-B-fg: #cca8ee;
      --mana-R-bg: radial-gradient(circle at 38% 38%, #f06848, #8a0e10);
      --mana-R-fg: #ffe0da;
      --mana-G-bg: radial-gradient(circle at 38% 38%, #48b858, #0a4a18);
      --mana-G-fg: #d0ffd8;

      --bar-W: linear-gradient(90deg, #c0a040, #fff8c0);
      --bar-U: linear-gradient(90deg, #0a4c8a, #60b8f0);
      --bar-B: linear-gradient(90deg, #1a0c38, #7050a0);
      --bar-R: linear-gradient(90deg, #8a0e10, #f06848);
      --bar-G: linear-gradient(90deg, #0a4a18, #48b858);

      --radius-sm: 6px;
      --radius-md: 12px;
      --radius-lg: 18px;

      --font-display: 'Cinzel', serif;
      --font-body:    'Nunito', sans-serif;

      --transition-fast: 0.18s ease;
      --transition-med:  0.32s ease;
    }

    html {
      font-family: var(--font-body);
      font-size: 16px;
      background: #07090a;
      color: var(--text-primary);
      min-height: 100%;
    }

    body {
      min-height: 100vh;
      background:
        radial-gradient(ellipse 70% 50% at 15% 10%, rgba(70,115,2,0.13) 0%, transparent 100%),
        radial-gradient(ellipse 60% 60% at 85% 90%, rgba(115,75,2,0.09) 0%, transparent 100%),
        #07090a;
      background-attachment: fixed;
      overflow-x: hidden;
    }

    /* subtle grain layer */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9999;
      opacity: 0.025;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    /* ──────────────────────────────────────
       APP WRAPPER
    ────────────────────────────────────── */
    #app {
      position: relative;
      z-index: 1;
      max-width: 580px;
      margin: 0 auto;
      padding: 0 16px;
    }

    /* ──────────────────────────────────────
       HEADER
    ────────────────────────────────────── */
    .app-header {
      text-align: center;
      padding: 44px 0 32px;
    }

    .header-emblem {
      width: 60px;
      height: 60px;
      margin: 0 auto 14px;
    }

    .header-emblem svg {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 0 14px rgba(101,166,3,0.5));
    }

    .app-title {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 6vw, 2.6rem);
      font-weight: 900;
      letter-spacing: 0.1em;
      color: var(--clr-forest);
      text-shadow: 0 0 28px rgba(101,166,3,0.35);
      line-height: 1;
      margin-bottom: 7px;
    }

    .app-subtitle {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }

    /* ──────────────────────────────────────
       PANELS
    ────────────────────────────────────── */
    .panel {
      background: var(--bg-panel);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 18px 18px 16px;
      margin-bottom: 10px;
      backdrop-filter: blur(8px);
    }

    .panel-label {
      font-family: var(--font-display);
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .panel > .panel-label {
      margin-bottom: 14px;
    }

    .reset-btn {
      background: none;
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      color: var(--text-muted);
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 0.8rem;
      transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
      flex-shrink: 0;
      margin-left: auto;
      margin-top: 12px;
    }

    .reset-btn:hover {
      border-color: var(--border-active);
      color: var(--clr-forest);
    }

    .reset-btn:active {
      transform: rotate(-45deg);
    }

    /* ──────────────────────────────────────
       STEPPER (non-land cards)
    ────────────────────────────────────── */
    .stepper-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .stepper-row-label {
      font-size: 0.88rem;
      color: var(--text-secondary);
      flex: 1;
    }

    .stepper {
      display: flex;
      align-items: stretch;
      background: var(--bg-input);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      overflow: hidden;
      flex-shrink: 0;
    }

    .stepper-btn {
      width: 46px;
      height: 46px;
      background: none;
      border: none;
      color: var(--clr-forest);
      font-size: 1.4rem;
      font-weight: 300;
      cursor: pointer;
      transition: background var(--transition-fast);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      line-height: 1;
    }

    .stepper-btn:hover  { background: rgba(101,166,3,0.12); }
    .stepper-btn:active { background: rgba(101,166,3,0.22); }

    .stepper-val {
      min-width: 54px;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--clr-gold);
      border-left: 1px solid var(--border-subtle);
      border-right: 1px solid var(--border-subtle);
      padding: 0 4px;
      user-select: none;
    }

    /* ──────────────────────────────────────
       MANA CURVE GRID
    ────────────────────────────────────── */
    .curve-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
    }

    .curve-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      background: var(--bg-input);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      padding: 6px 3px;
      transition: border-color var(--transition-fast);
    }

    .curve-cell:focus-within {
      border-color: var(--border-dim);
    }

    .curve-cell-label {
      font-family: var(--font-display);
      font-size: 0.6rem;
      font-weight: 600;
      color: var(--text-muted);
      letter-spacing: 0.04em;
      text-align: center;
    }

    .curve-cell-btn {
      width: 100%;
      height: 26px;
      background: none;
      border: 1px solid var(--border-subtle);
      border-radius: 4px;
      color: var(--clr-forest);
      font-size: 0.95rem;
      font-weight: 700;
      cursor: pointer;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background var(--transition-fast), border-color var(--transition-fast);
    }

    .curve-cell-btn:hover  { background: rgba(101,166,3,0.12); border-color: var(--border-dim); }
    .curve-cell-btn:active { background: rgba(101,166,3,0.22); }

    .curve-cell-count {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--clr-gold);
      min-height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
    }

    .curve-cell-hint {
      font-size: 0.6rem;
      color: var(--text-muted);
      text-align: center;
      line-height: 1;
      letter-spacing: 0.02em;
    }

    .curve-hint-legend {
      margin-top: 7px;
      font-size: 0.68rem;
      color: var(--text-muted);
      text-align: right;
      font-style: italic;
    }

    /* curve summary row */
    .curve-footer {
      margin-top: 12px;
      padding-top: 11px;
      border-top: 1px solid var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 6px;
    }

    .curve-sum-line {
      font-size: 0.8rem;
      color: var(--text-secondary);
    }

    .curve-sum-num {
      font-family: var(--font-display);
      font-weight: 700;
      margin-left: 4px;
    }

    .curve-sum-num.ok      { color: var(--clr-forest); }
    .curve-sum-num.error   { color: var(--text-error); }
    .curve-sum-num.neutral { color: var(--text-secondary); }

    .curve-validation {
      font-size: 0.75rem;
      min-height: 1.1em;
      transition: color var(--transition-fast);
      width: 100%;
    }

    .curve-validation.ok    { color: var(--clr-forest); }
    .curve-validation.error { color: var(--text-error); }

    /* ──────────────────────────────────────
       COLOR DEMAND ROWS
    ────────────────────────────────────── */
    .color-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 0;
      border-bottom: 1px solid var(--border-subtle);
    }

    .color-row:last-child { border-bottom: none; }

    .mana-sym {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 0.72rem;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.45);
      user-select: none;
    }

    .mana-sym.W { background: var(--mana-W-bg); color: var(--mana-W-fg); }
    .mana-sym.U { background: var(--mana-U-bg); color: var(--mana-U-fg); }
    .mana-sym.B { background: var(--mana-B-bg); color: var(--mana-B-fg); }
    .mana-sym.R { background: var(--mana-R-bg); color: var(--mana-R-fg); }
    .mana-sym.G { background: var(--mana-G-bg); color: var(--mana-G-fg); }

    .color-name {
      flex: 1;
      font-size: 0.87rem;
      color: var(--text-secondary);
    }

    /* re-use stepper styles but smaller for color rows */
    .color-stepper {
      display: flex;
      align-items: stretch;
      background: var(--bg-input);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }

    .color-stepper .stepper-btn {
      width: 42px;
      height: 42px;
    }

    .color-stepper .stepper-val {
      min-width: 46px;
      height: 42px;
      font-size: 1.15rem;
    }

    /* ──────────────────────────────────────
       RESULTS PANEL
    ────────────────────────────────────── */
    .results-panel {
      border-color: rgba(101,166,3,0.25);
      background: rgba(14, 18, 0, 0.92);
      margin-bottom: 0;
    }

    .results-hero {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 8px;
      margin-bottom: 16px;
    }

    .results-land-num {
      font-family: var(--font-display);
      font-size: clamp(3rem, 12vw, 4rem);
      font-weight: 900;
      color: var(--clr-gold);
      line-height: 1;
      text-shadow: 0 0 24px rgba(232,180,74,0.35);
      transition: text-shadow 0.25s ease;
    }

    .results-land-num.flash {
      text-shadow: 0 0 40px rgba(232,180,74,0.75);
    }

    .results-land-word {
      font-family: var(--font-display);
      font-size: 0.8rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-secondary);
      padding-bottom: 10px;
    }

    .results-meta-row {
      display: flex;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }

    .results-meta-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .results-meta-val {
      font-family: var(--font-display);
      font-size: 1.0rem;
      font-weight: 700;
      color: var(--text-primary);
    }

    .results-meta-lbl {
      font-size: 0.65rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .results-adj-note {
      text-align: center;
      font-size: 0.75rem;
      color: var(--clr-forest);
      margin-bottom: 14px;
      min-height: 1.1em;
    }

    .results-divider {
      height: 1px;
      background: var(--border-subtle);
      margin: 14px 0;
    }

    .dist-section-label {
      font-family: var(--font-display);
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 12px;
    }

    .dist-empty {
      text-align: center;
      font-size: 0.82rem;
      font-style: italic;
      color: var(--text-muted);
      padding: 8px 0 4px;
    }

    .land-bar-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 9px;
    }

    .land-bar-row:last-child { margin-bottom: 0; }

    .land-bar-sym {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 0.68rem;
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(0,0,0,0.45);
      user-select: none;
    }

    .land-bar-sym.W { background: var(--mana-W-bg); color: var(--mana-W-fg); }
    .land-bar-sym.U { background: var(--mana-U-bg); color: var(--mana-U-fg); }
    .land-bar-sym.B { background: var(--mana-B-bg); color: var(--mana-B-fg); }
    .land-bar-sym.R { background: var(--mana-R-bg); color: var(--mana-R-fg); }
    .land-bar-sym.G { background: var(--mana-G-bg); color: var(--mana-G-fg); }

    .land-bar-track {
      flex: 1;
      height: 9px;
      background: rgba(0,0,0,0.35);
      border-radius: 5px;
      overflow: hidden;
    }

    .land-bar-fill {
      height: 100%;
      border-radius: 5px;
      transition: width 0.38s cubic-bezier(0.4, 0, 0.2, 1);
      min-width: 3px;
    }

    .land-bar-fill.W { background: var(--bar-W); }
    .land-bar-fill.U { background: var(--bar-U); }
    .land-bar-fill.B { background: var(--bar-B); }
    .land-bar-fill.R { background: var(--bar-R); }
    .land-bar-fill.G { background: var(--bar-G); }

    .land-bar-count {
      font-family: var(--font-display);
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--clr-gold);
      min-width: 24px;
      text-align: right;
      flex-shrink: 0;
    }

    /* ──────────────────────────────────────
       BOTTOM SAFE AREA
    ────────────────────────────────────── */
    .screen-bottom-pad {
      height: max(28px, env(safe-area-inset-bottom, 28px));
    }

    /* ──────────────────────────────────────
       HIDDEN UTILITY
    ────────────────────────────────────── */
    .hidden { display: none !important; }

    /* ──────────────────────────────────────
       LANDSCAPE COMPACT
    ────────────────────────────────────── */
    @media (max-height: 480px) and (orientation: landscape) {
      .app-header    { padding: 20px 0 14px; }
      .header-emblem { width: 40px; height: 40px; margin-bottom: 8px; }
      .app-title     { font-size: 1.5rem; }
    }