@font-face {
  font-family: "Yuji";
  src: url("../fonts/yuji.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald-500.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "Kaushan";
  src: url("../fonts/kaushan.woff2") format("woff2");
  font-display: swap;
}

:root {
  --paper: #EFE6D2;
  --ink: #141210;
  --grey: #6B655C;
  --brick: #9C4A34;
  --indigo: #2B3A67;
  --red: #D7261E;
  --sign: "Oswald", "Arial Narrow", sans-serif;
  --brush: "Kaushan", cursive;
  --kanji: "Yuji", "Hiragino Mincho ProN", serif;
}

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

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sign);
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  transition: filter 0.16s ease;
}
#game.mono { filter: grayscale(1) contrast(1.5) brightness(1.16); }

.hidden { display: none !important; }

#paperGrain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: multiply;
  background-size: 220px 220px;
  z-index: 4;
}
#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(20,18,16,0.3), rgba(20,18,16,0) 20%), radial-gradient(ellipse at 50% 48%, rgba(20,18,16,0) 42%, rgba(20,18,16,0.22) 88%, rgba(20,18,16,0.46) 100%);
  transition: background 0.6s ease;
  z-index: 5;
}
#vignette.low {
  background: linear-gradient(to top, rgba(20,18,16,0.42), rgba(20,18,16,0) 24%), radial-gradient(ellipse at 50% 48%, rgba(20,18,16,0) 26%, rgba(20,18,16,0.42) 74%, rgba(20,18,16,0.78) 100%);
}
#damageWash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(20,18,16,0) 45%, rgba(20,18,16,0.55) 100%),
    radial-gradient(circle at 8% 20%, rgba(20,18,16,0.5), rgba(20,18,16,0) 24%),
    radial-gradient(circle at 92% 72%, rgba(20,18,16,0.45), rgba(20,18,16,0) 22%);
}
#damageWash.on { animation: damagePulse 0.55s ease-out; }
@keyframes damagePulse {
  0% { opacity: 0.95; }
  100% { opacity: 0; }
}

/* ---------------- HUD ---------------- */

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  padding: calc(14px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
}
#leftHud { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: calc(16px + env(safe-area-inset-left)); width: min(340px, 46vw); }
#leftHud::before, #rightHud::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -18px -20px -12px -20px;
  background: radial-gradient(ellipse at 30% 30%, rgba(239,230,210,0.92) 0%, rgba(239,230,210,0.62) 46%, rgba(239,230,210,0) 76%);
}
#rightHud { position: absolute; top: calc(54px + env(safe-area-inset-top)); right: calc(16px + env(safe-area-inset-right)); text-align: right; max-width: 42vw; }
#rightHud::before { background: radial-gradient(ellipse at 70% 30%, rgba(239,230,210,0.92) 0%, rgba(239,230,210,0.6) 48%, rgba(239,230,210,0) 78%); }

.heroTag { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.heroTag .kanji { font-family: var(--kanji); font-size: 20px; line-height: 1; }
.signageTag { font-family: var(--sign); font-weight: 700; letter-spacing: 0.11em; font-size: 11px; color: var(--grey); }

.healthWrap { position: relative; display: flex; align-items: center; gap: 2px; height: 26px; padding-bottom: 4px; }
#hpbar { display: flex; gap: 3px; width: 100%; height: 18px; align-items: stretch; filter: drop-shadow(0 1px 0 rgba(239,230,210,0.5)); }
#hpbar span {
  flex: 1 1 auto;
  background: var(--ink);
  clip-path: polygon(2% 16%, 100% 4%, 97% 88%, 21% 100%, 0% 66%);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
#hpbar span:nth-child(3n) { clip-path: polygon(0% 26%, 96% 0%, 100% 76%, 12% 96%); height: 86%; align-self: center; }
#hpbar span:nth-child(3n+2) { clip-path: polygon(4% 0%, 100% 18%, 88% 100%, 0% 82%); height: 94%; align-self: center; }
#hpbar span.off { opacity: 0; transform: translateY(4px) scaleY(0.4); }
.healthCap {
  position: absolute; right: -8px; top: 0; width: 8px; height: 22px;
  background: var(--ink); opacity: 0.5;
  clip-path: polygon(0 0, 100% 24%, 40% 60%, 100% 74%, 0 100%);
}

.meterRow { display: flex; align-items: flex-end; gap: 9px; margin-top: 5px; }
#meter {
  position: relative; width: 30px; height: 42px;
  border: 2.5px solid var(--ink);
  border-radius: 4px 4px 44% 44%;
  background: rgba(239,230,210,0.35);
  overflow: hidden;
  transform: rotate(-2deg);
}
#meterfill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: var(--ink);
  transition: height 0.25s ease;
}
#meterWave {
  position: absolute; left: 0; right: 0; top: 0; height: 40%;
  background: radial-gradient(ellipse at 50% 0%, rgba(239,230,210,0.7), rgba(239,230,210,0) 70%);
  pointer-events: none;
}
.meterNotes { display: flex; flex-direction: column; line-height: 1.05; padding-bottom: 2px; }
.meterNotes .kanji { font-family: var(--kanji); font-size: 17px; }
.meterHint { font-family: var(--sign); font-size: 9px; letter-spacing: 0.12em; color: var(--grey); }

#stageName { font-weight: 700; font-size: clamp(17px, 2.4vw, 25px); letter-spacing: 0.1em; line-height: 1; }
#stageSub { font-weight: 500; font-size: clamp(10px, 1.3vw, 13px); letter-spacing: 0.2em; color: var(--grey); margin-top: 3px; }
#objective { margin-top: 7px; font-size: 10px; letter-spacing: 0.11em; border-top: 2px solid rgba(20,18,16,0.35); padding-top: 5px; }
#scoreRow { margin-top: 6px; font-size: 11px; letter-spacing: 0.16em; color: var(--ink); }
.scoreLabel { color: #3a352e; margin-right: 6px; }
#score { font-weight: 700; font-size: 17px; }

#comboWrap {
  position: absolute; right: calc(10vw + env(safe-area-inset-right)); top: 37%; min-width: 110px;
  text-align: center; pointer-events: none;
  transform: rotate(-4deg);
  text-shadow: 0 2px 0 rgba(239,230,210,0.4);
}
#comboNum {
  font-family: var(--brush); font-size: clamp(52px, 8.5vw, 104px);
  line-height: 0.8; color: var(--red);
  filter: drop-shadow(2px 3px 0 rgba(20,18,16,0.25));
}
#comboKanji { font-family: var(--kanji); font-size: clamp(14px, 1.8vw, 22px); color: var(--red); opacity: 0.85; margin-top: 2px; }
#comboWrap.pop #comboNum { animation: comboPop 0.26s ease-out; }
@keyframes comboPop {
  0% { transform: scale(1.5) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

#helpBtn, #pauseBtn {
  pointer-events: auto;
  position: absolute; top: calc(12px + env(safe-area-inset-top));
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--ink); background: rgba(239,230,210,0.7);
  color: var(--ink); font-family: var(--sign); font-size: 15px; font-weight: 700;
  cursor: pointer; line-height: 1;
}
#helpBtn { right: calc(58px + env(safe-area-inset-right)); }
#pauseBtn { right: calc(18px + env(safe-area-inset-right)); font-size: 13px; }

/* ---------------- screens ---------------- */

.screen {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
#titleScreen {
  background:
    radial-gradient(ellipse at 50% 55%, rgba(239,230,210,0.10) 0%, rgba(239,230,210,0.55) 40%, rgba(239,230,210,0.95) 100%);
  flex-direction: column;
  justify-content: space-between;
  padding: calc(20px + env(safe-area-inset-top)) 18px calc(14px + env(safe-area-inset-bottom));
}
.titleTop { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.titleGap { flex: 1 1 auto; min-height: 10px; }
.titleBottom { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 2px; }
.titleBottom .titleBlurb { margin-top: 0; }
.titleInk {
  position: absolute; left: 50%; top: 46%;
  width: min(880px, 96vw); height: 240px;
  transform: translate(-50%, -50%) rotate(-2deg);
  background-repeat: no-repeat; background-position: center; background-size: contain;
  opacity: 0.16; pointer-events: none;
}
.titleBlock { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; margin: auto 0; }
.titleKanji {
  font-family: var(--kanji);
  font-size: clamp(17px, 2.6vw, 26px);
  letter-spacing: 0.32em;
  margin-bottom: 4px;
  color: var(--ink);
  opacity: 0.85;
}
.titleBrush {
  font-family: var(--brush);
  font-weight: 400;
  font-size: clamp(52px, 11.5vw, 118px);
  line-height: 0.86;
  margin: 0;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-shadow: 3px 4px 0 rgba(20,18,16,0.10);
}
.titleBrush span { display: inline-block; transform: translateX(0.04em); }
.titleRule { width: min(380px, 60vw); height: 8px; margin: 14px 0 8px; background: var(--ink); clip-path: polygon(0 40%, 30% 0, 70% 26%, 100% 10%, 96% 70%, 62% 100%, 24% 76%, 4% 92%); opacity: 0.9; }
.titleSign { font-family: var(--sign); font-weight: 700; letter-spacing: 0.32em; font-size: clamp(10px, 1.6vw, 14px); }
.titleBlurb { font-family: var(--sign); font-weight: 500; font-size: clamp(11px, 1.6vw, 14px); letter-spacing: 0.06em; line-height: 1.55; color: #3a352e; margin: 12px 0 18px; }
.brushBtn {
  pointer-events: auto;
  font-family: var(--sign); font-weight: 700; letter-spacing: 0.16em; font-size: clamp(12px, 1.7vw, 15px);
  color: var(--paper); background: var(--ink);
  border: 0; padding: 14px 30px; cursor: pointer;
  clip-path: polygon(1% 10%, 99% 0, 100% 84%, 72% 100%, 26% 92%, 0 100%);
  transition: transform 0.15s ease, background 0.15s ease;
  min-width: 210px;
}
.brushBtn:hover, .brushBtn:focus-visible { transform: translateY(-2px) rotate(-0.4deg); background: #26221d; }
.brushBtn:active { transform: translateY(1px); }
.textBtn {
  pointer-events: auto; margin-top: 10px; background: none; border: 0;
  font-family: var(--sign); font-weight: 500; letter-spacing: 0.15em; font-size: 11px;
  color: var(--grey); text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.titleControls { margin-top: 18px; font-family: var(--sign); font-size: 10px; letter-spacing: 0.11em; color: var(--grey); line-height: 1.7; max-width: 620px; }
.titleBoard { margin-top: 12px; font-family: var(--sign); font-size: 10px; letter-spacing: 0.13em; color: var(--ink); opacity: 0.8; min-height: 12px; }
.titleBoard b { font-weight: 700; }
.titleFoot { font-family: var(--sign); font-size: 9px; letter-spacing: 0.22em; color: var(--grey); padding-bottom: 2px; line-height: 1.8; }
.credits { font-size: 7px; letter-spacing: 0.12em; opacity: 0.8; }
.helpCredits { font-family: var(--sign); font-size: 9px; color: var(--grey); line-height: 1.5; margin: 10px 0 16px; }

/* stage card */
#stageCard {
  position: fixed; inset: 0; z-index: 22; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  background: radial-gradient(ellipse at 50% 50%, rgba(239,230,210,0.86) 0%, rgba(239,230,210,0.52) 55%, rgba(239,230,210,0) 82%);
  animation: cardIn 0.5s ease both;
}
@keyframes cardIn { from { opacity: 0; } to { opacity: 1; } }
#stageCard.out { animation: cardOut 0.55s ease both; }
@keyframes cardOut { to { opacity: 0; transform: scale(1.04); } }
.stageKanji { font-family: var(--kanji); font-size: clamp(44px, 9vw, 86px); line-height: 1; letter-spacing: 0.06em; }
.stageBrush { font-family: var(--sign); font-weight: 700; font-size: clamp(30px, 6.8vw, 66px); letter-spacing: 0.1em; line-height: 1; margin-top: 8px; }
.stageRule { width: min(460px, 72vw); height: 5px; background: var(--ink); margin: 12px 0 10px; clip-path: polygon(0 30%, 26% 0, 74% 34%, 100% 8%, 96% 84%, 58% 100%, 18% 72%); }
.stageSign { font-family: var(--sign); font-weight: 500; font-size: clamp(11px, 1.8vw, 15px); letter-spacing: 0.34em; }
.stageObjective { font-family: var(--sign); font-size: 10px; letter-spacing: 0.18em; color: var(--grey); margin-top: 16px; }

/* seal */
#seal { position: fixed; inset: 0; z-index: 24; pointer-events: none; }
.sealBox {
  position: absolute; left: 64%; top: 27%; transform: translate(-50%, -50%) rotate(-8deg);
  width: clamp(110px, 20vw, 168px); height: clamp(110px, 20vw, 168px);
  background: var(--red);
  border-radius: 8% 12% 8% 10%;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-8deg);
  box-shadow: 0 0 0 6px rgba(215,38,30,0.14), inset 0 0 0 5px rgba(239,230,210,0.22);
  filter: contrast(1.05) saturate(1.05);
  animation: stamp 0.5s cubic-bezier(0.2, 1.1, 0.3, 1) both;
}
.sealBox::after {
  content: ""; position: absolute; inset: -18px;
  background: radial-gradient(circle at 50% 50%, rgba(215,38,30,0.22), rgba(215,38,30,0) 62%);
  z-index: -1;
}
@keyframes stamp {
  0% { transform: translate(-50%, -50%) scale(2.6) rotate(-18deg); opacity: 0; }
  55% { transform: translate(-50%, -50%) scale(0.94) rotate(-7deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(-8deg); opacity: 1; }
}
.sealKanji { font-family: var(--kanji); color: var(--paper); font-size: clamp(60px, 12vw, 96px); line-height: 1; }
.sealText { position: absolute; left: 64%; top: 37.5%; transform: translateX(-50%); font-family: var(--sign); font-weight: 700; letter-spacing: 0.4em; font-size: clamp(12px, 2vw, 16px); background: rgba(239,230,210,0.88); padding: 6px 16px; clip-path: polygon(0 18%, 100% 0, 98% 82%, 62% 100%, 22% 88%, 2% 100%); }

#toast {
  position: fixed; left: 50%; bottom: calc(24% + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 20; pointer-events: none;
  font-family: var(--sign); font-weight: 700; letter-spacing: 0.2em; font-size: clamp(11px, 1.8vw, 14px);
  background: var(--ink); color: var(--paper); padding: 8px 18px;
  clip-path: polygon(0 12%, 100% 0, 98% 84%, 70% 100%, 24% 90%, 2% 100%);
  animation: toastIn 0.3s ease both;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

#duelWord {
  position: fixed; left: 50%; top: 20%; transform: translateX(-50%) rotate(-3deg);
  z-index: 21; pointer-events: none;
  font-family: var(--kanji); font-size: clamp(54px, 11vw, 110px);
  color: var(--ink); opacity: 0.9;
  text-shadow: 4px 5px 0 rgba(239,230,210,0.6);
}

/* ---------------- pause + help + end ---------------- */

#pauseScreen, #helpScreen, #endScreen {
  background: rgba(239,230,210,0.9);
  overflow-y: auto;
  align-items: center;
  justify-content: center;
}
.pauseBlock, .helpBlock, .endBlock {
  width: min(560px, 92vw);
  text-align: center;
  padding: 26px 22px;
  border-top: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  background: rgba(239,230,210,0.55);
}
.pauseBlock .stageKanji { font-size: 54px; }
.pauseTitle { font-family: var(--sign); font-weight: 700; font-size: 34px; letter-spacing: 0.2em; margin-top: 4px; }
.pauseSub, .helpTouch { font-family: var(--sign); font-size: 12px; color: #3a352e; letter-spacing: 0.05em; margin: 8px 0 18px; }
.helpHead { font-family: var(--sign); font-weight: 700; font-size: 20px; letter-spacing: 0.14em; margin-bottom: 16px; }
.helpGrid { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; text-align: left; font-family: var(--sign); font-size: 12px; letter-spacing: 0.04em; }
.helpKey { font-weight: 700; white-space: nowrap; }
.helpKey span { color: var(--grey); font-weight: 500; }
.helpWhat { color: #3a352e; }
.helpTouch { margin: 18px 0; }
.endKanji { font-family: var(--kanji); font-size: clamp(54px, 9vw, 82px); line-height: 1; }
.endTitle { font-family: var(--sign); font-weight: 700; font-size: clamp(22px, 4.4vw, 36px); letter-spacing: 0.14em; margin-top: 6px; }
.endSub { font-family: var(--sign); font-size: 12px; color: #3a352e; letter-spacing: 0.05em; margin: 8px 0 18px; }
.endStats { display: flex; justify-content: center; gap: clamp(14px, 4vw, 34px); margin-bottom: 12px; }
.endStats > div { display: flex; flex-direction: column; gap: 2px; }
.statLabel { font-size: 9px; letter-spacing: 0.16em; color: var(--grey); }
.endStats span:last-child { font-family: var(--sign); font-weight: 700; font-size: 19px; }
.endBoard { font-family: var(--sign); font-size: 10px; letter-spacing: 0.1em; color: #3a352e; min-height: 14px; margin-bottom: 14px; line-height: 1.8; }
.endBoard b { color: var(--ink); }

/* ---------------- touch ---------------- */

#touch {
  position: fixed; inset: 0; z-index: 15; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 calc(14px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
}
.touchMove, .touchAct { display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.tbtn {
  pointer-events: auto;
  border: 2.5px solid var(--ink);
  background: rgba(239,230,210,0.62);
  color: var(--ink);
  font-family: var(--sign);
  width: 58px; height: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  touch-action: none; cursor: pointer; padding: 0;
  box-shadow: 0 2px 0 rgba(20,18,16,0.18);
}
.tbtn.arrow { border-radius: 50%; font-size: 30px; font-weight: 500; line-height: 1; }
.tbtn.jump { border-radius: 50%; font-size: 24px; }
.tbtn.act {
  border-radius: 50%;
  width: 66px; height: 66px;
  background: rgba(239,230,210,0.72);
}
.tbtn.act .tKanji { font-family: var(--kanji); font-size: 22px; line-height: 1; }
.tbtn.act .tLabel { font-family: var(--sign); font-size: 8px; letter-spacing: 0.12em; margin-top: 2px; }
.tbtn.act.heavy { width: 62px; height: 62px; }
.tbtn.act.special { width: 60px; height: 60px; }
.tbtn.act.special.ready { background: var(--ink); color: var(--paper); animation: readyPulse 1.1s ease-in-out infinite; }
@keyframes readyPulse { 50% { transform: scale(1.06); } }
.tbtn.pressed, .tbtn:active { background: rgba(20,18,16,0.82); color: var(--paper); }
.tbtn.act.special.ready.pressed { background: var(--paper); color: var(--ink); }

/* ---------------- fx ---------------- */

#flash { position: fixed; inset: 0; background: var(--paper); opacity: 0; pointer-events: none; z-index: 7; }
#flash.on { animation: flashOut 0.32s ease-out; }
@keyframes flashOut { 0% { opacity: 0.85; } 100% { opacity: 0; } }
#whiteout { position: fixed; inset: 0; background: var(--paper); opacity: 0; pointer-events: none; z-index: 8; transition: opacity 0.18s ease; }
#whiteout.on { opacity: 0.34; }
#drawline {
  position: fixed; left: -5%; top: 46%; width: 110%; height: 110px;
  background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;
  z-index: 18; pointer-events: none;
  transform: scaleX(0) rotate(-2.5deg); transform-origin: left center;
  filter: drop-shadow(0 0 14px rgba(215,38,30,0.55));
  opacity: 0.98;
}
#drawline.fire { animation: lineFire 0.42s cubic-bezier(0.15, 0.85, 0.25, 1) both; }
@keyframes lineFire {
  0% { transform: scaleX(0) rotate(-2.5deg); }
  60% { transform: scaleX(1) rotate(-2.5deg); }
  100% { transform: scaleX(1) rotate(-2.5deg); opacity: 0; }
}

#loader {
  position: fixed; inset: 0; z-index: 60;
  background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 0.5s ease;
}
#loader.gone { opacity: 0; pointer-events: none; }
.loaderKanji { font-family: var(--kanji); font-size: 64px; animation: inkBreathe 1.6s ease-in-out infinite; }
@keyframes inkBreathe { 50% { opacity: 0.45; transform: scale(1.05); } }
.loaderText { margin-top: 10px; font-family: var(--sign); font-size: 10px; letter-spacing: 0.3em; color: var(--grey); }

/* ---------------- responsive ---------------- */


@media (orientation: landscape) and (min-width: 640px) {
  #titleScreen {
    display: block;
    background: linear-gradient(90deg, rgba(239,230,210,0.97) 0%, rgba(239,230,210,0.93) 31%, rgba(239,230,210,0.44) 55%, rgba(239,230,210,0.04) 80%);
  }
  .titleTop { position: absolute; left: 6vw; top: 9vh; width: 46vw; align-items: flex-start; text-align: left; }
  .titleBottom { position: absolute; left: 6vw; bottom: 6vh; width: 46vw; align-items: flex-start; text-align: left; }
  .titleGap { display: none; }
  .titleInk { left: 24%; top: 50%; width: 48vw; height: 36vh; opacity: 0.11; }
  .titleKanji { font-size: clamp(14px, 1.5vw, 20px); letter-spacing: 0.3em; }
  .titleBrush { font-size: clamp(44px, 6.8vw, 92px); line-height: 0.84; }
  .titleRule { width: 34vw; margin: 10px 0 6px; height: 6px; }
  .titleSign { font-size: clamp(9px, 0.9vw, 12px); }
  .titleBlurb { margin: 0 0 12px; font-size: clamp(10px, 1.1vw, 13px); max-width: 38vw; }
  .titleBottom .brushBtn { padding: 12px 26px; min-width: 200px; font-size: 12px; }
  .titleControls { margin-top: 12px; font-size: 9px; max-width: 42vw; text-align: left; }
  .titleBoard { margin-top: 8px; text-align: left; }
  .titleFoot { text-align: left; }
}

@media (max-width: 700px) {
  #leftHud { width: 52vw; }
  #rightHud { max-width: 40vw; top: calc(56px + env(safe-area-inset-top)); }
  #stageName { font-size: 15px; letter-spacing: 0.07em; }
  #stageSub { font-size: 9px; letter-spacing: 0.14em; }
  #objective { font-size: 8px; letter-spacing: 0.08em; }
  .signageTag { display: none; }
  #comboWrap { top: 32%; right: calc(11vw + env(safe-area-inset-right)); min-width: 100px; }
  .tbtn { width: 54px; height: 54px; }
  .tbtn.act { width: 62px; height: 62px; }
  .tbtn.act.heavy { width: 58px; height: 58px; }
  .tbtn.act.special { width: 56px; height: 56px; }
  .touchMove, .touchAct { gap: 7px; }
  #helpBtn, #pauseBtn { width: 30px; height: 30px; font-size: 12px; }
  #helpBtn { right: calc(52px + env(safe-area-inset-right)); }
  .titleBlurb { font-size: 11px; }
  .titleControls { font-size: 9px; max-width: 90vw; }
}

@media (max-height: 520px) and (orientation: landscape) {
  #titleScreen { padding-top: 10px; padding-bottom: 8px; }
  .titleKanji { display: none; }
  .titleBrush { font-size: clamp(38px, 8vh, 62px); }
  .titleRule { margin: 8px 0 5px; height: 6px; }
  .titleBlurb { display: none; }
  .titleControls { margin-top: 8px; font-size: 9px; }
  .titleFoot { display: none; }
  .titleBoard { margin-top: 6px; }
  .brushBtn { padding: 10px 24px; }
  #leftHud { width: 34vw; }
  .healthWrap { height: 20px; }
  #hpbar { height: 14px; }
  .meterRow { margin-top: 2px; }
  #meter { width: 24px; height: 34px; }
  #comboWrap { top: 30%; }
  #comboNum { font-size: 66px; }
  .tbtn { width: 48px; height: 48px; }
  .tbtn.act { width: 54px; height: 54px; }
  .tbtn.act.heavy { width: 50px; height: 50px; }
  .tbtn.act.special { width: 48px; height: 48px; }
  .tbtn.act .tKanji { font-size: 18px; }
  .tbtn.act .tLabel { font-size: 7px; }
}

@media (max-width: 430px) and (orientation: portrait) {
  #leftHud { width: 55vw; }
  #rightHud { max-width: 38vw; }
  #objective { display: none; }
  #scoreRow { font-size: 9px; }
  #comboWrap { top: 26%; right: calc(10vw + env(safe-area-inset-right)); }
  .titleBrush { font-size: clamp(46px, 15vw, 66px); }
  .titleControls { max-width: 92vw; }
  .endStats { gap: 14px; }
}