/*
 * Paper cut-out theme: dark construction paper, flat colors, hand-cut edges and hard "stacked paper"
 * shadows (South-Park-style paper look, kept minimal). Loaded after styles.css and only overrides it,
 * so removing this file brings back the old look.
 */
@font-face { font-family: 'Fredoka'; font-style: normal; font-display: swap; font-weight: 300 700; src: url(fonts/fredoka-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-display: swap; font-weight: 300 700; src: url(fonts/fredoka-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* construction paper */
  --bg: #16171d;
  --panel: #23252e;
  --panel-2: #2e313c;
  --border: #383b48;
  --text: #f3eee4; /* off-white paper */
  --muted: #a39d92;
  --accent: #f08a3c; /* orange card stock */
  --accent-2: #5cc3b5; /* teal */
  --good: #7cc56b;
  --bad: #e5533d;
  --warn: #f2c14e;
  --radius: 14px;
  --display: 'Fredoka', 'Space Grotesk', system-ui, sans-serif;
  --paper-shadow: 3px 4px 0 rgba(0, 0, 0, 0.55);
  --paper-shadow-sm: 2px 2px 0 rgba(0, 0, 0, 0.5);
  --cut: 16px 13px 17px 12px / 12px 17px 13px 16px; /* slightly uneven corners = cut with scissors */
  --cut-2: 13px 17px 12px 16px / 17px 12px 16px 13px;
  /* paper fibre, as a tiny SVG noise tile */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

body {
  background-color: var(--bg);
  background-image:
    var(--grain),
    /* paper hills and pines along the bottom edge: a quiet, slightly mythical backdrop */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220' preserveAspectRatio='none'%3E%3Cpath d='M0 150 Q150 95 300 135 T620 120 T930 140 T1200 110 V220 H0Z' fill='%231d1f27'/%3E%3Cpath d='M0 185 Q220 140 430 175 T860 165 T1200 170 V220 H0Z' fill='%23202230'/%3E%3Cg fill='%231a1c24'%3E%3Cpath d='M90 190 l22 -70 l22 70z'/%3E%3Cpath d='M128 195 l16 -48 l16 48z'/%3E%3Cpath d='M1010 185 l26 -82 l26 82z'/%3E%3Cpath d='M1060 192 l18 -55 l18 55z'/%3E%3Cpath d='M720 198 l14 -40 l14 40z'/%3E%3C/g%3E%3Ccircle cx='1040' cy='40' r='18' fill='%232a2c36'/%3E%3C/svg%3E");
  background-repeat: repeat, no-repeat;
  background-size: 160px 160px, 100% 220px;
  background-position: 0 0, bottom center;
  background-attachment: fixed, fixed;
}

h1, h2, h3, .logo, .name, .result-title, .elo-big, .room-code b, .vs, .play-cta b, .big-name, .stat b, .tile b, .tile-mode b, .level-chip, .fighter-name { font-family: var(--display); }
h2 { letter-spacing: 0.06em; font-weight: 600; }
h3 { font-weight: 600; }

.logo { font-weight: 700; letter-spacing: -0.01em; }
.logo span { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--warn); }

/* ---------- Cut-out paper surfaces ---------- */
.card, .tile, .btn, .answer, .icon-btn, .coins, .season-strip, .navbar, .modal, .chip, .avatar-pick, .shop-item, .segmented {
  background-image: var(--grain);
}
.card, .tile, .season-strip, .shop-item, .modal {
  border: none;
  border-radius: var(--cut);
  box-shadow: var(--paper-shadow);
}
.card:nth-child(even), .tile:nth-child(even), .shop-item:nth-child(even) { border-radius: var(--cut-2); }

/* the hero card: paper in the league color, pasted on */
.profile.hero {
  background: var(--grain), color-mix(in srgb, var(--rank) 14%, var(--panel));
  border: none;
}
.season-strip { background: var(--grain), color-mix(in srgb, var(--warn) 12%, var(--panel)); border: none; }

/* ---------- Buttons: paper you press down ---------- */
.btn, .icon-btn, .coins, .answer {
  border: none;
  border-radius: var(--cut);
  box-shadow: var(--paper-shadow-sm);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn:hover:not(:disabled), .answer:hover:not(:disabled) { filter: none; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5); }
.btn:active:not(:disabled), .answer:active:not(:disabled), .icon-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.5); }
.btn.primary { background: var(--grain), var(--accent); color: #23160a; box-shadow: var(--paper-shadow); }
.btn.primary small { color: #3a2512; }
.btn.danger { background: var(--grain), var(--panel); color: var(--bad); box-shadow: var(--paper-shadow-sm), inset 0 0 0 2px var(--bad); }
.btn.share-btn { background: var(--grain), var(--accent-2); color: #0d2420; }

/* ranked: the big orange cut-out; no glow, no shine */
.play-cta { background: var(--grain), var(--accent); color: #23160a; border-radius: 22px 18px 24px 16px / 18px 24px 16px 22px; box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.6); transform: rotate(-0.6deg); }
.play-cta::after { display: none; }
.play-cta small { color: #3a2512; }
.play-icon { filter: none; }
.btn.unranked-cta { background: var(--grain), var(--panel); transform: rotate(0.8deg); }

/* mode tiles sit slightly crooked, like pieces glued on by hand */
.mode-grid > .btn:nth-child(odd) { transform: rotate(-0.5deg); }
.mode-grid > .btn:nth-child(even) { transform: rotate(0.6deg); }
.mode-grid > .btn:active { transform: translate(2px, 2px); }
.btn.tile-mode { background: var(--grain), var(--panel); }
.btn.mode.daily:not(.done) { box-shadow: var(--paper-shadow), inset 0 0 0 2px var(--accent-2); }

/* ---------- Answers ---------- */
.answer { background: var(--grain), var(--panel); }
.answer:nth-child(even) { border-radius: var(--cut-2); }
.answer .key { border: none; background: var(--panel-2); }
.answer.picked { background: var(--grain), color-mix(in srgb, var(--accent-2) 30%, var(--panel)); }
.answer.correct { background: var(--grain), color-mix(in srgb, var(--good) 45%, var(--panel)); }
.answer.wrong { background: var(--grain), color-mix(in srgb, var(--bad) 40%, var(--panel)); }

/* ---------- Bars: flat paper strips ---------- */
.progress, .hp, .level-bar, .bar-track { border-radius: 4px; background: rgba(0, 0, 0, 0.35); }
.progress div, .hp-fill, .level-bar span, .bar-fill, .xp-fill, #timer-fill, #ban-fill, .cat-bar .bar div, .quest-progress .progress div { border-radius: 4px; }
.xp-fill, .quest-progress .progress div, .cat-bar .bar div, #timer-fill, #ban-fill { background: var(--warn); }
#timer-fill.urgent { background: var(--bad); }
.hp-fill { background: var(--good); }
.hp-fill.low { background: var(--bad); }

/* ---------- Text effects: flat instead of gradients ---------- */
.vs, .result.win .result-title, .room-code b, .survival-score b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--warn); text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55); }
.result-title { text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55); }

/* ---------- Small parts ---------- */
.level-chip { background: var(--warn); color: #2a1e05; border-radius: 6px 9px 7px 8px; box-shadow: var(--paper-shadow-sm); font-weight: 600; }
.chip { border: none; box-shadow: var(--paper-shadow-sm); border-radius: 8px 11px 9px 10px; }
.coins { background: var(--grain), var(--panel); color: var(--warn); }
.icon-btn { background: var(--grain), var(--panel); }
.avatar { border: none; box-shadow: var(--paper-shadow-sm); background: var(--panel-2); }
.avatar.framed { box-shadow: var(--paper-shadow-sm), 0 0 14px var(--frame-glow, transparent); }
.badge { border-radius: 6px; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); }
.segmented { border: none; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.35); background-color: rgba(0, 0, 0, 0.2); }
.seg.selected { background: var(--grain), var(--panel-2); box-shadow: var(--paper-shadow-sm); }
.tab.active { border-bottom-color: var(--warn); }
.field input, .modal textarea { border: none; border-radius: 10px; background: rgba(0, 0, 0, 0.3); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.35); }
.field input:focus { box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.35), 0 0 0 2px var(--accent); outline: none; }
.avatar-pick { border: none; box-shadow: var(--paper-shadow-sm); }
.avatar-pick.selected { box-shadow: var(--paper-shadow-sm), inset 0 0 0 2px var(--accent); }
.shop-item.equipped { box-shadow: var(--paper-shadow), inset 0 0 0 2px var(--accent); }

/* bottom navigation: a strip of paper */
.navbar { border: none; border-radius: 18px 14px 20px 12px / 14px 20px 12px 18px; box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.25), var(--paper-shadow); }
.nav-item.active { background: var(--grain), color-mix(in srgb, var(--accent) 28%, transparent); }

.modal-overlay { background: rgba(8, 8, 12, 0.72); }

@media (prefers-reduced-motion: reduce) {
  .play-cta, .mode-grid > .btn, .btn.unranked-cta { transform: none !important; }
}

/* duel */
.q-text { font-family: var(--display); font-weight: 600; }
.fighter { border: none; border-radius: var(--cut); box-shadow: var(--paper-shadow); background-image: var(--grain); }