/* paper.h.css - the newspaper look, for EVERY page (home, legal pages, boosters game, Le Mandat).
   Loaded after style.h.css / mandat.h.css: it redefines their colour variables and overrides their dark hard-coded colours.
   Rule of thumb: the "chrome" (header, nav, panels, buttons, forms) is paper and ink; the CARDS, the game tiles, the pack-opening
   overlay and the toasts stay dark, like physical cards on a newspaper. Their dark variables are set again in the "dark islands" block. */

body.paper-theme {
  --bg: #e3dfce; --panel: #eeeadb; --panel-2: #dad5c2; --line: #8a8570; --text: #1c1a16; --muted: #5b5444;
  --accent: #9c1c14; --accent-2: #8a1a12; --gold: #a35f00; --good: #2e7d32; --bad: #b3261e;
  --ink: #1c1a16; --on-ink: #f7efdc; --stamp: #b3261e;
  color: var(--text);
  background-color: var(--bg);
  --paper-image:
    radial-gradient(1000px 520px at 50% -120px, rgba(255, 255, 250, .55), transparent 70%),
    radial-gradient(900px 600px at 100% 100%, rgba(120, 110, 80, .14), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.55 .04' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .30  0 0 0 0 .28  0 0 0 0 .22  0 0 0 .38 -.14'/></filter><rect width='300' height='300' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='9'/><feGaussianBlur stdDeviation='.45'/><feColorMatrix values='0 0 0 0 .28  0 0 0 0 .26  0 0 0 0 .20  0 0 0 1.1 -.50'/></filter><rect width='260' height='260' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='620' height='620'><filter id='m' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.006 .009' numOctaves='3' seed='2'/><feColorMatrix values='0 0 0 0 .52  0 0 0 0 .47  0 0 0 0 .32  0 0 0 .5 -.14'/></filter><rect width='620' height='620' filter='url(%23m)'/></svg>");
  background-image: var(--paper-image);
  background-attachment: fixed, fixed, scroll, scroll, scroll;
}

/* ------------------------------------------------ dark islands: variables of the original dark theme come back inside them */
body.paper-theme .card, body.paper-theme .gcard, body.paper-theme .tile, body.paper-theme .toast {
  --panel: #161a27; --panel-2: #1e2334; --line: #262d45; --text: #e8ebf5; --muted: #8f98b3;
  --accent: #7c5cff; --accent-2: #38bdf8; --gold: #fbbf24; --good: #4ade80; --bad: #f87171;
  --ink: #e8ebf5; --on-ink: #161a27; --stamp: #f87171;
  color: var(--text);
}
body.paper-theme .toast { background: #222a47; border-color: #3c4770; }

/* ------------------------------------------------ header and bottom bar */
body.paper-theme .top { background: rgba(236, 232, 215, .94); border-bottom: 4px double var(--ink); backdrop-filter: blur(6px); }
body.paper-theme .logo { font-family: Georgia, "Times New Roman", serif; font-weight: 900; color: var(--ink); }
body.paper-theme .logo-mark { color: var(--stamp); }
body.paper-theme .pill { background: var(--panel); border: 1px solid var(--ink); color: var(--ink); text-decoration: none; }
body.paper-theme .beta-badge { background: var(--stamp); color: #fff7e8; border: 2px solid #7a140d; box-shadow: none; }
body.paper-theme .nav { background: rgba(236, 232, 215, .97); border-top: 4px double var(--ink); }
body.paper-theme .nav-btn { color: var(--muted); border-radius: 4px; }
body.paper-theme .nav-btn.active { color: var(--ink); background: var(--panel-2); box-shadow: inset 0 -3px 0 var(--stamp); }

/* ------------------------------------------------ buttons: ink outlines, hard offset shadow on the main action */
body.paper-theme .btn { background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: 4px; font-weight: 800; letter-spacing: .02em; text-decoration: none; transition: transform .12s, box-shadow .12s; }
body.paper-theme .btn:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); filter: none; }
body.paper-theme .btn:active:not(:disabled) { transform: none; box-shadow: none; }
body.paper-theme .btn.primary, body.paper-theme #startGame, body.paper-theme #endTurn { background: var(--ink); color: var(--on-ink); border-color: var(--ink); box-shadow: 4px 4px 0 var(--stamp); }
body.paper-theme .btn.primary:hover:not(:disabled) { box-shadow: 6px 6px 0 var(--stamp); }
body.paper-theme .btn.danger { background: #f3d4cf; color: #7a140d; border-color: var(--stamp); }
body.paper-theme .btn.ghost { background: transparent; }
body.paper-theme a.btn { color: var(--ink); }
body.paper-theme .btn.primary, body.paper-theme a.btn.primary { color: var(--on-ink); }

/* ------------------------------------------------ generic blocks and forms */
body.paper-theme .panel, body.paper-theme .gpanel, body.paper-theme .leader, body.paper-theme .foe { border-color: var(--ink); box-shadow: 3px 3px 0 rgba(28, 26, 22, .18); }
body.paper-theme .leader.sel, body.paper-theme .foe.sel { border-color: var(--stamp); }
body.paper-theme .tag { background: #dbe7cf; color: #2b5a1c; }
body.paper-theme .bar { background: #d8cbad; border-color: var(--ink); }
body.paper-theme textarea, body.paper-theme input[type=search], body.paper-theme input[type=text], body.paper-theme select, body.paper-theme .set-select { background: #f6f3e6; color: var(--ink); border: 1px solid var(--ink); border-radius: 4px; }
body.paper-theme .badge.dup { background: #e0d5ba; }
body.paper-theme .hero { background: linear-gradient(135deg, #eeeadb, #dad5c2 70%); border-color: var(--ink); }
body.paper-theme .news-line { background: rgba(0, 0, 0, .05); }
body.paper-theme .flavor-line { color: var(--muted); }
body.paper-theme .modal { background: rgba(28, 22, 10, .55); }
body.paper-theme .modal-box { border: 2px solid var(--ink); border-radius: 6px; box-shadow: 6px 6px 0 rgba(28, 26, 22, .35); }
body.paper-theme .ok-line { color: var(--good); }
body.paper-theme .rpill { border-color: var(--ink); }
body.paper-theme .rpill.danger { color: var(--bad); border-color: var(--bad); }
body.paper-theme .linkbtn { color: #1f5f95; }
body.paper-theme h2, body.paper-theme h3 { font-family: Georgia, "Times New Roman", serif; }

/* ------------------------------------------------ Le Mandat: panels that were dark purple/blue/red become tinted paper */
body.paper-theme .hazard, body.paper-theme .play .hazard, body.paper-theme .play .hz-pop { background: #ecdcf0; border-color: #8a5bd0; }
body.paper-theme .alert { background: #f6d8d3; }
body.paper-theme .alert.info { background: #d9e6f4; }
body.paper-theme .coach { background: #dcebf7; border-color: #2b79b8; box-shadow: 4px 4px 0 rgba(28, 26, 22, .25); }
body.paper-theme .coach-top { color: #1f5f95; }
body.paper-theme .log { background: #f6f3e6; border-color: var(--ink); }
body.paper-theme .row.board, body.paper-theme .tiles.board { background: rgba(0, 0, 0, .04); }
body.paper-theme .row.board.mine, body.paper-theme .tiles.board.mine { border-color: var(--ink); }
body.paper-theme .garc, body.paper-theme .arcnow, body.paper-theme .reward, body.paper-theme .pwr.on { color: #8a5a00; }
body.paper-theme .pwr { border-color: var(--line); }
body.paper-theme .warnline { color: #a14b00; }
body.paper-theme .mode.sel { border-color: var(--stamp); background: rgba(179, 38, 30, .08); }
body.paper-theme .sheet { border-top: 4px double var(--ink); }
body.paper-theme .gmenu-pop { border-color: var(--ink); }
body.paper-theme .srclink { color: #8fd3ff; }

/* ------------------------------------------------ small things inside the dark islands keep a light text */
body.paper-theme .gcard .tag, body.paper-theme .tile .tag, body.paper-theme .cost, body.paper-theme .tcost { color: #f1f3fb; }
body.paper-theme .gcard .tag, body.paper-theme .tile .tag { background: rgba(8, 10, 18, .85); }

/* ------------------------------------------------ narrow phones: the header must fit logo + badge + 3 pills */
@media (max-width: 430px) {
  body.paper-theme .logo { font-size: .95rem; gap: 5px; }
  body.paper-theme .logo .beta-badge { font-size: .52rem; padding: 1px 6px 2px; letter-spacing: .1em; }
  body.paper-theme .pills { gap: 4px; }
  body.paper-theme .pill { padding: 3px 7px; font-size: .8rem; }
  body.paper-theme .top-inner { padding-left: 10px; padding-right: 10px; gap: 6px; }
}

/* ------------------------------------------------ desktop: the section menu becomes a band under the masthead (a newspaper's section strip) */
@media (min-width: 900px) {
  body.paper-theme:has(> .nav) { display: flex; flex-direction: column; }
  body.paper-theme:has(> .nav) > .top { order: 0; position: static; }
  body.paper-theme:has(> .nav) > .nav { order: 1; position: sticky; top: 0; bottom: auto; left: auto; right: auto; justify-content: center; gap: 0; padding: 0;
    background: rgba(221, 216, 197, .96); border-top: 0; border-bottom: 2px solid var(--ink); box-shadow: 0 3px 0 rgba(28, 26, 22, .12); backdrop-filter: blur(4px); }
  body.paper-theme:has(> .nav) > .screen { order: 2; width: 100%; padding-bottom: 48px; }
  body.paper-theme:has(> .nav) > .site-footer { order: 3; }
  body.paper-theme .nav-btn { flex: 0 0 auto; max-width: none; flex-direction: row; gap: 8px; padding: 11px 24px; border-radius: 0; border-right: 1px solid var(--line);
    text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--ink); }
  body.paper-theme .nav-btn:first-child { border-left: 1px solid var(--line); }
  body.paper-theme .nav-btn:hover { background: rgba(255, 252, 240, .6); }
  body.paper-theme .nav-btn.active { background: var(--panel); color: var(--stamp); box-shadow: inset 0 -4px 0 var(--stamp); }
  body.paper-theme .nav-icon { font-size: 1.1rem; }
  body.paper-theme .nav-label { font-size: .78rem; }
  body.paper-theme .nav-dot { top: 7px; right: 8px; }
}

/* ------------------------------------------------ opening of a booster: same paper as the rest, the pack is torn open, then the cards are dealt */
body.paper-theme .overlay { background-color: var(--bg); background-image: var(--paper-image); background-attachment: scroll; color: var(--text); }
body.paper-theme .overlay.flash-legendary::after { mix-blend-mode: multiply; }
body.paper-theme .reveal-title { font-family: Georgia, "Times New Roman", serif; font-weight: 900; font-size: 1.9rem; border-bottom: 4px double var(--ink); padding: 0 18px 6px; }
body.paper-theme .reveal-note { color: var(--stamp); font-weight: 700; }