/* Main menu: everything is drawn on #menu_bg by menu.js in the game's HUD style.
   The three bundle-owned widgets keep the game's own styles from main.css; only
   their inline left/top (set by the bundle every frame) is neutralised here. */
#menu { position: fixed; inset: 0; z-index: 50; overflow: hidden; background-color: #013220; user-select: none; }
/* screen readers / search engines only (2026-10-08, SEO): the menu is drawn on the canvas */
.ns-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the menu footer as real links (menu.js sizes it with the menu) */
#ns-site-links { position: absolute; right: 14px; bottom: 2px; z-index: 3; font-family: 'Baloo Paaji', sans-serif; font-size: 11px; color: #a89470; white-space: nowrap; text-shadow: 0 1px 0 #150b04; }
#ns-site-links a { color: #c9b28f; text-decoration: none; }
#ns-site-links a:hover { color: #f0c25a; text-decoration: underline; }
#menu.is-hidden #ns-site-links, html.ns-framed #ns-site-links { display: none; }
#menu.is-hidden { display: none; }
/* a cold load: the nickname box must not show alone on the green while the scripts (5 MB of embedded art) parse - it stays hidden until menu.js has painted its first frame and drops this class */
#menu.is-loading .ns-form { visibility: hidden; }
#menu_bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* campsite layout */
#menu .ns-form {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
#menu .ns-form-row { display: flex; gap: 10px; align-items: center; }
#menu #nameInput, #menu #serverlist, #menu #playButton {
    position: static !important;
    left: auto !important;
    top: auto !important;
}
/* the three controls, drawn like the HUD: dark rounded fields, white Baloo text */
#menu #nameInput, #menu #serverlist, #menu #playButton {
    height: 40px;
    box-sizing: border-box;
    border: none;
    border-radius: 8px;
    font-family: 'Baloo Paaji', sans-serif;
    font-size: 20px;
    color: #fff;
    opacity: 1;
    outline: none;
}
#menu #nameInput, #menu #serverlist {
    background-color: #2a1a0e; border: 2px solid #120a04; box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.35);
    text-align: center;
}
#menu #nameInput { width: 300px; }
#menu #nameInput::placeholder { color: #b9a08a; }
#menu #nameInput:focus { background: transparent !important; }
#menu #serverlist { width: 150px; padding: 0 8px; cursor: pointer; appearance: none; -webkit-appearance: none; }
#menu #serverlist { background-color: #2a1a0e; color: #f3e3c3; border: 2px solid #120a04; border-radius: 8px; box-shadow: inset 0 2px 6px rgba(0,0,0,.6); }
#menu #serverlist:focus { border-color: #d9a648; outline: none; }
#menu #serverlist option { color: #f3e3c3; background: #2a1a0e; font-weight: 700; padding: 6px 10px; }
#menu #serverlist option:checked, #menu #serverlist option:hover { background: #4a2f16; color: #fff3d6; }
#menu #playButton {
    width: 140px;
    padding: 0;
    background: linear-gradient(#e2b25f, #b07a3c); border: 2px solid #24160b; box-shadow: 0 4px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,235,190,.5); text-shadow: 0 1px 2px rgba(0,0,0,.6); color: #fff7e6;
    cursor: pointer;
}
#menu #playButton:hover { background: linear-gradient(#f0c46f, #c48a46); }
#menu #playButton:active { background: linear-gradient(#b07a3c, #8a5a2b); box-shadow: inset 0 3px 8px rgba(0,0,0,.5); }
#menu.has-panel .ns-form { visibility: hidden; }

/* in-game chat box: smaller than the game's original 300 px grey bar, in the HUD wood */
div#chat_block { width: 300px; }
#chat_input {
    display: block;
    width: 190px;
    height: 26px;
    margin: 0 auto;
    background-color: rgba(58, 35, 18, .88);
    border: 2px solid #4a2f16;
    border-radius: 8px;
    color: #f3e3c3;
    font-size: 14px;
    opacity: 1;
}
#chat_input::placeholder { color: #b9a08a; }

/* the region select is driven by the drawn pills, the play button by the drawn board: both stay in the DOM for the bundle, out of sight */
#menu .ns-form-row { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
#menu #nameInput { width: 250px; height: 44px; font-size: 22px; text-align: center; padding: 0 10px; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0; }
#menu #nameInput:not([readonly]) { cursor: text; }   /* signed in and free to change it: the field takes typing (menu.js draws its outline) */

/* menu themes: the nickname box matches the drawn UI */
#menu[data-theme="journal"] #nameInput { background: transparent; border: none; box-shadow: none; color: #3a2a1a; text-align: left; padding: 0 6px; font-size: 22px; }
#menu[data-theme="journal"] #nameInput::placeholder { color: #a08a66; }
#menu[data-theme="ruins"] #nameInput { background-color: #2a3835; border: 2px solid #101614; color: #e6efe8; box-shadow: inset 0 2px 6px rgba(0,0,0,.6); }
#menu[data-theme="ruins"] #nameInput::placeholder { color: #9fb5a8; }
#menu[data-theme="ruins"] #nameInput:focus { border-color: #4fb86a; background-color: #33443f; }
#menu[data-theme="glass"] #nameInput { background-color: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: #eef7f1; box-shadow: none; border-radius: 10px; text-align: left; padding: 0 14px; }
#menu[data-theme="glass"] #nameInput::placeholder { color: #8fa89b; }
#menu[data-theme="glass"] #nameInput:focus { border-color: #4fd47a; background-color: rgba(79,212,122,0.08); }

#menu[data-theme="lodge"] #nameInput { background: transparent; border: none; box-shadow: none; color: #3a2a1a; text-align: left; padding: 0 6px; font-size: 22px; }
#menu[data-theme="lodge"] #nameInput::placeholder { color: #a08a66; }
#menu[data-theme="atlas"] #nameInput { background-color: #f0e6cf; border: 1.5px solid #2b4b52; color: #243036; box-shadow: none; text-align: left; padding: 0 12px; height: 40px; }
#menu[data-theme="atlas"] #nameInput::placeholder { color: #8a9490; }
#menu[data-theme="neon"] #nameInput { background-color: rgba(255,255,255,0.04); border: 1.5px solid rgba(0,240,224,0.5); color: #f4f0ff; box-shadow: 0 0 12px rgba(0,240,224,0.25); border-radius: 3px; text-align: left; padding: 0 12px; font-size: 18px; }
#menu[data-theme="neon"] #nameInput::placeholder { color: #9a8fbf; }
#menu[data-theme="neon"] #nameInput:focus { border-color: #ff46c8; box-shadow: 0 0 14px rgba(255,70,200,0.4); }
#menu[data-theme="meadow"] #nameInput { width: 150px; background-color: #f6f1e3; border: 2px solid #e9dcc2; color: #3d4a3a; box-shadow: none; border-radius: 12px; text-align: center; font-size: 17px; }
#menu[data-theme="meadow"] #nameInput::placeholder { color: #8a9483; }
#menu[data-theme="meadow"] #nameInput:focus { border-color: #7cc46a; }

#menu[data-theme="ember"] #nameInput { background-color: #211a18; border: 2px solid #0d0a09; color: #f6ebe4; box-shadow: inset 0 2px 6px rgba(0,0,0,.6); }
#menu[data-theme="ember"] #nameInput:focus { border-color: #ff7a2f; }
#menu[data-theme="frost"] #nameInput { background-color: rgba(255,255,255,0.08); border: 1px solid rgba(180,225,255,0.45); color: #f2f9ff; box-shadow: none; border-radius: 10px; text-align: left; padding: 0 14px; }
#menu[data-theme="frost"] #nameInput:focus { border-color: #6fc3ff; }
#menu[data-theme="swamp"] #nameInput { background-color: #1c2412; border: 2px solid #0a0d05; color: #e9f0d0; box-shadow: inset 0 2px 6px rgba(0,0,0,.6); }
#menu[data-theme="swamp"] #nameInput:focus { border-color: #b8d630; }
#menu[data-theme="royal"] #nameInput { background-color: #141c40; border: 2px solid #070a1c; color: #f3f0ff; box-shadow: inset 0 2px 6px rgba(0,0,0,.6); }
#menu[data-theme="royal"] #nameInput:focus { border-color: #f2c85a; }

/* the ad banner (js/ads.js): a 300 x 250 slot in a wooden frame, left middle of the menu; hidden until a network is configured, and gone with #menu on PLAY */
#ns_ad { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); display: none; box-sizing: border-box; width: 324px; padding: 24px 8px 8px; border-radius: 12px; background: #33200f; border: 4px solid #1c1007; box-shadow: 0 10px 30px rgba(0,0,0,.55), inset 0 2px 0 #4e3219, inset 0 -2px 0 #150b04; z-index: 3; }
#ns_ad .ns-ad-label { position: absolute; left: 10px; top: 5px; font: 10px "Baloo Paaji", sans-serif; letter-spacing: 2px; color: #8a7455; }
#ns_ad #ns_ad_slot { width: 300px; height: 250px; margin: 0 auto; overflow: hidden; background: rgba(0,0,0,.25); border-radius: 6px; }
#menu.has-panel #ns_ad { display: none !important; }   /* a panel (settings, servers...) is open: the wash covers the menu, the ad goes with it */
@media (max-width: 1100px) { #ns_ad { display: none !important; } }   /* no room beside the title and the form on a narrow window */

/* the death screen: the menu draws its own wood behind the plaque - the live-fight backdrop is hidden while it is up (menu.js toggles body.ns-dead) */
body.ns-dead #ns_menu_fight { visibility: hidden; }

/* TOTEM TEAM BOX (2026-10-02, the user: "anything that doesn't match the theme"): the original game's olive box with green buttons, on the menu's wood (wood.js) */
div#team_box { background: var(--ns-wood-bg, #33200f) !important; border: 4px solid #1c1007 !important; border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 2px 0 #4e3219, inset 0 -2px 0 #150b04; color: #f3e3c3 !important; }
div.nicknames { background: rgba(0,0,0,.24) !important; border: 2px solid rgba(21,11,4,.7); border-radius: 8px; color: #f3e3c3 !important; }
div.nicknames:hover { background: rgba(255,213,154,.10) !important; }
div#join, div#lock_team, div#leave { background: linear-gradient(#e2b25f, #b07a3c) !important; border: 3px solid #24160b; border-radius: 9px; color: #fff7e6 !important; text-shadow: 0 1px 2px rgba(0,0,0,.6); box-shadow: 0 3px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,235,190,.5); }
div#join:hover, div#lock_team:hover, div#leave:hover { background: linear-gradient(#f0c46f, #c48a46) !important; }
div#join:active, div#lock_team:active, div#leave:active { background: linear-gradient(#b07a3c, #8a5a2b) !important; }