* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --serif-zh: 'Noto Serif SC', 'Source Han Serif SC', 'STSong', 'SimSun', serif;
  --serif-en: Georgia, 'Times New Roman', serif;
  --sans: 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', system-ui, sans-serif;
  --mono: 'Cascadia Code', Consolas, 'Courier New', monospace;
  --ink: #f3eee2;
  --accent: #d8a25e;
  --sw: 1280px;
  --sh: 720px;
}

html, body { width: 100%; height: 100%; background: #000; overflow: hidden; }
body { font-family: var(--sans); user-select: none; -webkit-user-select: none; }
body.lang-zh .use-serif { font-family: var(--serif-zh); }
body.lang-en .use-serif { font-family: var(--serif-en); }

#stage {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  overflow: hidden; background: #000; cursor: default;
  touch-action: manipulation;
  
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

#stage.rot {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  --safe-t: env(safe-area-inset-right, 0px);
  --safe-r: env(safe-area-inset-bottom, 0px);
  --safe-b: env(safe-area-inset-left, 0px);
  --safe-l: env(safe-area-inset-top, 0px);
}

#stage.can-adv { cursor: pointer; }

.bg-layer {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.04); will-change: transform, opacity;
  transition: opacity .9s ease;
}
.bg-layer.on {
  opacity: 1;
  animation: kenburns 30s ease-out forwards;
}

@keyframes kenburns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-.9%, -.7%, 0); }
}
#bgDim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%); }

#bgTint {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity .9s ease;
}
#bgTint.on { opacity: 1; }
#bgTint.day {
  background: linear-gradient(190deg, rgba(255,214,168,.24), rgba(255,240,224,.06) 55%, rgba(90,110,160,.08));
  mix-blend-mode: screen;
}
#bgTint.dawn {
  background: linear-gradient(195deg, rgba(255,196,150,.34), rgba(255,226,196,.10) 50%, rgba(120,120,170,.10));
  mix-blend-mode: screen;
}
#bgTint.night {
  background: linear-gradient(180deg, rgba(12,22,48,.5), rgba(4,7,18,.28));
  mix-blend-mode: multiply;
}
#bgTint.gray {
  background: linear-gradient(180deg, rgba(8,12,22,.55), rgba(4,6,14,.45));
}

#sprite {
  position: absolute; right: max(calc(var(--sw) * 0.03), var(--safe-r)); bottom: calc(var(--sh) * -0.015);
  height: calc(var(--sh) * 0.88); width: auto;
  opacity: 0; transform: translateY(calc(var(--sh) * 0.035)) scale(.985);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1), filter .4s ease;
  filter: drop-shadow(0 calc(var(--sh) * 0.008) calc(var(--sh) * 0.022) rgba(0,0,0,.6));
  pointer-events: none; z-index: 3; will-change: transform, opacity;
}
#sprite.on { opacity: 1; transform: translateY(0) scale(1); }
#sprite.dim {
  
  opacity: .96;
  filter: brightness(.6) saturate(.8) drop-shadow(0 calc(var(--sh) * 0.008) calc(var(--sh) * 0.022) rgba(0,0,0,.6));
}

#itemBox {
  position: absolute; left: max(calc(var(--sw) * 0.03), var(--safe-l)); bottom: calc(var(--sh) * 0.40);
  width: calc(var(--sw) * 0.14);
  background: #f6f2e8; padding: calc(var(--sw) * 0.009) calc(var(--sw) * 0.009) calc(var(--sw) * 0.026);
  border-radius: calc(var(--sw) * 0.003);
  box-shadow: 0 calc(var(--sh) * 0.01) calc(var(--sh) * 0.03) rgba(0,0,0,.6);
  transform: rotate(-5deg) translateY(calc(var(--sh) * 0.03));
  opacity: 0; transition: all .5s ease; z-index: 4; pointer-events: none;
}
#itemBox.on { opacity: 1; transform: rotate(-5deg) translateY(0); }
#itemImg { width: 100%; display: block; }
#itemCap { text-align: center; color: #444; font-size: calc(var(--sw) * 0.016); font-family: var(--serif-en); font-style: italic; margin-top: calc(var(--sw) * 0.008); }

#chapterLayer {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--sh) * 0.024);
  background: rgba(0,0,0,.42); opacity: 0; transition: opacity .7s ease;
}
#chapterLayer.on { opacity: 1; }
#chapterText {
  color: #efe8d8; font-size: calc(var(--sw) * 0.044); letter-spacing: calc(var(--sw) * 0.009);
  font-weight: 600; text-shadow: 0 0 calc(var(--sh) * 0.024) rgba(0,0,0,.8);
  text-align: center; padding: 0 calc(var(--sw) * 0.04);
}
body.lang-en #chapterText { letter-spacing: calc(var(--sw) * 0.0035); }
.ch-line { width: calc(var(--sw) * 0.24); height: 1px; background: linear-gradient(90deg, rgba(0,0,0,0), #d8b98a, rgba(0,0,0,0)); }

#sysLayer, #noteLayer {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 22; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  background: rgba(2,4,10,.78); text-align: center; padding: 0 calc(var(--sw) * 0.08);
}
#sysLayer.on, #noteLayer.on { display: flex; }
#sysText { font-family: var(--mono); font-size: calc(var(--sw) * 0.032); letter-spacing: calc(var(--sw) * 0.005); line-height: 2; white-space: pre-wrap; }
body.lang-en #sysText { letter-spacing: calc(var(--sw) * 0.002); }
#sysText.cyan { color: #9fd8ff; text-shadow: 0 0 calc(var(--sh) * 0.024) rgba(80,180,255,.9), 0 0 calc(var(--sh) * 0.06) rgba(60,140,255,.4); }
#sysText.profile { color: #cdeaff; text-shadow: 0 0 calc(var(--sh) * 0.02) rgba(140,220,255,.9); }
#sysText.sat { color: #86ffc0; text-shadow: 0 0 calc(var(--sh) * 0.024) rgba(70,255,160,.8); }
#sysText.detect {
  color: #ff5757; animation: glitch .18s steps(2) infinite;
  text-shadow: calc(var(--sw) * 0.003) 0 rgba(0,255,255,.7), calc(var(--sw) * -0.003) 0 rgba(255,0,80,.7);
}
@keyframes glitch {
  0% { transform: translate(0,0); } 25% { transform: translate(calc(var(--sw) * -0.0025), calc(var(--sh) * 0.002)); }
  50% { transform: translate(calc(var(--sw) * 0.002), calc(var(--sh) * -0.0015)); }
  75% { transform: translate(calc(var(--sw) * -0.0015), calc(var(--sh) * -0.002)); }
  100% { transform: translate(0,0); }
}
#noteText {
  font-size: calc(var(--sw) * 0.027); line-height: 2.2; color: #d9d3c4;
  max-width: 72%; text-shadow: 0 1px 3px #000; animation: noteIn 1.1s ease;
}
body.lang-zh #noteText { font-family: var(--serif-zh); }
body.lang-en #noteText { font-family: var(--serif-en); }
@keyframes noteIn { from { opacity: 0; transform: translateY(calc(var(--sh) * 0.02)); } to { opacity: 1; transform: translateY(0); } }
.cont-mark { margin-top: calc(var(--sh) * 0.05); color: rgba(255,255,255,.55); font-size: calc(var(--sw) * 0.018); animation: blink 1.2s infinite; }
@keyframes blink { 0%,100% { opacity: .15; } 50% { opacity: .8; } }

#dialogBox {
  position: absolute;
  left: max(calc(var(--sw) * 0.03), var(--safe-l));
  right: max(calc(var(--sw) * 0.03), var(--safe-r));
  bottom: max(calc(var(--sh) * 0.022), var(--safe-b));
  min-height: calc(var(--sh) * 0.22);
  z-index: 10; padding: calc(var(--sh) * 0.036) calc(var(--sw) * 0.03) calc(var(--sh) * 0.026);
  background: linear-gradient(180deg, rgba(10,14,22,.66), rgba(8,10,18,.92));
  border: 1px solid rgba(255,255,255,.16); border-radius: calc(var(--sw) * 0.012);
  box-shadow: 0 calc(var(--sh) * 0.01) calc(var(--sh) * 0.04) rgba(0,0,0,.55);
  backdrop-filter: blur(5px); display: none;
}
#dialogBox.on { display: block; animation: dlgIn .3s ease; }
@keyframes dlgIn { from { opacity: 0; transform: translateY(calc(var(--sh) * 0.016)); } to { opacity: 1; transform: translateY(0); } }
#nameTag {
  position: absolute; top: calc(var(--sh) * -0.034); left: calc(var(--sw) * 0.022);
  padding: calc(var(--sh) * 0.009) calc(var(--sw) * 0.022);
  border-radius: calc(var(--sw) * 0.008); font-size: calc(var(--sw) * 0.024);
  letter-spacing: calc(var(--sw) * 0.0025); color: #fff;
  box-shadow: 0 calc(var(--sh) * 0.006) calc(var(--sh) * 0.018) rgba(0,0,0,.5); white-space: nowrap;
}
#nameTag.sp-you   { background: linear-gradient(135deg, #a06a35, #6e441f); }
#nameTag.sp-C     { background: linear-gradient(135deg, #2e8a92, #175a63); }
#nameTag.sp-E     { background: linear-gradient(135deg, #44639a, #263a63); }
#nameTag.sp-child { background: linear-gradient(135deg, #5f9e63, #37683c); }
#nameTag.sp-nina  { background: linear-gradient(135deg, #b8963e, #7d611f); }
#dlgText {
  font-size: calc(var(--sw) * 0.0235); line-height: 1.85; color: var(--ink);
  text-shadow: 0 1px 2px rgba(0,0,0,.8); min-height: calc(var(--sh) * 0.09);
}
body.lang-zh #dlgText { font-family: var(--serif-zh); letter-spacing: calc(var(--sw) * 0.0006); }
body.lang-en #dlgText { font-family: var(--serif-en); }
#nextArrow {
  position: absolute; right: calc(var(--sw) * 0.024); bottom: calc(var(--sh) * 0.016);
  color: var(--accent); font-size: calc(var(--sw) * 0.018);
  animation: blink 1.2s infinite; opacity: 0; pointer-events: none;
}
#nextArrow.on { opacity: 1; }

#choiceLayer {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 26; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--sh) * 0.024);
  background: radial-gradient(90% 90% at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.8));
}
#choiceLayer.on { display: flex; }
#choicePrompt {
  width: calc(var(--sw) * 0.66); text-align: left;
  color: #d8b98a; font-size: calc(var(--sw) * 0.022); letter-spacing: calc(var(--sw) * 0.006);
  margin-bottom: calc(var(--sh) * 0.01);
  border-bottom: 1px solid rgba(216,185,138,.5);
  padding: 0 0 calc(var(--sh) * 0.012) calc(var(--sw) * 0.03);
}
#choiceBtns {
  display: flex; flex-direction: column; gap: calc(var(--sh) * 0.018);
  width: calc(var(--sw) * 0.66);
}
.choice-btn {
  width: 100%; padding: calc(var(--sh) * 0.022) calc(var(--sw) * 0.03);
  text-align: left; cursor: pointer; font-size: calc(var(--sw) * 0.0235); line-height: 1.6;
  color: var(--ink); background: rgba(12,16,26,.85);
  border: 1px solid rgba(255,255,255,.22); border-left: calc(var(--sw) * 0.0045) solid var(--accent);
  border-radius: calc(var(--sw) * 0.008);
  transition: all .25s ease; opacity: 0; transform: translateY(calc(var(--sh) * 0.02));
  animation: optIn .45s ease forwards; font-family: var(--sans);
}
.choice-btn:nth-child(2) { animation-delay: .12s; }
.choice-btn:nth-child(3) { animation-delay: .24s; }
@keyframes optIn { to { opacity: 1; transform: translateY(0); } }
.choice-btn:hover { background: rgba(38,46,66,.92); transform: translateX(calc(var(--sw) * 0.006)); box-shadow: 0 0 calc(var(--sh) * 0.024) rgba(216,162,94,.35); }

#selectLayer {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 28; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  background: rgba(3,6,14,.6); padding: calc(var(--sh) * 0.02) calc(var(--sw) * 0.03);
}
#selectLayer.on { display: flex; animation: dlgIn .5s ease; }
.sel-head { text-align: center; margin-bottom: calc(var(--sh) * 0.022); }
#selHeading {
  color: #e8f2ff; font-size: calc(var(--sw) * 0.028); letter-spacing: calc(var(--sw) * 0.006);
  font-weight: 600; text-shadow: 0 0 calc(var(--sh) * 0.03) rgba(80,180,255,.6);
}
body.lang-en #selHeading { letter-spacing: calc(var(--sw) * 0.002); }
#selSub { color: #7fb7e8; font-family: var(--mono); font-size: calc(var(--sw) * 0.016); letter-spacing: calc(var(--sw) * 0.007); margin-top: calc(var(--sh) * 0.008); }
.sel-cards { display: flex; gap: calc(var(--sw) * 0.03); align-items: stretch; }
.sel-card {
  width: calc(var(--sw) * 0.30); background: rgba(10,14,24,.92);
  border: 1px solid rgba(120,190,255,.3); border-radius: calc(var(--sw) * 0.010);
  padding: calc(var(--sh) * 0.014) calc(var(--sw) * 0.013);
  transition: all .3s ease; cursor: pointer;
  display: flex; flex-direction: column;
}
.sel-card:hover { transform: translateY(calc(var(--sh) * -0.008)); border-color: rgba(216,162,94,.8); box-shadow: 0 0 calc(var(--sh) * 0.04) rgba(216,162,94,.25); }
.sel-card .ph {
  position: relative; width: 100%; height: calc(var(--sw) * 0.155); overflow: hidden;
  border-radius: calc(var(--sw) * 0.007);
  background: radial-gradient(75% 85% at 50% 18%, #2a3852, #0a0e18 72%);
}
.sel-card .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.sel-card h3 { color: #f0e9da; font-size: calc(var(--sw) * 0.0185); margin: calc(var(--sh) * 0.011) 0 calc(var(--sh) * 0.006); letter-spacing: calc(var(--sw) * 0.0012); }
.sel-card .traits { color: #c9d2e2; font-size: calc(var(--sw) * 0.0142); line-height: 1.65; }
.sel-card .quote { color: #9fb6d8; font-size: calc(var(--sw) * 0.0135); line-height: 1.6; font-style: italic; margin: calc(var(--sh) * 0.008) 0 calc(var(--sh) * 0.012); flex: 1; }
.sel-card button {
  width: 100%; padding: calc(var(--sh) * 0.011) 0; font-size: calc(var(--sw) * 0.017);
  letter-spacing: calc(var(--sw) * 0.003); cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #8a5f2e, #5d3c1a);
  border: 1px solid rgba(255,220,170,.4); border-radius: calc(var(--sw) * 0.006);
  transition: filter .25s; font-family: var(--sans);
}
.sel-card button:hover { filter: brightness(1.25); }

#reportLayer {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 28; display: none;
  align-items: center; justify-content: center; background: rgba(2,3,8,.78);
}
#reportLayer.on { display: flex; animation: dlgIn .5s ease; }
.rp-window {
  width: calc(var(--sw) * 0.60); padding: calc(var(--sh) * 0.045) calc(var(--sw) * 0.04);
  text-align: center; background: rgba(8,12,20,.96);
  border: 1px solid rgba(255,90,90,.55); border-radius: calc(var(--sw) * 0.012);
  box-shadow: 0 0 calc(var(--sh) * 0.06) rgba(255,60,60,.25), 0 calc(var(--sh) * 0.02) calc(var(--sh) * 0.04) rgba(0,0,0,.7);
}
.rp-title { font-family: var(--mono); color: #ff6b6b; font-size: calc(var(--sw) * 0.024); letter-spacing: calc(var(--sw) * 0.01); }
.rp-title::before { content: '⚠ '; }
.rp-ask { color: var(--ink); font-size: calc(var(--sw) * 0.026); margin: calc(var(--sh) * 0.026) 0 calc(var(--sh) * 0.034); }
body.lang-zh .rp-ask { font-family: var(--serif-zh); }
.rp-btns { display: flex; flex-direction: column; gap: calc(var(--sh) * 0.018); }
.rp-btns button {
  padding: calc(var(--sh) * 0.019) 0; font-size: calc(var(--sw) * 0.022);
  letter-spacing: calc(var(--sw) * 0.003); cursor: pointer; border-radius: calc(var(--sw) * 0.008);
  color: #fff; transition: all .25s; border: 1px solid rgba(0,0,0,0); font-family: var(--sans);
}
.rp-danger { background: linear-gradient(135deg, #a32727, #6c1414); border-color: rgba(255,120,120,.5) !important; }
.rp-danger:hover { filter: brightness(1.3); box-shadow: 0 0 calc(var(--sh) * 0.03) rgba(255,70,70,.5); }
.rp-calm { background: rgba(0,0,0,0); border-color: rgba(255,255,255,.35) !important; color: #cfd6e4 !important; }
.rp-calm:hover { background: rgba(255,255,255,.1); }

#endLayer {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 30; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  background: #000; gap: calc(var(--sh) * 0.026);
}
#endLayer.on { display: flex; }
.end-tag {
  font-family: var(--mono); font-size: calc(var(--sw) * 0.019); letter-spacing: calc(var(--sw) * 0.008);
  padding: calc(var(--sh) * 0.008) calc(var(--sw) * 0.024); border-radius: calc(var(--sw) * 0.02);
  border: 1px solid rgba(0,0,0,0);
}
.end-tag.bad { color: #ff7a7a; border-color: rgba(255,120,120,.6); }
.end-tag.true { color: #ffd98a; border-color: rgba(255,215,140,.6); }
.end-lines { text-align: center; }
.end-lines div {
  color: #efe8d8; font-size: calc(var(--sw) * 0.046); letter-spacing: calc(var(--sw) * 0.012);
  margin: calc(var(--sh) * 0.016) 0; text-shadow: 0 0 calc(var(--sh) * 0.04) rgba(216,162,94,.4);
  animation: noteIn 1.4s ease;
}
body.lang-en .end-lines div { letter-spacing: calc(var(--sw) * 0.004); }
.end-btns { display: flex; gap: calc(var(--sw) * 0.03); margin-top: calc(var(--sh) * 0.05); opacity: 0; animation: optIn .8s ease 1.2s forwards; }
.end-btns button {
  width: calc(var(--sw) * 0.24); padding: calc(var(--sh) * 0.018) 0; font-size: calc(var(--sw) * 0.021);
  letter-spacing: calc(var(--sw) * 0.004); cursor: pointer; color: var(--ink);
  background: rgba(20,26,40,.9); border: 1px solid rgba(216,162,94,.5);
  border-radius: calc(var(--sw) * 0.008); transition: all .25s; font-family: var(--sans);
}
.end-btns button:hover { background: rgba(60,70,95,.9); box-shadow: 0 0 calc(var(--sh) * 0.03) rgba(216,162,94,.3); }

#flashLayer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; background: #fff; opacity: 0; pointer-events: none; }
#flashLayer.on { animation: flashA 1.1s ease; }
@keyframes flashA { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

#titleScreen {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; display: flex;
  align-items: center; justify-content: center;
  background-size: cover; background-position: center;
  transition: opacity .8s ease;
}
#titleScreen::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(0,0,10,.35), rgba(0,0,10,.82));
}
#titleScreen.off { opacity: 0; pointer-events: none; }
.title-inner { position: relative; z-index: 2; text-align: center; }
.title-badge {
  display: inline-block; font-family: var(--mono); color: #9fb6d8; font-size: calc(var(--sw) * 0.015);
  letter-spacing: calc(var(--sw) * 0.009); border: 1px solid rgba(159,182,216,.4);
  border-radius: calc(var(--sw) * 0.02); padding: calc(var(--sh) * 0.006) calc(var(--sw) * 0.022);
  margin-bottom: calc(var(--sh) * 0.03);
}
#gameTitle {
  color: #f5efe2; font-size: calc(var(--sw) * 0.082); letter-spacing: calc(var(--sw) * 0.018);
  font-weight: 700; text-shadow: 0 0 calc(var(--sh) * 0.05) rgba(216,162,94,.55), 0 calc(var(--sh) * 0.01) calc(var(--sh) * 0.03) rgba(0,0,0,.9);
}
body.lang-en #gameTitle { letter-spacing: calc(var(--sw) * 0.005); }
.title-sub { color: #cfd6e4; font-size: calc(var(--sw) * 0.021); letter-spacing: calc(var(--sw) * 0.003); margin-top: calc(var(--sh) * 0.024); }
.title-btns { display: flex; flex-direction: column; align-items: center; gap: calc(var(--sh) * 0.02); margin-top: calc(var(--sh) * 0.06); }
.title-btns button {
  width: calc(var(--sw) * 0.30); padding: calc(var(--sh) * 0.02) 0; font-size: calc(var(--sw) * 0.025);
  letter-spacing: calc(var(--sw) * 0.008); cursor: pointer; color: #fff;
  background: linear-gradient(135deg, rgba(138,95,46,.95), rgba(93,60,26,.95));
  border: 1px solid rgba(255,220,170,.45); border-radius: calc(var(--sw) * 0.009);
  transition: all .25s; font-family: var(--sans);
}
.title-btns button.ghost { background: rgba(15,20,32,.7); border-color: rgba(255,255,255,.3); color: #cfd6e4; }
.title-btns button:hover { filter: brightness(1.25); box-shadow: 0 0 calc(var(--sh) * 0.034) rgba(216,162,94,.35); transform: translateY(calc(var(--sh) * -0.004)); }
.title-hint { color: #97a2b5; font-size: calc(var(--sw) * 0.017); letter-spacing: calc(var(--sw) * 0.002); margin-top: calc(var(--sh) * 0.05); }

#topBar {
  position: absolute; z-index: 60;
  top: max(calc(var(--sh) * 0.006), var(--safe-t));
  right: max(calc(var(--sw) * 0.006), var(--safe-r));
  display: flex; gap: calc(var(--sw) * 0.01);
  padding: calc(var(--sh) * 0.014) calc(var(--sw) * 0.01);
}
#topBar button {
  width: calc(var(--sh) * 0.048); height: calc(var(--sh) * 0.048); border-radius: 50%; cursor: pointer;
  background: rgba(10,14,22,.62); border: 1px solid rgba(255,255,255,.28);
  color: #e6ecf5; font-size: calc(var(--sh) * 0.022); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; backdrop-filter: blur(3px); font-family: var(--sans);
}
#topBar button:hover { background: rgba(60,72,96,.85); box-shadow: 0 0 calc(var(--sh) * 0.016) rgba(216,162,94,.4); }
#topBar button.hidden { display: none; }
#btnLang { font-size: calc(var(--sh) * 0.016); letter-spacing: 0.1px; font-weight: 600; }

.choice-btn:active, .rp-btns button:active, .title-btns button:active,
.end-btns button:active, .sel-card button:active, #topBar button:active {
  transform: translateY(1px) scale(.995); filter: brightness(1.18);
}
.sel-card:active { transform: translateY(calc(var(--sh) * -0.004)) scale(.995); }
#sprite, #itemBox, .bg-layer, #titleScreen { backface-visibility: hidden; }

.choice-btn .num {
  display: inline-block; margin-right: calc(var(--sw) * 0.012);
  font-family: var(--mono); font-size: calc(var(--sw) * 0.018); color: var(--accent);
  opacity: .75;
}