/* ==========================================================================
   Skins de Geolite (v0.4). El de "expedicion" es la base (style.css); los otros redefinen tokens, formas y tipografia.
   ========================================================================== */
@font-face { font-family: "Jersey 15"; src: url("../fonts/jersey-15-latin-400-normal.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("../fonts/pixelify-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("../fonts/silkscreen-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("../fonts/silkscreen-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* latin extendido (polaco, turco, checo...). Silkscreen no lo trae: sus letras polacas se construyen con sus propias piezas (tools/build_silkscreen_pl.py) */
@font-face { font-family: "Silkscreen"; src: url("../fonts/silkscreen-pl-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C; }
@font-face { font-family: "Silkscreen"; src: url("../fonts/silkscreen-pl-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C; }
@font-face { font-family: "Jersey 15"; src: url("../fonts/jersey-15-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400 900; font-display: swap; 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; }
@font-face { font-family: "Pixelify Sans"; src: url("../fonts/pixelify-sans-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; 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; }
/* Silkscreen y Jersey solo traen latin: el cirilico sale de Pixelify Sans y el CJK/hangul de Fusion Pixel (OFL, fonts/LICENSE-fusion-pixel.txt).
   Por unicode-range, cada archivo solo se descarga si en pantalla hay caracteres de ese alfabeto. */
@font-face { font-family: "Pixelify Sans"; src: url("../fonts/pixelify-sans-cyrillic-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* para var(--mono): cirilico de Tiny5 (misma altura de 5 px que Silkscreen) con minusculas = mayusculas, como Silkscreen (tools/build_cyrillic_caps.py) */
@font-face { font-family: "Geolite Cyrillic Caps"; src: url("../fonts/geolite-cyrillic-caps.woff2") format("woff2"); font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1; }
@font-face { font-family: "Fusion Pixel ZH"; src: url("../fonts/fusion-pixel-12px-zh_hans.woff2") format("woff2"); font-display: swap; unicode-range: U+1100-11FF, U+3000-303F, U+3040-30FF, U+3130-318F, U+31F0-31FF, U+3200-32FF, U+3400-4DBF, U+4E00-9FFF, U+AC00-D7AF, U+F900-FAFF, U+FF00-FFEF; }
@font-face { font-family: "Fusion Pixel JA"; src: url("../fonts/fusion-pixel-12px-ja.woff2") format("woff2"); font-display: swap; unicode-range: U+1100-11FF, U+3000-303F, U+3040-30FF, U+3130-318F, U+31F0-31FF, U+3200-32FF, U+3400-4DBF, U+4E00-9FFF, U+AC00-D7AF, U+F900-FAFF, U+FF00-FFEF; }
@font-face { font-family: "Fusion Pixel KO"; src: url("../fonts/fusion-pixel-12px-ko.woff2") format("woff2"); font-display: swap; unicode-range: U+1100-11FF, U+3000-303F, U+3040-30FF, U+3130-318F, U+31F0-31FF, U+3200-32FF, U+3400-4DBF, U+4E00-9FFF, U+AC00-D7AF, U+F900-FAFF, U+FF00-FFEF; }
/* solo los glifos de cada nombre del selector de idioma (<1 KB): asi el selector no obliga a bajar la fuente CJK entera */
@font-face { font-family: "Lang Name ZH"; src: url("../fonts/lang-name-zh.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Lang Name JA"; src: url("../fonts/lang-name-ja.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Lang Name KO"; src: url("../fonts/lang-name-ko.woff2") format("woff2"); font-display: block; }
/* "……" y "——" a la china (puntos y raya a media altura, tools/build_cjk_punct.py): va la PRIMERA en la pila, pero solo en zh/ja/ko;
   en el resto de idiomas --cjkp apunta a una familia inexistente y el navegador la salta */
@font-face { font-family: "Geolite CJK Punct"; src: url("../fonts/geolite-cjk-punct.woff2") format("woff2"); font-display: block; unicode-range: U+2014, U+2026; }
html { --cjk: system-ui; --cjkp: "Geolite No Punct"; }
html:lang(zh) { --cjk: "Fusion Pixel ZH"; } html:lang(ja) { --cjk: "Fusion Pixel JA"; } html:lang(ko) { --cjk: "Fusion Pixel KO"; }
html:lang(zh), html:lang(ja), html:lang(ko) { --cjkp: "Geolite CJK Punct"; }

/* selector de skins (comun) */
.skins { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
body { transition: none; } @keyframes skin-flash { 0% { opacity: .0; } 18% { opacity: .55; } 100% { opacity: 0; } }

/* ==========================================================================
   CASINO  -  mesa de cartas, monitor CRT, tipografia pixel
   ========================================================================== */
html[data-skin="casino"] {
  --ink: #16241c; --ink-2: #4a6b5a; --ink-deep: #0a140f; --paper: #f3eddc; --paper-2: #e4dcc4; --paper-3: #cfc4a4;
  --red: #fe5f55; --red-deep: #b3322a; --brass: #f8b449; --brass-lt: #ffd98a; --teal: #009dff; --green: #4bc292;
  --serif: var(--cjkp), "Jersey 15", "Pixelify Sans", var(--cjk), sans-serif; --sans: var(--cjkp), "Jersey 15", "Pixelify Sans", var(--cjk), system-ui, sans-serif; --mono: var(--cjkp), "Silkscreen", "Geolite Cyrillic Caps", "Jersey 15", "Pixelify Sans", var(--cjk), sans-serif;
  --disp: "wght" 700; --paper-grain: none; --spring: cubic-bezier(.3, 1.7, .4, 1);
}
html[data-skin="casino"] #app { background: #0d2c33; }
html[data-skin="casino"] .sh { filter: drop-shadow(0 6px 0 rgba(5, 11, 7, .62)); }
html[data-skin="casino"] .cut { clip-path: none; border-radius: 14px; --bw: 3px; }
html[data-skin="casino"] .cut::before { clip-path: none; border-radius: 11px; }
html[data-skin="casino"] .cut.paper { --edge: #16241c; }
html[data-skin="casino"] .cut.ink { --edge: #0a140f; --fill: #1c3a2c; }
html[data-skin="casino"] .cut.ink::before { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .09), inset 0 -4px 0 rgba(0, 0, 0, .25); }
html[data-skin="casino"] .cut.paper::before { box-shadow: inset 0 -5px 0 rgba(120, 90, 40, .13); }
html[data-skin="casino"] .ledger::after { content: ""; position: absolute; right: 12px; top: 8px; width: 18px; height: 18px; background: url("../assets/icons/heart.webp") center / contain no-repeat; opacity: .9; }
html[data-skin="casino"] .brand-txt b, html[data-skin="casino"] #askName, html[data-skin="casino"] .lg-num, html[data-skin="casino"] .menu-in h1, html[data-skin="casino"] .tk-km, html[data-skin="casino"] .tk-total .odo, html[data-skin="casino"] .camp-t, html[data-skin="casino"] .intro-num, html[data-skin="casino"] .intro-body h2, html[data-skin="casino"] .fader label, html[data-skin="casino"] .row-sw label, html[data-skin="casino"] .tk-title { letter-spacing: 0; font-style: normal; }
html[data-skin="casino"] #askName { font-size: clamp(26px, calc(3.2 * var(--vw)), 44px); line-height: 1.05; }
html[data-skin="casino"] .tk-title { color: var(--red); font-size: 30px; }
html[data-skin="casino"] .lg-num { font-size: 42px; } html[data-skin="casino"] .tk-km { font-size: 56px; }
html[data-skin="casino"] .brand { --fill: #1c3a2c; } html[data-skin="casino"] .brand-txt i { background: var(--red); transform: translateY(-3px) rotate(-3deg); }
html[data-skin="casino"] .tag { background: var(--ink); clip-path: none; border-radius: 6px; padding: 4px 9px 3px; }
html[data-skin="casino"] .ruler i, html[data-skin="casino"] #pips i.done { background: var(--ink); } html[data-skin="casino"] #pips i { height: 8px; border-radius: 3px; }
html[data-skin="casino"] .gauge i { background: var(--teal); } html[data-skin="casino"] .gauge i.done { background: var(--green); }
html[data-skin="casino"] .plate-sh { animation: card-sway 5s ease-in-out infinite; } html[data-skin="casino"] .ledger-sh { animation: card-sway 6.5s ease-in-out -2s infinite reverse; }
@keyframes card-sway { 0%, 100% { transform: rotate(-.55deg) translateY(0); } 50% { transform: rotate(.55deg) translateY(-2px); } }
html[data-skin="casino"] .note-sh { transform: translateX(-50%) rotate(.4deg); }
html[data-skin="casino"] .btn-ink { background: var(--red); color: #fff; clip-path: none; border-radius: 10px; box-shadow: 0 5px 0 var(--red-deep); font-weight: 400; transition: transform .1s, box-shadow .1s; }
html[data-skin="casino"] .btn-ink:hover { background: #ff7a70; transform: translateY(-2px); box-shadow: 0 7px 0 var(--red-deep); } html[data-skin="casino"] .btn-ink:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--red-deep); }
html[data-skin="casino"] .btn-ink::before { display: none; }
html[data-skin="casino"] .btn-line { clip-path: none; border-radius: 10px; background: var(--teal); color: #fff; box-shadow: 0 5px 0 #0068b3; }
html[data-skin="casino"] .btn-line:hover { background: #33b2ff; } html[data-skin="casino"] .btn-line:active { transform: translateY(4px); box-shadow: 0 1px 0 #0068b3; }
html[data-skin="casino"] #dock button, html[data-skin="casino"] #rail button, html[data-skin="casino"] .menu-gear, html[data-skin="casino"] .row-btn, html[data-skin="casino"] .langgrid button { clip-path: none; border-radius: 9px; }
html[data-skin="casino"] .seg { border-radius: 10px; } html[data-skin="casino"] .seg > i { border-radius: 7px; }
html[data-skin="casino"] .camp { --fill: #1a3528; --edge: #0a140f; } html[data-skin="casino"] .camp.sel { --edge: var(--brass); --fill: #2a5c46; }
html[data-skin="casino"] .camp-thumb { border-radius: 8px; border: 2px solid #0a140f; }
html[data-skin="casino"] .menu-in { background: linear-gradient(90deg, rgba(10, 26, 18, .97), rgba(10, 26, 18, .94) 84%, rgba(10, 26, 18, 0)); }
html[data-skin="casino"] .go { --fill: #1a3528; --edge: var(--brass); } @keyframes chip-spin { to { transform: rotate(360deg); } }
html[data-skin="casino"] .brand-rose, html[data-skin="casino"] .menu-rose { color: var(--brass); }
html[data-skin="casino"] .ticket { -webkit-mask: none; mask: none; border-radius: 14px; box-shadow: 0 0 0 3px #16241c inset; }
html[data-skin="casino"] .tk-band { border-radius: 11px 11px 0 0; }
html[data-skin="casino"] .fader label { color: var(--paper); }
html[data-skin="casino"] #tip { border-radius: 8px; box-shadow: 0 4px 0 rgba(0, 0, 0, .5); } html[data-skin="casino"] .langpop { clip-path: none; border-radius: 14px; }
html[data-skin="casino"] #factText { font-style: normal; font-size: 19px; }