/* TangWong · Midnight Fold skin. Loaded after each page's own CSS. Art lives in /brand/{bg,covers,ui}. */
:root{--mf-ink:#151a33;--mf-ink-2:#1d2240;--mf-panel:#1a1f3be6;--mf-amber:#f2b544;--mf-flame:#ffe3a3;--mf-parch:#f4e6c8;--mf-plum:#3a2440;--mf-teal:#5f9a98;--mf-terra:#c4532e;--mf-line:#f2b5443d}
body{background-color:var(--mf-ink)}


/* ---------- home ---------- */
.home-screen{background:var(--mf-ink) url('/brand/bg/home-desktop.webp') center 70%/cover no-repeat}
.home-screen:before{background:linear-gradient(180deg,#151a33b3 0%,#151a3322 30%,#151a3300 55%,#151a33cc 100%)}
.home-vignette{background:radial-gradient(ellipse at 50% 70%,transparent 35%,#0d1024a6 100%)}
.home-title{top:13%;text-shadow:0 2px 22px #0b0d1f}
.home-title .eyebrow{color:var(--mf-flame)}
.home-title h1 span{color:var(--mf-amber)}
.home-title p{color:var(--mf-parch)}
.main-play{background:linear-gradient(120deg,var(--mf-flame),var(--mf-amber) 62%,#d9902c);border-color:var(--mf-flame);box-shadow:0 0 0 6px #f2b54422,0 18px 46px #f2b5444d,0 0 90px #f2b54440;color:#2a1a0e}
.home-footer{border-top-color:#f2b5442b;color:#d9ccb4}
.home-screen .lbg-acc{background:#151a33d9;border-color:var(--mf-line);box-shadow:0 18px 44px #05061299}
.home-screen .lbg-acc .gold{background:linear-gradient(125deg,var(--mf-flame),var(--mf-amber) 70%);color:#2a1a0e}
@media (min-width:1101px){
  .home-title{top:12%}
  .main-play{bottom:104px}
  .home-screen .lbg-acc{left:auto;right:4%;top:118px;bottom:auto;transform:none;width:330px}
}
@media (max-width:700px){
  .home-screen{height:auto;min-height:max(100svh,930px);background:linear-gradient(180deg,#151a3300 0,#151a3300 470px,var(--mf-ink) 590px) 0 0/100% 100% no-repeat,url('/brand/bg/home-mobile.webp') center top/100% auto no-repeat,var(--mf-ink)}
  .home-screen:before{background:linear-gradient(180deg,#151a33aa 0,#151a3300 230px)}
  .home-title{top:96px}
  .home-screen .lbg-acc{bottom:186px}
  .main-play{bottom:96px}
}

/* ---------- library ---------- */
.library-screen{background:linear-gradient(180deg,#151a33d9,#151a33f2 60%,var(--mf-ink)),url('/brand/bg/library-desktop.webp') center top/cover fixed,var(--mf-ink)}
@media (max-width:700px){.library-screen{background:linear-gradient(180deg,#151a33cc,#151a33f0 55%,var(--mf-ink)),url('/brand/bg/library-mobile.webp') center top/100% auto no-repeat,var(--mf-ink)}}
.library-screen .eyebrow{color:var(--mf-amber)}
.game-grid{display:block}
.game-grid .library-aside{margin-top:28px}
.game-list{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px}
.featured-game{background:#1a1f3b;border-color:var(--mf-line);border-radius:14px;box-shadow:0 18px 44px #0006;display:flex;flex-direction:column}
.featured-game .game-cover{height:auto;aspect-ratio:4/5;display:block}
.featured-game .game-cover>img{object-position:center 30%}
.featured-game .game-cover:after{background:linear-gradient(transparent 45%,#151a33 100%)}
.featured-game .game-card-bottom{margin-top:auto}
.featured-game .game-card-actions{flex-wrap:wrap}
.cover-caption>span{color:var(--mf-amber)}
.cover-caption h2{text-shadow:0 2px 14px #000a}
.star-game{border-color:#5ad1d655}.star-game .cover-caption>span{color:#7fe3e3}
.soon-game{opacity:.82;border-color:#9fb4ff44}.soon-game .cover-caption>span{color:#b9c8ff}
.soon-game .game-cover>img{filter:saturate(.8)}
.soon-note{font-size:13px;color:#b9c8ff;padding:10px 0}
@media (max-width:700px){
  .game-list{grid-template-columns:minmax(0,1fr)}
  .featured-game .game-cover{aspect-ratio:auto;height:300px}
}

/* ---------- lobby (เหมียว) ---------- */
.lobby-screen{background:linear-gradient(180deg,#151a33d6,#151a33a6 40%,#151a33e6),url('/brand/bg/lobby-desktop.webp') center/cover fixed,var(--mf-ink)}
@media (max-width:700px){.lobby-screen{background:linear-gradient(180deg,#151a33e6,#151a33cc 35%,var(--mf-ink) 75%),url('/brand/bg/lobby-mobile.webp') center top/100% auto no-repeat,var(--mf-ink)}}
.lobby-seat{position:relative;background:#1a1f3bd9;border-color:var(--mf-line)}
.lobby-seat.ready{border-color:#f2b544aa;box-shadow:0 0 0 1px #f2b54455,0 0 36px #f2b54433 inset}
.seat-lantern{position:absolute;top:8px;right:8px;width:46px;height:46px;pointer-events:none;transition:filter .4s,opacity .4s}
.lobby-seat:not(.ready) .seat-lantern{opacity:.75}
.lobby-seat.empty .seat-lantern{opacity:.35;filter:grayscale(.6)}
.lobby-seat.ready .seat-lantern{filter:drop-shadow(0 0 12px #f2b544cc)}
.room-code{border-color:var(--mf-amber)}

/* ---------- in game (เหมียว) ---------- */
.arena{background:linear-gradient(#151a33a6,#151a33cc),url('/brand/bg/table-meow-desktop.webp') center/cover,var(--mf-ink)}
@media (max-width:700px){.arena{background:linear-gradient(#151a33b3,#151a33d9),url('/brand/bg/table-meow-mobile.webp') center/cover fixed,var(--mf-ink)}}

@media (prefers-reduced-motion:reduce){.seat-lantern{transition:none}}

/* table surface: let the painted wooden table show through, amber rim instead of purple felt */
.play-field{background:radial-gradient(ellipse at center,#2a2236a6,#151a33b3 72%);border-color:#c8924a;box-shadow:0 0 0 5px #151a33cc,0 0 0 7px #f2b54455,inset 0 0 70px #0b0d1f99,0 0 60px #f2b5441f;backdrop-filter:blur(1.5px)}
.field-ring{border-color:#f2b54455}

/* ---------- logo: the real TangWong wordmark (text kept for screen readers) ---------- */
a.brand{flex:none;width:156px;height:48px;gap:0!important;font-size:0!important;color:transparent!important;overflow:hidden;background:url('/brand/logo/wordmark.webp') left center/contain no-repeat}
a.brand *{font-size:0!important;letter-spacing:0!important;margin:0!important}
a.brand .brand-mark,a.brand>i{display:none}
@media (max-width:700px){a.brand{width:124px;height:40px}}