* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; color: #eef3fb; }
#stage { position: fixed; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; --s: 1; }
#cv { position: absolute; left: 0; top: 0; display: block; touch-action: none; }

.screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#title { flex-direction: column; justify-content: center; gap: calc(var(--s) * 10px); }
.screen[hidden], [hidden] { display: none !important; }
.dim { background: rgba(2, 4, 8, 0.72); }

.title-box, .menu { text-align: center; font-size: calc(var(--s) * 30px); }
.fz1 .title-box, .fz1 .menu, .fz1 .notice, .fz1 .skip { zoom: 1.15; }
.fz2 .title-box, .fz2 .menu, .fz2 .notice, .fz2 .skip { zoom: 1.3; }

h1 { font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-weight: 600; font-size: calc(var(--s) * 104px); margin: 0; letter-spacing: 0.12em; line-height: 1.1;
  text-shadow: 0 0 calc(var(--s) * 30px) rgba(150, 205, 255, 0.55), 0 0 calc(var(--s) * 4px) #000; }
.sub { margin: calc(var(--s) * 2px) 0 calc(var(--s) * 18px); opacity: 0.8; font-size: calc(var(--s) * 30px); }

button { font: inherit; color: #eef3fb; background: rgba(10, 18, 30, 0.75); border: calc(var(--s) * 2px) solid rgba(170, 210, 255, 0.45);
  border-radius: calc(var(--s) * 14px); padding: calc(var(--s) * 10px) calc(var(--s) * 26px); cursor: pointer; touch-action: manipulation; }
button.big { font-size: calc(var(--s) * 44px); padding: calc(var(--s) * 14px) calc(var(--s) * 70px); background: rgba(30, 60, 90, 0.85); border-color: rgba(200, 230, 255, 0.8);
  box-shadow: 0 0 calc(var(--s) * 24px) rgba(120, 190, 255, 0.35); }
.opts { margin-top: calc(var(--s) * 20px); display: flex; flex-direction: column; gap: calc(var(--s) * 12px); align-items: center; }
.opt { display: flex; align-items: center; gap: calc(var(--s) * 16px); }
.lab { min-width: calc(var(--s) * 290px); text-align: right; opacity: 0.85; font-size: calc(var(--s) * 28px); }
.choice { display: flex; gap: calc(var(--s) * 8px); }
.choice button { font-size: calc(var(--s) * 28px); padding: calc(var(--s) * 6px) calc(var(--s) * 20px); opacity: 0.6; }
.choice button.on { opacity: 1; background: rgba(60, 110, 160, 0.9); border-color: #d6ebff; }
.keys { margin-top: calc(var(--s) * 22px); font-size: calc(var(--s) * 24px); opacity: 0.75; line-height: 1.6; }

#notices { order: -1; width: min(92%, calc(var(--s) * 1100px)); display: flex; flex-direction: column; gap: calc(var(--s) * 8px); }
.notice { display: flex; align-items: center; gap: calc(var(--s) * 12px); background: rgba(250, 250, 255, 0.95); color: #111; border-radius: calc(var(--s) * 12px);
  padding: calc(var(--s) * 12px) calc(var(--s) * 16px); font-size: calc(var(--s) * 28px); line-height: 1.45; }
.notice span { flex: 1; }
.notice button { color: #111; background: transparent; border: none; font-size: calc(var(--s) * 40px); padding: 0 calc(var(--s) * 8px); }

.corner { position: absolute; top: calc(var(--s) * 18px); right: calc(var(--s) * 22px); width: calc(var(--s) * 76px); height: calc(var(--s) * 76px); padding: 0;
  font-size: calc(var(--s) * 30px); border-radius: 50%; background: rgba(0, 0, 0, 0.35); }
.skip { position: absolute; top: calc(var(--s) * 18px); right: calc(var(--s) * 22px); font-size: calc(var(--s) * 28px); background: rgba(0, 0, 0, 0.45); }

.menu { background: rgba(6, 12, 20, 0.92); border: calc(var(--s) * 2px) solid rgba(170, 210, 255, 0.35); border-radius: calc(var(--s) * 20px);
  padding: calc(var(--s) * 30px) calc(var(--s) * 60px); display: flex; flex-direction: column; gap: calc(var(--s) * 14px); align-items: center; max-height: 96%; overflow-y: auto; }
.mtitle { font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-size: calc(var(--s) * 52px); margin: 0 0 calc(var(--s) * 6px); }
.res { border-collapse: collapse; font-size: calc(var(--s) * 32px); }
.res th { text-align: left; font-weight: normal; opacity: 0.8; padding: calc(var(--s) * 4px) calc(var(--s) * 30px) calc(var(--s) * 4px) 0; }
.res td { text-align: right; }
.res .rank td { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: calc(var(--s) * 44px); color: #ffe2a0; }
.small { font-size: calc(var(--s) * 24px); opacity: 0.65; margin: 0; }