/* ============ Framed game panels ============ */
.frame {
  position: relative;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  border: 3px solid var(--white);
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 3px var(--gold), inset 0 -5px 0 rgba(211, 139, 22, 0.16), var(--shadow-pop);
}
.inset {
  background: rgba(255, 255, 255, 0.72);
  border-radius: var(--r-md);
  box-shadow: inset 0 2px 0 rgba(211, 139, 22, 0.18), 0 0 0 2px rgba(241, 179, 58, 0.35);
}

/* Green ribbon title with folded ends */
.ribbon {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 180px; padding: 8px 26px 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; text-shadow: 0 2px 0 var(--green-ink);
  background: linear-gradient(180deg, var(--green-hi) 0%, var(--green) 55%, var(--green-deep) 100%);
  border: 3px solid #fff; border-radius: 12px;
  box-shadow: 0 3px 0 var(--green-ink), 0 6px 12px rgba(39, 107, 28, 0.25);
}
.ribbon::before, .ribbon::after {
  content: ''; position: absolute; top: 10px; width: 16px; height: calc(100% - 4px); z-index: -1;
  background: var(--green-deep); border-radius: 4px;
}
.ribbon::before { left: -12px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.ribbon::after { right: -12px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.ribbon-wrap { display: flex; justify-content: center; margin-top: -26px; margin-bottom: 6px; position: relative; z-index: 1; }

/* ============ Buttons ============ */
.btn {
  --b1: #fffdf6; --b2: #ffeec2; --bd: #e2b75c; --tx: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 18px;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; color: var(--tx);
  background: linear-gradient(180deg, var(--b1), var(--b2));
  border: 3px solid #fff; border-radius: var(--r-md);
  box-shadow: 0 0 0 2px var(--bd), 0 4px 0 2px var(--bd), 0 8px 14px rgba(58, 37, 80, 0.15);
  transition: transform 0.12s var(--ease-pop), box-shadow 0.12s;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.05) saturate(1.05); }
.btn:active:not([disabled]) { transform: var(--press); box-shadow: 0 0 0 2px var(--bd), 0 1px 0 2px var(--bd), 0 3px 6px rgba(58, 37, 80, 0.15); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-primary { --b1: var(--green-hi); --b2: var(--green-deep); --bd: var(--green-ink); --tx: #fff; text-shadow: 0 2px 0 rgba(39, 107, 28, 0.85); }
/* Button roles: primary = green, secondary = cream (.btn), danger = red. Purple is kept only for Boost. */
.btn-gold { /* legacy alias of secondary */ }
.btn-purple { --b1: #c39bff; --b2: #7b3fd6; --bd: #4e2499; --tx: #fff; text-shadow: 0 2px 0 rgba(60, 20, 120, 0.8); }
.btn-danger { --b1: #ff9a8c; --b2: var(--red-deep); --bd: #8f2a22; --tx: #fff; text-shadow: 0 2px 0 rgba(120, 30, 20, 0.8); }
.btn-ghost { --b1: rgba(255,255,255,.65); --b2: rgba(255,255,255,.45); --bd: rgba(211,139,22,.45); }
.btn-lg { min-height: 54px; font-size: 1.12rem; padding: 10px 24px; border-radius: var(--r-md); }
.btn-sm { min-height: 36px; padding: 4px 12px; font-size: 0.92rem; border-radius: var(--r-sm); }
.btn-icon { width: 44px; padding: 0; }
.btn-icon.btn-sm { width: 36px; }
.btn-round { border-radius: 50%; }
.btn-close {
  position: absolute; top: -14px; right: -14px; z-index: 3; width: 42px; height: 42px; min-height: 0; padding: 0; border-radius: 50%;
  --b1: #ff9a8c; --b2: var(--red-deep); --bd: #8f2a22; --tx: #fff;
}
.link-btn { background: none; border: 0; padding: 4px 2px; font-weight: 800; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--ink); }

/* ============ Chips, pills, badges ============ */
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px;
  font-weight: 800; font-size: 0.88rem; border-radius: 999px;
  background: #fff; border: 2px solid rgba(58, 37, 80, 0.12); color: var(--ink);
}
button.chip { cursor: pointer; }
button.chip:hover { border-color: rgba(58, 37, 80, 0.3); }
.chip[aria-pressed="true"], .chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip .dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); flex: none; }
.chip-x { margin-left: 2px; display: inline-flex; opacity: 0.7; }
.cat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 3px; border-radius: 999px; font-weight: 800; font-size: 0.82rem; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.cat-pill .em { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.28); display: grid; place-items: center; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; background: #fff; border: 2px solid rgba(58,37,80,.1); }
.badge-open { background: #fff7d6; }
.badge-active { background: #dff3ff; }
.badge-paused { background: #efe7ff; }
.badge-done { background: #dcf8d0; }
.badge-archived { background: #f1edf5; color: var(--ink-soft); }
.urg { font-size: 0.78rem; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; color: var(--ink-soft); }
.urg-today, .urg-soon { color: #b25c00; }
.urg-past { color: #7b5ea7; }

/* ============ Form controls ============ */
.field { display: grid; gap: 6px; }
.field > label, .label { font-weight: 800; font-size: 0.92rem; color: var(--ink); }
.hint { font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; }
.input, .select, .textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: var(--r-sm);
  border: 3px solid #fff; background: #fffdf7;
  box-shadow: 0 0 0 2px rgba(241, 179, 58, 0.55), inset 0 2px 3px rgba(58, 37, 80, 0.08);
  font-weight: 700;
}
.textarea { min-height: 80px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--green), inset 0 2px 3px rgba(58,37,80,.08); }
.input-big { font-size: 1.1rem; min-height: 54px; font-family: var(--font-display); font-weight: 600; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack { display: grid; gap: 12px; }

.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  min-height: 40px; padding: 6px 14px; border-radius: 12px; font-weight: 800;
  background: #fff; border: 2px solid rgba(58, 37, 80, 0.14); box-shadow: 0 3px 0 rgba(58,37,80,.1);
}
.seg button[aria-pressed="true"] { background: linear-gradient(180deg, var(--green-hi), var(--green-deep)); color: #fff; border-color: #fff; box-shadow: 0 0 0 2px var(--green-ink), 0 3px 0 2px var(--green-ink); text-shadow: 0 1px 0 var(--green-ink); }

.switch { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; cursor: pointer; }
.switch input { appearance: none; width: 52px; height: 30px; border-radius: 999px; background: #e0d6ea; position: relative; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(58,37,80,.15); transition: background .2s; cursor: pointer; }
.switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.2); transition: left .2s var(--ease-pop); }
.switch input:checked { background: var(--green); }
.switch input:checked::after { left: 24px; }

/* ============ Progress bars ============ */
.bar { position: relative; height: 22px; border-radius: 999px; background: #5b2a63; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(58,37,80,.25), inset 0 2px 4px rgba(0,0,0,.25); overflow: hidden; }
.bar > i {
  position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  background: repeating-linear-gradient(-45deg, #ffc93c 0 10px, #ffb021 10px 20px);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(180,90,0,.35);
  transition: width .6s var(--ease-pop);
}
.bar > span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 0 3px rgba(0,0,0,.4); }
.bar-sm { height: 12px; border-width: 2px; }
.bar-green > i { background: repeating-linear-gradient(-45deg, #8fe36b 0 8px, #6fd04e 8px 16px); }

/* ============ HUD ============ */
.hud { display: flex; align-items: center; gap: 14px; padding: 10px 16px; position: relative; z-index: 30; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: none; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; }
.logo-mark { width: 44px; height: 44px; }
.logo-text {
  font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; letter-spacing: 0.04em; color: #fff;
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink);
}
.hud { min-width: 0; }
.lv-ring { position: relative; flex: none; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 50% 35%, var(--green-hi), var(--green-deep)); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--green-ink), var(--shadow-soft); }
.lv-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lv-ring .lv-track { fill: none; stroke: rgba(30, 80, 20, .45); stroke-width: 4.5; }
.lv-ring .lv-fill { fill: none; stroke: #ffd34d; stroke-width: 4.5; stroke-linecap: round; transition: stroke-dasharray .6s var(--ease-pop); }
.lv-ring span { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; line-height: .9; color: #fff; font-family: var(--font-display); text-shadow: 0 1px 0 rgba(39,107,28,.9); }
.lv-ring small { font-size: .6rem; font-weight: 700; letter-spacing: .04em; }
.lv-ring b { font-size: 1.18rem; font-weight: 700; }
.lv-pill { flex: none; display: inline-flex; align-items: baseline; gap: 2px; height: 32px; padding: 0 10px; align-items: center; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: #fff; text-shadow: 0 1px 0 rgba(39,107,28,.8);
  background: linear-gradient(180deg, var(--green-hi), var(--green-deep)); border: 2.5px solid #fff; box-shadow: 0 0 0 2px var(--green-ink), var(--shadow-soft); }
.lv-pill small { font-size: .72rem; margin-right: 1px; opacity: .9; }
.hud-level .bar { flex: 1; height: 22px; min-width: 50px; }
.counter {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px 0 4px; border-radius: 999px;
  background: rgba(255,255,255,.85); border: 2px solid #fff; box-shadow: var(--shadow-soft);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; white-space: nowrap; line-height: 1;
}
.counter svg { width: 28px; height: 28px; flex: none; }
.btn-boost { gap: 5px; min-height: 40px; padding: 4px 14px; font-size: .95rem; }
.btn-boost .ic { color: #ffd6ec; }

.hud-actions { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.sync-dot { position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; background: #b8aac8; }
.sync-dot[data-state="ok"] { background: #4fbf6a; }
.sync-dot[data-state="busy"] { background: #ffb020; }
.sync-dot[data-state="error"] { background: var(--red); }
.btn-wrap { position: relative; }
.focus-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border-radius: 999px;
  background: linear-gradient(180deg, #c39bff, #7b3fd6); color: #fff; border: 3px solid #fff; font-family: var(--font-display); font-weight: 700;
  box-shadow: 0 0 0 2px #4e2499, var(--shadow-soft);
}
.focus-chip .pulse { width: 10px; height: 10px; border-radius: 50%; background: #9ff7c4; box-shadow: 0 0 0 0 rgba(159,247,196,.7); animation: pulse 1.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(159,247,196,0); } 100% { box-shadow: 0 0 0 0 rgba(159,247,196,0); } }

/* ============ Panel ============ */
.panel-card { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px; margin-top: 8px; }
.tabs { display: flex; gap: 6px; padding: 4px; border-radius: 16px; background: rgba(241,179,58,.22); }
.tabs button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; border-radius: 12px; border: 0; background: transparent;
  font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--ink-soft);
}
.tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 3px 0 rgba(211,139,22,.35); }
.panel-body { flex: 1; min-height: 0; overflow: auto; margin-top: 10px; padding: 2px 4px 16px; scrollbar-width: thin; overscroll-behavior: contain; }
.panel-tools { display: grid; gap: 8px; margin-top: 10px; }
.search { position: relative; }
.search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); }
.search .input { padding-left: 40px; min-height: 42px; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.active-filters .chip { min-height: 28px; font-size: .8rem; padding: 2px 10px; background: #fff6d8; }

.filter-pop { padding: 12px; display: grid; gap: 12px; }
.filter-pop .label { font-size: .84rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.vis-list { display: flex; flex-wrap: wrap; gap: 6px; }
.vis-list .chip { padding-left: 6px; }
.vis-list .chip.is-hidden { opacity: .55; text-decoration: line-through; }

.quest-card {
  display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: center; width: 100%; text-align: left;
  padding: 8px 10px 8px 6px; margin-bottom: 10px; border-radius: 18px; border: 3px solid #fff;
  background: linear-gradient(180deg, #fffdf6, #fff3d4);
  box-shadow: 0 0 0 2px rgba(241,179,58,.55), 0 4px 0 2px rgba(211,139,22,.35);
  transition: box-shadow .15s ease;
  position: relative;
}
.quest-card:hover { box-shadow: 0 0 0 2px rgba(241,179,58,.9), 0 4px 0 2px rgba(211,139,22,.45), 0 10px 18px rgba(58,37,80,.12); }
.quest-card.is-selected { box-shadow: 0 0 0 3px var(--green), 0 4px 0 3px var(--green-deep); }
.quest-card.is-done { background: linear-gradient(180deg, #f6fff0, #e3f8d6); }
.quest-thumb { width: 72px; height: 74px; }
.quest-card .qc-title { display: block; margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.2; }
.quest-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 5px; }
.quest-step { display: block; margin: 4px 0 0; font-size: .84rem; color: var(--ink-soft); font-weight: 700; }
.quest-card .bar { display: block; margin-top: 6px; }
.list-empty { text-align: center; padding: 20px 10px; color: var(--ink-soft); font-weight: 700; }
.list-empty svg { margin: 0 auto 6px; display: block; }
.list-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 8px; font-weight: 800; color: var(--ink-soft); font-size: .86rem; }

.idea { display: flex; gap: 8px; align-items: center; padding: 10px 12px; margin-bottom: 8px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 2px rgba(241,179,58,.4), 0 3px 0 rgba(211,139,22,.25); }
.idea p { margin: 0; flex: 1; font-weight: 700; }
.idea-dot { width: 26px; height: 26px; border-radius: 50%; background: #fff3c2; display: grid; place-items: center; color: var(--gold-deep); flex: none; }

.level-card { padding: 14px; display: grid; gap: 8px; text-align: center; }
.level-card h3 { margin: 0; font-family: var(--font-display); font-size: 1.3rem; }
.shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.slot { display: grid; justify-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 2px rgba(241,179,58,.4), inset 0 -4px 0 rgba(241,179,58,.18); text-align: center; position: relative; }
.slot.is-empty svg { filter: grayscale(1) brightness(1.6); opacity: .45; }
.slot b { font-family: var(--font-display); font-size: .9rem; }
.slot small { font-size: .72rem; font-weight: 800; color: var(--ink-soft); line-height: 1.1; }
.slot .count { position: absolute; top: 6px; right: 8px; font-family: var(--font-display); font-weight: 700; background: var(--orange); color: #fff; min-width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; border: 2px solid #fff; font-size: .82rem; }
.section-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin: 16px 2px 6px; display: flex; align-items: center; gap: 8px; }
.built-list { display: grid; gap: 6px; }
.built-list div { display: flex; justify-content: space-between; padding: 6px 10px; background: rgba(255,255,255,.7); border-radius: 10px; font-weight: 700; font-size: .88rem; }

/* ============ Bottom nav (phone/tablet) ============ */
.bottom-nav {
  position: relative; z-index: 40; align-items: center; justify-content: space-around; gap: 4px;
  padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, var(--cream), var(--cream-2));
  border-top: 3px solid #fff; box-shadow: 0 -3px 0 var(--gold), 0 -6px 18px rgba(30,90,140,.15);
}
.bottom-nav button { flex: 1; display: grid; justify-items: center; gap: 2px; background: none; border: 0; padding: 4px; min-height: 52px; font-weight: 800; font-size: .74rem; color: var(--ink-soft); border-radius: 12px; }
.bottom-nav button[aria-current="true"] { color: var(--ink); background: rgba(255,255,255,.75); }
.bottom-nav .nav-new { flex: none; width: 60px; height: 60px; min-height: 0; margin-top: -28px; border-radius: 50%; padding: 0; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, var(--green-hi), var(--green-deep)); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--green-ink), 0 4px 0 2px var(--green-ink), 0 8px 16px rgba(39,107,28,.3); }
.bottom-nav .nav-new .ic { filter: drop-shadow(0 1px 0 rgba(39,107,28,.8)); }

/* ============ Modals ============ */
.modal-root { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.backdrop { position: fixed; inset: 0; background: rgba(40, 70, 110, 0.42); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 34px 16px 16px; pointer-events: auto; animation: fade .2s; overflow-y: auto; }
.modal { width: min(560px, 100%); max-height: calc(100dvh - 60px); display: flex; flex-direction: column; padding: 14px 20px 18px; animation: pop .35s var(--ease-pop); margin: auto; }
.modal.wide { width: min(880px, 100%); }
.modal-body { overflow: auto; min-height: 0; padding: 4px 4px 6px; margin: 0 -4px; }
.modal-foot { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding-top: 12px; flex-wrap: wrap; }
.modal-lead { margin: 2px 0 12px; text-align: center; font-weight: 700; color: var(--ink-soft); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.85) translateY(20px); opacity: 0; } }

.mode-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; }
.mode-btn {
  display: grid; justify-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 16px; border: 3px solid #fff;
  background: linear-gradient(180deg, #fff, #fff1cc); box-shadow: 0 0 0 2px rgba(241,179,58,.55), 0 4px 0 2px rgba(211,139,22,.35);
  font-weight: 800; font-size: .82rem; line-height: 1.1; text-align: center; transition: transform .15s var(--ease-pop);
}
.mode-btn .mi { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.mode-btn[aria-pressed="true"] { background: linear-gradient(180deg, #f2ffe9, #c9f1b5); box-shadow: 0 0 0 3px var(--green), 0 4px 0 3px var(--green-deep); }
.suggest-box { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: #eaf8ff; box-shadow: 0 0 0 2px #bfe7fb; margin-bottom: 12px; }
.suggest-box p { margin: 0; flex: 1; font-weight: 700; font-size: .9rem; }
.more-toggle { display: inline-flex; align-items: center; gap: 6px; }

.island-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.island-card {
  position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 6px 12px; border-radius: 20px; border: 3px solid #fff;
  background: linear-gradient(180deg, var(--c-light), #fff); box-shadow: 0 0 0 2px var(--c), 0 5px 0 2px var(--c-dark);
  transition: transform .15s var(--ease-pop);
}
.island-card:hover, .island-card:focus-visible { box-shadow: 0 0 0 3px var(--c), 0 5px 0 3px var(--c-dark), 0 12px 22px rgba(58,37,80,.18); filter: saturate(1.08); }
.island-card svg { width: 100%; max-width: 140px; height: auto; }
.island-card b { font-family: var(--font-display); font-size: 1.02rem; }
.island-card small { font-weight: 800; color: var(--ink-soft); font-size: .78rem; }
.island-card .suggested { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--orange); color: #fff; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; border: 2px solid #fff; white-space: nowrap; }

/* Quest detail */
.detail { display: grid; grid-template-columns: 260px 1fr; gap: 18px; }
.detail-art { display: grid; gap: 10px; align-content: start; }
.detail-art .preview { border-radius: 20px; background: radial-gradient(circle at 50% 40%, #e8f9ff, #b8e8fb); box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #9fdcf5; }
.detail-art .preview svg { width: 100%; height: auto; display: block; }
.detail h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; line-height: 1.15; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: .9rem; }
.facts dt { font-weight: 800; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.facts dd { margin: 0; font-weight: 700; }
.reward-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.reward { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 4px; border-radius: 999px; background: #fff; font-weight: 800; font-family: var(--font-display); box-shadow: 0 0 0 2px rgba(241,179,58,.5); }
.reward svg { width: 26px; height: 26px; }
.timer { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 12px; }
.timer-ring { width: 104px; height: 104px; position: relative; }
.timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-ring .t { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; }
.timer-msg { margin: 0 0 8px; font-weight: 700; font-size: .9rem; color: var(--ink-soft); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.checklist li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 2px rgba(241,179,58,.35); }
.checklist label { flex: 1; display: flex; gap: 10px; align-items: center; font-weight: 700; cursor: pointer; }
.checklist input[type=checkbox] { appearance: none; width: 26px; height: 26px; border-radius: 8px; border: 3px solid #fff; background: #f3ecdf; box-shadow: 0 0 0 2px rgba(58,37,80,.2); display: grid; place-items: center; flex: none; cursor: pointer; }
.checklist input[type=checkbox]:checked { background: var(--green); box-shadow: 0 0 0 2px var(--green-ink); }
.checklist input[type=checkbox]:checked::after { content: ''; width: 8px; height: 13px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-1px, -2px); }
.checklist .done-text { text-decoration: line-through; color: var(--ink-faint); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gentle { font-size: .84rem; color: var(--ink-soft); font-weight: 700; margin: 4px 0 0; }

/* Settings / backup */
.cat-row { display: grid; gap: 10px; padding: 10px; border-radius: 16px; background: rgba(255,255,255,.75); margin-bottom: 8px; box-shadow: 0 0 0 2px rgba(241,179,58,.35); }
.cat-row .swatch { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(58,37,80,.15); }
.cat-row .swatch svg { display: block; }
.cat-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cat-top .grow { flex: 1; min-width: 0; }
.cat-top .input { width: 100%; min-width: 0; }
.cat-btns { display: flex; gap: 6px; flex: none; }
.cat-btns .btn-icon { display: grid; place-items: center; padding: 0; }
.cat-mid { display: flex; gap: 8px; align-items: center; min-width: 0; }
.cat-style { display: grid; gap: 4px; flex: 1; min-width: 0; }
.cat-style .select { width: 100%; }
.custom-col { display: inline-flex; align-items: center; gap: 4px; }
.cat-edit { display: grid; gap: 8px; }
.palette { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.palette button { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(58,37,80,.18); padding: 0; }
.palette button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink); }
.palette input[type=color] { width: 34px; height: 30px; border: 0; padding: 0; background: none; cursor: pointer; }
.box { padding: 14px; border-radius: 18px; background: rgba(255,255,255,.75); box-shadow: 0 0 0 2px rgba(241,179,58,.35); display: grid; gap: 10px; }
.box h3 { margin: 0; font-family: var(--font-display); font-size: 1.08rem; display: flex; align-items: center; gap: 8px; }
.status-line { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; font-size: .9rem; }
.status-line.err { color: #a2352b; }
.status-line.ok { color: #2a7a2a; }
.note-box { padding: 10px 12px; border-radius: 12px; background: #fff7d6; font-size: .86rem; font-weight: 700; box-shadow: 0 0 0 2px #f7d97a; }
.preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.preview-grid div { background: #fff; border-radius: 12px; padding: 8px; text-align: center; font-weight: 800; box-shadow: 0 0 0 2px rgba(241,179,58,.35); }
.preview-grid b { display: block; font-family: var(--font-display); font-size: 1.3rem; }
.restore-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.restore-choice label { display: grid; gap: 4px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 2px rgba(58,37,80,.12); cursor: pointer; font-weight: 700; font-size: .86rem; }
.restore-choice label:has(input:checked) { box-shadow: 0 0 0 3px var(--green); background: #f2ffe9; }
.restore-choice b { font-family: var(--font-display); font-size: 1rem; display: flex; gap: 8px; align-items: center; }
.snap-list { display: grid; gap: 6px; }
.snap-list div { display: flex; align-items: center; gap: 8px; justify-content: space-between; background: #fff; border-radius: 10px; padding: 6px 10px; font-weight: 700; font-size: .86rem; }

/* Toasts */
.toast-root { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 80; display: grid; gap: 8px; width: min(520px, calc(100vw - 24px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 10px; animation: pop .35s var(--ease-pop); }
.toast p { margin: 0; flex: 1; font-weight: 800; font-size: .92rem; }
.toast .t-ic { width: 38px; height: 38px; flex: none; }
@media (max-width: 900px) { .toast-root { bottom: 96px; } }

/* Popover (map island menu) */
.popover { position: absolute; z-index: 25; padding: 10px; display: grid; gap: 6px; min-width: 200px; animation: pop .25s var(--ease-pop); }
.popover h4 { margin: 0 0 2px; font-family: var(--font-display); font-size: 1.05rem; text-align: center; }

/* ============ Responsive component tweaks ============ */
@media (max-width: 1100px) {
  .logo-text { font-size: 1.4rem; }
  .hud-actions .btn-new { display: none; }
}
@media (max-width: 900px) {
  .hud { gap: 8px; padding: 8px 10px; }
  .logo-text { display: none; }
  .lv-ring { width: 44px; height: 44px; }
  .hud-wallet { display: none; }
  .hud-actions { gap: 8px; }
  /* the bottom menu already picks Quests / Treasures / Wallet, so the sheet shows a title instead of tabs */
  .panel .tabs { display: none; }
  .panel .sheet-head { display: flex; }
  .hud-actions .focus-chip span.lbl { display: none; }
  .mode-grid { grid-template-columns: repeat(3, 1fr); }
  .detail { grid-template-columns: 1fr; }
  .detail-art { grid-template-columns: 150px 1fr; align-items: center; }
  .island-grid { grid-template-columns: repeat(2, 1fr); }
  .panel-card { margin-top: 0; }
}
@media (max-width: 480px) {
  .btn-boost { padding: 4px 11px; font-size: .88rem; min-height: 38px; }
  .hud .btn-icon { width: 40px; min-height: 40px; }
  .hud .logo-mark { width: 40px; height: 40px; }
  .modal { padding: 12px 14px 14px; }
  .ribbon { min-width: 0; font-size: 1rem; padding: 6px 18px 8px; }
  .mode-grid { gap: 6px; }
  .mode-btn { font-size: .74rem; padding: 8px 2px 6px; }
  .mode-btn .mi { width: 34px; height: 34px; }
  .detail-art { grid-template-columns: 1fr; }
  .restore-choice { grid-template-columns: 1fr; }
  .modal-foot .btn { flex: 1; }
}

.label .ic, .field > label .ic { display: inline-block; vertical-align: -3px; }
@media (max-width: 900px) { .detail-art .preview svg { max-height: 220px; } }
@media (max-width: 480px) { .detail-art .preview svg { max-height: 190px; } .timer { grid-template-columns: 1fr; justify-items: center; text-align: center; } .timer .row, .timer .seg { justify-content: center; } }

/* ============ Wallet ============ */
.tabs button { font-size: .9rem; gap: 4px; padding: 0 4px; }
.counter-btn { border: 2px solid #fff; cursor: pointer; color: inherit; }
.counter-btn:hover { background: #fff; }
.wallet-card { padding: 14px; display: grid; gap: 10px; }
.wallet-top { display: flex; align-items: center; gap: 10px; }
.label-sm { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.wallet-balance { font-family: var(--font-display); font-size: 2rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.wallet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wallet-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wallet-stats > span { background: rgba(255,255,255,.75); border-radius: 12px; padding: 6px 8px; font-size: .74rem; font-weight: 700; color: var(--ink-soft); line-height: 1.2; }
.wallet-stats b { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.rate-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rate { display: grid; padding: 6px 10px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 2px rgba(241,179,58,.35); line-height: 1.15; }
.rate small { font-size: .72rem; font-weight: 800; color: var(--ink-soft); }
.rate b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.month-bars, .cat-bars { display: grid; gap: 6px; }
.month-bars div, .cat-bars div { display: grid; grid-template-columns: 92px 1fr auto; gap: 8px; align-items: center; font-size: .84rem; font-weight: 700; }
.month-bars i, .cat-bars i { display: block; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--c, #b49cff) var(--w), rgba(58,37,80,.08) var(--w)); }
.month-bars b, .cat-bars b { font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
.cat-bars { margin-top: 8px; }
.goals { display: grid; gap: 8px; }
.goal { padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 2px rgba(241,179,58,.4); }
.goal.is-bought { opacity: .7; }
.goal .bar { margin-top: 6px; }
.goal-price { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.history, .goals { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
.tx { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.8); }
.tx .grow { min-width: 0; }
.tx b { display: block; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx small { font-size: .74rem; font-weight: 700; color: var(--ink-soft); }
.tx-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #fff6d8; }
.tx-spend .tx-ic { background: #ffe6d4; color: #b25c00; }
.tx-add .tx-ic { background: #e3f6dc; color: #2a7a2a; }
.tx-amt { font-family: var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-spend .tx-amt { color: #b25c00; }
.tx-earn .tx-amt, .tx-add .tx-amt { color: #2a7a2a; }
.warn-text { color: #a2352b !important; }
.ic.inline { display: inline-block; vertical-align: -2px; }
.avatar-edit { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: start; }
.avatar-preview { width: 120px; height: 150px; border-radius: 18px; background: radial-gradient(circle at 50% 80%, #c9f0b0, #e9f8ff 70%); box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px rgba(241,179,58,.4); }
@media (max-width: 480px) { .avatar-edit { grid-template-columns: 1fr; } .avatar-preview { margin: 0 auto; } }

/* ============ Sheet header (phones), island chips, money ============ */
.sheet-head { display: none; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 0 6px; }
.sheet-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.island-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.island-chips .chip { padding: 3px 10px 3px 4px; min-height: 34px; font-size: .84rem; gap: 6px; }
.island-chips .chip .em { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.island-chips .chip .ic { opacity: .55; }
.island-chips .chip.is-hidden { opacity: .55; background: rgba(255,255,255,.55); }
.island-chips .chip.is-hidden .em { filter: grayscale(1); }
.island-chips .chip.is-hidden span { text-decoration: line-through; }
.money { white-space: nowrap; font-variant-numeric: tabular-nums; }
.money .cur { font-family: system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif; font-weight: 800; font-size: .92em; margin-right: .06em; display: inline-block; line-height: 1; vertical-align: baseline; }
@media (max-width: 560px) {
  .cat-row .swatch { width: 40px; height: 40px; }
  .cat-btns { gap: 4px; }
  .palette button { width: 30px; height: 30px; }
}
.npc-row { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 6px; }
.npc-row figure { margin: 0; display: grid; justify-items: center; gap: 2px; flex: none; }
.npc-row figcaption { font: 800 .68rem/1 var(--font-body); color: #fff; padding: 3px 7px; border-radius: 999px; border: 1.5px solid #fff; }
.lines-list { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; counter-reset: ln; }
.lines-list li { display: flex; gap: 6px; align-items: center; }
.lines-list li::before { counter-increment: ln; content: counter(ln); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--purple); color: #fff; font: 800 .72rem/1 var(--font-body); }
.lines-list .input { min-height: 40px; padding: 6px 12px; font-weight: 700; }

/* ============ Quests menu: start a quest + what's on the go ============ */
.qhome { display: grid; gap: 10px; }
.new-quest-box { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; border-radius: 18px; cursor: pointer;
  border: 2.5px dashed rgba(58,37,80,.28); background: rgba(255,255,255,.7); color: var(--ink); transition: background .15s ease, border-color .15s ease; }
.new-quest-box:hover { background: #fff; border-color: var(--green); }
.new-quest-box b { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.new-quest-box small { display: block; font-weight: 700; font-size: .82rem; color: var(--ink-soft); margin-top: 1px; }
.nq-plus { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, var(--green-hi), var(--green-deep)); box-shadow: 0 0 0 2.5px #fff, 0 0 0 4px var(--green-ink); }
.all-quests-btn { width: 100%; justify-content: flex-start; gap: 8px; min-height: 46px; }
.all-quests-btn > span:first-of-type { flex: 1; text-align: left; }
.qb-n { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: rgba(58,37,80,.1); color: var(--ink-soft);
  font: 800 .76rem/1 var(--font-body); }
.qh-title { margin: 8px 2px 0; justify-content: flex-start; }
.qh-title .qb-n { margin-left: 2px; }
.qh-hidden { margin: 0; font-size: .84rem; }
.qh-more { justify-self: center; margin-top: -4px; }
.quest-card { margin-bottom: 0; }
.qhome .quest-card + .quest-card, .qb-list .quest-card + .quest-card { margin-top: 0; }
.qb-list { display: grid; gap: 10px; padding: 4px 2px 10px; }

/* ============ All quests panel ============ */
.modal.modal-full { width: min(860px, 100%); height: calc(100dvh - 60px); max-height: calc(100dvh - 60px); }
.qb-body { padding-top: 0; }
.qb-tools { position: sticky; top: 0; z-index: 2; display: grid; gap: 8px; padding: 6px 4px 8px; margin: 0 -4px;
  background: var(--cream); }
.qb-body.is-scrolled .qb-tools { box-shadow: 0 8px 10px -8px rgba(58,37,80,.25); }
.qb-row { display: flex; gap: 6px; flex-wrap: wrap; }
.qb-status { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.qb-status::-webkit-scrollbar { display: none; }
.qb-status .chip { flex: none; }
.qb-more { display: grid; gap: 8px; padding: 2px 0 8px; }
.qb-tab { gap: 6px; min-height: 34px; }
.qb-tab[aria-pressed="true"] { background: var(--ink); color: #fff; }
.qb-tab[aria-pressed="true"] .qb-n { background: rgba(255,255,255,.22); color: #fff; }
.qb-selects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qb-select { display: grid; gap: 2px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.qb-select .select { min-height: 40px; font-size: .9rem; text-transform: none; letter-spacing: 0; }
.qb-map summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .86rem; color: var(--ink-soft); padding: 4px 2px; }
.qb-map[open] summary { margin-bottom: 6px; }
@media (max-width: 560px) {
  .modal.modal-full { height: calc(100dvh - 44px); max-height: calc(100dvh - 44px); }
  .qb-selects { gap: 6px; }
  .qb-select .select { min-height: 38px; font-size: .82rem; padding-left: 8px; padding-right: 22px; }
  .qb-tab { min-height: 32px; padding: 2px 10px; font-size: .82rem; }
}
.npc-row figure.is-custom figcaption { box-shadow: 0 0 0 1.5px var(--gold); }
.npc-edit, .npc-add { display: grid; place-items: center; width: 50px; height: 60px; padding: 0; border-radius: 14px; border: 2px dashed transparent; background: transparent; cursor: pointer; }
.npc-edit:hover { border-color: var(--gold); background: rgba(255,255,255,.6); }
.npc-add { border-color: rgba(58,37,80,.3); background: rgba(255,255,255,.6); color: var(--green-deep); }
.npc-add:hover { border-color: var(--green); background: #fff; }
.npc-tag { font: 800 .8rem/1 var(--font-body); color: #fff; padding: 4px 10px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 1px 0 rgba(58,37,80,.3); }

/* ============ Top bar: every control shares one height ============ */
:root { --hud-ctl: 48px; }
.hud .logo-mark { width: var(--hud-ctl); height: var(--hud-ctl); display: block; }
.hud .lv-ring { width: calc(var(--hud-ctl) - 10px); height: calc(var(--hud-ctl) - 10px); margin: 5px; }
.hud .btn-icon, .hud .btn-boost, .hud .btn-new { height: calc(var(--hud-ctl) - 4px); min-height: 0; margin-bottom: 4px; }
.hud .btn-icon { width: calc(var(--hud-ctl) - 4px); }
.hud .counter { height: calc(var(--hud-ctl) - 10px); }
.hud .focus-chip { height: calc(var(--hud-ctl) - 6px); }
@media (max-width: 480px) {
  :root { --hud-ctl: 44px; }
  .hud { gap: 7px; }
}


/* ============ Polish pass: one card look, one press feel ============ */
.quest-card, .slot, .goal, .cat-row, .box, .rate, .island-card, .mode-btn { border-radius: var(--r-md); }
.quest-card { background: var(--card-bg); box-shadow: var(--card-shadow); border: 3px solid #fff; }
.quest-card:hover { box-shadow: var(--card-shadow), 0 10px 18px rgba(58,37,80,.12); }
.slot, .goal, .cat-row, .box { box-shadow: var(--card-ring); }
.quest-card.is-done { background: linear-gradient(180deg, #f6fff0, #e3f8d6); }
/* long quest names: two lines on cards, the full name lives in the quest view */
.quest-card .qc-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.detail h2 { overflow-wrap: anywhere; }

/* Every tappable thing squashes a little when pressed (phones have no hover). */
button, .chip, .quest-card, .seg button, .island-card, .mode-btn, .bottom-nav button, .new-quest-box, .lv-ring, .logo {
  -webkit-tap-highlight-color: transparent; transition: transform .14s var(--ease-pop), box-shadow .14s, background .15s;
}
:is(.chip, .quest-card, .seg button, .island-card, .mode-btn, .bottom-nav button, .new-quest-box, .lv-ring, .logo, .npc-edit, .npc-add, .more-btn, .palette button):active:not([disabled]) { transform: scale(.95); }
.bottom-nav .nav-new:active { transform: scale(.92) translateY(2px); }
@media (prefers-reduced-motion: reduce) { :root:not(.motion-on) :is(button, .chip, .quest-card):active { transform: none !important; } }

/* Menus get a dimmer, warmer light after sunset. */
.frame, .bottom-nav, .hud .btn, .hud .counter, .hud .lv-ring { transition: filter 2.4s ease; }
:root[data-phase="evening"] :is(.frame, .bottom-nav, .hud .btn:not(.btn-boost), .hud .counter) { filter: brightness(.97) sepia(.1); }
:root[data-phase="night"] :is(.frame, .bottom-nav, .hud .btn:not(.btn-boost), .hud .counter) { filter: brightness(.86) sepia(.22) saturate(1.05); }
:root[data-phase="night"] .hud .btn-boost, :root[data-phase="night"] .hud .lv-ring { filter: brightness(.9); }
:root[data-phase="night"] .backdrop { background: rgba(10, 14, 40, .5); }

/* ============ New quest popup ============ */
.seg-fill { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg-fill button { display: grid; gap: 1px; justify-items: center; padding: 6px 4px; line-height: 1.1; }
.seg-fill button small { font-size: .72rem; font-weight: 700; opacity: .8; }
.pick-islands { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-island { padding: 3px 12px 3px 4px; min-height: 36px; }
.pick-island .em { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.pick-island[aria-checked="true"] { background: var(--c); border-color: #fff; color: #fff; box-shadow: 0 0 0 2px var(--c), 0 3px 0 2px rgba(58,37,80,.25); text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.pick-island[aria-checked="true"] .em { background: rgba(255,255,255,.28) !important; }
.more-btn { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 4px; border: 0; background: none; font-weight: 800; color: var(--ink); text-align: left; border-top: 2px dashed rgba(58,37,80,.15); }
.more-btn .hint { margin-left: auto; }
.more-box { display: grid; gap: 12px; }
.idea-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.idea-mode { padding: 3px 12px 3px 4px; min-height: 36px; }
.idea-mode .mi { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.idea-mode[aria-pressed="true"] { background: var(--ink); color: #fff; }
@media (max-width: 480px) { .more-btn .hint { display: none; } }
.postcard-btn { width: 100%; margin-bottom: 12px; }
.postcard-img { display: block; width: 100%; height: auto; border-radius: var(--r-md); box-shadow: var(--card-ring); }
.wallet-reset { display: grid; gap: 6px; justify-items: start; margin-top: 18px; padding-top: 14px; border-top: 2px dashed rgba(58,37,80,.15); }
.sync-code { display: grid; gap: 6px; padding: 12px; border-radius: var(--r-md); background: #fff; box-shadow: var(--card-ring); }
.sync-code .code-text { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 1.15rem; letter-spacing: .06em; overflow-wrap: anywhere; }