:root{
  --gold:#e6b45a;
  --gold-dim:#8a6a34;
  --red:#d2352b;
  --ink:#07070a;
  --panel:#111016;
  --text:#e9e2d0;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 50% -10%, #241a2c 0%, #0d0b12 45%, #060509 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px);
  color:var(--text);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
#app{
  height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:10px 18px 8px;
  gap:8px;
}
#marquee{
  width:min(1180px,100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex:0 0 auto;
  padding:0 4px;
}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0;white-space:nowrap}
.coin{
  font:700 10px/1 "Courier New",monospace;
  letter-spacing:.18em;
  color:var(--gold);
  border:1px solid rgba(230,180,90,.4);
  padding:4px 7px;
  border-radius:2px;
  background:rgba(230,180,90,.06);
}
.slash{color:#4b4351}
.title-cn{
  font-weight:900;
  font-size:17px;
  letter-spacing:.14em;
  color:#f4ead4;
  text-shadow:0 0 18px rgba(210,53,43,.55);
}
.title-en{
  font:700 10px/1 "Arial Narrow",Arial,sans-serif;
  letter-spacing:.28em;
  color:#8e8494;
  overflow:hidden;
  text-overflow:ellipsis;
}
.badge{
  flex:0 0 auto;
  font:700 9px/1 "Courier New",monospace;
  letter-spacing:.18em;
  color:#6f6474;
  border:1px dashed #35303c;
  padding:5px 8px;
  border-radius:2px;
}
#cabinet{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  width:min(1180px,100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  border-radius:6px;
  background:
    linear-gradient(180deg,#19151e 0%,#0c0a10 55%,#141018 100%);
  box-shadow:
    0 0 0 1px #2c2533,
    0 0 0 5px #0a090d,
    0 0 0 6px #2a2232,
    0 30px 80px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(255,255,255,.06);
}
#cabinet:before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:4px;
  border:1px solid rgba(230,180,90,.12);
  pointer-events:none;
}
.corner{
  position:absolute;width:16px;height:16px;pointer-events:none;z-index:6;
  border-color:rgba(230,180,90,.65);
}
.corner.tl{top:4px;left:4px;border-top:2px solid;border-left:2px solid}
.corner.tr{top:4px;right:4px;border-top:2px solid;border-right:2px solid}
.corner.bl{bottom:4px;left:4px;border-bottom:2px solid;border-left:2px solid}
.corner.br{bottom:4px;right:4px;border-bottom:2px solid;border-right:2px solid}

#screen{
  position:relative;
  aspect-ratio:16/9;
  width:100%;
  max-height:100%;
  max-width:calc((100dvh - 148px) * 16 / 9);
  background:#000;
  border-radius:2px;
  overflow:hidden;
  touch-action:none;
  box-shadow:0 0 0 1px #000, 0 0 40px rgba(210,53,43,.12), inset 0 0 60px #000;
  cursor:default;
}
#screen.pointer{cursor:pointer}
canvas#game{
  display:block;
  touch-action:none;
  width:100%;
  height:100%;
  image-rendering:auto;
  outline:none;
  background:#000;
}

/* CRT overlays */
#crt{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:multiply;
  opacity:.55;
}
#scanSheen{
  position:absolute;inset:0;pointer-events:none;z-index:4;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(115deg, rgba(255,255,255,.035) 0%, transparent 28%, transparent 72%, rgba(255,255,255,.02) 100%);
}
body.crt-off #crt{display:none}
body.crt-off #scanSheen{background:radial-gradient(ellipse at 50% 50%, transparent 65%, rgba(0,0,0,.35) 100%)}

.header-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
#topbar{
  display:flex;gap:6px;opacity:.72;
  transition:opacity .2s;
}
#topbar:hover{opacity:1}
.chip{
  appearance:none;
  border:1px solid rgba(230,180,90,.3);
  background:rgba(10,8,12,.7);
  color:#cdbf9d;
  font:700 8px/1 "Courier New",monospace;
  letter-spacing:.12em;
  padding:5px 6px;
  border-radius:2px;
  cursor:pointer;
  backdrop-filter:blur(2px);
}
.chip:hover{background:rgba(210,53,43,.35);color:#fff;border-color:rgba(230,180,90,.7)}

#hints{
  flex:0 0 auto;
  width:min(1180px,100%);
  display:flex;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
  font-size:10px;
  line-height:1.5;
  color:#6f6475;
  letter-spacing:.02em;
  padding:0 4px 2px;
  text-align:center;
}
#hints b{color:#b9a377;font-weight:700}

/* start gate — removed by JS on first interaction */
#startGate{
  position:absolute;inset:0;z-index:7;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 50% 46%, rgba(32,18,22,.72), rgba(4,3,6,.94) 70%);
  backdrop-filter:blur(1px);
  transition:opacity .35s ease;
  cursor:pointer;
}
#startGate.gone{opacity:0;pointer-events:none}
.gate-inner{text-align:center;transform:translateY(-4%)}
.gate-kicker{
  font:700 9px/1 "Courier New",monospace;
  letter-spacing:.42em;
  color:#8c7450;
  margin-bottom:16px;
}
.gate-title{
  font:900 clamp(48px,8vw,92px)/0.9 "Arial Black",Impact,sans-serif;
  letter-spacing:.02em;
  color:#f3e6c8;
  text-shadow:
    0 2px 0 #8d1a16, 0 5px 0 #4a0b0a,
    0 0 44px rgba(210,53,43,.65);
  transform:skewX(-6deg);
}
.gate-sub{
  margin-top:22px;
  font-size:13px;
  letter-spacing:.22em;
  color:#e0cfae;
  animation:pulse 1.6s ease-in-out infinite;
}
.gate-tip{margin-top:9px;font-size:10px;letter-spacing:.1em;color:#7c6d80}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}

/* touch controls */
#touch{display:none}
body.touch-enabled #touch{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  flex:0 0 auto;width:100%;max-width:520px;margin:0 auto;
  padding:0 14px;height:142px;
}
body.touch-enabled #hints{display:none}
#touchPause{
  display:none;position:absolute;top:6px;right:8px;z-index:7;
  width:40px;height:30px;border-radius:4px;
  border:1px solid rgba(230,180,90,.4);background:rgba(10,8,12,.6);
  color:#e8d7b5;font:800 10px/1 "Courier New",monospace;letter-spacing:.1em;
  touch-action:none;
}
body.touch-enabled #touchPause{display:block}
#stick{
  position:relative;left:auto;bottom:auto;z-index:6;
  width:112px;height:112px;border-radius:50%;
  border:1px solid rgba(230,180,90,.26);
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.05), rgba(0,0,0,.3) 65%);
  touch-action:none;
}
#stickKnob{
  position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #6b5c45, #2a2420 70%);
  border:1px solid rgba(230,180,90,.5);
  box-shadow:0 3px 10px rgba(0,0,0,.6);
}
#pad{
  position:relative;right:auto;bottom:auto;z-index:6;
  width:190px;height:124px;
  touch-action:none;
}
.tbtn{
  position:absolute;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(230,180,90,.35);
  background:radial-gradient(circle at 35% 30%, #3a2630, #150f16 72%);
  color:#e8d7b5;
  font:800 12px/1 "Courier New",monospace;
  letter-spacing:.04em;
  box-shadow:0 4px 12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  touch-action:none;
}
.tbtn.p{border-color:rgba(210,53,43,.55)}
.tbtn.k{border-color:rgba(70,130,170,.55)}
.tbtn:active,.tbtn.on{transform:scale(.94);background:#5a2430}
.tbtn[data-key="lp"]{left:0;bottom:0}
.tbtn[data-key="hp"]{left:58px;bottom:0}
.tbtn[data-key="lk"]{left:116px;bottom:0}
.tbtn[data-key="hk"]{left:58px;bottom:60px}
body.touch-enabled #topbar{opacity:.85}
body.touch-enabled .chip{font-size:7px;padding:4px 5px}

@media (max-width:820px){
  #app{height:auto;min-height:100dvh;justify-content:center;padding:8px 8px 10px;gap:7px}
  #marquee{display:flex;justify-content:space-between;padding:0 2px;gap:8px}
  #marquee .brand{display:flex}
  #marquee .title-en,#marquee .badge{display:none}
  .title-cn{font-size:14px;letter-spacing:.08em}
  .coin{font-size:8px;padding:3px 5px;letter-spacing:.1em}
  #topbar{gap:4px}
  .chip{font-size:6.5px;padding:4px 5px;letter-spacing:.06em}
  #cabinet{flex:0 0 auto;padding:4px;width:100%}
  #screen{max-width:100%;max-height:none}
  #hints{display:none}
  body.touch-enabled #touch{height:138px;padding:0 10px}
}
@media (max-height:560px){
  #marquee,#hints{display:none}
  #screen{max-height:calc(100dvh - 20px)}
}
@media (max-height:560px) and (orientation:landscape){
  #app{height:100dvh;padding:4px;gap:0;justify-content:center}
  #cabinet{flex:0 0 auto;padding:3px}
  #screen{height:calc(100dvh - 14px);width:auto;max-height:none;max-width:none;aspect-ratio:16/9}
  body.touch-enabled #touch{
    position:fixed;inset:0;width:100%;max-width:none;height:100%;
    padding:0;pointer-events:none;z-index:20;
  }
  #touchPause{position:fixed;top:8px;right:10px;z-index:21;opacity:.9;pointer-events:auto;width:34px;height:26px}
  #stick{position:absolute;left:4px;bottom:8px;pointer-events:auto;opacity:.92;width:80px;height:80px}
  #stickKnob{width:36px;height:36px;margin:-18px 0 0 -18px}
  #pad{position:absolute;right:2px;bottom:8px;pointer-events:auto;opacity:.92;width:84px;height:84px}
  #pad .tbtn{width:40px;height:40px;font-size:9px;letter-spacing:0}
  .tbtn[data-key="lp"]{left:0;bottom:0}
  .tbtn[data-key="hp"]{left:44px;bottom:0}
  .tbtn[data-key="lk"]{left:0;bottom:44px}
  .tbtn[data-key="hk"]{left:44px;bottom:44px}
}