:root {
  --font-title: "M PLUS Rounded 1c", "BIZ UDPGothic", "Yu Gothic", "Meiryo", sans-serif;
  --font-body: "BIZ UDPGothic", "Yu Gothic", "Meiryo", sans-serif;
  --font-number: "M PLUS 1p", "BIZ UDPGothic", "Yu Gothic", sans-serif;
  --font-scientific: Georgia, "Times New Roman", serif;
  --sea-japan: #123a77;
  --sea-east-china: #247c63;
  --sea-south-china: #008c99;
  --sea-pacific: #245ab7;
  --sea-indian: #7541a5;
  --sea-red-sea: #b82e3f;
  --sea-mediterranean: #b8860b;
  --sea-atlantic: #3f6b35;
  --sea-antarctic: #72b7dd;
  --sea-deep: #352052;

  --card-width: min(88vw, 397px);
  --card-radius: 5.5%;
  --ink: #092b61;
  --paper: #fffdf8;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: #17213a;
  background: #eef5fb;
  font-family: var(--font-body);
}

button {
  font: inherit;
}

.demo {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 24px 12px 48px;
}

.demo h1 {
  margin: 0;
  font-size: clamp(1.25rem, 5vw, 1.8rem);
  text-align: center;
}

.note {
  margin: 0 0 10px;
  color: #536174;
  font-size: 0.9rem;
  text-align: center;
}

/*
 * 実物比率 63mm × 88mm。
 * widthだけを変えても aspect-ratio により同じ比率を維持します。
 */
.flip-card {
  width: var(--card-width);
  aspect-ratio: 63 / 88;
  padding: 0;
  border: 0;
  border-radius: var(--card-radius);
  background: transparent;
  perspective: 1400px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.flip-card:focus-visible {
  outline: 4px solid #ffb000;
  outline-offset: 5px;
}

.flip-card__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(.2, .7, .2, 1);
}

.flip-card.is-flipped .flip-card__inner {
  transform: rotateY(180deg);
}

.sea-card {
  --sea-color: var(--sea-japan);

  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border: clamp(5px, 1.6vw, 8px) solid var(--sea-color);
  border-radius: var(--card-radius);
  box-shadow:
    0 18px 45px rgba(15, 37, 70, 0.25),
    inset 0 0 0 2px rgba(255,255,255,0.7);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.sea-japan .sea-card { --sea-color: var(--sea-japan); }
.sea-east-china .sea-card { --sea-color: var(--sea-east-china); }
.sea-south-china .sea-card { --sea-color: var(--sea-south-china); }
.sea-pacific .sea-card { --sea-color: var(--sea-pacific); }
.sea-indian .sea-card { --sea-color: var(--sea-indian); }
.sea-red-sea .sea-card { --sea-color: var(--sea-red-sea); }
.sea-mediterranean .sea-card { --sea-color: var(--sea-mediterranean); }
.sea-atlantic .sea-card { --sea-color: var(--sea-atlantic); }
.sea-antarctic .sea-card { --sea-color: var(--sea-antarctic); }
.sea-deep .sea-card { --sea-color: var(--sea-deep); }

/* 100: 金カード / 101: SECRET */
.card-style-gold .sea-card {
  --sea-color: #d4a017;
  border-color: #f7d56b;
  box-shadow:
    0 18px 48px rgba(104, 67, 0, .38),
    inset 0 0 0 2px #fff0a8,
    inset 0 0 22px rgba(255, 213, 79, .42);
}

.card-style-gold .sea-card--front::before,
.card-style-secret .sea-card--front::before {
  position: absolute;
  z-index: 5;
  right: 3.5%;
  bottom: 31.5%;
  padding: 1.2% 3%;
  border-radius: 999px;
  font-family: var(--font-number);
  font-size: clamp(.58rem, 2.6vw, .82rem);
  font-weight: 900;
  letter-spacing: .08em;
  pointer-events: none;
}

.card-style-gold .sea-card--front::before {
  content: "GOLD";
  color: #4a2d00;
  background: linear-gradient(135deg, #fff7b5, #e3a812 48%, #fff0a0);
  border: 1px solid #fff5b9;
  box-shadow: 0 2px 8px rgba(36, 21, 0, .45);
}

.card-style-gold .sea-card__front-info {
  color: #3f2900;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 252, 202, .9), transparent 48%),
    linear-gradient(145deg, #fff0a4, #c98b0d);
}

.card-style-gold .sea-card__name {
  text-shadow: 0 1px 0 #fff6c0;
}

.card-style-secret .sea-card {
  --sea-color: #5d31a8;
  border-color: #190d2e;
  box-shadow:
    0 20px 54px rgba(11, 4, 24, .62),
    inset 0 0 0 2px #8456c5,
    inset 0 0 28px rgba(76, 28, 142, .65);
}

.card-style-secret .sea-card--front::before {
  content: "SECRET";
  color: #e9dcff;
  background: linear-gradient(135deg, #090610, #4c2086 52%, #13081f);
  border: 1px solid #a77ae8;
  box-shadow: 0 0 12px rgba(158, 92, 255, .75);
}

.card-style-secret .sea-card__photo {
  filter: saturate(1.18) contrast(1.08);
}

.card-style-secret .sea-card__photo::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 24%, rgba(49, 13, 88, .22) 48%, rgba(5, 2, 12, .64) 100%),
    repeating-linear-gradient(120deg, transparent 0 24px, rgba(126, 68, 213, .055) 25px 27px);
  pointer-events: none;
}

.card-style-secret .sea-card__subject-placeholder {
  background:
    radial-gradient(ellipse, #09060e 0 40%, #6129a4 43% 50%, #b17cff 52% 55%, transparent 59%);
  text-shadow: 0 0 8px #b984ff;
}

.card-style-secret .sea-card__front-info {
  background:
    radial-gradient(circle at 50% 0, rgba(122, 58, 188, .55), transparent 50%),
    linear-gradient(145deg, #080510, #291044 58%, #050309);
}

/* ---------- 表面 ---------- */
.sea-card--front {
  background: #061c3e;
}

/* 写真エリアはカード上部70%。 */
.sea-card__photo {
  position: relative;
  display: block;
  height: 70%;
  overflow: hidden;
  background:
    radial-gradient(circle at 55% 16%, rgba(255,255,255,.8), transparent 11%),
    radial-gradient(circle at 18% 42%, rgba(255,255,255,.22) 0 1.5%, transparent 2%),
    radial-gradient(circle at 78% 25%, rgba(255,255,255,.18) 0 1.3%, transparent 1.8%),
    linear-gradient(to bottom, rgba(17,128,190,.25), rgba(2,25,60,.2)),
    linear-gradient(145deg, #1b9bd0, #063a70 48%, #031c38);
  border-bottom: 2px solid rgba(243, 190, 73, .85);
}

.sea-card__photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 33%;
  background:
    radial-gradient(ellipse at 15% 80%, #b96d74 0 6%, transparent 7%),
    radial-gradient(ellipse at 85% 74%, #768c42 0 8%, transparent 9%),
    linear-gradient(0deg, #4a442d, rgba(43,54,37,.15));
  opacity: .9;
}

.sea-card__number,
.sea-card__rarity,
.sea-card__subject-placeholder {
  position: absolute;
  z-index: 2;
}

.sea-card__number {
  font-family: var(--font-number);
  top: 2.2%;
  left: 2.4%;
  display: inline-flex;
  padding: 2.5% 4%;
  color: #fff;
  background: var(--sea-color);
  border-radius: 0 0 16px 0;
  font-size: clamp(1.05rem, 5.2vw, 1.6rem);
  font-weight: 800;
  line-height: 1;
}

.sea-card__rarity {
  top: 2.5%;
  right: 3%;
  color: #ffad00;
  font-size: clamp(1.25rem, 6.2vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.08em;
  text-shadow: 0 1px 1px #fff;
}

.sea-card__subject-placeholder {
  left: 50%;
  top: 57%;
  width: 39%;
  aspect-ratio: 1.9;
  display: grid;
  place-content: center;
  transform: translate(-50%, -50%);
  color: #fff;
  background:
    radial-gradient(ellipse, #1966ce 0 44%, #ffd02f 46% 50%, #f7fbff 52% 58%, transparent 60%);
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.32));
  border-radius: 50%;
  text-align: center;
}

.sea-card__subject-placeholder small {
  display: block;
  margin-top: 2px;
  font-size: clamp(.48rem, 2.2vw, .7rem);
}

.sea-card__subject-name {
  font-size: clamp(.72rem, 3.1vw, .96rem);
  font-weight: 900;
}

.sea-card__front-info {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  height: 30%;
  padding: 2.5% 4% 3%;
  color: #fff;
  background:
    radial-gradient(circle at 50% 0, rgba(53,129,192,.55), transparent 48%),
    linear-gradient(145deg, #061f4c, #0a2f63);
}

.sea-card__name {
  font-family: var(--font-title);
  font-size: clamp(1rem, 4.6vw, 1.475rem);
  line-height: 1.05;
  text-shadow: 0 2px 0 #173463;
}

.sea-card__name.is-long-name {
  font-size: clamp(.725rem, 3.35vw, 1.075rem);
}

.sea-card__scientific {
  margin-top: 1%;
  font-family: var(--font-scientific);
  font-size: clamp(.8rem, 3.8vw, 1.15rem);
}

.sea-card__series {
  margin-top: 2.2%;
  padding: 1% 4%;
  border: 1px solid rgba(255, 208, 74, .9);
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  font-size: clamp(.72rem, 3.2vw, 1rem);
  font-weight: 700;
}

.sea-card__collection-number {
  position: absolute;
  right: 3.5%;
  bottom: 3%;
  padding: 1% 3%;
  border: 1px solid #f2c562;
  border-radius: 999px;
  font-size: clamp(.68rem, 3vw, .95rem);
  font-weight: 800;
}

/* ---------- 裏面 ---------- */
/*
 * 裏面はカードの高さに必ず収まるよう、各ブロックの高さを比率で固定します。
 * 文字が増えても隣のブロックへ重ならないよう、各枠で overflow を制御します。
 */
.sea-card--back {
  display: grid;
  grid-template-rows:
    13.5%  /* 名前・学名 */
    20.5%  /* 基本情報 */
    16.5%  /* 特徴 */
    14.5%  /* びっくり */
    14.5%  /* おもちメモ */
    16.5%; /* 漢字ポイント */
  gap: 0.8%;
  padding: 2.2%;
  color: #111b2b;
  background:
    linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.96)),
    radial-gradient(circle at 10% 10%, var(--sea-color), transparent 45%);
  transform: rotateY(180deg);
}

.sea-card__back-header {
  display: flex;
  justify-content: space-between;
  gap: 2%;
  min-height: 0;
  overflow: hidden;
}

.sea-card__back-header > span:first-child {
  display: grid;
  align-content: start;
  justify-items: start;
  width: 74%;
  min-width: 0;
}

.sea-card__number--back {
  position: static;
  width: max-content;
  padding: 2.2% 6%;
  border-radius: 0 0 10px 0;
  font-size: clamp(.72rem, 3.25vw, 1.02rem);
}

.sea-card__back-name {
  margin-top: 1.5%;
  color: var(--ink);
  font-family: var(--font-title);
  max-width: 100%;
  font-size: clamp(.82rem, 3.7vw, 1rem);
  line-height: 1;
  white-space: nowrap;
}

.sea-card__back-name.is-long-name {
  font-size: clamp(.62rem, 2.8vw, .88rem);
  letter-spacing: -.04em;
}

.sea-card__back-scientific {
  margin-top: 0.8%;
  max-width: 100%;
  font-family: var(--font-scientific);
  font-size: clamp(.46rem, 2vw, .64rem);
  line-height: 1;
  white-space: nowrap;
}

.sea-card__back-header > span:last-child {
  display: grid;
  justify-items: end;
  align-content: start;
  min-width: 24%;
}

.sea-card__series--back {
  margin: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  font-size: clamp(.55rem, 2.45vw, .76rem);
  white-space: nowrap;
}

.sea-card__rarity--back {
  position: static;
  margin-top: 7%;
  font-size: clamp(.78rem, 3.45vw, 1.08rem);
  white-space: nowrap;
}

.sea-card__facts {
  display: grid;
  grid-template-rows: 1fr 1fr 1.05fr;
  min-height: 0;
  overflow: hidden;
  border: 1.2px solid color-mix(in srgb, var(--sea-color), white 30%);
  border-radius: 10px;
  background: rgba(255,255,255,.72);
}

.sea-card__fact {
  display: flex;
  align-items: center;
  gap: 2.5%;
  min-width: 0;
  min-height: 0;
  padding: 1.2% 2.5%;
  overflow: hidden;
  font-size: clamp(.49rem, 2.2vw, .68rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.sea-card__fact--wide + .sea-card__fact--wide {
  border-top: 1px solid rgba(22,86,145,.32);
}

.sea-card__fact-icon {
  flex: 0 0 auto;
  font-size: 1.15em;
}

.sea-card__fact-row {
  display: grid;
  grid-template-columns: 1fr .85fr 1.15fr;
  min-height: 0;
  border-top: 1px solid rgba(22,86,145,.32);
}

.sea-card__fact-row .sea-card__fact + .sea-card__fact {
  border-left: 1px solid rgba(22,86,145,.32);
}

/* 共通情報枠 */
.sea-card__info-box {
  min-height: 0;
  overflow: hidden;
  padding: 2% 2.5%;
  border: 1.1px solid;
  border-radius: 10px;
  text-align: left;
}

.sea-card__info-box strong {
  display: block;
  margin: 0 0 1%;
  font-size: clamp(.57rem, 2.55vw, .8rem);
  line-height: 1.1;
}

/* 特徴は縦積みに固定。以前はflexで横並びになり、文章が重なっていました。 */
.sea-card__info-box--feature {
  display: grid;
  align-content: start;
  color: #163b2d;
  border-color: #6eab83;
  background: #f0faf2;
}

.sea-card__info-box--feature > span {
  display: block;
  overflow: hidden;
  font-size: clamp(.47rem, 2.05vw, .64rem);
  line-height: 1.28;
}

/* びっくり・おもちメモは文章と画像を左右に配置します。 */
.sea-card__info-box--surprise,
.sea-card__info-box--memo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2%;
}

.sea-card__info-box--surprise {
  color: #70241e;
  border-color: #e49187;
  background: #fff4f2;
}

.sea-card__info-box--memo {
  color: #54245f;
  border-color: #ba8ac7;
  background: #fbf3fd;
}

.sea-card__info-box--surprise > span,
.sea-card__info-box--memo > span {
  display: grid;
  align-content: center;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.sea-card__info-box--surprise > span > span,
.sea-card__info-box--memo > span > span {
  display: block;
  overflow: hidden;
  font-size: clamp(.45rem, 1.98vw, .62rem);
  line-height: 1.28;
}

.sea-card__info-box img {
  flex: 0 0 auto;
  width: 17%;
  max-height: 92%;
  object-fit: contain;
  object-position: center bottom;
}

/* 漢字ポイント */
.sea-card__kanji {
  display: grid;
  align-content: center;
  min-height: 0;
  overflow: hidden;
  padding: 1.8% 2.5%;
  border: 1.1px solid #d9ae55;
  border-radius: 10px;
  background: #fff9e9;
  text-align: left;
}

.sea-card__kanji > strong {
  color: #173d78;
  font-size: clamp(.57rem, 2.55vw, .8rem);
  line-height: 1.1;
}

.sea-card__kanji-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2%;
  min-height: 0;
  margin-top: 1%;
}

.sea-card__kanji-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4%;
  min-width: 0;
  overflow: hidden;
}

.sea-card__kanji-item b {
  display: grid;
  place-items: center;
  width: clamp(34px, 10.5vw, 50px);
  height: clamp(34px, 10.5vw, 50px);
  aspect-ratio: 1;
  padding: 0 3px;
  color: #fff;
  background: var(--sea-color);
  border-radius: 50%;
  font-size: clamp(1.12rem, 5.1vw, 1.62rem);
  line-height: 1;
  white-space: nowrap;
}

.sea-card__kanji-item b[data-kanji-length="2"] {
  width: clamp(42px, 12vw, 58px);
  aspect-ratio: auto;
  border-radius: 999px;
  font-size: clamp(.82rem, 3.7vw, 1.15rem);
  letter-spacing: -.05em;
}

.sea-card__kanji-item b[data-kanji-length="3"],
.sea-card__kanji-item b[data-kanji-length="4"] {
  width: clamp(48px, 13.5vw, 66px);
  aspect-ratio: auto;
  border-radius: 999px;
  font-size: clamp(.64rem, 2.8vw, .88rem);
  letter-spacing: -.08em;
}

.sea-card__kanji-item span {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(.42rem, 1.85vw, .58rem);
  line-height: 1.23;
}

ruby rt {
  font-size: .62em;
}

@media (prefers-reduced-motion: reduce) {
  .flip-card__inner {
    transition: none;
  }
}


/* Step1.2 フォント・見出し調整 */
.sea-card__info-box--feature strong {
  color: #0d5f35;
  font-family: var(--font-body);
  font-weight: 700;
}

.sea-card__info-box--surprise strong {
  color: #b62319;
  font-family: var(--font-body);
  font-weight: 700;
}

.sea-card__info-box--memo strong {
  color: #6c257d;
  font-family: var(--font-body);
  font-weight: 700;
}

.sea-card__kanji,
.sea-card__kanji *,
.sea-card__facts,
.sea-card__facts * {
  font-family: var(--font-body);
}

.sea-card__kanji > strong,
.sea-card__kanji-item b {
  font-weight: 700;
}

.sea-card__scientific,
.sea-card__back-scientific {
  font-family: var(--font-scientific);
  font-style: italic;
}


/* Step1.3 本文拡大・見出しバッジ */
.sea-card__info-box--feature > span {
  color:#222;
  font-family:var(--font-body);
  font-size:clamp(.54rem,2.35vw,.74rem);
  line-height:1.38;
}
.sea-card__info-box--surprise > span > span,
.sea-card__info-box--memo > span > span {
  color:#222;
  font-family:var(--font-body);
  font-size:clamp(.53rem,2.3vw,.72rem);
  line-height:1.38;
}
.sea-card__info-box--memo > span > span {
  font-size:clamp(.55rem,2.42vw,.76rem);
  line-height:1.4;
}
.sea-card__info-box strong {
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin:0 0 1.4%;
  padding:.8% 3.2%;
  border-radius:999px;
  color:#fff;
  font-family:var(--font-body);
  font-size:clamp(.57rem,2.55vw,.8rem);
  font-weight:700;
  line-height:1.15;
  white-space:nowrap;
}
.sea-card__info-box--feature strong {color:#fff;background:#247a3d;}
.sea-card__info-box--surprise strong {color:#fff;background:#d72820;}
.sea-card__info-box--memo strong {color:#fff;background:#75328a;}
.sea-card__info-box img {width:16%;max-height:88%;}

/* Step2 JSON UI */
.card-demo-controls {
  display:grid;gap:6px;width:min(88vw,397px);padding:12px;
  border:1px solid #c8d7e8;border-radius:12px;background:#fff;
  box-shadow:0 6px 18px rgba(15,37,70,.08);
}
.card-demo-controls label {color:#183b6d;font-weight:700;}
.card-demo-controls select {
  width:100%;padding:10px 12px;border:1px solid #9fb5cd;
  border-radius:10px;background:#fff;color:#17213a;font:inherit;
}
.load-status {margin:0;color:#536174;font-size:.82rem;}
.load-status.is-error {color:#b62319;font-weight:700;}

/* Step3 画像システム */
.sea-card__photo {isolation:isolate;}
.sea-card__photo.is-loading::before {
  content:"画像を読み込んでいます…";position:absolute;z-index:4;
  left:50%;top:50%;transform:translate(-50%,-50%);
  padding:2% 4%;border-radius:999px;color:#fff;
  background:rgba(0,20,50,.72);font-size:clamp(.55rem,2.4vw,.78rem);
  white-space:nowrap;
}
.sea-card__photo.has-background::after {opacity:.38;}
.sea-card__subject-image {
  --subject-x:50%;--subject-y:55%;--subject-scale:1;
  position:absolute;z-index:2;left:var(--subject-x);top:var(--subject-y);
  width:44%;max-width:72%;max-height:42%;object-fit:contain;
  transform:translate(-50%,-50%) scale(var(--subject-scale));
  transform-origin:center;filter:drop-shadow(0 10px 12px rgba(0,0,0,.32));
  user-select:none;-webkit-user-drag:none;
}
.sea-card__photo-credit {
  position:absolute;z-index:5;right:2%;bottom:1.5%;max-width:64%;
  padding:.6% 1.6%;overflow:hidden;border-radius:999px;
  color:rgba(255,255,255,.9);background:rgba(0,0,0,.34);
  font-size:clamp(.38rem,1.55vw,.52rem);line-height:1.1;
  text-overflow:ellipsis;white-space:nowrap;
}
.sea-card__photo.has-image-error {
  outline:2px dashed rgba(255,205,80,.8);outline-offset:-8px;
}
.sea-card__subject-placeholder {z-index:3;}
.sea-card__subject-placeholder[hidden],
.sea-card__subject-image[hidden],
.sea-card__photo-credit[hidden] {display:none;}


/* Step4 図鑑へのリンク */
.collection-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  color: #ffffff;
  background: #126a98;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(18,106,152,.22);
}
.collection-link:hover,
.collection-link:focus-visible {
  background: #0b5278;
}


.demo-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}