/* Ads + daily-bonus UI.
 * Reward buttons deliberately DON'T look like the cream/orange "spend your coins" buttons — a player
 * must never tap an ad by mistake thinking it was a normal action. They get their own violet "video"
 * identity with a ▶ badge, used consistently everywhere an ad is offered. */

/* ---------------- browser placeholder banner (dev only; native uses a real overlay view) --------- */
#ad-banner{ position:fixed; left:0; right:0; bottom:0; height:var(--ad-h); z-index:5;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(#2a2320,#1a1512); color:#b9a892; font-size:11px; font-weight:800;
  border-top:1px solid rgba(255,255,255,.08); letter-spacing:.04em; }
#ad-banner.hidden{ display:none; }
.adb-tag{ background:#f4b83e; color:#4a3210; border-radius:4px; padding:1px 5px; font-size:9px; font-weight:900; }

/* ---------------- rewarded-video button ---------------------------------------------------------- */
.btn-ad{ font:inherit; font-weight:900; font-size:15px; color:#fff; cursor:pointer; border:none;
  padding:12px 18px; border-radius:16px; position:relative; display:inline-flex; align-items:center;
  justify-content:center; gap:8px; width:100%;
  /* muted むらさきいも violet rather than the Material blue-violet it started as — unmistakably
   * "not a normal button", but it belongs to the same wagashi palette as .cannon-btn / .dd-locknote.
   * 6px lip matches .btn-primary, which it is stacked directly under in two modals. */
  background:linear-gradient(#9a80e8,#6f52cc); box-shadow:0 6px 0 #4d36ad, 0 8px 14px rgba(70,45,180,.30);
  transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out); }
.btn-ad:active{ transform:translateY(5px); box-shadow:0 1px 0 #4d36ad; }
/* Mandatory disclosure chip: added automatically by adBtn() to any offer whose own label doesn't
 * already say こうこく, so a placement can never ship without telling the player it opens an ad. */
.ad-chip{ display:inline-block; background:rgba(255,255,255,.26); border-radius:5px; padding:1px 6px;
  font-size:10px; font-weight:900; margin-right:6px; vertical-align:1px; letter-spacing:.02em; }
.btn-ad.off .ad-chip{ display:none; }
/* Modals that open on their own swallow taps for 500ms so an in-flight tap can't launch a video. */
.arming button{ pointer-events:none; }
.btn-ad .ad-play{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.22);
  display:inline-flex; align-items:center; justify-content:center; font-size:10px; }
.btn-ad .ad-play::before{ content:"▶"; margin-left:2px; }
.btn-ad sub{ display:block; font-size:10px; font-weight:800; opacity:.85; letter-spacing:.02em; }
/* `.gold` was literally orange — the same colour as .btn-primary, which it sits directly beside on
 * the result screen (「ごほうびを 2ばいに！」 next to 「つぎへ ▶」). That is exactly the accidental-tap
 * risk the violet identity above exists to prevent. Emphasis now comes from a brighter violet, not
 * from borrowing the confirm-button colour. */
.btn-ad.gold{ background:linear-gradient(#a98cf0,#7d5fd0); box-shadow:0 6px 0 #55399e, 0 8px 14px rgba(70,45,180,.32); }
.btn-ad.gold .ad-play{ background:rgba(255,255,255,.32); }
.btn-ad.off,.btn-ad:disabled{ background:linear-gradient(#c9bcae,#a99b8c); box-shadow:0 4px 0 #8b7d6e; color:#f2eee8; pointer-events:none; }
/* gentle attention pulse — only on the single highest-value offer on screen */
@keyframes adpulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); } }
.btn-ad.pulse{ animation:adpulse 1.9s var(--ease-out) infinite; }
@media (prefers-reduced-motion: reduce){ .btn-ad.pulse{ animation:none; } }
.ad-note{ font-size:10px; font-weight:800; color:var(--c-ink-mute); text-align:center; margin-top:6px; line-height:1.6; }

/* ---------------- browser ad simulator ----------------------------------------------------------- */
.ad-sim{ position:fixed; inset:0; z-index:120; background:rgba(8,6,14,.88); display:flex; align-items:center; justify-content:center; }
.ad-sim-box{ width:min(88%,340px); background:linear-gradient(#1e1a2e,#141020); border:3px solid #6a4fe0; border-radius:20px;
  overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.6); color:#e8e2ff; }
.ad-sim-head{ display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:rgba(255,255,255,.06); }
.ad-sim-tag{ background:#f4b83e; color:#4a3210; border-radius:5px; padding:2px 7px; font-size:10px; font-weight:900; }
.ad-sim-timer{ font-size:14px; font-weight:900; color:#b9a8ff; }
.ad-sim-body{ padding:26px 16px; text-align:center; font-size:13px; font-weight:800; line-height:1.8; }
.ad-sim-emoji{ font-size:46px; margin-bottom:10px; }
.ad-sim-body small{ opacity:.5; font-size:10px; }
.ad-sim-btns{ display:flex; gap:8px; padding:12px; }
.ad-sim-btns button{ flex:1; font:inherit; font-weight:900; font-size:12px; padding:11px 6px; border:none; border-radius:12px; cursor:pointer; }
.ad-sim-skip{ background:#3a3350; color:#b6aecd; }
.ad-sim-ok{ background:linear-gradient(#8f7bff,#6a4fe0); color:#fff; }
.ad-sim-ok:disabled{ background:#3a3350; color:#6e6688; }

/* ---------------- continue-after-defeat overlay --------------------------------------------------- */
#continue-modal{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; background:rgba(24,10,10,.7); }
#continue-modal.hidden{ display:none; }
.co-card{ width:min(86%,330px); background:linear-gradient(#fff9ee,#ffe3c8); border:4px solid #fff; border-radius:24px;
  padding:20px 18px 16px; text-align:center; box-shadow:var(--shadow-modal); }
.co-title{ font-size:20px; font-weight:900; color:#d2432f; margin-bottom:4px; }
.co-sub{ font-size:12px; font-weight:800; color:var(--c-ink-soft); line-height:1.7; margin-bottom:12px; }
.co-perks{ display:flex; gap:6px; justify-content:center; margin-bottom:14px; flex-wrap:wrap; }
.co-perk{ background:#fff; border:2px solid #ffd9a8; border-radius:12px; padding:6px 9px; font-size:11px; font-weight:900; color:#a05a1c; }
.co-ring{ width:54px; height:54px; margin:0 auto 8px; border-radius:50%; border:4px solid #ffd0a0; border-top-color:#f0932b;
  display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:900; color:#d2432f; }
.co-give{ margin-top:10px; background:none; border:none; font:inherit; font-size:12px; font-weight:800; color:var(--c-ink-mute); text-decoration:underline; cursor:pointer; }

/* ---------------- bonus hub (login / missions / chest / free gacha) -------------------------------- */
#screen-bonus{ padding:calc(58px + var(--safe-t)) 12px calc(76px + var(--safe-b)); }
/* Five labels still fit at the 320px supported minimum once the Banner no longer narrows #app. */
#bottomnav .nav-lbl{ font-size:11px; letter-spacing:0; }
/* Code-native gift icon avoids platform-dependent emoji rendering. */
.nav-btn .nav-ico.bonus-ico{ position:relative; width:27px; height:22px; margin-top:5px; border-radius:3px;
  background:linear-gradient(#ff9dcc,#e75c9f); box-shadow:inset 0 0 0 2px rgba(255,255,255,.65),0 2px 0 #b74078; }
.nav-btn .nav-ico.bonus-ico::before{ content:""; position:absolute; left:11px; top:0; bottom:0; width:5px; background:#ffe08a; }
.nav-btn .nav-ico.bonus-ico::after{ content:""; position:absolute; left:-2px; right:-2px; top:-5px; height:8px;
  border-radius:4px; background:linear-gradient(#ffb1d6,#ef6eaa); box-shadow:inset 0 0 0 2px rgba(255,255,255,.65); }

/* transient notice — ad failures must never need dismissing */
#toast{ position:fixed; left:50%; bottom:calc(96px + var(--ad-pad)); transform:translate(-50%,14px); z-index:130;
  max-width:min(84vw,320px); background:rgba(38,24,18,.94); color:#ffeccb; font-size:12px; font-weight:800;
  line-height:1.6; text-align:center; padding:10px 16px; border-radius:14px; box-shadow:0 8px 22px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease-out), transform .25s var(--ease-out); }
#toast.on{ opacity:1; transform:translate(-50%,0); }

/* Daily-2x announcement on the world map. Absolute, not sticky: buildMap() auto-scrolls to the
 * player's next stage the moment the screen opens, so anything in normal flow scrolls straight out
 * of view and is never read. Floating it over the map guarantees it is seen before stage selection. */
/* pointer-events:none — it floats over the map and, being opaque and full-width, was swallowing taps
 * on any stage pin that scrolled under it (~13% of the map, for the whole session until the first win). */
#map-daily{ position:absolute; top:calc(54px + var(--safe-t)); left:10px; right:10px; z-index:30; pointer-events:none;
  display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:14px;
  background:linear-gradient(#fff2c9,#ffd98a); border:2px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.2);
  font-size:12px; font-weight:800; color:#8a5a12; line-height:1.5; }
#map-daily.hidden{ display:none; }
#map-daily .md-ico{ font-size:20px; line-height:1; }
#map-daily .md-ico .i-coin{ width:22px; height:22px; margin:0; vertical-align:-3px; }
#map-daily small{ font-size:10px; opacity:.8; font-weight:800; }
.bn-block{ background:linear-gradient(#fffaf0,#ffeed6); border:3px solid #fff; border-radius:20px; padding:12px;
  margin-bottom:12px; box-shadow:var(--shadow-card); }
.bn-h{ display:flex; align-items:center; gap:5px; font-size:14px; font-weight:900; color:var(--c-orange-ink); margin-bottom:8px; }
.bn-h .bn-ico{ font-size:18px; }
.bn-h .bn-cnt{ margin-left:auto; font-size:10px; font-weight:800; color:var(--c-ink-mute); white-space:nowrap; }
.bn-desc{ font-size:11px; font-weight:800; color:var(--c-ink-soft); line-height:1.7; margin-bottom:9px; }

/* login streak */
.lb-row{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:10px; }
.lb-day{ background:#fff; border:2px solid #ffe0b8; border-radius:11px; padding:5px 2px; text-align:center; position:relative; }
.lb-day.got{ background:linear-gradient(#e8ffe0,#c9f3bd); border-color:#9adf88; }
.lb-day.today{ border-color:#f0932b; box-shadow:0 0 0 3px rgba(240,147,43,.22); }
.lb-day .lb-n{ font-size:9px; font-weight:900; color:var(--c-ink-mute); display:block; white-space:nowrap; letter-spacing:-.04em; }
.lb-day .lb-r{ font-size:14px; display:block; line-height:20px; }
.lb-day .lb-r .i-coin,.lb-day .lb-r .i-medal,.lb-day .lb-r .i-shard,.lb-day .lb-r .i-crown{ width:18px; height:18px; margin:0; vertical-align:-4px; }
/* 10px floor on reading content — 9px mission progress is too small on a handheld screen */
.lb-day .lb-n{ font-size:10px; }
.lb-day.got::after{ content:"✓"; position:absolute; top:-5px; right:-3px; background:#57c93a; color:#fff; font-size:9px;
  width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }

/* missions */
.ms-row{ display:flex; align-items:center; gap:9px; background:#fff; border:2px solid #ffe4c2; border-radius:14px; padding:8px 10px; margin-bottom:7px; }
.ms-row.done{ background:linear-gradient(#f2fff0,#dcf7d2); border-color:#a8e096; }
.ms-mid{ flex:1; min-width:0; }
.ms-name{ font-size:12px; font-weight:900; color:var(--c-ink); }
.ms-bar{ height:7px; background:#f0e2cf; border-radius:99px; overflow:hidden; margin-top:4px; }
.ms-fill{ height:100%; background:linear-gradient(90deg,#ffc93c,#f0932b); border-radius:99px; transition:width .4s var(--ease-out); }
.ms-prog{ font-size:10px; font-weight:800; color:var(--c-ink-mute); margin-top:3px; }
.ms-rew{ font-size:11px; font-weight:900; color:#a05a1c; white-space:nowrap; }
.ms-claim{ font:inherit; font-size:11px; font-weight:900; border:none; border-radius:11px; padding:8px 11px; cursor:pointer;
  background:linear-gradient(#ffd76a,#f0932b); color:#6b3a05; box-shadow:0 3px 0 #c26f14; }
.ms-claim:active{ transform:translateY(2px); box-shadow:0 1px 0 #c26f14; }
.ms-claim.off{ background:#e6dbcc; color:#a99b8c; box-shadow:0 3px 0 #cfc2b0; pointer-events:none; }
.ms-allbar{ font-size:11px; font-weight:900; color:var(--c-orange-ink); text-align:center; margin-top:8px; }

/* chest / free gacha rows */
.bn-cta{ display:flex; flex-direction:column; gap:6px; }
.bn-pips{ display:flex; gap:4px; justify-content:center; margin-bottom:8px; }
.bn-pip{ width:22px; height:7px; border-radius:99px; background:#efe0cc; }
.bn-pip.used{ background:linear-gradient(90deg,#8f7bff,#6a4fe0); }
.bn-done{ text-align:center; font-size:12px; font-weight:900; color:#4a9c37; padding:8px; }

/* nav badge for claimable things — the reason players come back tomorrow */
.nav-badge{ position:absolute; top:2px; right:calc(50% - 22px); min-width:16px; height:16px; padding:0 4px;
  background:#ff4757; color:#fff; font-size:10px; font-weight:900; border-radius:99px; border:2px solid #fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 4px rgba(0,0,0,.25); }
#bottomnav .nav-btn{ position:relative; }

/* offline earnings ("もぐもぐ貯金") */
.off-card{ text-align:center; }
.off-amt{ font-size:26px; font-weight:900; color:#c47a10; margin:6px 0 2px; }
.off-time{ font-size:11px; font-weight:800; color:var(--c-ink-mute); margin-bottom:12px; }
.off-jar{ font-size:44px; margin-bottom:2px; }

/* result-screen 2x reward */
.res-ad-wrap{ margin-top:10px; }
.rew-2xgot{ display:inline-block; background:linear-gradient(#8f7bff,#6a4fe0); color:#fff; font-size:11px; font-weight:900;
  border-radius:8px; padding:2px 8px; margin-left:6px; }

/* The disclosure chip adds ~59px of inline width, which re-broke the wrap this chip was
 * specifically compacted to avoid. Stacking it costs one short line instead of four. */
.fb-boost .btn-ad .ad-chip{ display:block; margin:0 0 2px; }
/* pre-battle boost chip on the formation screen */
.fb-boost{ display:flex; align-items:center; gap:8px; background:linear-gradient(#efeaff,#ded4ff); border:2px solid #b9a8ff;
  border-radius:14px; padding:8px 10px; margin:0 0 8px; }
.fb-boost .fbb-txt{ flex:1; font-size:11px; font-weight:800; color:#4d36ad; line-height:1.5; }
.fb-boost .btn-ad{ width:auto; padding:8px 12px; font-size:12px; }
.fb-boost.on{ background:linear-gradient(#e6ffe0,#c9f3bd); border-color:#8fd47a; }
.fb-boost.on .fbb-txt{ color:#357a22; }