/* Origami Panic / water battle. Approved title direction B, 2026-10-22.
   Presentation only: no control, board, HUD or touch-target geometry changes. */
:root {
  --bg: #e9f6f3; --ink: #203d50; --text: #203d50; --panel: #fffaf0;
  --light: #fffaf0; --muted: #526773; --yellow: #ffc65b; --yellow-d: #ce8c2e;
  --blue: #54c7d0; --blue-d: #238799; --pink: #eb8b70; --red: #b9433c;
  --dot: var(--round); --window: #fffaf0; --window-shadow: 0 8px 26px #203d501f;
  --op-edge: #c7dedb; --op-sea: #117f95;
}
body { background: radial-gradient(ellipse at 50% 0, #d2f2f2, transparent 65%), #edf7f1; }
#home, #lobby { background: linear-gradient(180deg, #d6eff244, #fffaf09c); }
.home-inner, .lobby-inner { max-width: 460px; gap: 16px; }
.home-inner { padding-top: max(16px, env(safe-area-inset-top)); }
.home-inner > * { flex-shrink: 0; }
.language-bar { order: 0; justify-content: flex-end; }
.language-bar select { background: #fffaf0; border-color: var(--op-edge); min-height: 44px; }
.logo { order: 1; isolation: isolate; margin: 0 -16px; width: calc(100% + 32px); height: 462px; overflow: hidden; border-radius: 30px; background: #72cbdc; box-shadow: 0 14px 34px #147f9224; }
.logo-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; z-index: -2; }
.logo::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(#d5f8ff22, transparent 58%, #103c4d12); }
.logo-bomb { display: none; }
.logo-text { margin-top: 22px; width: 100%; gap: 6px; transform: rotate(-3deg); }
.logo-text::before, .logo-text::after { content: none; }
.logo-small, .logo-big { font-weight: 800; letter-spacing: .02em; line-height: 1.08; color: #fff7de; -webkit-text-stroke: 5px #183c50; text-shadow: 1px 2px #183c50, 2px 4px #183c50, 3px 6px #117e91, 4px 8px #183c50; }
.logo-small { font-size: 48px; transform: none; }
.logo-big { font-size: 61px; color: #ffb877; }
.logo-fill { display: none; }
.logo-sub { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 92%; margin: 0; background: #fffaf0f5; color: #203d50; font-size: 12px; padding: 5px 12px; box-shadow: 0 2px 8px #203d501a; }
html:not([lang='ja']) .logo-small { font-size: 43px; }
html:not([lang='ja']) .logo-big { font-size: 58px; }
.play-intro { order: 2; color: #304f5b; }
.step-head { order: 3; }
.home-step { order: 4; }
.quota-notice { order: 3; }
.beta-notice { order: 6; background: #fffaf0; border-color: #e1bf79; color: #624920; }
.home-inner > .btn, .home-inner > .release-link { order: 7; }
#homeMsg { order: 5; }
.game-footer { order: 9; }
.home-inner[data-step='main'] .logo { height: 352px; }
.home-inner[data-step='main'] .logo-art { object-position: center 60%; }
.home-inner[data-step='main'] .logo-text { margin-top: 15px; }
.home-inner[data-step='main'] .logo-small { font-size: 36px; }
.home-inner[data-step='main'] .logo-big { font-size: 48px; }
.panel, .rules, .slot, .acc-card, .acc-sheet, .modal-card, .result-card, .story-card, .guide-card {
  background: #fffaf0; color: var(--ink); border-color: #d1e0d8; border-radius: 22px; box-shadow: 0 6px 0 #b9d7d1, 0 12px 28px #203d5012;
}
.btn, .acc-btn { --button-shadow: #b9d7d1; border: 1px solid #e4ece1; border-radius: 18px; color: var(--ink); background: #fffaf0; box-shadow: 0 5px 0 var(--button-shadow); transition: transform .16s, box-shadow .16s, background .16s; }
.btn.yellow, .acc-yellow, .acc-login { --button-shadow: #ce8c2e; color: #4e351b; background: linear-gradient(145deg, #ffe09a, #ffc158); border-color: #ffe7af; }
.btn.blue, .acc-blue { --button-shadow: #278c9b; color: #133d49; background: #a3e0df; text-shadow: none; }
.btn.white, .btn.ghost, .acc-ghost { background: #fffaf0; border-color: #d1e0d8; color: var(--ink); }
.btn:disabled, .acc-btn:disabled { cursor: default; }
.btn:focus-visible, button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #147f95; outline-offset: 4px; }
.btn:active, .acc-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--button-shadow); }
input, input:focus { background: #f6faf4; color: var(--ink); border-color: #b7cfcc; }
input:focus { outline: 3px solid #54c7d044; }
.app-icon { background: #dbeee8; border-radius: 10px; box-shadow: none; }
.dungeon-btn, .dungeon-btn .app-icon, .mode-card, .item-chip { background: #dfefeb; color: var(--ink); }
.ticket { background: linear-gradient(135deg, #fff2c9, #ffd783); color: #4e351b; border-color: #ffe8ab; border-radius: 22px; box-shadow: 0 5px 0 #d6ad63, 0 10px 25px #203d5017; }
/* Keep room setup close to the character cards. */
.lobby-inner { gap: 10px; padding-top: 52px; padding-bottom: 24px; }
.ticket { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; border-radius: 14px; box-shadow: 0 3px 0 #d6ad63; }
.ticket-label { flex: 1 1 130px; font-size: 12px; }
.ticket-code { font-size: 20px; letter-spacing: .06em; line-height: 1.3; }
.ticket .btn { min-height: 40px; padding: 6px 10px; }
.slots { gap: 10px; }
.slot { min-width: 0; min-height: 154px; padding: 8px 6px; }
.slot .stage { height: 80px; }
.slot .stage img { width: 60px; }
.slot .nm { font-size: 15px; }
.slot .outfit-change { margin-top: 4px; }
.slot .add-bot { margin-top: 10px; min-height: 44px; max-width: 100%; white-space: normal; line-height: 1.4; }
.slot .q { font-size: 32px; }
.rules { padding: 12px; gap: 10px; }
#lobbyMsg:empty { display: none; }
.slot::before { opacity: .16; }
.slot.empty { border-color: #9ebdb9; background: #eff9f380; }
.slot.me { outline-color: #147f95; }
.slot .arrow, .slot .kick, .slot .lv button { border-color: #bed4d1; color: var(--ink); background: #fffaf0; box-shadow: 0 2px 0 #bed4d1; }
.slot .arrow { width: 36px; height: 44px; }
.chips button { background: #edf5ec; border-color: #c8ddd7; color: var(--ink); }
.chips button.on { background: #ffd88a; }
.toggle { background: #b4c9c5; border-color: #9fbcb8; }
.toggle[aria-pressed='true'] { background: #218796; }
.hint, .home-me, #stepGate .step-ask, #stepMain .step-ask, .step-head h1 { color: var(--ink); background: #fffaf0; }
.sound-pill, .mute, .story-back { color: var(--ink); background: #fffaf0; border-color: #d1e0d8; box-shadow: 0 3px 0 #b9d7d1; }
.plate, .timer, .count, .banner, .pickup, .toast, .dialogue-box, .narration .dialogue-box, .tutorial-step, .chapter-summary, .reward, .msg:not(:empty), #lobby .msg:not(:empty) {
  color: var(--ink); background: #fffaf0f5; border-color: #c7dedb; border-radius: 12px; font-family: var(--round); font-weight: 700; text-shadow: none; box-shadow: 0 4px 14px #203d501f;
}
.count.go, .count small, .count.goal .round-goal, .count.goal .round-victory, .plate .wins, .result .msg, .story-card .story-eyebrow, .reward b { color: var(--ink); }
.count.goal .round-digit { color: #137f95; }
.menu-btn { background: #fffaf0; border-color: #c7dedb; border-radius: 12px; }
.menu-btn i { background: var(--ink); }
.modal-card h3 { border-color: #c7dedb; font-weight: 800; }
.modal-card .lvb { background: #e4f1ed; color: var(--ink); border-color: #c7dedb; font-family: var(--round); }
.howto-list, .item-list li, .howto-list b, .item-list li b { font-weight: 700; }
.menu-card .btn, .result-card .btn, .story-card .btn { font: 700 17px/1.6 var(--round); background: #e5f1eb; color: var(--ink); border-radius: 12px; padding-left: 30px; }
.menu-card .btn::before, .result-card .btn::before, .story-card .btn::before { color: #137f95; }
.menu-card .btn:active, .result-card .btn:active, .story-card .btn:active { background: #cbe6de; }
.close { background: #e5f1eb; color: var(--ink); border-radius: 12px; font-family: var(--round); }
.story-card h1, .story-card h2 { font-weight: 800; }
.story-card .note, .menu-card .note, .dialogue-name, .dialogue-hint { color: #405b66; }
.release-link, #menu .release-link { color: #2a5865; }
.release-dialog { background: #fffaf0; color: var(--ink); border-color: #c7dedb; border-radius: 22px; }
.release-head, .release-list > li + li { border-color: #c7dedb; }
.release-close { color: var(--ink); background: #e4f1ed; border-color: #c7dedb; }
.release-meta b { color: #11788c; }
.release-latest { background: #d8eee7; color: var(--ink); }
.acc-stage { background: radial-gradient(circle at 50% 30%, #f8fff8, #b4e2db); border-color: #d1e0d8; }
.acc-points b { color: #e8a63d; -webkit-text-stroke: 0; text-shadow: none; }
.acc-sheet-title { color: var(--ink); font-weight: 800; }
.acc-modal { background: #183d4b66; }
.acc-item, .acc-outfit { background: #eff5eb; border-color: #c7dedb; }
.acc-item.on, .acc-outfit.on { border-color: #147f95; }
#game { background: radial-gradient(ellipse at 50% 10%, #d4eeee, #9ecbc3); }
.board-frame { background: #6dada7; border-color: #6dada7; box-shadow: 0 5px 0 #3d7578, 0 12px 28px #203d5033; }
.act-btn { border-color: #d8f5e9; }
.act-btn:disabled { filter: grayscale(1); }
.guide-card { color: var(--ink); }
.title-moving .logo-art { animation: op-title-drift 12s ease-in-out infinite alternate; }
@keyframes op-title-drift { from { transform: scale(1); } to { transform: scale(1.035) translateY(-2px); } }
@media (min-width: 900px) and (min-height: 700px) { .logo { height: 510px; } }
@media (orientation: landscape) and (max-height: 560px) {
  .home-inner .logo { height: 310px; width: 280px; margin-inline: auto; }
  .home-inner .logo-small { font-size: 34px; } .home-inner .logo-big { font-size: 46px; }
}
@media (prefers-reduced-motion: reduce) { .title-moving .logo-art, .logo-bomb, .slot .stage img { animation: none; } }

/* The wordmark is the approved B artwork; the localized name stays available to readers. */
.bg { background: radial-gradient(ellipse at 50% 0, #b9e8ee, #edf7f1 75%); }
.language-bar { justify-content: flex-start; padding-right: 145px; }
.language-bar > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.language-bar select { max-width: 150px; }
.logo-art { object-position: center top; }
.logo .logo-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.brandmark { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 84%; max-width: 340px; height: auto; }
.home-inner[data-step='main'] .brandmark { width: 65%; }
.sound-pill.wait { background: #ffd48a; color: #4e351b; animation: none; }
:is(.btn.yellow, .chips button.on, .stage-chip.on, .mode-card.on, .story-path .next button) { background: linear-gradient(145deg, #ffe09a, #ffc158); color: #4e351b; }
.btn { border-radius: 18px; }
.legal-page { position: static; overflow: auto; height: auto; color: #203d50; background: #edf7f1; }
.legal-page a, .legal-game { color: #14798c; }
.legal-document, .growth-dialog { background: #fffaf0; color: #203d50; border-color: #c7dedb; }
.legal-header select { color: #203d50; border-color: #c7dedb; background: #fffaf0; }
@media (orientation: landscape) and (max-height: 560px) { .brandmark { width: 80%; } }

.logo-sub { display: none; }

.water-sheen { position: absolute; left: -25%; right: -25%; bottom: 4%; height: 26%; z-index: -1; opacity: 0; pointer-events: none; background: repeating-linear-gradient(167deg, transparent 0 18px, #c4fbff7a 20px 22px, transparent 24px 48px); mask-image: linear-gradient(transparent, #0009 45%, transparent); }
.title-droplet { position: absolute; width: 7px; height: 12px; border-radius: 70% 40% 70% 40%; background: #ccfcffb3; box-shadow: inset 2px 1px #fff9; opacity: 0; pointer-events: none; }
.title-droplet.one { left: 12%; bottom: 20%; } .title-droplet.two { right: 9%; bottom: 26%; }
.title-moving .water-sheen { animation: op-water-sheen 4s ease-in-out infinite; }
.title-moving .title-droplet.one { animation: op-droplet 4.6s ease-out infinite; }
.title-moving .title-droplet.two { animation: op-droplet 5.4s 1.2s ease-out infinite; }
@keyframes op-water-sheen { 0%,100%{transform:translateX(-8px);opacity:.05}50%{transform:translateX(16px);opacity:.4} }
@keyframes op-droplet { 0%,18%,100%{transform:translateY(12px) scale(.5);opacity:0}45%{opacity:.8}80%{transform:translateY(-60px) scale(.7);opacity:0} }
@media(prefers-reduced-motion:reduce){.title-moving .water-sheen,.title-moving .title-droplet{animation:none;opacity:0}}

.act-icon img { width: 100%; height: 100%; object-fit: contain; }
/* Adjacent feature screens share the same palette while keeping their layout and behavior. */
.billing-dialog, .billing-confirm, .growth-dialog { color: #203d50; background: #fffaf0; border-color: #c7dedb; }
.reader-shell, .reader-menu, .reader-box { color: #203d50; }

#actIcon img { width: 32px; height: 34px; object-fit: contain; }
.billing-modal { color: #203d50; background: #183d4b66; }
.billing-sheet { color: #203d50; background: #fffaf0; border-color: #c7dedb; }
.billing-btn { color: #203d50; background: #edf5eb; border-color: #c7dedb; box-shadow: 0 4px 0 #b9d7d1; }
.billing-primary { color: #4e351b; background: #ffd187; border-color: #f5c977; box-shadow: 0 4px 0 #ce8c2e; }
.billing-modal :is(button,input,a):focus-visible { outline-color: #147f95; }

/* Entry always starts at the approved title; the choices appear after Play. */
.home-inner:not([data-step='title']) .logo, .home-inner:not([data-step='title']) .play-intro { display: none; }
.home-inner:not([data-step='title']) { padding-top: max(64px, env(safe-area-inset-top)); }
.home-inner:not([data-step='title']) .step-head { display: flex; }
.home-inner[data-step='title'] .step-head { display: none; }
#stepTitleScreen { width: 100%; }
#btnPlay { min-height: 72px; font-size: 26px; }
.title-invite, .entry-note { margin: 0; line-height: 1.6; text-align: center; }
.play-terms-details > summary { min-height: 44px; padding: 10px 4px; color: #14798c; cursor: pointer; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px; }
.play-terms-details > summary:focus-visible { outline: 3px solid #147f95; outline-offset: 2px; border-radius: 6px; }
.play-terms-text { max-height: min(38svh, 340px); min-height: 140px; overflow-y: auto; overscroll-behavior: contain; background: #fffaf0; padding: 16px; border: 1px solid #b7cfcc; border-radius: 18px; font-size: 13px; line-height: 1.75; }
.play-terms-text h2 { font-size: 15px; margin: 0 0 8px; }
.play-terms-text p { margin: 0 0 20px; }
.play-terms-check { display: flex; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; line-height: 1.6; font-size: 15px; }
.play-terms-check input { width: 24px; height: 24px; flex: 0 0 24px; accent-color: #147f95; }
.entry-legal-link { color: #14798c; min-height: 44px; display: flex; align-items: center; }
#btnAcceptTerms:disabled { opacity: .45; }
.home-inner[data-step='terms'] #betaNotice { display: none; }
@media (orientation: landscape) and (max-height: 560px) {
  .play-terms-text { max-height: 170px; }
  .home-inner[data-step='terms'] { padding-top: max(12px, env(safe-area-inset-top)); gap: 8px; }
  .home-inner[data-step='terms'] .step-head { flex-direction: row; align-items: center; }
  .home-inner[data-step='terms'] #stepTerms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px 12px; }
  .play-terms-details { grid-column: 1 / -1; }
  #btnAcceptTerms { min-width: 0; padding: 12px 16px; font-size: 18px; }
}