/* 新規登録（SignupPage.php。2026-09-27 に作り直し） */
:root {
  --su-ink: #06293a;
  --su-sub: #4d6572;
  --su-sea: #2a7fc4;
  --su-land: #3f9a3a;
  --su-ok: #1e9a52;
  --su-ng: #d6453a;
  --su-card: #ffffff;
  --su-line: #d5e3ea;
}
html, body.su-body { min-height: 100%; }
body.su-body {
  margin: 0;
  background: linear-gradient(180deg, #7ec8f0 0%, #bfe6f7 45%, #f4ecd0 100%) fixed;
  color: var(--su-ink);
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
.su { max-width: 620px; margin: 0 auto; padding: 18px 16px 40px; box-sizing: border-box; }
.su *, .su *::before, .su *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

.su-head { text-align: center; margin: 4px 0 14px; }
.su-head h1 { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: .02em; color: #fff; text-shadow: 0 2px 0 #2a6fae, 0 3px 10px rgba(0, 0, 0, .2); }
.su-head p { margin: 6px 0 0; font-weight: 800; font-size: 15px; color: #0d4467; }

.su-card { background: var(--su-card); border-radius: 18px; padding: 14px; box-shadow: 0 6px 22px rgba(6, 41, 58, .16); margin-bottom: 14px; }

/* 場面 */
.su-scene { position: relative; border-radius: 12px; overflow: hidden; border: 3px solid #06293a; background: #7ec8f0; }
.su-scene canvas { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; image-rendering: pixelated; image-rendering: crisp-edges; }
.su-zone { position: absolute; top: 0; bottom: 0; border: 0; padding: 0; background: transparent; cursor: pointer; }
.su-zone[data-side="sea"] { left: 0; width: 46%; }
.su-zone[data-side="land"] { right: 0; width: 46%; }
.su-zone:focus-visible { outline: 3px solid #ffd84a; outline-offset: -3px; }

.su-vee { position: absolute; width: 13%; aspect-ratio: 1; transform: translate(-50%, -100%); pointer-events: none;
  transition-property: left, top; transition-timing-function: linear; transition-duration: 1s; }
.su-vee img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; transform-origin: 50% 100%; }
.su-vee::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -4%; height: 12%; border-radius: 50%; background: rgba(0, 0, 0, .25); z-index: -1; }
.su-vee.is-left img { transform: scaleX(-1); }
.su-vee.is-idle img { animation: su-breathe 1.6s steps(2) infinite; }
.su-vee.is-left.is-idle img { animation-name: su-breathe-left; }
.su-vee.is-walking img { animation: su-hop .28s steps(2) infinite; }
.su-vee.is-left.is-walking img { animation-name: su-hop-left; }
.su-vee.is-jump img { animation: su-jump .5s ease-in-out infinite; }
.su-vee.is-left.is-jump img { animation-name: su-jump-left; }
/* 左向きの反転もキーフレームに入れておく（入れないと steps() の変わり目で幅0になって消えた。sampling_mock.css と同じ罠） */
@keyframes su-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
@keyframes su-breathe-left { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-4%); } }
@keyframes su-hop { 0% { transform: translateY(0); } 50% { transform: translateY(-10%); } }
@keyframes su-hop-left { 0% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-10%); } }
@keyframes su-jump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-30%); } }
@keyframes su-jump-left { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-30%); } }

.su-bubble { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: none;
  background: #fff; color: var(--su-ink); border: 2px solid #06293a; border-radius: 10px; padding: 3px 9px; font-weight: 800; font-size: 13px;
  box-shadow: 0 2px 0 rgba(6, 41, 58, .35); animation: su-pop .25s ease-out; }
.su-bubble::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 10px; height: 10px; margin-left: -5px; background: #fff;
  border-right: 2px solid #06293a; border-bottom: 2px solid #06293a; transform: rotate(45deg); }
.su-bubble.is-right { transform: translate(-85%, -100%); }
.su-bubble.is-right::after { left: 85%; }
.su-bubble.is-leftside { transform: translate(-15%, -100%); }
.su-bubble.is-leftside::after { left: 15%; }
@keyframes su-pop { from { opacity: 0; margin-top: 6px; } to { opacity: 1; margin-top: 0; } }

/* 選ぶカード */
.su-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.su-choice { position: relative; display: flex; align-items: flex-start; gap: 8px; text-align: left; padding: 10px; border-radius: 14px;
  border: 3px solid var(--su-line); background: #f7fbfd; color: var(--su-ink); cursor: pointer; transition: transform .12s, border-color .12s, background .12s; font: inherit; }
.su-choice:hover { transform: translateY(-2px); }
.su-choice.is-sea.is-on { border-color: var(--su-sea); background: #e8f4fd; }
.su-choice.is-land.is-on { border-color: var(--su-land); background: #eaf7e6; }
.su-choice-icon { flex: 0 0 34px; width: 34px; height: 34px; }
.su-choice-icon svg { width: 100%; height: 100%; display: block; }
.su-choice-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.su-choice-body b { font-size: 16px; font-weight: 900; }
.su-choice.is-sea b { color: var(--su-sea); }
.su-choice.is-land b { color: var(--su-land); }
.su-choice-title { font-size: 11px; font-weight: 700; color: var(--su-sub); }
.su-choice-desc { font-size: 12px; line-height: 1.4; }
.su-choice-mark { position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 50%; display: none; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 14px; border: 2px solid #fff; }
.su-choice.is-on .su-choice-mark { display: flex; }
.su-choice.is-sea .su-choice-mark { background: var(--su-sea); }
.su-choice.is-land .su-choice-mark { background: var(--su-land); }
.su-extra { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.su-choice.is-small { padding: 5px 10px; font-size: 12px; font-weight: 700; border-width: 2px; }
.su-choice.is-small.is-on { border-color: var(--su-ink); background: #eef4f7; }

.su-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 9px 11px; border-radius: 12px; background: #fff6de; color: #6b4a00; font-size: 13px; line-height: 1.55; }
.su-note b { color: #b0460c; }
.su-note-icon { flex: 0 0 20px; height: 20px; border-radius: 50%; background: #f0a020; color: #fff; font-weight: 900; font-size: 13px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }

/* アカウント */
.su-account.is-in { animation: su-rise .35s ease-out; }
@keyframes su-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.su-account h2 { margin: 0 0 10px; font-size: 18px; font-weight: 900; }
.su-field { display: block; margin: 0 0 12px; }
.su-label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.su-label-note { font-size: 11.5px; font-weight: 700; color: var(--su-sub); }
.su-field small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--su-sub); }
.su-input-row { display: flex; align-items: center; gap: 6px; }
.su-field input, .su-field select { flex: 1 1 auto; min-width: 0; width: 100%; height: 44px; padding: 0 12px; border-radius: 10px; border: 2px solid var(--su-line);
  font-size: 16px; color: var(--su-ink); background: #fff; }
.su-field input:focus, .su-field select:focus { outline: none; border-color: #2a7fc4; box-shadow: 0 0 0 3px rgba(42, 127, 196, .18); }
.su-field input[readonly] { background: #eef3f6; color: var(--su-sub); }
.su-eye { flex: 0 0 40px; height: 40px; border-radius: 10px; border: 2px solid var(--su-line); background: #fff; cursor: pointer; font-size: 16px; opacity: .55; padding: 0; }
.su-eye.is-on { opacity: 1; border-color: #2a7fc4; }
.su-check { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; color: #fff; }
.su-check.is-ok { background: var(--su-ok); }
.su-check.is-ng { background: var(--su-ng); }
.su-check.is-wait { background: #b8c7cf; }

.su-seg { display: inline-flex; border-radius: 12px; border: 2px solid var(--su-line); overflow: hidden; }
.su-seg button { border: 0; background: #fff; color: var(--su-ink); font: inherit; font-weight: 800; font-size: 14px; padding: 8px 18px; cursor: pointer; }
.su-seg button + button { border-left: 2px solid var(--su-line); }
.su-seg button.is-on { background: var(--su-ink); color: #fff; }

.su-error { margin: 0 0 10px; padding: 8px 11px; border-radius: 10px; background: #fdeceb; color: #a8281e; font-size: 13px; font-weight: 700; }

.su-go { display: block; width: 100%; height: 54px; border: 0; border-radius: 14px; cursor: pointer; text-align: center; line-height: 54px; text-decoration: none;
  background: #ff9f1c; color: #fff; font-size: 18px; font-weight: 900; letter-spacing: .03em; box-shadow: 0 4px 0 #c8730a; transition: transform .08s, box-shadow .08s, filter .12s; }
.su-go:hover { color: #fff; text-decoration: none; filter: brightness(1.05); }
.su-go:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #c8730a; }
.su-go:disabled { background: #c3cfd6; box-shadow: 0 4px 0 #a3b0b8; cursor: default; }

.su-done p { margin: 0 0 12px; font-weight: 800; text-align: center; }

.su-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 13px; }
.su-links a { color: #0d4467; font-weight: 700; text-decoration: underline; }

@media (max-width: 480px) {
  .su { padding: 12px 12px 32px; }
  .su-head h1 { font-size: 22px; }
  .su-card { padding: 11px; border-radius: 16px; }
  .su-choices { gap: 8px; }
  .su-choice { padding: 8px; gap: 6px; flex-direction: column; }
  .su-choice-icon { flex-basis: auto; width: 26px; height: 26px; }
  .su-choice-body b { font-size: 15px; }
  .su-bubble { font-size: 11.5px; padding: 2px 7px; }
}

/* 難易度の3つのボタン（登録画面） */
.su-seg-3 { display: flex; width: 100%; }
.su-seg-3 button { flex: 1 1 0; padding: 8px 6px; }
#su_diff_desc { display: block; margin-top: 5px; font-size: 12px; color: var(--su-sub); line-height: 1.5; }