/*
 * nee-chrome.css — 상단 한 줄 메뉴와 저장 안내 문구.
 *
 * 게임 화면(main.css)에는 손대지 않는다. 상단 바는 고정 오버레이라 원본의
 * 가운데 정렬 레이아웃(#container 는 top:50% 기준)을 밀어내지 않는다.
 * 게임 폰트 'GraphicPixel' 은 ASCII 147자뿐이라 한글·일본어·아랍어가 깨진다 —
 * 이 두 영역만 시스템 폰트를 쓴다.
 */

#nee-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 8px;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: visible;
    white-space: nowrap;
    background: rgba(12, 12, 12, 0.82);
    border-bottom: 1px solid #3a3a3a;
    font-family: "Pretendard", "Noto Sans KR", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 13px;
    line-height: 1;
    color: #d8d3bd;
    opacity: 0.55;
    transition: opacity 0.15s linear;
}

#nee-bar:hover,
#nee-bar:focus-within,
.intro #nee-bar,
body.intro #nee-bar {
    opacity: 1;
}

#nee-bar .nee-brand {
    flex: none;
    padding: 0 8px;
    color: #fcda5c;
    font-weight: 700;
    text-decoration: none;
}

#nee-bar .nee-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
}

#nee-bar .nee-drop {
    position: relative;
    flex: none;
}

#nee-bar .nee-drop > summary {
    list-style: none;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
}

#nee-bar .nee-drop > summary::-webkit-details-marker {
    display: none;
}

#nee-bar .nee-drop > summary:hover,
#nee-bar .nee-drop[open] > summary {
    background: #2c2c2c;
    color: #fcda5c;
}

/*
 * 패널은 fixed 다. 바가 `overflow-x:auto` (좁은 화면용 가로 스크롤) 라서
 * overflow-y 도 자동으로 스크롤 컨테이너가 되고, absolute 패널은 30px 높이의
 * 바 안에서 통째로 잘렸다 — 눌러도 아무것도 안 보이던 원인.
 * 좌표는 nee-chrome.js 의 placePanel() 이 summary 위치에서 계산한다.
 */
#nee-bar .nee-drop > ul {
    position: fixed;
    top: 30px;
    left: 0;
    z-index: 601;
    max-height: calc(100vh - 44px);
    overflow-y: auto;
    min-width: 190px;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    background: #1b1b1b;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

#nee-bar .nee-drop > ul a {
    display: block;
    padding: 7px 14px;
    color: #d8d3bd;
    text-decoration: none;
    white-space: nowrap;
}

#nee-bar .nee-drop > ul a:hover {
    background: #2c2c2c;
    color: #fcda5c;
}

#nee-bar .nee-auth {
    flex: none;
    margin-inline-start: auto;
    padding: 4px 10px;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    background: #1b1b1b;
    color: #fcda5c;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

#nee-bar .nee-auth:hover {
    background: #2c2c2c;
}

#nee-bar .nee-user {
    flex: none;
    margin-inline-start: auto;
    padding: 0 6px;
    max-width: 12em;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #d8d3bd;
}

/* 이름이 이미 오른쪽으로 밀어냈으면 단추는 붙어 있어야 한다. */
#nee-bar .nee-user + .nee-auth {
    margin-inline-start: 0;
}

#nee-lang {
    flex: none;
    max-width: 8em;
    padding: 3px 4px;
    background: #1b1b1b;
    color: #d8d3bd;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

/* Credits 바로 위에 놓이는 저장 안내. footer 의 픽셀 폰트를 상속하지 않는다. */
#nee-save-warning {
    /* footer 의 `footer div {display:inline-block}` 를 덮는다 — 안 그러면 Credits 옆으로 붙는다. */
    display: block;
    max-width: 46em;
    margin: 0 auto 8px;
    padding: 0 12px;
    font-family: "Pretendard", "Noto Sans KR", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    white-space: normal;
    color: #b9b191;
    text-wrap: balance;
}

@media screen and (max-width: 800px) {
    #nee-bar {
        height: 28px;
        font-size: 12px;
    }

    #nee-save-warning {
        font-size: 11px;
        padding: 0 10px;
    }
}

/*
 * 레벨·경험치 배지 (game.js 의 updateXpBar 가 만든다).
 * 원본 HUD(#bar-container)는 스프라이트+배율별 CSS 라 끼어들면 배율마다 어긋난다 —
 * 그래서 상단 바 바로 아래에 독립된 오버레이로 띄운다.
 */
#nee-level {
    position: fixed;
    top: 36px;
    left: 8px;
    z-index: 590;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    background: rgba(12, 12, 12, 0.82);
    font-family: "Pretendard", "Noto Sans KR", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 12px;
    line-height: 1;
    color: #fcda5c;
    pointer-events: none;
    user-select: none;
}

#nee-level .nee-xp {
    display: block;
    width: 84px;
    height: 6px;
    border-radius: 3px;
    background: #333;
    overflow: hidden;
}

#nee-level .nee-xp i {
    display: block;
    width: 0;
    height: 100%;
    background: #7bd06a;
    transition: width 0.3s ease;
}

@media screen and (max-width: 800px) {
    #nee-level {
        top: 34px;
        font-size: 11px;
    }

    #nee-level .nee-xp {
        width: 60px;
    }
}

/*
 * 게임 안 글자를 다국어로 — 원본 픽셀 폰트 'GraphicPixel' 은 ASCII 147자뿐이라
 * 한글·가나·한자·태국어·아랍어가 그대로는 브라우저 기본 폰트로 떨어져 튄다.
 * 한글은 같은 결의 픽셀 폰트(Galmuri11, OFL — client/fonts/)로 받고,
 * 그 밖의 문자는 시스템 폰트로 흘린다. 라틴 문자는 여전히 원본 폰트가 먼저 잡는다.
 * (main.css 뒤에 로드되므로 같은 선택자면 이쪽이 이긴다 — index.html 의 link 순서 유지할 것.)
 */
@font-face {
    font-family: 'Galmuri11';
    src: url('../fonts/Galmuri11.woff2') format('woff2');
    font-display: swap;
}

.bubble p,
#notifications,
#notifications span,
#chatbox,
#chatbox input,
#parchment,
#parchment p,
#parchment input,
#portrait p,
#instructions,
#instructions p,
#achievements,
#achievement-notification,
#playercount,
#population,
#credits,
#loadcharacter,
#confirmation,
#death,
#error,
#about,
.alert,
footer,
.windows #parchment p,
.windows #portrait p,
.windows .alert,
.windows footer,
.windows .bubble p,
.windows #population {
    font-family: "GraphicPixel", "AdvoCut", "Galmuri11", "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", sans-serif;
}

/*
 * 가방 (js/inventory.js 가 만든다).
 * 원본 HUD 에 끼우지 않고 독립된 층으로 띄우는 이유는 #nee-level 과 같다 —
 * 원본은 스프라이트 + 배율별 CSS 세 벌이라 칸을 끼우면 배율마다 어긋난다.
 */
/* 시작 화면(캐릭터 만들기)에서는 가방을 숨긴다 — 게임이 시작되면 body.intro 가 사라진다. */
body.intro #nee-bag-button,
body.intro #nee-bag,
body.intro #nee-shop,
body.intro #nee-gold,
body.intro #nee-level,
body.intro #nee-radar {
    display: none;
}

#nee-bag-button {
    position: fixed;
    top: 36px;
    right: 8px;
    z-index: 592;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    background: rgba(12, 12, 12, 0.82);
    color: #fcda5c;
    font-family: "Pretendard", "Noto Sans KR", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

#nee-bag-button:hover {
    background: #2c2c2c;
}

#nee-bag-button .nee-bag-icon {
    width: 12px;
    height: 12px;
    border: 2px solid #fcda5c;
    border-radius: 2px;
    box-shadow: inset 0 3px 0 #fcda5c;
}

#nee-bag,
#nee-shop {
    position: fixed;
    top: 68px;
    right: 8px;
    z-index: 591;
    display: none;
    width: 240px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    padding: 10px 12px 12px;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    background: rgba(16, 16, 16, 0.96);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    color: #d8d3bd;
    font-family: "Pretendard", "Noto Sans KR", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 13px;
}

#nee-bag.open,
#nee-shop.open {
    display: block;
}

#nee-bag h2,
#nee-shop h2 {
    margin: 0 0 8px;
    color: #fcda5c;
    font-size: 14px;
    font-weight: 700;
}

#nee-shop {
    padding-top: 28px;
}

#nee-shop .nee-shop-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #3a3a3a;
    border-radius: 3px;
    background: #2c2c2c;
    color: #d8d3bd;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
}

#nee-shop .nee-shop-close:hover {
    background: #4a4a4a;
    color: #fff;
}

#nee-bag .nee-bag-list,
#nee-shop .nee-bag-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

#nee-bag .nee-bag-item,
#nee-shop .nee-bag-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px;
    border-radius: 4px;
    cursor: pointer;
}

#nee-bag .nee-bag-item:hover,
#nee-shop .nee-bag-item:hover {
    background: #2c2c2c;
}

#nee-bag .nee-bag-item.equipped,
#nee-shop .nee-bag-item.equipped {
    cursor: default;
    color: #9c9682;
    opacity: 0.75;
}

#nee-bag .nee-bag-sprite,
#nee-shop .nee-bag-sprite {
    flex: none;
    width: 32px;
    height: 32px;
    /* 아이템 스프라이트는 96x16(16px 6컷)이다. 2배로 키워 첫 컷만 보여 준다. */
    background-repeat: no-repeat;
    background-size: 192px 32px;
    background-position: 0 0;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
}

#nee-bag .nee-bag-body,
#nee-shop .nee-bag-body {
    flex: 1 1 auto;
    min-width: 0;
}

#nee-bag .nee-bag-name,
#nee-shop .nee-bag-name {
    display: block;
}

/*
 * 능력치 설명 — 마우스를 올렸을 때만 보인다.
 * 떠다니는 말풍선 대신 줄 안에서 펼치는 방식이라 창 가장자리에서 잘리지 않는다.
 */
#nee-bag .nee-bag-stat,
#nee-shop .nee-bag-stat {
    display: none;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.35;
    color: #9fd18f;
}

#nee-bag .nee-bag-item:hover .nee-bag-stat,
#nee-shop .nee-bag-item:hover .nee-bag-stat,
#nee-bag .nee-bag-item:focus-within .nee-bag-stat,
#nee-shop .nee-bag-item:focus-within .nee-bag-stat {
    display: block;
}

#nee-bag .nee-bag-item.equipped:hover .nee-bag-stat,
#nee-shop .nee-bag-item.equipped:hover .nee-bag-stat {
    color: #b9b191;
}

#nee-bag .nee-bag-subtitle,
#nee-shop .nee-bag-subtitle {
    margin: 10px 0 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #8a8674;
    text-transform: uppercase;
}

#nee-bag .nee-bag-worn,
#nee-shop .nee-bag-worn {
    margin: 0;
    padding: 0;
    list-style: none;
}

#nee-bag .nee-bag-action,
#nee-shop .nee-bag-action {
    flex: none;
    font-size: 11px;
    color: #7bd06a;
}

#nee-bag .nee-bag-item.equipped .nee-bag-action,
#nee-shop .nee-bag-item.equipped .nee-bag-action {
    color: #8a8674;
}

#nee-bag .nee-bag-discard {
    flex: none;
    width: 22px;
    height: 22px;
    margin-left: 2px;
    padding: 0;
    border: 1px solid #5a2a2a;
    border-radius: 3px;
    background: #3a1a1a;
    color: #e07070;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
}

#nee-bag .nee-bag-discard:hover {
    background: #6a2424;
    color: #fff;
}

#nee-bag .nee-bag-empty,
#nee-shop .nee-bag-empty {
    padding: 10px 4px;
    color: #8a8674;
}

#nee-bag .nee-bag-hint,
#nee-shop .nee-bag-hint {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px solid #2c2c2c;
    font-size: 11px;
    color: #8a8674;
}

@media screen and (max-width: 800px) {
    #nee-bag-button {
        top: 34px;
        font-size: 11px;
    }

    #nee-bag,
    #nee-shop {
        top: 64px;
        width: 200px;
        font-size: 12px;
    }
}

/* ------------------------------------------------------------------ 상점 (2026-08-23)
 *
 * 창 모양은 가방과 똑같다 (위 규칙에 선택자를 함께 적어 두었다). 여기에는 상점에만
 * 있는 것 — 늘 보이는 골드 표시, 값 글자, 못 사는 줄 — 만 적는다.
 */
#nee-gold {
    position: fixed;
    top: 64px;
    left: 8px;
    z-index: 592;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    background: rgba(12, 12, 12, 0.82);
    color: #fcda5c;
    font-family: "Pretendard", "Noto Sans KR", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
}

#nee-gold .nee-gold-icon {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fcda5c;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}

/* 값은 초록(팔기)이 아니라 금색 — 가방의 "착용/사용" 과 구분된다. */
#nee-shop .nee-shop-price {
    color: #fcda5c;
    font-weight: 700;
}

/* 지금 살 수 없는 줄 (돈이 모자라거나 가방이 꽉 참). 눌러 보면 이유를 알려 준다. */
#nee-shop .nee-shop-item.blocked {
    opacity: 0.45;
}

#nee-shop .nee-shop-item.blocked .nee-shop-price {
    color: #d83939;
}

@media screen and (max-width: 800px) {
    #nee-gold {
        top: 60px;
        font-size: 11px;
    }
}

/*
 * 좌표 + 미니맵 — 게임 창(#container) 왼쪽 위.
 * #canvas 에 position:relative 를 주면 원본 캔버스(position:absolute)의
 * containing block 이 바뀌어 화면이 밀리므로 건드리지 않는다.
 */
#nee-radar {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 5;
    pointer-events: none;
    font-family: "Pretendard", "Noto Sans KR", "Segoe UI", system-ui, -apple-system, sans-serif;
}

#nee-radar .nee-coords {
    display: inline-block;
    margin-bottom: 4px;
    padding: 3px 7px;
    border: 1px solid #3a3a3a;
    border-radius: 3px;
    background: rgba(12, 12, 12, 0.82);
    color: #fcda5c;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}

#nee-radar .nee-minimap {
    position: relative;
    display: block;
    width: 86px;
    height: 140px;
    border: 1px solid #3a3a3a;
    border-radius: 3px;
    background: #1a1710;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    opacity: 0.92;
}

@media screen and (max-width: 800px) {
    #nee-radar .nee-minimap {
        width: 64px;
        height: 104px;
    }

    #nee-radar .nee-coords {
        font-size: 10px;
    }
}