/* XtraSoul /tcg/. Tokens match /nivel; see DESIGN.md. */
:root{
  --bg:#101015;--panel:#16161c;--chip:#1e1e25;--line:#26262e;
  --ink:#ececef;--ink-2:#a2a2ac;--ink-3:#868691;--accent:#8ea8f5;
  --fire:#d2493b;--storm:#2f9a6a;--wave:#2f72c9;--bolt:#d7a321;
  --ease:cubic-bezier(0.23,1,0.32,1);--ease-io:cubic-bezier(0.77,0,0.175,1);
  --holo:repeating-linear-gradient(115deg,#ff6b7d 0%,#ffc56b 6%,#f6ff7a 12%,#7dffc0 18%,#6fd0ff 24%,#b593ff 30%,#ff6b7d 36%);
  --gut:clamp(16px,4vw,32px);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f4f4f2;--panel:#ffffff;--chip:#ebebe8;--line:#e2e2df;
  --ink:#101015;--ink-2:#5b5c63;--ink-3:#686970;--accent:#2f5bd3;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);
  font:15px/1.45 "IBM Plex Sans KR","IBM Plex Sans Thai",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
html[lang="th"] body{font-family:"IBM Plex Sans Thai","IBM Plex Sans KR",system-ui,sans-serif}
html[lang="zh"] body{font-family:"Noto Sans SC","IBM Plex Sans KR",system-ui,sans-serif}
html[lang="ko"] body{word-break:keep-all;overflow-wrap:anywhere}
button{font:inherit;color:inherit;cursor:pointer}
.nb{white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The same aurora as /nivel, 15% quieter: this page sets text directly on it (worst case 4.5:1 for --ink-2). */
.aura{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aura i{position:absolute;width:72vmax;height:72vmax;border-radius:50%;background:radial-gradient(closest-side,var(--c),transparent);opacity:.2;will-change:transform;animation:drift var(--t) ease-in-out infinite alternate}
.aura i:nth-child(1){--c:var(--wave);--t:41s;left:-24vmax;top:-30vmax}
.aura i:nth-child(2){--c:var(--fire);--t:47s;right:-30vmax;top:-12vmax;animation-delay:-14s}
.aura i:nth-child(3){--c:var(--storm);--t:53s;left:4vmax;bottom:-42vmax;animation-delay:-23s}
.aura i:nth-child(4){--c:var(--bolt);--t:44s;right:-22vmax;bottom:-38vmax;opacity:.145;animation-delay:-7s}
.aura i:nth-child(5){--c:var(--accent);--t:59s;left:28vmax;top:16vmax;opacity:.136;animation-delay:-31s}
:root[data-theme="light"] .aura i{opacity:.11}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(9vmax,6vmax) scale(1.14)}100%{transform:translate(-7vmax,11vmax) scale(.9)}}

.top,main,footer{width:min(1120px,100% - 2 * var(--gut));margin-inline:auto}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;padding-block:18px}
.word{display:block;color:var(--ink);border-radius:4px}
.word svg{display:block;height:22px;width:auto;fill:currentColor}
.ctl{display:flex;align-items:center;gap:8px}
.seg{display:inline-flex;flex:none;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;background:none;height:36px;padding:0 12px;font-size:13px;color:var(--ink-2);transition:color .14s var(--ease)}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.ic{flex:none;width:38px;height:38px;border:1px solid var(--line);border-radius:8px;background:none;color:var(--ink-2);display:grid;place-items:center;transition:color .14s var(--ease)}
.ic svg{width:16px;height:16px;display:block}
.ic .sun{display:none}
:root[data-theme="light"] .ic .sun{display:block}
:root[data-theme="light"] .ic .moon{display:none}

main{flex:1;padding-bottom:clamp(28px,5vw,56px)}
.intro{display:grid;grid-template-columns:1fr minmax(0,40ch);align-items:end;gap:10px 32px;padding-block:clamp(14px,3vw,36px) clamp(20px,3vw,32px)}
h1{margin:0;font-size:clamp(36px,5.6vw,60px);line-height:1.05;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
html[lang="th"] h1{line-height:1.2;letter-spacing:0}
.intro p{margin:0;color:var(--ink-2);text-wrap:pretty}

.wall{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2.6vw,30px) clamp(10px,2.2vw,24px)}
.g a{display:block;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:none}

/* One card: 63 x 88 mm with 3 mm corners */
.card{position:relative;display:block;aspect-ratio:63/88;border-radius:4.76%/3.41%;perspective:900px;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)) scale(var(--sc,1));
  transition:transform .26s var(--ease),box-shadow .26s var(--ease);
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 2px 3px rgba(0,0,0,.4),0 14px 26px -12px rgba(0,0,0,.7)}
:root[data-theme="light"] .card{box-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.14),0 12px 22px -12px rgba(0,0,0,.4)}
.back,.face{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;overflow:hidden;isolation:isolate}
.back{background:var(--b)}
/* Printed stock: a fine weave and one frame line, equal on all sides */
.back::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,var(--tx) 0 1px,transparent 1px 6px)}
.back::after{content:"";position:absolute;inset:3.58% 5%;border:1px solid var(--fl);border-radius:2px}
.back img{position:relative;display:block;width:var(--lw);height:auto}
.face img{display:block;width:100%;height:100%;object-fit:cover}

/* One light for the whole table. --x/--y are set per card, so the pool crosses the gaps. */
.sheen{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:color-dodge;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(circle 340px at var(--x,50%) var(--y,50%),rgba(255,255,255,.62),rgba(255,255,255,.16) 46%,transparent 72%)}
.sheen::after{content:"";position:absolute;inset:0;opacity:.3;background:var(--holo) 0 0/320% 320%;background-position:var(--x,0) var(--y,0);
  -webkit-mask-image:radial-gradient(circle 240px at var(--x,50%) var(--y,50%),#000,transparent 72%);mask-image:radial-gradient(circle 240px at var(--x,50%) var(--y,50%),#000,transparent 72%)}
.lit .sheen{opacity:1}

/* Face-up: the same foil as a special rare on /nivel */
.faces{position:absolute;inset:0;display:block;border-radius:inherit;transform-style:preserve-3d}
.face,.faces .back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.faces .back{transform:rotateY(180deg)}
.face::before,.face::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit}
.face::before{opacity:.1;mix-blend-mode:color-dodge;transition:opacity .25s var(--ease);
  background:radial-gradient(circle at 20% 30%,#fff 0 .6px,transparent 1.3px) 0 0/9px 11px,radial-gradient(circle at 70% 60%,#fff 0 .5px,transparent 1.2px) 0 0/13px 12px,var(--holo) 0 0/320% 320%}
.face::after{opacity:0;mix-blend-mode:overlay;transition:opacity .25s var(--ease);
  background:radial-gradient(farthest-corner circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.7),rgba(255,255,255,.12) 28%,transparent 58%)}
@keyframes shimmer{from{background-position:0 0,0 0,0% 20%}to{background-position:9px 11px,-13px 12px,100% 80%}}

.nm{display:block;margin-top:10px;font-size:14px;line-height:1.3;font-weight:500;text-wrap:balance}
.ext{display:inline-block;width:.68em;height:.68em;margin-left:.3em;vertical-align:.04em;color:var(--ink-2)}
.go{display:block;margin-top:2px;font-size:13px;line-height:1.3;color:var(--accent)}
:root[data-theme="light"] .go{color:#244aa8}
.g a:focus-visible .card{outline:2px solid var(--accent);outline-offset:3px;--ty:-4px}
.word:focus-visible,.seg button:focus-visible,.ic:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seg button:focus-visible{outline-offset:-2px}
.g a:active .card{--sc:.98;transition-duration:.1s}

footer{padding-block:0 28px;font-size:13px;color:var(--ink-2)}
footer p{margin:0;max-width:72ch;text-wrap:pretty}

/* Mouse only. Phones keep everything still. */
@media (hover:hover) and (pointer:fine){
  .seg button:hover,.ic:hover{color:var(--ink)}
  .seg button[aria-pressed="true"]:hover{color:var(--bg)}
  .g a:hover .card{--ty:-6px;--sc:1.03;transition-duration:.14s;
    box-shadow:0 0 0 1px rgba(255,255,255,.14),0 4px 6px rgba(0,0,0,.4),0 26px 40px -16px rgba(0,0,0,.85)}
  :root[data-theme="light"] .g a:hover .card{box-shadow:0 0 0 1px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.14),0 24px 36px -16px rgba(0,0,0,.5)}
  .face::before{animation:shimmer 7s ease-in-out infinite alternate}
  .g a:hover .face::before{opacity:.3;animation:none;
    background-position:calc(var(--mx,50%) * -.4) calc(var(--my,50%) * -.4),calc(var(--mx,50%) * .3) calc(var(--my,50%) * .3),var(--mx,50%) var(--my,50%)}
  .g a:hover .face::after{opacity:1}
}

/* First view in a tab session: deal, then turn over what is open */
.deal .card{animation:deal .56s var(--ease) backwards;animation-delay:calc(var(--i,0) * 36ms)}
@keyframes deal{from{opacity:0;transform:translate(var(--dx,0px),var(--dy,-24px)) rotate(var(--dr,-2deg)) scale(.96)}}
.deal .faces{animation:flip .8s var(--ease-io) backwards;animation-delay:.8s}
@keyframes flip{from{transform:rotateY(180deg)}}

@media (max-width:719px){.intro{grid-template-columns:1fr}}
@media (max-width:599px){
  .wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nm{margin-top:8px;font-size:13px}
  .go{font-size:12.5px}
}
@media (max-width:400px){.word svg{height:18px}}
@media (pointer:coarse){
  .seg button{height:44px;padding:0 9px}
  .ic{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.aura{display:none}}

/* Generated from games.json */
.g-nivel{--b:#101015;--fl:rgba(255,255,255,.18);--tx:rgba(255,255,255,.022);--lw:77.3%}
.g-pokemon{--b:#1b3f99;--fl:rgba(255,255,255,.18);--tx:rgba(255,255,255,.022);--lw:65.6%}
.g-onepiece{--b:#a8161f;--fl:rgba(255,255,255,.18);--tx:rgba(255,255,255,.022);--lw:84.0%}
.g-yugioh{--b:#241208;--fl:rgba(255,255,255,.18);--tx:rgba(255,255,255,.022);--lw:77.6%}
.g-ws{--b:#e7e8ee;--fl:rgba(0,0,0,.16);--tx:rgba(0,0,0,.018);--lw:66.9%}
.g-union{--b:#0e0d0a;--fl:rgba(231,196,103,.5);--tx:rgba(255,255,255,.022);--lw:69.1%}
.g-dbs{--b:#d2500f;--fl:rgba(255,255,255,.18);--tx:rgba(255,255,255,.022);--lw:77.5%}
.g-digimon{--b:#06122c;--fl:rgba(255,255,255,.18);--tx:rgba(255,255,255,.022);--lw:84.0%}
.g-gundam{--b:#dcecf2;--fl:rgba(0,0,0,.16);--tx:rgba(0,0,0,.018);--lw:69.9%}
.g-conan{--b:#0b3f86;--fl:rgba(255,255,255,.18);--tx:rgba(255,255,255,.022);--lw:84.0%}
.g-uvs{--b:#062b3c;--fl:rgba(255,255,255,.18);--tx:rgba(255,255,255,.022);--lw:63.6%}
.g-vanguard{--b:#f4f5f8;--fl:rgba(0,0,0,.16);--tx:rgba(0,0,0,.018);--lw:70.7%}
.g-sve{--b:#0b1a2b;--fl:rgba(255,255,255,.18);--tx:rgba(255,255,255,.022);--lw:62.0%}
.g-osica{--b:#fbfaf6;--fl:rgba(0,0,0,.16);--tx:rgba(0,0,0,.018);--lw:84.0%}
.g-hololive{--b:#dde0f3;--fl:rgba(0,0,0,.16);--tx:rgba(0,0,0,.018);--lw:84.0%}