* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #a8d8ef; font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: #2b2320; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
[hidden] { display: none !important; }
button { font: inherit; }
kbd { display: inline-block; min-width: 1.5em; padding: 0 5px; border-radius: 5px; background: rgba(43, 35, 32, 0.1); border: 1px solid rgba(43, 35, 32, 0.2); font: 600 11px/1.6 system-ui, sans-serif; text-align: center; }

.panel { background: rgba(255, 250, 242, 0.94); border-radius: 14px; box-shadow: 0 6px 24px rgba(40, 30, 20, 0.2); }
.panel.small { padding: 8px 12px; font-size: 13px; }
.center { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, calc(100vw - 32px)); padding: 22px 24px; }
.side { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px 22px; }
h1 { margin: 0 0 4px; font-size: 28px; letter-spacing: -0.5px; }
h2 { margin: 0; font-size: 20px; }
.lede { margin: 0 0 14px; color: #6b5d54; font-size: 14px; }
.error { margin: 10px 0 0; min-height: 1em; font-size: 13px; color: #b0381a; }
.hint { margin: -4px 0 10px; font-size: 12px; color: #7a6c62; }
#loading { text-align: center; }

.field { display: block; margin-bottom: 12px; font-weight: 600; font-size: 13px; }
.field input, .field select, .field textarea { display: block; width: 100%; margin-top: 6px; padding: 9px 11px; font: inherit; font-weight: 400; border: 1px solid #d9cbbd; border-radius: 9px; background: #fff; }
.swatches { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.swatches button { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #d9cbbd; cursor: pointer; padding: 0; }
.swatches button.on { box-shadow: 0 0 0 3px #2b2320; }
.toggle, .tabs { display: flex; gap: 6px; margin-top: 6px; }
.toggle.wrap { flex-wrap: wrap; }
.toggle button, .tabs button { flex: 1; padding: 7px 8px; font-weight: 500; font-size: 13px; border: 1px solid #d9cbbd; border-radius: 9px; background: #fff; cursor: pointer; white-space: nowrap; }
.toggle button.on, .tabs button.on { background: #2b2320; color: #fff; border-color: #2b2320; }
.tabs { margin-bottom: 14px; }
.primary { width: 100%; margin-top: 6px; padding: 12px; font-weight: 700; font-size: 16px; color: #fff; background: #d9622b; border: 0; border-radius: 10px; cursor: pointer; }
.primary:disabled { background: #b9aa9e; cursor: default; }
.link { background: none; border: 0; color: #a3401b; font-weight: 600; cursor: pointer; padding: 4px; }
.wide { width: 100%; margin-top: 8px; }
.danger { color: #fff; background: #b0381a; border: 0; border-radius: 8px; padding: 7px 10px; cursor: pointer; font-weight: 600; }
.join-head, .modal-head { display: flex; align-items: center; gap: 10px; }
.join-head h1 { flex: 1; }
.modal-head h2 { flex: 1; }

.badge { display: inline-block; margin-right: 5px; padding: 0 6px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.4px; line-height: 16px; vertical-align: 1px; color: #fff; text-transform: uppercase; }
.badge.vip { background: #e7a500; }
.badge.admin { background: #d9622b; }
.badge:empty { display: none; }

/* HUD */
#card { position: fixed; left: 12px; top: 12px; width: 220px; }
.card-name b { font-size: 15px; }
.card-title { display: flex; justify-content: space-between; color: #6b5d54; font-size: 12px; margin: 2px 0 4px; }
.bar { height: 7px; border-radius: 4px; background: rgba(43, 35, 32, 0.12); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 4px; transition: width 0.4s; }
.bar.xp i { background: #7b61d6; }
.bar.hunger i { background: #e08a2e; }
.bar.thirst i { background: #3a9ad9; }
.bar.low i { background: #c93a2a; }
.coins { display: flex; align-items: center; gap: 5px; margin: 7px 0 5px; font-size: 13px; }
.coin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe68a, #e7a500 70%); box-shadow: inset 0 0 0 1.5px #b77f00; }
.need { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 6px; font-size: 12px; margin-top: 3px; }
#topright { position: fixed; right: 12px; top: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#count { font-weight: 600; }
#menu { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
#menu button { padding: 6px 10px; border: 0; border-radius: 10px; background: rgba(255, 250, 242, 0.92); box-shadow: 0 2px 10px rgba(40, 30, 20, 0.15); font-weight: 600; font-size: 13px; cursor: pointer; }
#menu button:hover { background: #fff; }
#help { position: fixed; left: 12px; top: 176px; }
#prompt { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); padding: 8px 14px; border-radius: 12px; background: rgba(30, 24, 20, 0.72); color: #fff; font-weight: 600; display: flex; gap: 8px; align-items: center; pointer-events: none; }
#prompt kbd { background: #fff; color: #2b2320; }

#chatbox { position: fixed; left: 12px; bottom: 12px; width: min(430px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 6px; }
#log { max-height: 30vh; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 4px; scrollbar-width: thin; }
#log div { align-self: flex-start; background: rgba(30, 24, 20, 0.58); color: #fff; padding: 3px 9px; border-radius: 8px; font-size: 13px; transition: opacity 1s; overflow-wrap: anywhere; }
#log div.old { opacity: 0; }
#chatbox.open #log div.old, #chatbox:hover #log div.old { opacity: 1; }
#chatbox.open #log { background: rgba(30, 24, 20, 0.2); border-radius: 10px; padding: 6px; }
#log b { color: #ffd59e; }
#log .dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); vertical-align: 1px; }
#log .sys { background: rgba(30, 24, 20, 0.38); font-style: italic; }
#chat { width: 100%; padding: 9px 12px; font: inherit; border: 0; border-radius: 10px; background: rgba(255, 250, 242, 0.75); box-shadow: 0 2px 10px rgba(40, 30, 20, 0.15); }
#chat:focus { background: rgba(255, 250, 242, 0.97); outline: 2px solid #d9622b; }

#toasts { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 20; pointer-events: none; }
.toast { padding: 8px 14px; border-radius: 10px; background: rgba(30, 24, 20, 0.85); color: #fff; font-weight: 600; font-size: 14px; animation: toast 4s forwards; }
.toast.error { background: rgba(176, 56, 26, 0.92); }
@keyframes toast { 0% { opacity: 0; transform: translateY(-6px); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Shop and admin */
.modal { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 18px 20px; z-index: 5; }
.modal .lede { margin-top: 6px; }
#shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.item { padding: 10px; border-radius: 10px; background: #fff; border: 1px solid #eadfd3; display: flex; flex-direction: column; gap: 6px; }
.item.worn { border-color: #d9622b; box-shadow: inset 0 0 0 1px #d9622b; }
.item b { font-size: 14px; }
.item .price { font-size: 12px; color: #6b5d54; display: flex; align-items: center; gap: 4px; }
.item button { padding: 6px; border-radius: 8px; border: 1px solid #d9cbbd; background: #fff; font-weight: 600; font-size: 12px; cursor: pointer; }
.item button.buy { background: #d9622b; color: #fff; border-color: #d9622b; }
.item button:disabled { opacity: 0.5; cursor: default; }
#staff-search { display: block; width: 100%; margin: 0 0 10px; padding: 8px 10px; font: inherit; border: 1px solid #d9cbbd; border-radius: 9px; }
.user { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 9px 0; border-top: 1px solid #eadfd3; font-size: 13px; }
.user .who b { font-size: 14px; }
.user .meta { color: #6b5d54; font-size: 12px; }
.user .online { color: #2d8a3e; font-weight: 700; }
.user .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.user select, .user input { font: inherit; font-size: 12px; padding: 4px 6px; border-radius: 7px; border: 1px solid #d9cbbd; background: #fff; }
.user input { width: 70px; }
.user button { font-size: 12px; padding: 4px 8px; border-radius: 7px; border: 1px solid #d9cbbd; background: #fff; cursor: pointer; font-weight: 600; }

/* Editor */
#editor { position: fixed; right: 12px; top: 12px; bottom: 12px; width: 280px; padding: 12px 14px; overflow-y: auto; z-index: 6; font-size: 13px; }
.ed-head { display: flex; align-items: center; justify-content: space-between; font-size: 16px; margin-bottom: 8px; }
.ed-search { width: 100%; padding: 7px 10px; border: 1px solid #d9cbbd; border-radius: 8px; font: inherit; margin-bottom: 8px; }
.ed-cathead { margin: 8px 0 4px; font-weight: 700; color: #6b5d54; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
.ed-cat { display: flex; flex-wrap: wrap; gap: 4px; }
.ed-cathead { flex-basis: 100%; }
.ed-cat button { padding: 4px 8px; border-radius: 7px; border: 1px solid #d9cbbd; background: #fff; cursor: pointer; font-size: 12px; }
.ed-cat button.on { background: #2b2320; color: #fff; }
.ed-selected { margin-top: 10px; padding: 8px; border-radius: 10px; background: #fff3d6; }
.ed-selname { font-weight: 600; margin-bottom: 6px; }
.ed-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ed-tools button { padding: 5px; border-radius: 7px; border: 1px solid #d9cbbd; background: #fff; cursor: pointer; font-size: 12px; }
.ed-tools button.danger { background: #b0381a; color: #fff; border: 0; }
.ed-help { color: #6b5d54; font-size: 12px; line-height: 1.6; }

#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.label { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; will-change: transform; }
.label .name { font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); white-space: nowrap; }
.label .name .badge { text-shadow: none; }
.label.me .name { color: #ffd59e; }
.label .bubble { max-width: 220px; padding: 6px 10px; background: #fff; border-radius: 12px; font-size: 13px; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); overflow-wrap: anywhere; position: relative; color: #2b2320; }
.label .bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #fff; }
.label .bubble.emote { font-style: italic; font-weight: 600; }

/* ---- v3: menu counts, dialogs, social, staff, fishing, touch ---- */
.pill { padding: 6px 12px; border: 0; border-radius: 10px; background: rgba(255, 250, 242, 0.92); box-shadow: 0 2px 10px rgba(40, 30, 20, 0.15); font-weight: 700; cursor: pointer; }
#menu-toggle { display: none; }
#menu button[data-count]:not([data-count=""])::after { content: attr(data-count); margin-left: 6px; padding: 0 6px; border-radius: 8px; background: #d9622b; color: #fff; font-size: 11px; }
#clock { color: #6b5d54; font-weight: 500; }
.badge.mod { background: #3a8f5c; }
.hint.small { margin-top: 12px; }
.meta { color: #6b5d54; font-size: 12px; }
.section { margin: 14px 0 6px; font-weight: 700; font-size: 12px; color: #6b5d54; text-transform: uppercase; letter-spacing: 0.4px; }
.row { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-top: 1px solid #eadfd3; font-size: 13px; }
.row .grow { flex: 1; }
.row button, #logout-all, .card-actions button, .report button, .logrow button { padding: 5px 9px; border-radius: 8px; border: 1px solid #d9cbbd; background: #fff; cursor: pointer; font-weight: 600; font-size: 12px; }
.primary-sm { padding: 6px 11px; border-radius: 8px; border: 0 !important; background: #d9622b !important; color: #fff; font-weight: 700; cursor: pointer; font-size: 13px; }
.warn { color: #a3401b; }
.status { width: 9px; height: 9px; border-radius: 50%; background: #b9aa9e; flex: none; }
.status.on { background: #2d8a3e; }
.inline-form { display: flex; gap: 6px; margin: 8px 0; }
.inline-form input { flex: 1; min-width: 0; padding: 7px 10px; font: inherit; border: 1px solid #d9cbbd; border-radius: 8px; }
#pw-form { display: flex; flex-direction: column; gap: 6px; }
#pw-form input { padding: 8px 10px; font: inherit; border: 1px solid #d9cbbd; border-radius: 8px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 13px; margin-top: 8px; }
.stats div { padding: 8px; background: #fff; border-radius: 8px; border: 1px solid #eadfd3; }
.wide-modal { width: min(620px, calc(100vw - 32px)); }
.tag { display: inline-block; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 17px; }
.tag.warn { background: #fff0c9; color: #8a5a00; }
.tag.bad { background: #ffd9d0; color: #9a2a10; }
.report { padding: 10px 0; border-top: 1px solid #eadfd3; font-size: 13px; display: flex; flex-direction: column; gap: 5px; }
.report.done { opacity: 0.6; }
.report .actions { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.chatlog { background: #fff; border: 1px solid #eadfd3; border-radius: 8px; padding: 6px 8px; max-height: 120px; overflow-y: auto; font-size: 12px; }
.logrow { display: grid; grid-template-columns: 150px 1fr; gap: 8px; padding: 5px 0; border-top: 1px solid #eadfd3; font-size: 12px; }
#filter-words { width: 100%; font: 13px/1.5 ui-monospace, monospace; padding: 8px; border: 1px solid #d9cbbd; border-radius: 8px; }
.row-end { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 8px; }
.dialog { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, calc(100vw - 32px)); padding: 18px 20px; z-index: 12; }
.dialog h2 { margin-bottom: 10px; }
.field textarea { resize: vertical; }
code.temp { display: block; padding: 12px; margin: 8px 0; background: #2b2320; color: #ffd59e; border-radius: 8px; font: 700 20px/1 ui-monospace, monospace; text-align: center; letter-spacing: 1px; user-select: all; }

#playercard { position: fixed; z-index: 11; width: 240px; padding: 12px; font-size: 13px; }
.card-top { display: flex; align-items: center; gap: 2px; font-size: 15px; }
.card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 8px; }

#log .pm { background: rgba(92, 60, 140, 0.8); }
#log .pm b { color: #e5d1ff; }
#log .friend { background: rgba(45, 120, 70, 0.6); }

#fishing { position: fixed; left: 50%; bottom: 130px; transform: translateX(-50%); text-align: center; pointer-events: none; }
#fishing .fish-status { font: 800 26px/1.2 system-ui, sans-serif; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
#fishing .fish-hint { margin-top: 4px; display: inline-block; padding: 5px 12px; border-radius: 10px; background: rgba(30, 24, 20, 0.7); color: #fff; font-weight: 600; }
#fishing.bite .fish-status { color: #ffe066; animation: bite 0.25s infinite alternate; }
@keyframes bite { from { transform: scale(1); } to { transform: scale(1.15); } }

.ed-head { gap: 8px; }
.ed-head b { flex: 1; }
.ed-history button { padding: 3px 8px; border-radius: 7px; border: 1px solid #d9cbbd; background: #fff; cursor: pointer; font-size: 12px; margin-left: 4px; }
.ed-history button:disabled { opacity: 0.4; cursor: default; }

/* Touch controls */
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
#touch .stickzone { position: absolute; left: 0; bottom: 0; width: 45vw; height: 55vh; pointer-events: auto; touch-action: none; }
#touch .stick { position: absolute; left: 90px; top: calc(100% - 110px); width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); border: 2px solid rgba(255, 255, 255, 0.5); opacity: 0.55; }
#touch .stick.on { opacity: 1; }
#touch .knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255, 250, 242, 0.92); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
#touch .tbuttons { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(2, 64px); gap: 10px; pointer-events: auto; }
.tbtn { width: 64px; height: 64px; border-radius: 50%; border: 0; background: rgba(255, 250, 242, 0.88); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); font-weight: 700; font-size: 12px; touch-action: none; user-select: none; -webkit-user-select: none; }
.tbtn.big { background: #d9622b; color: #fff; }
.tbtn.action { grid-column: 1 / -1; width: auto; height: 46px; border-radius: 23px; background: #2b2320; color: #fff; padding: 0 14px; }
#emotebar { position: absolute; right: 12px; bottom: 170px; display: grid; grid-template-columns: repeat(3, auto); gap: 6px; padding: 8px; pointer-events: auto; }
#emotebar button { padding: 9px 10px; border-radius: 10px; border: 1px solid #d9cbbd; background: #fff; font-weight: 600; }

body.touch #help, body.touch #btn-help, body.touch #btn-edit { display: none !important; }
body.touch #prompt { display: none !important; }
body.touch #chatbox { bottom: 196px; top: auto; width: min(340px, calc(100vw - 24px)); }
body.touch #chatbox #chatform { display: none; }
body.touch #chatbox.open #chatform { display: block; }
body.touch #log { max-height: 18vh; }
body.touch #fishing { bottom: 190px; }

@media (max-width: 760px), (max-height: 520px) {
  #card { width: 170px; padding: 6px 9px; font-size: 12px; }
  #card .card-title { display: none; }
  #menu-toggle { display: block; }
  #menu { display: none; }
  #menu.open { display: flex; }
  .modal, .wide-modal { left: 8px; right: 8px; top: 8px; bottom: 8px; transform: none; width: auto; max-height: none; }
  #editor { width: 240px; }
  .logrow { grid-template-columns: 1fr; gap: 0; }
}

.user button.danger, .report button.danger { background: #b0381a; color: #fff; border: 0; }


/* ---- v4: settings, tutorial, connection banners ---- */
.slider { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 10px; margin: 6px 0; font-size: 13px; }
.slider input[type=range] { width: 100%; accent-color: #d9622b; }
.slider select { font: inherit; padding: 5px 8px; border: 1px solid #d9cbbd; border-radius: 8px; background: #fff; }
.check { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; }
.check input { accent-color: #d9622b; width: 16px; height: 16px; }
.row-start { display: flex; gap: 8px; flex-wrap: wrap; }
.row-start button { padding: 6px 10px; border-radius: 8px; border: 1px solid #d9cbbd; background: #fff; cursor: pointer; font-weight: 600; font-size: 13px; }
body.hide-names .label .name { display: none; }

#netbanner { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 12px; background: rgba(30, 24, 20, 0.88); color: #fff; font-weight: 600; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#updatebanner { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 14px; }

#tutorial { position: fixed; left: 12px; top: 162px; z-index: 8; width: min(340px, calc(100vw - 24px)); padding: 12px 16px; border: 2px solid #ffd24a; }
#tutorial .tut-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #6b5d54; }
#tutorial .tut-title { font-size: 18px; font-weight: 800; margin: 2px 0 4px; }
#tutorial .tut-text { font-size: 14px; line-height: 1.45; }
#tutorial .tut-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; min-height: 28px; }
#tutorial .tut-distance { font-weight: 700; color: #a3401b; font-size: 13px; }
#tutorial.done { border-color: #2d8a3e; }
#tutorial.done .tut-title::after { content: "  ✓"; color: #2d8a3e; }
body.touch #tutorial { top: 136px; bottom: auto; left: 50%; transform: translateX(-50%); padding: 9px 12px; }
@media (max-width: 760px) { #tutorial { top: 136px; left: 50%; transform: translateX(-50%); } #tutorial .tut-title { font-size: 16px; } #tutorial .tut-text { font-size: 13px; } }