/* Black Deck page (blackdeck/index.php). Single dark look; desktop first, phones only need to work.
   The game's own styles (.lg-*) come from game/lg-game.js. */
:root{--bg:#0b0d15;--panel:#151927;--line:#2a3045;--fg:#d9dcea;--muted:#8b91ab;--accent:#a9b6ff;--ink:#ffd9a0;
  --ui:'Alegreya Sans',system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif;color-scheme:dark;
  --stage-w:min(100%,calc((100vh - 118px) * 1376 / 768));--stage-play:min(100%,calc((100vh - 24px) * 1376 / 768))}
@supports (height:100dvh){:root{--stage-w:min(100%,calc((100dvh - 118px) * 1376 / 768));--stage-play:min(100%,calc((100dvh - 24px) * 1376 / 768))}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font:16px/1.4 var(--ui);display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:10px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Fonts and languages (en es pt fr de it tr ja ru). Coverage of the faces in use: IM Fell English (+ SC), the game's pen
   and ink, has Latin only: no Turkish g-breve / s-cedilla / dotted I, no Cyrillic. Pirata One and Cinzel have Latin +
   Latin-Ext (Turkish yes, Cyrillic no). Alegreya Sans (page UI) has Latin-Ext and Cyrillic. None has Japanese.
   Fallbacks: EB Garamond (Latin-Ext + Cyrillic, an old-style serif close to IM Fell; Google serves it in unicode-range
   subsets, so a page only fetches the subsets its text needs), then Georgia, then Japanese: Noto Serif JP (a webfont,
   linked by index.php only for a ja page; also served in unicode-range slices, so only the glyphs in use download),
   then the system Mincho fonts (absent on a default Windows install). For tr and ru the whole pen / ink text switches to EB Garamond, so letters never mix faces inside a word;
   for ja the Mincho comes right after IM Fell. Display text keeps Pirata One first: the "Black Deck" brand stays
   gothic, and Cyrillic / Japanese words in it fall back whole. The game sets these variables on .lg-overlay;
   .stage .lg-overlay wins over it. */
:root{--jp-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",YuMincho,"MS PMincho";
  --jp-sans:"Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",Meiryo}
.stage .lg-overlay,.gc-pop,.bd-toast-wrap{
  --lg-f-pen:'IM Fell English','EB Garamond','IM Fell English SC',Georgia,var(--jp-serif),serif;
  --lg-f-ink:'IM Fell English SC','IM Fell English','EB Garamond',Georgia,var(--jp-serif),serif;
  --lg-f-display:'Pirata One','EB Garamond',Georgia,var(--jp-serif),serif;
  --lg-f-num:'Cinzel','EB Garamond',Georgia,'Times New Roman',var(--jp-serif),serif;
  --lg-f-ui:'Alegreya Sans','Trebuchet MS',system-ui,var(--jp-sans),sans-serif;
  --lg-f-card:Georgia,"Palatino Linotype","Book Antiqua",Palatino,"Times New Roman",var(--jp-serif),serif}
.stage .lg-overlay:lang(tr),.gc-pop:lang(tr),.bd-toast-wrap:lang(tr),.stage .lg-overlay:lang(ru),.gc-pop:lang(ru),.bd-toast-wrap:lang(ru){
  --lg-f-pen:'EB Garamond',Georgia,serif;--lg-f-ink:'EB Garamond',Georgia,serif}
.stage .lg-overlay:lang(ja),.gc-pop:lang(ja),.bd-toast-wrap:lang(ja){
  --lg-f-pen:'IM Fell English',var(--jp-serif),serif;--lg-f-ink:'IM Fell English SC',var(--jp-serif),serif}
/* Japanese has no italic: ja text stays upright and the browser never fakes a slant (font-synthesis). Lines break
   between phrases, not inside words (word-break:auto-phrase, inherited; nothing here or in the game sets word-break or
   line-break); the two overflow-wrap:anywhere rules (card names, toast) step back to break-word, so they only break
   a phrase that cannot fit at all. */
html:lang(ja){word-break:auto-phrase;font-synthesis:none}
.stage .lg-overlay:lang(ja) *,.gc-pop:lang(ja) *,.bd-toast-wrap:lang(ja) *{font-style:normal;font-synthesis:none}
.stage .lg-overlay:lang(ja) .lg-name,.bd-toast-wrap:lang(ja) .bd-toast-s{overflow-wrap:break-word}
/* tr, ru: EB Garamond is taller than IM Fell (ascent + descent about 1.3em), so the scoreboard head and the end-of-game
   stats get line boxes it fits in (their line-height 1 / 1.2 let it spill 2-3px below the box). */
.gc-sb-head:is(:lang(tr),:lang(ru)) :is(.gc-sb-k,.gc-sb-t,.gc-sb-run,.gc-sb-run b),
.stage .lg-overlay:is(:lang(tr),:lang(ru)) .lg-e-stats :is(dt,dd){line-height:1.3}

/* top bar: back link, title, play, leaderboard, sound, language, who is signed in */
.gc-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;width:100%;max-width:var(--stage-w);min-height:46px;transition:max-width .45s ease}
.gc-home{color:var(--muted);text-decoration:none;font-size:14px;white-space:nowrap}
.gc-home:hover{color:var(--fg)}
.gc-title{margin:0;font:400 28px/1 'Pirata One',Georgia,serif;color:var(--ink);letter-spacing:.02em;white-space:nowrap}
.gc-spacer{flex:1}
.gc-btn{font:600 14px/1 var(--ui);color:var(--fg);background:var(--line);border:1px solid #3a4260;border-radius:999px;padding:8px 14px;cursor:pointer;white-space:nowrap}
.gc-btn:hover{border-color:var(--muted)}
.gc-btn:disabled{opacity:.6;cursor:default}
.gc-play{color:#2a1300;font-weight:700;background:linear-gradient(180deg,#ffb15c,#e8791f);border-color:transparent;box-shadow:0 0 14px rgba(255,155,61,.35)}
.gc-play:hover{background:linear-gradient(180deg,#ffc07a,#f08a30);border-color:transparent}
.gc-who{display:inline-flex;align-items:center;gap:8px;min-height:32px}
.gc-me{color:var(--muted);font-size:14px}
.gc-me b{color:var(--fg);font-weight:600}
.gc-link{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-size:14px}
.gc-lang{position:relative}
.gc-lang-btn{display:inline-flex;align-items:center;gap:7px}
.gc-flag{display:block;flex:none;width:18px;height:12px;box-shadow:0 0 0 1px rgba(128,128,128,.6)}   /* hairline: white flags still show */
.gc-lang-list{position:absolute;right:0;top:calc(100% + 6px);z-index:1200;min-width:170px;margin:0;padding:5px;list-style:none;
  background:#151023;border:1px solid rgba(255,200,140,.35);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.6)}
.gc-lang-opt{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:6px;cursor:pointer;font:500 14px/1.2 var(--ui);color:var(--fg);white-space:nowrap}
.gc-lang-opt:hover,.gc-lang-opt:focus{background:rgba(255,177,92,.16);outline:none}
.gc-lang-opt:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.gc-lang-opt[aria-selected="true"]{color:#ffe2b0;font-weight:700}
body.cards-on .gc-bar{display:none}

/* the scene: 1376x768, as large as the window allows; the game (ledger layout) mounts inside it */
.stage{position:relative;flex:none;width:100%;max-width:var(--stage-w);aspect-ratio:1376/768;border-radius:6px;overflow:hidden;
  background:var(--panel) url("scene/bg.webp") 50% 50%/100% 100% no-repeat;transition:max-width .45s ease}
body.cards-on .stage{max-width:var(--stage-play)}
.stage canvas{display:block;width:100%;height:100%}
.stage.gc-static #c{visibility:hidden}          /* no WebGL / lost context: the still picture behind it shows */
.crowfx{position:absolute;inset:0;z-index:8;pointer-events:none}
.gc-help{margin:0;max-width:var(--stage-w);color:var(--muted);font-size:14px;text-align:center}
body.cards-on .gc-help{display:none}

/* Leaderboard (top bar, host.js openBoard): the parchment board in the board area, over the scene or over a running
   game (the ledger overlay is z-index 5 in the stage; on phones it covers the screen at 1000). Same geometry as the
   game's .lg-scores (lg-game.js ledger layout): --u is one hundredth of the stage height. */
.gc-pop{position:absolute;inset:0;z-index:10;container-type:size;--u:1cqh;pointer-events:none}
.gc-pop[hidden]{display:none}
.gc-pop-in{position:absolute;left:9cqw;top:50%;transform:translateY(-50%);height:calc(var(--u) * 86);pointer-events:auto;
  width:max(calc((var(--u) * 86 - var(--u) * 2.8) / 1.5 + var(--u) * 2.8),calc(87cqw - var(--u) * 84 * 654 / 977 - var(--u) * 3));
  overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(44,26,12,.45) transparent;animation:gc-pop .35s ease both}
@keyframes gc-pop{from{opacity:0}to{opacity:1}}
@media (max-width:860px),(max-height:440px){
  .gc-pop{position:fixed;z-index:1050;container-type:normal;--u:6.4px;pointer-events:auto;overflow-y:auto;overscroll-behavior:contain;
    background:rgba(8,5,18,.95);padding:max(14px,env(safe-area-inset-top,0px)) 16px 28px}
  .gc-pop-in{position:relative;left:auto;top:auto;transform:none;width:min(100%,420px);height:auto;margin:0 auto;overflow:visible}
}

/* the two lists, Today and All time (host.js listBox), on the parchment board. --u and the --lg-f-* fonts come from
   the game's overlay (end of a game) or from .gc-pop (Leaderboard). */
.gc-sb-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--u) * 27)),1fr));
  gap:calc(var(--u) * 1.6) calc(var(--u) * 3);align-content:start}
.gc-list{min-width:0}
.gc-list-h{display:flex;align-items:baseline;gap:calc(var(--u) * .8);margin:0 0 calc(var(--u) * .5);padding-bottom:calc(var(--u) * .5);
  border-bottom:max(1px,calc(var(--u) * .16)) solid var(--gl-line);font:400 calc(var(--u) * 2.5)/1 var(--lg-f-ink);letter-spacing:.05em;color:var(--gl-ink)}
.gc-list-h small{font:italic 400 calc(var(--u) * 1.65)/1 var(--lg-f-pen);letter-spacing:0;color:var(--gl-soft)}
.gc-list-t{width:100%;border-collapse:collapse}
.gc-list-t th,.gc-list-t td{padding:calc(var(--u) * .3) calc(var(--u) * .5);border-bottom:max(1px,calc(var(--u) * .12)) dotted var(--gl-line);text-align:left;font-weight:400}
.gc-list-t .gc-list-r{width:1%;min-width:calc(var(--u) * 3.6);white-space:nowrap;font:400 calc(var(--u) * 1.75)/1.3 var(--lg-f-num);color:var(--gl-soft);font-variant-numeric:lining-nums tabular-nums}
.gc-list-t .gc-list-n{max-width:0;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 calc(var(--u) * 2.2)/1.25 var(--lg-f-pen);color:var(--gl-ink)}
.gc-list-t .gc-list-s{width:1%;white-space:nowrap;text-align:right;font:700 calc(var(--u) * 1.9)/1.3 var(--lg-f-num);color:var(--gl-gold);font-variant-numeric:lining-nums tabular-nums}
.gc-list-t tr.gc-mine th,.gc-list-t tr.gc-mine td{background:var(--gl-mine-bg);color:var(--gl-mine-fg)}
.gc-list-t tr.gc-mine .gc-list-n{font-weight:700}
.gc-list-t tr.gc-mine td:first-child{box-shadow:inset max(2px,calc(var(--u) * .45)) 0 0 var(--gl-mark)}
.gc-list-gap td{padding:0;border-bottom:0;text-align:center;line-height:1.1;color:var(--gl-soft)}
.gc-list-empty{margin:calc(var(--u) * .8) 0;font:italic 400 calc(var(--u) * 2)/1.3 var(--lg-f-pen);color:var(--gl-soft)}

/* game over: the scoreboard in the board area (game/lg-game.js endBoard), parchment and ink like the ledger */
.gc-sb{--gl-ink:#24140a;--gl-soft:#6a4a2a;--gl-line:rgba(44,26,12,.42);--gl-gold:#6b4300;--gl-mine-bg:rgba(255,170,60,.42);--gl-mine-fg:#2a1000;--gl-mark:#8a3a08;
  box-sizing:border-box;min-height:100%;display:flex;flex-direction:column;gap:calc(var(--u) * 1.1);
  padding:calc(var(--u) * 2.2) calc(var(--u) * 3.2) calc(var(--u) * 2);color:#2c1a0c;font:400 calc(var(--u) * 2.15)/1.3 var(--lg-f-pen);
  background:radial-gradient(ellipse at 50% 30%,#f6ead0 0%,#ecdcb4 62%,#d6bc8a 100%);
  border:max(1px,calc(var(--u) * .16)) solid rgba(44,26,12,.55);border-radius:calc(var(--u) * 1.2);
  box-shadow:0 calc(var(--u) * 1.2) calc(var(--u) * 3) rgba(0,0,0,.6),inset 0 0 calc(var(--u) * 3) rgba(110,70,25,.28)}
.gc-sb-head{text-align:center}
.gc-sb-k{margin:0;font:400 calc(var(--u) * 1.7)/1 var(--lg-f-ink);letter-spacing:.22em;text-transform:uppercase;color:#6a4a2a}
.gc-sb-t{margin:calc(var(--u) * .4) 0 0;font:400 calc(var(--u) * 4.5)/1 var(--lg-f-display);color:#3a1d0c}
.gc-sb-run{margin:calc(var(--u) * .6) 0 0;font:italic 400 calc(var(--u) * 2.1)/1.2 var(--lg-f-pen);color:#4a2c14}
.gc-sb-run b{font:700 calc(var(--u) * 2.7)/1 var(--lg-f-num);font-style:normal;color:#6b4300;font-variant-numeric:lining-nums}
.gc-sb-save{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * .7);padding:calc(var(--u) * 1.1) calc(var(--u) * 1.2);text-align:center;
  border-top:max(1px,calc(var(--u) * .16)) dotted rgba(44,26,12,.5);border-bottom:max(1px,calc(var(--u) * .16)) dotted rgba(44,26,12,.5)}
.gc-sb-line{margin:0;max-width:calc(var(--u) * 66);text-wrap:balance}
.gc-sb-soft{font-style:italic;color:#5a3a1e}
.gc-sb-rank{margin:0;font:400 calc(var(--u) * 2.6)/1.2 var(--lg-f-ink);color:#24140a}
.gc-sb-dot{color:#8a6a4a}
.gc-sb-best{margin:0;font:italic 400 calc(var(--u) * 2.3)/1.1 var(--lg-f-pen);color:#9a1212}
.gc-sb-msg{margin:0;max-width:calc(var(--u) * 66);font-style:italic;color:#9a1212}
.gc-sb-msg:empty,.gc-sb-save:empty{display:none}
.gc-sb-form{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * .9);width:100%}
.gc-sb-field{display:flex;flex-direction:column;gap:calc(var(--u) * .4);width:min(100%,calc(var(--u) * 38));text-align:left}
.gc-sb-label{font:400 calc(var(--u) * 1.8)/1 var(--lg-f-ink);letter-spacing:.06em;color:#4a2c14}
.gc-sb-input{width:100%;padding:calc(var(--u) * .9) calc(var(--u) * 1.2);border:max(1px,calc(var(--u) * .17)) solid rgba(44,26,12,.6);border-radius:calc(var(--u) * .7);
  background:rgba(255,251,238,.9);color:#24140a;font:500 calc(var(--u) * 2.4)/1.2 var(--ui)}
.gc-sb-input:focus{outline:max(2px,calc(var(--u) * .25)) solid #8a4510;outline-offset:1px}
.gc-sb-code{text-align:center;letter-spacing:.3em;font-variant-numeric:tabular-nums}
.gc-sb-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--u) * 1)}
.gc-sb-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:calc(var(--u) * 4.4);margin:0;padding:calc(var(--u) * .7) calc(var(--u) * 1.8);
  border:max(1px,calc(var(--u) * .17)) solid rgba(44,26,12,.55);border-radius:calc(var(--u) * .8);background:rgba(255,248,228,.3);color:#2c1a0c;
  font:400 calc(var(--u) * 2.1)/1 var(--lg-f-ink);letter-spacing:.03em;cursor:pointer}
.gc-sb-btn:hover{background:rgba(255,248,228,.6);border-color:#2c1a0c}
.gc-sb-main{background:#3b2414;border-color:#3b2414;color:#f3e6c8}
.gc-sb-main:hover{background:#563620;border-color:#563620}
.gc-sb-btn:disabled{opacity:.6;cursor:default}
.gc-sb-btn:focus-visible{outline:max(2px,calc(var(--u) * .25)) solid #8a4510;outline-offset:2px}
.gc-sb-lists{flex:1 1 auto}
.lg-scores{scrollbar-width:thin;scrollbar-color:rgba(44,26,12,.45) transparent}
.gc-sb-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--u) * 1)}
/* game over: the corner x (= Close, the game's own close) */
.gc-sb{position:relative}
.gc-sb-x{appearance:none;position:absolute;top:calc(var(--u) * .9);right:calc(var(--u) * .9);display:inline-flex;align-items:center;justify-content:center;
  width:calc(var(--u) * 4.4);height:calc(var(--u) * 4.4);margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:#4a2c14;
  font:400 calc(var(--u) * 3.4)/1 var(--ui);cursor:pointer}
.gc-sb-x:hover{background:rgba(44,26,12,.12);color:#24140a}
.gc-sb-x:focus-visible{outline:max(2px,calc(var(--u) * .25)) solid #8a4510;outline-offset:2px}

/* the event toast (events.js): small parchment note at the top of the free strip between the board and the ledger, so it
   never covers the cards or the ledger's buttons (same geometry as the game's ledger layout; --u = 1/100 of the stage
   height). Narrow screens: the top edge of the screen, over the full-screen game. */
.bd-toast-wrap{position:absolute;inset:0;z-index:11;container-type:size;--u:1cqh;pointer-events:none}
.bd-toast{position:absolute;top:calc(var(--u) * 1.6);left:calc(9cqw + (var(--u) * 86 - var(--u) * 2.8) / 1.5 + var(--u) * 2.8 + var(--u) * 2.2);
  right:calc(4cqw + var(--u) * 84 * 654 / 977 + var(--u) * 2.2);min-width:min(200px,calc(100cqw - 24px));pointer-events:auto;
  padding:7px 8px 9px 12px;color:#2c1a0c;font:400 clamp(12px,calc(var(--u) * 1.9),15px)/1.3 var(--lg-f-pen);text-align:left;
  background:radial-gradient(ellipse at 50% 30%,#f6ead0 0%,#ecdcb4 65%,#d6bc8a 100%);border:1px solid rgba(44,26,12,.55);border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.55),inset 0 0 14px rgba(110,70,25,.25);opacity:0;transform:translateY(-6px);transition:opacity .35s ease,transform .35s ease}
.bd-toast.bd-show{opacity:1;transform:none}
.bd-toast-head{display:flex;align-items:center;gap:8px}
.bd-toast-head strong{flex:1;min-width:0;font:400 clamp(10px,calc(var(--u) * 1.5),12px)/1 var(--lg-f-ink);letter-spacing:.16em;text-transform:uppercase;color:#6a4a2a}
.bd-toast-time{font-size:.85em;color:#6a4a2a;white-space:nowrap}
.bd-toast-x{flex:none;width:24px;height:24px;margin:-3px -2px -3px 0;padding:0;border:0;border-radius:50%;background:none;color:#4a2c14;font:400 18px/1 var(--ui);cursor:pointer}
.bd-toast-x:hover{background:rgba(44,26,12,.12)}
.bd-toast-x:focus-visible{outline:2px solid #8a4510;outline-offset:1px}
.bd-toast-t{margin:4px 0 0;font:400 1.2em/1.15 var(--lg-f-display);color:#7a1d0c}
.bd-toast-s{margin:3px 0 0;overflow-wrap:anywhere;color:#24140a}
@media (max-width:860px),(max-height:440px){
  .bd-toast-wrap{position:fixed;inset:0 0 auto 0;z-index:1100;container-type:normal;--u:6.4px}
  .bd-toast{position:relative;top:auto;left:auto;right:auto;min-width:0;width:min(360px,calc(100% - 24px));margin:max(8px,env(safe-area-inset-top,0px)) auto 0}
}
@media (prefers-reduced-motion:reduce){.bd-toast{transition:none;transform:none}}
/* the graphics note (scene.js, software rendering): the toast's parchment, centred at the foot of the scene; shown only
   while the game is closed, so it never covers the board, the ledger, the guide panel or the top bar */
.bd-toast-wrap.bd-gpu-wrap{position:absolute;inset:auto 0 0 0;z-index:11;display:flex;justify-content:center;padding:0 12px 12px;
  container-type:normal;--u:7px}
.bd-gpu-wrap .bd-toast{position:relative;top:auto;left:auto;right:auto;width:min(380px,100%);min-width:0;margin:0;transform:translateY(6px)}
.bd-gpu-wrap .bd-toast.bd-show{transform:none}
body.cards-on .bd-gpu-wrap{display:none}
.bd-gpu-copy{margin:7px 0 1px;padding:5px 11px;border:1px solid rgba(44,26,12,.55);border-radius:6px;background:#3b2414;color:#f6ead0;
  font:400 1em/1.2 var(--lg-f-ink);cursor:pointer}
.bd-gpu-copy:hover{background:#563620}
.bd-gpu-copy:focus-visible{outline:2px solid #8a4510;outline-offset:2px}
.bd-gpu-msg{margin:5px 0 0;font-size:.92em;color:#4a2c14}
@media (prefers-reduced-motion:reduce){.bd-gpu-wrap .bd-toast{transform:none}}

@media (max-width:600px){
  body{padding-top:8px;gap:8px}
  .gc-title{font-size:24px}
  .gc-bar{gap:8px 10px}
}
@media (prefers-reduced-motion:reduce){.stage,.gc-bar{transition:none}.gc-pop-in{animation:none}}