:root{--ink: #100e0c;--ink-2: #171310;--panel: #1d1814;--panel-2: #241e18;--line: #35291d;--bone: #e9e2d3;--muted: #9a8f7c;--gold: #c9a227;--gold-bright: #ecc95f;--gold-dim: #7a6420;--lapis: #2f5d9c;--lapis-bright: #6f9fd8;--lapis-deep: #1c3a66;--terra: #b34a28;--terra-bright: #e08a5d;--terra-deep: #6f2a14;--silver: #b9bdc4;--iron: #6d675c;--danger: #c25b3f;--radius: 10px;--card-w: clamp(58px, 17.5vw, 92px);--font-display: "Cinzel", "Times New Roman", serif;--font-body: "Spectral", georgia, serif;--flip-ms: .46s}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body,button{touch-action:manipulation}html,body,#root{height:100%}body{margin:0;background:radial-gradient(120% 90% at 50% 0%,#1a150f 0%,var(--ink) 55%,#0a0806 100%);color:var(--bone);font-family:var(--font-body);overflow-x:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.7 0 0 0 0 0.5 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}.app{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom))}.home{width:min(430px,100%);margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;animation:rise .6s ease-out both}.home__crest{width:74px;margin-top:4vh;filter:drop-shadow(0 0 18px rgba(201,162,39,.25));animation:rise .7s ease-out both}.home__title{font-family:var(--font-display);font-weight:900;font-size:clamp(44px,13vw,64px);letter-spacing:.22em;margin:0 0 0 .22em;color:var(--gold-bright);text-shadow:0 1px 0 #000,0 0 34px rgba(201,162,39,.28)}.home__tagline{margin:-14px 0 0;color:var(--muted);font-style:italic;letter-spacing:.04em;animation:rise .7s .12s ease-out both}.meander{width:180px;height:12px;opacity:.8;color:var(--gold-dim);animation:rise .7s .18s ease-out both}.home__modes{display:grid;gap:12px;width:100%;animation:rise .7s .24s ease-out both}.mode-btn{position:relative;display:flex;flex-direction:column;gap:4px;padding:18px 22px;border-radius:var(--radius);border:1px solid var(--line);background:linear-gradient(180deg,var(--panel-2),var(--panel));text-align:left;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.mode-btn:hover,.mode-btn:focus-visible{transform:translateY(-2px);border-color:var(--gold-dim);box-shadow:0 8px 28px #00000080,inset 0 0 0 1px #c9a2272e;outline:none}.mode-btn__name{font-family:var(--font-display);font-weight:700;letter-spacing:.12em;color:var(--gold-bright);font-size:17px}.mode-btn__desc{color:var(--muted);font-size:14px}.preset{display:flex;gap:6px;padding:5px;border:1px solid var(--line);border-radius:999px;background:var(--ink-2);animation:rise .7s .3s ease-out both}.preset__opt{padding:8px 14px;border-radius:999px;color:var(--muted);font-size:13.5px;letter-spacing:.06em;transition:color .14s,background .14s}.preset__opt[aria-pressed=true]{background:linear-gradient(180deg,#c9a22738,#c9a2271a);color:var(--gold-bright);box-shadow:inset 0 0 0 1px #c9a22759}.home__foot{color:#6d6354;font-size:12.5px;letter-spacing:.08em;margin-top:2vh;animation:rise .7s .36s ease-out both}.match{width:min(430px,100%);flex:1;display:flex;flex-direction:column;gap:10px}.hud{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 2px}.hud__rules{font-size:11.5px;letter-spacing:.14em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 10px;white-space:nowrap}.hud__quit{color:var(--muted);font-size:12.5px;letter-spacing:.08em;border-bottom:1px dotted var(--iron);transition:color .14s}.hud__quit:hover{color:var(--danger)}.pips{display:flex;gap:4px;align-items:center}.pip{width:11px;height:11px;rotate:45deg;border:1px solid var(--iron);background:var(--ink-2);transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}.pip[data-side=A]{background:linear-gradient(135deg,var(--lapis-bright),var(--lapis-deep));border-color:var(--lapis-bright);box-shadow:0 0 7px #6f9fd880}.pip[data-side=B]{background:linear-gradient(135deg,var(--terra-bright),var(--terra-deep));border-color:var(--terra-bright);box-shadow:0 0 7px #e08a5d80}.turnbar{text-align:center;font-family:var(--font-display);font-size:13px;letter-spacing:.24em;color:var(--muted);min-height:18px;text-transform:uppercase}.turnbar[data-turn=A]{color:var(--lapis-bright)}.turnbar[data-turn=B]{color:var(--terra-bright)}.board{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,#201a14,#191410);box-shadow:inset 0 1px #e9e2d30d,inset 0 0 60px #0000008c,0 14px 44px #00000080}.board:before{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:10px;border:1px solid rgba(201,162,39,.16);pointer-events:none}.cell{position:relative;aspect-ratio:3 / 4;border-radius:8px;border:1px solid #2c231a;background:radial-gradient(80% 60% at 50% 30%,rgba(233,226,211,.028),transparent 70%),var(--ink-2);box-shadow:inset 0 2px 10px #000000a6;display:grid;place-items:center;transition:box-shadow .18s ease,border-color .18s ease}.cell--open{cursor:pointer;border-color:#c9a22766;box-shadow:inset 0 2px 10px #000000a6,0 0 0 1px #c9a22726}.cell--open:after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:8px;border:1px solid var(--gold);box-shadow:0 0 16px #c9a2274d;opacity:0;pointer-events:none;animation:beckon 1.6s ease-in-out infinite;will-change:opacity}@media(hover:hover){.cell--open:hover{border-color:var(--gold)}}.card{position:relative;width:var(--card-w);aspect-ratio:3 / 4;border-radius:8px;transform-style:preserve-3d;-webkit-user-select:none;user-select:none;container-type:inline-size}.cell .card{width:calc(100% - 6px)}.card__face{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:8px;overflow:hidden;border:1.5px solid var(--frame, var(--iron));background:radial-gradient(120% 90% at 50% 0%,var(--tint-hi) 0%,var(--tint-lo) 78%);box-shadow:inset 0 1px #ffffff17,inset 0 -10px 24px #00000061,0 3px 10px #0000008c;transition:background 0s}.card[data-owner=A]{--tint-hi: #3c6cae;--tint-lo: var(--lapis-deep);--edge-ink: #dbe9ff}.card[data-owner=B]{--tint-hi: #c05a30;--tint-lo: var(--terra-deep);--edge-ink: #ffe4d1}.card[data-rarity=common]{--frame: #8a6038}.card[data-rarity=rare]{--frame: var(--silver)}.card[data-rarity=rare] .card__face{border-width:2px;box-shadow:inset 0 1px #ffffff17,inset 0 -10px 24px #00000061,0 3px 10px #0000008c,0 0 10px #c7d3e047}.card[data-rarity=legend]{--frame: var(--gold)}.card[data-rarity=legend] .card__face{border-width:2px;box-shadow:inset 0 1px #ffffff24,inset 0 -10px 24px #00000061,0 3px 10px #0000008c,0 0 18px #c9a22773}.card__face:after{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:5px;border:1px solid color-mix(in srgb,var(--frame) 55%,transparent);pointer-events:none}.card[data-rarity=rare] .card__face:after{border-color:color-mix(in srgb,var(--frame) 75%,transparent)}.card[data-rarity=legend] .card__face:after{border-width:1.5px;border-color:color-mix(in srgb,var(--frame) 90%,transparent);box-shadow:inset 0 0 10px #c9a22738}.card__sigil{position:absolute;left:50%;top:46%;width:62%;aspect-ratio:1 / 1;transform:translate(-50%,-50%);color:color-mix(in srgb,var(--edge-ink) 82%,var(--frame));opacity:.9}.card__art{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.card__wash{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--tint-hi);mix-blend-mode:color;opacity:.62}.card__shade{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 22%),linear-gradient(0deg,rgba(0,0,0,.72) 0%,transparent 34%)}.card__name{position:absolute;left:0;right:0;bottom:4.5%;text-align:center;font-family:var(--font-display);font-size:11.5cqw;font-weight:700;letter-spacing:.1em;color:var(--edge-ink);opacity:.85;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6%}.rank{position:absolute;font-family:var(--font-display);font-weight:900;font-size:19cqw;line-height:1;width:1.3em;text-align:center;font-variant-numeric:tabular-nums;color:var(--edge-ink);text-shadow:0 1px 2px rgba(0,0,0,.8)}.rank--top{top:4%;left:50%;transform:translate(-50%)}.rank--bottom{bottom:16%;left:50%;transform:translate(-50%)}.rank--left{left:3%;top:44%;transform:translateY(-50%)}.rank--right{right:3%;top:44%;transform:translateY(-50%)}.card--back .card__face{--tint-hi: #262019;--tint-lo: #14100c;display:grid;place-items:center}.card__backmark{width:46%;color:var(--gold-dim);opacity:.9}.hand{display:flex;justify-content:center;gap:7px;min-height:calc(var(--card-w) * 4 / 3 + 14px);align-items:flex-end;perspective:700px}.hand .card{transition:transform .18s ease,filter .18s ease}.hand--active .card{cursor:pointer}@media(hover:hover){.hand--active .card:hover{transform:translateY(-8px)}}.card--selected{transform:translateY(-14px)!important;filter:drop-shadow(0 0 12px rgba(201,162,39,.55))}.card--selected .card__face{border-color:var(--gold-bright)}.hand--idle .card{filter:saturate(.72) brightness(.82)}.card--placed{animation:place .3s cubic-bezier(.2,.9,.25,1.15) both}.card--flipping{animation:flip var(--flip-ms) ease-in-out both}@keyframes place{0%{transform:translateY(-26px) scale(1.12);opacity:0}60%{opacity:1}to{transform:none}}@keyframes flip{0%{transform:rotateY(0)}50%{transform:rotateY(92deg) scale(1.06)}to{transform:rotateY(0)}}@keyframes beckon{0%,to{opacity:.15}50%{opacity:1}}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.cause{position:absolute;left:50%;top:-6px;transform:translate(-50%,-100%);font-family:var(--font-display);font-weight:700;letter-spacing:.3em;font-size:15px;color:var(--gold-bright);text-shadow:0 0 18px rgba(201,162,39,.6);animation:cause .9s ease-out both;pointer-events:none}@keyframes cause{0%{opacity:0;transform:translate(-50%,-60%) scale(.8)}25%{opacity:1;transform:translate(-50%,-110%) scale(1.06)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-150%)}}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#0a0806d1;z-index:30;animation:fade .26s ease both}@media(hover:hover)and (pointer:fine){.overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}.overlay__panel{position:relative;overflow:hidden;width:min(340px,88vw);text-align:center;padding:30px 26px 26px;border-radius:14px;border:1px solid var(--gold-dim);background:linear-gradient(180deg,var(--panel-2),var(--ink-2));box-shadow:0 30px 80px #000000b3,inset 0 0 40px #c9a2270d;animation:rise .38s 80ms ease-out both}.overlay__panel--win{border-color:var(--gold);box-shadow:0 30px 80px #000000b3,inset 0 0 60px #c9a2271f,0 0 40px #c9a2272e}.overlay__panel--loss{border-color:var(--line);filter:saturate(.85)}.overlay__rays{position:absolute;left:50%;top:86px;width:340px;height:340px;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,rgba(201,162,39,.11) 0deg 9deg,transparent 9deg 30deg);-webkit-mask-image:radial-gradient(circle,black 0%,transparent 62%);mask-image:radial-gradient(circle,black 0%,transparent 62%);animation:rays-turn 28s linear infinite;pointer-events:none}@keyframes rays-turn{to{rotate:360deg}}.overlay__kicker{color:var(--muted);letter-spacing:.3em;font-size:11px;text-transform:uppercase;animation:fade .3s .15s ease both}.overlay__crest{width:44px;margin:4px auto 0;color:var(--gold);display:block;animation:crest-in .5s .32s cubic-bezier(.2,1.1,.3,1) both}.overlay__panel--loss .overlay__crest{color:var(--muted)}@keyframes crest-in{0%{opacity:0;transform:scale(.4)}to{opacity:.95;transform:none}}.overlay__verdict{position:relative;font-family:var(--font-display);font-weight:900;font-size:40px;letter-spacing:.14em;margin:8px 0 2px;animation:stamp .42s .48s cubic-bezier(.15,1.2,.3,1) both}@keyframes stamp{0%{opacity:0;transform:scale(2)}55%{opacity:1}70%{transform:scale(.96)}to{opacity:1;transform:none}}.overlay__verdict--win{color:var(--gold-bright);text-shadow:0 0 30px rgba(201,162,39,.4)}.overlay__verdict--loss{color:var(--terra-bright)}.overlay__verdict--draw{color:var(--silver)}.overlay__score{font-size:18px;color:var(--bone);margin-bottom:6px;font-variant-numeric:tabular-nums;animation:fade .32s .95s ease both}.overlay__spoils{font-size:13px;letter-spacing:.12em;color:var(--gold-bright);text-transform:uppercase;margin-bottom:18px;animation:spoils-in .38s 1.25s cubic-bezier(.2,1.1,.3,1) both}@keyframes spoils-in{0%{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}.overlay__actions{display:grid;gap:9px;animation:fade .32s 1.5s ease both}@media(prefers-reduced-motion:reduce){.overlay__rays{animation:none}.overlay__kicker,.overlay__crest,.overlay__verdict,.overlay__score,.overlay__spoils,.overlay__actions{animation:fade .2s ease both}}.btn{padding:12px 16px;border-radius:9px;font-family:var(--font-display);letter-spacing:.14em;font-weight:700;font-size:14px;border:1px solid var(--gold-dim);color:var(--gold-bright);background:linear-gradient(180deg,#c9a22729,#c9a2270d);transition:transform .14s,box-shadow .14s}.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px #00000073}.btn--ghost{border-color:var(--line);color:var(--muted);background:none}.coin{text-align:center;animation:fade .3s ease both}.coin__laurel{width:64px;color:var(--gold);animation:spinIn .9s cubic-bezier(.2,.8,.3,1.1) both}.coin__text{font-family:var(--font-display);letter-spacing:.2em;color:var(--bone);margin-top:10px;font-size:15px}@keyframes spinIn{0%{transform:rotateY(540deg) scale(.5);opacity:0}to{transform:none;opacity:1}}@keyframes fade{0%{opacity:0}to{opacity:1}}.mode-btn--primary{border-color:var(--gold-dim);box-shadow:inset 0 0 0 1px #c9a22733,0 0 24px #c9a22714}.joinrow{display:flex;gap:8px;width:100%}.joinrow__input{flex:1;padding:12px 14px;border-radius:9px;border:1px solid var(--line);background:var(--ink-2);color:var(--gold-bright);font-family:var(--font-display);font-size:16px;letter-spacing:.35em;text-align:center}.joinrow__input::placeholder{color:#5c5343;letter-spacing:.18em}.joinrow__input:focus{outline:none;border-color:var(--gold-dim)}.code{margin-top:14px;font-family:var(--font-display);font-weight:900;font-size:34px;letter-spacing:.4em;color:var(--gold-bright);text-shadow:0 0 26px rgba(201,162,39,.45)}.online-hint{color:var(--muted);font-size:13.5px;margin:8px 0 0}.online-error{color:var(--danger);font-size:13.5px;text-align:center;max-width:40ch}.online-error--float{position:fixed;bottom:14px;left:50%;transform:translate(-50%);background:var(--ink-2);border:1px solid var(--danger);border-radius:9px;padding:8px 14px;z-index:40}.online-flash{position:fixed;top:68px;left:50%;transform:translate(-50%);background:var(--ink-2);border:1px solid var(--gold-dim);color:var(--gold-bright);font-family:var(--font-display);font-size:13px;letter-spacing:.12em;border-radius:9px;padding:9px 16px;z-index:40;animation:flashfade 4s ease both}@keyframes flashfade{0%{opacity:0;transform:translate(-50%,-8px)}8%,80%{opacity:1;transform:translate(-50%)}to{opacity:0}}.turnbar[data-urgent=true]{color:var(--danger)!important;animation:urgentpulse 1s ease-in-out infinite}@keyframes urgentpulse{50%{opacity:.55}}.tradepick__row{display:flex;gap:8px;justify-content:center;margin:12px 0 16px}.tradepick__card{--card-w: 52px;cursor:pointer;transition:transform .15s ease}.tradepick__card:hover{transform:translateY(-6px)}.credits{font-family:var(--font-display);font-weight:700;color:var(--gold-bright);font-size:15px;letter-spacing:.06em}.profile{overflow-y:auto}.profile__h{font-family:var(--font-display);font-size:15px;letter-spacing:.22em;color:var(--gold-bright);margin:18px 0 10px}.profile__sub{font-family:var(--font-body);font-size:12px;letter-spacing:.04em;color:var(--muted);font-weight:400;margin-left:8px}.profile__notice{text-align:center}.profile__save{position:sticky;bottom:10px;z-index:5;width:100%}.collection{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}.collection__item{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;--card-w: 100%}.collection__item .card{width:100%}.collection__item--indeck .card__face{border-color:var(--gold-bright);box-shadow:0 0 14px #c9a22766}.collection__item--locked{opacity:.5}.collection__badge{position:absolute;top:-6px;right:-4px;background:var(--gold);color:var(--ink);font-family:var(--font-display);font-weight:900;font-size:12px;border-radius:999px;min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px;z-index:2}.collection__badge--lock{background:var(--terra);color:var(--bone)}.shop__buy{padding:6px 10px;font-size:12.5px;width:100%}.shop__buy:disabled{opacity:.35;cursor:not-allowed}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
