/* "종이" theme: the beige paper look of the TANGLE TALK guide sheet.
   Everything here is scoped to :root[data-theme="paper"], so the default (night) theme is untouched. */
:root[data-theme="paper"]{
  --table:#efebe3;
  --glow:#efebe3;
  --felt:#f8f5ef;
  --line:#d6cdbd;
  --fg:#2a2622;
  --muted:#6e655b;
  --paper:#fffdf8;
  --ink:#2a2622;
  --thread:#c9472b;
  --thread-deep:#a4361f;
  --gold:#c98a2b;
  --bad:#c0392b;
  --bad-soft:#fbe3dc;
  --ok:#3f7a55;
  --hot:#c9472b;
  --cold:#24365c;
  --q-bg:#fffdf8;
  --q-soft:#f1ebe0;
  --q-line:#ddd3c3;
  --q-muted:#6e655b;
  --scrim:rgba(42,38,34,.5);
  /* Noto Sans KR is loaded at weight 800 only, so every display heading renders bold like the guide */
  --display:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color-scheme:light;
}
/* the paper grain sits on the whole page (html), so short screens like a room are not cut halfway */
:root[data-theme="paper"]{
  background:
    radial-gradient(rgba(0,0,0,.035) 1px, transparent 1.2px) 0 0/6px 6px,
    radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.2px) 3px 3px/7px 7px,
    var(--table);
}
:root[data-theme="paper"] body{background:transparent}
:root[data-theme="paper"] .warp{
  background:
    radial-gradient(rgba(0,0,0,.035) 1px, transparent 1.2px) 0 0/6px 6px,
    radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.2px) 3px 3px/7px 7px,
    var(--table);
}
:root[data-theme="paper"] .hero h1{letter-spacing:-.03em}
:root[data-theme="paper"] .hero p{color:var(--cold)}

/* panels and lists sit on slightly lighter paper */
:root[data-theme="paper"] .panel,
:root[data-theme="paper"] .profile,
:root[data-theme="paper"] .room,
:root[data-theme="paper"] .guide,
:root[data-theme="paper"] #result{background:var(--paper)}
:root[data-theme="paper"] .server,
:root[data-theme="paper"] .chip,
:root[data-theme="paper"] .person{background:var(--felt)}
:root[data-theme="paper"] .qbar{box-shadow:0 8px 20px -14px rgba(60,40,20,.4)}
:root[data-theme="paper"] .pill.wait{background:var(--q-soft)}

/* high / low bars in rust and navy */
:root[data-theme="paper"] .rank-top{background:linear-gradient(90deg, rgba(201,71,43,.16), rgba(201,71,43,.03));border-color:rgba(201,71,43,.45)}
:root[data-theme="paper"] .rank-bottom{background:linear-gradient(90deg, rgba(36,54,92,.14), rgba(36,54,92,.03));border-color:rgba(36,54,92,.4)}

/* cards: my card gets a navy ring instead of a white glow */
:root[data-theme="paper"] .card.mine .back{box-shadow:inset 0 0 0 2px rgba(0,0,0,.12), inset 0 0 0 4px rgba(255,255,255,.45), 0 0 0 3px var(--cold), 0 6px 16px -6px rgba(36,54,92,.5)}
:root[data-theme="paper"] .card.other .stage{opacity:.68}
:root[data-theme="paper"] .ghost .flip{box-shadow:0 18px 26px -10px rgba(60,40,20,.45)}

/* buttons */
:root[data-theme="paper"] .help-btn{background:var(--paper);color:var(--thread);border-color:var(--thread);box-shadow:0 4px 10px rgba(60,40,20,.2)}
:root[data-theme="paper"] .gbtn{color:#fff;background:var(--cold);box-shadow:0 3px 0 #16233f}
:root[data-theme="paper"] .gstep{background:var(--cold);color:#fff}
:root[data-theme="paper"] .coach-step{background:var(--cold);color:#fff}
:root[data-theme="paper"] .profile-edit{color:var(--cold);border-color:var(--cold)}
:root[data-theme="paper"] .icon-opt[aria-pressed="true"]{border-color:var(--cold);background:rgba(36,54,92,.08);box-shadow:0 0 0 2px var(--cold)}
:root[data-theme="paper"] .edit.filled{border-color:var(--cold);color:var(--cold)}

/* toast, intro, celebration on a light background */
:root[data-theme="paper"] #toast{background:var(--cold);color:#fff}
:root[data-theme="paper"] .intro{background:rgba(239,235,227,.97)}
:root[data-theme="paper"] .intro.fade{background:rgba(239,235,227,0)}
:root[data-theme="paper"] .intro-round{color:var(--thread);text-shadow:none}
:root[data-theme="paper"] .intro-q h2{
  background:linear-gradient(100deg, #2a2622 0%, #2a2622 38%, #c9472b 48%, #2a2622 58%, #2a2622 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;filter:none;
}
:root[data-theme="paper"] .intro-scale{color:var(--fg)}
:root[data-theme="paper"] .intro-scale b{color:var(--thread)}
:root[data-theme="paper"] .intro-cap{color:var(--fg)}
:root[data-theme="paper"] .intro-cap b{color:var(--thread)}
:root[data-theme="paper"] .iback{box-shadow:inset 0 0 0 3px rgba(255,255,255,.35), 0 18px 30px -14px rgba(60,40,20,.55)}
:root[data-theme="paper"] #cheer{color:var(--thread);text-shadow:0 4px 0 rgba(42,38,34,.12), 0 10px 26px rgba(255,255,255,.8)}
:root[data-theme="paper"] #cheer small{color:var(--fg);text-shadow:none}
:root[data-theme="paper"] .gtext b,
:root[data-theme="paper"] .tut-slide p b,
:root[data-theme="paper"] .coach p b{color:var(--thread)}
:root[data-theme="paper"] .ill-win{color:var(--thread)}

/* theme picker swatches */
.theme-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.theme-opt{appearance:none;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--table);color:var(--fg);font-size:14px}
.theme-opt[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
:root[data-theme="paper"] .theme-opt[aria-pressed="true"]{border-color:var(--cold);box-shadow:0 0 0 2px var(--cold)}
.theme-opt i{width:22px;height:22px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.theme-opt i.dark{background:linear-gradient(135deg, #2a2140 50%, #ff566c 50%)}
.theme-opt i.paper{background:linear-gradient(135deg, #efebe3 50%, #c9472b 50%)}
/* Noto Sans KR is wider than Black Han Sans: tighten a few labels so they stay on one line */
:root[data-theme="paper"] .server b{font-size:15px;letter-spacing:-.04em;word-break:keep-all;white-space:nowrap}
:root[data-theme="paper"] .sgroup-name,
:root[data-theme="paper"] .topbar h2,
:root[data-theme="paper"] .room b,
:root[data-theme="paper"] #qtext,
:root[data-theme="paper"] .rank span,
:root[data-theme="paper"] .bname{letter-spacing:-.03em}
:root[data-theme="paper"] .profile-icon,
:root[data-theme="paper"] .bicon,
:root[data-theme="paper"] .intro-icon{box-shadow:0 0 0 1px rgba(60,40,20,.12), 0 1px 4px rgba(60,40,20,.2)}