/* Knock Empire — "Cartoon" look. Opt-in from More > Looks; the classic look is untouched.
   Everything here is scoped to :root[data-look="cartoon"] and only restyles: no layout logic lives in this file. */
:root[data-look="cartoon"] {
  --ink: #0F0B2A;
  --bg: #1D1748; --panel: #2C2468; --panel-2: #3A3184; --border: var(--ink);
  --text: #FFFFFF; --muted: #BDB7EC;
  --green: #3DF07C; --green-dim: rgba(61, 240, 124, 0.2);
  --gold: #FFCB3D; --gold-dim: rgba(255, 203, 61, 0.2);
  --red: #FF6B6B; --blue: #6CD4FF;
  --font: 'Fredoka', ui-rounded, 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  --mono: 'Fredoka', ui-rounded, 'Arial Rounded MT Bold', system-ui, sans-serif;
}
:root[data-look="cartoon"] body { letter-spacing: 0.01em; }

/* Chunky outlined panels */
:root[data-look="cartoon"] :is(.item, .summary, .board, .market, .rep, .coll, .ach, .node, .syn, .rival, .rival-card, .hood, .owner, .trait, .txt, .story, .lesson, .task, .badge) {
  border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink);
}
:root[data-look="cartoon"] .rep { border-left-width: 8px; }
:root[data-look="cartoon"] .task { padding: 10px 12px; margin-bottom: 8px; background: var(--panel-2); }
:root[data-look="cartoon"] .syn.on, :root[data-look="cartoon"] .node.got, :root[data-look="cartoon"] .coll.done { background: #1F5A4A; border-color: var(--ink); }
:root[data-look="cartoon"] .ach.got { background: #6A5320; border-color: var(--ink); }

/* Buttons you can feel: a hard shadow that squashes when pressed */
:root[data-look="cartoon"] :is(.buy, .full-btn, .btn, .choice, .mv, .hood-bar, .switch, .texts-btn, .hot-door) {
  border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); border-radius: 16px; font-weight: 700;
  transition: transform 0.06s, box-shadow 0.06s;
}
:root[data-look="cartoon"] :is(.buy, .full-btn, .btn, .choice, .mv, .hood-bar, .switch, .hot-door):active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
:root[data-look="cartoon"] :is(.buy.can, .full-btn.can, .btn.primary) { background: var(--green); color: var(--ink); border-color: var(--ink); }
:root[data-look="cartoon"] .buy { color: #E6E3FF; background: var(--panel-2); }
:root[data-look="cartoon"] .buy.can { color: var(--ink); }
:root[data-look="cartoon"] :is(.btn.gold, .gold-btn, .login-btn) { background: var(--gold) !important; color: var(--ink) !important; border-color: var(--ink) !important; }
:root[data-look="cartoon"] .btn.danger { background: var(--red); color: var(--ink); border-color: var(--ink); }
:root[data-look="cartoon"] .mv.on, :root[data-look="cartoon"] .switch.on { background: var(--green); color: var(--ink); border-color: var(--ink); }
:root[data-look="cartoon"] .buy-toggle { border: 2.5px solid var(--ink); border-radius: 14px; background: var(--panel); }
:root[data-look="cartoon"] .buy-toggle button.on { background: var(--gold); color: var(--ink); }
:root[data-look="cartoon"] .full-btn { color: #E6E3FF; }
:root[data-look="cartoon"] .full-btn.can { color: var(--ink); }

/* Header: a bar with a coin pill */
:root[data-look="cartoon"] #hud { background: var(--panel); border-bottom: 3px solid var(--ink); box-shadow: 0 4px 0 rgba(15, 11, 42, 0.45); position: relative; z-index: 6; }
:root[data-look="cartoon"] .cash { font-family: var(--cash-font, var(--font)); background: var(--ink); border-radius: 999px; padding: 2px 14px 2px 10px; font-size: 1.7rem; font-weight: 700; color: var(--gold); letter-spacing: 0; }
:root[data-look="cartoon"] .cash::before { content: '🪙'; font-size: 1.15rem; margin-right: 6px; vertical-align: 2px; }
:root[data-look="cartoon"] .income { font-weight: 700; }
:root[data-look="cartoon"] .date, :root[data-look="cartoon"] .hud-right { color: #D8D4FA; font-weight: 600; }

/* Tabs */
:root[data-look="cartoon"] #tabs { background: var(--panel); border-top: 3px solid var(--ink); padding-top: 4px; }
:root[data-look="cartoon"] #tabs button { font-weight: 700; border-radius: 14px; margin: 0 2px 4px; }
:root[data-look="cartoon"] #tabs button.on { background: var(--green); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
:root[data-look="cartoon"] #tabs button .dot { border: 2px solid var(--ink); width: 11px; height: 11px; }

/* The KNOCK button is a door */
:root[data-look="cartoon"] .knock-wrap { background: var(--bg); border-bottom: 3px solid var(--ink); }
:root[data-look="cartoon"] .knock-btn .ring-bg { fill: #2C2468; stroke: var(--ink); stroke-width: 9; }
:root[data-look="cartoon"] .knock-btn .ring-fg { stroke: var(--gold); stroke-width: 7; }
:root[data-look="cartoon"] .knock-btn .face { inset: 14px; background: url('assets/art/door-mythic.webp') center 34% / auto 74% no-repeat; box-shadow: none; justify-content: flex-end; padding-bottom: 6px; font-size: 0.95rem; color: var(--ink); transition: transform 0.07s; }
:root[data-look="cartoon"] .knock-btn .face { text-shadow: none; }
:root[data-look="cartoon"] .knock-btn .face small { background: var(--gold); color: var(--ink); opacity: 1; border: 2px solid var(--ink); border-radius: 999px; padding: 0 9px; font-size: 0.68rem; letter-spacing: 0.02em; margin-top: 2px; }
:root[data-look="cartoon"] .knock-btn .face { font-size: 0; }                     /* the door says it; hide the word, keep the counter */
:root[data-look="cartoon"] .knock-btn .face small { font-size: 0.72rem; }
:root[data-look="cartoon"] .knock-btn:active .face { transform: translateY(3px) rotate(-4deg) scale(0.96); box-shadow: none; }
:root[data-look="cartoon"] .knock-btn.frenzy .face { filter: drop-shadow(0 0 14px var(--gold)) saturate(1.3); box-shadow: none; }
:root[data-look="cartoon"] .knock-stats b { color: var(--gold); }
:root[data-look="cartoon"] .last-door.sale { color: var(--green); font-weight: 700; }

/* Bars */
:root[data-look="cartoon"] .progress { height: 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--ink); }
:root[data-look="cartoon"] .progress i { border-radius: 999px; background: linear-gradient(#7CFFAB, var(--green)); }
:root[data-look="cartoon"] .progress.gold i { background: linear-gradient(#FFE48A, var(--gold)); }
:root[data-look="cartoon"] .goal .progress { height: 8px; }
:root[data-look="cartoon"] .steps i { height: 9px; border: 2px solid var(--ink); border-radius: 999px; }

/* Headings, chips, toasts, pop-ups */
:root[data-look="cartoon"] .section-title { font-size: 0.82rem; letter-spacing: 0.06em; color: var(--gold); font-weight: 700; }
:root[data-look="cartoon"] .section-title span + span { color: var(--muted); }
:root[data-look="cartoon"] .chip, :root[data-look="cartoon"] .rar, :root[data-look="cartoon"] .lv { border-width: 2px !important; border-radius: 999px !important; font-weight: 700; }
:root[data-look="cartoon"] .toast { border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); background: var(--gold); color: var(--ink); font-weight: 700; }
:root[data-look="cartoon"] .toast.green { background: var(--green); }
:root[data-look="cartoon"] .modal-card { border: 3px solid var(--ink); border-radius: 24px; box-shadow: 0 8px 0 var(--ink); }
:root[data-look="cartoon"] .modal-card h2 { font-size: 1.3rem; }
:root[data-look="cartoon"] .modal-card .bignum { font-family: var(--font); font-weight: 700; }
:root[data-look="cartoon"] .float { font-family: var(--font); font-weight: 700; font-size: 1.3rem; text-shadow: 0 2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink); }
:root[data-look="cartoon"] .float.big { font-size: 1.7rem; } :root[data-look="cartoon"] .float.huge { font-size: 2.3rem; }
:root[data-look="cartoon"] .streak { font-size: 1.05rem; }

/* Door encounters */
:root[data-look="cartoon"] .door { background: var(--bg); }
:root[data-look="cartoon"] .owner .face { font-size: 3rem; }
:root[data-look="cartoon"] .choice.right { background: var(--green); color: var(--ink); }
:root[data-look="cartoon"] .step-name { font-weight: 700; }

/* Tweaks after the first look */
:root[data-look="cartoon"] .cash { font-family: var(--font); }
:root[data-look="cartoon"] .choice { font-weight: 500; }
:root[data-look="cartoon"] .choice b { font-weight: 700; }
:root[data-look="cartoon"] #tabs button { min-height: 50px; margin-bottom: 6px; }
:root[data-look="cartoon"] .story { background: #4A3F2A; }