/* =========================================================================
   1. 色と寸法
   ========================================================================= */

:root {
  color-scheme: light;

  --brand: #4587b7;
  --sky: #a0e2f1;
  --ink: #605b54;
  --heart: #f9836b;
  --gold: #f2b632;
  --wave-line: #b6dde1;
  --current-mark: #0eb8ca;

  --share-bg: #405573;

  --page: #FCF8EF;
  --nav-pale: #ecf3f3;
  --panel: #fff; --panel-soft: #f2fafc;
  --line: #cde2ec; --line-soft: #e5f1f6;
  --notice-bg: #ddeff1; --notice-line: #49c2dd;
  --log-rule: #e9edeb;

  --card-line: #605b54;
  --card-edge: 10px;
  --card-pad: 20px;
  --card-pad-bottom: 26px;
  --card-rule-inset: 10px;
  --card-field-h: 42px;
  --card-field: #e6dec9;
  --card-text: #4a443c;
  --card-muted: #968763;
  --card-icon-w: 105px;
  --card-icon-right: 30px;
  --card-icon-inset: calc(var(--card-icon-w) + var(--card-icon-right) - var(--card-pad));
  --card-icon-gap: calc(var(--card-icon-inset) + 17px);
  --card-btn-shadow: 1px 4px 8px rgba(160, 132, 109, .47);

  --text: #123243; --muted: #47697a; --faint: #517a89;
  --accent: #0d8098; --accent-soft: #d7f0f6; --accent-deep: #0a6b80;

  --trace: #97561a; --trace-soft: #fdf2e2; --trace-line: #e8b877;
  --bad: #b25252;
  --link: #256fd7;

  --band-1-text: #5787af;
  --band-2-text: #fff;
  --band-3-text: #fff;

  --shadow: 0 1px 2px rgba(18, 50, 67, .05), 0 10px 28px rgba(18, 50, 67, .06);
  --shadow-soft: 0 2px 8px rgba(18, 50, 67, .08);
  --btn-shadow: 1px 4px 8px rgba(182, 221, 225, .47);
  --radius: 14px;

  --pad: 20px;
  --column: 480px;

  --veil-wait: .4s;
  --veil-in: .8s;
  --veil-out: 1.15s;
  --char-gap: 50ms;
}

[data-icon-bg="leaf"]    { --icon-bg: #c8d99c; }
[data-icon-bg="lilac"]   { --icon-bg: #d6d5ea; }
[data-icon-bg="blossom"] { --icon-bg: #ffb7c0; }
[data-icon-bg="aqua"]    { --icon-bg: #bde2e2; }
[data-icon-bg="cream"]   { --icon-bg: #fbf2c2; }

/* =========================================================================
   2. 土台
   ========================================================================= */

* { box-sizing: border-box; }

html { overscroll-behavior-y: none; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(96, 91, 84, .28); border-radius: 999px; }
html::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .55); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; }
  html { scrollbar-color: rgba(255, 255, 255, .55) transparent; }
  body * { scrollbar-color: rgba(96, 91, 84, .28) transparent; }
}

body {
  margin: 0; color: var(--text);
  background: linear-gradient(180deg, var(--sky) 0, var(--brand) 100%) fixed;
  background-color: var(--brand);
  font-family: "Zen Kaku Gothic New", "Gowun Dodum", system-ui, "Hiragino Sans", "Yu Gothic UI", sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  word-break: normal;
}

#log li, .memory li, .gift-text, .gift-caption {
  word-break: auto-phrase;
}

:root:lang(ko) :is(body, #log li, .memory li, .gift-text, .gift-caption, .reaction-text) {
  word-break: keep-all;
  overflow-wrap: break-word;
}
:root:lang(ko) body {
  font-family: "Gowun Dodum", "Zen Kaku Gothic New", system-ui, sans-serif;
}
:root:lang(zh) body {
  font-family: "Noto Sans SC", "Zen Kaku Gothic New", system-ui, sans-serif;
}
:root:lang(zh-Hant) body {
  font-family: "Noto Sans TC", "Zen Kaku Gothic New", system-ui, sans-serif;
}

.page {
  max-width: var(--column); margin: 0 auto; min-height: 100vh;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--page);
}
.pad { padding: 0 var(--pad); }

.sea-bubbles {
  display: none;
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
}
@media (min-width: 560px) and (prefers-reduced-motion: no-preference) {
  .sea-bubbles { display: block; }
}
.sea-bubble {
  position: absolute; left: var(--x); top: 100%;
  width: var(--size); height: var(--size);
  animation: sea-bubble-rise var(--rise) linear forwards;
}
.sea-bubble i {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55);
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .9) 0 9%, rgba(255, 255, 255, .14) 13% 62%, rgba(255, 255, 255, .28) 100%);
  animation: sea-bubble-sway var(--sway-time) ease-in-out infinite alternate;
}
@keyframes sea-bubble-rise {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: .85; }
  70% { opacity: .75; }
  100% { transform: translateY(calc(-100vh - var(--size) - 20px)); opacity: 0; }
}
@keyframes sea-bubble-sway {
  from { transform: translateX(calc(var(--sway) * -1)); }
  to { transform: translateX(var(--sway)); }
}

@media (min-width: 480px) {
  :root { --pad: 32px; }
}

#entry, #main, #result, #mypage, #doc {
  min-height: calc(100vh - 230px);
  min-height: calc(100svh - 230px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  min-height: var(--screen-floor, calc(100svh - 230px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
}

#entry, #doc { animation: page-fade .35s ease-out; }
@keyframes page-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #entry, #doc { animation: none; }
}

.full-bleed { margin-inline: calc(var(--pad) * -1 + var(--bleed-inset, 0px)); }

/* =========================================================================
   3. 共通の面と見出し
   ========================================================================= */

.panel {
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow);
}
h1 { font-size: 19px; margin: 0 0 10px; font-weight: 700; letter-spacing: .02em; }
h2 {
  font-size: 12px; margin: 0 0 10px; color: var(--muted); font-weight: 700;
  letter-spacing: .08em;
}

/* =========================================================================
   4. タイトル
   ========================================================================= */

.site-head {
  position: relative;
  padding: calc(7px + env(safe-area-inset-top, 0px)) 20px 13px;
  margin-bottom: calc(100% * 8 / 402 + 14px);
  background: var(--brand);
}
.site-head::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); aspect-ratio: 402 / 8;
  background: var(--brand);
  -webkit-mask: url("assets/bg_wave-header.svg") center / 100% 100% no-repeat;
  mask: url("assets/bg_wave-header.svg") center / 100% 100% no-repeat;
}
.site-head .title {
  display: block; margin: 0 auto;
  width: 182px; max-width: 70%; aspect-ratio: 182 / 14;
  background: #fff;
  -webkit-mask: url("assets/title.svg") center / contain no-repeat;
  mask: url("assets/title.svg") center / contain no-repeat;
}
.lang-switch {
  position: absolute; right: 8px; top: calc(env(safe-area-inset-top, 0px) + 16px);
  transform: translateY(-50%); z-index: 9;
}
.lang-trigger {
  display: flex; align-items: center; padding: 4px; border: none; border-radius: 999px;
  background: none; box-shadow: none; color: #fff;
}
.lang-trigger:hover:not(:disabled) { background-color: transparent; opacity: .75; }
.lang-trigger:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.lang-trigger::before, .lang-trigger::after {
  content: ''; display: block; flex: none; background: currentColor;
}
.lang-trigger::before {
  width: 20px; height: 20px;
  -webkit-mask: url(assets/icon_language.svg) center / contain no-repeat;
  mask: url(assets/icon_language.svg) center / contain no-repeat;
}
.lang-trigger::after {
  width: 20px; height: 20px; margin-left: -2px;
  -webkit-mask: url(assets/icon_arrow-pull-down.svg) center / contain no-repeat;
  mask: url(assets/icon_arrow-pull-down.svg) center / contain no-repeat;
}
.site-head:has(.lang-menu:not(.hidden)) { z-index: 9; }
.lang-menu {
  position: absolute; top: calc(100% + 4px); right: 8px;
  min-width: 150px; margin: 0; padding: 8px 0; list-style: none;
  background: #fff; border-radius: 12px; box-shadow: var(--shadow-soft);
}
.lang-menu button {
  display: block; width: 100%; padding: 10px 28px 10px 16px; border: none; border-radius: 0;
  background: none; box-shadow: none;
  font-size: 18px; line-height: 26px; color: var(--ink); text-align: left; white-space: nowrap;
}
.lang-menu button:hover:not(:disabled) { background-color: var(--panel-soft); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =========================================================================
   5. お世話画面 — キャラクター画像の枠
   ========================================================================= */

.frame {
  position: relative; aspect-ratio: 1 / 1; border-radius: 22px;
  background: linear-gradient(180deg, #f7fcfe, var(--accent-soft));
  display: grid; place-items: center; overflow: hidden;
}
.frame img.art { width: 100%; height: 100%; object-fit: contain; display: block; }
.frame img.art[hidden] { display: none; }

.stage-frame { position: relative; }
.frame-edge {
  position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px);
  pointer-events: none; object-fit: fill;
}

/* =========================================================================
   6. お世話画面 — 満腹度のハート
   ========================================================================= */

.satiety {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .92); border-radius: 999px;
  padding: 10px 13px; box-shadow: var(--shadow-soft);
}
.satiety-label { font-size: 11px; color: var(--ink); white-space: nowrap; font-weight: 500; }
.hearts { display: flex; gap: 5px; }

.heart {
  position: relative; width: 16px; height: 16px; flex: none;
  background: url("assets/heart_empty.svg") center / contain no-repeat;
}
.heart::before {
  content: ''; position: absolute; inset: 0;
  background: url("assets/heart_full.svg") center / contain no-repeat;
  clip-path: inset(0 calc(100% - var(--fill, 0%)) 0 0);
  transition: clip-path .35s ease;
}
.satiety.full .hearts { filter: drop-shadow(0 0 3px rgba(249, 131, 107, .55)); }

/* =========================================================================
   7. お世話画面 — 状態描写・時計
   ========================================================================= */

.desc-wrap {
  background: url("assets/bg_status.svg") center bottom / 100% auto no-repeat;
  aspect-ratio: 376 / 84;
  display: flex; align-items: center; justify-content: center;
  --bleed-inset: 5px;
  padding: 6px 0 16px;
  margin-top: 4px;
  color: #605B54;
}
.desc {
  font-size: 15px; line-height: 1.9; text-align: center;
  font-weight: 500; letter-spacing: .01em;
  width: max(258px, calc(100% * 306 / 376 - 56px));
  max-width: 100%;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
  margin-right: calc(100% * 14 / 376);
}

@media (max-width: 334px) {
  .desc { font-size: 14px; width: 241px; }
}
@media (max-width: 313px) {
  .desc { font-size: 13px; width: 224px; }
}

.timer {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 12px; color: var(--ink); margin-top: 14px;
}
.timer img { width: 13px; height: 13px; display: block; }
.timer strong {
  color: var(--link); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px;
}

.stale-row {
  text-align: center; margin-top: 14px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; font-size: 12px; color: var(--ink);
}
.stale { display: contents; }
#refresh {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; border-radius: 0; box-shadow: none;
  padding: 0 0 4px; font-size: 12px; font-weight: 700;
  color: var(--link); border-bottom: 1px dashed currentColor;
}
#refresh:hover:not(:disabled) { background: none; opacity: .75; }
#refresh .ico { width: 15px; height: 15px; }

.notice {
  margin-top: 12px; font-size: 13px; color: var(--trace); text-align: center;
  background: var(--trace-soft); border-radius: 10px; padding: 8px 12px;
}

#main.intro {
  --t-head: .45s;
  --t-desc: calc(var(--t-head) + .6s);
  --t-after: calc(var(--t-desc) + var(--chars, 0) * var(--char-gap) + .3s);
}
.page:has(#main.intro) .site-head { animation: head-drop .45s cubic-bezier(.2, .8, .3, 1) both; }
.page:has(#main.intro) .site-head .title { animation: home-rise .35s ease-out .2s both; }
.page:has(#main.held) :is(.site-head, .site-head .title) { animation-play-state: paused !important; }
@keyframes head-drop { from { transform: translateY(calc(-100% - 12px)); } }
#main.intro .stage-frame { animation: home-rise .5s cubic-bezier(.2, .8, .3, 1) var(--t-head) both; }
#main.intro .satiety { animation: verdict-bounce .45s ease-out calc(var(--t-head) + .3s) both; }
#main.intro .heart { animation: heart-pop .4s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--t-head) + .35s + var(--n, 0) * 70ms); }
#main.intro .desc-wrap { animation: home-rise .45s ease-out calc(var(--t-head) + .45s) both; }
#main.intro .desc .char {
  animation: char-in .5s ease-out both;
  animation-delay: calc(var(--t-desc) + var(--i, 0) * var(--char-gap));
}
#main.intro .pad > :is(.timer, .stale-row, .notice, .controls) {
  animation: home-rise .35s ease-out both; animation-delay: var(--t-after);
}
#main.return .pad { animation: home-rise .3s ease-out both; }
#main.held, #main.held * { animation-play-state: paused !important; }
@keyframes home-rise {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
}
@keyframes heart-pop {
  0% { opacity: 0; transform: scale(0); }
  60% { opacity: 1; transform: scale(1.3); }
  80% { transform: scale(.9); }
}

/* =========================================================================
   8. お世話画面 — アクションの選択
   ========================================================================= */

.controls { margin: 14px 0 0; padding-bottom: 22px; }
.picker-row { display: flex; gap: 10px; align-items: center; }
.picker-trigger {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  background: #fff; border: none; border-radius: 999px; padding: 13px 18px;
  box-shadow: var(--btn-shadow); cursor: pointer; text-align: left;
  font: inherit; font-size: 13px; color: var(--text);
}
.picker-trigger img.lead { width: 22px; height: 20px; flex: none; }
.picker-trigger img.caret {
  width: 20px; height: 20px; flex: none; margin-left: auto;
  transition: transform .18s ease;
}
.picker-trigger[aria-expanded="true"] img.caret { transform: rotate(180deg); }
.picker-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-label.empty { color: var(--faint); }

button.decide {
  flex: none; width: 80px; padding: 8px 13px; border-radius: 22px; border: none;
  background: var(--heart); color: #fff; font: inherit;
  font-size: 14px; font-weight: 700; line-height: 26px;
  cursor: pointer; box-shadow: var(--btn-shadow);
  transition: background .15s, opacity .15s, transform .1s;
}
button.decide:disabled { opacity: .45; cursor: default; box-shadow: none; }
button.decide:active:not(:disabled) { transform: translateY(1px); }

.sheet {
  position: fixed; z-index: 5;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: calc(min(100%, var(--column)) - 12px);
  padding: 12px 14px 40px; border-radius: 20px;
  background: rgba(69, 135, 183, .93);
  box-shadow: 0 10px 30px rgba(18, 50, 67, .22);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  transform-origin: 0 0;
  animation: sheet-pop .45s cubic-bezier(.3, .7, .4, 1) both;
}
.sheet.closing { animation: sheet-close .2s cubic-bezier(.5, 0, .75, 0) both; pointer-events: none; }
@keyframes sheet-close {
  0% { scale: 1; opacity: 1; }
  30% { scale: 1.02; opacity: 1; }
  100% { scale: .6; opacity: 0; }
}
@keyframes sheet-pop {
  0% { scale: .6; opacity: 0; }
  45% { scale: 1.03; opacity: 1; }
  65% { scale: .97 1.02; }
  82% { scale: 1.01 .99; }
  100% { scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet.closing { animation: none; }
}
.sheet-head {
  text-align: center; color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 4px;
}
.sheet-rule {
  height: 3px; margin: 0 auto 12px; max-width: 149px;
  background: url("assets/line_wave.svg") repeat-x center / 149px 3px; opacity: .8;
}

/* =========================================================================
   9. ボタン
   ========================================================================= */

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
button {
  font: inherit; font-size: 14px; padding: 12px 8px; border-radius: 10px; cursor: pointer;
  background: #fff; color: var(--text); border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(18, 50, 67, .04);
  transition: background .15s, border-color .15s, transform .1s;
}
button:hover:not(:disabled) { border-color: var(--accent); background-color: var(--accent-soft); }
button:active:not(:disabled) { transform: translateY(1px); }

#actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#actions button {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; height: 66px; padding: 0 4px;
  border: none; border-radius: 9px;
  font-size: 13px; line-height: 16px; color: var(--ink); font-weight: 500;
  box-shadow: var(--btn-shadow);
}
#actions button img { width: 20px; height: 20px; display: block; }
#actions button span { display: inline-flex; align-items: center; gap: 2px; }
#actions button .caret { width: 12px; height: 12px; }

#actions button:disabled, #foods button:disabled {
  cursor: default; opacity: .5;
  box-shadow: var(--btn-shadow);
}
#actions button::after {
  content: var(--trace-label, "");
  position: absolute; left: 0; right: 0; bottom: 5px;
  font-size: 10px; line-height: 1.2; letter-spacing: .02em;
  visibility: hidden;
}
#actions button:disabled { padding-bottom: 15px; }
#actions button:disabled::after { visibility: visible; color: var(--trace); }

.foods {
  display: none; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-top: 22px;
}
.foods.open { display: grid; }
.foods button {
  font-size: 12px; line-height: 16px; padding: 6px 2px; border-radius: 999px; font-weight: 500;
  background: #2f6a8e; color: #fff; border: none;
  box-shadow: var(--btn-shadow);
}
.foods button:hover:not(:disabled) { background: #27597a; }

.legend { font-size: 11px; color: #eaf5fa; margin: 0 0 20px; text-align: center; }
.legend strong {
  font-weight: 400; background: var(--trace-soft); color: var(--trace);
  border-radius: 6px; padding: 1px 7px; margin-right: 5px;
}

/* =========================================================================
   10. 押せないとき
   ========================================================================= */

.locked {
  font-size: 13px; color: var(--ink); text-align: center;
  padding: 14px; background: #f4edde; border: none;
  border-radius: 7px; font-variant-numeric: tabular-nums;
}
.locked strong { color: inherit; font-weight: 700; }

.controls.guest .picker-row { opacity: .25; pointer-events: none; }

#main.unavailable .pad { visibility: hidden; }
body:has(#main.unavailable) #log-strip { display: none; }
.watching {
  position: relative; z-index: 1;
  margin-bottom: -20px; text-align: center; color: var(--brand);  padding-top: 10px;
}
.watching p { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.9; }

/* =========================================================================
   11. ボトムナビ
   ========================================================================= */

.nav {
  display: flex; justify-content: center; gap: 8px;
  background: url("assets/bg_grobal-nav-menu.png") top center / 100% auto no-repeat;
  padding: 3% 0 16%;
}
.nav button {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 60px; height: 52px;
  background: none; border: none; box-shadow: none; padding: 4px 0 0;
  font-size: 11px; font-weight: 500; line-height: 16px; white-space: nowrap;
  color: var(--ink); cursor: pointer; border-radius: 10px;
}
.nav button.hidden { display: none; }
.nav button:hover { background: rgba(255, 255, 255, .7); border-color: transparent; }
.nav button img { width: 24px; height: 24px; display: block; }
.nav button[aria-current]::after {
  content: ''; position: absolute; bottom: -3px; left: 50%; translate: -50% 0;
  width: 24px; height: 1px; border-radius: 1px; background: var(--current-mark);
}

.log-strip {
  background: var(--nav-pale);
  padding: 0 20px 34px; text-align: center;
}
.log-strip h2, #doc h2 {
  font-size: 15px; color: var(--ink); letter-spacing: .04em; margin: 0 0 12px;
  text-align: center;
}
.log-strip .sheet-rule, #doc .sheet-rule { opacity: 1; margin-bottom: 14px; }
#doc .note-block { margin-top: 0; }
.log-strip .care { margin-bottom: 14px; }
#log-strip-list {
  list-style: none; margin: 0 auto; padding: 0; max-width: 320px;
  font-size: 13px; text-align: left;
}
#log-strip-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 4px; line-height: 1.5;
  border-bottom: 1px solid var(--wave-line);
}
#log-strip-list .log-line { min-width: 0; }
#log-strip-list li.quiet { color: var(--faint); }
#log-strip-list li.event { color: var(--trace); }
#log-strip-list li.mine { color: var(--accent-deep); font-weight: 700; }

.avatar {
  width: 22px; height: 22px; flex: none; border-radius: 50%; overflow: hidden;
  background: var(--icon-bg, var(--line-soft));
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar img[hidden] { display: none; }
.memory .avatar { margin-right: 8px; vertical-align: -6px; display: inline-block; }
#log .avatar { width: 24px; height: 24px; }

/* =========================================================================
   12. ページ末尾の3段
   ========================================================================= */

.foot {
  display: grid;
  grid-template-rows: 255fr 442fr 427fr;
  aspect-ratio: 402 / 1124;
  box-shadow: 0 60px 0 var(--brand);
  background: url("assets/bg_wave-footer.png") top center / 100% 100% no-repeat;
  margin-top: -2%;
}
.band {
  display: grid; place-content: center; justify-items: center;
  padding: 0 26px; text-align: center;
  font-size: 15px; line-height: 26px;
}
.band-1 { color: var(--band-1-text); font-weight: 500; }
.band-2 { color: var(--band-2-text); }
.band-3 { color: var(--band-3-text); }

.band-title {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px;
  background: #fff; color: var(--brand); border-radius: 999px;
  padding: 6px 18px; font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.band-title img { width: 10px; height: 10px; display: block; }

.credit-row {
  display: flex; align-items: baseline; justify-content: center; gap: 4px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.credit-row .who { font-weight: 500; }

.out {
  display: inline-flex; align-items: center; gap: 5px; color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 4px;
  font-family: "Afacad", "Zen Kaku Gothic New", "Gowun Dodum", system-ui, sans-serif;
  font-size: 15px; font-weight: 500;
}
.ico {
  width: 18px; height: 18px; flex: none; display: block;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

.foot-site { font-weight: 700; margin-bottom: 2px; }
.foot-version {
  font-family: "Afacad", "Zen Kaku Gothic New", "Gowun Dodum", system-ui, sans-serif;
  font-size: 13px; font-weight: 500;
}
.foot-links { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 16px; }

.like {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 40px;
}
.like-btn {
  display: block; width: 48px; height: 48px; padding: 0;
  border: none; border-radius: 50%; background: none;
  box-shadow: 0 4px 4px rgba(113, 133, 150, .2);
}
.like-btn img { display: block; width: 48px; height: 48px; }
.like-btn:hover:not(:disabled) { background-color: transparent; opacity: .85; }
.like-btn.pressed { animation: like-press .42s ease-out; }
@keyframes like-press {
  0% { scale: 1; }
  30% { scale: .86; }
  65% { scale: 1.08; }
  100% { scale: 1; }
}

.like-count {
  min-height: 20px; line-height: 20px;
  font-family: "Afacad", "Zen Kaku Gothic New", "Gowun Dodum", system-ui, sans-serif;
  font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums;
}
@keyframes like-bump {
  0% { scale: 1; }
  40% { scale: 1.18; }
  100% { scale: 1; }
}

.like-btn { transition: opacity .2s; }
.like.thanked .like-btn { opacity: .45; }
.like-total {
  position: absolute; left: 50%; top: 24px; translate: -50% -50%;
  white-space: nowrap; pointer-events: none;
  color: #fff;
  font-family: "Afacad", "Zen Kaku Gothic New", "Gowun Dodum", system-ui, sans-serif;
  font-size: 20px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .2s;
}
.like.thanked .like-total { opacity: 1; }
.like-total.bump { animation: like-bump .3s ease-out; }
.like-thanks {
  display: none;
  min-height: 20px; line-height: 20px;
  font-family: "Afacad", "Zen Kaku Gothic New", "Gowun Dodum", system-ui, sans-serif;
  font-size: 15px; font-weight: 500;
}
.like.thanked .like-count { display: none; }
.like.thanked .like-thanks { display: block; }
@media (prefers-reduced-motion: reduce) {
  .like-btn, .like-total { transition: none; }
}

.like-burst {
  --spark-1: #ffcf4d;
  --spark-2: #ff9f8a;
  --spark-3: #6fd0e8;
  position: absolute; left: 50%; top: 24px; width: 0; height: 0;
  pointer-events: none;
}
.like-burst i {
  position: absolute; left: -1.5px; top: -4px; width: 3px; height: 8px;
  border-radius: 2px; background: var(--c);
  rotate: var(--a);
  opacity: 0;
  animation: like-spark .6s cubic-bezier(.15, .7, .3, 1) forwards;
}
@keyframes like-spark {
  0% { transform: translateY(-6px) scaleY(.6); opacity: 0; }
  12% { opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translateY(-40px) scaleY(.2); opacity: 0; }
}
.like-burst b {
  position: absolute; left: -2px; top: -2px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--c);
  rotate: var(--a);
  opacity: 0;
  animation: like-dot .55s .06s ease-out forwards;
}
@keyframes like-dot {
  0% { transform: translateY(-8px) scale(.4); opacity: 0; }
  20% { opacity: 1; }
  65% { opacity: 1; }
  100% { transform: translateY(-32px) scale(1); opacity: 0; }
}

.reveal {
  opacity: 0; translate: 0 18px;
  transition: opacity .6s ease-out, translate .6s ease-out;
}
.reveal.shown { opacity: 1; translate: none; }

/* =========================================================================
   13. お世話ログ
   ========================================================================= */

#log-modal .panel { border: none; padding: 20px; border-radius: 16px; }
#log { list-style: none; margin: 0; padding: 0; font-size: 13px; }
#pane-log, #pane-memory { height: 46vh; overflow-y: auto; }
#log li {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid var(--log-rule); line-height: 1.6; color: var(--ink);
}
#log .log-line { min-width: 0; }
#log li.quiet { color: var(--faint); font-size: 12px; }
#log li.event { color: var(--trace); }
#log li.mine { color: var(--accent-deep); font-weight: 700; }
.log-note {
  color: var(--trace); font-weight: 400;
  &::before { content: '　… '; }
}
.care {
  font-size: 13px; color: var(--accent-deep); margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.care strong { color: var(--brand); font-weight: inherit; }
.log-strip .care { color: var(--ink); }
#log-modal .care { text-align: center; margin-bottom: 8px; color: var(--ink); }

/* =========================================================================
   14. 入力欄
   ========================================================================= */

input[type=text] {
  font: inherit; padding: 12px 14px; border-radius: 10px; width: 100%;
  background: var(--panel-soft); color: var(--text); border: 1px solid var(--line);
}
input[type=text]:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

/* =========================================================================
   15. 登録画面とマイページ — お世話参加証のカード
   ========================================================================= */

.entry { max-width: 440px; margin: 0 var(--pad); padding: 4px 0 24px; }

.card {
  position: relative;
  margin-inline: calc((var(--pad) - var(--card-edge)) * -1.5);
  padding: 28px var(--card-pad) var(--card-pad-bottom); color: var(--card-text);
  background: url(assets/card_background.svg) center / 100% 100% no-repeat;
}
.card.friend {
  isolation: isolate;
  background: url(assets/card_background2.svg) center / 100% 100% no-repeat;
}
.card.friend::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 13px; top: 10px; width: 86px; height: 89px;
  background: url(assets/card_background_stamp.svg) center / 100% 100% no-repeat;
  rotate: -33.4deg;
  mix-blend-mode: hard-light;
}

.card-head {
  border-bottom: 1px solid var(--card-line);
  padding-bottom: 16px; margin-bottom: 12px;
  margin-inline: calc((var(--card-pad) - var(--card-rule-inset)) * -1);
  padding-left: calc(var(--card-pad) - var(--card-rule-inset));
  padding-right: calc(var(--card-icon-inset) + var(--card-pad) - var(--card-rule-inset));
}
.card-head img { max-width: calc(100% - 8px); height: auto; display: block; margin: 0 auto; }

.card-icon {
  position: absolute; top: 32px; right: var(--card-icon-right); z-index: 1;
  width: var(--card-icon-w); height: 126px; background: var(--icon-bg);
  border: 1px solid var(--card-line);
  border-radius: 2px;
}
.card-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-icon img[hidden] { display: none; }

#entry[data-mode="login"] .card-icon { background: var(--card-field); }
#entry[data-mode="login"] :is(.icon-edit, .card-icon img) { display: none; }

.icon-edit {
  position: absolute; top: -9px; right: -9px; width: 24px; height: 24px;
  padding: 0; margin: 0; border: none; border-radius: 50%; background: transparent;
  background-image: url(assets/icon_edit.svg);
  background-size: contain; background-position: center; background-repeat: no-repeat;
}

.card .field { margin-top: 13px; }
.card .field-narrow { max-width: calc(100% - var(--card-icon-gap)); }
.card .field-label {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 500; color: var(--card-text); margin-bottom: 2px;
}
.card .field input, .card .field select, .card .field-value {
  width: 100%; height: var(--card-field-h); margin: 0;
  background: var(--card-field); color: var(--card-text);
  border: none; border-radius: 8px; padding: 0 12px; font-size: 13px;
  font-family: inherit; line-height: var(--card-field-h);
}
.card .field-value { display: flex; align-items: center; line-height: 1.5; }
.card .field input::placeholder { color: var(--card-muted); }
.card .field input:focus, .card .field select:focus {
  outline: none; box-shadow: inset 0 0 0 1px #8c6845;
}
.card .field input { text-overflow: ellipsis; }
.card .field-value { min-height: 38px; }
.card .field select { appearance: none; padding-right: 40px; }
.field-select { position: relative; }
#mypage-body[data-mode="edit"] .field-select::after {
  content: ''; position: absolute; right: 12px; bottom: 11px;
  width: 20px; height: 20px; pointer-events: none;
  background-color: var(--card-text);
  -webkit-mask: url(assets/icon_arrow-pull-down.svg) center / contain no-repeat;
  mask: url(assets/icon_arrow-pull-down.svg) center / contain no-repeat;
}

.card-gifts {
  position: absolute; right: var(--card-icon-right); bottom: var(--card-pad-bottom);
  width: var(--card-icon-w); height: var(--card-field-h);
  margin: 0; padding: 0 4px;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  background: #fff; border: none; border-radius: 6px;
  font-size: 12px; font-weight: 500; color: var(--ink); white-space: nowrap;
  box-shadow: var(--card-btn-shadow);
}
.card-gifts::before {
  content: ''; width: 23px; height: 18px; flex: none;
  background: url(assets/icon_gift2.svg) center / contain no-repeat;
}
.card-gifts:hover:not(:disabled) { background: #fffae3; }
.gift-count {
  position: absolute; z-index: 1; top: -8px; right: -8px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; box-shadow: 0 0 0 2px #fff; pointer-events: none;
  font-size: 12px; font-weight: 700; line-height: 1;
}
.gift-count.complete { background: var(--gold); color: var(--card-text); }

#secret-row { display: flex; flex-wrap: nowrap; gap: 10px; align-items: center; justify-content: space-between; }
#secret-row input { flex: 0 1 150px; width: auto; min-width: 110px; }
.card .submit {
  flex: 0 1 164px; height: 44px; margin: 0; white-space: nowrap;
  background: #fff; color: var(--card-text); border: 1px solid var(--card-line);
  border-radius: 999px; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: var(--card-btn-shadow);
}
.card .submit:hover:not(:disabled) { background: #fffae3; }
.card .submit::before {
  content: ''; width: 20px; height: 20px; flex: none;
  background: url(assets/icon_check.svg) center / contain no-repeat;
}
.card .submit:disabled::before { background-image: url(assets/icon_check_.svg); }
.card .submit:disabled { opacity: .4; box-shadow: var(--card-btn-shadow); }

.hint-open {
  width: 16px; height: 16px; flex: none; padding: 0; margin: 0;
  border: none; border-radius: 50%; background: transparent;
  background-image: url(assets/icon_help.svg);
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
.hint-open:hover:not(:disabled), .icon-edit:hover:not(:disabled) {
  border-color: transparent; background-color: transparent; opacity: .7;
}

.entry .need { font-size: 12px; margin: 10px 0 0; color: var(--card-text); }
.entry .done { font-size: 13px; margin: 0 0 10px; color: var(--accent-deep); }

.friend-note { font-size: 13px; line-height: 1.9; color: var(--ink); margin: 14px 0 0; text-align: center; text-wrap: balance; }

.note-block { margin-top: 22px; }
.note-block h2 { font-size: 13px; margin: 0 0 6px; color: var(--ink); }
.note-block p { font-size: 13px; margin: 0 0 8px; line-height: 1.9; color: var(--ink); }

#mypage-body[data-mode="view"] :is(#mypage-name, #mypage-attribute, .icon-edit),
#mypage-body[data-mode="view"] :is(#mypage-cancel, #mypage-save),
#mypage-body:not([data-mode="edit"]) #mypage-name-label-edit,
#mypage-body[data-mode="edit"] :is(#mypage-name-view, #mypage-attribute-view),
#mypage-body[data-mode="edit"] :is(#mypage-name-label-view, .card-gifts),
#mypage-body[data-mode="edit"] #mypage-edit { display: none; }

#mypage-body[data-mode="guest"] :is(#mypage-name, #mypage-attribute, .icon-edit),
#mypage-body[data-mode="guest"] :is(#mypage-cancel, #mypage-save),
#mypage-body[data-mode="guest"] .note-block { display: none; }
#mypage-body:not([data-mode="guest"]) #mypage-guest { display: none; }
#mypage-body[data-mode="guest"] :is(.card, .card-actions:not(.guest-switch)) {
  opacity: .5; pointer-events: none;
}

#mypage-guest .join {
  width: 100%; max-width: 306px; margin-inline: auto;
  background: var(--heart); color: #fff; border-color: var(--heart);
  border-radius: 999px; height: 48px; font-weight: 700; font-size: 14px;
  box-shadow: var(--btn-shadow);
}
#mypage-guest .join:hover:not(:disabled) { background: #f7735a; border-color: #f7735a; }
#mypage-guest p { font-size: 13px; line-height: 1.9; color: var(--ink); margin: 0; }
#mypage-guest .edit-open { color: var(--heart); }
#mypage-guest .guest-switch { justify-content: center; }

#mypage.enter {
  --t-name: .85s;
  --t-attr: calc(var(--t-name) + var(--name-chars, 0) * var(--char-gap) + .15s);
  --t-after: calc(var(--t-attr) + var(--attr-chars, 0) * var(--char-gap) + .25s);
}
#mypage.enter .card { animation: card-flip .8s both; }
#mypage.enter .card::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: url(assets/card_background.svg) center / 100% 100% no-repeat;
  animation: card-back .8s step-end both;
}
#mypage.enter .card.friend::after { background-image: url(assets/card_background2.svg); }
.card-shine { display: none; }
:is(#mypage.enter .card.friend, #gift-friend-view.play .gift-friend-card) .card-shine {
  display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  -webkit-mask: url(assets/card_background2.svg) center / 100% 100% no-repeat;
  mask: url(assets/card_background2.svg) center / 100% 100% no-repeat;
  background: linear-gradient(115deg,
    transparent 38%, rgba(255, 252, 238, .35) 45%, rgba(255, 255, 255, .85) 50%,
    rgba(255, 252, 238, .35) 55%, transparent 62%) 0 0 / 250% 100% no-repeat;
  animation: card-shine .8s ease-in-out var(--shine-at, .85s) both;
}
#mypage.enter .card.friend::before {
  animation: stamp-press .5s cubic-bezier(.3, .7, .4, 1) 1.6s both;
}
@keyframes card-shine {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}
@keyframes stamp-press {
  0% { opacity: 0; scale: 1.8; }
  60% { opacity: 1; scale: .92; }
  80% { scale: 1.04; }
  100% { opacity: 1; scale: 1; }
}
#mypage.enter [data-mode="view"] #mypage-name-view .char {
  animation: char-in .5s ease-out both;
  animation-delay: calc(var(--t-name) + var(--i, 0) * var(--char-gap));
}
#mypage.enter [data-mode="view"] #mypage-attribute-view .char {
  animation: char-in .5s ease-out both;
  animation-delay: calc(var(--t-attr) + var(--i, 0) * var(--char-gap));
}
#mypage.enter [data-mode="view"] .card-gifts {
  animation: gifts-wiggle .6s ease-in-out both; animation-delay: var(--t-after);
}
#mypage.enter [data-mode="view"] :is(.card-actions, .note-block) {
  animation: home-rise .35s ease-out both; animation-delay: var(--t-after);
}
#mypage.enter [data-mode="guest"] #mypage-guest {
  animation: home-rise .35s ease-out both; animation-delay: var(--t-name);
}
#mypage.enter [data-mode="guest"] .join {
  animation: verdict-bounce .45s ease-out both; animation-delay: calc(var(--t-name) + .45s);
}
@keyframes card-flip {
  0% { filter: opacity(0); transform: perspective(1200px) translateY(16px) rotateY(180deg) scale(.9); animation-timing-function: ease-in; }
  15% { filter: opacity(1); }
  50% { transform: perspective(1200px) translateY(6px) rotateY(90deg) scale(.95); animation-timing-function: cubic-bezier(.2, .8, .3, 1.2); }
  100% { filter: none; transform: perspective(1200px); }
}
@keyframes card-back {
  0% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes gifts-wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-6deg); }
  40% { transform: rotate(5deg); }
  60% { transform: rotate(-3deg); }
  80% { transform: rotate(1.5deg); }
}

.card-actions, .picker-actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px;
}
:is(.card-actions, .picker-actions) button {
  margin: 0; min-width: 104px; font-size: 13px; border-radius: 999px;
}
:is(.card-actions, .picker-actions) .secondary {
  background: #fff; color: var(--card-text); border-color: var(--card-line);
}
:is(.card-actions, .picker-actions) .secondary:hover:not(:disabled) {
  background: var(--card-field); color: var(--card-text);
}
:is(.card-actions, .picker-actions) .primary {
  background: var(--card-line); color: #fff; border-color: var(--card-line);
}
:is(.card-actions, .picker-actions) .primary:hover:not(:disabled) {
  background: var(--card-text); border-color: var(--card-text);
}
.card-actions .edit-open {
  min-width: 0; padding: 0 0 4px; border: none; border-radius: 0; background: none;
  color: var(--ink); font-size: 12px;
  border-bottom: 1px dashed currentColor;
  display: inline-flex; align-items: center; gap: 5px;
}
.card-actions .edit-open:hover:not(:disabled) {
  background-color: transparent; border-bottom-color: currentColor;
}

.card-actions .edit-open::before {
  content: ''; width: 14px; height: 12px; flex: none; background-color: currentColor;
  -webkit-mask: url(assets/icon_user-mark.svg) center / contain no-repeat;
  mask: url(assets/icon_user-mark.svg) center / contain no-repeat;
}

@media (max-width: 360px) {
  :root { --card-icon-w: 84px; --card-icon-right: 20px; --card-pad: 16px; }
  .card-icon { height: 102px; }
  .card .field-label { font-size: 11px; }
}

@media (min-width: 480px) {
  .card { margin-inline: 0; }
}
button.secondary { background: transparent; color: var(--muted); border-color: var(--line-soft); }
button.secondary:hover:not(:disabled) { color: var(--accent-deep); background: var(--panel-soft); }
button.primary {
  background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700;
}
button.primary:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); }
button.primary:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* =========================================================================
   16. 結果画面
   ========================================================================= */

.verdict {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  display: flex; align-items: center; gap: 8px;
}
.reaction {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .92); border-radius: 999px;
  padding: 10px 13px; box-shadow: var(--shadow-soft);
}
.reaction-label { font-size: 11px; color: var(--ink); white-space: nowrap; font-weight: 500; }
.marks { display: flex; gap: 5px; }
#result {
  --t-stars: calc(var(--veil-out) + .35s);
  --star-gap: .3s;
  --t-text: calc(var(--t-stars) + var(--stars, 0) * var(--star-gap) + .35s);
  --t-gift: calc(var(--t-text) + var(--chars, 0) * var(--char-gap) + .3s);
}
.reaction { animation: verdict-bounce .45s ease-out both; animation-delay: calc(var(--t-stars) - .3s); }
@keyframes verdict-bounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  70% { transform: scale(.97); }
  100% { transform: scale(1); }
}

.mark {
  position: relative; width: 16px; height: 16px; flex: none;
  background: url("assets/sparkle_empty.svg") center / contain no-repeat;
  animation: mark-slot .35s ease-out both;
  animation-delay: calc(var(--t-stars) + var(--stars, 0) * var(--star-gap) + .1s);
}
@keyframes mark-slot { from { opacity: 0; transform: scale(.5); } }
.mark.on { background: none; animation: none; }
.mark.on::after, .mark.on::before {
  content: ''; position: absolute; inset: 0;
  background: url("assets/sparkle_full.svg") center / contain no-repeat;
}
.mark.on::after {
  animation: mark-pop .6s cubic-bezier(.3, 1.4, .5, 1) both;
  animation-delay: calc(var(--t-stars) + var(--n, 0) * var(--star-gap));
}
.mark.on::before {
  opacity: 0;
  animation: mark-burst .6s ease-out both;
  animation-delay: calc(var(--t-stars) + var(--n, 0) * var(--star-gap) + .2s);
}
.mark:nth-child(2) { --n: 1; }
.mark:nth-child(3) { --n: 2; }
@keyframes mark-pop {
  0% { transform: scale(0) rotate(-160deg); opacity: 0; }
  55% { transform: scale(2) rotate(12deg); opacity: 1; }
  78% { transform: scale(.85) rotate(-4deg); }
  100% { transform: none; opacity: 1; }
}
@keyframes mark-burst {
  0% { transform: scale(.8); opacity: .75; }
  100% { transform: scale(3.6); opacity: 0; }
}
.marks.full .mark.on::after {
  animation: mark-pop .6s cubic-bezier(.3, 1.4, .5, 1) both, mark-twinkle .5s ease-in-out;
  animation-delay:
    calc(var(--t-stars) + var(--n, 0) * var(--star-gap)),
    calc(var(--t-stars) + 3 * var(--star-gap) + .3s);
}
@keyframes mark-twinkle {
  50% { transform: scale(1.4) rotate(18deg); filter: drop-shadow(0 0 3px #fff); }
}

.reaction-text .char {
  animation: char-in .5s ease-out both;
  animation-delay: calc(var(--t-text) + var(--i, 0) * var(--char-gap));
}
@keyframes char-in {
  from { opacity: 0; text-shadow: 0 0 10px var(--sky), 0 0 4px var(--sky); }
  to { opacity: 1; text-shadow: 0 0 0 transparent; }
}

.wave-veil {
  position: fixed; inset: 0; z-index: 20; overflow: hidden;
  --back-1: #d6f3fa;  --back-2: #a4def0;  --back-3: #72c4e2;
  --mid-1: #aee6f5;   --mid-2: #5cc0e2;   --mid-3: #2f97c6;
  --front-1: #8fdcf0; --front-2: #3aa8d4; --front-3: #1b74a8;
}
.wave-veil.out { pointer-events: none; }
.wave-defs { position: absolute; width: 0; height: 0; }
#wave-grad-back stop:nth-child(1)  { stop-color: var(--back-1); }
#wave-grad-back stop:nth-child(2)  { stop-color: var(--back-2); }
#wave-grad-back stop:nth-child(3)  { stop-color: var(--back-3); }
#wave-grad-mid stop:nth-child(1)   { stop-color: var(--mid-1); }
#wave-grad-mid stop:nth-child(2)   { stop-color: var(--mid-2); }
#wave-grad-mid stop:nth-child(3)   { stop-color: var(--mid-3); }
#wave-grad-front stop:nth-child(1) { stop-color: var(--front-1); }
#wave-grad-front stop:nth-child(2) { stop-color: var(--front-2); }
#wave-grad-front stop:nth-child(3) { stop-color: var(--front-3); }

.wave {
  --head: 70vh;
  --body: 140vw;
  position: absolute; left: 0; bottom: 0; height: 100vh; display: flex;
  transform: translateX(100vw);
}
.wave-back  { --fill: url(#wave-grad-back);  --g1: var(--back-1);  --g2: var(--back-2);  --g3: var(--back-3);  --lead: 36vw; --bob: .5s; }
.wave-mid   { --fill: url(#wave-grad-mid);   --g1: var(--mid-1);   --g2: var(--mid-2);   --g3: var(--mid-3);   --lead: 18vw; --bob: .44s; }
.wave-front { --fill: url(#wave-grad-front); --g1: var(--front-1); --g2: var(--front-2); --g3: var(--front-3); --lead: 0vw;  --bob: .47s; }

.wave-head, .wave-tail {
  flex: none; width: var(--head); height: 100%; overflow: visible;
  animation: wave-bob var(--bob) ease-in-out infinite alternate;
}
.wave-head { transform-origin: 100% 100%; }
.wave-tail { transform-origin: 0 100%; margin-left: -3vh; }
.wave-body {
  flex: none; width: var(--body); height: 100%; margin-left: -3vh;
  background: linear-gradient(var(--g1), var(--g2) 55%, var(--g3));
}
.wave-body svg { display: block; width: 100%; height: 100%; }
.wave-fill { fill: var(--fill); }
.wave-lines path { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; opacity: .22; }
.wave-froth circle { fill: #fff; opacity: .92; }
.wave-spray circle { fill: #fff; }
.wave-ripple {
  fill: none; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; opacity: .22;
}

.wave-veil.in .wave { animation: wave-in var(--veil-in) cubic-bezier(.12, .8, .3, 1) var(--veil-wait) both; }
.wave-veil.in .wave-mid { animation-delay: calc(var(--veil-wait) + .05s); }
.wave-veil.in .wave-front { animation-delay: calc(var(--veil-wait) + .1s); }
.wave-veil.out .wave { animation: wave-out var(--veil-out) cubic-bezier(.55, 0, .45, 1) both; }
.wave-veil.out .wave-mid { animation-delay: .03s; }
.wave-veil.out .wave-front { animation-delay: .06s; }

@keyframes wave-in {
  from { transform: translateX(100vw); }
  to { transform: translateX(calc(-1 * var(--head) - 2vw - var(--lead))); }
}
@keyframes wave-out {
  from { transform: translateX(calc(-1 * var(--head) - 2vw - var(--lead))); }
  to { transform: translateX(calc(-2 * var(--head) - var(--body) - 4vw - var(--lead))); }
}
@keyframes wave-bob {
  from { transform: scaleY(.985) rotate(.8deg); }
  to { transform: scaleY(1.04) rotate(-1deg); }
}

.bubbles i {
  position: absolute; bottom: -24px; width: var(--s, 14px); height: var(--s, 14px);
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .18); opacity: 0;
}
.wave-veil.out .bubbles i {
  animation: bubble-rise calc(var(--veil-out) - .05s) cubic-bezier(.2, .6, .4, 1) both;
  animation-delay: var(--d, 0s);
}
.bubbles i:nth-child(1) { left: 8%;  --s: 18px; --d: 0s;   --h: 70vh; }
.bubbles i:nth-child(2) { left: 19%; --s: 10px; --d: .06s; --h: 55vh; }
.bubbles i:nth-child(3) { left: 31%; --s: 24px; --d: .02s; --h: 80vh; }
.bubbles i:nth-child(4) { left: 42%; --s: 12px; --d: .09s; --h: 60vh; }
.bubbles i:nth-child(5) { left: 54%; --s: 20px; --d: .04s; --h: 75vh; }
.bubbles i:nth-child(6) { left: 63%; --s: 9px;  --d: .1s;  --h: 50vh; }
.bubbles i:nth-child(7) { left: 74%; --s: 16px; --d: .01s; --h: 68vh; }
.bubbles i:nth-child(8) { left: 85%; --s: 22px; --d: .07s; --h: 78vh; }
.bubbles i:nth-child(9) { left: 93%; --s: 11px; --d: .03s; --h: 58vh; }
@keyframes bubble-rise {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(calc(var(--h) * -1)) scale(1); opacity: 0; }
}

#result.settled :is(.reaction, .mark, .reaction-text .char) { animation: none; }
#result.settled .mark.on::after, #result.settled .mark.on::before { animation: none; }
#result.settled .gift-open { animation: gift-wiggle 3.4s ease-in-out infinite; }
#result.settled .gift-open::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #result :is(.reaction, .mark, .reaction-text .char) { animation: none; }
  #result .mark.on::after, #result .mark.on::before { animation: none; }
  #result .gift-open, #result.settled .gift-open { animation: none; }
  #result .gift-open::before { animation: none; }
}

.gift-open {
  position: relative;
  width: 36px; height: 36px; flex: none; padding: 0;
  border: none; border-radius: 50%; background: transparent;
  box-shadow: var(--shadow-soft);
  display: grid; place-items: center;
  animation: gift-arrive 1.6s ease-in-out both, gift-wiggle 3.4s ease-in-out infinite;
  animation-delay: var(--t-gift, 0s), calc(var(--t-gift, 0s) + 1.6s);
}
@keyframes gift-arrive {
  0% { transform: translate(var(--gift-dx, 0), var(--gift-dy, 0)) scale(0) rotate(-40deg); opacity: 0; }
  16% { transform: translate(var(--gift-dx, 0), var(--gift-dy, 0)) scale(3.6) rotate(10deg); opacity: 1; }
  26% { transform: translate(var(--gift-dx, 0), var(--gift-dy, 0)) scale(3) rotate(-8deg); }
  36% { transform: translate(var(--gift-dx, 0), var(--gift-dy, 0)) scale(3.2) rotate(6deg); }
  52% { transform: translate(var(--gift-dx, 0), var(--gift-dy, 0)) scale(3.1) rotate(0); }
  84% { transform: scale(.8); }
  93% { transform: scale(1.15); }
  100% { transform: none; opacity: 1; }
}
.gift-open::before {
  content: ''; position: absolute; inset: -30px; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 255, 255, .95) 0 9deg, transparent 9deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%);
  mask: radial-gradient(circle, #000 25%, transparent 70%);
  opacity: 0;
  animation: gift-rays 1.6s linear both;
  animation-delay: var(--t-gift, 0s);
}
@keyframes gift-rays {
  0% { opacity: 0; transform: rotate(0) scale(.4); }
  14% { opacity: 1; }
  50% { opacity: 1; transform: rotate(80deg) scale(1); }
  70% { opacity: 0; transform: rotate(110deg) scale(.6); }
  100% { opacity: 0; transform: rotate(110deg) scale(.6); }
}
.gift-open:hover:not(:disabled) { background: transparent; border-color: transparent; }
.gift-open img { width: 100%; height: 100%; display: block; }
@keyframes gift-wiggle {
  0%, 70%, 100% { transform: rotate(0); }
  74% { transform: rotate(-12deg); }
  79% { transform: rotate(10deg); }
  84% { transform: rotate(-7deg); }
  89% { transform: rotate(4deg); }
  94% { transform: rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .gift-open { animation: none; }
  #menu .panel, #menu.closing .panel { animation: none; }
}

.reaction-text { word-break: auto-phrase; }

.result-care {
  font-size: 13px; color: var(--ink); text-align: center;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.result-care strong { color: var(--brand); font-weight: inherit; }

.share-link {
  display: inline-block; text-decoration: none; font-size: 14px; padding: 11px 22px;
  border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--text);
}
.share-link:hover { border-color: var(--accent); background: var(--accent-soft); }
:is(#result, #menu, #photo) .share-link {
  display: block; text-align: center;
  background: var(--share-bg); color: #fff; border: none;
  font-weight: 700; box-shadow: var(--btn-shadow);
}
:is(#result, #menu, #photo) .share-link:hover { background: var(--share-bg); filter: brightness(1.12); }
#result .share-link {
  width: min(200px, 100%); margin: 16px auto 0;
  padding: 14px 18px; font-size: 15px; letter-spacing: .02em;
}
#result { padding-bottom: 26px; }
#menu .share-link { width: min(100%, 170px); margin: 0 auto; padding: 13px 14px; }
#result .share-link.hot {
  box-shadow: var(--btn-shadow), 0 6px 18px rgba(64, 85, 115, .28);
}

/* =========================================================================
   17. マイページ — 未登録の案内
   ========================================================================= */

.mypage { max-width: 440px; margin: 8px 0 24px; }
.mypage p { font-size: 14px; color: var(--muted); line-height: 1.9; }

/* =========================================================================
   18. モーダル
   ========================================================================= */

.modal {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(18, 50, 67, .32);
  display: grid; place-items: center; padding: 10px;
}
.modal .panel { max-width: 420px; width: 100%; max-height: 86vh; overflow-y: auto; }
.modal:not(#menu, #fanwork-modal) { animation: modal-veil .25s ease-out; }
.modal:not(#menu, #fanwork-modal) .panel { animation: modal-rise .4s cubic-bezier(.2, .8, .3, 1); }
.modal.closing:not(#menu, #fanwork-modal) { animation: modal-veil-out .22s ease-in both; pointer-events: none; }
.modal.closing:not(#menu, #fanwork-modal) .panel { animation: modal-sink .22s ease-in both; }
@keyframes modal-veil { from { background-color: rgba(18, 50, 67, 0); } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes modal-veil-out { to { background-color: rgba(18, 50, 67, 0); } }
@keyframes modal-sink { to { opacity: 0; transform: translateY(28px); } }
@media (prefers-reduced-motion: reduce) {
  .modal:not(#menu, #fanwork-modal), .modal:not(#menu, #fanwork-modal) .panel { animation: none; }
}
.modal h2 {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 15px; font-weight: 700; color: var(--brand);
  text-align: center; margin: 0 0 10px;
}
.modal .sheet-rule { opacity: 1; margin-bottom: 16px; }

:is(#hint, #gift-modal, #gift-list, #closed-modal) .panel {
  border: none; padding: 20px; border-radius: 16px;
}
#hint h2 {
  justify-content: flex-start; text-align: left;
  font-size: 12px; color: var(--ink);
  border-bottom: 1px solid #d9cfb7; padding-bottom: 10px; margin-bottom: 14px;
}
#hint h2::before {
  content: ''; width: 16px; height: 16px; flex: none;
  background: url(assets/icon_help.svg) center / contain no-repeat;
}
.hint-body { font-size: 14px; line-height: 1.9; color: var(--ink); }
.hint-body p { margin: 0; }
:is(#hint, #gift-modal, #gift-list, #howto, #log-modal, #fanwork-modal, #closed-modal, #news-modal) .stack {
  justify-items: center; margin-top: 18px;
}
:is(#hint, #gift-modal, #gift-list, #howto, #log-modal, #fanwork-modal, #closed-modal, #news-modal) .stack button {
  min-width: 124px; margin: 0; padding: 9px 20px; border-radius: 999px;
  font-size: 13px;
}

#gift-modal .panel { text-align: center; }
.gift-text { font-size: 14px; font-weight: 400; line-height: 1.9; color: var(--ink); margin: 0; }
.gift-caption { font-size: 12px; font-weight: 400; line-height: 1.8; color: var(--ink); margin: 2px 0 0; }
.gift-art { width: 152px; max-width: 60%; margin: 14px auto 10px; border-radius: 16px; }
.gift-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.gift-note { font-size: 11px; color: var(--card-muted); margin-top: 14px; line-height: 1.7; }

.gift-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 12px; margin: 0; padding: 0; list-style: none;
}
.gift-tile { border-radius: 12px; margin-bottom: 6px; }
button.gift-tile {
  width: 100%; padding: 0; border: none; box-shadow: none;
  font: inherit; color: inherit;
}
button.gift-tile:hover:not(:disabled) { opacity: .8; }

#gift-detail-view { text-align: center; }
.gift-detail-art { width: 260px; max-width: 100%; margin: 4px auto 10px; border-radius: 16px; }
.gift-views { position: relative; }
.gift-views.sliding { overflow: hidden; margin-inline: -20px; padding-inline: 20px; }
.gift-views.sliding > .leaving { position: absolute; top: 0; left: 20px; right: 20px; }
#gift-detail-back::before {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px;
  border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  rotate: 45deg; vertical-align: .1em;
}
.gift-tile.locked { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.gift-unknown { font-size: 20px; font-weight: 700; color: var(--muted); }
.gift-label {
  display: block; min-height: 1.5em; text-align: center;
  font-size: 11px; line-height: 1.5; color: var(--ink);
}
.gift-lead, .gift-empty { font-size: 13px; line-height: 1.9; color: var(--ink); margin: 0; }
.gift-lead { margin-bottom: 14px; }

.gift-complete-grid .gift-tile { margin-bottom: 0; }
.gift-complete-grid .gift-tile::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .9) 50%, transparent 70%) 0 0 / 250% 100% no-repeat;
}
.gift-complete-done { margin: 16px 0 0; font-size: 15px; font-weight: 700; line-height: 1.7; color: var(--ink); }
#gift-complete-view { --tiles-at: .45s; --shine-from: 1.05s; --shine-gap: 80ms; }
#gift-complete-view.play .gift-tile.last { animation: tile-arrive .55s cubic-bezier(.3, 1.5, .5, 1) var(--tiles-at) both; }
#gift-complete-view.play .gift-tile::after {
  animation: tile-shine .6s ease-out both;
  animation-delay: calc(var(--shine-from) + var(--n, 0) * var(--shine-gap));
}
#gift-complete-view.play .gift-complete-done {
  animation: complete-pop .5s cubic-bezier(.3, 1.4, .5, 1) both;
  animation-delay: calc(var(--shine-from) + var(--count, 0) * var(--shine-gap) + .15s);
}
@keyframes tile-arrive {
  0% { opacity: 0; scale: 0; }
  70% { opacity: 1; scale: 1.12; }
  100% { opacity: 1; scale: 1; }
}
@keyframes tile-shine {
  0% { opacity: 0; background-position: 100% 0; }
  30% { opacity: 1; }
  100% { opacity: 0; background-position: 0 0; }
}
@keyframes complete-pop {
  0% { opacity: 0; scale: .7; }
  100% { opacity: 1; scale: 1; }
}

.gift-friend-card {
  position: relative; isolation: isolate; box-sizing: border-box;
  width: min(100%, 300px); aspect-ratio: 384 / 260; margin: 2px auto 0; padding: 8% 8% 9%;
  display: grid; grid-template-columns: 1fr 27%; grid-template-rows: auto 1fr; column-gap: 7%; row-gap: 6%;
  color: var(--card-text); text-align: left;
  background: url(assets/card_background2.svg) center / 100% 100% no-repeat;
}
.gift-friend-card::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 3.4%; top: 3.8%; width: 22.4%; aspect-ratio: 86 / 89;
  background: url(assets/card_background_stamp.svg) center / 100% 100% no-repeat;
  rotate: -33.4deg;
  mix-blend-mode: hard-light;
}
.gift-friend-title { grid-column: 1 / -1; justify-self: center; max-width: 72%; height: auto; display: block; }
.gift-friend-name {
  align-self: center; font-size: 15px; font-weight: 700; line-height: 1.5;
  overflow-wrap: anywhere; border-bottom: 1px solid var(--card-line); padding-bottom: 6px;
}
.gift-friend-icon {
  align-self: start; aspect-ratio: 105 / 126; overflow: hidden;
  background: var(--icon-bg); border: 1px solid var(--card-line); border-radius: 2px;
}
.gift-friend-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gift-friend-icon img[hidden] { display: none; }
.gift-friend-note { margin-top: 16px; }
#gift-done-actions { justify-content: center; }
#gift-done-actions .secondary { flex: 0 0 auto; }
#gift-done-actions .primary { flex: 0 1 140px; }
#gift-friend-view { --flip-at: .35s; --shine-at: 1.2s; --stamp-at: 1.95s; --note-at: 2.45s; }
#gift-friend-view.play .gift-friend-card { animation: card-flip .8s var(--flip-at) both; }
#gift-friend-view.play .gift-friend-card::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: url(assets/card_background.svg) center / 100% 100% no-repeat;
  animation: card-back .8s step-end var(--flip-at) both;
}
#gift-friend-view.play .gift-friend-card::before {
  animation: stamp-press .5s cubic-bezier(.3, .7, .4, 1) var(--stamp-at) both;
}
#gift-friend-view.play .gift-friend-note { animation: home-rise .4s ease-out var(--note-at) both; }

.reward-open {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin: 18px auto 2px; padding: 10px 20px;
  background: #fff; border: none; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--ink);
  box-shadow: var(--card-btn-shadow);
}
.reward-open::before {
  content: ''; width: 23px; height: 18px; flex: none;
  background: url(assets/icon_gift2.svg) center / contain no-repeat;
}
.reward-open:hover:not(:disabled) { background: #fffae3; color: var(--ink); }
.reward-group { margin: 14px 0 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.reward-group:first-child { margin-top: 0; }
#reward-none { margin-bottom: 14px; }
.reward-tile { display: block; width: 100%; margin-bottom: 6px; }
.reward-tile img[hidden] { display: none; }
.reward-tile.owned { position: relative; box-shadow: inset 0 0 0 3px var(--current-mark); }
.reward-tile.owned::after {
  content: ''; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
  background: url(assets/icon_check.svg) center / contain no-repeat;
}
.reward-tile.short { position: relative; }
.reward-tile.short::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .55);
}
.reward-tile.short::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; translate: -50% -50%;
  background: url(assets/icon_lock.svg) center / contain no-repeat; opacity: .6;
}
.gift-label.owned { font-weight: 700; color: var(--brand); }
.gift-limit-note { margin: 12px 0 0; text-align: center; }
button.pick-tile { position: relative; }
button.pick-tile::after {
  content: ''; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
  background: url(assets/icon_check_.svg) center / contain no-repeat;
}
button.pick-tile.picked { box-shadow: inset 0 0 0 3px var(--current-mark); }
button.pick-tile.picked::after { background-image: url(assets/icon_check.svg); }
button.pick-tile:disabled { opacity: .4; }
.reward-picked { margin: 12px 0 0; font-size: 13px; text-align: center; color: var(--ink); font-variant-numeric: tabular-nums; }
.reward-spend { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.reward-spend .frame { width: 44px; border-radius: 10px; }
.reward-done {
  margin: 0 0 12px; padding: 8px 12px; border-radius: 10px;
  background: var(--notice-bg); font-size: 13px; line-height: 1.8; color: var(--ink);
}
#reward-confirm-view { text-align: center; }
.reward-confirm-art {
  width: 152px; aspect-ratio: 1 / 1; margin: 4px auto 10px; overflow: hidden;
  background: var(--icon-bg); border: 1px solid var(--line); border-radius: 16px;
}
.reward-confirm-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reward-confirm-art img[hidden] { display: none; }
.reward-confirm-note { margin: 12px 0 0; text-align: left; }
.reward-error { margin: 8px 0 0; font-size: 12px; color: var(--card-text); }
.hint-list { margin: 12px 0 0; padding: 0; list-style: none; }
.hint-list li {
  border-top: 1px solid var(--line-soft); padding: 8px 0 0; margin-top: 8px;
}
.hint-list li:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.icon-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.icon-choice {
  margin: 0; padding: 0; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--icon-bg); border: 1px solid var(--line); border-radius: 10px;
  font-size: 11px; color: var(--text); line-height: 1.4;
}
.icon-choice img { width: 100%; height: 100%; object-fit: cover; display: block; }
.icon-choice[aria-current="true"] {
  border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
}
.icon-choice.reward { position: relative; }
.icon-choice.reward::after {
  content: ""; position: absolute; top: 4px; right: 4px; width: 16px; height: 16px;
  background: url("assets/icon_star.svg") center / contain no-repeat;
}

.icon-bg-label {
  font-size: 12px; font-weight: 500; color: var(--muted); margin: 0 0 6px;
}
.icon-bg-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.color-choice {
  margin: 0; padding: 0; width: 38px; height: 38px;
  background: var(--icon-bg); border: 1px solid var(--line); border-radius: 50%;
}
.color-choice[aria-current="true"] {
  border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
}

:is(.icon-choice, .color-choice):hover:not(:disabled) {
  background-color: var(--icon-bg); border-color: var(--line); opacity: .7;
}
:is(.icon-choice, .color-choice)[aria-current="true"]:hover {
  border-color: var(--accent);
}

.tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--nav-pale); margin: 0 0 20px;
}
.tab {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center; min-height: 45px;
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  padding: 8px 6px; font-size: 12px; font-weight: 400; color: var(--brand);
  line-height: 1.45; text-wrap: balance;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover:not(:disabled) {
  background: transparent; border-bottom-color: var(--line); color: var(--brand);
}
.tab[aria-selected='true']:not(:disabled) {
  color: var(--brand); border-bottom-color: var(--brand); font-weight: 700;
}
.tab:active:not(:disabled) { transform: none; }

#tab-memory::before {
  content: ''; width: 13px; height: 13px; flex: none; margin-right: 5px;
  background-color: currentColor;
  -webkit-mask: url("assets/heart_full.svg") center / contain no-repeat;
  mask: url("assets/heart_full.svg") center / contain no-repeat;
}

.memory-lead {
  font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 12px;
}
.memory { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.memory li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.memory li:last-child { border-bottom: none; }
.memory .who { color: var(--accent-deep); font-weight: 700; }
.memory .why { color: var(--muted); font-size: 13px; }
.memory-empty {
  font-size: 14px; line-height: 1.7; color: var(--accent);
  background: var(--notice-bg); border: 1px solid var(--notice-line); border-radius: 8px;
  padding: 6px 12px;
}
.memory-note { font-size: 11px; color: var(--faint); margin-top: 14px; line-height: 1.7; }
.howto-body { font-size: 15px; color: var(--muted); line-height: 1.9; text-align: center; }
.howto-notes {
  font-size: 13px; color: var(--muted); line-height: 1.8;
  text-align: left; margin-top: 20px;
}
@media (max-width: 370px) {
  .howto-body br { display: none; }
}
.news-body { font-size: 14px; color: var(--ink); line-height: 1.9; text-align: left; }
.news-body p { margin: 0; padding-left: 1em; text-indent: -1em; }
.news-note {
  margin: 16px 0 0; padding: 10px 14px; border-radius: 10px;
  background: var(--notice-bg); font-size: 13px; color: var(--ink); line-height: 1.8;
}
.news-dot {
  position: absolute; z-index: 1; width: 12px; height: 12px; border-radius: 50%;
  background: var(--heart); box-shadow: 0 0 0 2px #fff; pointer-events: none;
  top: -4px; right: -4px;
}
.nav button .news-dot { top: 0; right: auto; left: calc(50% + 10px); }
.photo-open { position: relative; }

.stack { display: grid; gap: 8px; margin-top: 14px; }
.stack a.share-link { text-align: center; }

#menu { padding: 0; }
#menu:not(.hidden) { display: block; }
#menu .panel {
  position: absolute; top: 0; right: 0;
  height: 100vh;
  height: 100dvh;
  width: min(80%, 320px); max-width: none; max-height: none;
  margin: 0; border-radius: 16px 0 0 16px; overflow-y: auto;
  padding: 28px;
  animation: menu-slide-in .22s ease-out;
}
@keyframes menu-slide-in {
  from { translate: 100% 0; }
}
@keyframes menu-slide-out {
  to { translate: 100% 0; }
}
#menu.closing .panel { animation: menu-slide-out .22s ease-out forwards; }
.drawer-close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  padding: 0; margin: 0; border: none; border-radius: 50%; background: transparent;
  background-image: url(assets/icon_close.svg);
  background-size: 22px 22px; background-position: center; background-repeat: no-repeat;
}
.drawer-close:hover { background-color: transparent; border-color: transparent; opacity: .6; }

.share-lead {
  margin: 40px 0 12px; text-align: center;
  font-size: 13px; color: var(--muted);
}
.menu-copy {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: min(100%, 170px); margin: 10px auto 0; padding: 12px 14px;
  background: #fff; color: var(--accent-deep);
  border: 1px solid var(--accent); border-radius: 999px;
  font-size: 14px; font-weight: 700; box-shadow: var(--btn-shadow);
}
.menu-copy::before {
  content: ''; width: 18px; height: 18px; flex: none;
  background: url(assets/icon_link.svg) center / contain no-repeat;
}
.menu-copy:hover:not(:disabled) { background-color: var(--accent-soft); border-color: var(--accent); }

.menu-list { display: grid; margin-top: 20px; }
.menu-art { display: block; width: 72px; height: auto; margin: 34px auto 0; }
.menu-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; margin: 0; padding: 15px 0; border-radius: 0;
  background: none; border: none; border-bottom: 1px solid var(--line-soft);
  box-shadow: none; text-align: left; text-decoration: none;
  font-size: 13px; color: var(--muted);
}
.menu-row::after {
  content: ''; width: 7px; height: 7px; flex: none;
  border-right: 1.5px solid var(--accent); border-top: 1.5px solid var(--accent);
  rotate: 45deg;
}
.menu-row:hover:not(:disabled) {
  background: none; border-color: var(--line-soft);
  color: color-mix(in srgb, var(--muted) 70%, #fff);
}
.logout-note { margin: 0; font-size: 13px; line-height: 1.9; color: var(--muted); }
.logout-note strong { color: var(--brand); }
#closed-modal .panel { text-align: center; }
.closed-art { width: 152px; max-width: 60%; margin: 4px auto 14px; border-radius: 16px; }
.closed-note { margin: 0; font-size: 13px; line-height: 1.9; color: var(--ink); }
#closed-modal.locked .stack { display: none; }
.logout-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
#fanwork-modal .panel {
  --d: min(340px, calc(100vw - 20px));
  width: var(--d); height: var(--d); max-width: none; max-height: none;
  border-radius: 50%; overflow: hidden;
  padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.fanwork-art { display: block; width: calc(var(--d) * .58); height: auto; margin: 0 auto 6px; }
.fanwork-wrap { display: flex; flex-direction: column; align-items: center; }

#fanwork-modal { animation: fanwork-veil .3s ease-out both; }
#fanwork-modal .panel { animation: fanwork-jelly .7s cubic-bezier(.3, .7, .4, 1) both; }
.fanwork-art { animation: fanwork-hop .5s ease-out .65s both; }
#fanwork-modal .stack { animation: fanwork-enter .35s cubic-bezier(.3, 1.6, .5, 1) 1s both; }
@keyframes fanwork-veil { from { background-color: rgba(18, 50, 67, 0); } }
@keyframes fanwork-jelly {
  0% { transform: scale(0); }
  40% { transform: scale(1.1); }
  55% { transform: scale(.93, 1.05); }
  70% { transform: scale(1.04, .97); }
  85% { transform: scale(.99, 1.01); }
  100% { transform: none; }
}
@keyframes fanwork-hop {
  0% { transform: none; }
  35% { transform: translateY(-8px); }
  60% { transform: scale(1.04, .96); }
  80% { transform: scale(.98, 1.02); }
  100% { transform: none; }
}
@keyframes fanwork-enter {
  from { opacity: 0; transform: translateY(10px) scale(.8); }
  to { opacity: 1; transform: none; }
}
#fanwork-modal.closing { animation: fanwork-veil-out .35s ease-in both; pointer-events: none; }
#fanwork-modal.closing .panel { animation: fanwork-close .35s cubic-bezier(.5, 0, .75, 0) both; }
#fanwork-modal.closing .stack { animation: fanwork-fade-out .2s ease-in both; }
@keyframes fanwork-veil-out { to { background-color: rgba(18, 50, 67, 0); } }
@keyframes fanwork-close {
  0% { transform: none; opacity: 1; }
  30% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(.3); opacity: 0; }
}
@keyframes fanwork-fade-out { to { opacity: 0; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) {
  #fanwork-modal, #fanwork-modal .panel, .fanwork-art, #fanwork-modal .stack { animation: none; }
  #fanwork-modal.closing, #fanwork-modal.closing .panel, #fanwork-modal.closing .stack { animation: none; }
}
#fanwork-modal .stack { margin-top: 18px; }
#fanwork-modal .stack button { background: var(--panel); border-color: var(--panel); box-shadow: var(--shadow); }
.fanwork-art[hidden] { display: none; }
.fanwork-note { margin: 0; font-size: 13px; line-height: 1.9; color: var(--muted); text-align: center; }
.booting .page > :not(#fanwork-modal),
.booting #fanwork-modal :is(.fanwork-note, .stack) { visibility: hidden; }

/* =========================================================================
   18b. 記念写真
   ========================================================================= */

.photo-mode :is(.site-head, .nav, .foot, .log-strip) { display: none; }

.photo-open {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 306px; margin: 18px auto 0; padding: 10px 20px;
  background: #fff; border: none; border-radius: 999px;
  font-size: 15px; font-weight: 700; color: var(--ink);
  box-shadow: var(--btn-shadow);
}
.photo-open::before {
  content: ''; width: 31px; height: 24px; flex: none;
  background: url(assets/icon_camera.svg) center / contain no-repeat;
}
.photo-open:hover:not(:disabled) { background: #fffae3; border-color: transparent; }

.photo { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.photo-mode .page { padding-bottom: 0; min-height: 0; }
.photo-foot {
  position: relative; flex: none; margin-top: auto;
  height: calc(30px + env(safe-area-inset-bottom, 0px)); background: var(--brand);
}
.photo-foot::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); aspect-ratio: 402 / 8;
  background: var(--brand); scale: 1 -1;
  -webkit-mask: url("assets/bg_wave-header.svg") center / 100% 100% no-repeat;
  mask: url("assets/bg_wave-header.svg") center / 100% 100% no-repeat;
}
.photo-head {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: calc(6px + env(safe-area-inset-top, 0px)) 96px 6px;
  margin-bottom: calc(100% * 8 / 402 + 10px);
  background: var(--brand); color: #fff;
}
.photo-head::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); aspect-ratio: 402 / 8;
  background: var(--brand);
  -webkit-mask: url("assets/bg_wave-header.svg") center / 100% 100% no-repeat;
  mask: url("assets/bg_wave-header.svg") center / 100% 100% no-repeat;
}
.photo-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .12em; color: #fff; }
.photo-back {
  position: absolute; left: 4px; top: calc(env(safe-area-inset-top, 0px) + 26px); translate: 0 -50%;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: none; background: transparent; box-shadow: none;
}
.photo-back::before {
  content: ''; width: 28px; height: 28px; rotate: 90deg; background: #fff;
  -webkit-mask: url(assets/icon_arrow-pull-down.svg) center / contain no-repeat;
  mask: url(assets/icon_arrow-pull-down.svg) center / contain no-repeat;
}
.photo-back:hover:not(:disabled) { background-color: transparent; border-color: transparent; opacity: .7; }
.photo-quit {
  position: absolute; right: 10px; top: calc(env(safe-area-inset-top, 0px) + 26px); translate: 0 -50%;
  display: flex; align-items: center; gap: 5px; padding: 6px 14px 6px 10px;
  border: none; border-radius: 999px; background: #fff; box-shadow: none;
  color: var(--brand); font-size: 13px; font-weight: 700;
}
.photo-quit::before {
  content: ''; width: 20px; height: 20px; flex: none;
  background: url(assets/icon_close2.svg) center / contain no-repeat;
}
.photo-quit:hover:not(:disabled) { background-color: #fff; border-color: transparent; opacity: .8; }

.photo-steps {
  display: flex; justify-content: center; gap: 10px; margin: 0 var(--pad) 16px; padding: 0;
  list-style: none; counter-reset: photo-step;
}
.photo-steps li { position: relative; counter-increment: photo-step; display: flex; }
.photo-steps li + li::after {
  content: ''; position: absolute; right: 100%; top: 50%; width: 10px; height: 2px; margin-top: -1px;
  background: var(--brand);
}
.photo-step {
  display: flex; align-items: center; gap: 5px; margin: 0; padding: 4px 10px 4px 5px;
  border: none; border-radius: 999px; box-shadow: none;
  font: inherit; font-size: 12px; line-height: 1.7; color: var(--muted); background: var(--nav-pale);
}
.photo-step::before {
  content: counter(photo-step); display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; font-size: 11px; font-weight: 700;
}
button.photo-step:hover:not(:disabled) { background-color: var(--nav-pale); border-color: transparent; opacity: .75; }
.photo-steps li[aria-current] .photo-step { background: var(--brand); color: #fff; font-weight: 700; opacity: 1; cursor: default; }
.photo-steps li[aria-current] .photo-step::before { color: var(--brand); }

.photo-pane { margin: 0 var(--pad) 44px; }
#photo-choose { position: relative; }
#photo-choose.loading > * { visibility: hidden; }
#photo-choose.loading::after {
  content: ''; position: absolute; left: 50%; top: 40%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  box-sizing: border-box; border: 3px solid rgba(69, 135, 183, .2); border-top-color: var(--brand); border-radius: 50%;
  animation: photo-spin .8s linear infinite;
}
@keyframes photo-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  #photo-choose.loading::after { animation-duration: 2s; }
}

#photo.intro .photo-head { animation: head-drop .45s cubic-bezier(.2, .8, .3, 1) both; }
#photo.intro .photo-title { animation: home-rise .35s ease-out .2s both; }
#photo.intro :is(.photo-back, .photo-quit) { animation: photo-fade .3s ease-out .3s both; }
#photo.intro .photo-steps { animation: home-rise .4s ease-out .3s both; }
#photo.intro .photo-foot { animation: photo-foot-rise .5s cubic-bezier(.2, .8, .3, 1) .1s both; }
#photo-choose.intro .photo-lead { animation: home-rise .45s ease-out var(--t-pane, 0s) both; }
#photo-choose.intro .photo-pick-print[data-k="0"] { animation: photo-land .6s cubic-bezier(.2, .8, .3, 1.15) calc(var(--t-pane, 0s) + .15s) both; }
#photo-choose.intro .photo-pick-print[data-k="-1"] { animation: photo-peek-left .5s cubic-bezier(.2, .8, .3, 1) calc(var(--t-pane, 0s) + .45s) both; }
#photo-choose.intro .photo-pick-print[data-k="1"] { animation: photo-peek-right .5s cubic-bezier(.2, .8, .3, 1) calc(var(--t-pane, 0s) + .45s) both; }
#photo-choose.intro .photo-pick-arrow { animation: photo-fade .3s ease-out calc(var(--t-pane, 0s) + .6s) both; }
#photo-choose.intro .photo-states { animation: home-rise .45s ease-out calc(var(--t-pane, 0s) + .55s) both; }
#photo-choose.intro .photo-decide { animation: home-rise .45s ease-out calc(var(--t-pane, 0s) + .85s) both; }
@keyframes photo-fade { from { opacity: 0; } }
@keyframes photo-foot-rise { from { transform: translateY(100%); } }
@keyframes photo-land {
  from { opacity: 0; transform: translateY(-24px) rotate(-10deg) scale(1.08); }
}
@keyframes photo-peek-left { from { opacity: 0; transform: translateX(-48px); } }
@keyframes photo-peek-right { from { opacity: 0; transform: translateX(48px); } }
.photo-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.8; color: var(--ink); text-align: center; }
.photo-pick {
  position: relative; overflow: hidden;
  margin: -22px calc(var(--pad) * -1); padding: 22px 0;
}
.photo-pick-track {
  --slide: 72%; --gap: 14px; --pick-ease: .38s cubic-bezier(.25, .8, .3, 1);
  position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  transition: translate var(--pick-ease);
}
.photo-pick-track::before { content: ''; display: block; padding-top: var(--slide); }
.photo-pick-print {
  position: absolute; top: 0; width: var(--slide); box-sizing: border-box;
  left: calc((100% - var(--slide)) / 2 + var(--k, 0) * (var(--slide) + var(--gap)));
  padding: calc(var(--slide) * .055); background: #fff;
  rotate: 3deg; scale: .88; opacity: .8;
  box-shadow: 0 6px 18px rgba(96, 91, 84, .22), 0 1px 3px rgba(96, 91, 84, .18);
  transition: left var(--pick-ease), rotate var(--pick-ease), scale var(--pick-ease), opacity var(--pick-ease);
}
.photo-pick-print.current { z-index: 1; rotate: -4deg; scale: 1; opacity: 1; }
.photo-pick-track.dragging, .photo-pick-track.dragging .photo-pick-print, .photo-pick-print.jump { transition: none; }
.photo-pick-image {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  pointer-events: none; -webkit-user-drag: none;
}
.photo-pick-arrow {
  position: absolute; top: 50%; z-index: 2; translate: 0 -50%;
  display: grid; place-items: center; width: 34px; height: 34px; margin: 0; padding: 0;
  border: none; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: var(--btn-shadow);
}
.photo-pick-arrow.prev { left: 8px; }
.photo-pick-arrow.next { right: 8px; }
.photo-pick-arrow::before {
  content: ''; width: 20px; height: 20px;
  background: url(assets/icon_arrow-pull-down.svg) center / contain no-repeat;
}
.photo-pick-arrow.prev::before { rotate: 90deg; }
.photo-pick-arrow.next::before { rotate: -90deg; }
.photo-pick-arrow:hover:not(:disabled) { background-color: rgba(255, 255, 255, .92); border-color: transparent; opacity: .7; }
@media (prefers-reduced-motion: reduce) {
  .photo-pick-track, .photo-pick-print { transition: none; }
}
.photo-states {
  display: grid; grid-auto-flow: column; grid-auto-columns: 64px; gap: 8px;
  overflow-x: auto; margin: 30px 0 0; padding: 4px 2px 8px; list-style: none;
}
button.photo-state {
  width: 100%; padding: 0; border: none; border-radius: 10px; box-shadow: var(--btn-shadow);
}
button.photo-state[aria-current] { outline: 3px solid var(--heart); outline-offset: -3px; }
button.photo-state:hover:not(:disabled) { opacity: .8; }
.photo-decide {
  display: block; min-width: 144px; margin: 26px auto 0; padding: 12px 28px;
  background: var(--heart); color: #fff; border: none; border-radius: 999px;
  font-size: 15px; font-weight: 700; box-shadow: var(--btn-shadow);
}
.photo-decide:hover:not(:disabled) { background: #f7735a; border-color: #f7735a; }

.photo-stage {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden; margin-inline: calc(var(--pad) * -1);
  background: var(--accent-soft); touch-action: none; user-select: none; -webkit-user-select: none;
}
.photo-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.photo-scene { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.photo-avatar {
  position: absolute; height: auto; cursor: grab; pointer-events: none;
  -webkit-user-drag: none;
}
.photo-label { margin: 16px 0 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.photo-tools {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 4px calc(var(--pad) * -1 + 6px) 0;
}
.photo-hint {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  width: max-content; max-width: 78%; margin: 0; padding: 22px 26px 26px; box-sizing: border-box;
  border-radius: 20px; background: rgba(39, 78, 107, .75); pointer-events: none;
  color: #fff; font-size: 14px; font-weight: 700; line-height: 1.7; text-align: center;
}
.photo-hint::after {
  content: ''; width: 92px; height: 92px; flex: none;
  background: url(assets/icon_photoedit_move.svg) center / contain no-repeat;
}
.photo-tool {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0;
  border: none; background: transparent; box-shadow: none;
  font-size: 10px; font-weight: 500; line-height: 1.3; color: var(--ink);
}
.photo-tool::before {
  content: ''; width: 24px; height: 24px; flex: none;
  background: var(--tool) center / contain no-repeat;
}
.photo-tool:hover:not(:disabled) { background-color: transparent; border-color: transparent; opacity: .7; }
.photo-shutter {
  display: block; width: 89px; height: 89px; margin: 14px auto 0; padding: 0;
  border: none; border-radius: 50%; box-shadow: none;
  background: url(assets/icon_photoedit_shutter.svg) center / contain no-repeat;
}
.photo-shutter:hover:not(:disabled) { background-color: transparent; border-color: transparent; opacity: .85; }
.photo-shutter:active:not(:disabled) { scale: .95; }
.photo-shutter:disabled { opacity: .6; }

.photo-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; max-width: var(--column); margin: 0 auto;
  padding: 18px 0 calc(40px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box; background: rgba(69, 135, 183, .8); color: #fff;
  touch-action: none; overscroll-behavior: contain;
  animation: photo-sheet-in .3s cubic-bezier(.2, .8, .3, 1) both;
}
.photo-sheet.closing { animation: photo-sheet-out .22s ease-in both; pointer-events: none; }
@keyframes photo-sheet-in { from { translate: 0 100%; } to { translate: 0 0; } }
@keyframes photo-sheet-out { from { translate: 0 0; } to { translate: 0 100%; } }
.photo-sheet-title { margin: 0 56px; font-size: 13px; font-weight: 700; line-height: 1.6; text-align: center; color: #fff; }
.photo-sheet-done {
  position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; padding: 0;
  border: none; background: url(assets/icon_photoedit_done.svg) center / 24px no-repeat; box-shadow: none;
}
.photo-sheet-done:hover:not(:disabled) { background-color: transparent; border-color: transparent; opacity: .7; }
.photo-avatars {
  display: grid; grid-auto-flow: column; grid-auto-columns: 64px; gap: 8px;
  overflow-x: auto; margin-top: 14px; padding: 4px 30px 10px; scrollbar-width: none;
  touch-action: pan-x; overscroll-behavior-x: contain;
}
.photo-avatars::-webkit-scrollbar { display: none; }
.photo-avatars .icon-choice { background: #fff; border-radius: 4px; }
.photo-avatars .icon-choice[aria-current="true"] { outline: 3px solid var(--heart); outline-offset: -3px; box-shadow: none; }
.photo-avatars .icon-choice img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-param {
  display: block; width: calc(100% - 92px); height: 24px; margin: 34px auto; padding: 0;
  background: transparent; -webkit-appearance: none; appearance: none;
}
.photo-param::-webkit-slider-runnable-track {
  height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, var(--notice-line) var(--fill, 0%), rgba(255, 255, 255, .5) var(--fill, 0%));
}
.photo-param::-moz-range-track {
  height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, var(--notice-line) var(--fill, 0%), rgba(255, 255, 255, .5) var(--fill, 0%));
}
.photo-param::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -7px; box-sizing: border-box;
  border: 3px solid var(--notice-line); border-radius: 50%; background: #fff;
}
.photo-param::-moz-range-thumb {
  width: 24px; height: 24px; box-sizing: border-box;
  border: 3px solid var(--notice-line); border-radius: 50%; background: #fff;
}
.photo-param:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
  .photo-sheet, .photo-sheet.closing { animation: none; }
}
.photo-actions { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.photo-actions button { min-width: 120px; border-radius: 999px; }
.photo-done-actions {
  display: grid; grid-template-columns: repeat(3, minmax(0, 100px)); justify-content: center; gap: 14px;
  margin-top: 30px;
}
.photo-done-button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 62px; padding: 8px 4px; border: none; border-radius: 999px;
  background: #fff; box-shadow: var(--btn-shadow);
  font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--share-bg);
}
.photo-done-button::before {
  content: ''; width: 28px; height: 28px; flex: none;
  background: var(--tool) center / contain no-repeat;
}
.photo-done-button:hover:not(:disabled) { background-color: #fff; border-color: transparent; opacity: .8; }
.photo-done-button.primary { background: var(--brand); color: #fff; }
.photo-done-button.primary:hover:not(:disabled) { background-color: var(--brand); }

.photo-print { padding: 0 2px; }
.photo-result {
  display: block; width: 100%; height: auto; rotate: -1.5deg;
  box-shadow: 0 6px 18px rgba(96, 91, 84, .22), 0 1px 3px rgba(96, 91, 84, .18);
}
.photo-share { margin-top: 44px; text-align: center; }
#photo .share-link { width: min(200px, 100%); margin: 0 auto; padding: 13px 18px; font-size: 14px; }
.photo-share-note { margin: 12px 0 0; font-size: 12px; line-height: 1.7; color: var(--ink); }

.photo-flash {
  position: fixed; inset: 0; z-index: 30; background: #fff; opacity: 0; pointer-events: none;
}
.photo-flash.on { animation: photo-flash .55s ease-out both; }
@keyframes photo-flash {
  0% { opacity: 0; }
  12% { opacity: .95; }
  100% { opacity: 0; }
}
.photo-stage.snap { animation: photo-snap .22s ease-out; }
@keyframes photo-snap {
  0%, 100% { scale: 1; }
  45% { scale: .96; }
}
.photo-print.arrive { animation: photo-arrive .55s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes photo-arrive {
  0% { scale: 1.08; opacity: .5; }
  100% { scale: 1; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-flash.on, .photo-stage.snap, .photo-print.arrive { animation: none; }
}
.photo-title-edit { margin-top: 20px; }
.photo-title-edit input { width: 100%; }

/* =========================================================================
   19. .hidden
   ========================================================================= */

.hidden { display: none; }