* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', 'Malgun Gothic', sans-serif;
}

html, body {
    width: 100%;
    height: 100%;
    background: #1a1f2b;
    color: #ecf0f1;
    overflow: hidden;
}

.hidden {
    display: none !important;
}

.screen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Lobby */
#lobby-screen {
    background: radial-gradient(circle at 50% 30%, #2f6b3c, #14301d 75%);
    overflow: hidden;
}

.lobby-trees {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lobby-trees .tree {
    position: absolute;
    filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.45));
}

/* Lobby centrepiece: the currently selected cookie. Drawn with the same hard
   50/50 colour split its icon and in-game body use (see charIconBackground). */
.lobby-char {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    pointer-events: none;
}

.lobby-char-body {
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(241, 196, 15, 0.22), transparent 65%);
}

.lobby-char-name {
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}

.play-btn {
    position: absolute;
    right: 30px;
    bottom: 30px;
    padding: 16px 36px;
    font-size: 22px;
    font-weight: bold;
    background: linear-gradient(180deg, #e67e22, #d35400);
    color: white;
    border: 2px solid #f39c12;
    border-radius: 10px;
    cursor: pointer;
}

#lobby-screen .play-btn { position: absolute; }

.play-btn:hover {
    filter: brightness(1.1);
}

#boss-select-screen .play-btn,
#result-screen .play-btn,
#boss-detail-screen .play-btn,
#character-detail-screen .play-btn,
#story-mode-screen .play-btn,
#story-tower-screen .play-btn {
    position: static;
    width: 100%;
    margin-top: auto;
}

/* Event: the lobby's 이벤트 칸, above 캐릭터 */
.event-btn {
    position: relative;
    background: linear-gradient(180deg, #8e44ad, #6c3483);
    border-color: #a569bd;
}

.event-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

/* Header row: the event's own title, and how many tickets you're holding. */
.event-header {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 6px;
}

.event-ticket-count {
    font-size: 15px;
    color: #f1c40f;
}

/* Left rail: one big 물 / 불 tab each, with how far that side has got. */
.shop-cat-btn.ev-cat {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.ev-cat-icon { font-size: 26px; }
.ev-cat-body { display: flex; flex-direction: column; }
.ev-cat-label { font-size: 16px; font-weight: bold; }
.ev-cat-count { font-size: 12px; color: #bdc3c7; }
.shop-cat-btn.ev-cat.selected .ev-cat-count { color: #2c3e50; }

/* The bar across the top of the list: overall completion + its reward. */
.ev-total {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(180deg, #2c3e6b, #223055);
    border: 2px solid #f1c40f;
    margin-bottom: 14px;
}

.ev-total-badge { font-size: 30px; }
.ev-total-main { flex: 1; text-align: left; }
.ev-total-title { font-size: 16px; font-weight: bold; margin-bottom: 6px; }

/* The shop centers its content as a single flex item, which squeezes the stage
   grid into a column and spills it out of the panel. The event list wants the
   opposite: fill the panel from the top-left and scroll if it runs long. */
#event-content {
    display: block;
    align-items: stretch;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
}

/* Stage cards, side by side; each one reads top to bottom. */
.ev-mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    align-items: stretch;
}

.ev-mission {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 14px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
    border: 2px solid #34495e;
}

/* A cleared stage stays fully readable -- it can still be replayed -- so it
   gets a green edge rather than the dimming a spent mission used to get. */
.ev-mission.claimed { opacity: 0.55; }
.ev-stage.claimed { opacity: 1; border-color: #27ae60; }
.ev-stage.locked { opacity: 0.5; }
.ev-stage-done { color: #2ecc71; font-weight: bold; }

/* The boss card at the end of a side's row. */
.ev-boss { border-color: #a569bd; }
.ev-boss-badge { border-color: #f1c40f; }
.ev-boss .ev-badge-step { font-size: 9px; letter-spacing: 1px; color: #f1c40f; }
.ev-boss-note { color: #f1c40f; font-weight: bold; }

.ev-mission-badge {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 3px solid #5dade2;
    background: #1b2437;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ev-badge-icon { font-size: 24px; line-height: 1; }
.ev-badge-step { font-size: 11px; color: #bdc3c7; }

.ev-mission-name { font-size: 16px; font-weight: bold; text-align: center; }
/* Pushes the bar/reward/claim block to the bottom so cards of different text
   lengths still line their buttons up. */
.ev-mission-text {
    flex: 1;
    font-size: 12px;
    color: #bdc3c7;
    text-align: center;
    line-height: 1.4;
}

.ev-mission-bar {
    position: relative;
    width: 100%;
    height: 16px;
    border-radius: 8px;
    background: #1b2437;
    overflow: hidden;
}

.ev-mission-bar.big { height: 18px; }

.ev-mission-fill {
    height: 100%;
    background: linear-gradient(90deg, #3498db, #e74c3c);
}

.ev-mission-count {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.ev-reward-chip {
    width: 62px;
    padding: 6px 0;
    border-radius: 8px;
    background: #6c3483;
    border: 2px solid #a569bd;
    text-align: center;
    flex-shrink: 0;
}

.ev-reward-icon { display: block; font-size: 18px; line-height: 1; }
.ev-reward-amount { font-size: 12px; font-weight: bold; }

.ev-claim-btn {
    width: 86px;
    padding: 12px 0;
    border-radius: 8px;
    border: 2px solid #f39c12;
    background: linear-gradient(180deg, #e67e22, #d35400);
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}

.ev-claim-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

.ev-claimed {
    width: 86px;
    font-size: 12px;
    color: #7f8c8d;
    text-align: center;
    flex-shrink: 0;
}

/* Inside a card the chip and button span the card instead of sitting in columns. */
.ev-mission .ev-reward-chip,
.ev-mission .ev-claim-btn,
.ev-mission .ev-claimed {
    width: 100%;
}

.ev-mission .ev-reward-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 0;
}

.ev-mission .ev-reward-icon { font-size: 20px; }
.ev-mission .ev-reward-amount { font-size: 14px; }
.ev-mission .ev-claim-btn { padding: 10px 0; }
.ev-mission .ev-claimed { padding: 10px 0; }

/* 레전더리 뽑기: featured cookie on the right, banner list on the left. Same
   top-aligned override the event list needs -- .shop-content centers otherwise. */
#legendary-content {
    display: block;
    align-items: stretch;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
}

.shop-cat-btn.lg-soon { opacity: 0.6; }

.lg-soon-note {
    color: #bdc3c7;
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
    padding: 40px 0;
}

.lg-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border-radius: 10px;
    background: linear-gradient(180deg, #3a2c5e, #241d3d);
    border: 2px solid #a569bd;
    margin-bottom: 14px;
}

.lg-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid #f1c40f;
    flex-shrink: 0;
}

.lg-head-main { flex: 1; }
.lg-name { font-size: 19px; font-weight: bold; }
.lg-owned { font-size: 12px; color: #2ecc71; }
.lg-tickets { font-size: 13px; color: #f1c40f; margin: 4px 0 7px; }

/* Results on the left, pull buttons pinned in a column on the right. */
.lg-body {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.lg-main { flex: 1; min-width: 0; }

.lg-side {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lg-side .play-btn,
.lg-side .secondary-btn {
    position: static;
    width: 100%;
    margin: 0;
    padding: 12px 8px;
    line-height: 1.35;
}

.lg-side small { font-size: 11px; opacity: 0.85; }

.lg-odds { margin-bottom: 12px; }
.lg-featured-odds { border-color: #f1c40f; }

/* The pull results get their own scroll box: a 10-pull stays inside it instead
   of growing the page and pushing the buttons out of reach. */
.lg-result {
    max-height: 40vh;
    overflow-y: auto;
    padding-right: 4px;
}

/* Shop */
.shop-layout {
    display: flex;
    width: 94vw;
    max-width: 1400px;
    height: 74vh;
    gap: 20px;
    margin: 16px 0 24px;
}

.shop-categories {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shop-cat-btn {
    position: relative;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: bold;
    background: #2c3e50;
    color: white;
    border: 2px solid #34495e;
    border-radius: 8px;
    cursor: pointer;
}

.shop-cat-btn:hover {
    border-color: #f1c40f;
}

.shop-cat-btn.selected {
    border-color: #f1c40f;
    background: #34495e;
}

.shop-content {
    flex: 1;
    background: #22293a;
    border: 2px solid #34495e;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-empty {
    color: #7f8c8d;
    font-size: 15px;
}

.shop-content.shop-content-list {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    overflow-y: auto;
}

.shop-item-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #22303f;
    border: 1px solid #34495e;
}

.shop-item-icon { font-size: 22px; }

.shop-item-name {
    flex: 1 1 auto;
    color: #ecf0f1;
    font-weight: bold;
    font-size: 15px;
}

.shop-item-owned {
    color: #9fb1c1;
    font-size: 12px;
}

.shop-item-buy-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #f1c40f;
    background: #34495e;
    color: #f1c40f;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}

.shop-item-buy-btn:hover { background: #3d5975; }

.shop-content.shop-content-gt {
    align-items: flex-start;
    justify-content: flex-start;
}

/* GT 탭은 상품 수가 적어서 다른 탭과 같은 고정 74vh 박스를 쓰면 아래로 빈
   공간이 크게 남는다 -- 내용물 높이만큼만 박스가 차지하도록 오버라이드. */
.shop-layout.shop-layout-gt {
    height: auto;
    max-height: 74vh;
    align-items: flex-start;
}

.gt-layout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.gt-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gt-vendor-rail {
    flex-shrink: 0;
    width: 96px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px;
}

.gt-vendor-btn {
    padding: 14px 6px;
    border-radius: 10px;
    border: 1px solid #34495e;
    background: #22303f;
    color: #ecf0f1;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
}

.gt-vendor-btn:hover { background: #2c3e50; }

.gt-vendor-btn.selected {
    border-color: #f1c40f;
    color: #f1c40f;
    background: #34495e;
}

.gt-char-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px;
}

.shop-item-msg {
    width: 100%;
    text-align: center;
    color: #e74c3c;
    font-size: 13px;
    margin-top: 4px;
}

.shop-item-msg.good { color: #2ecc71; }

/* 현질 (계좌이체 구매 신청) */
.iap-bank-info {
    background: #1c2735;
    border: 1px solid #34495e;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 4px;
}

.iap-bank-title {
    color: #f1c40f;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 4px;
}

.iap-bank-line {
    color: #ecf0f1;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.iap-bank-hint {
    color: #9fb1c1;
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.5;
}

.iap-depositor-input {
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #34495e;
    background: #16202c;
    color: #ecf0f1;
    font-size: 14px;
}

.iap-item-desc {
    color: #9fb1c1;
    font-size: 11px;
    font-weight: normal;
    margin-top: 3px;
    line-height: 1.4;
}

.iap-history {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #34495e;
}

.iap-history-title {
    color: #9fb1c1;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 8px;
}

.iap-history-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #1c2735;
    font-size: 12px;
    margin-bottom: 6px;
}

.iap-history-name { color: #ecf0f1; font-weight: bold; }
.iap-history-price { color: #9fb1c1; }
.iap-history-status { font-weight: bold; }
.iap-history-result { color: #9fb1c1; flex-basis: 100%; }

.iap-status-pending .iap-history-status { color: #f1c40f; }
.iap-status-approved .iap-history-status { color: #2ecc71; }
.iap-status-rejected .iap-history-status { color: #e74c3c; }

/* Gacha */
.gacha-banner-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 520px;
    max-width: 92vw;
    margin: 24px 0;
}

.gacha-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: #22293a;
    border: 2px solid #34495e;
    border-radius: 12px;
    color: white;
    text-align: left;
    cursor: pointer;
}

.gacha-banner:hover:not(.locked) {
    filter: brightness(1.2);
    border-color: #f1c40f;
}

.gacha-banner.locked {
    opacity: 0.45;
    cursor: default;
}

.gacha-banner-icon {
    font-size: 32px;
    width: 40px;
    text-align: center;
}

.gacha-banner-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gacha-banner-name {
    font-size: 18px;
    font-weight: bold;
}

.gacha-banner-desc {
    font-size: 13px;
    color: #95a5a6;
}

/* Three columns: soul stones on the left, the (widest) pull area in the middle,
   pull buttons stacked vertically on the right. The odds strip sits above,
   centred, outside this row. */
.gacha-pull-layout {
    display: flex;
    align-items: stretch;
    gap: 16px;
    width: 96vw;
    max-width: 1360px;
    margin: 14px 0;
}

.gacha-result {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-content: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    min-height: 340px;
    padding: 16px;
    background: #1a1f2b;
    border: 2px solid #34495e;
    border-radius: 12px;
}

.gacha-result-empty {
    color: #7f8c8d;
    font-size: 15px;
}

.gacha-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 120px;
    padding: 12px 8px;
    background: #22293a;
    border: 2px solid #34495e;
    border-radius: 10px;
}

.gacha-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid #ecf0f1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.gacha-card-icon.soul-icon {
    border-style: dashed;
}

.gacha-card-name {
    font-size: 12px;
    text-align: center;
    line-height: 1.3;
}

.gacha-card-sub {
    font-size: 11px;
    color: #f1c40f;
    font-weight: bold;
}

.gacha-card.empty-grade {
    opacity: 0.6;
}

.gacha-pull-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    width: 150px;
    flex-shrink: 0;
}

/* .play-btn is absolutely positioned for the lobby's floating play button, so
   without this both pull buttons would stack at the same corner and only the
   last one would be visible. */
#gacha-pull-screen .play-btn {
    position: static;
    width: 100%; /* fills the vertical button column so both match */
}

.gacha-soul-section {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.gacha-soul-header {
    font-size: 15px;
    font-weight: bold;
    color: #bdc3c7;
    margin-bottom: 8px;
}

.gacha-soul-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 2px;
}

.gacha-soul-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #22293a;
    border: 1px solid #34495e;
    border-radius: 8px;
}

.gacha-soul-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #ecf0f1;
    flex-shrink: 0;
}

.gacha-soul-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.gacha-soul-name {
    font-size: 13px;
}

.gacha-soul-bar-bg {
    height: 6px;
    background: #11151d;
    border-radius: 3px;
    overflow: hidden;
}

.gacha-soul-bar {
    height: 100%;
    background: linear-gradient(90deg, #3498db, #9b59b6);
}

.gacha-soul-count {
    font-size: 12px;
    font-weight: bold;
    color: #f1c40f;
    width: 60px;
    text-align: right;
}

.gacha-claim-btn {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: bold;
    background: #27ae60;
    color: white;
    border: 2px solid #2ecc71;
    border-radius: 6px;
    cursor: pointer;
}

.gacha-claim-btn:disabled {
    background: #34495e;
    border-color: #7f8c8d;
    color: #7f8c8d;
    cursor: default;
}

.gacha-odds-section {
    width: 96vw;
    max-width: 1360px;
    margin-top: 4px;
}

.gacha-odds-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    justify-content: center;
}

.gacha-odds-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #22293a;
    border: 1px solid #34495e;
    border-radius: 14px;
    font-size: 12px;
}

.gacha-odds-row.dim {
    opacity: 0.5;
}

.gacha-odds-pct {
    font-weight: bold;
    color: #f1c40f;
}

/* Mode select */
.mode-list {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin: 30px 0;
}

/* 왼쪽: 성장 던전 / 각성모드를 세로로 쌓아둔 별도 칸. */
.mode-list-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mode-list-right {
    display: flex;
    gap: 30px;
}

.mode-card.mode-card-small {
    width: 220px;
    height: 122px;
}

.mode-card.mode-card-small .icon {
    font-size: 34px;
    margin-bottom: 8px;
}

.mode-card.mode-card-small .name {
    font-size: 17px;
}

.mode-card {
    width: 220px;
    height: 260px;
    background: #2c3e50;
    border: 3px solid #34495e;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.15s;
}

.mode-card:hover:not(.locked) {
    border-color: #f1c40f;
    transform: translateY(-4px);
}

.mode-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.mode-card .icon {
    font-size: 56px;
    margin-bottom: 14px;
}

.mode-card .name {
    font-size: 20px;
    font-weight: bold;
}

.mode-card .sub {
    font-size: 13px;
    color: #95a5a6;
    margin-top: 6px;
}

/* Boss detail */
.detail-layout {
    display: flex;
    width: 94vw;
    max-width: 1400px;
    height: 74vh;
    gap: 20px;
    margin-bottom: 24px;
}

.detail-left {
    flex: 3;
    background: #22293a;
    border: 2px solid #34495e;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    gap: 16px;
    overflow-y: auto;
}

.detail-right {
    flex: 2;
    background: #22293a;
    border: 2px solid #34495e;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    gap: 14px;
    overflow-y: auto;
}

.char-preview-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.char-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.char-preview.clickable {
    cursor: pointer;
    padding: 8px;
    border-radius: 10px;
    transition: 0.15s;
}

.char-preview.clickable:hover {
    background: rgba(255, 255, 255, 0.06);
}

.char-preview.clickable:hover .char-icon-circle {
    box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.6);
}

.char-icon-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #ecf0f1;
    background: #3498db;
}

/* These two are <canvas> now (draw the cookie's body AND held weapon --
   see drawCharIconCanvas in main.js), not a CSS circle swatch, so they must
   NOT get the shared .char-icon-circle border-radius clip or border: a
   weapon can stick out past the "body" circle on purpose and a hard round
   clip would cut it off (this is literally the bug it used to have). */
#lobby-char-body,
#char-detail-icon {
    border-radius: 0;
    border: none;
}

/* .cd-portrait (the parent) already has its own radial glow behind this, so
   this one just needs to get out of the way instead of showing the shared
   .char-icon-circle flat blue swatch fallback. */
#char-detail-icon {
    background: transparent;
}

.char-name {
    font-size: 18px;
    font-weight: bold;
}

/* Story mode: multi (locked) / solo entry */
.story-mode-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 260px;
    margin: 30px 0;
}

/* Story tower: floor select */
.tower-layout {
    display: flex;
    width: 94vw;
    max-width: 1400px;
    height: 74vh;
    gap: 20px;
    margin-bottom: 24px;
}

.tower-left {
    flex: 1;
    background: #22293a;
    border: 2px solid #34495e;
    border-radius: 12px;
}

.tower-middle {
    flex: 5;
    background: #22293a;
    border: 2px solid #34495e;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
}

.tower-floor-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 260px;
}

.floor-card {
    padding: 22px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    background: #2c3e50;
    border: 3px solid #34495e;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.15s;
}

.floor-card:hover:not(.locked) {
    border-color: #f1c40f;
    transform: translateY(-2px);
}

.floor-card.selected {
    border-color: #f1c40f;
    box-shadow: 0 0 16px rgba(241, 196, 15, 0.5);
}

.floor-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.tower-right {
    flex: 3;
    background: #22293a;
    border: 2px solid #34495e;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    gap: 16px;
    overflow-y: auto;
}

.char-icon-circle.small {
    width: 60px;
    height: 60px;
}

.back-corner-btn {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 5;
    padding: 10px 22px;
    font-size: 15px;
    background: #34495e;
    color: white;
    border: 2px solid #7f8c8d;
    border-radius: 8px;
    cursor: pointer;
}

.back-corner-btn:hover {
    filter: brightness(1.15);
}

.char-icon-circle.large {
    width: 160px;
    height: 160px;
}

.char-equip-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.equip-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #bdc3c7;
    padding: 8px 12px;
    background: #1a1f2b;
    border: 1px solid #34495e;
    border-radius: 6px;
}

.equip-icon {
    font-size: 18px;
    width: 22px;
    text-align: center;
}

.equip-label {
    color: #95a5a6;
    flex: 1;
}

.equip-value {
    color: #ecf0f1;
}

.char-desc-box {
    width: 100%;
    flex: 1;
    min-height: 60px;
    background: #1a1f2b;
    border: 1px solid #34495e;
    border-radius: 6px;
    /* 바다펄맛 밀물처럼 단계별로 줄을 나눠 적는 설명이 있다. */
    white-space: pre-line;
}

/* Character detail: Cookie-Run-Kingdom-style layout */
.cd-panel {
    width: 94vw;
    max-width: 1200px;
    height: 82vh;
    max-height: 820px;
    background: #22293a;
    border: 2px solid #34495e;
    border-radius: 16px;
    padding: 28px 34px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: auto;
}

.cd-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cd-header-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0; /* long cookie names must shrink, not squeeze out the stats */
}

.cd-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0; /* power + atk/hp stay fully visible on narrow screens */
}

.cd-mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 2px;
}

.cd-mini-label {
    color: #95a5a6;
    font-weight: normal;
}

.cd-mini-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: bold;
    color: #ecf0f1;
}

.cd-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.grade-badge {
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    color: white;
    background: #7f8c8d;
}

.grade-badge.common {
    background: #7f8c8d;
}

.grade-badge.rare {
    background: #3498db;
}

.grade-badge.epic {
    background: linear-gradient(90deg, #9b59b6, #e91e8c);
}

.grade-badge.legendary {
    background: linear-gradient(90deg, #e67e22, #e74c3c);
}

.grade-badge.ancient {
    background: linear-gradient(90deg, #f39c12, #f1c40f, #f39c12);
    color: #3e2200;
}

.grade-badge.beast {
    background: linear-gradient(90deg, #4a1c40, #8e2de2, #4a1c40);
}

.grade-badge.guest {
    background: linear-gradient(90deg, #16a085, #1abc9c, #16a085);
}

.cd-name {
    font-size: 28px;
    font-weight: bold;
}

.cd-tags {
    display: flex;
    gap: 8px;
}

.cd-tag {
    padding: 3px 12px;
    background: #1a1f2b;
    border: 1px solid #34495e;
    border-radius: 14px;
    font-size: 13px;
    color: #bdc3c7;
}

.cd-power {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: bold;
    color: #f1c40f;
}

.cd-power-icon {
    font-size: 20px;
}

.cd-body {
    display: flex;
    gap: 24px;
    flex: 1;
    min-height: 0;
}

.cd-portrait {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(52, 152, 219, 0.25), transparent 70%);
    border-radius: 12px;
}

.char-icon-circle.huge {
    width: 300px;
    height: 300px;
}

.cd-equip-col {
    flex: 1.5;
    justify-content: center;
}

.stat-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #1a1f2b;
    border: 1px solid #34495e;
    border-radius: 6px;
    font-size: 14px;
}

.stat-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.stat-label {
    color: #95a5a6;
    flex: 1;
}

.stat-value {
    color: #ecf0f1;
    font-weight: bold;
}

.cd-skill-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cd-skill-header {
    font-size: 16px;
    font-weight: bold;
    color: #bdc3c7;
}

.cd-skill-icons {
    display: flex;
    gap: 10px;
}

/* 본능해제: 스킬 아이콘 줄에 패시브 바로 옆 5번째 아이콘으로 얹는다.
   나머지 스킬/궁극기 탭과 같은 선택 방식(.skill-icon-box.selected)을 그대로 쓴다. */
.instinct-icon-badge {
    position: absolute;
    left: 50%;
    bottom: -9px;
    transform: translateX(-50%);
    padding: 0 5px;
    border-radius: 8px;
    background: #2c3e50;
    border: 1px solid #34495e;
    color: #f1c40f;
    font-size: 10px;
    line-height: 14px;
    white-space: nowrap;
}

/* 본능해제 탭 안에서 좌우 화살표로 1~5강 설명을 훑어보는 줄. 실제 보유 레벨과
   상관없이 어떤 강화가 뭘 주는지 미리/다시 볼 수 있다. */
.cd-instinct-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 6px;
}

.cd-instinct-arrow {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #1a1f2b;
    border: 1px solid #34495e;
    color: #ecf0f1;
    font-size: 14px;
    cursor: pointer;
    transition: 0.15s;
}

.cd-instinct-arrow:hover:not(:disabled) {
    border-color: #7f8c8d;
}

.cd-instinct-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.cd-instinct-nav-label {
    min-width: 44px;
    text-align: center;
    font-weight: bold;
    color: #f1c40f;
}

.cd-instinct-nav-label.locked {
    color: #7f8c8d;
}

.cd-instinct-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
}

.cd-instinct-cost {
    font-size: 13px;
    color: #95a5a6;
}

.skill-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #1a1f2b;
    border: 2px solid #34495e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: 0.15s;
    position: relative;
}

/* A small second glyph pinned to the corner of a skill icon (e.g. a fire
   badge on a shield) -- em-sized so it scales with whatever icon box it's
   dropped into (detail panel, mobile buttons, aim-thumb joystick). */
.skill-icon-badge {
    position: absolute;
    right: -0.15em;
    bottom: -0.15em;
    width: 0.65em;
    height: 0.65em;
    font-size: 0.6em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1f2b;
    border: 1px solid #34495e;
    border-radius: 50%;
}

.skill-icon-box:hover {
    border-color: #7f8c8d;
}

.skill-icon-box.selected {
    border-color: #f1c40f;
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.6);
}

/* Passive slot for a cookie that has none -- still clickable, just muted. */
.skill-icon-box.empty {
    opacity: 0.4;
}

/* Hamburger menu (top-right of lobby) */
.menu-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 15;
    width: 44px;
    height: 44px;
    font-size: 20px;
    background: rgba(20, 24, 32, 0.55);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    cursor: pointer;
}

.menu-btn:hover {
    background: rgba(20, 24, 32, 0.8);
}

.side-menu {
    position: absolute;
    top: 74px;
    right: 24px;
    z-index: 15;
    width: 220px;
    background: #22293a;
    border: 2px solid #34495e;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.menu-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu-item-btn {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: bold;
    background: #34495e;
    color: white;
    border: 2px solid #7f8c8d;
    border-radius: 8px;
    cursor: pointer;
}

.menu-item-btn:hover {
    filter: brightness(1.15);
}

.menu-nickname {
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    padding: 4px 0 2px;
}

.menu-toggle-status {
    float: right;
    color: #e74c3c;
    font-weight: bold;
}

.menu-toggle-status.on {
    color: #2ecc71;
}

/* Mobile touch controls (joystick + action buttons), overlaid on the
   fight/story-fight canvases. Hidden unless the player enables them from
   the hamburger menu (see menu-mobile-controls-btn). */
.mobile-controls {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

.mc-joystick-zone {
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: 130px;
    height: 130px;
    pointer-events: auto;
    touch-action: none;
}

.mc-joystick-base {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.mc-joystick-thumb {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.8);
    transform: translate(-50%, -50%);
}

.mc-actions {
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 180px;
    height: 180px;
    pointer-events: none;
}

.mc-btn {
    position: absolute;
    border-radius: 50%;
    background: rgba(20, 24, 32, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    touch-action: none;
    cursor: pointer;
}

.mc-skill {
    top: 6px;
    left: 0;
    width: 58px;
    height: 58px;
    font-size: 24px;
}

/* The attack button auto-aims at the nearest target, so it stays a plain (and
   large, easy to hit) button. */
.mc-attack {
    right: 8px;
    bottom: 0;
    width: 84px;
    height: 84px;
    font-size: 30px;
}

/* The ultimate control is a joystick: drag it to choose where a targeted
   ultimate lands, release to cast. */
.mc-aim-zone {
    position: absolute;
    top: 0;
    right: 0;
    width: 76px;
    height: 76px;
    pointer-events: auto;
    touch-action: none;
    cursor: pointer;
}

.mc-aim-zone.recharging {
    opacity: 0.45;
}

.mc-aim-base {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(20, 24, 32, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.mc-aim-zone.aiming .mc-aim-base {
    border-color: #f1c40f;
    background: rgba(241, 196, 15, 0.18);
}

.mc-aim-thumb {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(236, 240, 241, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.85);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.mc-cd {
    position: absolute;
    bottom: -4px;
    font-size: 11px;
    font-weight: bold;
    color: #f1c40f;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.mc-btn.recharging {
    opacity: 0.45;
}

/* The joystick and action cluster occupy the bottom corners, where the HP bars
   normally sit -- so with the joystick on, the HP bars move to the top
   corners, below the back/settings buttons. This depends on the joystick
   itself (body.mc-touch), not on 화면 크기 조정. */
body.mc-touch .hp-container.bottom-left {
    bottom: auto;
    top: 76px;
    left: 16px;
}

body.mc-touch .hp-container.bottom-right {
    bottom: auto;
    top: 76px;
    right: 16px;
}

/* ---- Mobile sizing ----
   Turning on 화면 크기 조정 means "this is a phone", so everything sized for a
   desktop window shrinks to fit a small (often landscape) screen. This is
   independent of the joystick toggle (body.mc-touch) -- these two only shrink
   the joystick/action-button elements themselves, which are invisible anyway
   unless the joystick is also on. All of it is scoped to body.mc-compact so
   desktop layout is untouched. */
body.mc-compact .mc-joystick-zone {
    width: 108px;
    height: 108px;
    left: 16px;
    bottom: 16px;
}

body.mc-compact .mc-joystick-thumb {
    width: 44px;
    height: 44px;
}

body.mc-compact .mc-actions {
    width: 148px;
    height: 148px;
    right: 16px;
    bottom: 16px;
}

body.mc-compact .mc-skill {
    width: 48px;
    height: 48px;
    font-size: 20px;
}

body.mc-compact .mc-attack {
    width: 72px;
    height: 72px;
    right: 6px;
    font-size: 26px;
}

body.mc-compact .mc-aim-zone {
    width: 66px;
    height: 66px;
}

body.mc-compact .mc-aim-thumb {
    width: 40px;
    height: 40px;
    font-size: 18px;
}

/* In-fight HUD */
body.mc-compact .hp-container {
    width: 150px;
}

body.mc-compact .hp-container.top {
    width: 260px;
    top: 12px;
}

body.mc-compact .hp-label,
body.mc-compact .cooldown-row {
    font-size: 11px;
}

body.mc-compact .back-corner-btn {
    top: 12px;
    left: 12px;
    padding: 7px 14px;
    font-size: 13px;
}

body.mc-compact .settings-btn {
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
}

body.mc-compact .story-monsters-left {
    font-size: 12px;
}

/* Menus and full-screen panels */
body.mc-compact h1 {
    font-size: 30px;
}

body.mc-compact h2 {
    font-size: 20px;
}

body.mc-compact .lobby-char {
    gap: 12px;
}

body.mc-compact .lobby-char-body {
    width: 150px;
    height: 150px;
}

body.mc-compact .lobby-char-name {
    font-size: 18px;
}

body.mc-compact .play-btn {
    padding: 11px 24px;
    font-size: 17px;
}

body.mc-compact .secondary-btn,
body.mc-compact .char-select-btn {
    padding: 8px 16px;
    font-size: 13px;
}

body.mc-compact .menu-btn {
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    font-size: 17px;
}

/* .settings-menu (전투 중 나가기 등) is normally anchored under the
   full-size .menu-btn — mc-compact shrinks/raises that button but left
   the dropdown at its non-compact offset, so on small screens it hung
   further from the button than it should. */
body.mc-compact .settings-menu {
    top: 54px;
    right: 14px;
}

body.mc-compact .side-menu {
    top: 58px;
    right: 14px;
    width: 190px;
    padding: 10px;
}

body.mc-compact .boss-list {
    gap: 12px;
}

body.mc-compact #character-list {
    grid-template-columns: repeat(3, 116px);
    gap: 10px;
    max-height: 62vh;
}

body.mc-compact .boss-card {
    width: 116px;
    padding: 10px;
    font-size: 12px;
}

body.mc-compact .boss-card .icon.char-swatch {
    width: 46px;
    height: 46px;
}

/* Mode select: 5 fixed-220px cards in a non-wrapping row add up to ~1220px --
   wider than any phone screen, and with no scroll available the later cards
   (게스트 레이드/각성모드/좀비막기) were pushed off the right edge entirely,
   unreachable. Let the row scroll horizontally instead of trying to cram
   everything into the viewport width. */
body.mc-compact .mode-list {
    width: 100vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    justify-content: flex-start;
    gap: 16px;
    margin: 20px 0;
    padding: 4px 24px;
}

body.mc-compact .mode-card {
    flex-shrink: 0;
    width: 170px;
    height: 200px;
    scroll-snap-align: center;
}

body.mc-compact .mode-card .icon {
    font-size: 46px;
    margin-bottom: 12px;
}

body.mc-compact .mode-card .name {
    font-size: 17px;
}

body.mc-compact .mode-card .sub {
    font-size: 12px;
}

body.mc-compact .mode-list-left,
body.mc-compact .mode-list-right {
    flex-shrink: 0;
    gap: 10px;
}

body.mc-compact .mode-list-left {
    flex-direction: column;
}

body.mc-compact .mode-card.mode-card-small {
    width: 150px;
    height: 95px;
}

body.mc-compact .mode-card.mode-card-small .icon {
    font-size: 26px;
    margin-bottom: 4px;
}

body.mc-compact .mode-card.mode-card-small .name {
    font-size: 14px;
}

/* Character detail */
/* The "← 뒤로" corner button is absolutely positioned over the screen (z-index
   5), so on a phone -- where the panel grows to nearly full height -- it lands
   on top of the header and hid the grade badge. Reserve room above the header
   for it. */
body.mc-compact .cd-panel {
    height: 88vh;
    padding: 48px 16px 14px;
    gap: 10px;
}

body.mc-compact .cd-mini-stats {
    gap: 10px;
}

body.mc-compact .cd-name {
    font-size: 19px;
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.mc-compact .cd-power {
    font-size: 17px;
}

body.mc-compact .char-icon-circle.huge {
    width: 170px;
    height: 170px;
}

body.mc-compact .equip-slot {
    padding: 5px 9px;
    font-size: 12px;
}

body.mc-compact .equip-icon {
    font-size: 15px;
}

body.mc-compact .skill-icon-box {
    width: 44px;
    height: 44px;
    font-size: 20px;
}

/* Boss/guest/zombie detail and the story tower share the same fixed-height
   three-column layout as the character detail panel (.cd-panel), but were
   missing its overflow/shrink treatment -- on a short phone screen the play
   button at the bottom got pushed past the box edge with nothing scrollable
   to reach it (the boxes themselves now scroll too; see .detail-right /
   .detail-left / .tower-right / .tower-middle). Shrinking things here means
   scrolling is rarely actually needed. */
body.mc-compact .detail-layout,
body.mc-compact .tower-layout {
    height: 90vh;
}

body.mc-compact .detail-left,
body.mc-compact .detail-right,
body.mc-compact .tower-right {
    padding: 14px;
    gap: 10px;
}

body.mc-compact .tower-middle {
    padding: 12px;
}

body.mc-compact .tower-floor-list {
    width: 200px;
    gap: 10px;
}

body.mc-compact .floor-card {
    padding: 14px;
    font-size: 16px;
}

body.mc-compact .char-preview-row {
    gap: 12px;
}

/* Scoped to .detail-left/.detail-right (the 100px default icon) so it doesn't
   also inflate the tower screen's already-small .char-icon-circle.small
   preview icon -- body.mc-compact's extra element makes this more specific than
   the plain .char-icon-circle.small rule, so an unscoped version here would
   win and blow the tower icon back up to 70px. */
body.mc-compact .detail-left .char-icon-circle,
body.mc-compact .detail-right .char-icon-circle {
    width: 70px;
    height: 70px;
}

body.mc-compact .boss-icon-circle {
    width: 64px;
    height: 64px;
    font-size: 32px;
}

/* Gacha */
body.mc-compact .gacha-banner-list {
    width: 100%;
    gap: 9px;
    margin: 14px 0;
}

body.mc-compact .gacha-banner {
    padding: 11px 14px;
}

body.mc-compact .gacha-banner-icon {
    font-size: 24px;
    width: 30px;
}

body.mc-compact .gacha-banner-name {
    font-size: 15px;
}

/* The three-column pull layout is too wide for a phone: keep the soul list and
   the pull buttons side by side under a full-width result area. */
body.mc-compact .gacha-pull-layout {
    flex-wrap: wrap;
    width: 98vw;
    gap: 8px;
    margin: 8px 0;
}

body.mc-compact .gacha-result {
    order: -1;
    flex-basis: 100%;
    min-height: 108px;
    padding: 8px;
    gap: 6px;
}

body.mc-compact .gacha-soul-section {
    width: auto;
    flex: 1;
    min-width: 0;
}

body.mc-compact .gacha-soul-list {
    max-height: 20vh;
}

body.mc-compact .gacha-pull-actions {
    width: auto;
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
}

body.mc-compact #gacha-pull-screen .play-btn {
    width: auto; /* back to content width now that they sit in a row */
}

body.mc-compact .gacha-card {
    width: 86px;
    padding: 8px 5px;
}

body.mc-compact .gacha-card-icon {
    width: 40px;
    height: 40px;
    font-size: 19px;
}

body.mc-compact .gacha-card-name {
    font-size: 11px;
}

body.mc-compact .gacha-odds-section {
    margin-top: 2px;
}

body.mc-compact .gacha-odds-row {
    padding: 4px 8px;
    font-size: 11px;
}

/* Login / Signup */
#login-screen, #signup-screen {
    background: rgba(10, 14, 20, 0.92);
}

.auth-card {
    width: 420px;
    max-width: 90vw;
    max-height: 86vh;
    overflow-y: auto;
    background: white;
    color: #222;
    border-radius: 18px;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.auth-title {
    font-size: 26px;
    font-weight: 800;
    text-align: center;
    margin: 0 0 4px;
}

.auth-subtitle {
    font-size: 13px;
    color: #888;
    text-align: center;
    margin: 0 0 16px;
}

.auth-label {
    font-size: 14px;
    font-weight: 700;
    margin-top: 14px;
    margin-bottom: 6px;
}

.auth-input {
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    background: #fafafa;
    color: #222;
}

.auth-input:focus {
    outline: none;
    border-color: #4f8ff7;
    background: white;
}

.auth-hint {
    font-size: 11px;
    color: #999;
    margin: 4px 0 0;
}

.auth-error {
    font-size: 12px;
    color: #e74c3c;
    min-height: 16px;
    margin: 10px 0 0;
}

.auth-submit-btn {
    margin-top: 18px;
    padding: 14px;
    background: #4f8ff7;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.auth-submit-btn:hover {
    filter: brightness(1.05);
}

.auth-link-btn {
    margin-top: 14px;
    background: none;
    border: none;
    color: #4f8ff7;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    align-self: center;
}

.leave-party-btn {
    position: absolute;
    top: 24px;
    left: 44%;
    transform: translateX(-50%);
    z-index: 5;
    padding: 10px 22px;
    font-size: 15px;
    background: #34495e;
    color: white;
    border: 2px solid #7f8c8d;
    border-radius: 8px;
    cursor: pointer;
}

.leave-party-btn:hover {
    filter: brightness(1.15);
}

.play-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: none;
}

/* 게스트 레이드 상세화면: 보스 이름 좌우 화살표로 다른 게스트 보스를 훑어본다. */
.guest-boss-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.boss-icon-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    border: 3px solid #ecf0f1;
    background: #7f8c8d;
}

.detail-specs {
    width: 100%;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #bdc3c7;
    padding: 6px 0;
    border-bottom: 1px solid #34495e;
}

.detail-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: auto;
}

/* .play-btn defaults to position:absolute (the lobby's corner button), which
   stacked 멀티플레이 and 솔로플레이 on top of each other wherever a screen puts
   two of them in a row. Inside .detail-actions they always flow normally. */
.detail-actions .play-btn {
    position: static;
    width: 100%;
    margin-top: 0;
}

/* Fight screen: settings / leave raid */
.settings-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 20;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2c3e50;
    border: 2px solid #7f8c8d;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

.settings-btn:hover {
    filter: brightness(1.15);
}

.settings-menu {
    position: absolute;
    top: 66px;
    right: 20px;
    z-index: 20;
    background: #2c3e50;
    border: 2px solid #7f8c8d;
    border-radius: 8px;
    padding: 10px;
}

.leave-banner {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    background: rgba(0,0,0,0.7);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    color: #f1c40f;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-box {
    background: #2c3e50;
    border: 2px solid #7f8c8d;
    border-radius: 12px;
    padding: 30px 40px;
    text-align: center;
}

.modal-box p {
    font-size: 18px;
    margin-bottom: 20px;
}

.modal-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.modal-actions .play-btn,
.modal-actions .secondary-btn {
    position: static;
}

/* 이벤트 on its own line, then the 캐릭터/상점/뽑기 row under it, with a small
   gap between the two lines. */
.lobby-left-stack {
    position: absolute;
    left: 30px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.lobby-left-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.char-select-btn {
    padding: 14px 28px;
    font-size: 18px;
    font-weight: bold;
    background: #2c3e50;
    color: white;
    border: 2px solid #3498db;
    border-radius: 10px;
    cursor: pointer;
}

.char-select-btn:hover {
    filter: brightness(1.15);
}

/* 플레이 버튼(우측 하단 고정)의 바로 위에 뜨는 주식 버튼. */
.stocks-lobby-btn {
    position: absolute;
    right: 30px;
    bottom: 100px;
    background: linear-gradient(180deg, #16a085, #0e6655);
    border-color: #1abc9c;
}

body.mc-compact .stocks-lobby-btn {
    bottom: 76px;
}

.boss-card.selected {
    border-color: #f1c40f;
    box-shadow: 0 0 16px rgba(241, 196, 15, 0.5);
}

/* Boss select */
.boss-list {
    display: flex;
    gap: 20px;
    margin: 30px 0;
}

/* Character select: fixed 6 columns, new rows grow downward as more
   cookies get added, with a cap so a very long roster still scrolls
   instead of overflowing the screen. */
#character-list {
    display: grid;
    grid-template-columns: repeat(6, 180px);
    gap: 20px;
    max-height: 70vh;
    overflow-y: auto;
    justify-content: center;
    padding: 4px;
}

.boss-card {
    width: 180px;
    height: 220px;
    background: #2c3e50;
    border: 3px solid #34495e;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.15s;
}

.boss-card:hover {
    border-color: #f1c40f;
    transform: translateY(-4px);
}

.boss-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.boss-card .icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.boss-card .icon.char-swatch {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid #ecf0f1;
}

.boss-card .name {
    font-size: 18px;
    font-weight: bold;
}

.secondary-btn {
    padding: 10px 24px;
    font-size: 16px;
    background: #34495e;
    color: white;
    border: 2px solid #7f8c8d;
    border-radius: 8px;
    cursor: pointer;
}

/* Fight screen */
#fight-screen {
    background: #0f1319;
}

#gameCanvas {
    background: radial-gradient(circle at 50% 50%, #2c3540, #12161d 75%);
    border-radius: 50%;
    box-shadow: 0 0 0 6px #34495e, 0 0 40px rgba(0,0,0,0.6);
}

.hp-container {
    position: absolute;
    z-index: 10;
}

.hp-container.top {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
}

.hp-container.bottom-left {
    bottom: 20px;
    left: 20px;
    width: 220px;
}

.hp-container.bottom-right {
    bottom: 20px;
    right: 20px;
    width: 220px;
}

.hp-label {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 4px;
    color: #bdc3c7;
}

.cooldown-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #ecf0f1;
    margin-bottom: 3px;
}

.cooldown-label {
    color: #95a5a6;
}

.hp-bar-bg {
    position: relative;
    width: 100%;
    height: 18px;
    background: rgba(0,0,0,0.5);
    border: 2px solid #34495e;
    border-radius: 6px;
    overflow: hidden;
}

.hp-bar-fill {
    height: 100%;
    width: 100%;
    transition: width 0.15s ease-out;
}

.hp-bar-fill.boss { background: linear-gradient(90deg, #c0392b, #e74c3c); }
.hp-bar-fill.mine { background: linear-gradient(90deg, #2980b9, #3498db); }
.hp-bar-fill.partner { background: linear-gradient(90deg, #27ae60, #2ecc71); }

/* 체력 바 한가운데의 숫자. 남은 체력을 눈으로만 재지 않아도 된다. */
/* 11층부터: 데려갈 쿠키 두 칸 */
.tower-party { display: flex; gap: 10px; justify-content: center; margin: 6px 0; }

.tower-party-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: #1a1f2b;
    border: 2px solid #34495e;
    border-radius: 10px;
    cursor: pointer;
}
.tower-party-slot:hover { border-color: #f1c40f; }
.tps-circle { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #2c3e50; }
.tps-name { color: #ecf0f1; font-size: 11px; font-weight: bold; }

/* 관리자 전용: 힘 하나하나를 켜고 끄는 줄 */
.admin-power-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0;
}

.admin-power-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    background: #1a1f2b;
    border: 1px solid #34495e;
    border-radius: 8px;
}

.admin-power-text { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.admin-power-label { color: #ecf0f1; font-weight: bold; font-size: 14px; }
.admin-power-hint { color: #8fa2b5; font-size: 11px; }

.admin-power-btn {
    flex-shrink: 0;
    min-width: 62px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 2px solid #566573;
    background: #2c3e50;
    color: #95a5a6;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
}

.admin-power-btn.on {
    border-color: #2ecc71;
    background: rgba(46, 204, 113, 0.18);
    color: #2ecc71;
}

.hp-bar-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
    pointer-events: none;
}

.shield-badge {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: bold;
    color: #aeeaff;
    text-shadow: 0 0 3px rgba(0,0,0,0.9);
    pointer-events: none;
}

/* Story fight: floor bridge combat */
#story-fight-screen {
    background: #14301d;
}

#storyCanvas {
    display: block;
    background: linear-gradient(180deg, #2c3e50 0%, #1a1f2b 60%, #0f1319 100%);
}

.story-monsters-left {
    position: absolute;
    top: 24px;
    right: 30px;
    z-index: 5;
    font-size: 16px;
    color: #ecf0f1;
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 16px;
    border-radius: 8px;
}

/* Result screen */
#result-title {
    font-size: 42px;
    margin-bottom: 12px;
}

#result-desc {
    font-size: 18px;
    color: #bdc3c7;
    margin-bottom: 30px;
}

/* ---- 계정 / 조작 screens (the two entries the ☰ menu was reduced to) ---- */
.settings-panel {
    width: 460px;
    max-width: 92vw;
    max-height: 74vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 2px solid #7f8c8d;
    border-radius: 12px;
    padding: 14px;
}

.settings-hint {
    font-size: 12px;
    color: #bdc3c7;
    margin: 0;
    line-height: 1.5;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.settings-row-label {
    color: #bdc3c7;
    flex-shrink: 0;
}

.settings-row-value {
    font-weight: bold;
    text-align: right;
    word-break: break-all;
}

.settings-currency-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}

/* Auto-aim is forced on while mobile controls are on, so the row is inert. */
.menu-item-btn.locked,
.menu-item-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.menu-item-btn.locked:hover,
.menu-item-btn:disabled:hover {
    filter: none;
}

/* The admin credential form reuses the auth-* input styles, so it needs the
   same light card background for those to read correctly. */
.admin-form {
    display: flex;
    flex-direction: column;
    background: white;
    color: #222;
    border-radius: 10px;
    padding: 6px 14px 16px;
}

.admin-form .auth-error {
    margin-bottom: 0;
}

.admin-active {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.mc-compact .settings-panel {
    width: 92vw;
    max-height: 64vh;
    gap: 10px;
}

body.mc-compact .settings-block {
    padding: 10px;
    gap: 6px;
}

body.mc-compact .settings-row,
body.mc-compact .menu-item-btn {
    font-size: 12px;
}

body.mc-compact .settings-hint {
    font-size: 10px;
}

/* ---- Guest raid ---- */
/* Party you take in: four slots on the left of the detail screen. */
.guest-party-slots {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 340px; /* four 76px slots + gaps stay on one row */
}

.guest-party-slot {
    position: relative;
    width: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.guest-party-slot .slot-circle {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 3px solid #7f8c8d;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #7f8c8d;
}

.guest-party-slot.filled .slot-circle {
    border-color: #f1c40f;
}

.guest-party-slot .slot-name {
    font-size: 10px;
    text-align: center;
    line-height: 1.2;
    min-height: 12px;
}

.guest-party-slot .slot-clear {
    position: absolute;
    top: -2px;
    right: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #2c3e50;
    background: #c0392b;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

/* In-fight party bar: click a cookie to swap to it. */
.guest-party-bar {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 6;
}

.guest-party-member {
    width: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 5px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid transparent;
    cursor: pointer;
}

.guest-party-member.active {
    border-color: #f1c40f;
}

.guest-party-member.down {
    opacity: 0.35;
    cursor: not-allowed;
}

.guest-party-member .pm-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #2c3e50;
}

.guest-party-member .pm-bar {
    width: 100%;
    height: 4px;
    background: #c0392b;
    border-radius: 2px;
    overflow: hidden;
}

.guest-party-member .pm-bar-fill {
    height: 100%;
    background: #2ecc71;
}

.guest-party-member .pm-hp {
    font-size: 9px;
}

/* The number key that also swaps to this cookie. */
.guest-party-member .pm-key {
    font-size: 9px;
    color: #95a5a6;
    line-height: 1;
}

.guest-party-member.active .pm-key {
    color: #f1c40f;
}

/* Thrown away entering 2차 -- gone for the rest of the run. */
.guest-party-member.discarded {
    opacity: 0.25;
    filter: grayscale(1);
    cursor: not-allowed;
}

/* 버릴 쿠키 고르기 */
.guest-discard-choices {
    display: flex;
    gap: 14px;
    margin-top: 18px;
    flex-wrap: wrap;
    justify-content: center;
}

.guest-discard-choice {
    width: 84px;
    padding: 8px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #7f8c8d;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.guest-discard-choice:hover {
    border-color: #e74c3c;
}

.guest-discard-choice.discarded {
    border-color: #e74c3c;
    opacity: 0.4;
}

.guest-discard-choice .dc-circle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid #2c3e50;
}

.guest-discard-choice .dc-name { font-size: 11px; }
.guest-discard-choice .dc-hp { font-size: 10px; color: #bdc3c7; }

.guest-discard-choices.locked { pointer-events: none; }

/* The floor giving way once the boss hits 0 -- it doesn't die, phase 2 begins. */
.guest-collapse {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.72);
    z-index: 30;
    animation: guest-collapse-in 0.5s ease-out;
}

.guest-collapse-text {
    font-size: 40px;
    font-weight: bold;
    color: #e74c3c;
    text-shadow: 0 0 24px rgba(231, 76, 60, 0.7);
    letter-spacing: 4px;
}

.guest-collapse-sub {
    font-size: 20px;
    color: #f1c40f;
    letter-spacing: 2px;
}

@keyframes guest-collapse-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

body.mc-compact .guest-party-slot { width: 46px; }
body.mc-compact .guest-party-slot .slot-circle { width: 40px; height: 40px; font-size: 16px; }
body.mc-compact .guest-party-bar { bottom: 6px; gap: 6px; }
body.mc-compact .guest-party-member { width: 46px; padding: 3px; }
body.mc-compact .guest-party-member .pm-circle { width: 24px; height: 24px; }
body.mc-compact .guest-collapse-text { font-size: 26px; }
body.mc-compact .guest-collapse-sub { font-size: 14px; }

/* ---- 클리어 보상 ---- */
/* 칩 모양은 이벤트 화면의 .ev-reward-chip과 같은 계열이되, 여러 종류가
   한 줄에 서야 해서 가로로 접히게 둔다. */
.reward-preview {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.reward-preview:empty { display: none; }

.reward-chip {
    min-width: 62px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #6c3483;
    border: 2px solid #a569bd;
    text-align: center;
    flex-shrink: 0;
}

.reward-chip-icon { display: block; font-size: 18px; line-height: 1; }
.reward-chip-amount { font-size: 13px; font-weight: bold; color: #fff; }
.reward-chip-label { display: block; font-size: 10px; color: #d7bde2; }

/* ---- 로비 재화 바 ---- */
.currency-bar {
    position: absolute;
    top: 14px;
    right: 16px;
    display: flex;
    gap: 8px;
    z-index: 5;
}

.currency-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(26, 31, 43, 0.85);
    border: 1px solid #34495e;
    font-size: 13px;
    color: #ecf0f1;
    white-space: nowrap;
}

.currency-pill-icon { font-size: 14px; }

body.mc-compact .currency-bar { top: 10px; right: 12px; gap: 5px; }
body.mc-compact .currency-pill { padding: 4px 7px; font-size: 11px; }
body.mc-compact .reward-chip { min-width: 54px; padding: 5px 6px; }

/* ---- 장비 ---- */
.equip-slot.clickable { cursor: pointer; transition: 0.15s; }
.equip-slot.clickable:hover { border-color: #7f8c8d; background: #202737; }
.equip-slot.filled { border-color: #f39c12; }
.equip-slot .equip-value.empty { color: #7f8c8d; }

.equip-picker-panel {
    width: min(560px, 92vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: #22293a;
    border: 2px solid #34495e;
    border-radius: 12px;
}

.equip-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    font-weight: bold;
    color: #ecf0f1;
}

.equip-picker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    min-height: 60px;
}

.equip-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #1a1f2b;
    border: 2px solid #34495e;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
}

.equip-item:hover { border-color: #7f8c8d; }
.equip-item.equipped { border-color: #f39c12; }
.equip-item-icon { font-size: 22px; }
.equip-item-main { flex: 1; min-width: 0; }
.equip-item-name { font-size: 14px; color: #ecf0f1; }
.equip-item-stats { font-size: 12px; color: #7fd4f5; }
/* 전용 효과: 지금 쿠키에게 발동하면 노랑, 아니면 흐리게 죽여서
   "끼워도 안 돌아간다"는 것이 한눈에 보이게 한다. */
.equip-item-owner { font-size: 11px; color: #f1c40f; }
.equip-item-owner.inactive { color: #7f8c8d; text-decoration: line-through; }
.equip-item-worn { font-size: 11px; color: #95a5a6; }
.equip-picker-empty { font-size: 13px; color: #7f8c8d; text-align: center; padding: 16px 0; }

.cd-stat-bonus { color: #2ecc71; font-size: 12px; margin-left: 4px; }

body.mc-compact .equip-picker-panel { padding: 12px; }
body.mc-compact .equip-item { padding: 7px 9px; }

/* 장비 칸이 여섯 개까지 늘어나면 한 줄로는 .cd-body 밖으로 넘치고, 넘친 부분을
   밑의 스킬 칸이 덮어버려서 마지막 칸(부츠)이 안 눌렸다. 스크롤은 불편하니,
   두 줄로 나누고 칸 높이를 줄여서 여섯 칸이 전부 한 눈에 들어오게 한다.
   장비 이름은 아이콘/칸이름 밑에 따로 깔아서 이름이 길어도 들어간다. */
.cd-equip-col {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    align-content: center;
    gap: 8px;
}

.cd-equip-col .equip-slot {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    row-gap: 1px;
    column-gap: 7px;
    padding: 7px 10px;
    min-width: 0;
}

.cd-equip-col .equip-label {
    font-size: 12px;
    min-width: 0;
}

.cd-equip-col .equip-value {
    grid-column: 1 / -1;
    font-size: 13px;
    line-height: 1.25;
    /* 이름이 길면 칸을 밀어내지 말고 줄임표로 자른다 */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.mc-compact .cd-equip-col { gap: 6px; }
body.mc-compact .cd-equip-col .equip-slot { padding: 5px 8px; }
body.mc-compact .cd-equip-col .equip-value { font-size: 11px; }

.gacha-ticket-count {
    font-size: 15px;
    color: #f1c40f;
    margin-left: 10px;
    vertical-align: middle;
}

/* 되돌릴 수 없는 버튼은 색으로 먼저 알린다 */
.menu-item-btn.danger-btn {
    border-color: #c0392b;
    color: #e88b80;
}

.menu-item-btn.danger-btn:hover {
    background: #3a1e1b;
}

/* 장비 강화: 가진 재료 / 결과 한 줄 / 항목마다 붙는 강화 버튼 */
.equip-picker-purse {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.equip-purse-pill {
    padding: 4px 10px;
    border-radius: 12px;
    background: #1a1f2b;
    border: 1px solid #34495e;
    font-size: 13px;
    color: #ecf0f1;
}

.equip-picker-msg {
    margin-bottom: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    background: #3a1e1b;
    border: 1px solid #c0392b;
    color: #e8a49c;
    font-size: 13px;
}

.equip-picker-msg.good {
    background: #16321f;
    border-color: #27ae60;
    color: #8fe0ac;
}

.equip-item-lv {
    color: #f1c40f;
    font-size: 12px;
    font-weight: bold;
}

.equip-upgrade {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.equip-up-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 6px;
    border: 1px solid #7f8c8d;
    background: #202737;
    color: #ecf0f1;
    font-size: 12px;
    cursor: pointer;
}

.equip-up-btn:hover { border-color: #f39c12; }
.equip-up-btn.potion { border-color: #8e44ad; }
.equip-up-btn.potion:hover { border-color: #bb8fce; }
.equip-up-cost { color: #bdc3c7; font-size: 11px; }
.equip-up-max { font-size: 12px; color: #f1c40f; }

body.mc-compact .equip-up-btn { padding: 4px 7px; font-size: 11px; }

/* 10층마다 오는 보스전은 타워에서 바로 눈에 띄어야 한다 */
.floor-card.boss-floor {
    border-color: #e67e22;
    background: linear-gradient(180deg, #3a2418, #241812);
    color: #f5b041;
}

.floor-card.boss-floor.selected {
    border-color: #f1c40f;
    box-shadow: 0 0 14px rgba(241, 196, 15, 0.4);
}

.reward-chip.legendary-chip {
    background: linear-gradient(180deg, #7d4a12, #4a2a08);
    border-color: #e67e22;
}

/* 설정(☰) 왼쪽에 나란히 서는 같은 크기의 모서리 버튼. 배지를 붙일 수 있게
   position만 relative가 아니라 absolute 자리를 따로 잡아 준다. */
.corner-btn {
    right: 76px;
}

/* 로비 왼쪽 위 구석에 홀로 서는 새로고침 버튼. */
.corner-btn-2 {
    right: auto;
    left: 24px;
}

/* 친구 버튼: 아이템 버튼(corner-btn) 바로 왼쪽 자리. */
.corner-btn-3 {
    right: 128px;
}

#friends-guest-block {
    text-align: center;
}
#friends-guest-block .shop-empty {
    margin-bottom: 14px;
}

.corner-btn-2.spinning {
    animation: refresh-spin 0.6s linear;
}

@keyframes refresh-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---- 아이템창 ---- */
/* 재화 바에 없는, "쓰는" 것들. 조각처럼 모으는 아이템은 개수 대신 진행 막대로 */
/* 보여줘서 얼마나 남았는지 한눈에 보이게 한다. */
.items-list {
    width: min(560px, 92vw);
    margin: 14px auto 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
}

/* 아이템이 하나도 없을 때의 안내 문구. 목록 상자는 왼쪽 정렬이라 그냥 두면
   가운데에서 왼쪽으로 밀려 보인다. */
.items-list .shop-empty {
    width: 100%;
    margin: 0;
    text-align: center;
}

#items-screen h2 {
    margin-bottom: 4px;
}

#items-msg {
    width: min(560px, 92vw);
    text-align: center;
}

.item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #22303f;
    border: 1px solid #34495e;
    text-align: left;
}

.item-icon { font-size: 30px; flex: 0 0 auto; }
.item-main { flex: 1 1 auto; min-width: 0; }

.item-name {
    color: #ecf0f1;
    font-weight: bold;
    font-size: 15px;
}

.item-amount { color: #f1c40f; margin-left: 6px; }
.item-progress { color: #f1c40f; margin-left: 6px; font-size: 13px; }

.item-desc {
    color: #9fb1c1;
    font-size: 12px;
    margin-top: 3px;
}

.item-bar {
    margin-top: 7px;
    height: 7px;
    border-radius: 4px;
    background: #16212c;
    overflow: hidden;
}

.item-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f39c12, #f1c40f);
}

.item-use-btn {
    flex: 0 0 auto;
    padding: 9px 16px;
    border: none;
    border-radius: 8px;
    background: #27ae60;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}

/* ---- 속성 주식 ---- */
.stocks-list {
    width: min(560px, 92vw);
    margin: 10px auto 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 46vh;
    overflow-y: auto;
}

.stock-card {
    padding: 12px 14px;
    border-radius: 10px;
    background: #22303f;
    border: 1px solid #34495e;
    text-align: left;
}

.stock-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stock-card-icon { font-size: 20px; }

.stock-card-name {
    flex: 1 1 auto;
    color: #ecf0f1;
    font-weight: bold;
    font-size: 15px;
}

.stock-card-price { color: #f1c40f; font-weight: bold; font-size: 14px; }

.stock-card-change.up { color: #2ecc71; }
.stock-card-change.down { color: #e74c3c; }

.stock-card-holding {
    margin-top: 4px;
    color: #9fb1c1;
    font-size: 12px;
}

.stock-card-profit.up { color: #2ecc71; margin-left: 6px; }
.stock-card-profit.down { color: #e74c3c; margin-left: 6px; }

.stock-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.stock-qty-input {
    width: 64px;
    padding: 7px 8px;
    border-radius: 6px;
    border: 1px solid #34495e;
    background: #16212c;
    color: #ecf0f1;
    font-size: 13px;
}

.stock-buy-btn, .stock-sell-btn {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
}

.stock-buy-btn { background: #27ae60; }
.stock-sell-btn { background: #c0392b; }
.stock-sell-btn:disabled { background: #576574; cursor: not-allowed; opacity: 0.6; }

.stocks-events-wrap {
    width: min(560px, 92vw);
    margin: 12px auto 16px;
}

.stocks-events-title {
    color: #9fb1c1;
    font-size: 12px;
    margin-bottom: 6px;
}

.stocks-events {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 20vh;
    overflow-y: auto;
}

.stock-event-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #1c2836;
    border: 1px solid #2c3e50;
    font-size: 12px;
}

.stock-event-icon { flex: 0 0 auto; }
.stock-event-text { flex: 1 1 auto; color: #ecf0f1; }
.stock-event-el { color: #f1c40f; margin-right: 4px; }
.stock-event-pct.up { color: #2ecc71; font-weight: bold; }
.stock-event-pct.down { color: #e74c3c; font-weight: bold; }

.item-use-btn:hover { background: #2ecc71; }
.item-use-btn:disabled { background: #566573; cursor: default; }

/* 우편함 거절 버튼만 수락(초록)과 다른 색으로 구분 */
.item-use-btn.friends-reject-btn,
.item-use-btn.pvp-reject-btn { background: #7f8c8d; }
.item-use-btn.friends-reject-btn:hover,
.item-use-btn.pvp-reject-btn:hover { background: #95a5a6; }

/* ---- 친구 대결 (PvP) ---- */
#pvp-fight-screen {
    justify-content: flex-start;
    padding-top: 16px;
    gap: 10px;
}
.pvp-hud {
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(960px, 96vw);
}
.pvp-hud-side { flex: 1 1 0; min-width: 0; }
.pvp-hud-name {
    color: #ecf0f1;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pvp-hud-side:last-child { text-align: right; }
.pvp-hud-vs { color: #f1c40f; font-weight: bold; font-size: 18px; flex: 0 0 auto; }
.pvp-hp-bar {
    height: 14px;
    border-radius: 7px;
    background: #1c2735;
    border: 1px solid #34495e;
    overflow: hidden;
}
.pvp-hp-fill {
    height: 100%;
    width: 100%;
    background: #2ecc71;
    transition: width 0.15s ease-out;
}
#pvp-canvas {
    background: #14301d;
    border-radius: 12px;
    border: 2px solid #34495e;
    max-width: 96vw;
}
.pvp-controls {
    display: flex;
    gap: 10px;
}
.pvp-result-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: rgba(10, 14, 20, 0.75);
    z-index: 20;
}
.pvp-result-text {
    color: #fff;
    font-size: 36px;
    font-weight: bold;
}

/* ---- 각성모드 ---- */
.awaken-sub {
    color: #9fb1c1;
    font-size: 14px;
    margin: -6px 0 14px;
    text-align: center;
}

/* 쿠키가 다섯이라 한 줄에 다 넣으면 화면 밖으로 잘린다. */
#awaken-boss-list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 16px 0;
    max-width: min(880px, 94vw);
    max-height: 66vh;
    overflow-y: auto;
}

#awaken-boss-list .boss-card { transform: scale(0.88); }

.awaken-card-gear {
    margin-top: 4px;
    font-size: 12px;
    color: #f1c40f;
}

.awaken-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: center;
    width: min(980px, 96vw);
    margin-bottom: 10px;
    max-height: 74vh;
}

/* 왼쪽 레벨 / 가운데 파티 / 오른쪽 보스 정보. */
.awaken-levels { flex: 0 0 116px; }
.awaken-party-col { flex: 0 0 130px; }
.awaken-info-col { flex: 1 1 0; min-width: 0; }

.awaken-levels, .awaken-party-col, .awaken-info-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.awaken-col-title {
    color: #9fb1c1;
    font-size: 13px;
    font-weight: bold;
}

.awaken-boss-name { color: #ecf0f1; font-size: 17px; font-weight: bold; }

.awaken-boss-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.35);
}

.awaken-boss-gear { color: #9fb1c1; font-size: 13px; }

/* 레벨 1~10을 세로로. 순서 잠금이 없으므로 전부 그냥 누를 수 있다. */
.awaken-level-chips {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-height: 52vh;
    overflow-y: auto;
}

.awaken-level-chip {
    padding: 7px 0;
    border-radius: 8px;
    border: 1px solid #34495e;
    background: #22303f;
    color: #ecf0f1;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}

.awaken-level-chip.selected {
    background: #b9770e;
    border-color: #f1c40f;
    color: #fff;
}

.awaken-level-chip.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.awaken-level-info {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    background: #22303f;
    border: 1px solid #34495e;
    text-align: left;
}

.awaken-level-title { color: #f1c40f; font-weight: bold; margin-bottom: 6px; }

.awaken-stat-list {
    margin: 0 0 6px;
    padding-left: 16px;
    color: #cfd9e3;
    font-size: 12px;
    line-height: 1.5;
    max-height: 30vh;
    overflow-y: auto;
}

.awaken-drop {
    color: #8fe0ac;
    font-size: 13px;
    margin-bottom: 6px;
}

.awaken-party-title { color: #9fb1c1; font-size: 13px; }

.awaken-mode-toggle {
    display: flex;
    gap: 6px;
    width: 100%;
}

.awaken-toggle-btn {
    flex: 1;
    padding: 6px 0;
    border-radius: 8px;
    border: 1px solid #34495e;
    background: #22303f;
    color: #9fb1c1;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
}

.awaken-toggle-btn.selected {
    background: #b9770e;
    border-color: #f1c40f;
    color: #fff;
}

.awaken-party {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.awaken-party-slot {
    width: 100%;
    padding: 7px 6px;
    border-radius: 10px;
    background: #22303f;
    border: 1px dashed #34495e;
    cursor: pointer;
    text-align: center;
}

.awaken-party-slot.filled { border-style: solid; border-color: #f1c40f; }

.awaken-party-slot .icon {
    width: 34px;
    height: 34px;
    margin: 0 auto 4px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 34px;
    color: #7f8c8d;
}

.awaken-party-slot .name { color: #ecf0f1; font-size: 12px; }
.awaken-party-slot .cap { color: #7f8c8d; font-size: 10px; margin-top: 2px; }

#awaken-play-btn:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 720px) {
    .awaken-layout { flex-direction: column; align-items: center; }
}

/* ---- 대기 화면 ---- */
/* 짝이 맞으면 둘이 모닥불을 사이에 두고 마주 선다. 준비를 누른 쪽 머리 위에
   READY가 뜨므로, 누가 아직 안 눌렀는지 한눈에 보인다. */
.waiting-row {
    align-items: flex-end;
    justify-content: center;
    gap: 18px;
}

.waiting-row .char-preview {
    position: relative;
    padding: 12px 14px 10px;
    border-radius: 12px;
}

.ready-badge {
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, #2ecc71, #21955a);
    border: 2px solid #a7f3c8;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
    animation: ready-pop 240ms ease-out;
}

@keyframes ready-pop {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.campfire {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 8px;
    filter: drop-shadow(0 0 18px rgba(243, 156, 18, 0.55));
}

.campfire-flame {
    font-size: 34px;
    line-height: 1;
    animation: campfire-flicker 900ms ease-in-out infinite alternate;
    transform-origin: bottom center;
}

.campfire-logs {
    font-size: 22px;
    line-height: 1;
    margin-top: -4px;
}

@keyframes campfire-flicker {
    from { transform: scale(1) rotate(-3deg); opacity: 0.85; }
    to { transform: scale(1.14) rotate(3deg); opacity: 1; }
}

/* 불빛이 닿는 자리: 짝이 맞았을 때만 은은하게 깔린다. */
.waiting-row:has(.campfire:not(.hidden)) .char-preview {
    background: radial-gradient(circle at 50% 90%, rgba(243, 156, 18, 0.18), transparent 70%);
}

/* ---- 각성모드: 싸우는 중의 파티 교체 ---- */
.awaken-swap-bar {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 6;
}

.awaken-swap-btn {
    width: 74px;
    padding: 6px 4px 5px;
    border-radius: 10px;
    border: 2px solid #34495e;
    background: rgba(20, 24, 32, 0.72);
    color: #ecf0f1;
    cursor: pointer;
}

.awaken-swap-btn.active { border-color: #f1c40f; }
.awaken-swap-btn.down { opacity: 0.35; }
.awaken-swap-btn:disabled { cursor: default; }

.swap-swatch {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto 3px;
    border-radius: 50%;
}

.swap-name { display: block; font-size: 11px; }

.swap-hp {
    display: block;
    height: 4px;
    margin-top: 4px;
    border-radius: 2px;
    background: #16212c;
    overflow: hidden;
}

.swap-hp-fill { display: block; height: 100%; background: #2ecc71; }

/* ---- 보스전 위쪽 체력 바 ---- */
/* 보스는 잡몹 머리 위의 작은 바로는 알 수가 없다. 화면 위에 길게 붙인다. */
.story-boss-bar {
    position: absolute;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    width: min(620px, 82%);
    z-index: 7;
    pointer-events: none;
}

.sbb-name {
    text-align: center;
    color: #ffd9e6;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85);
    margin-bottom: 4px;
}

.sbb-track {
    position: relative;
    height: 20px;
    border-radius: 10px;
    background: rgba(20, 8, 14, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.35);
    overflow: hidden;
    box-shadow: 0 0 18px rgba(231, 76, 60, 0.35);
}

.sbb-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, #ff6b81, #c0392b);
    transition: width 120ms linear;
}

/* 보호막은 체력 위에 겹쳐서 왼쪽부터 덮는다. */
.sbb-shield {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: rgba(120, 200, 255, 0.55);
}

.sbb-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* 모바일에서는 조작 버튼과 겹치지 않게 조금 작게. */
body.mc-compact .story-boss-bar { top: 6px; width: 70%; }
body.mc-compact .sbb-name { font-size: 14px; }

/* ==================== 좀비막기 ==================== */
.zombie-hud {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    display: flex;
    gap: 10px;
}

.zombie-hud-chip {
    background: rgba(20, 24, 32, 0.65);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 6px 14px;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
}

.zombie-build-hint {
    position: absolute;
    top: 66px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    background: rgba(241, 196, 15, 0.9);
    color: #2c2c2c;
    font-weight: bold;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 10px;
}

.zombie-build-btn {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    padding: 10px 22px;
    font-size: 15px;
}

body.mc-compact .zombie-build-btn {
    bottom: 14px;
    padding: 6px 14px;
    font-size: 12px;
}

.zombie-build-menu {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 13;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(20, 24, 32, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 10px;
}

.zombie-build-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 160px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}
.zombie-build-item:hover {
    background: rgba(255, 255, 255, 0.18);
}
.zombie-build-item.selected {
    border-color: #f1c40f;
    background: rgba(241, 196, 15, 0.25);
}
.zombie-build-cost {
    color: #f1c40f;
}

body.mc-compact .zombie-build-menu {
    bottom: 54px;
    max-height: 55vh;
    overflow-y: auto;
    padding: 6px;
    gap: 4px;
}

body.mc-compact .zombie-build-item {
    min-width: 130px;
    padding: 5px 10px;
    font-size: 11px;
}

.zombie-upgrade-title {
    color: #f1c40f;
    font-weight: bold;
    text-align: center;
    margin-bottom: 4px;
}

.zombie-upgrade-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #fff;
    font-size: 14px;
}
body.mc-compact .sbb-track { height: 16px; }