:root{
  --font:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --navy:#0b1828;
  --navy2:#142840;
  --gold:#d9b46a;
  --gold-l:#f6e3b4;
  --gold-d:#a97a3a;
  --cream:#fff3d6;
  --gem:#c94f4f;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#07121e;font-family:var(--font);color:var(--cream);}
body{display:flex;align-items:center;justify-content:center}
#stage{
  position:relative;width:540px;height:960px;overflow:hidden;
  border-radius:26px;box-shadow:0 40px 90px rgba(0,0,0,.55);
  background:#0b1828;
  transform-origin:center center;
}
#scene{display:block;width:540px;height:960px}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(8,14,20,.22) 100%)}

.hud{position:absolute;left:18px;right:18px;top:16px;z-index:5;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;pointer-events:none;transition:opacity .25s}
.title-card{
  width:272px;padding:12px 15px 12px;border-radius:12px;
  background:linear-gradient(160deg,rgba(15,31,48,.94),rgba(8,18,30,.9));
  border:1px solid rgba(217,180,106,.62);
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  position:relative;
}
.title-card::before,.title-card::after{content:"";position:absolute;width:12px;height:12px;border-color:var(--gold);border-style:solid;opacity:.9}
.title-card::before{left:5px;top:5px;border-width:1px 0 0 1px}
.title-card::after{right:5px;bottom:5px;border-width:0 1px 1px 0}
.kicker{margin:0 0 3px;font-size:7px;letter-spacing:2.2px;font-weight:700;color:var(--gold)}
.title-card h1{margin:0;font-size:24px;letter-spacing:2px;font-weight:700;color:var(--cream);font-family:"Songti SC","SimSun",serif}
.sub{margin:4px 0 0;font-size:8.5px;letter-spacing:1.2px;color:rgba(255,243,214,.65)}
.top-right{display:flex;flex-direction:column;align-items:flex-end;gap:7px;pointer-events:auto}
.time-tabs{display:flex;border:1px solid rgba(217,180,106,.55);border-radius:999px;padding:2px;background:rgba(7,17,28,.74)}
.time-tabs button{
  border:none;background:transparent;color:rgba(255,243,214,.58);
  font:600 9px/1 var(--font);padding:6px 8px;border-radius:999px;cursor:pointer;letter-spacing:.5px;
}
.time-tabs button.on{background:linear-gradient(180deg,rgba(217,180,106,.32),rgba(169,122,58,.18));color:var(--cream);box-shadow:inset 0 0 0 1px rgba(246,227,180,.35)}
.coins{font-size:9px;letter-spacing:1;color:rgba(255,243,214,.72);background:rgba(7,17,28,.66);border:1px solid rgba(217,180,106,.3);border-radius:999px;padding:5px 10px}
.coins b{color:var(--gold-l);font-size:11px;margin-left:2px}

.photo-btn{
  position:absolute;right:18px;bottom:148px;z-index:8;
  width:86px;height:104px;border:none;background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--gold-l);
  transition:transform .15s, opacity .2s;
}
.photo-btn:hover{transform:translateY(-2px)}
.photo-btn svg{
  width:64px;height:64px;padding:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#274763 0%,#10243a 48%,#071320 100%);
  border:2px solid var(--gold);
  box-shadow:0 0 0 3px rgba(12,26,42,.9),0 0 0 4px rgba(217,180,106,.45),0 10px 24px rgba(0,0,0,.45);
  color:var(--gold-l);
}
.photo-btn span{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--cream);text-shadow:0 2px 8px rgba(0,0,0,.6)}
.photo-btn small{font-size:8px;letter-spacing:1px;color:var(--gold-l);opacity:.8}
.photo-btn::before{content:"";position:absolute;right:31px;top:-7px;width:8px;height:8px;background:var(--gem);transform:rotate(45deg);box-shadow:0 0 0 1px rgba(246,227,180,.8);border-radius:1px}

.home-btn{
  position:absolute;right:18px;bottom:56px;z-index:8;
  width:170px;height:52px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--gold);
  background:linear-gradient(180deg,#203a55,#0a1624);
  color:var(--cream);font:700 13px/1 var(--font);letter-spacing:4px;
  box-shadow:0 10px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(246,227,180,.18);
  transition:transform .15s, filter .2s;
}
.home-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}

.prompt{
  position:absolute;left:50%;bottom:112px;transform:translate(-50%,8px);z-index:9;
  padding:8px 15px;border-radius:999px;
  background:rgba(7,17,28,.84);border:1px solid rgba(217,180,106,.55);
  color:var(--cream);font-size:10px;letter-spacing:.6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;
  box-shadow:0 8px 20px rgba(0,0,0,.3);
}
.prompt.show{opacity:1;transform:translate(-50%,0)}
.prompt b{color:var(--gold-l)}

.toast{
  position:absolute;left:50%;bottom:190px;transform:translate(-50%,8px);z-index:30;
  padding:9px 16px;border-radius:999px;background:rgba(7,17,28,.9);
  border:1px solid rgba(217,180,106,.6);color:var(--cream);
  font-size:10px;letter-spacing:.5px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .22s, transform .22s;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* photo mode */
.photo-ui{
  position:absolute;inset:0;z-index:20;display:none;
  background:rgba(5,11,18,.18);
}
.photo-ui.show{display:block}
.photo-top{
  position:absolute;left:18px;right:18px;top:20px;display:flex;justify-content:space-between;align-items:center;
}
.view-tabs{display:flex;border:1px solid rgba(217,180,106,.6);border-radius:999px;padding:2px;background:rgba(7,17,28,.75)}
.view-tabs button{
  border:none;background:transparent;color:rgba(255,243,214,.6);
  font:600 9px/1 var(--font);padding:7px 10px;border-radius:999px;cursor:pointer;
}
.view-tabs button.on{background:linear-gradient(180deg,rgba(217,180,106,.35),rgba(169,122,58,.2));color:var(--cream)}
.photo-close{
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(217,180,106,.6);
  background:rgba(7,17,28,.72);color:var(--cream);font:300 20px/1 var(--font);cursor:pointer;
}
.frame{position:absolute;left:22px;right:22px;top:78px;bottom:154px;border:1px solid rgba(246,227,180,.42);pointer-events:none}
.frame .c{position:absolute;width:22px;height:22px;border-color:var(--gold-l);border-style:solid}
.frame .tl{left:-1px;top:-1px;border-width:2px 0 0 2px}
.frame .tr{right:-1px;top:-1px;border-width:2px 2px 0 0}
.frame .bl{left:-1px;bottom:-1px;border-width:0 0 2px 2px}
.frame .br{right:-1px;bottom:-1px;border-width:0 2px 2px 0}
.frame-hint{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  font-size:8px;letter-spacing:1.2px;color:rgba(255,243,214,.62);
  background:rgba(7,17,28,.45);padding:4px 8px;border-radius:999px;
}
.photo-bottom{position:absolute;left:0;right:0;bottom:28px;display:flex;flex-direction:column;align-items:center;gap:8px}
.count{font-size:9px;letter-spacing:2px;color:rgba(255,243,214,.78)}
.shutter{
  width:70px;height:70px;border-radius:50%;cursor:pointer;
  background:rgba(7,17,28,.5);border:2px solid var(--gold-l);
  display:grid;place-items:center;padding:0;
  box-shadow:0 0 0 4px rgba(7,17,28,.4),0 10px 24px rgba(0,0,0,.35);
}
.shutter span{display:block;width:52px;height:52px;border-radius:50%;background:linear-gradient(180deg,#f6e3b4,#d9b46a);box-shadow:inset 0 2px 8px rgba(255,255,255,.45)}
.photo-note{font-size:8px;letter-spacing:1;color:rgba(255,243,214,.55)}

.flash{position:absolute;inset:0;background:#fff8ec;opacity:0;pointer-events:none;z-index:25;transition:opacity .08s}
.flash.on{opacity:.9}

.photo-open .hud,.photo-open .photo-btn,.photo-open .home-btn,.photo-open .prompt{opacity:0;pointer-events:none}

.loading{
  position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:#0b1828;transition:opacity .7s ease;
}
.loading.hide{opacity:0;pointer-events:none}
.loading span{font-size:10px;letter-spacing:2px;color:rgba(255,243,214,.55)}
.loading .dot{
  width:30px;height:30px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(246,227,180,0) 0%,var(--gold-l) 55%,var(--gold) 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* touch controls */
.joystick{
  position:absolute;left:22px;bottom:24px;z-index:12;display:none;
  width:116px;height:116px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(255,248,236,.12),rgba(7,17,28,.48));
  border:1.5px solid rgba(217,180,106,.55);
  box-shadow:0 10px 28px rgba(0,0,0,.35),inset 0 0 22px rgba(0,0,0,.22);
  touch-action:none;
}
.joystick .knob{
  position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f6e3b4,#d9b46a 55%,#a97a3a);
  border:1px solid rgba(255,248,236,.8);box-shadow:0 6px 16px rgba(0,0,0,.35);
  transform:translate(0,0);pointer-events:none;
}
.action-btn{
  position:absolute;right:28px;bottom:270px;z-index:12;display:none;
  width:58px;height:58px;border-radius:50%;cursor:pointer;
  border:2px solid var(--gold);background:radial-gradient(circle at 35% 30%,#274763,#10243a 60%,#071320);
  color:var(--cream);font:800 20px/1 var(--font);
  box-shadow:0 0 0 3px rgba(12,26,42,.8),0 10px 22px rgba(0,0,0,.4);
}
.action-btn.show{display:none}
body.touch .joystick{display:block}
body.touch canvas{touch-action:none}
body.touch .action-btn.show{display:grid;place-items:center}

@media (max-width:600px),(max-height:720px){
  #stage{border-radius:0;box-shadow:none}
  .joystick{bottom:calc(20px + env(safe-area-inset-bottom))}
  .home-btn{bottom:calc(22px + env(safe-area-inset-bottom))}
}