:root { --ink: #0b0a10; --cream: #f6ecd2; --gold: #ffc23a; --red: #e2402a; --green: #8cf05a; --ui: 'Barlow Condensed', system-ui, sans-serif; --comic: 'Bangers', 'Impact', sans-serif; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #05060b; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body { font-family: var(--ui); color: var(--cream); display: flex; align-items: center; justify-content: center; }
#wrap { position: relative; width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16)); width: min(100dvw, calc(100dvh * 16 / 9)); height: min(100dvh, calc(100dvw * 9 / 16)); overflow: hidden; background: #000; container-type: size; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.scr { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; z-index: 5; }
.scr.on { display: flex; }
.kb { position: absolute; inset: 0; overflow: hidden; }
.kb img { width: 100%; height: 100%; object-fit: cover; animation: kb 22s ease-in-out infinite alternate; transform-origin: 60% 50%; }
@keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, 1%); } }
.shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,5,10,.55) 0%, rgba(4,5,10,.05) 40%, rgba(4,5,10,.25) 62%, rgba(4,5,10,.92) 100%); }
.shade.solid { background: rgba(5,6,12,.82); backdrop-filter: blur(3px); }
.shade.red { background: radial-gradient(ellipse at center, rgba(60,6,10,.65), rgba(10,2,4,.94)); }

.logo { font-family: var(--comic); font-weight: 400; display: flex; align-items: center; gap: .18em; font-size: 13cqw; line-height: .9; letter-spacing: .02em; }
.logo .l1 { color: #ffb43a; -webkit-text-stroke: .035em #1b0a03; paint-order: stroke fill; text-shadow: .045em .055em 0 #6d2306, .07em .09em 0 #120602, 0 0 .35em rgba(255,140,40,.45); transform: rotate(-3deg); }
.logo .l2 { color: #8cf05a; -webkit-text-stroke: .035em #07200a; paint-order: stroke fill; text-shadow: .045em .055em 0 #3b1660, .07em .09em 0 #08050f, 0 0 .35em rgba(150,90,255,.5); transform: rotate(2deg); }
.logo .vs { font-size: .36em; background: var(--red); color: #fff; padding: .12em .3em .02em; border: .09em solid #12060a; transform: rotate(-9deg); box-shadow: .08em .1em 0 #12060a; }
.logo.small { font-size: 7cqw; justify-content: center; }

.title-inner { position: relative; z-index: 2; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 4cqh 4cqw 5cqh; }
.chapter { font-family: var(--comic); font-size: 3.2cqw; letter-spacing: .06em; color: #fff; margin-top: 1.4cqh; text-shadow: 0 .12em 0 #000, 0 0 .6em rgba(0,0,0,.8); }
.menu { display: flex; gap: 1.6cqw; margin-top: auto; flex-wrap: wrap; justify-content: center; }
.menu.col { flex-direction: column; align-items: stretch; margin-top: 3cqh; min-width: 30cqw; }
.menu.tight { margin-top: 1.6cqh; }
.diff { margin-top: auto; display: flex; align-items: center; gap: .8cqw; background: rgba(8,8,14,.7); border: 2px solid rgba(246,236,210,.5); padding: .6cqh .8cqw; }
.diff-l { font-weight: 800; font-size: 1.6cqw; letter-spacing: .14em; text-transform: uppercase; color: #bdb39b; padding: 0 .6cqw; }
.dbtn { font-family: var(--comic); font-size: 2.1cqw; letter-spacing: .05em; color: var(--cream); background: transparent; border: 2px solid transparent; padding: .3cqh 1.4cqw .1cqh; cursor: pointer; min-height: 36px; min-width: 44px; }
.dbtn:hover { border-color: rgba(246,236,210,.5); }
.dbtn.on { background: var(--cream); color: var(--ink); }
.diff-note { margin-top: .8cqh; font-size: 1.6cqw; font-weight: 600; color: #e8dfc6; text-shadow: 0 2px 0 #000; min-height: 1.2em; }
.best { margin-top: 2cqh; font-size: 1.9cqw; font-weight: 700; color: var(--gold); letter-spacing: .04em; text-shadow: 0 2px 0 #000; min-height: 1.2em; }

.btn { font-family: var(--comic); font-size: 2.7cqw; letter-spacing: .05em; color: var(--ink); background: var(--cream); border: .22cqw solid var(--ink); padding: .6cqw 2.2cqw .35cqw; cursor: pointer; box-shadow: .45cqw .5cqw 0 var(--ink); transform: skew(-6deg); transition: transform .08s, box-shadow .08s, background .12s; min-height: 44px; }
.btn:hover, .btn:focus-visible { background: #fff; transform: skew(-6deg) translate(-2px, -2px); box-shadow: .6cqw .7cqw 0 var(--ink); outline: none; }
.btn:active { transform: skew(-6deg) translate(2px, 2px); box-shadow: .15cqw .2cqw 0 var(--ink); }
.btn.primary { background: var(--gold); }
.btn.primary:hover { background: #ffd56e; }
.btn.ghost { background: rgba(10,10,18,.75); color: var(--cream); border-color: var(--cream); box-shadow: .45cqw .5cqw 0 rgba(0,0,0,.8); }

.panel { position: relative; z-index: 2; background: rgba(12,12,20,.9); border: .3cqw solid var(--cream); box-shadow: .8cqw .9cqw 0 #000; padding: 3cqh 3.4cqw; max-width: 86cqw; text-align: center; }
.panel h2 { font-family: var(--comic); font-weight: 400; font-size: 4.6cqw; letter-spacing: .05em; color: var(--gold); text-shadow: .06em .07em 0 #000; margin-bottom: 1.5cqh; }
.panel h2.big { font-size: 6.4cqw; }
.panel p { font-size: 2.1cqw; font-weight: 500; }
.howto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqh 2.4cqw; text-align: left; margin-bottom: 2.4cqh; }
.howto-grid div { display: flex; flex-direction: column; border-left: .35cqw solid var(--gold); padding-left: 1cqw; }
.howto-grid b { font-family: var(--comic); font-weight: 400; font-size: 2.3cqw; letter-spacing: .04em; color: #fff; }
.howto-grid span { font-size: 1.75cqw; font-weight: 500; color: #d9cfb6; line-height: 1.15; }
.panel.win { background: rgba(10,10,18,.84); margin-top: 8cqh; }
.kicker { font-family: var(--comic); color: var(--green); font-size: 2.4cqw !important; letter-spacing: .08em; }
.stats { display: flex; gap: 3cqw; justify-content: center; margin: 1cqh 0 1.6cqh; }
.stats div { display: flex; flex-direction: column; }
.stats b { font-family: var(--comic); font-weight: 400; font-size: 3.6cqw; color: #fff; }
.stats span { font-size: 1.6cqw; text-transform: uppercase; letter-spacing: .12em; color: #bdb39b; }
.tease { color: #d9cfb6; margin-bottom: 2.4cqh; font-size: 1.9cqw !important; }

.caption { position: absolute; left: 4cqw; bottom: 5cqh; max-width: 62cqw; background: #fff3b0; color: #14100a; border: .3cqw solid #14100a; box-shadow: .6cqw .7cqw 0 rgba(0,0,0,.85); padding: 1.6cqh 2.2cqw 2cqh; transform: rotate(-.6deg); z-index: 3; }
.caption p { font-family: var(--comic); font-size: 2.9cqw; letter-spacing: .03em; line-height: 1.15; min-height: 2.3em; }
.caption .next { position: absolute; right: 1cqw; bottom: .4cqh; font-size: 1.8cqw; animation: blink .9s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.skip { position: absolute; top: 3cqh; right: 3cqw; z-index: 4; font-size: 2cqw; }
#scr-story { cursor: pointer; }

.load-box { text-align: center; }
.bar { width: 36cqw; height: 1.4cqh; border: 2px solid var(--cream); margin: 3cqh auto 1.4cqh; }
.bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .2s; }
#load-txt { font-size: 1.8cqw; color: #bdb39b; letter-spacing: .1em; text-transform: uppercase; }

.mini-btns { position: absolute; z-index: 6; top: 2cqh; right: 1.6cqw; display: none; gap: .8cqw; }
body[data-mode="play"] .mini-btns, body[data-mode="title"] .mini-btns { display: flex; }
body[data-mode="title"] #pause-btn { display: none; }
.mini { font-family: var(--ui); font-weight: 800; font-size: 1.5cqw; letter-spacing: .1em; color: var(--cream); background: rgba(8,8,14,.65); border: 2px solid rgba(246,236,210,.55); padding: .4cqh 1cqw; min-width: 44px; min-height: 36px; cursor: pointer; }
.mini:hover { background: rgba(30,30,50,.85); }

#touch { display: none; }
#rotate { display: none; }
@media (pointer: coarse) {
  body[data-mode="play"] #touch { display: flex; }
  #touch { position: absolute; inset: auto 0 0 0; z-index: 7; justify-content: space-between; align-items: flex-end; padding: 0 3cqw 3cqh; pointer-events: none; }
  #stick { pointer-events: auto; width: 24cqh; height: 24cqh; min-width: 110px; min-height: 110px; border-radius: 50%; background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.28); position: relative; touch-action: none; }
  #knob { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255,194,58,.55); border: 2px solid rgba(255,255,255,.6); }
  .tbtns { pointer-events: auto; display: grid; grid-template-columns: repeat(2, 13cqh); grid-template-rows: repeat(2, 13cqh); gap: 2cqh; }
  .tb { min-width: 58px; min-height: 58px; font-family: var(--comic); font-size: max(13px, 3cqh); letter-spacing: .05em; color: #fff; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); touch-action: none; text-shadow: 0 2px 0 rgba(0,0,0,.6); }
  .tb.at { background: rgba(226,64,42,.72); grid-column: 2; grid-row: 2; }
  .tb.jp { background: rgba(60,150,80,.72); grid-column: 1; grid-row: 2; }
  .tb.sp { background: rgba(150,70,170,.72); grid-column: 2; grid-row: 1; }
  .tb.down { filter: brightness(1.4); transform: scale(.93); }
}
@media (pointer: coarse) and (orientation: portrait) {
  body { align-items: flex-start; padding-top: 8vh; }
  #wrap { width: 100vw; height: calc(100vw * 9 / 16); overflow: visible; }
  #touch { position: fixed; bottom: 0; padding: 0 5vw 6vh; }
  #stick { width: 34vw; height: 34vw; }
  .tbtns { grid-template-columns: repeat(2, 19vw); grid-template-rows: repeat(2, 19vw); gap: 3vw; }
  .tb { font-size: 4vw; }
  #rotate { display: block; position: fixed; left: 0; right: 0; top: calc(8vh + 56.25vw + 3vh); text-align: center; font-size: 3.8vw; font-weight: 700; letter-spacing: .06em; color: #bdb39b; }
  .mini-btns { position: fixed; top: 2vh; right: 3vw; }
  .mini { font-size: 3.2vw; }
}
.diff.chap + .diff { margin-top: 1.2cqh; }
.cbtn { font-size: 1.8cqw; }