:root{
  --bg1:#fff7fa;
  --bg2:#ffeef4;
  --bg3:#f7dce7;

  --rose1:#ff9fba;
  --rose2:#f57ea3;
  --rose3:#df5d8b;
  --rose4:#b94b70;

  --berry1:#7f3551;
  --berry2:#5d2439;
  --berry3:#3f1827;

  --gold1:#fff0bf;
  --gold2:#efcb66;
  --gold3:#b67d26;

  --cream1:#fffdf8;
  --cream2:#f4eadc;

  --ink:#4a2d39;
  --muted:#8a6775;
  --text:#fffaf7;

  --panel1:#fffafc;
  --panel2:#fff0f5;
  --line:rgba(102,47,70,.12);

  --ok1:#b7f3cd;
  --ok2:#78dfa0;

  --ng1:#e4dde9;
  --ng2:#bbb1c7;

  --done1:#f8e4af;
  --done2:#e8c96d;

  --success:#ff365f;
  --failure:#5aa4ff;

  --shadow:0 16px 36px rgba(116,54,82,.16);
  --shadow2:0 8px 16px rgba(116,54,82,.12);

  --safeTop:max(12px, env(safe-area-inset-top));
  --safeBottom:max(12px, env(safe-area-inset-bottom));
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--ink);
  font-family:"Noto Sans JP", system-ui, sans-serif;
  background:
    radial-gradient(circle at top, rgba(255,182,208,.55), transparent 26%),
    linear-gradient(180deg, var(--bg1), var(--bg2) 50%, var(--bg3));
  min-height:100dvh;
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  font:inherit;
}

.hidden{
  display:none !important;
}

.page{
  width:min(920px, calc(100% - 14px));
  margin:0 auto;
  padding:var(--safeTop) 0 calc(22px + var(--safeBottom));
}

/* =========================================================
   Topbar
========================================================= */
.topbar{
  display:grid;
  grid-template-columns:62px 1fr 92px;
  gap:8px;
  align-items:center;
  padding:7px;
  margin-bottom:12px;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.22)),
    linear-gradient(90deg, #ffd7e4, #ffe7f0 40%, #fff1df);
  border:1px solid rgba(176,84,120,.18);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.36),
    var(--shadow);
  position:relative;
  overflow:hidden;
}

.topbar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.52), transparent 34%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

.topBtn{
  position:relative;
  z-index:1;
  min-height:48px;
  border:none;
  cursor:pointer;
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70)),
    linear-gradient(180deg, var(--gold1), var(--gold2));
  color:#6a3a20;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.48),
    inset 0 -8px 14px rgba(255,255,255,.10),
    0 8px 14px rgba(128,70,95,.12);
  overflow:hidden;
}

.topBtn::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.55);
  pointer-events:none;
}

.topBtn:active{
  transform:translateY(1px);
}

.topBtn--back{
  display:grid;
  place-items:center;
  font-size:22px;
  font-weight:800;
}

.topBtn--book{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:4px 2px;
}

.topBtnMain{
  font-size:14px;
  font-weight:900;
  line-height:1;
}

.topBtnSub{
  font-size:10px;
  font-weight:800;
  color:#8f6732;
  line-height:1;
}

.topTitle{
  text-align:center;
  min-width:0;
  position:relative;
  z-index:1;
}

.topTitle h1{
  margin:0;
  font-family:"DotGothic16", sans-serif;
  font-size:20px;
  line-height:1.05;
  color:#7a314d;
  letter-spacing:.02em;
}

.topTitle p{
  margin:2px 0 0;
  font-size:10px;
  line-height:1.2;
  color:#9f6a7b;
  font-weight:700;
}

/* =========================================================
   Hero
========================================================= */
.hero{
  margin-bottom:14px;
}

.heroFrame{
  overflow:hidden;
  border:4px solid #111;
  background:#000;
  box-shadow:var(--shadow);
}

.heroImage{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 11;
  object-fit:cover;
}

.heroSpeechWrap{
  margin-top:10px;
}

.heroSpeech{
  position:relative;
  background:linear-gradient(180deg, var(--cream1), var(--cream2));
  border:1px solid rgba(133,86,57,.16);
  border-radius:12px;
  box-shadow:var(--shadow2);
  padding:11px 13px 10px;
}

.heroSpeech::before{
  content:"";
  position:absolute;
  left:22px;
  top:-8px;
  width:14px;
  height:14px;
  transform:rotate(45deg);
  background:linear-gradient(180deg, var(--cream1), var(--cream2));
  border-left:1px solid rgba(133,86,57,.16);
  border-top:1px solid rgba(133,86,57,.16);
}

.heroSpeechBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:3px 8px;
  margin-bottom:7px;
  border-radius:6px;
  background:linear-gradient(180deg, #8d4560, #6a3147);
  color:#fff6ed;
  box-shadow:0 6px 12px rgba(106,49,71,.16);
  font-size:11px;
  font-weight:800;
}

.heroSpeech p{
  margin:0;
  font-size:13px;
  line-height:1.6;
  font-weight:700;
  color:#5d4150;
}

/* =========================================================
   Hero stats
========================================================= */
.heroStatsWrap{
  margin-top:10px;
  display:grid;
  grid-template-columns:72px 1fr;
  gap:0;
  align-items:center;
}

.heroStatsNode{
  position:relative;
  z-index:2;
  width:72px;
  height:72px;
  margin-right:-8px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72)),
    linear-gradient(180deg, #fff2c8, #efcd6b);
  color:#6a3951;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.48),
    0 8px 16px rgba(121,66,91,.14);
  border:1px solid rgba(176,84,120,.16);
}

.heroStatsNode::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.7);
  pointer-events:none;
}

.heroStatsNodeNum{
  font-size:22px;
  line-height:1;
  font-weight:800;
  color:#7a314d;
  text-align:center;
}

.heroStatsNodeLabel{
  margin-top:1px;
  font-size:10px;
  line-height:1.05;
  font-weight:800;
  color:#9a6d41;
  text-align:center;
}

.heroStatsBarWrap{
  min-height:60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:8px 10px 8px 16px;
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.48)),
    linear-gradient(180deg, #fff4f8, #ffe8f0);
  border:1px solid rgba(176,84,120,.14);
  box-shadow:var(--shadow2);
}

.heroStatsBar{
  position:relative;
  width:100%;
  height:16px;
  border-radius:3px;
  overflow:hidden;
  background:#dfe7f7;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.08),
    inset 0 0 0 1px rgba(255,255,255,.45);
}

.heroStatsBarSuccess,
.heroStatsBarFail{
  position:absolute;
  top:0;
  bottom:0;
  transition:width .28s ease;
}

.heroStatsBarSuccess{
  left:0;
  width:0%;
  background:linear-gradient(90deg, #ff6c86, var(--success));
}

.heroStatsBarFail{
  right:0;
  width:0%;
  background:linear-gradient(90deg, #76b9ff, var(--failure));
}

.heroStatsMeta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  color:#7e6270;
  font-size:10px;
  font-weight:800;
  line-height:1.1;
}

/* =========================================================
   Hero heat meter
========================================================= */
.heroHeatWrap{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-width:0;
}

.heroHeatNode{
  position:relative;
  z-index:2;
  flex:0 0 72px;
  width:72px;
  height:72px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72)),
    linear-gradient(180deg, #ffd6df, #ff9db3);
  color:#6a3951;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.48),
    0 8px 16px rgba(121,66,91,.14);
  border:1px solid rgba(176,84,120,.16);
}

.heroHeatNode::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.7);
  pointer-events:none;
}

.heroHeatNodeNum{
  font-size:18px;
  line-height:1;
  font-weight:900;
  color:#7a314d;
  text-align:center;
}

.heroHeatNodeLabel{
  margin-top:2px;
  font-size:10px;
  line-height:1.05;
  font-weight:800;
  color:#9b4e67;
  text-align:center;
}

.heroHeatBarWrap{
  flex:1 1 auto;
  min-width:0;
  min-height:60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding:8px 10px 8px 12px;
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.48)),
    linear-gradient(180deg, #fff4f8, #ffe8f0);
  border:1px solid rgba(176,84,120,.14);
  box-shadow:var(--shadow2);
}

.heroHeatBar{
  position:relative;
  width:100%;
  height:16px;
  border-radius:3px;
  overflow:hidden;
  background:#f0d9e3;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.08),
    inset 0 0 0 1px rgba(255,255,255,.45);
}

.heroHeatBarFill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0%;
  transition:width .28s ease;
  background:linear-gradient(90deg, #ff9db3, #ff4f78);
}

.heroHeatMeta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  color:#7e6270;
  font-size:10px;
  font-weight:800;
  line-height:1.1;
}

.heroHeatAction{
  flex:0 0 auto;
  display:flex;
  align-items:center;
}

.heroHeatGachaBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:118px;
  height:44px;
  padding:0 14px;
  border-radius:13px;
  text-decoration:none;
  font-weight:900;
  font-size:13px;
  line-height:1;
  white-space:nowrap;
  user-select:none;
  transition:transform .15s ease, opacity .15s ease, filter .15s ease, box-shadow .15s ease;
  background:
    linear-gradient(180deg, #fff4ae, #ffd149 48%, #ff8a00);
  color:#5d2100;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.48),
    0 0 0 2px rgba(255,180,0,.18),
    0 10px 18px rgba(255,127,39,.28);
  border:1px solid rgba(203,98,0,.28);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

.heroHeatGachaBtn.isDisabled{
  pointer-events:none;
  opacity:.45;
  filter:grayscale(.18);
}

.heroHeatGachaBtn.isEnabled:hover{
  transform:translateY(-1px) scale(1.01);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.5),
    0 0 0 3px rgba(255,196,0,.22),
    0 12px 22px rgba(255,110,31,.34);
}

/* =========================================================
   Intro
========================================================= */
.intro{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:14px;
  margin-bottom:14px;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.4)),
    linear-gradient(180deg, #fff4f8, #ffe8f0);
  border:1px solid rgba(177,93,126,.12);
  box-shadow:var(--shadow);
}

.introLeft{
  flex:1 1 320px;
}

.boardDateHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.boardDateHead h2{
  margin:0;
  font-size:18px;
  line-height:1.2;
  color:#7c3552;
  font-family:"DotGothic16", sans-serif;
}

.howToBtn{
  min-height:34px;
  padding:5px 12px;
  border:none;
  border-radius:7px;
  cursor:pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.62)),
    linear-gradient(180deg, var(--gold1), var(--gold2));
  color:#5a3614;
  font-size:12px;
  font-weight:800;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.34),
    0 6px 10px rgba(0,0,0,.08);
}

.introLeft p{
  margin:6px 0 0;
  font-size:12px;
  line-height:1.65;
  color:var(--muted);
  font-weight:700;
}

.legendNotice{
  min-width:min(240px,100%);
  max-width:320px;
  padding:12px;
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.06)),
    linear-gradient(180deg, #8f4561, #6b3249);
  color:var(--text);
  box-shadow:var(--shadow2);
}

.legendNoticeBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 10px;
  margin-bottom:8px;
  border-radius:6px;
  background:linear-gradient(180deg, var(--gold1), var(--gold2));
  color:#5a3614;
  font-size:11px;
  font-weight:800;
  box-shadow:0 5px 10px rgba(0,0,0,.08);
}

.legendNotice h3{
  margin:0 0 6px;
  font-size:15px;
  line-height:1.35;
}

.legendNotice p{
  margin:0;
  font-size:12px;
  line-height:1.6;
  color:#ffeef5;
}

/* =========================================================
   Board
========================================================= */
.board{
  display:grid;
  gap:12px;
}

.matchList{
  display:grid;
  gap:12px;
}

.matchCard{
  position:relative;
  padding:12px;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.52)),
    linear-gradient(180deg, var(--panel1), var(--panel2));
  border:1px solid rgba(184,95,129,.12);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.matchCard::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.55);
  pointer-events:none;
}

.matchCard.isDone{
  opacity:.92;
  filter:saturate(.9);
}

.matchTopRow{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.matchCardHead{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:74px 1fr;
  gap:10px;
  align-items:start;
  margin-bottom:8px;
}

.matchAvatarFrame{
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.55), transparent 38%),
    linear-gradient(180deg, #fff8fb, #ffeef4);
  border:1px solid rgba(188,104,137,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  overflow:hidden;
}

.matchAvatar{
  width:72px;
  height:72px;
  object-fit:contain;
  image-rendering:auto;
  filter:drop-shadow(0 6px 10px rgba(126,70,92,.16));
}

.matchHeadRight{
  min-width:0;
}

.matchSpeech{
  position:relative;
  width:100%;
  max-width:100%;
  min-height:60px;
  height:60px;
  padding:8px 10px;
  border-radius:12px;
  background:linear-gradient(180deg, var(--cream1), var(--cream2));
  border:1px solid rgba(133,86,57,.16);
  box-shadow:var(--shadow2);
  font-size:12px;
  line-height:1.5;
  font-weight:800;
  color:#5f4553;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:opacity .18s ease;
  word-break:break-word;
}

.matchSpeech::before{
  content:"";
  position:absolute;
  left:-6px;
  top:18px;
  width:11px;
  height:11px;
  transform:rotate(45deg);
  background:linear-gradient(180deg, var(--cream1), var(--cream2));
  border-left:1px solid rgba(133,86,57,.16);
  border-bottom:1px solid rgba(133,86,57,.16);
}

.matchName{
  margin:0;
  min-width:0;
  word-break:break-word;
  font-size:15px;
  line-height:1.25;
  font-weight:900;
  color:#7a314d;
}

.metaRight{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.matchStars{
  white-space:nowrap;
  font-size:14px;
  line-height:1;
  letter-spacing:1px;
}

.matchStars.s1,.matchStars.s2{ color:#bea687; }
.matchStars.s3{ color:#8fb7d9; }
.matchStars.s4{ color:#b78dd8; }
.matchStars.s5{ color:#d8ae35; }

.matchBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:4px 9px;
  border-radius:6px;
  font-size:11px;
  font-weight:800;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 4px 8px rgba(0,0,0,.10);
  white-space:nowrap;
}

.matchBadge.ok{
  background:linear-gradient(180deg, var(--ok1), var(--ok2));
  color:#1f5b35;
  border:1px solid rgba(0,0,0,.05);
}

.matchBadge.ng{
  background:linear-gradient(180deg, var(--ng1), var(--ng2));
  color:#433652;
  border:1px solid rgba(0,0,0,.05);
}

.matchBadge.done{
  background:linear-gradient(180deg, var(--done1), var(--done2));
  color:#5f4618;
  border:1px solid rgba(0,0,0,.05);
}

.matchMain{
  position:relative;
  z-index:1;
  padding:11px;
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    linear-gradient(180deg, #6f324a, #511f33);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow2);
}

.matchRewardTitle{
  color:#fff6ec;
  font-size:12px;
  font-weight:800;
  margin-bottom:8px;
}

.rewardShowcase{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.rewardShowChip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:27px;
  padding:4px 10px;
  border-radius:6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  color:#fff8ef;
  font-size:11px;
  font-weight:800;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 4px 8px rgba(0,0,0,.10);
  white-space:nowrap;
}

.matchThoughtBox{
  margin-bottom:10px;
  border-radius:8px;
  padding:9px 11px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}

.matchThoughtCap{
  color:#ffdca8;
  font-size:11px;
  font-weight:800;
  margin-bottom:5px;
}

.matchThoughtText{
  color:#fff4f8;
  font-size:13px;
  line-height:1.65;
  font-weight:700;
}

/* =========================================================
   Hint
========================================================= */
.matchHintPanel{
  margin-top:8px;
}

.matchHintBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:3px 8px;
  margin-bottom:6px;
  border-radius:6px;
  background:linear-gradient(180deg, #ffb3c9, #ff8fb0);
  color:#5a2438;
  font-size:10px;
  font-weight:800;
  box-shadow:0 4px 8px rgba(0,0,0,.08);
}

.matchHintLargeBox{
  padding:10px;
  border-radius:8px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 10px rgba(0,0,0,.06);
  margin-bottom:8px;
}

.matchHintLabel{
  font-size:11px;
  font-weight:800;
  color:#a35a73;
  margin-bottom:4px;
}

.matchHintCurrent{
  font-size:13px;
  font-weight:800;
  line-height:1.6;
  color:#333;
}

.matchActionRow{
  display:flex;
  gap:8px;
  align-items:stretch;
}

.matchPuffyBtn{
  flex:0 0 52%;
  min-height:44px;
  border:none;
  cursor:pointer;
  border-radius:10px;
  font-size:13px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(180deg, #ff6b8d, #ff3f6c);
  box-shadow:0 6px 12px rgba(255,80,120,.3);
}

.matchPuffyBtn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.matchHintNextBtn{
  flex:1 1 48%;
  min-height:44px;
  padding:0 10px;
  border:none;
  cursor:pointer;
  border-radius:10px;
  font-size:12px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(180deg, #6ea8ff, #4d84ff);
  box-shadow:0 6px 12px rgba(80,120,255,.25);
  white-space:normal;
  line-height:1.25;
}

.matchHintNextBtn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.matchRetryNote{
  margin-top:6px;
  font-size:11px;
  font-weight:700;
  color:#fff;
}

.matchRetryNote.isEnd{
  color:#ffb0c0;
}

/* =========================================================
   Modal
========================================================= */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(55,25,40,.50);
  backdrop-filter:blur(5px);
  z-index:1000;
  padding:12px;
}

.modal.show{
  display:flex;
}

.modalCard{
  position:relative;
  width:min(760px, 100%);
  max-height:min(88vh, 920px);
  overflow:auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.82)),
    linear-gradient(180deg, #fff7fa, #ffeef4);
  border:1px solid rgba(184,95,129,.18);
  border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.22);
}

.modalCard::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.58);
  pointer-events:none;
}

.modalCard--howto{
  width:min(560px, 100%);
}

.modalCard--affection{
  width:min(760px, 100%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.90)),
    linear-gradient(180deg, #fff8fb, #ffeef5);
}

.modalBody{
  position:relative;
  padding:18px 14px 16px;
}

.modalClose{
  position:absolute;
  top:10px;
  right:10px;
  width:44px;
  height:44px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  z-index:5;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.80)),
    linear-gradient(180deg, #ffd6e3, #ffb8cf);
  color:#7a314d;
  font-size:22px;
  font-weight:900;
  box-shadow:0 8px 16px rgba(0,0,0,.10);
}

.modalClose:active{
  transform:translateY(1px);
}

.modalTop{
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
  padding-right:50px;
}

.modalAvatar{
  width:64px;
  height:64px;
  object-fit:contain;
  border-radius:10px;
  background:#fff6fa;
  padding:4px;
}

.modalName{
  margin:0;
  font-size:16px;
  font-weight:900;
  color:#7a314d;
}

.modalLine{
  margin:3px 0 0;
  font-size:12px;
  color:#7d6070;
  font-weight:700;
  line-height:1.5;
}

.modalRight{
  text-align:right;
}

.modalTagRow{
  margin-top:4px;
}

.modalTag{
  font-size:10px;
  background:linear-gradient(180deg, #fff1c6, #efcd6e);
  color:#62401a;
  padding:4px 8px;
  border-radius:6px;
  font-weight:900;
  box-shadow:0 5px 10px rgba(0,0,0,.08);
}

.modalSectionTitle{
  margin:10px 0 8px;
  font-size:13px;
  font-weight:900;
  color:#6e3047;
}

.modalCardGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(108px,1fr));
  gap:10px;
}

.selectCardItem{
  min-width:0;
}

.selectCardBtn{
  width:100%;
  border:none;
  background:none;
  cursor:pointer;
  padding:0;
  text-align:left;
}

.selectCardBtn:active{
  transform:translateY(1px);
}

.selectCardBox{
  position:relative;
  width:100%;
  aspect-ratio:63 / 88;
  border-radius:10px;
  overflow:hidden;
  background:#efe6eb;
  box-shadow:0 10px 18px rgba(86,40,60,.16);
  border:1px solid rgba(125,66,91,.12);
}

.selectCardBox img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.selectCardOwn{
  position:absolute;
  right:5px;
  bottom:5px;
  min-width:34px;
  text-align:center;
  background:linear-gradient(180deg, #ffea71, #ffb300);
  color:#4d2400;
  font-size:10px;
  font-weight:900;
  padding:2px 5px;
  border-radius:999px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.7),
    0 8px 14px rgba(0,0,0,.22);
}

.selectCardName{
  font-size:10px;
  margin-top:4px;
  text-align:center;
  line-height:1.35;
  font-weight:800;
  color:#5f3b4b;
  word-break:break-word;
}

.modalStatusList{
  display:grid;
  gap:8px;
  padding:6px 0 2px;
}

.modalStatusLine{
  font-size:13px;
  line-height:1.6;
  font-weight:800;
  color:#5e4654;
}

.modalStatusLine.ok{
  color:#5e4654;
}

.modalStatusLine.ng{
  color:#d94468;
}

/* =========================================================
   Reward modal
========================================================= */
.rewardModal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(35,18,26,.58);
  backdrop-filter:blur(5px);
  z-index:1100;
  padding:12px;
}

.rewardModal.show{
  display:flex;
}

.rewardCard{
  width:min(420px, 100%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.88)),
    linear-gradient(180deg, #fff7fb, #ffeef5);
  border-radius:20px;
  padding:16px;
  text-align:center;
  box-shadow:0 26px 60px rgba(0,0,0,.26);
  border:1px solid rgba(190,100,132,.18);
}

.rewardCap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 10px;
  border-radius:999px;
  background:linear-gradient(180deg, #fff0bf, #efcb66);
  color:#5d3813;
  font-size:11px;
  font-weight:900;
  margin-bottom:8px;
}

.rewardTitle{
  font-size:22px;
  font-weight:900;
  margin:0 0 4px;
  color:#7a314d;
}

.rewardSub{
  font-size:12px;
  color:#666;
  margin:0 0 10px;
  font-weight:700;
}

.rewardList{
  display:grid;
  gap:6px;
}

.rewardItem{
  opacity:0;
  transform:translateY(10px);
  transition:.3s;
  font-size:13px;
  font-weight:800;
  color:#4f3441;
  background:#fff;
  padding:8px 10px;
  border-radius:8px;
  box-shadow:0 6px 12px rgba(0,0,0,.06);
}

.rewardItem.show{
  opacity:1;
  transform:none;
}

.rewardItemBonus{
  background:linear-gradient(180deg, #ffe998, #f4d25d);
  color:#6a430f;
}

.rewardCloseBtn{
  margin-top:12px;
  padding:10px 16px;
  border:none;
  border-radius:10px;
  background:linear-gradient(180deg, #ff6b8d, #ff3f6c);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(255,63,108,.24);
}

/* =========================================================
   Affection modal
========================================================= */
.affectionHeroCap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:4px 12px;
  border-radius:999px;
  background:linear-gradient(180deg, #fff0bf, #efcb66);
  color:#5d3813;
  font-size:12px;
  font-weight:900;
  margin-bottom:10px;
}

.affectionHeroTitle{
  margin:0 0 6px;
  color:#7a314d;
  font-size:22px;
  line-height:1.25;
  font-weight:900;
}

.affectionHeroSub{
  margin:0 0 14px;
  color:#876c79;
  font-size:13px;
  line-height:1.6;
  font-weight:700;
}

.affectionList{
  display:grid;
  gap:12px;
}

.affectionItem{
  padding:14px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78)),
    linear-gradient(180deg, #fff8fb, #fff1f6);
  border:1px solid rgba(177,110,138,.12);
  box-shadow:0 8px 18px rgba(130,72,96,.08);
}

.affectionItemTop{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:12px;
  align-items:start;
}

.affectionIcon{
  width:88px;
  height:88px;
  border-radius:16px;
  background:#fff6fa;
  border:1px solid rgba(177,110,138,.12);
  display:grid;
  place-items:center;
  overflow:hidden;
}

.affectionIcon img{
  width:78px;
  height:78px;
  object-fit:contain;
  display:block;
}

.affectionMain{
  min-width:0;
}

.affectionNameRow{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:6px;
}

.affectionName{
  color:#7a314d;
  font-size:18px;
  font-weight:900;
  line-height:1.25;
}

.affectionRegular{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:2px 8px;
  border-radius:999px;
  background:linear-gradient(180deg, #fff0bf, #efcb66);
  color:#6a430f;
  font-size:11px;
  font-weight:900;
}

.affectionDesc{
  color:#6c5561;
  font-size:14px;
  font-weight:800;
  line-height:1.55;
  margin-bottom:6px;
}

.affectionSub{
  color:#8a6f7c;
  font-size:12px;
  font-weight:700;
  line-height:1.5;
}

.affectionMeta{
  margin-top:12px;
}

.affectionLove{
  color:#7a314d;
  font-size:16px;
  font-weight:900;
  margin-bottom:6px;
}

.affectionHearts{
  display:flex;
  gap:5px;
  font-size:22px;
  line-height:1;
  margin-bottom:10px;
}

.affectionHearts .on{
  color:#ff7fb2;
}

.affectionHearts .off{
  color:#e4ccd8;
}

.affectionGaugeWrap{
  margin-top:8px;
}

.affectionGauge{
  width:100%;
  height:20px;
  border-radius:999px;
  background:#eddce5;
  box-shadow:inset 0 3px 7px rgba(0,0,0,.08);
  overflow:hidden;
}

.affectionGaugeBar{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #ff91b7, #efc456);
  min-width:0;
}

.affectionEmpty{
  color:#876c79;
  font-size:14px;
  font-weight:700;
  text-align:center;
  padding:18px 0 8px;
}

.affectionFoot{
  display:flex;
  justify-content:center;
  padding-top:16px;
}

.affectionOkBtn{
  min-width:180px;
  min-height:54px;
  padding:10px 16px;
  border:none;
  border-radius:16px;
  background:linear-gradient(180deg, #ff6b8d, #ff3f6c);
  color:#fff;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 12px 18px rgba(255,63,108,.24);
}

/* =========================================================
   Toast / Float / Foot
========================================================= */
.takopiFloat{
  position:fixed;
  right:12px;
  bottom:calc(16px + var(--safeBottom));
  z-index:120;
  width:60px;
  height:60px;
  min-width:60px;
  min-height:60px;
  border:none;
  border-radius:16px;
  padding:4px;
  display:grid;
  place-items:center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.86)),
    linear-gradient(180deg, #fff7fa, #ffeaf1);
  color:#7a314d;
  box-shadow:0 14px 24px rgba(0,0,0,.18);
  cursor:pointer;
  overflow:hidden;
}

.takopiFloat img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.takopiFloatFace,
.takopiFloatLabel{
  display:none;
}

.takopiToast{
  position:fixed;
  right:82px;
  left:auto;
  bottom:calc(26px + var(--safeBottom));
  transform:none;
  background:rgba(27,12,19,.94);
  color:#fff;
  padding:12px 14px;
  border-radius:12px;
  opacity:0;
  pointer-events:none;
  transition:.24s;
  z-index:1300;
  box-shadow:0 14px 30px rgba(0,0,0,.28);
  max-width:min(68vw, 380px);
}

.takopiToast::after{
  content:"";
  position:absolute;
  right:-7px;
  bottom:16px;
  width:14px;
  height:14px;
  transform:rotate(45deg);
  background:rgba(27,12,19,.94);
  border-radius:2px;
}

.takopiToast.show{
  opacity:1;
}

.takopiToastInner{
  font-size:13px;
  font-weight:800;
  line-height:1.45;
  text-align:center;
}

.footNote{
  margin:14px 4px 0;
  color:#765867;
  font-size:12px;
  line-height:1.75;
  font-weight:700;
}

/* =========================================================
   Suspense / Judge effect
========================================================= */
.suspenseLayer,
.heartJudgeLayer{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
  pointer-events:none;
}

.suspenseLayer{
  background:
    radial-gradient(circle at 50% 50%, rgba(255,80,120,.08), transparent 28%),
    rgba(0,0,0,.92);
}

.suspenseLayer.show{
  display:flex;
}

.suspenseInner{
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(86vw, 520px);
  text-align:center;
}

.suspenseText{
  color:#ff2d55;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  font-size:clamp(34px, 10vw, 64px);
  font-weight:900;
  line-height:1.05;
  letter-spacing:.08em;
  text-shadow:
    0 0 8px rgba(255,45,85,.35),
    0 0 20px rgba(255,45,85,.22),
    0 6px 22px rgba(0,0,0,.5);
  animation:dokidokiPulse .42s ease-in-out infinite;
}

@keyframes dokidokiPulse{
  0%   { transform:scale(.94); opacity:.88; }
  30%  { transform:scale(1.08); opacity:1; }
  55%  { transform:scale(.96); opacity:.94; }
  100% { transform:scale(1.12); opacity:1; }
}

.heartJudgeLayer{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), transparent 30%),
    rgba(0,0,0,.68);
}

.heartJudgeLayer.show{
  display:flex;
}

.heartJudgeBurst{
  position:absolute;
  inset:-10%;
  opacity:0;
  pointer-events:none;
}

.heartJudgeBurst--success{
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0%, rgba(255,244,189,.96) 12%, rgba(255,158,208,.55) 24%, rgba(255,85,120,.18) 42%, transparent 62%),
    radial-gradient(circle at 20% 22%, rgba(255,255,255,.7), transparent 20%),
    radial-gradient(circle at 76% 24%, rgba(255,244,210,.68), transparent 18%),
    radial-gradient(circle at 28% 76%, rgba(255,195,224,.5), transparent 18%),
    radial-gradient(circle at 80% 74%, rgba(255,255,255,.5), transparent 20%);
  filter:blur(2px);
}

.heartJudgeBurst--fail{
  background:
    radial-gradient(circle at 50% 46%, rgba(146,168,205,.58) 0%, rgba(94,112,154,.38) 16%, rgba(53,61,97,.24) 34%, transparent 58%),
    linear-gradient(180deg, rgba(28,32,58,.12), rgba(16,18,33,.55)),
    radial-gradient(circle at 26% 22%, rgba(180,190,215,.14), transparent 18%),
    radial-gradient(circle at 72% 28%, rgba(138,148,188,.12), transparent 18%);
  filter:grayscale(.15) blur(1px);
}

.heartJudgeLayer.success .heartJudgeBurst--success{
  opacity:1;
  animation:successFlash 1.2s ease-out both;
}

.heartJudgeLayer.fail .heartJudgeBurst--fail{
  opacity:1;
  animation:failFog 1.1s ease-out both;
}

.heartJudgeInner{
  position:relative;
  z-index:2;
  text-align:center;
  padding:16px;
  width:min(90vw, 520px);
}

.heartJudgeIcon{
  color:#ff2a52;
  font-size:clamp(96px, 28vw, 180px);
  line-height:.9;
  font-weight:900;
  text-shadow:
    0 0 10px rgba(255,42,82,.45),
    0 0 24px rgba(255,42,82,.28),
    0 18px 34px rgba(0,0,0,.34);
}

.heartJudgeText{
  margin-top:8px;
  color:#fff;
  font-size:clamp(22px, 6vw, 38px);
  line-height:1.2;
  font-weight:900;
  text-shadow:0 6px 20px rgba(0,0,0,.45);
}

.heartJudgeSub{
  margin-top:8px;
  color:#ffd6df;
  font-size:clamp(14px, 3.6vw, 20px);
  line-height:1.5;
  font-weight:800;
  text-shadow:0 4px 14px rgba(0,0,0,.4);
}

.heartJudgeInner.success .heartJudgeIcon{
  animation:loveBoom .72s cubic-bezier(.18,.89,.24,1.2) both;
}

.heartJudgeInner.success .heartJudgeText,
.heartJudgeInner.success .heartJudgeSub{
  animation:judgeTextRise .55s ease both .08s;
}

.heartJudgeInner.fail .heartJudgeIcon{
  animation:loveDrop .95s cubic-bezier(.2,.7,.2,1) both;
}

.heartJudgeInner.fail .heartJudgeText,
.heartJudgeInner.fail .heartJudgeSub{
  animation:judgeTextFade .8s ease both .12s;
}

@keyframes successFlash{
  0%{
    opacity:0;
    transform:scale(.72);
    filter:blur(10px) brightness(1.1);
  }
  40%{
    opacity:1;
    transform:scale(1.08);
    filter:blur(1px) brightness(1.65);
  }
  100%{
    opacity:1;
    transform:scale(1.14);
    filter:blur(2px) brightness(1.2);
  }
}

@keyframes failFog{
  0%{
    opacity:0;
    transform:translateY(-16px) scale(.96);
    filter:blur(6px);
  }
  40%{
    opacity:1;
    transform:translateY(0) scale(1.02);
    filter:blur(2px);
  }
  100%{
    opacity:1;
    transform:translateY(10px) scale(1.04);
    filter:blur(3px);
  }
}

@keyframes loveBoom{
  0%{ transform:scale(.12); opacity:0; filter:blur(8px); }
  55%{ transform:scale(1.28); opacity:1; filter:blur(0); }
  78%{ transform:scale(.94); }
  100%{ transform:scale(1); }
}

@keyframes loveDrop{
  0%{ transform:translateY(-46px) scale(1.18); opacity:0; }
  32%{ transform:translateY(0) scale(1.02); opacity:1; }
  68%{ transform:translateY(16px) scale(.92); }
  100%{ transform:translateY(10px) scale(.9); opacity:1; }
}

@keyframes judgeTextRise{
  0%{ opacity:0; transform:translateY(18px) scale(.94); }
  100%{ opacity:1; transform:none; }
}

@keyframes judgeTextFade{
  0%{ opacity:0; transform:translateY(-6px); }
  100%{ opacity:1; transform:none; }
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 640px){
  .topbar{
    grid-template-columns:56px 1fr 88px;
  }

  .topBtnMain{
    font-size:13px;
  }

  .topBtnSub{
    font-size:10px;
  }

  .matchCardHead{
    grid-template-columns:70px 1fr;
  }

  .matchAvatarFrame{
    width:70px;
    height:70px;
  }

  .matchAvatar{
    width:68px;
    height:68px;
  }

  .modalCardGrid{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }

  .takopiFloat{
    right:10px;
    bottom:calc(12px + var(--safeBottom));
    width:56px;
    height:56px;
    min-width:56px;
    min-height:56px;
    border-radius:14px;
    padding:3px;
  }

  .takopiToast{
    right:74px;
    bottom:calc(20px + var(--safeBottom));
    max-width:min(64vw, 300px);
    padding:10px 12px;
  }

  .takopiToast::after{
    right:-6px;
    bottom:14px;
    width:12px;
    height:12px;
  }

  .affectionItemTop{
    grid-template-columns:78px 1fr;
    gap:10px;
  }

  .affectionIcon{
    width:78px;
    height:78px;
  }

  .affectionIcon img{
    width:70px;
    height:70px;
  }

  .matchActionRow{
    gap:6px;
  }

  .matchHintNextBtn{
    flex:1 1 46%;
    font-size:11px;
    padding:0 8px;
  }

  .matchPuffyBtn{
    flex:0 0 54%;
    font-size:12px;
  }

  .heroHeatWrap{
    gap:8px;
  }

  .heroHeatNode{
    flex:0 0 68px;
    width:68px;
    height:68px;
  }

  .heroHeatNodeNum{
    font-size:16px;
  }

  .heroHeatBarWrap{
    padding:8px 8px 8px 10px;
  }

  .heroHeatGachaBtn{
    min-width:96px;
    height:38px;
    padding:0 10px;
    font-size:12px;
    border-radius:10px;
  }
}