/* Dim Sum Rush skin — colors taken from the game's own build. */
.g-dsr{
  --g-bg:#FBF4E8; --g-panel:#F3E6CF; --g-panel-hi:#FAF0DD; --g-face:#FFFDF7; --g-red:#A3221B; --g-red-d:#6E120D;
  --g-gold:#F2C56B; --g-jade:#1F6B4F; --g-ink:#2A1A12; --g-muted:#6B4B32; --g-line:#E2CFAE;
  --b0:#B07A2A; --b1:#2F5D9E; --b2:#A8462A; --b3:#1F6B4F; --b0d:#8A5A16; --b1d:#234A80; --b2d:#7E3220; --b3d:#154D39;
  --dsr-title:"Fraunces",Georgia,serif;
}
@media (prefers-color-scheme: dark){
  .g-dsr{--g-bg:#1E1611; --g-panel:#2A1F18; --g-panel-hi:#35281E; --g-red:#E5675A; --g-ink:#F4E9DA; --g-muted:#C9AE90; --g-line:#3D2E23; --g-jade:#2E8564}
}

/* game page */
.game{background:var(--g-bg);color:var(--g-ink)}
.crumbs{padding-top:18px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--g-muted)}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.g-hero{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);gap:clamp(20px,4vw,56px);align-items:center;padding-block:clamp(20px,4vw,44px) clamp(36px,6vw,72px)}
.g-hero h1{font-family:var(--dsr-title);font-weight:400;font-stretch:100%;letter-spacing:0;font-size:clamp(60px,8.6vw,120px);line-height:.9;color:var(--g-red);margin-top:18px}
.g-hero .tag{font-size:clamp(19px,2vw,23px);line-height:1.4;margin-top:16px;max-width:30ch}
.g-hero dl{margin:26px 0 28px}
.game .spec{border-color:var(--g-line)}
.game .spec dt{color:var(--g-muted)}
.game .btn{border-color:var(--g-ink);color:var(--g-ink)}
.game .btn.red{background:var(--g-red);border-color:var(--g-red);color:#FFF7EA}
@media (prefers-color-scheme: dark){.game .btn.red{color:#1E1611}}
@media (max-width:900px){.g-hero{grid-template-columns:1fr}}

/* 3D viewer */
.viewer{position:relative;border-radius:22px;background:radial-gradient(110% 85% at 45% 38%,var(--g-panel-hi),var(--g-panel));border:1px solid var(--g-line);overflow:hidden;min-width:0}
.viewer .stage{position:relative;aspect-ratio:16/11;width:100%}
.viewer .stage img.poster,.viewer .stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.viewer .stage canvas{opacity:0;transition:opacity .5s}
.viewer .stage.is-ready canvas{opacity:1}
.viewer .stage.is-ready img.poster{opacity:0;transition:opacity .5s .2s}
.viewer .bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px 12px;border-top:1px solid var(--g-line)}
.views{display:flex;gap:4px;flex-wrap:wrap}
.views button{font:600 13.5px/1 var(--body);padding:9px 12px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--g-ink);cursor:pointer}
.views button:hover{border-color:var(--g-line)}
.views button[aria-pressed="true"]{background:var(--g-ink);color:var(--g-bg)}
.viewer .hint{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--g-muted)}

/* in-page nav */
.subnav{position:sticky;top:68px;z-index:30;background:color-mix(in srgb,var(--g-bg) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-block:1px solid var(--g-line)}
.subnav .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{flex:none;text-decoration:none;font-weight:600;font-size:15px;padding:13px 14px;border-bottom:2px solid transparent;color:var(--g-muted)}
.subnav a:hover,.subnav a.on{color:var(--g-ink);border-bottom-color:var(--g-red)}

.g-sec{padding-block:clamp(48px,7vw,96px);border-bottom:1px solid var(--g-line)}
.g-sec:last-of-type{border-bottom:none}
.g-sec h2{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:clamp(30px,4.2vw,50px);color:var(--g-ink)}
.g-sec .label{color:var(--g-muted)}
.g-sec .head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:clamp(22px,3vw,36px)}
.g-sec .head p{max-width:52ch;color:var(--g-muted);font-size:16.5px}

.pitch{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px)}
.pitch .big{font-size:clamp(20px,2.1vw,25px);line-height:1.45;max-width:40ch}
.pitch .big b{color:var(--g-red);font-weight:700}
.sets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}
.set{border-top:2px solid var(--g-ink);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.set h3{font-size:19px;font-weight:750;font-stretch:106%;line-height:1.2}
.set p{font-size:15.5px;color:var(--g-muted)}
@media (max-width:900px){.pitch{grid-template-columns:1fr}}
@media (max-width:520px){.sets{grid-template-columns:1fr}}

/* tiles (same look as the playtest build) */
.tile-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.6vw,18px)}
@media (max-width:820px){.tile-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:460px){.tile-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tile{display:flex;flex-direction:column;gap:9px;align-items:center;text-align:center;min-width:0}
.tile .face{width:100%;aspect-ratio:512/724;border-radius:6%/4.2%;background:var(--face-img) center/cover no-repeat;
  box-shadow:0 1px 0 #CDBFA3,0 3px 0 var(--edge),0 4px 0 var(--edge-d),0 12px 14px -8px rgba(0,0,0,.35);transition:transform .2s}
.tile:hover .face{transform:translateY(-4px) rotate(-1.5deg)}
.tile .nm{font-weight:650;font-size:14.5px;line-height:1.2}
.tile .zh{font-size:13px;color:var(--g-muted)}
.tile.b0{--edge:var(--b0);--edge-d:var(--b0d)}.tile.b1{--edge:var(--b1);--edge-d:var(--b1d)}.tile.b2{--edge:var(--b2);--edge-d:var(--b2d)}.tile.b3{--edge:var(--b3);--edge-d:var(--b3d)}
.bands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(28px,4vw,44px)}
.band-key{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;background:var(--g-panel);min-width:0}
.band-key .bk{width:40px;height:56px;border-radius:7px;flex:none;background:var(--bk) center/cover;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.band-key b{display:block;font-size:15px}
.band-key span{font-family:var(--mono);font-size:12.5px;color:var(--g-muted)}
@media (max-width:820px){.bands{grid-template-columns:repeat(2,minmax(0,1fr))}}

.comp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(24px,4vw,56px);margin-top:clamp(40px,6vw,72px)}
.comp ul{list-style:none;margin:0;padding:0}
.comp li{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--g-line);font-size:16px}
.comp li:first-child{border-top:1px solid var(--g-line)}
.comp li b{font-family:var(--mono);font-weight:500;font-size:20px;color:var(--g-red)}
.renders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-self:start}
.renders figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--g-line);background:var(--g-panel)}
.renders figcaption{font-size:13.5px;color:var(--g-muted);padding:9px 12px}
.renders img{aspect-ratio:3/2;object-fit:cover;width:100%}
.fine{font-size:13.5px;color:var(--g-muted);margin-top:14px}
@media (max-width:900px){.comp{grid-template-columns:1fr}}
@media (max-width:520px){.renders{grid-template-columns:1fr}}

/* play */
.play-frame{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--g-line);background:var(--g-panel);box-shadow:0 30px 60px -40px rgba(0,0,0,.5)}
.play-frame iframe{display:block;width:100%;height:min(86vh,880px);min-height:620px;border:0;background:var(--g-bg)}
.play-frame:fullscreen iframe{height:100vh}
.play-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:22px}
.mode{background:var(--g-panel);border-radius:12px;padding:14px 16px}
.mode b{display:block;font-size:16px;margin-bottom:4px}
.mode span{font-size:14.5px;color:var(--g-muted)}
@media (max-width:820px){.modes{grid-template-columns:1fr}}

/* sell sheet */
.sheet{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.sheet a.preview{display:block;border-radius:10px;overflow:hidden;box-shadow:0 2px 0 var(--g-line),0 28px 50px -28px rgba(0,0,0,.55);transition:transform .2s}
.sheet a.preview:hover{transform:translateY(-3px) rotate(-.4deg)}
.sheet .copy{display:flex;flex-direction:column;gap:16px}
@media (max-width:900px){.sheet{grid-template-columns:1fr}}

/* rules */
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px;counter-reset:r}
.rule{padding:18px 0;border-top:1px solid var(--g-line)}
.rule h3{font-size:18px;font-weight:750;font-stretch:106%;margin-bottom:8px}
.rule p{font-size:16px;color:var(--g-ink);opacity:.92}
.rule em{font-style:normal;font-weight:650;color:var(--g-red)}
@media (max-width:820px){.rules{grid-template-columns:1fr}}

.g-cta{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:24px;align-items:center;background:var(--g-red);color:#FFF7EA;border-radius:22px;padding:clamp(26px,4.4vw,52px)}
.g-cta h2{color:inherit;font-family:var(--dsr-title);font-weight:400;font-stretch:100%;font-size:clamp(32px,4vw,48px);line-height:1}
.g-cta p{margin-top:12px;opacity:.88;max-width:48ch}
.g-cta .btn{border-color:#FFF7EA;color:#FFF7EA}
.g-cta .btn.light{background:#FFF7EA;color:#6E120D}
@media (prefers-color-scheme: dark){.g-cta{background:#7E1E16}}
@media (max-width:820px){.g-cta{grid-template-columns:1fr}}

/* Fraunces runs wider than the old title face: keep "Dim Sum / Rush" on two lines */
.g-dsr .g-hero h1{font-size:clamp(54px,7.2vw,100px);letter-spacing:-.01em}

/* Phone: show the game right under its title, then the buttons, then the specs */
@media (max-width:900px){
  .g-hero{gap:0}
  .g-hero>div:first-child{display:contents}
  .g-hero>div:first-child>*{min-width:0}
  .g-hero .pill{order:1;justify-self:start}
  .g-hero h1{order:2}
  .g-hero .tag{order:3}
  .g-hero .viewer{order:4;margin:22px 0 0!important}
  .g-hero .actions{order:5;margin-top:20px}
  .g-hero dl{order:6;margin:26px 0 0}
}

/* More games (end of every game page) */
.more-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.8vw,20px)}
.more-card{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--g-ink);min-width:0}
.more-card .more-art{display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--g-panel);border:1px solid var(--g-line);margin-bottom:6px;transition:transform .2s}
.more-card img{width:100%;height:100%;object-fit:cover;display:block}
.more-card b{font-family:var(--display);font-weight:800;font-stretch:108%;font-size:18px;line-height:1.2}
.more-card>span:last-child{font-size:14.5px;color:var(--g-muted)}
.more-card:hover .more-art{transform:translateY(-3px)}
@media (max-width:820px){.more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rules .rule:last-child:nth-child(odd){grid-column:1/-1}

.g-dsr .renders{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:520px){.g-dsr .renders{grid-template-columns:1fr}}
/* Dim Sum Rush viewer: still renders like the other games (no 3D) */
.g-dsr .viewer .stage{aspect-ratio:16/10}
.g-dsr .viewer .stage img.poster{object-fit:cover;transition:opacity .25s}