/* Neon Arcade — game page skin (matches the homepage redesign) */
:root{
  --bg:#0a0b0d; --panel:#111318; --ink:#f4f5f0; --muted:#9aa093; --faint:#697063;
  --line:#1f232a; --lime:#d7ff3e;
  /* remap legacy tokens */
  --text:#f4f5f0; --dim:#9aa093; --dim2:#6d7368; --card:#111318; --card2:#16191f;
  --accent:#d7ff3e; --accent2:#a9e05c; --warn:#ffcf6a; --radius:14px; --maxw:1260px;
}
body{background:var(--bg);color:var(--ink);font-size:16px;line-height:1.55}
body::before{display:none}
.wrap{max-width:var(--maxw);padding:0 20px}

/* header */
.site-head{background:rgba(10,11,13,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.head-in{height:60px;gap:16px;padding:0 20px}
.brand{font-size:15px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;gap:9px}
.brand .dot{width:30px;height:30px;border-radius:9px;background:var(--lime);color:#0a0b0d;font-size:13px}
.brand em{color:var(--ink);font-style:normal;font-weight:800}
.nav{gap:20px;font-size:13px;color:var(--muted)}
.nav a:hover{color:var(--ink)}
.search input{width:200px;background:#14161a;border:1px solid var(--line);border-radius:999px;padding:8px 14px 8px 34px;font-size:13px;color:var(--ink)}
.search input::placeholder{color:var(--faint)}
.search input:focus{border-color:#3c4430}
.head-right .btn.sm.primary{background:#15191a;color:var(--lime);border:1px solid #39411f;font-weight:700}

/* buttons */
.btn{border-radius:999px;border:1px solid var(--line);background:#15181d;color:var(--ink);font-weight:650;font-size:14px;padding:10px 18px}
.btn:hover{background:#1c2026;border-color:#333a2c;transform:none}
.btn.primary{background:var(--lime);border-color:transparent;color:#0a0b0d}
.btn.primary:hover{background:#c9f52f}
.btn.ghost{background:#15181d}

/* title */
.player-page{padding-bottom:56px}
.crumbs{margin:16px 0 8px;font-size:12px;color:var(--faint)}
.crumbs a:hover{color:var(--ink)}
.gtitle{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 14px}
.gtitle h1{font-size:clamp(28px,3.6vw,44px);line-height:1.06;letter-spacing:-.03em;margin:0;font-weight:800}
.gtitle .sub{font-size:14px;line-height:1.45;color:var(--muted);margin:7px 0 0;max-width:74ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gtitle > a.btn{display:none}
.gtag{display:inline-flex;align-items:center;height:22px;padding:0 9px;margin-left:12px;border:1px solid #39411f;border-radius:999px;color:var(--lime);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;vertical-align:middle}

/* stage */
.stage{border:1px solid var(--line);border-radius:16px;background:#050506;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.stage-in{background:#050506}
.poster::after{background:linear-gradient(180deg,rgba(10,11,13,.06) 30%,rgba(10,11,13,.88))}
.poster img{filter:brightness(.72) saturate(1.03)}
.poster .pcircle{background:var(--lime);color:#0a0b0d;box-shadow:0 12px 34px rgba(215,255,62,.32)}
.poster .plabel{font-size:16px;letter-spacing:-.01em;font-weight:750}
.poster .pnote{color:#b6bbae}
.loadingmsg::before{border-top-color:var(--lime)}

/* player bar */
.player-bar{gap:8px;margin-top:10px;align-items:stretch}
.player-bar .btn{min-height:46px}
#startBtn{background:var(--lime);border-color:transparent;color:#0a0b0d;padding:0 26px;font-weight:800;font-size:15px}
#buyBtn{background:transparent;border-color:#333a2c;color:var(--lime)}
#buyBtn:hover{background:#171b12}
#pgStoreBtn{border-color:#333a2c}
.tipbtn{border-color:#333a2c!important;color:#d8a0ae!important;background:#15181d!important}
.tipbtn:hover{border-color:#6b3a48!important}

/* facts strip */
.sidecard{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:12px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.sidecard > *{display:none}
.sidecard .row{display:inline-flex;align-items:center;gap:7px;padding:0;border:0;font-size:12.5px;color:var(--ink)}
.sidecard .row span:first-child{color:var(--faint);font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.sidecard .row:not(:first-of-type)::before{content:"";width:3px;height:3px;border-radius:50%;background:#3a4034;margin-right:9px}

/* prose -> one collapsed line */
.prose{max-width:none;margin:14px 0 0}
.prose > p{color:var(--muted);font-size:14px;margin:0 0 12px}
.prose details.more{margin:0;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:0 16px}
.prose details.more > summary{padding:14px 0;color:var(--ink);font-size:14px;font-weight:650;display:flex;align-items:center;gap:9px;min-height:48px}
.prose details.more > summary::before{content:"\25B8";color:var(--lime);font-size:11px}
.prose details.more[open] > summary::before{content:"\25BE"}
.prose details.more[open]{padding-bottom:10px}
.prose details.more[open] > summary{margin-bottom:2px}
.prose details.more h2{font-size:15px;margin:16px 0 8px;color:var(--ink)}
.prose details.more p,.prose details.more li{color:var(--muted);font-size:13.5px;line-height:1.6}
.prose .note{border-left:2px solid var(--lime);color:var(--faint);font-size:12.5px}
.prose .kbd{border-color:var(--line);background:#0d0f12;color:var(--ink)}

/* ads */
.ad-slot{border:0;background:none;color:transparent;font-size:0;min-height:90px;margin:16px 0}
.ad-slot.small{min-height:90px}
.ad-slot.filled{margin:16px 0}

/* related */
.related{margin-top:40px}
.related h2{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:0 0 14px}
.related .grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.card{border:0;border-radius:12px;background:transparent;overflow:visible}
.card:hover{transform:translateY(-2px);box-shadow:none;border-color:transparent}
.card .thumbwrap{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0c0e10}
.card .thumb{aspect-ratio:16/10;object-fit:cover}
.card .meta{padding:9px 2px 0;display:flex;flex-direction:column}
.card .name{order:1;font-size:14px;font-weight:650;margin:0;letter-spacing:-.01em;color:var(--ink)}
.card .tag{order:2;font-size:10px;letter-spacing:.14em;color:var(--faint);margin-top:3px}
.card .desc{display:none}
.card .new-badge{background:var(--lime);color:#0a0b0d;box-shadow:none;font-size:9.5px;padding:3px 7px}
.card .play i{background:var(--lime);color:#0a0b0d;box-shadow:none}
.card:hover .thumb{transform:scale(1.03)}

/* footer */
.site-foot{margin-top:44px;border-top:1px solid var(--line);background:transparent;padding:26px 0 40px}
.foot-grid{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.foot-grid > div{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.foot-grid p{display:none}
.foot-grid h5{display:none}
.foot-grid a{font-size:12.5px;color:var(--faint)}
.foot-grid a:hover{color:var(--ink)}
.foot-grid .brand{color:var(--ink)}
.copy{font-size:11.5px;color:#4b5147;margin-top:18px;display:flex;gap:18px;flex-wrap:wrap}

/* mobile */
@media(max-width:760px){
  .wrap{padding:0 14px}
  .head-in{height:56px;gap:10px;padding:0 14px}
  .nav{display:none}
  .head-right{flex:1;min-width:0}
  .head-right .btn.sm.primary{display:none}
  .search{flex:1;min-width:0}
  .search input{width:100%}
  .brand{font-size:13px;letter-spacing:.12em}
  .brand .dot{width:27px;height:27px}
  .crumbs{margin:12px 0 6px;font-size:11px}
  .gtitle{margin:0 0 10px}
  .gtitle h1{font-size:29px}
  .gtag{height:20px;margin-left:8px;font-size:9.5px}
  .gtitle .sub{font-size:12.5px;-webkit-line-clamp:2}
  .stage-in{aspect-ratio:16/10}
  .player-bar{gap:6px;margin-top:8px}
  .player-bar .btn{flex:1 1 0;min-width:0;padding:0 8px;font-size:12px;min-height:44px}
  .player-bar .btn.primary{flex:1 1 100%;min-height:50px;font-size:15px}
  #buyBtn{display:none}
  .sidecard{padding:10px 12px;gap:4px 12px;border-radius:12px}
  .sidecard .row{font-size:11.5px}
  .sidecard .row span:first-child{font-size:9px}
  .related{margin-top:32px}
  .related .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .card .name{font-size:13px}
  .site-foot{margin-top:32px;padding:22px 0 34px}
  .foot-grid > div:first-child{flex:1 1 100%}
}
@media(max-width:420px){
  .player-bar .btn{font-size:11.5px}
}

/* ---- pass 2 fixes ---- */
.split{display:flex;flex-direction:column-reverse;gap:0;align-items:stretch}
.sidecard{border-radius:12px}
.sidecard .row:not(:first-of-type)::before{display:none}
.sidecard .row{flex:0 0 auto}
.card .tipcard{opacity:0!important;pointer-events:none}
@media(hover:hover){.card:hover .tipcard{opacity:.85!important;pointer-events:auto}}
.foot-grid > div:first-child{flex:0 0 auto}
.foot-grid .brand{white-space:nowrap}
.ad-slot,.ad-slot.small{min-height:76px;margin:12px 0}
.ad-slot.filled{margin:12px 0}
@media(max-width:760px){
  .sidecard{gap:6px 14px}
  .ad-slot,.ad-slot.small{min-height:64px;margin:10px 0}
}

/* footer brand lives in a flex row */
.site-foot .brand{display:flex;align-items:center;flex:0 0 auto;color:var(--ink)}
.site-foot .brand em{color:var(--ink)}

/* one predictable control order on every page */
.player-bar #startBtn{order:1}
.player-bar #fsBtn{order:2}
.player-bar #shareBtn{order:3}
.player-bar .tipbtn{order:4}
.player-bar #pgStoreBtn{order:6}
.player-bar #buyBtn{order:7}
.player-bar .spacer{order:5}
.player-bar #fsExit{order:8}