* { box-sizing: border-box; }

:root {
  --pink: #ff8fb1;
  --peach: #ffb385;
  --lavender: #b9a3ff;
  --sky: #7fd6ff;
  --mint: #8fe8c8;
  --cream: #fff8f2;
  --ink: #5b4a5a;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #ffe8f0 0%, #ffd9e8 22%, #e3d4ff 55%, #bfeaff 100%);
  background-attachment: fixed;
  font-family: "M PLUS Rounded 1c", "Hiragino Sans", "Yu Gothic", sans-serif;
  color: var(--ink);
  padding: 16px;
}

#app { width: 100%; max-width: 420px; }

.screen {
  background: rgba(255,255,255,0.82);
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 26px;
  padding: 22px 20px;
  text-align: center;
  box-shadow: 0 14px 30px rgba(190,120,180,0.25), inset 0 0 0 1px rgba(255,255,255,0.4);
}

.hidden { display: none !important; }

/* ---------- マスコット ---------- */
.mascot-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
}
.mascot {
  font-size: 40px;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.15));
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-6px) rotate(3deg); }
}
.speech-bubble {
  position: relative;
  background: #fff;
  border: 2px solid var(--pink);
  border-radius: 16px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: bold;
  color: var(--ink);
}
.speech-bubble::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: var(--pink);
}

/* ---------- タイトル ---------- */
h1 {
  font-family: "Yusei Magic", "M PLUS Rounded 1c", sans-serif;
  font-size: 30px;
  margin: 6px 0 4px;
  color: #ff5f96;
  text-shadow: 2px 2px 0 #fff, -1px -1px 0 #fff, 3px 4px 0 rgba(255,143,177,0.4);
}
h1 .sub {
  display: block;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 12.5px;
  font-weight: bold;
  color: #a06fc9;
  margin-top: 4px;
  text-shadow: none;
}

.desc { font-size: 13.5px; line-height: 1.7; color: #6b5768; margin: 6px 0 10px; }

.legend {
  font-size: 15px;
  margin: 14px 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.legend-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: linear-gradient(160deg, #fff, #fff3f8);
  border: 2px solid #ffd3e4;
  border-radius: 14px;
  padding: 6px 8px;
  min-width: 44px;
}
.legend-chip .em { font-size: 22px; }
.legend-chip .nm { font-size: 9px; color: #8a7089; font-weight: bold; }

.btn-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 8px 0;
}

.btn-primary {
  background: linear-gradient(135deg, #ff9ec2, #ff6f91);
  color: #fff;
  border: none;
  border-bottom: 4px solid #e8548a;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: bold;
  font-family: inherit;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(255,111,145,0.45);
}
.btn-primary:active { transform: translateY(2px); border-bottom-width: 2px; }

.btn-secondary {
  background: #fff;
  color: #a06fc9;
  border: 2px solid #d9bfff;
  border-bottom: 4px solid #c6a3f7;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: bold;
  font-family: inherit;
  border-radius: 22px;
  cursor: pointer;
}
.btn-secondary:active { transform: translateY(2px); border-bottom-width: 2px; }

.btn-icon {
  background: #fff;
  border: 2px solid #ffd3e4;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 16px;
  cursor: pointer;
}
.btn-icon.small { width: 30px; height: 30px; font-size: 13px; }

.howto {
  font-size: 10.5px;
  color: #9a86a0;
  margin-top: 12px;
  line-height: 1.7;
}

/* ---------- PRバナー(タイトル画面) ---------- */
.pr-banner {
  margin-top: 18px;
  border-top: 2px dashed #ffd3e4;
  padding-top: 14px;
}
.pr-banner a {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(160deg, #fff, #fff3f8);
  border: 2px solid #ffd3e4;
  border-radius: 16px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--ink);
  text-align: left;
}
.pr-banner a:active { transform: translateY(1px); }
.pr-tag {
  flex-shrink: 0;
  background: #ffd166;
  color: #6b4a00;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 6px;
}
.pr-emoji { font-size: 22px; }
.pr-text { font-size: 12px; line-height: 1.4; }
.pr-text b { display: block; font-size: 13px; color: #ff5f96; }

/* ---------- ゲーム画面トップバー ---------- */
.game-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.chip {
  background: linear-gradient(160deg, #fff, #f3ecff);
  border: 2px solid #d9bfff;
  border-radius: 16px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: bold;
  color: #7a56a3;
}
.chip.score-chip { border-color: #ffc9dc; color: #d9366f; background: linear-gradient(160deg, #fff, #ffeef4); }

/* ---------- ゲーム画面 ---------- */
.game-layout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: center;
}

.board-wrap { position: relative; }

#board {
  background: linear-gradient(180deg, #eaf7ff 0%, #fdf3ff 100%);
  border: 4px solid #fff;
  outline: 3px solid #ffd3e4;
  border-radius: 14px;
  display: block;
  box-shadow: 0 8px 20px rgba(190,120,180,0.25);
}

.chain-popup {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  font-family: "Yusei Magic", sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: #ff5f96;
  text-shadow: 0 0 6px #fff, 0 0 2px #fff, 2px 2px 0 #ffd166;
  pointer-events: none;
  animation: popIn 1s ease-out forwards;
  white-space: nowrap;
  text-align: center;
}
@keyframes popIn {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.4) rotate(-8deg); }
  20%  { opacity: 1; transform: translate(-50%,-50%) scale(1.2) rotate(4deg); }
  70%  { opacity: 1; transform: translate(-50%,-65%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%,-95%) scale(1) rotate(0deg); }
}

.mascot-reaction {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 30px;
  animation: bounceIn 0.5s ease-out;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.2));
}
@keyframes bounceIn {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 96px;
}

.panel-box {
  background: linear-gradient(160deg, #fff, #f3ecff);
  border: 2px solid #d9bfff;
  border-radius: 14px;
  padding: 6px;
  text-align: center;
}
.panel-box.small-box { padding: 4px; opacity: 0.85; }
.panel-label { font-size: 9px; letter-spacing: 1px; color: #a184c4; font-weight: bold; }
.panel-value { font-size: 18px; font-weight: bold; }
#next, #next2 { background: #fdf3ff; border-radius: 10px; margin-top: 4px; }

.touch-controls {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.dpad {
  display: flex;
  gap: 6px;
}
.tbtn {
  background: linear-gradient(160deg, #fff, #ffeef4);
  border: 2px solid #ffc9dc;
  border-bottom: 4px solid #ffaecb;
  color: #d9366f;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}
.tbtn.round { width: 34px; height: 34px; border-radius: 50%; padding: 0; }
.tbtn.wide { width: 100%; font-size: 11px; padding: 8px 0; border-radius: 16px; }
.tbtn:active { transform: translateY(2px); border-bottom-width: 2px; }

/* ---------- ゲームオーバー ---------- */
#over-title {
  font-family: "Yusei Magic", sans-serif;
  font-size: 22px;
  margin: 6px 0;
  color: #ff5f96;
}
.over-score { font-size: 19px; font-weight: bold; margin: 4px 0; color: var(--ink); }
.over-best { font-size: 12.5px; color: #9a86a0; margin-bottom: 4px; }

.new-stamps {
  margin: 10px 0;
  background: linear-gradient(160deg, #fff8e0, #fff0c2);
  border: 2px dashed #ffd166;
  border-radius: 14px;
  padding: 8px;
  font-size: 12px;
  font-weight: bold;
  color: #a67c00;
}
.new-stamps .stamp-line { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 2px 0; }
.new-stamps .stamp-line .em { font-size: 20px; }

.pr-card {
  margin-top: 16px;
  border-top: 2px dashed #ffd3e4;
  padding-top: 14px;
}
.pr-card .pr-headline {
  font-size: 13.5px;
  color: #d9366f;
  margin-bottom: 10px;
  font-weight: bold;
}
.pr-card a {
  display: block;
  background: linear-gradient(160deg, #fff, #fff3f8);
  color: #1a1a1a;
  border-radius: 16px;
  padding: 14px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(190,120,180,0.3);
  text-align: left;
  position: relative;
  border: 2px solid #ffd3e4;
}
.pr-card a:active { transform: translateY(1px); }
.pr-card .pr-tag {
  position: absolute;
  top: 10px;
  right: 10px;
}
.pr-card .pr-row { display: flex; align-items: center; gap: 12px; }
.pr-card .pr-emoji { font-size: 30px; }
.pr-card .pr-text b { font-size: 15px; display: block; margin-bottom: 3px; color: #ff5f96; }
.pr-card .pr-text span { font-size: 12px; color: #6b5768; }
.pr-card .pr-cta {
  margin-top: 10px;
  display: inline-block;
  background: linear-gradient(135deg, #ff9ec2, #ff6f91);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 8px 14px;
  border-radius: 20px;
}

/* ---------- スタンプ図鑑モーダル ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(90,60,90,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal-card {
  background: #fff8f2;
  border-radius: 22px;
  padding: 18px;
  max-width: 380px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Yusei Magic", sans-serif;
  font-size: 15px;
  color: #ff5f96;
  margin-bottom: 6px;
}
.zukan-count { font-size: 11.5px; color: #9a86a0; font-weight: bold; margin-bottom: 10px; }
.zukan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.stamp-cell {
  background: linear-gradient(160deg, #fff, #f3ecff);
  border: 2px solid #d9bfff;
  border-radius: 14px;
  padding: 10px 6px;
  text-align: center;
}
.stamp-cell.locked { opacity: 0.5; filter: grayscale(0.8); }
.stamp-cell .em { font-size: 26px; display: block; }
.stamp-cell .nm { font-size: 9.5px; font-weight: bold; margin-top: 4px; color: #6b5768; line-height: 1.3; }

/* ---------- トースト ---------- */
.toast, .stamp-toast {
  position: fixed;
  right: 14px;
  bottom: 14px;
  max-width: 300px;
  background: #fff;
  border: 2px solid #ffd3e4;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 24px rgba(190,120,180,0.35);
  animation: slideUp 0.35s ease-out;
  z-index: 50;
}
.stamp-toast {
  bottom: auto;
  top: 14px;
  right: 14px;
  background: linear-gradient(160deg, #fff8e0, #fff0c2);
  border-color: #ffd166;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.toast a {
  display: flex;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}
.toast-info {
  font-size: 12.5px;
  font-weight: bold;
  color: var(--ink);
  white-space: pre-line;
  padding-right: 14px;
}
.toast-close {
  position: absolute;
  top: 4px;
  right: 8px;
  background: none;
  border: none;
  color: #bbb;
  font-size: 14px;
  cursor: pointer;
}
.stamp-toast-inner { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: bold; color: #a67c00; }
.stamp-toast-inner .em { font-size: 26px; }

/* ---------- ステージ選択 ---------- */
.select-title {
  font-family: "Yusei Magic", sans-serif;
  font-size: 20px;
  color: #ff5f96;
  margin: 4px 0 14px;
}
.stage-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stage-card {
  background: linear-gradient(160deg, #fff, #f7f0ff);
  border: 2px solid #d9bfff;
  border-radius: 18px;
  padding: 12px 14px;
  text-align: left;
}
.stage-card-top { display: flex; align-items: center; justify-content: space-between; }
.stage-card-emoji { font-size: 28px; }
.stage-cleared-badge {
  background: #d8f5df;
  color: #2f8f4e;
  font-size: 10px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 10px;
}
.stage-card-name { font-family: "Yusei Magic", sans-serif; font-size: 15px; color: #7a56a3; margin-top: 6px; }
.stage-card-genre { font-size: 10.5px; color: #a06fc9; font-weight: bold; margin-bottom: 4px; }
.stage-card-desc { font-size: 11.5px; color: #6b5768; line-height: 1.5; margin-bottom: 8px; }
.stage-card-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: bold;
  color: #9a86a0;
  margin-bottom: 10px;
}
.stage-play-btn { width: 100%; padding: 10px 0; font-size: 14px; }

/* ---------- ゲーム画面トップバー追加要素 ---------- */
.stage-chip { color: #d9366f; border-color: #ffc9dc; }

.fever-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
#fever-gauge {
  flex: 1;
  height: 14px;
  background: #f0e6ff;
  border: 2px solid #d9bfff;
  border-radius: 10px;
  overflow: hidden;
}
#fever-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffb347, #ff6f91, #b968ff);
  transition: width 0.2s ease-out;
}
.fever-btn {
  background: linear-gradient(135deg, #d9d9e6, #c7c7d6);
  color: #8a8a9a;
  border: none;
  border-bottom: 4px solid #b3b3c2;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: bold;
  font-family: inherit;
  border-radius: 20px;
  cursor: not-allowed;
  white-space: nowrap;
}
.fever-btn.ready {
  background: linear-gradient(135deg, #ffcf5c, #ff7a59);
  color: #fff;
  border-bottom-color: #e2551f;
  cursor: pointer;
  animation: feverPulse 0.8s ease-in-out infinite;
}
.fever-btn:disabled { cursor: not-allowed; }
@keyframes feverPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,89,0.55); }
  50% { box-shadow: 0 0 0 8px rgba(255,122,89,0); }
}

.board-wrap.fever-glow #board {
  animation: feverGlow 0.6s ease-in-out infinite alternate;
}
@keyframes feverGlow {
  from { box-shadow: 0 0 10px 2px rgba(255,155,60,0.5), 0 8px 20px rgba(190,120,180,0.25); }
  to   { box-shadow: 0 0 22px 8px rgba(255,90,140,0.65), 0 8px 20px rgba(190,120,180,0.25); }
}

#fever-timerbar {
  position: absolute;
  top: -10px;
  left: 4px;
  right: 4px;
  height: 6px;
  background: rgba(255,255,255,0.5);
  border-radius: 6px;
  overflow: hidden;
  z-index: 5;
}
#fever-timerbar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ffb347, #ff5f96);
}

.fever-banner {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Yusei Magic", sans-serif;
  font-size: 22px;
  color: #ff5722;
  text-shadow: 0 0 6px #fff, 0 0 2px #fff, 2px 2px 0 #ffd166;
  white-space: nowrap;
  pointer-events: none;
  animation: feverBannerIn 1.3s ease-out forwards;
  z-index: 6;
}
@keyframes feverBannerIn {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.4) rotate(-6deg); }
  15%  { opacity: 1; transform: translate(-50%,-50%) scale(1.25) rotate(4deg); }
  30%  { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0deg); }
  85%  { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1) rotate(0deg); }
}

.hint-box .hint-text {
  font-size: 10px;
  color: #6b5768;
  line-height: 1.6;
  white-space: pre-line;
}

/* ---------- ステージクリア ---------- */
.clear-title {
  font-family: "Yusei Magic", sans-serif;
  font-size: 22px;
  margin: 6px 0;
  color: #ff5f96;
}
.stars-display {
  font-size: 26px;
  letter-spacing: 4px;
  margin: 2px 0 6px;
}
.stage-card-stars {
  font-size: 15px;
  letter-spacing: 2px;
  margin-bottom: 6px;
}

/* ---------- けっか発表ボタン ---------- */
.finish-btn {
  background: linear-gradient(135deg, #ffe08a, #ffc94d);
  color: #7a5200;
  border: none;
  border-bottom: 4px solid #e0a72a;
  padding: 8px 18px;
  font-size: 12.5px;
  font-weight: bold;
  font-family: inherit;
  border-radius: 20px;
  cursor: pointer;
  animation: finishPulse 1.1s ease-in-out infinite;
}
.finish-btn:active { transform: translateY(2px); border-bottom-width: 2px; }
@keyframes finishPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,201,77,0.6); }
  50% { box-shadow: 0 0 0 7px rgba(255,201,77,0); }
}

/* ---------- 一時停止 ---------- */
.pause-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Yusei Magic", sans-serif;
  font-size: 16px;
  color: #7a56a3;
  border-radius: 14px;
  z-index: 10;
}

/* ---------- シェアボタン(X / LINE / コピー) ---------- */
.share-row { gap: 6px; }
.share-btn {
  flex: 1;
  padding: 9px 4px;
  font-size: 11.5px;
  font-weight: bold;
  font-family: inherit;
  border-radius: 16px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid;
  border-bottom-width: 4px;
  display: inline-block;
}
.share-btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.share-x { background: #fff; color: #000; border-color: #000; border-bottom-color: #444; }
.share-line { background: #fff; color: #06c755; border-color: #06c755; border-bottom-color: #049944; }
.share-copy { background: #fff; color: #a06fc9; border-color: #d9bfff; border-bottom-color: #c6a3f7; }

/* ---------- プレイヤーレベル・XP ---------- */
.player-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(160deg, #fff, #f3ecff);
  border: 2px solid #d9bfff;
  border-radius: 16px;
  padding: 8px 10px;
  margin: 10px 0;
  text-align: left;
}
.player-level-badge {
  flex-shrink: 0;
  background: linear-gradient(135deg, #ff9ec2, #ff6f91);
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 5px 9px;
  border-radius: 12px;
}
.player-info { flex: 1; min-width: 0; }
.player-title { font-size: 11.5px; font-weight: bold; color: #7a56a3; margin-bottom: 3px; }
.xp-bar {
  height: 8px;
  background: #f0e6ff;
  border: 1px solid #d9bfff;
  border-radius: 6px;
  overflow: hidden;
}
.xp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffb347, #ff6f91);
  transition: width 0.3s ease-out;
}
.streak-badge {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: bold;
  color: #e08a00;
  white-space: nowrap;
}

/* ---------- 旅の記録モーダル ---------- */
.record-level-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.record-level-badge {
  background: linear-gradient(135deg, #ff9ec2, #ff6f91);
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 12px;
}
.record-title { font-size: 13px; font-weight: bold; color: #7a56a3; }
.record-xp-text { font-size: 10.5px; color: #9a86a0; font-weight: bold; margin: 4px 0 12px; text-align: right; }

.record-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.record-stat-cell {
  background: linear-gradient(160deg, #fff, #fff3f8);
  border: 2px solid #ffd3e4;
  border-radius: 12px;
  padding: 8px 10px;
  text-align: center;
}
.record-stat-cell .val { font-size: 16px; font-weight: bold; color: #ff5f96; display: block; }
.record-stat-cell .lbl { font-size: 9.5px; color: #8a7089; font-weight: bold; }

.mascot-picker-label { font-size: 12px; font-weight: bold; color: #7a56a3; margin-bottom: 8px; }
.mascot-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mascot-option {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid #d9bfff;
  background: linear-gradient(160deg, #fff, #f3ecff);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.mascot-option.selected { border-color: #ff5f96; box-shadow: 0 0 0 2px rgba(255,95,150,0.35); }
.mascot-option.locked { opacity: 0.45; filter: grayscale(0.9); cursor: default; }
.mascot-option .lock-lvl {
  position: absolute;
  bottom: -6px;
  font-size: 8px;
  background: #7a56a3;
  color: #fff;
  border-radius: 6px;
  padding: 1px 4px;
  font-weight: bold;
}

/* ---------- レベルアップ演出 ---------- */
.levelup-banner {
  margin: 10px 0;
  background: linear-gradient(160deg, #fff0d6, #ffe0a3);
  border: 2px dashed #ffb347;
  border-radius: 14px;
  padding: 10px;
  font-size: 13px;
  font-weight: bold;
  color: #a86a00;
}

/* ---------- デイリーログインボーナス ---------- */
.daily-bonus-card { text-align: center; }
.daily-bonus-mascot { font-size: 46px; animation: bob 1.6s ease-in-out infinite; }
.daily-bonus-title {
  font-family: "Yusei Magic", sans-serif;
  font-size: 18px;
  color: #ff5f96;
  margin: 6px 0 4px;
}
.daily-bonus-streak { font-size: 14px; font-weight: bold; color: #a06fc9; margin-bottom: 8px; }
.daily-bonus-desc { font-size: 12px; color: #6b5768; line-height: 1.6; margin-bottom: 14px; }

@media (max-width: 400px) {
  .game-layout { gap: 8px; }
  .side-panel { width: 84px; }
}