/* PLIP POP — 300Mind「2D Mobile Game UI Kit」(Unity Asset Store, 무료) 스킨.
 * 맨 뒤에 불러 겉면(배경·테두리·그림자)만 덮어쓴다. 배치·크기·동작은 건드리지 않는다.
 * 조각은 art/kit/ 에 webp 로 잘라 두었고, 늘어나는 상자는 border-image 9분할로 입힌다.
 * 어두운 면(파랑·남색) 위에서는 글자를 흰색+남색 외곽선으로 바꾼다. 노랑 위는 어두운 글자 그대로. */

:root {
  --kit-yellow: url("art/kit/btn-yellow.webp");
  --kit-navy: url("art/kit/btn-navy.webp");
  --kit-blue: url("art/kit/btn-blue.webp");
  --kit-purple: url("art/kit/btn-purple.webp");
  --kit-green: url("art/kit/btn-green.webp");
  --kit-red: url("art/kit/btn-red.webp");
  --kit-panel: url("art/kit/panel-blue.webp");
  --kit-panel-cyan: url("art/kit/panel-cyan.webp");
  --kit-bar: url("art/kit/bar-navy.webp");
  --kit-chip-yellow: url("art/kit/chip-yellow.webp");
  --kit-chip-green: url("art/kit/chip-green.webp");
  --kit-circle: url("art/kit/circle-blue.webp");
  --kit-ink-light: #ffffff;
  --kit-ink-dark: #24190a;
  --kit-stroke-dark: #10225c;
  --kit-stroke-light: #fff3c4;
}

/* ---------- 글자 팔레트 : 어두운 면 / 노란 면 ---------- */
.kit-dark,
.ov:not(#title-screen) > .card,
#hud,
#journey,
#soundask,
#character-picker button,
.ghost,
.pill,
.adbtn,
.go.ghost,
#daily-note,
#coin-shop-items button {
  --ink: var(--kit-ink-light);
  --dim: #d9e4ff;
  --teal-deep: #ffe066;
  --teal: #ffe066;
  --success: #a4ffb4;
  --danger: #ff9ab0;
  --on-brand: var(--kit-ink-light);
  --text-outline: var(--kit-stroke-dark);
  --text-outline-dark: var(--kit-stroke-dark);
  --line: #0b1a4d;
  --surface-alt: rgba(9, 22, 84, .42);
  color: var(--kit-ink-light);
  -webkit-text-stroke-color: var(--kit-stroke-dark);
}

.kit-yellow,
.go:not(.ghost):not(.adbtn),
#clear-screen #next,
#title-screen .row-go #play,
#soundask .soundask-primary,
#bd-save,
#stagenum,
#coin-shop-open,
#character-picker button.selected,
#slots .slot,
#boss-items .boss-item,
.dex-card.today,
.crank .cr.me,
.crank .cname button,
#promo-test button,
#growth-pips i.active,
.journey-stop b,
#fxbar .fx.item,
#event-screen .ev-kicker,
.dex-badge {
  --ink: var(--kit-ink-dark);
  --dim: #5a4310;
  --teal-deep: #7a2e00;
  --text-outline: var(--kit-stroke-light);
  color: var(--kit-ink-dark);
  -webkit-text-stroke-color: var(--kit-stroke-light);
}

/* ---------- 큰 단추 ---------- */
.go,
.ghost,
.adbtn,
#clear-screen #next,
#clear-screen #clear-ad,
#clear-screen .crow > .ghost,
#title-screen .row-go #play,
#title-screen .row-go #fresh,
#title-screen #morning-ad,
#title-screen .pill,
#soundask button,
#character-picker button,
#coin-shop-items button,
#daily-note,
#coin-shop-open,
#stagenum,
#slots .slot,
#boss-items .boss-item,
#clear-ad.adchip {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-image-repeat: stretch !important;
}

.go,
#clear-screen #next,
#title-screen .row-go #play,
#soundask .soundask-primary,
#coin-shop-open {
  border-image: var(--kit-yellow) 40 fill / 18px !important;
}

.ghost,
#clear-screen .crow > .ghost,
#title-screen .row-go #fresh,
#title-screen .pill,
#soundask button,
#coin-shop-items button {
  border-image: var(--kit-blue) 50 fill / 20px !important;
}

.adbtn,
.go.ghost,
#clear-screen #clear-ad,
#title-screen #morning-ad,
#daily-note,
#clear-ad.adchip {
  border-image: var(--kit-purple) 50 fill / 20px !important;
}

#character-picker button,
#coin-shop-items button:disabled {
  border-image: var(--kit-navy) 40 fill / 18px !important;
}
#character-picker button.selected { border-image: var(--kit-yellow) 40 fill / 18px !important; }

#stagenum { border-image: var(--kit-chip-yellow) 30 fill / 12px !important; }
#slots .slot,
#boss-items .boss-item { border-image: var(--kit-yellow) 40 fill / 14px !important; }
#boss-items .boss-item::before { display: none; }

/* 누름 : 그림자 대신 살짝 가라앉고 어두워진다 */
.go:active,
.ghost:active,
.adbtn:active,
#clear-screen #next:active,
#clear-screen #clear-ad:active,
#clear-screen .crow > .ghost:active,
#title-screen .row-go #play:active,
#title-screen .row-go #fresh:active,
#title-screen #morning-ad:active,
#title-screen .pill:active,
#soundask button:active,
#character-picker button:active,
#coin-shop-items button:not(:disabled):active,
#daily-note:active,
#coin-shop-open:active,
#slots .slot:active,
#boss-items .boss-item:not(:disabled):active {
  background: transparent !important;
  box-shadow: none !important;
  filter: brightness(.88);
  transform: translateY(2px);
}
#title-screen .pill:active { transform: translateY(2px) scale(.96); }

#character-picker button img {
  border-color: rgba(255, 255, 255, .85);
  background: #10225c;
  box-shadow: none;
}
#character-picker button.selected {
  box-shadow: none !important;
}

/* ---------- HUD 동그란 도구 단추 ---------- */
#pause-control,
#recenter,
#mute {
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--kit-circle) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: #fff !important;
  -webkit-text-stroke: .5px var(--kit-stroke-dark);
  font-weight: 900;
}
#mute {
  color: transparent !important;
  -webkit-text-stroke: 0;
  background:
    url("art/kit/music.webp") center / 46% no-repeat,
    var(--kit-circle) center / 100% 100% no-repeat !important;
}
#mute.off { filter: grayscale(1) brightness(.8); }
#pause-control:active,
#recenter:active,
#mute:active {
  background-color: transparent !important;
  box-shadow: none !important;
  filter: brightness(.88);
  transform: scale(.96);
}

/* ---------- 판(패널) ---------- */
.ov:not(#title-screen) > .card,
#journey,
#soundask,
#hud {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-image: var(--kit-panel) 70 fill / 26px stretch !important;
}
#journey { border-image-width: 22px !important; }
#hud { border-image: var(--kit-bar) 60 fill / 20px stretch !important; padding: 10px 12px 9px; }
#pause-screen > .card,
#event-screen > .card,
#coin-shop-screen > .card {
  border-image: var(--kit-panel-cyan) 90 fill / 30px stretch !important;
}

/* 판 안의 작은 상자 */
#help-screen .how,
.kinds,
.shop-box,
.crank,
.dex-card,
#form-goal,
#help-screen .help-demo,
#clear-discovery,
#next-preview,
#today,
#promo-info,
#coin-shop-note,
#gun-shop,
#growth-hud {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-image: var(--kit-bar) 60 fill / 16px stretch !important;
}
#coin-shop-note,
#growth-hud { border-image-width: 12px !important; padding: 5px 10px; }
.dex-card.today,
.crank .cr.me { border-image: var(--kit-chip-yellow) 30 fill / 12px stretch !important; }
.dex-card.dim canvas { filter: brightness(0) invert(1) opacity(.22); }
.crank .cname button,
#promo-test button,
#bd-save {
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-image: var(--kit-chip-yellow) 30 fill / 12px stretch !important;
}

/* 알림 조각(chip) */
#fxbar .fx,
#event-screen .ev-kicker,
.dex-badge,
.dex-new,
#boss-items .boss-item-count {
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-image: var(--kit-bar) 60 fill / 10px stretch !important;
  color: #fff;
  --ink: #fff;
  --text-outline: var(--kit-stroke-dark);
}
#fxbar .fx.item,
#event-screen .ev-kicker,
.dex-badge {
  border-image: var(--kit-chip-yellow) 30 fill / 10px stretch !important;
  color: var(--kit-ink-dark);
  --ink: var(--kit-ink-dark);
  --text-outline: var(--kit-stroke-light);
  -webkit-text-stroke-color: var(--kit-stroke-light);
}
#fxbar .fx.bad,
#event-screen .ev-kicker.warn,
.dex-new,
#boss-items .boss-item-count { border-image: var(--kit-red) 60 fill / 11px stretch !important; }
#fxbar .fx.shard { border-image: var(--kit-purple) 50 fill / 10px stretch !important; }
#fxbar .fx.ice { color: #c8f4ff; }

/* ---------- 작은 표식 ---------- */
#growth-pips i {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(9, 22, 84, .5);
  color: #d9e4ff;
}
#growth-pips i.active { background: #ffc72c; border-color: #fff; }
#growth-pips i.done { background: #2ecc71; border-color: #fff; color: #fff; }
.journey-track::before { background: rgba(255, 255, 255, .45); }
.journey-stop b { border-color: #fff; background: #ffc72c; }
.journey-stop.current b { background: #ff5a7a; color: #fff; --text-outline: var(--kit-stroke-dark); }
.journey-place-image { border-color: rgba(255, 255, 255, .85); }
#form-goal-pips i { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .25); }
.today-bar { background: rgba(255, 255, 255, .25); }
.today-bar i { background: #ffe066; }
#coin-shop-items .coin-item-icon { background: rgba(255, 255, 255, .18); }
#coin-shop-items button:disabled { color: #b7c4ea; }
#help-screen .how li::marker { color: #ffe066; }
#help-screen .help-dots i { background: rgba(255, 255, 255, .4); }
#help-screen .help-dots i.on { background: #ffe066; }

/* 코인·상점 그림을 키트 아이콘으로 */
.coin-symbol { content: url("art/kit/coin.webp"); }
#coin-shop-open .coin-shop-icon { content: url("art/kit/shop.webp"); width: 38px; height: 34px; object-fit: contain; }
.adtv { background-image: url("art/kit/ad.webp"); width: 24px; height: 21px; }
#pause-quit::before {
  display: inline-block;
  width: 20px;
  height: 18px;
  margin-right: 6px;
  background: url("art/kit/home.webp") center / contain no-repeat;
  vertical-align: -3px;
  content: "";
}

/* 순위표 */
.bd-list {
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  border-image: var(--kit-bar) 60 fill / 16px stretch !important;
}
.bd-row { border-color: rgba(255, 255, 255, .28); }
.bd-row.top,
.bd-more {
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-image: var(--kit-chip-yellow) 30 fill / 12px stretch !important;
  color: var(--kit-ink-dark);
  --ink: var(--kit-ink-dark);
  --dim: #5a4310;
  --teal-deep: #7a2e00;
  --text-outline: var(--kit-stroke-light);
  -webkit-text-stroke-color: var(--kit-stroke-light);
}
.bd-row.me {
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  border-image: var(--kit-purple) 50 fill / 12px stretch !important;
}

/* 판 안의 입력칸 */
#bd-name,
.ov:not(#title-screen) > .card input[type="text"] {
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .92);
  color: #24190a;
  --text-outline: transparent;
  -webkit-text-stroke: 0;
}

/* 성공 쪽지의 총 가게 */
#gun-shop button {
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-image: var(--kit-chip-yellow) 30 fill / 12px stretch !important;
  color: var(--kit-ink-dark);
  --ink: var(--kit-ink-dark);
  --text-outline: var(--kit-stroke-light);
  -webkit-text-stroke-color: var(--kit-stroke-light);
}
#gun-shop button.have {
  border-image: var(--kit-chip-green) 30 fill / 12px stretch !important;
  color: #fff;
  --ink: #fff;
  --text-outline: var(--kit-stroke-dark);
  -webkit-text-stroke-color: var(--kit-stroke-dark);
}
#gun-shop button:not(:disabled):active { filter: brightness(.88); transform: translateY(2px); }