:root {
  color-scheme: light;
  --bg: #fff8d8;
  --play: #fffbea;
  --line: rgba(160, 120, 50, 0.1);
  --text: #4a3418;
  --muted: #775826;
  --accent: #f6c85f;
  --button: #ffe28a;
  --button-border: #c89a2b;
}

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

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 226, 138, 0.72), transparent 16rem),
    radial-gradient(circle at 86% 8%, rgba(221, 244, 255, 0.78), transparent 15rem),
    linear-gradient(180deg, #fff8d8, #fff2bf);
  color: var(--text);
  font-family: ui-rounded, "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body.settings-open {
  touch-action: auto;
  user-select: auto;
  -webkit-user-select: auto;
  -webkit-touch-callout: default;
}

button {
  font: inherit;
}

[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

.game-shell {
  width: 100vw;
  height: 100dvh;
  min-height: 480px;
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.top-bar > div:first-child {
  min-width: 0;
  flex: 0 0 auto;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

h1 {
  margin: 0;
  font-size: clamp(1.55rem, 7vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: balance;
  white-space: nowrap;
  word-break: keep-all;
  min-width: max-content;
}

.instruction,
.status-row {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 4.5vw, 1.35rem);
  font-weight: 700;
  line-height: 1.45;
  text-wrap: balance;
}

.text-chunk {
  display: inline-block;
  white-space: nowrap;
}

.status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 1.5em;
}

.feedback {
  min-width: 4.2em;
  color: #d0692f;
  white-space: nowrap;
}

.bee-count {
  color: #4a3418;
  white-space: nowrap;
}

#growButton,
#shrinkButton,
#speedButton,
#slowButton,
#gatherButton,
#fullscreenButton {
  flex: 0 0 auto;
  min-width: 96px;
  min-height: 56px;
  padding: 12px 15px;
  border: 2px solid var(--button-border);
  border-radius: 20px;
  background: var(--button);
  color: #5a3a10;
  font-size: clamp(1.05rem, 4.6vw, 1.25rem);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 6px 0 rgba(200, 154, 43, 0.28), inset 0 1px rgba(255, 255, 255, 0.7);
}

#growButton {
  background: #ffcf66;
}

#speedButton {
  background: #ffb86b;
  border-color: #d78229;
}

#slowButton {
  background: #cdeeff;
  border-color: #5da7c9;
}

#gatherButton {
  background: #ffd0e1;
  border-color: #d46c96;
}

#shrinkButton {
  background: #dff5c8;
  border-color: #8cbf54;
}

#fullscreenButton {
  display: none;
  background: #ddf4ff;
  border-color: #74b7d0;
}

#growButton:active,
#shrinkButton:active,
#speedButton:active,
#slowButton:active,
#gatherButton:active,
#fullscreenButton:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 rgba(200, 154, 43, 0.28), inset 0 1px rgba(255, 255, 255, 0.7);
  background: #ffecad;
}

button:disabled {
  opacity: 0.48;
  transform: none;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.62);
}

#gameCanvas {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  border: 4px solid var(--accent);
  border-radius: 22px;
  background: var(--play);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.62),
    0 14px 34px rgba(120, 80, 20, 0.12);
  touch-action: none;
}

.start-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(255, 248, 216, 0.9);
  backdrop-filter: blur(5px);
}

.start-modal[hidden] {
  display: none;
}

.start-panel {
  width: min(92vw, 620px);
  max-width: 100%;
  padding: clamp(30px, 7vw, 48px) clamp(24px, 7vw, 48px);
  border: 4px solid var(--accent);
  border-radius: 28px;
  background: #fffbea;
  box-shadow: 0 18px 42px rgba(120, 80, 20, 0.18), inset 0 0 0 2px rgba(255, 255, 255, 0.7);
  text-align: center;
}

.start-panel h2 {
  margin: 0 0 22px;
  max-width: 100%;
  font-size: clamp(1.65rem, 7vw, 3.35rem);
  line-height: 1.15;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.start-button,
.replace-button,
.reset-bee-button,
.crop-button,
.howto-link,
.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  min-width: 180px;
  padding: 12px 22px;
  border: 2px solid var(--button-border);
  border-radius: 22px;
  background: var(--button);
  color: #5a3a10;
  font-size: 1.25rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 0 rgba(200, 154, 43, 0.28), inset 0 1px rgba(255, 255, 255, 0.7);
}

.start-button {
  width: 100%;
  margin-bottom: 14px;
  background: #ffcf66;
}

.replace-button,
.reset-bee-button {
  width: 100%;
  margin-bottom: 14px;
}

.replace-button {
  background: #ddf4ff;
  border-color: #74b7d0;
}

.reset-bee-button {
  background: #ffd0e1;
  border-color: #d46c96;
}

.howto-link {
  width: 100%;
  background: #dff5c8;
  border-color: #8cbf54;
}

.crop-editor,
.name-input-modal,
.name-alert-modal,
.counter-modal {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(255, 248, 216, 0.94);
  backdrop-filter: blur(5px);
}

.crop-editor {
  align-items: start;
  overflow-y: auto;
  touch-action: auto;
  -webkit-overflow-scrolling: touch;
}

.crop-editor[hidden],
.name-input-modal[hidden],
.name-alert-modal[hidden],
.counter-modal[hidden] {
  display: none;
}

.name-input-modal,
.name-alert-modal,
.counter-modal {
  z-index: 320;
  background: rgba(255, 248, 216, 0.72);
}

.name-input-modal {
  align-items: start;
  overflow-y: auto;
  touch-action: auto;
  -webkit-overflow-scrolling: touch;
}

.crop-panel {
  width: min(94vw, 520px);
  max-height: none;
  margin: auto 0;
  padding: clamp(18px, 4.5vw, 30px);
  border: 4px solid var(--accent);
  border-radius: 26px;
  background: #fffbea;
  box-shadow: 0 18px 42px rgba(120, 80, 20, 0.18), inset 0 0 0 2px rgba(255, 255, 255, 0.7);
  text-align: center;
  touch-action: auto;
}

.crop-panel h2 {
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 7vw, 2.8rem);
  line-height: 1.1;
}

.crop-canvas {
  width: min(68vw, 320px, 42dvh);
  aspect-ratio: 1;
  display: block;
  margin: 0 auto 16px;
  border: 3px solid rgba(200, 154, 43, 0.5);
  border-radius: 24px;
  background: #fff6d0;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72);
  touch-action: none;
}

.name-control,
.zoom-control {
  display: grid;
  align-items: center;
  gap: 12px;
  margin: 0 auto 16px;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 800;
}

.name-control {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.zoom-control {
  grid-template-columns: auto 1fr;
}

.name-display {
  width: 100%;
  min-height: 48px;
  min-width: 0;
  padding: 10px 12px;
  border: 2px solid rgba(200, 154, 43, 0.55);
  border-radius: 16px;
  background: #fffef5;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 800;
  text-align: left;
}

.name-display:empty::before {
  content: "ここにでるよ";
  color: rgba(119, 88, 38, 0.46);
}

.name-open-button {
  min-height: 48px;
  min-width: 0;
  padding: 8px 14px;
  border: 2px solid #74b7d0;
  border-radius: 16px;
  background: #ddf4ff;
  color: #5a3a10;
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 0 rgba(116, 183, 208, 0.24), inset 0 1px rgba(255, 255, 255, 0.7);
}

.name-open-button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(116, 183, 208, 0.24), inset 0 1px rgba(255, 255, 255, 0.7);
}

.kana-keyboard {
  margin: -4px 0 16px;
}

.kana-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.kana-key {
  min-width: 0;
  min-height: 42px;
  padding: 6px 4px;
  border: 2px solid rgba(200, 154, 43, 0.72);
  border-radius: 14px;
  background: #fffef5;
  color: #5a3a10;
  font-size: clamp(1rem, 3.8vw, 1.2rem);
  font-weight: 800;
  box-shadow: 0 3px 0 rgba(200, 154, 43, 0.18), inset 0 1px rgba(255, 255, 255, 0.7);
}

.kana-key:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(200, 154, 43, 0.18), inset 0 1px rgba(255, 255, 255, 0.7);
}

.kana-action-key {
  background: #ffe6a6;
}

.kana-row-gap-start {
  margin-top: 12px;
}

.kana-row-gap-start ~ .kana-key:nth-child(-n+10) {
  margin-top: 12px;
}

.kana-spacer {
  visibility: hidden;
  pointer-events: none;
}

@media (min-width: 700px) {
  .crop-panel {
    padding: 14px;
  }

  .crop-panel h2 {
    margin-bottom: 8px;
    font-size: 2rem;
  }

  .crop-canvas {
    width: min(48vw, 230px, 29dvh);
    margin-bottom: 8px;
  }

  .name-control,
  .zoom-control {
    margin-bottom: 10px;
  }

  .kana-keyboard {
    margin-bottom: 10px;
  }

  .kana-key {
    min-height: 38px;
    padding: 4px 2px;
    border-radius: 12px;
    font-size: 1rem;
  }

  .crop-actions {
    gap: 8px;
  }

  .crop-button {
    min-height: 44px;
    padding: 7px 12px;
  }
}

.zoom-control input {
  width: 100%;
  accent-color: #d78229;
}

.crop-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.crop-button {
  width: 100%;
  min-width: 0;
}

.choose-photo-button {
  background: #ddf4ff;
  border-color: #74b7d0;
}

.counter-button {
  background: #ffd0e1;
  border-color: #d46c96;
}

.privacy-note {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: clamp(0.82rem, 3.4vw, 0.98rem);
  font-weight: 800;
  line-height: 1.35;
}

.save-crop-button {
  background: #ffcf66;
}

.cancel-crop-button {
  background: #dff5c8;
  border-color: #8cbf54;
}

.name-input-panel,
.name-alert-panel,
.counter-panel {
  width: min(88vw, 420px);
  padding: 28px 24px;
  border: 4px solid var(--accent);
  border-radius: 26px;
  background: #fffbea;
  box-shadow: 0 18px 42px rgba(120, 80, 20, 0.18), inset 0 0 0 2px rgba(255, 255, 255, 0.7);
  text-align: center;
}

.name-input-panel {
  width: min(94vw, 620px);
  max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin: auto 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.counter-panel {
  width: min(90vw, 460px);
}

.name-input-panel h2 {
  margin: 0 0 14px;
  color: var(--text);
  font-size: clamp(1.6rem, 7vw, 2.35rem);
  line-height: 1.15;
}

.name-modal-display {
  margin-bottom: 14px;
  text-align: center;
}

.name-input-close-button {
  background: #ffcf66;
}

.name-alert-panel p {
  margin: 0 0 18px;
  color: var(--text);
  font-size: clamp(1.35rem, 6vw, 2rem);
  font-weight: 800;
  line-height: 1.25;
}

.name-alert-ok-button {
  background: #ffcf66;
}

.counter-panel h2 {
  margin: 0 0 18px;
  color: var(--text);
  font-size: clamp(1.6rem, 7vw, 2.35rem);
  line-height: 1.15;
}

.counter-options {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.counter-option {
  min-height: 58px;
  padding: 12px 20px;
  border: 2px solid var(--button-border);
  border-radius: 22px;
  background: #fffef5;
  color: #5a3a10;
  font-size: 1.25rem;
  font-weight: 800;
  box-shadow: 0 6px 0 rgba(200, 154, 43, 0.2), inset 0 1px rgba(255, 255, 255, 0.7);
}

.counter-option[aria-pressed="true"] {
  background: #ffcf66;
  border-color: #c89a2b;
}

.counter-close-button {
  background: #dff5c8;
  border-color: #8cbf54;
}

.howto-document,
.howto-page {
  height: auto;
  min-height: 100%;
  overflow: auto;
  touch-action: auto;
}

.howto-shell {
  width: min(92vw, 720px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom));
}

.howto-section {
  margin: 18px 0;
  padding: 18px;
  border: 3px solid rgba(246, 200, 95, 0.65);
  border-radius: 22px;
  background: rgba(255, 251, 234, 0.86);
}

.howto-section h2 {
  margin: 0 0 8px;
  font-size: clamp(1.25rem, 5vw, 1.65rem);
}

.howto-section p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.55;
}

.guardian-section {
  background: rgba(255, 255, 255, 0.72);
}

.guardian-section h3 {
  margin: 16px 0 6px;
  font-size: clamp(1.05rem, 4vw, 1.25rem);
}

.guardian-section ol {
  margin: 0;
  padding-left: 1.4em;
  color: var(--muted);
  font-size: clamp(0.98rem, 3.6vw, 1.12rem);
  font-weight: 700;
  line-height: 1.55;
}

.guardian-section li + li {
  margin-top: 4px;
}

.back-link {
  margin-top: 8px;
}

body.pseudo-fullscreen .game-shell,
.game-shell:fullscreen,
.game-shell:-webkit-full-screen {
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 226, 138, 0.72), transparent 16rem),
    radial-gradient(circle at 86% 8%, rgba(221, 244, 255, 0.78), transparent 15rem),
    linear-gradient(180deg, #fff8d8, #fff2bf);
}

body.pseudo-fullscreen .game-shell {
  position: fixed;
  inset: 0;
  z-index: 100;
}

body.pseudo-fullscreen .top-bar,
.game-shell:fullscreen .top-bar,
.game-shell:-webkit-full-screen .top-bar {
  padding-top: 0;
}

@media (max-width: 600px) {
  .game-shell {
    min-height: 0;
    padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    gap: 10px;
  }

  .top-bar {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  h1 {
    font-size: clamp(1.2rem, 6.2vw, 1.75rem);
  }

  .instruction,
  .status-row {
    margin-top: 3px;
    font-size: clamp(0.95rem, 4vw, 1.12rem);
    line-height: 1.25;
  }

  .status-row {
    flex-wrap: wrap;
    gap: 4px 10px;
  }

  .controls {
    justify-content: center;
    gap: 7px;
  }

  #growButton,
  #shrinkButton,
  #speedButton,
  #slowButton,
  #gatherButton,
  #fullscreenButton {
    min-width: 92px;
    min-height: 50px;
    padding: 9px 12px;
    border-radius: 18px;
  }

  #gameCanvas {
    border-width: 3px;
    border-radius: 18px;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .game-shell {
    min-height: 0;
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    gap: 12px;
  }

  .top-bar {
    align-items: flex-start;
  }

  .controls {
    max-width: 520px;
  }
}

@media (min-width: 901px) {
  .game-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  }

  .controls {
    max-width: 640px;
  }
}

@media (max-height: 600px) {
  .game-shell {
    min-height: 0;
    gap: 8px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .top-bar {
    align-items: center;
    gap: 8px;
  }

  h1 {
    font-size: clamp(1rem, 4.2vw, 1.45rem);
  }

  .instruction {
    display: none;
  }

  .status-row {
    margin-top: 2px;
    font-size: 0.95rem;
    line-height: 1.2;
  }

  .controls {
    gap: 6px;
  }

  #growButton,
  #shrinkButton,
  #speedButton,
  #slowButton,
  #gatherButton,
  #fullscreenButton {
    min-width: 82px;
    min-height: 44px;
    padding: 7px 10px;
    border-radius: 16px;
    font-size: 0.98rem;
  }

  #gameCanvas {
    border-width: 3px;
    border-radius: 16px;
  }

  .crop-editor {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .crop-panel {
    width: min(96vw, 560px);
    padding: 14px;
    border-width: 3px;
    border-radius: 22px;
  }

  .crop-panel h2 {
    margin-bottom: 8px;
    font-size: clamp(1.35rem, 5vw, 2rem);
  }

  .crop-canvas {
    width: min(48vw, 220px, 34dvh);
    margin-bottom: 10px;
  }

  .name-control,
  .zoom-control {
    margin-bottom: 10px;
    gap: 8px;
    font-size: 0.98rem;
  }

  .name-display {
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 14px;
    font-size: 1.05rem;
  }

  .kana-keyboard {
    margin-bottom: 10px;
  }

  .kana-grid {
    gap: 4px;
  }

  .kana-row-gap-start,
  .kana-row-gap-start ~ .kana-key:nth-child(-n+10) {
    margin-top: 8px;
  }

  .kana-key {
    min-height: 34px;
    padding: 4px 2px;
    border-radius: 11px;
    font-size: 0.95rem;
  }

  .crop-actions {
    gap: 8px;
  }

  .crop-button {
    min-height: 46px;
    padding: 8px 12px;
    border-radius: 16px;
    font-size: 1.05rem;
  }

  .privacy-note {
    font-size: 0.82rem;
  }
}

@media (max-width: 380px) {
  .game-shell {
    gap: 8px;
  }

  .top-bar {
    align-items: stretch;
  }

  #growButton,
  #shrinkButton,
  #speedButton,
  #slowButton,
  #gatherButton,
  #fullscreenButton {
    min-width: 82px;
    min-height: 48px;
    padding: 8px 10px;
  }
}