:root {
  color-scheme: dark;
  --ink: #f8f4df;
  --panel: #f7efff;
  --rim: #fff19f;
  --accent: #9ee8ff;
  --danger: #ff8db7;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

html {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

/* iPhone のホーム画面アプリでは、ページの高さがステータスバーのぶんだけ短くなり、
   下にすき間ができる。そのぶんページをのばして、画面の下はしまで使えるようにする */
@media (display-mode: standalone) {
  html {
    min-height: calc(100% + env(safe-area-inset-top));
  }
}

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: #eee7ff;
  color: var(--ink);
  font-family: "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

.shell {
  --hud-space: 72px;
  width: min(100vw, 1440px);
  height: 100dvh;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-content: center;
  --comm-h: 0px;
}

.game-wrap {
  position: relative;
  justify-self: center;
  width: min(100%, calc((100dvh - var(--hud-space) - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))) * 16 / 9));
  max-height: calc(100dvh - var(--hud-space) - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)));
  aspect-ratio: 16 / 9;
  border: 4px solid #ffffff;
  border-radius: 8px;
  overflow: hidden;
  background: #d9ccff;
  box-shadow: 0 18px 48px rgba(129, 121, 198, 0.34);
  touch-action: none;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
  touch-action: none;
}

.fullscreen-button {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 12;
  min-width: 86px;
  padding: 8px 12px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  background: rgba(158, 232, 255, 0.88);
  color: #0b1630;
  font-size: 0.86rem;
  box-shadow: 0 4px 0 rgba(56, 104, 155, 0.88);
}

.install-hint {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 10;
  width: min(92%, 720px);
  transform: translateX(-50%);
  padding: 12px 16px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 8px;
  background: rgba(37, 31, 76, 0.92);
  color: #ffffff;
  font-weight: 800;
  text-align: center;
  line-height: 1.45;
  box-shadow: 0 12px 34px rgba(24, 18, 65, 0.34);
}

.install-hint.hidden {
  display: none;
}

.shell:fullscreen {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
}

.game-wrap:fullscreen {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
}

.shell:fullscreen .fullscreen-button,
.game-wrap:fullscreen .fullscreen-button {
  background: rgba(255, 241, 159, 0.88);
}

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(6px, 1.4vh, 12px);
  text-align: center;
  padding: clamp(12px, 2.6vh, 24px);
  background: radial-gradient(ellipse at 50% 42%, rgba(60, 44, 130, 0.5) 0%, rgba(60, 44, 130, 0.16) 58%, rgba(40, 26, 96, 0.42) 100%);
}

.language-switch {
  justify-self: center;
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(20, 24, 48, 0.52);
}

.language-switch button,
.control-switch button {
  min-width: 86px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  box-shadow: none;
  font-size: 0.92rem;
}

.language-switch button.active,
.control-switch button.active {
  background: var(--accent);
  color: #0b1630;
}

.control-switch {
  justify-self: center;
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  border: 2px solid rgba(255, 255, 255, 0.62);
  border-radius: 8px;
  background: rgba(20, 24, 48, 0.42);
}

.overlay.hidden {
  display: none;
}

.brand-logo {
  justify-self: center;
  width: min(64vw, 500px);
  max-height: min(142px, 24vh);
  object-fit: contain;
  filter: drop-shadow(0 8px 0 rgba(98, 96, 219, 0.55)) drop-shadow(0 16px 18px rgba(0, 0, 0, 0.35));
}

.game-title {
  margin: 0;
  font-size: clamp(1.7rem, 5.2vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: 0;
  color: #fff3a4;
  paint-order: stroke fill;
  -webkit-text-stroke: clamp(4px, 0.9vw, 10px) #8587ff;
  text-shadow:
    0 5px 0 #8587ff,
    0 9px 0 #ffffff,
    0 14px 18px rgba(0, 0, 0, 0.34);
}

.game-title::first-letter {
  color: #c9f6ff;
}

.overlay p {
  margin: 0;
  font-size: clamp(0.95rem, 2.4vw, 1.25rem);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.42);
}

button {
  justify-self: center;
  min-width: 132px;
  border: 0;
  border-radius: 8px;
  padding: 12px 20px;
  background: var(--accent);
  color: #0b1630;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 5px 0 #38689b;
}

button:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #38689b;
}

.touch-controls {
  position: fixed;
  inset: 0;
  z-index: 11;
  display: none;
  justify-content: space-between;
  pointer-events: none;
  touch-action: none;
}

.touch-side {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: max(120px, calc((100vw - min(100vw, calc((100dvh - 72px) * 16 / 9))) / 2));
  min-width: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 10px;
  pointer-events: none;
}

.touch-side-left {
  left: max(0px, env(safe-area-inset-left));
}

.touch-side-right {
  right: max(0px, env(safe-area-inset-right));
}

.touch-dpad {
  position: relative;
  width: 136px;
  height: 136px;
  pointer-events: none;
}

.touch-actions {
  position: relative;
  width: 150px;
  height: 176px;
  pointer-events: none;
}

.touch-button,
.touch-action,
.touch-small,
.touch-shoulder {
  pointer-events: auto;
  min-width: 56px;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.38);
  border-radius: 8px;
  background: rgba(34, 36, 40, 0.68);
  color: var(--ink);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
  font-size: 1.5rem;
  touch-action: none;
}

.touch-button {
  position: absolute;
}

.touch-button.up {
  left: 40px;
  top: 0;
}

.touch-button.left {
  left: 0;
  top: 40px;
}

.touch-button.down {
  left: 40px;
  top: 80px;
}

.touch-button.right {
  left: 80px;
  top: 40px;
}

.touch-action {
  position: absolute;
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 50%;
  background: rgba(42, 46, 70, 0.72);
  font-size: 1.35rem;
}

.touch-action.jump {
  left: 43px;
  bottom: 0;
  background: rgba(158, 232, 255, 0.7);
  color: #0b1630;
}

.touch-action.y {
  left: 43px;
  top: 0;
  background: rgba(255, 241, 159, 0.76);
  color: #0b1630;
}

.touch-action.shoot {
  left: 0;
  top: 56px;
}

.touch-action.run {
  right: 0;
  top: 56px;
}

.touch-top-group {
  display: grid;
  gap: 12px;
  justify-items: center;
  pointer-events: none;
}

.touch-shoulder {
  width: 86px;
  min-width: 86px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 241, 159, 0.76);
  color: #3f3769;
  font-size: 1rem;
}

.touch-small {
  width: 78px;
  min-width: 78px;
  height: 40px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0;
}

.hud {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 8px 12px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 8px 24px rgba(129, 121, 198, 0.18);
  font-size: clamp(0.78rem, 1.65vw, 1.05rem);
  font-weight: 700;
  color: #4d4773;
}

.hud span {
  min-width: 84px;
}

.hud strong {
  color: #f5b51b;
  -webkit-text-stroke: 1px #ffffff;
  text-shadow:
    0 2px 0 #6b559a,
    0 0 6px rgba(255, 255, 255, 0.9);
}

.hp-wrap {
  margin-left: auto;
  text-align: right;
}

#lifeCount {
  display: inline-block;
  min-width: 72px;
  color: #ffd85a;
  font-size: 1.35em;
  letter-spacing: 2px;
  -webkit-text-stroke: 1px #ffffff;
  text-shadow:
    0 2px 0 #8b6ac9,
    0 0 8px rgba(255, 255, 255, 0.95);
}

@media (max-width: 560px) {
  .shell {
    height: 100dvh;
    padding: 8px;
  }

  .hud {
    flex-wrap: wrap;
  }

  .touch-controls {
    display: flex;
  }

  body[data-control-mode="pc"] .touch-controls {
    display: none;
  }

  .brand-logo {
    width: min(86vw, 420px);
    max-height: 104px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  body {
    align-items: start;
  }

  .shell {
    --hud-space: 48px;
    width: min(100vw, calc((100dvh - var(--hud-space)) * 16 / 9 + 220px));
    padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }

  .game-wrap {
    width: min(calc(100vw - 220px), calc((100dvh - var(--hud-space) - 8px) * 16 / 9));
    max-height: calc(100dvh - var(--hud-space) - 8px);
  }

  .overlay {
    gap: 4px;
    padding: 8px 90px 10px;
  }

  .language-switch,
  .control-switch {
    padding: 4px;
  }

  .language-switch button,
  .control-switch button {
    min-width: 72px;
    padding: 6px 10px;
    font-size: 0.8rem;
  }

  .brand-logo {
    width: min(50vw, 360px);
    max-height: 96px;
  }

  .game-title {
    font-size: clamp(1.35rem, 5.2vh, 2.2rem);
    -webkit-text-stroke: 2px #8587ff;
    text-shadow:
      0 3px 0 #8587ff,
      0 5px 0 #ffffff,
      0 9px 12px rgba(0, 0, 0, 0.3);
  }

  .overlay p {
    font-size: 0.82rem;
  }

  #startButton {
    min-width: 108px;
    padding: 8px 18px;
    font-size: 0.9rem;
  }

  .hud {
    margin-top: 4px;
    padding: 5px 8px;
    gap: 8px;
  }

  .touch-controls {
    display: flex;
  }

  .touch-button {
    width: 50px;
    height: 50px;
    min-width: 50px;
  }

  .touch-side {
    top: max(8px, env(safe-area-inset-top));
    bottom: max(6px, env(safe-area-inset-bottom));
    width: max(104px, calc((100vw - min(calc(100vw - 220px), calc((100dvh - var(--hud-space) - 8px) * 16 / 9))) / 2));
    min-width: 104px;
    padding: 0 6px;
  }

  .touch-dpad {
    width: 126px;
    height: 126px;
  }

  .touch-button.up {
    left: 38px;
  }

  .touch-button.left {
    top: 38px;
  }

  .touch-button.down {
    left: 38px;
    top: 76px;
  }

  .touch-button.right {
    left: 76px;
    top: 38px;
  }

  .touch-action {
    width: 54px;
    height: 54px;
    min-width: 54px;
  }

  .touch-actions {
    width: 128px;
    height: 160px;
  }

  .touch-action.jump {
    left: 37px;
    bottom: 0;
  }

  .touch-action.y {
    left: 37px;
    top: 0;
  }

  .touch-action.shoot {
    left: 0;
    top: 53px;
  }

  .touch-action.run {
    right: 0;
    top: 53px;
  }

  .touch-small {
    width: 70px;
    min-width: 70px;
    height: 34px;
    font-size: 0.66rem;
  }

  .touch-shoulder {
    width: 76px;
    min-width: 76px;
    height: 34px;
    font-size: 0.86rem;
  }

  .touch-top-group {
    gap: 8px;
  }

  .fullscreen-button {
    min-width: 82px;
    padding: 6px 10px;
    font-size: 0.78rem;
    top: max(86px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
  }

  .install-hint {
    bottom: max(8px, env(safe-area-inset-bottom));
    padding: 9px 12px;
    font-size: 0.82rem;
  }
}

body:not([data-game-mode="playing"]):not([data-game-mode="respawning"]) .touch-controls {
  display: none;
}

body[data-control-mode="pc"] .touch-controls,
body[data-overlay-open="true"][data-control-mode="pc"] .touch-controls {
  display: none !important;
}

body[data-control-mode="mobile"][data-game-mode="playing"] .touch-controls,
body[data-control-mode="mobile"][data-game-mode="respawning"] .touch-controls,
body[data-control-mode="mobile"][data-overlay-open="true"] .touch-controls {
  display: flex;
}

/* ---------- タイトル画面 ---------- */
.brand-logo {
  animation: logo-float 3.6s ease-in-out infinite;
}

@keyframes logo-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

.title-sub {
  margin-top: -2px;
  padding: 4px 18px;
  border-radius: 999px;
  background: rgba(255, 141, 183, 0.88);
  border: 2px solid #ffffff;
  color: #ffffff;
  font-weight: 900;
  font-size: clamp(0.82rem, 2vw, 1.15rem);
  letter-spacing: 0.06em;
  box-shadow: 0 4px 0 rgba(127, 103, 200, 0.6);
}

.brand-logo.title-logo {
  width: min(72vw, 620px);
  max-height: min(330px, 46vh);
  filter: drop-shadow(0 10px 18px rgba(40, 24, 96, 0.4));
}

.game-title.hidden {
  display: none;
}

.title-sub.hidden,
.ghost-button.hidden {
  display: none;
}

.title-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

/* 上から「はじめから」「つづきから」。音のボタンは画面の右はしへ */
.title-actions #newGameButton {
  order: 0;
}

.title-actions #startButton {
  order: 1;
}

.title-actions #soundButton {
  position: absolute;
  right: 12px;
  bottom: 12px;
}

.title-actions #settingsButton {
  order: 2;
  min-width: 150px;
  padding: 8px 20px;
  font-size: 1rem;
}

.title-actions #settingsButton.is-focused {
  background: rgba(255, 255, 255, 0.92);
  color: #5a3d9a;
  border-color: #ffd85a;
  box-shadow: 0 0 0 3px #ffd85a, 0 4px 0 rgba(40, 26, 96, 0.5);
}

/* 十字キーで選んでいるボタン */
.title-actions #newGameButton.is-focused {
  background: rgba(255, 255, 255, 0.92);
  color: #5a3d9a;
  border-color: #ffd85a;
  box-shadow: 0 0 0 3px #ffd85a, 0 4px 0 rgba(40, 26, 96, 0.5);
}

.title-actions #startButton:not(.is-focused) {
  animation: none;
  filter: saturate(0.55) brightness(0.92);
}

.touch-controls,
.touch-controls * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.primary-button {
  min-width: 190px;
  padding: 14px 28px;
  font-size: 1.2rem;
  background: linear-gradient(180deg, #fff7b8, #ffd85a);
  color: #5a3d9a;
  border: 3px solid #ffffff;
  box-shadow: 0 6px 0 #c98a12, 0 12px 22px rgba(0, 0, 0, 0.25);
  animation: start-pulse 1.5s ease-in-out infinite;
}

.primary-button:active {
  box-shadow: 0 2px 0 #c98a12;
}

@keyframes start-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.ghost-button {
  min-width: 0;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.24);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 0 rgba(40, 26, 96, 0.5);
  font-size: 0.92rem;
}

@media (orientation: landscape) and (max-height: 520px) {
  .primary-button {
    min-width: 140px;
    padding: 8px 18px;
    font-size: 0.95rem;
  }

  .ghost-button {
    padding: 6px 12px;
    font-size: 0.8rem;
  }

  .title-sub {
    padding: 2px 12px;
    font-size: 0.72rem;
  }
}

/* ---------- そうび＋会話パネル ---------- */
.comm-panel {
  display: none;
  grid-template-columns: minmax(250px, 34%) 1fr;
  gap: 10px;
  height: var(--comm-h);
  margin-top: 10px;
  min-height: 0;
}

body[data-comm="on"] .comm-panel {
  display: grid;
}

body[data-game-mode="title"] .comm-panel,
body[data-game-mode="cutscene"] .comm-panel,
body[data-game-mode="credits"] .comm-panel,
body[data-game-mode="movie"] .comm-panel {
  opacity: 0;
  pointer-events: none;
}

.comm-weapon,
.comm-chat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 14px;
  border: 3px solid #ffffff;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 239, 255, 0.92));
  box-shadow: 0 8px 22px rgba(129, 121, 198, 0.24);
  color: #4d4773;
  overflow: hidden;
}

.comm-buttons {
  flex: 0 0 auto;
  display: grid;
  gap: 6px;
}

.comm-button {
  min-width: 0;
  padding: 8px 12px;
  border: 2px solid #ffffff;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff7b8, #ffd85a);
  color: #5a3d9a;
  font-size: 0.8rem;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 3px 0 #c98a12;
}

.comm-button:active {
  box-shadow: 0 1px 0 #c98a12;
}

.comm-button-sub {
  background: linear-gradient(180deg, #e9fbff, #9ee8ff);
  color: #24507a;
  box-shadow: 0 3px 0 #38689b;
}

.comm-label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px 12px 3px;
  border-radius: 0 0 12px 0;
  background: #9ee8ff;
  color: #24507a;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.comm-weapon img {
  flex: 0 0 auto;
  width: clamp(64px, 9vw, 104px);
  height: clamp(54px, 7.5vw, 88px);
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(90, 70, 160, 0.35));
  animation: weapon-bob 2.4s ease-in-out infinite;
}

@keyframes weapon-bob {
  0%, 100% { transform: translateY(2px) rotate(-3deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
}

.comm-weapon-info {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
  padding-top: 10px;
}

.comm-weapon-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.comm-weapon-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  color: #7f67c8;
  font-size: clamp(0.9rem, 1.7vw, 1.15rem);
}

.comm-weapon-title span {
  color: #ff5f9e;
  font-weight: 900;
  font-size: 0.95rem;
}

.comm-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 8px;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #8b82b3;
}

.comm-stats i {
  display: block;
  height: 7px;
  border-radius: 99px;
  background: rgba(200, 178, 255, 0.4);
  overflow: hidden;
}

.comm-stats b {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #9ee8ff, #ff8db7);
  transition: width 0.35s ease;
}

.comm-hint {
  font-size: 0.72rem;
  font-weight: 800;
  color: #9a8fc0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comm-hint-hot {
  color: #ff5f9e;
  animation: hint-blink 0.9s ease-in-out infinite;
}

@keyframes hint-blink {
  50% { opacity: 0.45; }
}

.comm-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(58px, 8vw, 92px);
  aspect-ratio: 1;
  border: 4px solid #7f67c8;
  border-radius: 50%;
  background: #ffffff center / cover no-repeat;
  box-shadow: 0 4px 0 rgba(127, 103, 200, 0.3);
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  font-weight: 900;
}

.comm-avatar[data-speaker="pyon"] {
  /* 小さな顔の絵（スマホでも軽い） */
  background-image: url("assets/avatar-pyonpy.webp");
  background-size: cover;
  background-position: center;
  background-color: #efe6ff;
}

.comm-bubble {
  position: relative;
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 14px;
  background: #ffffff;
  border: 2px solid rgba(200, 178, 255, 0.8);
}

.comm-bubble strong {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.comm-bubble p {
  margin: 0;
  min-height: 2.6em;
  color: #3f355d;
  font-weight: 800;
  font-size: clamp(0.88rem, 1.7vw, 1.1rem);
  line-height: 1.35;
  text-shadow: none;
}

.comm-pop .comm-avatar {
  animation: avatar-pop 0.32s ease-out;
}

@keyframes avatar-pop {
  0% { transform: scale(0.8) rotate(-8deg); }
  60% { transform: scale(1.12) rotate(4deg); }
  100% { transform: scale(1); }
}

/* ---------- タッチ操作（共通）：十字キーとボタンのまとまりで指の位置を受ける ---------- */
.gb-screen {
  display: contents;
}

.gb-guide,
.gb-frame-art,
.gb-controls-art,
.gb-status,
.dpad-cap {
  display: none;
}

.touch-dpad,
.touch-actions {
  pointer-events: auto;
  touch-action: none;
}

.touch-button,
.touch-action {
  pointer-events: none;
}

.touch-button.is-pressed,
.touch-action.is-pressed,
.touch-small.is-pressed,
.touch-shoulder.is-pressed {
  transform: translateY(3px);
  filter: brightness(1.35);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 0 14px rgba(158, 232, 255, 0.8);
}

/* ---------- 携帯ゲーム機レイアウト（スマホ・タブレットのたて持ち） ---------- */
body[data-layout="handheld"] {
  background: #e7dcf3;
}

body[data-layout="handheld"] .shell {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  padding: 0;
  display: block;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #f6effd 0%, #e3d6f2 60%, #d3c3ec 100%);
}

body[data-layout="handheld"] .fullscreen-button {
  display: none;
}

body[data-layout="handheld"] .gb-screen {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: var(--gb-x);
  top: var(--gb-y);
  width: calc(898 * var(--u));
  height: var(--gb-screen-h);
  /* 画面は本体の絵の穴（729）より広い 858。左右のふちの上まで広げて、ゲーム画面を大きく見せる */
  padding: calc(123 * var(--u)) calc(20 * var(--u)) calc(65 * var(--u)) calc(20 * var(--u));
}

body[data-layout="handheld"] .gb-screen::before {
  content: "";
  position: absolute;
  inset: calc(115 * var(--u)) calc(12 * var(--u)) calc(57 * var(--u)) calc(12 * var(--u));
  z-index: 1;
  border: calc(8 * var(--u)) solid #171031;
  border-radius: calc(36 * var(--u));
  background: linear-gradient(180deg, #2b2050, #171031);
  box-shadow: 0 0 0 calc(3 * var(--u)) rgba(200, 178, 255, 0.85), 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(60, 40, 110, 0.35);
}

/* 画面の枠：上・まん中（たてにのばす）・下の3枚で描く */
body[data-layout="handheld"] .gb-frame-art {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    url("assets/gb-frame-top.webp") top center / 100% calc(160 * var(--u)) no-repeat,
    url("assets/gb-frame-bot.webp") bottom center / 100% calc(100 * var(--u)) no-repeat,
    url("assets/gb-frame-mid.webp") center / 100% calc(100% - 258 * var(--u)) no-repeat;
}

body[data-layout="handheld"] .game-wrap {
  position: relative;
  z-index: 1;
  flex: none;
  width: 100%;
  max-height: none;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: calc(26 * var(--u)) calc(26 * var(--u)) 0 0;
  overflow: hidden;
  box-shadow: none;
}

body[data-layout="handheld"] .hud {
  position: relative;
  z-index: 1;
  order: 2;
  flex: none;
  height: calc(46 * var(--u));
  margin: 0;
  padding: 0 calc(16 * var(--u));
  gap: calc(10 * var(--u));
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  color: #e6dcfb;
  font-size: calc(20 * var(--u));
}

body[data-layout="handheld"] .hud span {
  min-width: 0;
}

body[data-layout="handheld"] .hud strong {
  -webkit-text-stroke: 0;
  text-shadow: none;
  color: #ffe27a;
}

body[data-layout="handheld"] #scoreLabel {
  display: none;
}

body[data-layout="handheld"] #lifeCount {
  min-width: 0;
  font-size: 1.2em;
  letter-spacing: 1px;
}

/* 会話とそうび */
body[data-layout="handheld"] .comm-panel {
  position: relative;
  z-index: 1;
  order: 3;
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  margin: 0;
  display: none;
  flex-direction: column;
  gap: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u));
}

body[data-layout="handheld"][data-comm="on"] .comm-panel {
  display: flex;
}

body[data-layout="handheld"][data-game-mode="title"] .comm-panel,
body[data-layout="handheld"][data-game-mode="cutscene"] .comm-panel,
body[data-layout="handheld"][data-game-mode="credits"] .comm-panel,
body[data-layout="handheld"][data-game-mode="movie"] .comm-panel {
  display: none;
}

body[data-layout="handheld"] .comm-weapon,
body[data-layout="handheld"] .comm-chat {
  gap: calc(14 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border-width: calc(4 * var(--u));
  border-radius: calc(22 * var(--u));
  box-shadow: none;
}

body[data-layout="handheld"] .comm-chat {
  order: 1;
  flex: 1 1 0;
  min-height: 0;
}

body[data-layout="handheld"] .comm-weapon {
  order: 2;
  flex: none;
  height: calc(92 * var(--u));
}

body[data-layout="handheld"][data-comm-size="chat"] .comm-weapon,
body[data-layout="handheld"] .comm-buttons,
body[data-layout="handheld"] .comm-stats {
  display: none;
}

body[data-layout="handheld"] .comm-label {
  padding: calc(1 * var(--u)) calc(12 * var(--u)) calc(2 * var(--u));
  border-radius: 0 0 calc(12 * var(--u)) 0;
  font-size: calc(15 * var(--u));
}

body[data-layout="handheld"] .comm-weapon img {
  width: calc(96 * var(--u));
  height: calc(70 * var(--u));
}

body[data-layout="handheld"] .comm-weapon-info {
  gap: 0;
  padding-top: calc(12 * var(--u));
}

body[data-layout="handheld"] .comm-weapon-title strong {
  font-size: calc(24 * var(--u));
}

body[data-layout="handheld"] .comm-weapon-title span {
  font-size: calc(21 * var(--u));
}

body[data-layout="handheld"] .comm-hint {
  font-size: calc(19 * var(--u));
}

body[data-layout="handheld"] .comm-avatar {
  width: calc(88 * var(--u));
  border-width: calc(5 * var(--u));
  font-size: calc(40 * var(--u));
}

body[data-layout="handheld"] .comm-bubble {
  padding: calc(5 * var(--u)) calc(14 * var(--u));
  border-width: calc(3 * var(--u));
  border-radius: calc(18 * var(--u));
  overflow: hidden;
}

body[data-layout="handheld"] .comm-bubble strong {
  font-size: calc(20 * var(--u));
}

body[data-layout="handheld"] .comm-bubble p {
  min-height: 0;
  font-size: calc(25 * var(--u));
  line-height: 1.3;
}

/* タイトルや会話シーンでは、ボタンの説明を出す */
body[data-layout="handheld"][data-comm="on"][data-game-mode="title"] .gb-guide,
body[data-layout="handheld"][data-comm="on"][data-game-mode="credits"] .gb-guide,
body[data-layout="handheld"][data-comm="on"][data-game-mode="movie"] .gb-guide {
  display: flex;
}

body[data-layout="handheld"] .gb-guide {
  position: relative;
  z-index: 1;
  order: 3;
  flex: 1 1 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u));
  color: #efe8ff;
  font-size: calc(23 * var(--u));
  font-weight: 800;
  overflow: hidden;
}

.gb-guide-title,
.gb-guide-story {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u)) calc(22 * var(--u));
}

.gb-guide span {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  white-space: nowrap;
}

body[data-game-mode="title"] .gb-guide-title,
body[data-game-mode="cutscene"] .gb-guide-story,
body[data-game-mode="credits"] .gb-guide-story {
  display: flex;
}

.gb-chip {
  display: inline-grid;
  place-items: center;
  min-width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  padding: 0 calc(6 * var(--u));
  border-radius: 999px;
  color: #2b2050;
  font-size: calc(21 * var(--u));
  font-weight: 900;
  background: #ffffff;
}

.gb-chip.a { background: #ffb3d0; }
.gb-chip.b { background: #aaf0d0; }
.gb-chip.x { background: #cdb6ff; }
.gb-chip.y { background: #a9dcff; }
.gb-chip.pill { padding: 0 calc(12 * var(--u)); font-size: calc(17 * var(--u)); }

/* タイトルなどの重ね表示を小さい画面に合わせる */
body[data-layout="handheld"] .overlay {
  gap: calc(10 * var(--u));
  padding: calc(14 * var(--u));
}

body[data-layout="handheld"] .control-switch,
body[data-layout="handheld"][data-game-mode="title"] .overlay p {
  display: none;
}

body[data-layout="handheld"] .language-switch {
  position: absolute;
  top: calc(12 * var(--u));
  right: calc(12 * var(--u));
  gap: calc(4 * var(--u));
  padding: calc(4 * var(--u));
  border-width: 1px;
}

body[data-layout="handheld"] .language-switch button {
  min-width: 0;
  padding: calc(6 * var(--u)) calc(14 * var(--u));
  font-size: calc(19 * var(--u));
}

body[data-layout="handheld"] .brand-logo {
  width: auto;
  max-width: 60%;
  max-height: calc(170 * var(--u));
}

body[data-layout="handheld"] .brand-logo.title-logo {
  max-width: 66%;
  max-height: calc(250 * var(--u));
}

body[data-layout="handheld"] .game-title {
  font-size: calc(60 * var(--u));
  -webkit-text-stroke: calc(6 * var(--u)) #8587ff;
  text-shadow: 0 calc(4 * var(--u)) 0 #8587ff, 0 calc(7 * var(--u)) 0 #ffffff;
}

body[data-layout="handheld"] .overlay p {
  font-size: calc(23 * var(--u));
}

body[data-layout="handheld"] .title-actions {
  gap: calc(12 * var(--u));
}

body[data-layout="handheld"] .title-actions #soundButton {
  right: calc(12 * var(--u));
  bottom: calc(12 * var(--u));
}

body[data-layout="handheld"] .title-actions #newGameButton {
  min-width: calc(230 * var(--u));
  font-size: calc(26 * var(--u));
}

/* せっていボタンは小さめ（3つめのボタン） */
body[data-layout="handheld"] .title-actions #settingsButton {
  min-width: calc(170 * var(--u));
  padding: calc(5 * var(--u)) calc(16 * var(--u));
  font-size: calc(19 * var(--u));
}

body[data-layout="handheld"] .title-actions {
  gap: calc(9 * var(--u));
}

body[data-layout="handheld"] .primary-button {
  min-width: calc(230 * var(--u));
  padding: calc(12 * var(--u)) calc(28 * var(--u));
  border-width: 2px;
  font-size: calc(30 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) 0 #c98a12;
}

body[data-layout="handheld"] .ghost-button {
  padding: calc(9 * var(--u)) calc(16 * var(--u));
  border-width: 1px;
  font-size: calc(21 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) 0 rgba(40, 26, 96, 0.5);
}

/* 本体の下半分 */
body[data-layout="handheld"] .touch-controls {
  display: block !important;
  position: absolute;
  inset: auto;
  left: var(--gb-x);
  top: calc(var(--gb-y) + var(--gb-screen-h) - 4 * var(--u));
  width: calc(898 * var(--u));
  height: calc(716 * var(--u));
  z-index: 4;
}

body[data-layout="handheld"] .gb-controls-art {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: url("assets/gb-controls.webp") center / 100% 100% no-repeat;
}

body[data-layout="handheld"] .gb-status {
  display: flex;
  position: absolute;
  z-index: 0;
  left: calc(298 * var(--u));
  top: calc(564 * var(--u));
  width: calc(302 * var(--u));
  height: calc(81 * var(--u));
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--u));
  border-radius: 999px;
  background: #150f30;
  color: #dff6ff;
  font-size: calc(28 * var(--u));
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 0 calc(8 * var(--u)) rgba(120, 230, 255, 0.8);
}

.gb-battery {
  position: relative;
  width: calc(46 * var(--u));
  height: calc(24 * var(--u));
  padding: calc(3 * var(--u));
  border: calc(3 * var(--u)) solid #9eefff;
  border-radius: calc(6 * var(--u));
  box-shadow: 0 0 calc(8 * var(--u)) rgba(120, 230, 255, 0.7);
}

.gb-battery[hidden] {
  display: none;
}

.gb-battery::after {
  content: "";
  position: absolute;
  right: calc(-8 * var(--u));
  top: 25%;
  width: calc(4 * var(--u));
  height: 50%;
  border-radius: 0 calc(2 * var(--u)) calc(2 * var(--u)) 0;
  background: #9eefff;
}

.gb-battery i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: calc(2 * var(--u));
  background: #9eefff;
}

.gb-battery.is-low i { background: #ff8db7; }
.gb-battery.is-charging i { background: #b6ffb0; }

.gb-wifi {
  width: calc(34 * var(--u));
  height: calc(26 * var(--u));
  fill: none;
  stroke: #9eefff;
  stroke-width: 2.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 calc(5 * var(--u)) rgba(120, 230, 255, 0.8));
}

.gb-wifi circle { fill: #9eefff; stroke: none; }
.gb-wifi.is-off { opacity: 0.3; }

body[data-layout="handheld"] .touch-side,
body[data-layout="handheld"] .touch-top-group {
  display: contents;
}

body[data-layout="handheld"] .touch-shoulder {
  display: none;
}

/* 十字キー */
body[data-layout="handheld"] .touch-dpad {
  position: absolute;
  z-index: 2;
  left: calc(43 * var(--u));
  top: calc(28 * var(--u));
  width: calc(340 * var(--u));
  height: calc(340 * var(--u));
}

body[data-layout="handheld"] .dpad-cap {
  display: block;
  position: absolute;
  left: calc(30 * var(--u));
  top: calc(30 * var(--u));
  width: calc(280 * var(--u));
  height: calc(280 * var(--u));
  background: url("assets/gb-cap-dpad.webp") center / 100% 100% no-repeat;
  transform: perspective(calc(620 * var(--u))) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 110ms ease-out;
  will-change: transform;
}

body[data-layout="handheld"] .touch-dpad.is-pressed .dpad-cap {
  transform: perspective(calc(620 * var(--u))) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(0.975);
  transition-duration: 45ms;
}

body[data-layout="handheld"] .touch-button {
  position: absolute;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: calc(30 * var(--u));
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(150, 240, 255, 0.5) 62%, rgba(150, 240, 255, 0));
  box-shadow: 0 0 calc(26 * var(--u)) calc(7 * var(--u)) rgba(110, 235, 255, 0.8);
  color: transparent;
  font-size: 0;
  opacity: 0;
  transform: none;
  filter: none;
  transition: opacity 160ms ease-out;
}

body[data-layout="handheld"] .touch-button.is-pressed {
  opacity: 1;
  transform: none;
  filter: none;
  transition-duration: 30ms;
}

body[data-layout="handheld"] .touch-button.up { left: calc(121 * var(--u)); top: calc(38 * var(--u)); width: calc(99 * var(--u)); height: calc(83 * var(--u)); }
body[data-layout="handheld"] .touch-button.down { left: calc(121 * var(--u)); top: calc(221 * var(--u)); width: calc(99 * var(--u)); height: calc(81 * var(--u)); }
body[data-layout="handheld"] .touch-button.left { left: calc(43 * var(--u)); top: calc(121 * var(--u)); width: calc(78 * var(--u)); height: calc(100 * var(--u)); }
body[data-layout="handheld"] .touch-button.right { left: calc(220 * var(--u)); top: calc(121 * var(--u)); width: calc(77 * var(--u)); height: calc(100 * var(--u)); }

/* A / B / X / Y */
body[data-layout="handheld"] .touch-actions {
  position: absolute;
  z-index: 2;
  left: calc(472.3 * var(--u));
  top: calc(-7 * var(--u));
  width: calc(400 * var(--u));
  height: calc(400 * var(--u));
}

body[data-layout="handheld"] .touch-action {
  position: absolute;
  inset: auto;
  width: calc(128 * var(--u));
  height: calc(128 * var(--u));
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  transform: none;
  filter: none;
}

body[data-layout="handheld"] .touch-action.y { left: calc(136.07 * var(--u)); top: calc(30.35 * var(--u)); --glow: #6fc8ff; --cap: url("assets/gb-cap-y.webp"); }
body[data-layout="handheld"] .touch-action.shoot { left: calc(34.32 * var(--u)); top: calc(135.75 * var(--u)); --glow: #b58cff; --cap: url("assets/gb-cap-x.webp"); }
body[data-layout="handheld"] .touch-action.run { left: calc(237.71 * var(--u)); top: calc(135.74 * var(--u)); --glow: #5fe0aa; --cap: url("assets/gb-cap-b.webp"); }
body[data-layout="handheld"] .touch-action.jump { left: calc(136.13 * var(--u)); top: calc(241.61 * var(--u)); --glow: #ff7fb5; --cap: url("assets/gb-cap-a.webp"); }

/* ボタンの下の「くぼみ」。押すと色つきで光る */
body[data-layout="handheld"] .touch-action::before,
body[data-layout="handheld"] .touch-small::before {
  content: "";
  position: absolute;
  inset: calc(6 * var(--u));
  border-radius: 999px;
  background: #241a45;
  transition: background 160ms ease-out, box-shadow 160ms ease-out;
}

body[data-layout="handheld"] .touch-action::after,
body[data-layout="handheld"] .touch-small::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cap) center / 100% 100% no-repeat;
  transition: transform 120ms ease-out, filter 120ms ease-out;
  will-change: transform;
}

body[data-layout="handheld"] .touch-action.is-pressed::before,
body[data-layout="handheld"] .touch-small.is-pressed::before {
  background: var(--glow);
  box-shadow: 0 0 calc(24 * var(--u)) calc(9 * var(--u)) var(--glow);
  transition-duration: 30ms;
}

body[data-layout="handheld"] .touch-action.is-pressed::after {
  transform: translateY(calc(3 * var(--u))) scale(0.93);
  filter: brightness(1.1) saturate(1.2);
  transition-duration: 40ms;
}

/* SELECT / START */
body[data-layout="handheld"] .touch-small {
  position: absolute;
  z-index: 3;
  top: calc(372.5 * var(--u));
  width: calc(200 * var(--u));
  height: calc(116 * var(--u));
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  transform: none;
  filter: none;
  --glow: #c58bff;
}

body[data-layout="handheld"] .touch-small[data-key="Select"] { left: calc(247.3 * var(--u)); --cap: url("assets/gb-cap-select.webp"); }
body[data-layout="handheld"] .touch-small[data-key="Enter"] { left: calc(449.5 * var(--u)); --cap: url("assets/gb-cap-start.webp"); }

body[data-layout="handheld"] .touch-small::before {
  inset: calc(28 * var(--u)) calc(21.5 * var(--u));
}

body[data-layout="handheld"] .touch-small::after {
  inset: calc(14 * var(--u)) calc(8 * var(--u));
}

body[data-layout="handheld"] .touch-small.is-pressed::after {
  transform: translateY(calc(3 * var(--u))) scale(0.95);
  filter: brightness(1.12);
  transition-duration: 40ms;
}

/* 会話シーンの吹き出し（携帯ゲーム機レイアウトでは画面の下の欄に出す） */
.gb-story {
  display: none;
}

body[data-layout="handheld"][data-comm="on"][data-game-mode="cutscene"] .gb-story,
body[data-layout="handheld"][data-comm="on"][data-game-mode="bossIntro"] .gb-story,
body[data-layout="handheld"][data-comm="on"][data-game-mode="bossOutro"] .gb-story {
  display: flex;
}

/* ボス戦の前後の会話では、下の会話の欄と銃の情報はかくして、会話シーンと同じ吹き出しだけにする */
body[data-layout="handheld"][data-game-mode="bossIntro"] .comm-panel,
body[data-layout="handheld"][data-game-mode="bossOutro"] .comm-panel {
  display: none;
}
body[data-layout="handheld"][data-game-mode="bossIntro"] .gb-story-skip,
body[data-layout="handheld"][data-game-mode="bossOutro"] .gb-story-skip {
  display: none;
}

body[data-layout="handheld"] .gb-story {
  --speaker: #c8b2ff;
  position: relative;
  z-index: 1;
  order: 3;
  flex: 1 1 0;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  gap: calc(6 * var(--u));
  margin: calc(8 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u));
  padding: calc(8 * var(--u)) calc(24 * var(--u)) calc(14 * var(--u));
  border: calc(5 * var(--u)) solid var(--speaker);
  border-radius: calc(24 * var(--u));
  background: rgba(255, 248, 253, 0.97);
  box-shadow: inset 0 0 0 calc(3 * var(--u)) #ffffff;
  color: #3f355d;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
}

body[data-layout="handheld"] .gb-story.is-narration {
  background: rgba(30, 18, 70, 0.92);
  box-shadow: none;
  color: #ffffff;
  text-align: center;
}

body[data-layout="handheld"] .gb-story.is-pop {
  animation: gb-story-pop 0.2s ease-out;
}

@keyframes gb-story-pop {
  0% { transform: translateY(calc(8 * var(--u))); opacity: 0.6; }
  100% { transform: none; opacity: 1; }
}

body[data-layout="handheld"] #gbStoryName {
  align-self: flex-start;
  padding: calc(3 * var(--u)) calc(18 * var(--u));
  border-radius: 999px;
  background: var(--speaker);
  color: #ffffff;
  font-size: calc(24 * var(--u));
  font-weight: 900;
}

body[data-layout="handheld"] .gb-story.is-narration #gbStoryName {
  display: none;
}

body[data-layout="handheld"] #gbStoryText {
  margin: 0;
  min-height: 0;
  font-size: calc(28 * var(--u));
  font-weight: 800;
  line-height: 1.38;
  text-shadow: none;
}

/* 吹き出しの中のスキップボタン（十字キーで選んで A で決定） */
.gb-story-skip { display: none; }
body[data-layout="handheld"] .gb-story-skip {
  display: block;
  position: absolute;
  top: calc(10 * var(--u));
  right: calc(16 * var(--u));
  padding: calc(4 * var(--u)) calc(16 * var(--u));
  border: calc(2 * var(--u)) solid rgba(127, 103, 200, 0.45);
  border-radius: 999px;
  background: rgba(127, 103, 200, 0.12);
  color: #7f67c8;
  font: 900 calc(18 * var(--u)) system-ui, sans-serif;
  min-width: 0;
  min-height: 0;
  line-height: 1.3;
  box-shadow: none;
  transform: none;
  cursor: pointer;
}
body[data-layout="handheld"] .gb-story.is-narration .gb-story-skip {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
}
body[data-layout="handheld"] .gb-story-skip.is-focused {
  background: #fff3a4;
  color: #5a3d9a;
  border-color: #ff8db7;
  box-shadow: 0 0 calc(12 * var(--u)) #ffd85a;
}

body[data-layout="handheld"] .gb-story-next {
  position: absolute;
  right: calc(24 * var(--u));
  bottom: calc(14 * var(--u));
  width: 0;
  height: 0;
  border-left: calc(11 * var(--u)) solid transparent;
  border-right: calc(11 * var(--u)) solid transparent;
  border-top: calc(15 * var(--u)) solid var(--speaker);
  opacity: 0;
}

body[data-layout="handheld"] .gb-story.is-narration .gb-story-next {
  border-top-color: #fff3a4;
}

body[data-layout="handheld"] .gb-story.is-done .gb-story-next {
  opacity: 1;
  animation: gb-story-next 0.9s ease-in-out infinite;
}

@keyframes gb-story-next {
  50% { transform: translateY(calc(5 * var(--u))); }
}