:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f2f4e9;
  background: #0c1717;
  --ink: #f2f4e9;
  --muted: #bdc9bd;
  --lime: #d2e69c;
  --amber: #efc675;
  --panel: rgba(14, 31, 30, .83);
  --line: rgba(204, 225, 190, .24);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body { margin: 0; overflow: hidden; background: #0c1717; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
#app { width: 100%; height: 100%; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; outline: 0; }

.intro { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; padding: clamp(10px, 3vw, 34px); background: radial-gradient(circle at 50% 28%, rgba(80, 117, 91, .88), rgba(7, 20, 21, .97) 68%); }
.intro-window { position: relative; width: min(900px, 94vw); padding: 18px; border: 1px solid rgba(205, 228, 190, .28); border-radius: 28px; background: linear-gradient(145deg, rgba(23, 48, 45, .96), rgba(8, 26, 26, .97)); box-shadow: 0 38px 100px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .06); }
.intro-viewport { position: relative; overflow: hidden; border-radius: 20px; background: #698f70; }
.intro-track { display: flex; transition: transform .55s cubic-bezier(.22, .8, .25, 1); }
.intro-slide { flex: 0 0 100%; margin: 0; padding: 0; position: relative; aspect-ratio: 16 / 8.3; }
.intro-shot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.intro-viewport .intro-track { position: relative; z-index: 1; }
.intro-symbols { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 13px; padding: 9px 18px; border: 1px solid rgba(241, 239, 205, .24); border-radius: 999px; background: rgba(8, 24, 25, .72); color: #f4e3b1; box-shadow: 0 9px 25px rgba(0, 0, 0, .2); backdrop-filter: blur(9px); }
.intro-symbols b { display: grid; place-items: center; min-width: 23px; font-size: 20px; }
.intro-symbols span { color: #b7c8b1; font-size: 18px; }
.intro-controls { display: flex; align-items: center; justify-content: center; min-height: 74px; padding-top: 12px; }
.intro-dots { display: flex; gap: 9px; }
.intro-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #72877c; cursor: pointer; transition: width .22s, border-radius .22s, background .22s; }
.intro-dot.active { width: 30px; border-radius: 999px; background: #d6e9a5; }
.intro-next, .intro-skip { border: 1px solid rgba(213, 233, 196, .2); color: #e9f1e3; cursor: pointer; }
.intro-next { position: absolute; right: 22px; bottom: 16px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(145deg, #dbeaab, #9bc371); color: #183026; font-size: 30px; font-weight: 850; box-shadow: 0 12px 26px rgba(117, 157, 82, .2); }
.intro-skip { position: absolute; z-index: 2; top: 28px; right: 28px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(8, 25, 25, .76); font-size: 23px; backdrop-filter: blur(8px); }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle at 50% 42%, transparent 48%, rgba(4, 12, 12, .14) 100%), linear-gradient(180deg, rgba(255, 240, 192, .025), rgba(4, 13, 14, .05));
  mix-blend-mode: multiply;
}

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  padding: 34px;
  background: radial-gradient(circle at 50% 42%, rgba(79, 116, 82, .45), transparent 23%), radial-gradient(circle at 50% 16%, #345d52 0, #163234 42%, #091819 100%);
  z-index: 6;
  overflow: hidden;
}

.overlay::before, .overlay::after { content: ""; position: absolute; pointer-events: none; }
.overlay::before { inset: auto -5vw -14vh; height: 49vh; opacity: .32; background: linear-gradient(155deg, transparent 48%, #071514 49%) 0 0 / 10vw 100%, linear-gradient(205deg, transparent 48%, #0b1d1b 49%) 5vw 0 / 12vw 100%; }
.overlay::after { inset: 0; background: radial-gradient(circle at 50% 48%, transparent 8%, rgba(2, 8, 9, .42) 84%); }
.overlay > * { position: relative; z-index: 1; }
.brand { text-align: center; margin-bottom: 10px; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .28)); }
.brand span { display: block; color: var(--amber); font-size: 34px; animation: title-glint 2.8s ease-in-out infinite; }
.brand h1 { font: 850 clamp(42px, 7vw, 72px)/.78 Georgia, serif; letter-spacing: .09em; margin: 0; color: #f5e5bc; text-shadow: 0 4px 0 #59472d, 0 15px 38px #000; }
.brand p { color: #cad8c6; letter-spacing: .22em; font-size: 11px; text-transform: uppercase; }
.overlay label { width: min(360px, 90vw); font-size: 11px; letter-spacing: .12em; color: #c4d0c1; text-transform: uppercase; }
.overlay small { float: right; letter-spacing: 0; color: #91a69a; text-transform: none; }
.overlay input { display: block; width: 100%; padding: 14px 15px; margin-top: 7px; border: 1px solid rgba(188, 213, 182, .35); border-radius: 12px; background: rgba(12, 34, 34, .78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 30px rgba(0, 0, 0, .12); color: #fff; font-size: 15px; outline: 0; transition: border-color .2s, box-shadow .2s; text-transform: none; }
.overlay input:focus { border-color: #d4e7a2; box-shadow: 0 0 0 3px rgba(211, 232, 158, .11), 0 12px 30px rgba(0, 0, 0, .12); }
.primary, #tutorial button { width: min(360px, 90vw); padding: 15px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #ddecaa, #9ac270); box-shadow: 0 10px 30px rgba(124, 163, 83, .2), inset 0 1px 0 rgba(255, 255, 255, .45); color: #1b2d20; font-weight: 850; font-size: 14px; cursor: pointer; transition: transform .16s, filter .16s; }
.primary:hover, #tutorial button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.primary:active, #tutorial button:active { transform: translateY(1px) scale(.99); }
.tips, #lobby-error { font-size: 11px; color: #aebcaf; text-align: center; max-width: 380px; min-height: 18px; }

#hud { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.topbar { display: grid; grid-template-columns: 1fr auto auto; align-items: start; gap: 10px; padding: calc(env(safe-area-inset-top) + 16px) 20px 0; font-size: clamp(12px, .84vw, 16px); font-weight: 850; letter-spacing: .1em; text-shadow: 0 1px 3px #000; }
.topbar > * { min-width: 116px; text-align: center; background: linear-gradient(180deg, rgba(27, 53, 49, .92), rgba(9, 27, 27, .86)); border: 1px solid rgba(223, 237, 203, .27); border-radius: 14px; padding: 11px 15px; box-shadow: 0 8px 22px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(12px); }
.topbar #room-badge { justify-self: start; }
.topbar #day-label { min-width: 140px; color: #f7e9bd; }
.topbar #day-label { display: flex; align-items: center; justify-content: center; gap: 9px; }
.day-clock { --clock-angle: 0deg; position: relative; flex: none; width: 23px; height: 23px; border-radius: 50%; background: conic-gradient(#e9c877 0 var(--clock-angle), #567878 var(--clock-angle) 360deg); box-shadow: 0 0 0 2px #e6e4ca; }
.day-clock::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #1c3837; }
#activity-status { position: absolute; top: calc(env(safe-area-inset-top) + 72px); left: 50%; transform: translateX(-50%); padding: 6px 13px; border-radius: 999px; color: #e9edc5; background: rgba(16, 45, 42, .88); font-size: 11px; font-weight: 800; white-space: nowrap; }
.topbar .top-actions { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.topbar .top-actions { pointer-events: auto; }
.top-actions > * { display: grid; place-items: center; min-height: 31px; border: 1px solid var(--line); border-radius: 999px; background: linear-gradient(180deg, rgba(22, 46, 43, .9), rgba(10, 28, 27, .82)); box-shadow: 0 7px 22px rgba(0, 0, 0, .17), inset 0 1px 0 rgba(255, 255, 255, .06); backdrop-filter: blur(12px); }
.topbar #connection { min-width: 82px; padding: 0 11px; color: #b9e79c; }
#audio-toggle { width: 33px; padding: 0; color: #f3e4b7; font-size: 15px; cursor: pointer; }
#audio-toggle.muted { color: #83928b; }
#settings-toggle { width: 33px; padding: 0; color: #f3e4b7; font-size: 17px; cursor: pointer; }
#panel[data-kind="settings"] #panel-content { display: grid; grid-template-columns: 1fr; gap: 13px; padding: 10px 8px 16px; }
.settings-row { display: grid; grid-template-columns: 44px minmax(82px, 120px) 1fr 52px; align-items: center; gap: 12px; min-height: 53px; padding: 8px 12px; border: 1px solid #d4b287; border-radius: 12px; background: #fff1d2; }
.settings-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 10px; background: #517a6a; color: #f5e7c6; font-size: 24px; }
.settings-row strong { font-size: 14px; }
.settings-row input { width: 100%; accent-color: #628c62; touch-action: none; }
.settings-row output { text-align: right; font-weight: 800; color: #55735c; }
@media (max-width: 600px) { .settings-row { grid-template-columns: 34px 77px 1fr 34px; gap: 7px; padding: 6px; } .settings-icon { width: 32px; height: 32px; font-size: 19px; } .settings-row strong, .settings-row output { font-size: 11px; } }
#wave-status { position: absolute; top: calc(env(safe-area-inset-top) + 181px); left: 50%; transform: translateX(-50%); min-width: 86px; padding: 8px 15px; border: 1px solid rgba(244, 213, 138, .34); border-radius: 999px; background: rgba(25, 37, 34, .88); box-shadow: 0 10px 28px rgba(0, 0, 0, .2); color: #f5d38b; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-align: center; backdrop-filter: blur(12px); }
#wave-status.warning { animation: wave-warning 1.25s ease-in-out infinite; }
#wave-status.active { border-color: rgba(235, 103, 83, .5); background: rgba(87, 28, 25, .82); color: #ffad93; animation: wave-active .8s ease-in-out infinite; }
#wave-status.siege { z-index: 1; border-color: rgba(255, 108, 92, .8); background: rgba(91, 25, 36, .94); color: #ffe3c0; box-shadow: 0 0 28px rgba(219, 56, 51, .56), 0 10px 28px rgba(0, 0, 0, .28); }
#home-compass { position: absolute; top: calc(env(safe-area-inset-top) + 79px); left: 20px; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 5px 5px 5px 12px; border: 1px solid rgba(231, 217, 162, .45); border-radius: 999px; background: rgba(14, 37, 34, .89); box-shadow: 0 9px 25px rgba(0, 0, 0, .25); color: #f0e7bf; font-size: 13px; font-weight: 900; backdrop-filter: blur(10px); pointer-events: auto; }
.home-compass-icon { font-size: 20px; line-height: 1; }
#home-arrow { display: inline-block; color: #e6c576; font-size: 15px; transition: transform .15s ease-out; }
#home-distance { min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
#home-recall { width: 33px; height: 33px; border: 1px solid rgba(225, 239, 198, .45); border-radius: 50%; background: #9eba82; color: #16342c; font-size: 22px; line-height: 1; cursor: pointer; }
#home-recall:disabled { opacity: .48; filter: grayscale(.7); cursor: not-allowed; }
#vitals { position: absolute; top: calc(env(safe-area-inset-top) + 15px); left: 50%; transform: translateX(-50%); display: flex; align-items: flex-start; gap: clamp(9px, 1vw, 18px); padding: 0; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .28)); }
.vital-row { position: relative; display: grid; justify-items: center; gap: 5px; width: clamp(94px, 5.7vw, 118px); transition: transform .2s; }
.vital-row[data-vital="health"] { order: 3; width: clamp(125px, 7vw, 150px); margin-top: -4px; }
.vital-row[data-vital="hunger"] { order: 2; margin-top: 21px; }
.vital-row[data-vital="thirst"] { order: 4; margin-top: 21px; }
.vital-row[data-vital="warmth"] { order: 1; margin-top: 7px; }
.vital-row[data-vital="energy"] { order: 5; margin-top: 7px; }
.vital-row.critical { animation: vital-alert 1.05s ease-in-out infinite; }
.vital-orb { position: relative; display: grid; place-items: center; width: clamp(86px, 5.1vw, 108px); height: clamp(86px, 5.1vw, 108px); border-radius: 50%; background: conic-gradient(var(--vital-color) calc(var(--vital-value) * 1%), rgba(11, 26, 27, .72) 0); box-shadow: 0 0 0 3px rgba(249, 242, 213, .9), 0 0 0 7px rgba(22, 44, 40, .76), inset 0 0 14px rgba(0, 0, 0, .34); }
.vital-orb::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .16), transparent 35%), #17322f; border: 1px solid rgba(255, 255, 255, .14); }
.vital-row[data-vital="health"] .vital-orb { width: clamp(112px, 6.6vw, 135px); height: clamp(112px, 6.6vw, 135px); }
.vital-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 58%; height: 58%; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3)); }
.vital-icon svg { display: block; width: 100%; height: 100%; }
.vital-row[data-vital="health"] .vital-icon { width: 62%; height: 62%; }
.vital-name { padding: 3px 9px; border-radius: 999px; background: rgba(10, 29, 28, .84); color: #f1ead4; font-size: clamp(9px, .56vw, 11px); font-weight: 900; letter-spacing: .11em; box-shadow: 0 3px 8px rgba(0, 0, 0, .18); }
.vital-value { position: absolute; z-index: 2; right: -6px; bottom: -5px; min-width: 36px; padding: 5px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: #f2e8c8; color: #213b35; font-size: clamp(12px, .8vw, 16px); font-weight: 950; text-align: center; }
#team { position: absolute; top: calc(env(safe-area-inset-top) + 62px); right: 18px; display: grid; gap: 5px; text-align: right; font-size: 10px; text-shadow: 0 1px 2px #000; }
#notice { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); min-width: min(360px, 80vw); padding: 0 16px; color: #fff4cf; font-weight: 800; font-size: 14px; letter-spacing: .02em; text-align: center; text-shadow: 0 2px 8px #000; transition: opacity .3s; }

.actionbar { pointer-events: auto; position: absolute; bottom: calc(env(safe-area-inset-bottom) + 18px); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; padding: 9px; border: 2px solid rgba(237, 227, 190, .76); border-radius: 17px; background: linear-gradient(180deg, rgba(220, 232, 217, .9), rgba(135, 178, 170, .86)); box-shadow: 0 18px 38px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .5); backdrop-filter: blur(14px); }
.actionbar button, .context-action, .reclaim-action, .upgrade-action, .utilitybar button, #mobile-action { position: relative; display: grid; place-items: center; border: 2px solid rgba(231, 239, 211, .58); border-radius: 12px; width: clamp(84px, 5.2vw, 100px); height: clamp(84px, 5.2vw, 100px); background: linear-gradient(145deg, rgba(31, 66, 60, .97), rgba(13, 39, 38, .97)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 7px 16px rgba(0, 0, 0, .2); color: #f7edcc; font-size: 22px; cursor: pointer; transition: transform .15s, background .15s, border-color .15s, box-shadow .15s; }
.actionbar button:hover, .context-action:hover, .utilitybar button:hover { transform: translateY(-4px); background: linear-gradient(145deg, #4b806b, #214a42); border-color: #eff6c8; }
.actionbar button:active, .context-action:active, .utilitybar button:active { transform: translateY(0) scale(.95); }
.hotbar-slot.active { border-color: #eff7b5; background: linear-gradient(145deg, #4c806b, #214b42); box-shadow: 0 0 0 3px rgba(218, 238, 150, .35), inset 0 1px 0 rgba(255, 255, 255, .18), 0 9px 20px rgba(0, 0, 0, .26); }
.slot-key { position: absolute; top: 4px; left: 7px; z-index: 2; color: rgba(244, 239, 211, .68); font-size: 11px; font-weight: 900; }
.slot-count { position: absolute; right: 4px; bottom: 3px; z-index: 2; min-width: 24px; padding: 3px 6px; border-radius: 999px; background: #f1e8c8; color: #203a34; font-size: 12px; font-weight: 950; }
.slot-condition { position: absolute; left: 7px; right: 7px; bottom: 3px; height: 4px; border-radius: 99px; background: linear-gradient(to right, #bde494 var(--condition), #734b45 var(--condition)); }
.hotbar-slot:has(.slot-condition) .slot-count { bottom: 10px; }
.slot-empty { color: rgba(218, 230, 208, .24); font-size: 25px; font-weight: 300; }
.item-art.hotbar-icon, .item-art.loadout-icon { width: 64px; height: 64px; border: 0; background: transparent; box-shadow: none; }
.item-art.hotbar-icon svg, .item-art.loadout-icon svg { width: 60px; height: 60px; }
.context-action { pointer-events: auto; position: absolute; left: 20px; bottom: calc(env(safe-area-inset-bottom) + 20px); border-radius: 50%; }
.reclaim-action { pointer-events: auto; position: absolute; left: 122px; bottom: calc(env(safe-area-inset-bottom) + 20px); border-radius: 50%; }
.reclaim-action[hidden] { display: none; }
.upgrade-action { pointer-events: auto; position: absolute; left: 224px; bottom: calc(env(safe-area-inset-bottom) + 20px); border-radius: 50%; }
.upgrade-action[hidden] { display: none; }
.context-action small { position: absolute; bottom: -19px; padding: 3px 7px; border-radius: 999px; background: rgba(11, 30, 29, .86); color: #f5edcf; font-size: 8px; font-weight: 900; white-space: nowrap; }
.action-glyph { font-size: 29px; }
.utilitybar { pointer-events: auto; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; padding: 7px; border: 1px solid rgba(226, 236, 208, .3); border-radius: 19px; background: rgba(10, 29, 28, .8); box-shadow: 0 14px 32px rgba(0, 0, 0, .22); backdrop-filter: blur(12px); }
.utilitybar button { width: 68px; height: 68px; overflow: hidden; border-width: 1px; border-radius: 15px; background: radial-gradient(circle at 34% 22%, rgba(240, 225, 172, .17), transparent 58%), linear-gradient(145deg, #335348, #17302d); }
.utilitybar button[data-action="craft"] { background: radial-gradient(circle at 34% 22%, rgba(236, 189, 125, .2), transparent 58%), linear-gradient(145deg, #4d4938, #26332d); }
.utilitybar button[data-action="inventory"] { background: radial-gradient(circle at 34% 22%, rgba(198, 219, 154, .17), transparent 58%), linear-gradient(145deg, #354f44, #1b322e); }
.quick-art { display: grid; place-items: center; width: 57px; height: 57px; }
.quick-art svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 5px 3px rgba(0, 0, 0, .32)); }

#panel { position: fixed; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(980px, calc(100vw - 40px)); max-height: min(1000px, calc(100vh - 48px)); overflow: auto; padding: 20px; border: 4px solid #e6c68a; border-radius: 10px 10px 22px 22px; background: linear-gradient(180deg, #fff0c7, #f2d69f); color: #503b29; box-shadow: 0 34px 85px rgba(0, 0, 0, .38), inset 0 0 0 2px rgba(255, 255, 255, .5); }
#panel::before, #panel::after { content: ""; position: fixed; pointer-events: none; background: #d4aa68; opacity: .45; }
#panel::before { inset: 7px 18px auto; height: 2px; }
#panel::after { inset: auto 18px 7px; height: 2px; }
.panel-head { position: sticky; top: -18px; z-index: 3; display: flex; align-items: center; justify-content: space-between; margin: -18px -18px 14px; padding: 13px 16px; border-bottom: 3px solid #d39a56; background: linear-gradient(90deg, #e56559, #f07d62); box-shadow: 0 6px 0 rgba(150, 92, 50, .13); }
.panel-head h2 { margin: 0; font: 900 24px Georgia, serif; letter-spacing: .04em; color: #fff7de; text-shadow: 0 2px 0 rgba(116, 53, 40, .28); }
.panel-head button { width: 40px; height: 40px; border: 3px solid #fff0ca; border-radius: 50%; background: #ed655d; color: #fff; font-size: 25px; font-weight: 900; cursor: pointer; box-shadow: 0 3px 0 rgba(128, 57, 44, .24); }
.card { padding: 10px; border: 2px solid #d7ae70; border-radius: 8px; display: flex; justify-content: space-between; gap: 9px; align-items: center; background: linear-gradient(145deg, #ffe9bc, #eac589); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 3px 0 rgba(133, 89, 44, .12); }
.card strong { color: #553a24; }
.card small { color: #7a5b3b; }
.card button { border: 0; border-radius: 8px; padding: 8px 11px; background: #bedb85; color: #17251b; font-weight: 800; cursor: pointer; }
.card button:disabled { opacity: .35; }
.visual-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 9px; min-height: 78px; }
.visual-card.selected { border-color: #93b545; box-shadow: 0 0 0 3px #d7ef78, inset 0 1px 0 rgba(255, 255, 255, .55), 0 3px 0 rgba(133, 89, 44, .12); }
.item-art { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border: 1px solid color-mix(in srgb, var(--art-accent) 42%, #8b7453); border-radius: 11px; background: radial-gradient(circle at 29% 19%, rgba(255, 255, 255, .88), transparent 42%), radial-gradient(circle at 70% 75%, color-mix(in srgb, var(--art-accent) 32%, transparent), transparent 72%), linear-gradient(145deg, #fff4d7, #dec399); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .84), inset 0 -3px 7px rgba(107, 69, 40, .12), 0 4px 9px rgba(91, 59, 32, .14); }
.item-art svg { width: 45px; height: 45px; overflow: visible; filter: drop-shadow(0 5px 3px rgba(35, 35, 26, .24)); }
.item-art.mini { width: 21px; height: 21px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; }
.item-art.mini svg { width: 20px; height: 20px; filter: none; }
.card-copy { min-width: 0; }
.card-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.card-copy small { display: block; margin-top: 2px; font-size: 10px; }
.material-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.material-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 2px; border: 1px solid #c39355; border-radius: 6px; background: rgba(255, 243, 207, .72); color: #5b4028; font-size: 9px; font-weight: 900; }
.material-chip.missing { border-color: #d56455; color: #a93630; background: rgba(255, 174, 139, .42); }
.visual-card > button { min-width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 18px; }
.inventory-count { position: absolute; top: 5px; right: 5px; min-width: 26px; padding: 3px 5px; border: 1px solid rgba(250, 238, 202, .68); border-radius: 8px; background: linear-gradient(145deg, #29453c, #172d2b); box-shadow: 0 3px 6px rgba(69, 52, 32, .22); color: #f8ecc8; font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
#panel-content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
#panel[data-kind="inventory"] #panel-content { display: block; }
.inventory-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
#panel[data-kind="inventory"] #panel-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.inventory-section { min-width: 0; padding: 14px; border: 2px solid rgba(181, 126, 67, .54); border-radius: 13px; background: rgba(255, 243, 210, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 4px 12px rgba(104, 66, 31, .08); }
.inventory-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 11px; color: #604125; }
.inventory-section-heading strong { font: 900 20px Georgia, serif; }
.inventory-capacity { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.inventory-meter { display: block; width: 100%; height: 9px; margin: -3px 0 12px; accent-color: #8cac56; }
.craft-shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.craft-tile { display: grid; justify-items: center; align-content: center; gap: 4px; min-width: 0; min-height: 128px; padding: 7px 4px; border: 1px solid #cfad7d; border-radius: 13px; background: radial-gradient(circle at 50% 24%, #fff8df, transparent 63%), linear-gradient(150deg, #f9e7bf, #e2c292); box-shadow: inset 0 1px 0 #fff9e3, 0 4px 10px rgba(126, 78, 32, .12); cursor: pointer; transition: transform .15s, border-color .15s; }
.craft-tile:not(:disabled):hover { transform: translateY(-3px); border-color: #7fa249; }
.craft-tile:disabled { opacity: .58; cursor: not-allowed; }
.craft-tile .item-art { width: 61px; height: 61px; border-radius: 12px; }
.craft-tile .item-art svg { width: 53px; height: 53px; }
.craft-tile-name { max-width: 100%; overflow: hidden; color: #62472e; font-size: 10px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.craft-tile .material-list { justify-content: center; margin: 0; gap: 3px; }
.craft-tile .material-chip { padding: 1px 4px 1px 0; font-size: 10px; }
.craft-tile .item-art.mini { width: 18px; height: 18px; }
.craft-tile .item-art.mini svg { width: 17px; height: 17px; }
#panel[data-kind="craft"] { width: min(760px, calc(100vw - 28px)); max-height: min(720px, calc(100dvh - 28px)); }
#panel[data-kind="craft"] #panel-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.craft-categories { grid-column: 1 / -1; display: flex; gap: 7px; overflow-x: auto; padding: 3px 2px 11px; scrollbar-width: thin; }
.craft-category { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 6px 12px 6px 8px; border: 1px solid rgba(114, 104, 68, .36); border-radius: 12px; background: rgba(88, 113, 83, .11); color: #553f2f; font: 800 12px system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.craft-category .item-art.mini { width: 25px; height: 25px; }
.craft-category .item-art.mini svg { width: 24px; height: 24px; }
.craft-category.selected { border-color: #8ba666; background: #d6e6ac; box-shadow: 0 0 0 2px rgba(155, 183, 110, .19); }
.craft-category:focus-visible { outline: 3px solid #84a464; outline-offset: 2px; }
.inventory-empty { min-height: 90px; border: 2px dashed rgba(166, 113, 57, .34); border-radius: 8px; background: rgba(235, 203, 153, .32); box-shadow: inset 0 2px 9px rgba(133, 89, 44, .06); }
#panel[data-kind="inventory"] .visual-card { position: relative; display: grid; grid-template-columns: 1fr; justify-items: center; align-content: center; gap: 6px; min-height: 112px; padding: 9px 5px; border: 1px solid #d4b287; border-radius: 13px; background: radial-gradient(circle at 36% 14%, #fff9e5, transparent 55%), linear-gradient(145deg, #f9ebcd, #e9d0a5); box-shadow: inset 0 1px 0 #fff8e4, 0 4px 11px rgba(104, 66, 31, .11); text-align: center; }
#panel[data-kind="inventory"] .visual-card { cursor: grab; transition: transform .16s, opacity .16s, border-color .16s, box-shadow .16s; }
#panel[data-kind="inventory"] .visual-card:active { cursor: grabbing; }
#panel[data-kind="inventory"] .visual-card.equip-source-active { border-color: #84a743; box-shadow: 0 0 0 3px rgba(189, 224, 111, .58), inset 0 1px 0 rgba(255, 255, 255, .55); }
#panel[data-kind="inventory"] .visual-card.dragging { opacity: .48; transform: scale(.96); }
#panel[data-kind="inventory"] .visual-card .item-art { width: 68px; height: 68px; border-radius: 15px; }
#panel[data-kind="inventory"] .visual-card .item-art svg { width: 60px; height: 60px; }
#panel[data-kind="inventory"] .card-copy strong { white-space: normal; }
#panel[data-kind="inventory"] .visual-card > button { position: absolute; right: 4px; bottom: 4px; min-width: 26px; width: 26px; height: 26px; font-size: 14px; }
.loadout-editor { margin-top: 2px; padding: 13px; border: 2px solid #c99555; border-radius: 10px; background: rgba(220, 177, 105, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48); }
.loadout-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: #5a3d25; }
.loadout-heading strong { font: 900 16px Georgia, serif; }
.loadout-heading small { color: #7f6040; font-size: 10px; font-weight: 750; }
.loadout-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.loadout-slot { position: relative; display: grid; place-items: center; min-width: 0; height: 76px; border: 2px dashed rgba(112, 75, 40, .45); border-radius: 10px; background: rgba(255, 237, 193, .55); cursor: pointer; outline: 0; transition: transform .15s, border-color .15s, background .15s; }
.loadout-slot.occupied { border-style: solid; background: linear-gradient(145deg, #fbe8b7, #d9b276); }
.loadout-slot.active { border-color: #799b42; box-shadow: 0 0 0 3px rgba(196, 224, 113, .55); }
.loadout-slot.drop-ready { transform: translateY(-4px) scale(1.03); border-color: #6e983b; background: #edf1b2; }
.loadout-slot .slot-key { color: rgba(80, 54, 32, .65); }
.loadout-slot .slot-count { background: #283f34; color: #f7eac4; }
.loadout-slot .slot-empty { color: rgba(99, 67, 39, .25); }
#panel[data-kind="build"] .ghost { grid-column: 1 / -1; margin: 0 0 3px; }
#panel[data-kind="build"] .panel-place { grid-column: 1 / -1; }
.panel-place { position: sticky; bottom: 0; width: 100%; margin-top: 12px; }
.panel-place:disabled { filter: grayscale(.75); opacity: .45; cursor: not-allowed; }
.ghost { color: #b9c8ba; font-size: 12px; line-height: 1.45; }
.build-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.build-grid button { padding: 13px 8px; background: rgba(48, 81, 69, .62); color: #edf5e8; border: 1px solid rgba(163, 200, 151, .3); border-radius: 10px; font-weight: 700; cursor: pointer; }
.build-grid button.selected { background: linear-gradient(135deg, #a9ce79, #799e5b); color: #122018; box-shadow: 0 8px 24px rgba(120, 160, 85, .16); }

#tutorial { position: fixed; z-index: 8; inset: 0; background: rgba(4, 12, 13, .8); display: grid; place-items: center; padding: 24px; backdrop-filter: blur(9px); }
#tutorial > div { max-width: 380px; background: linear-gradient(145deg, #24443e, #122d2d); border: 1px solid rgba(194, 220, 179, .35); padding: 24px; border-radius: 18px; text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); }
#tutorial b { font: 800 28px Georgia, serif; color: #f5dfaa; }
#tutorial p { font-size: 14px; line-height: 1.55; color: #d6e0d2; }
#tutorial button { width: auto; padding: 11px 26px; }
.death-screen { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: 22px; background: radial-gradient(circle at 50% 28%, rgba(65, 75, 62, .48), rgba(4, 15, 19, .86) 70%); backdrop-filter: blur(12px) saturate(.7); }
.death-card { width: min(680px, 100%); padding: clamp(24px, 5vw, 42px); border: 1px solid rgba(222, 219, 172, .42); border-radius: 25px; background: radial-gradient(circle at 50% 0, rgba(176, 156, 103, .19), transparent 44%), linear-gradient(150deg, #203a35, #101f22 80%); box-shadow: 0 40px 100px rgba(0, 0, 0, .54), inset 0 1px rgba(245, 239, 203, .17); color: #edf0db; text-align: center; }
.death-emblem { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px; border: 1px solid rgba(223, 206, 148, .48); border-radius: 50%; background: rgba(220, 189, 122, .14); color: #e8d5a0; font-size: 33px; }
.death-eyebrow { margin: 0; color: #c5d6a2; font-size: 11px; font-weight: 900; letter-spacing: .28em; }
.death-title { margin: 8px 0 4px; color: #fff5d3; font: 800 clamp(30px, 5vw, 45px) Georgia, serif; }
.death-subtitle { margin: 0 0 24px; color: #b9c8ba; font-size: 14px; }
.death-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.death-stat { display: grid; gap: 7px; min-width: 0; padding: 16px 8px; border: 1px solid rgba(211, 220, 178, .19); border-radius: 13px; background: rgba(11, 32, 32, .55); }
.death-stat-label { color: #a9bfad; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.death-stat-value { color: #f5e6ac; font-size: clamp(20px, 4vw, 30px); font-variant-numeric: tabular-nums; }
.death-collection-heading { margin: 23px 0 11px; color: #b9cba8; font-size: 11px; letter-spacing: .13em; text-align: left; }
.death-collection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 220px; overflow-y: auto; text-align: left; }
.death-collection p { color: #b8c6bb; }
.death-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 10px; border: 1px solid rgba(197, 217, 180, .18); border-radius: 10px; background: rgba(63, 93, 76, .34); }
.death-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.death-item b { margin-left: auto; color: #f0daa0; }
#death-restart { width: min(280px, 100%); margin-top: 24px; }
@media (max-width: 540px) {
  .death-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .death-collection { grid-template-columns: minmax(0, 1fr); }
  .death-card { padding: 20px; }
}
#mobile-stick, #mobile-action { display: none; }

@keyframes title-glint { 0%, 100% { transform: scale(.92); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes vital-alert { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(238, 81, 67, 0)); } 50% { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(238, 81, 67, .72)); } }
@keyframes wave-warning { 0%, 100% { box-shadow: 0 10px 28px rgba(0, 0, 0, .2); } 50% { box-shadow: 0 0 0 5px rgba(236, 204, 125, .1), 0 10px 28px rgba(0, 0, 0, .2); } }
@keyframes wave-active { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.04); } }

@media (max-width: 900px) {
  .intro { padding: 8px; }
  .intro-window { width: 100%; padding: 9px; border-radius: 20px; }
  .intro-viewport { border-radius: 15px; }
  .intro-symbols { bottom: 10px; gap: 9px; padding: 7px 13px; }
  .intro-controls { min-height: 60px; }
  .intro-next { right: 14px; bottom: 11px; width: 44px; height: 44px; border-radius: 13px; }
  .intro-skip { top: 17px; right: 17px; width: 37px; height: 37px; }
  .overlay { padding: 24px; }
  .brand h1 { font-size: clamp(42px, 15vw, 62px); }
  .tips { display: none; }
  .actionbar { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 16px); flex-direction: row; padding: 5px; gap: 4px; }
  .actionbar button { width: clamp(52px, 14.7vw, 62px); height: clamp(52px, 14.7vw, 62px); border-radius: 9px; font-size: 19px; }
  .item-art.hotbar-icon { width: 44px; height: 44px; }
  .item-art.hotbar-icon svg { width: 42px; height: 42px; }
  .slot-key { top: 2px; left: 4px; font-size: 8px; }
  .slot-count { right: 2px; bottom: 2px; min-width: 19px; padding: 1px 4px; font-size: 9px; }
  #activity-status { top: calc(env(safe-area-inset-top) + 182px); }
  .context-action { display: none; }
  .reclaim-action { left: auto; right: 46px; bottom: calc(env(safe-area-inset-bottom) + 212px); width: 58px; height: 58px; font-size: 19px; }
  .upgrade-action { left: auto; right: 110px; bottom: calc(env(safe-area-inset-bottom) + 212px); width: 58px; height: 58px; font-size: 19px; }
  .utilitybar { top: 40%; right: 8px; bottom: auto; gap: 4px; padding: 4px; border-radius: 11px; }
  .utilitybar button { width: 50px; height: 50px; border-radius: 9px; }
  .quick-art { width: 43px; height: 43px; }
  .quick-art svg { width: 43px; height: 43px; }
  #mobile-stick { display: block; pointer-events: auto; position: absolute; bottom: calc(env(safe-area-inset-bottom) + 96px); left: 18px; width: 128px; height: 128px; border: 2px solid rgba(231, 239, 211, .42); border-radius: 50%; background: radial-gradient(circle, rgba(88, 131, 110, .5), rgba(12, 33, 31, .62)); box-shadow: inset 0 0 24px rgba(0, 0, 0, .17), 0 10px 30px rgba(0, 0, 0, .16); touch-action: none; }
  #mobile-stick i { position: absolute; width: 52px; height: 52px; left: 36px; top: 36px; border-radius: 50%; background: linear-gradient(145deg, rgba(212, 233, 173, .8), rgba(134, 174, 111, .68)); border: 1px solid rgba(238, 248, 209, .7); box-shadow: 0 5px 13px rgba(0, 0, 0, .2); }
  #mobile-action { display: grid; pointer-events: auto; position: absolute; bottom: calc(env(safe-area-inset-bottom) + 96px); right: 22px; width: 104px; height: 104px; border-radius: 50%; }
  #team { display: none; }
  #wave-status { top: calc(env(safe-area-inset-top) + 164px); padding: 6px 10px; font-size: 9px; }
  #home-compass { top: calc(env(safe-area-inset-top) + 222px); left: 8px; min-height: 39px; gap: 6px; padding: 4px 4px 4px 9px; font-size: 11px; }
  #home-recall { width: 29px; height: 29px; font-size: 20px; }
  .topbar { display: flex; justify-content: space-between; align-items: flex-start; font-size: 10px; padding-left: 8px; padding-right: 8px; }
  .topbar > * { min-width: 0; padding: 7px 9px; }
  .topbar #day-label { position: absolute; top: calc(env(safe-area-inset-top) + 14px); left: 50%; min-width: 105px; transform: translateX(-50%); }
  .topbar .top-actions { position: static; }
  #vitals { top: calc(env(safe-area-inset-top) + 62px); gap: clamp(3px, 1.5vw, 7px); }
  .vital-row { width: clamp(53px, 14vw, 66px); }
  .vital-row[data-vital="health"] { width: clamp(70px, 19vw, 86px); }
  .vital-row[data-vital="hunger"], .vital-row[data-vital="thirst"] { margin-top: 13px; }
  .vital-orb { width: clamp(50px, 13vw, 62px); height: clamp(50px, 13vw, 62px); box-shadow: 0 0 0 1px rgba(249, 242, 213, .9), 0 0 0 3px rgba(22, 44, 40, .72); }
  .vital-orb::before { inset: 4px; }
  .vital-row[data-vital="health"] .vital-orb { width: clamp(68px, 18vw, 80px); height: clamp(68px, 18vw, 80px); }
  .vital-icon, .vital-row[data-vital="health"] .vital-icon { width: 63%; height: 63%; }
  .vital-name { display: none; }
  .vital-value { min-width: 25px; right: -3px; bottom: -4px; padding: 3px 5px; font-size: 10px; }
  #panel { left: 8px; right: 8px; top: 50%; transform: translateY(-50%); width: auto; max-height: min(86dvh, 760px); padding: 12px; border-width: 3px; border-radius: 8px 8px 16px 16px; }
  .panel-head { top: -12px; margin: -12px -12px 10px; padding: 10px 12px; }
  #panel-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .inventory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .inventory-section { padding: 9px; }
  .inventory-section-heading strong { font-size: 17px; }
  .craft-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .craft-tile { min-height: 104px; padding: 5px 2px; }
  .craft-tile .item-art { width: 43px; height: 43px; }
  .craft-tile .item-art svg { width: 39px; height: 39px; }
  .craft-tile-name { font-size: 8px; }
  .craft-tile .material-chip { font-size: 8px; }
  .inventory-empty { min-height: 82px; }
  #panel[data-kind="inventory"] .visual-card { min-height: 94px; padding: 5px 2px; }
  #panel[data-kind="inventory"] .visual-card .item-art { width: 53px; height: 53px; }
  #panel[data-kind="inventory"] .visual-card .item-art svg { width: 47px; height: 47px; }
  #panel[data-kind="inventory"] .card-copy strong { font-size: 9px; }
  .loadout-editor { margin-top: 11px; padding: 9px; }
  .loadout-heading { margin-bottom: 7px; }
  .loadout-heading strong { font-size: 13px; }
  .loadout-heading small { font-size: 8px; }
  .loadout-slots { gap: 4px; }
  .loadout-slot { height: clamp(46px, 13.5vw, 55px); border-radius: 7px; }
  .item-art.loadout-icon { width: 41px; height: 41px; }
  .item-art.loadout-icon svg { width: 37px; height: 37px; }
  #notice { top: 16%; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

.intro { background: radial-gradient(circle at 50% 45%, #476b5d, #07171a 82%); }
.intro-window { width: min(1050px, 96vw); padding: 15px; border-radius: 26px; border-color: rgba(219, 234, 194, .3); box-shadow: 0 34px 110px rgba(0, 0, 0, .55), 0 0 80px rgba(155, 204, 140, .08); }
.intro-heading { display: flex; align-items: center; gap: 12px; min-height: 61px; padding: 3px 10px 13px; }
.language-picker { display: flex; gap: 3px; margin-left: auto; padding: 3px; border: 1px solid rgba(216, 235, 199, .28); border-radius: 10px; background: rgba(8, 26, 25, .65); }
.language-picker button { min-width: 36px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: #c9d5c3; font-size: 11px; font-weight: 900; cursor: pointer; }
.language-picker button.active { background: #d6e8a8; color: #17332c; }
.lobby-language { width: max-content; margin: 0 0 0 auto; }
.intro-mark { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(233, 232, 187, .43); border-radius: 12px; color: #e7d99a; font-size: 25px; }
.intro-heading small, .intro-caption small { display: block; color: #d4e5b4; font-size: 10px; font-weight: 900; letter-spacing: .23em; }
.intro-heading b { display: block; margin-top: 2px; font: 800 19px Georgia, serif; color: #f7edcd; }
#intro-counter { margin-right: 55px; color: #c6d9c4; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.intro-slide::after { content: ''; position: absolute; inset: 20% 0 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, transparent 22%, rgba(5, 18, 18, .15) 53%, rgba(5, 17, 18, .89) 100%); }
.intro-caption { position: absolute; z-index: 1; left: clamp(20px, 5vw, 60px); right: 25%; bottom: clamp(18px, 3vw, 39px); transform: translateY(16px); opacity: 0; transition: transform .5s .18s, opacity .5s .18s; text-shadow: 0 3px 15px rgba(0, 0, 0, .75); }
.intro-slide.active .intro-caption { transform: translateY(0); opacity: 1; }
.intro-caption h2 { margin: 7px 0 6px; font: 800 clamp(23px, 3.2vw, 43px)/1.08 Georgia, serif; color: #fff4d7; }
.intro-caption p { margin: 0; color: #e5eedf; font-size: clamp(11px, 1.3vw, 15px); }
.intro-symbols { z-index: 1; top: 18px; right: 18px; bottom: auto; left: auto; transform: none; }
.intro-controls { min-height: 65px; }
.intro-next { bottom: 21px; }
.intro-skip { top: 24px; right: 26px; }

.lobby-card { width: min(470px, 94vw); padding: clamp(23px, 4vw, 40px); border: 1px solid rgba(215, 231, 186, .4); border-radius: 26px; background: linear-gradient(145deg, rgba(23, 56, 51, .95), rgba(9, 31, 32, .98)); box-shadow: 0 35px 100px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(16px); }
.overlay { justify-items: start; padding-left: clamp(24px, 8vw, 150px); background: #203c38; }
.overlay > .lobby-scene { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(.73) saturate(1.08); }
.overlay::before { display: none; }
.lobby-eyebrow { color: #d9e7a8; font-size: 10px; font-weight: 900; letter-spacing: .28em; text-align: center; }
.lobby-card .brand { margin: 22px 0 25px; }
.lobby-card .brand h1 { font-size: clamp(45px, 5vw, 70px); line-height: .89; }
.lobby-card .brand p { margin: 16px 0 0; }
.lobby-form { display: grid; gap: 16px; }
.lobby-card label, .lobby-card .primary { width: 100%; }
.lobby-card input { padding: 16px 17px; border-radius: 13px; background: rgba(8, 26, 27, .83); }
.lobby-card .primary { display: flex; justify-content: center; gap: 14px; margin-top: 4px; font-size: 14px; letter-spacing: .1em; }
.lobby-card #lobby-error { margin: 0; }
.lobby-footer { display: flex; justify-content: space-between; gap: 8px; padding-top: 21px; margin-top: 9px; border-top: 1px solid rgba(209, 230, 191, .15); color: #b5cdb5; font-size: 11px; font-weight: 700; }

#placement-controls { position: fixed; z-index: 5; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 124px); transform: translateX(-50%); display: flex; align-items: center; gap: 15px; width: min(500px, calc(100vw - 24px)); padding: 11px; border: 1px solid rgba(218, 241, 195, .45); border-radius: 18px; background: linear-gradient(145deg, rgba(22, 55, 49, .96), rgba(9, 30, 31, .95)); box-shadow: 0 19px 55px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .1); backdrop-filter: blur(15px); }
.placement-identity { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.placement-identity .item-art { width: 46px; height: 46px; }
.placement-identity .item-art svg { width: 40px; height: 40px; }
.placement-identity b, .placement-identity small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.placement-identity b { font: 800 15px Georgia, serif; color: #f3ebcc; }
.placement-identity small { margin-top: 3px; color: #b6d3bf; font-size: 10px; }
.placement-actions { display: flex; gap: 6px; }
.placement-actions button { width: 42px; height: 42px; padding: 0; border: 1px solid rgba(214, 232, 197, .3); border-radius: 11px; background: rgba(237, 248, 215, .09); color: #eff5da; font-size: 20px; cursor: pointer; }
.placement-actions .primary { width: auto; min-width: 76px; height: 42px; padding: 0 12px; color: #203627; font-size: 13px; }
.placement-actions .primary:disabled { filter: grayscale(.8); opacity: .55; cursor: not-allowed; }
#placement-controls.invalid { border-color: rgba(255, 112, 102, .7); }

#condition-overlay { --condition-color: #f1a27b; position: fixed; z-index: 4; left: 18px; bottom: calc(env(safe-area-inset-bottom) + 122px); display: flex; align-items: center; gap: 10px; padding: 9px 15px 9px 9px; border: 1px solid var(--condition-color); border-radius: 15px; background: rgba(13, 32, 33, .89); box-shadow: 0 8px 24px rgba(0, 0, 0, .3), 0 0 20px color-mix(in srgb, var(--condition-color) 30%, transparent); pointer-events: none; backdrop-filter: blur(8px); }
#condition-overlay::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 50%, transparent 53%, color-mix(in srgb, var(--condition-color) 28%, transparent) 100%); pointer-events: none; }
#condition-overlay[data-condition="thirst"] { --condition-color: #78d0ed; }
#condition-overlay[data-condition="health"] { --condition-color: #f47e70; }
#condition-overlay[data-condition="hunger"] { --condition-color: #e9bc6a; }
#condition-overlay[data-condition="warmth"] { --condition-color: #9ed7ef; }
#condition-overlay[data-condition="energy"] { --condition-color: #c7b2ec; }
#condition-overlay[data-condition="sick"] { --condition-color: #a8ce84; }
#condition-overlay.urgent { animation: condition-pulse 2.3s ease-in-out infinite; }
#cold-vignette { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 38%, rgba(115, 202, 241, .3) 79%, rgba(80, 156, 211, .7) 100%); box-shadow: inset 0 0 130px rgba(134, 222, 251, .3); transition: opacity .7s; animation: cold-breathe 3.2s ease-in-out infinite; }
#world-feedback, #need-bubbles { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#need-bubbles { inset: auto; display: flex; gap: 5px; transform: translate(-50%, -50%); }
.need-bubble { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(242, 244, 226, .7); border-radius: 50%; background: rgba(27, 47, 45, .85); box-shadow: 0 2px 14px rgba(0, 0, 0, .45); animation: need-bob 2s ease-in-out infinite; }
.need-bubble:nth-child(2) { animation-delay: -.3s; }
.need-bubble:nth-child(3) { animation-delay: -.6s; }
.need-bubble svg { width: 20px; height: 20px; }
.need-warmth { border-color: #a0dffc; box-shadow: 0 0 16px rgba(132, 209, 255, .58); }
.world-gain { position: absolute; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 48px; height: 40px; padding: 3px 7px; transform: translate(-50%, -50%); border: 1px solid rgba(239, 242, 213, .76); border-radius: 15px; background: rgba(18, 49, 44, .91); color: #e9f5cf; box-shadow: 0 4px 20px rgba(0, 0, 0, .35); font-size: 16px; animation: gain-rise 1.8s ease-out forwards; }
.world-gain b { font-weight: 900; }
.world-gain svg, .world-gain .gain-icon { width: 28px; height: 28px; }
.world-gain.required-tool { border-color: #e6a58c; color: #f4b29b; }
.world-gain.alert { border-color: #efa27d; color: #ffd2a2; }
.world-gain.required-tool b { font-size: 24px; }
.tool-required { border-color: #e6a58c !important; }
.required-icon, .required-icon svg { width: 44px; height: 44px; }
.item-art.required-icon { border: 0; background: transparent; box-shadow: none; }
.item-art.required-icon svg { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .55)); }
@keyframes gain-rise { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -145%) scale(.93); } }
@keyframes need-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes cold-breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } }
.condition-symbol { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--condition-color) 20%, transparent); }
.condition-symbol svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.condition-copy b, .condition-copy small { display: block; }
.condition-copy b { color: #f8f0dc; font-size: 11px; letter-spacing: .1em; }
.condition-copy small { margin-top: 3px; color: #c7d4c8; font-size: 10px; }
@keyframes condition-pulse { 50% { box-shadow: 0 8px 24px rgba(0, 0, 0, .3), 0 0 30px color-mix(in srgb, var(--condition-color) 55%, transparent); } }
@keyframes intro-breathe { to { transform: scale(1.055); } }

@media (max-width: 900px) {
  .overlay { justify-items: center; padding: 18px; background-position: 58% center; }
  .intro-window { width: min(640px, 98vw); max-height: calc(100dvh - 16px); padding: 9px; overflow: auto; }
  .intro-heading { min-height: 52px; padding: 2px 6px 9px; }
  .intro-heading b { font-size: 15px; }
  .intro-mark { width: 32px; height: 32px; font-size: 20px; }
  #intro-counter { margin-right: 40px; font-size: 9px; }
  .intro-slide { height: min(62dvh, 430px); aspect-ratio: auto; }
  .intro-caption { left: 17px; right: 12px; bottom: 18px; }
  .intro-caption h2 { font-size: clamp(23px, 6vw, 34px); }
  .intro-symbols { top: 9px; right: 9px; padding: 5px 10px; }
  .intro-symbols b { font-size: 15px; }
  .intro-skip { top: 15px; right: 16px; }
  .lobby-card { padding: 22px; }
  .lobby-card .brand { margin: 12px 0 17px; }
  .lobby-footer { font-size: 9px; }
  #placement-controls { top: calc(env(safe-area-inset-top) + 165px); bottom: auto; width: min(440px, calc(100vw - 16px)); gap: 7px; padding: 7px; }
  .placement-identity .item-art { width: 37px; height: 37px; }
  .placement-identity .item-art svg { width: 33px; height: 33px; }
  .placement-identity b { font-size: 12px; }
  .placement-identity small { font-size: 8px; }
  .placement-actions button, .placement-actions .primary { height: 38px; }
  .placement-actions button { width: 34px; }
  .placement-actions .primary { min-width: 50px; padding: 0 7px; }
  #condition-overlay { left: 50%; bottom: calc(env(safe-area-inset-bottom) + 220px); transform: translateX(-50%); white-space: nowrap; }
}

@media (max-height: 570px) {
  .overlay { overflow: auto; align-content: start; }
  .lobby-card { margin: 10px 0; }
  #placement-controls { top: calc(env(safe-area-inset-top) + 118px); }
}

.actionbar { gap: 6px; }
.actionbar button { width: clamp(68px, 5vw, 94px); height: clamp(68px, 5vw, 94px); }
.hotbar-bag, .loadout-bag { background: radial-gradient(circle at 35% 25%, #567461, #1a3c35) !important; border-color: #d4c994 !important; }
.hotbar-bag svg, .loadout-bag svg { width: 72%; height: 72%; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .35)); }
.utilitybar button { width: 78px; height: 78px; }
.quick-art { width: 64px; height: 64px; }
.visual-card { grid-template-columns: 78px minmax(0, 1fr) auto; min-height: 98px; }
.visual-card.locked, .craft-tile:disabled { filter: grayscale(.9); opacity: .63; }
.visual-card .item-art { width: 72px; height: 72px; }
.visual-card .item-art svg { width: 64px; height: 64px; }
.craft-tile { min-height: 145px; }
.craft-tile .item-art { width: 72px; height: 72px; }
.craft-tile .item-art svg { width: 64px; height: 64px; }
#panel[data-kind="inventory"] .visual-card { min-height: 130px; }
#panel[data-kind="inventory"] .visual-card .item-art { width: 78px; height: 78px; }
#panel[data-kind="inventory"] .visual-card .item-art svg { width: 70px; height: 70px; }
.loadout-slots { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.loadout-bag { display: grid; place-items: center; min-width: 0; height: 76px; border: 2px solid; border-radius: 10px; cursor: pointer; }
#panel[data-kind="storage"] #panel-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.storage-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 34px 34px; align-items: center; gap: 7px; padding: 7px; border: 1px solid #cfae79; border-radius: 11px; background: #f9ebc8; }
.storage-row .item-art { width: 52px; height: 52px; }
.storage-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.storage-row span:not(.item-art) { font-size: 11px; font-weight: 800; white-space: nowrap; }
.storage-row button { height: 32px; border: 0; border-radius: 8px; background: #a7c87d; color: #23382a; font-weight: 900; cursor: pointer; }
.storage-row button:disabled { filter: grayscale(1); opacity: .4; cursor: default; }

@media (max-width: 900px) {
  .actionbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(350px, calc(100vw - 16px)); gap: 4px; }
  .actionbar button { width: 100%; height: clamp(47px, 13vw, 58px); }
  #mobile-stick, #mobile-action { bottom: calc(env(safe-area-inset-bottom) + 150px); }
  .utilitybar button { width: 50px; height: 50px; }
  .quick-art { width: 43px; height: 43px; }
  .craft-tile { min-height: 112px; }
  .craft-tile .item-art { width: 47px; height: 47px; }
  .craft-tile .item-art svg { width: 42px; height: 42px; }
  #panel[data-kind="inventory"] .visual-card { min-height: 100px; }
  #panel[data-kind="inventory"] .visual-card .item-art { width: 56px; height: 56px; }
  #panel[data-kind="inventory"] .visual-card .item-art svg { width: 50px; height: 50px; }
  .loadout-bag { height: clamp(46px, 13.5vw, 55px); }
  #panel[data-kind="storage"] #panel-content { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  #panel[data-kind="craft"] #panel-content,
  #panel[data-kind="build"] #panel-content { grid-template-columns: minmax(0, 1fr); }
  #panel[data-kind="craft"] .visual-card,
  #panel[data-kind="build"] .visual-card { grid-template-columns: 82px minmax(0, 1fr) 42px; gap: 9px; min-height: 102px; padding: 9px; }
  #panel[data-kind="craft"] .visual-card .item-art,
  #panel[data-kind="build"] .visual-card .item-art { width: 78px; height: 78px; }
  #panel[data-kind="craft"] .visual-card .item-art svg,
  #panel[data-kind="build"] .visual-card .item-art svg { width: 70px; height: 70px; }
  #panel[data-kind="craft"] .card-copy strong,
  #panel[data-kind="build"] .card-copy strong { font-size: 15px; }
  #panel[data-kind="craft"] .card-copy small { font-size: 11px; }
  #panel[data-kind="craft"] .material-chip,
  #panel[data-kind="build"] .material-chip { font-size: 11px; }
  #panel[data-kind="craft"] .visual-card > button,
  #panel[data-kind="build"] .visual-card > button { width: 40px; height: 40px; }
}

.lobby-card { max-height: calc(100dvh - 20px); overflow-y: auto; width: min(560px, 95vw); padding: clamp(18px, 2.4vw, 30px); }
.lobby-card .brand { margin: 8px 0 14px; }
.lobby-card .brand h1 { font-size: clamp(39px, 4vw, 58px); }
.appearance-panel { display: grid; grid-template-columns: 154px minmax(0, 1fr); gap: 14px; align-items: center; margin: 12px 0 17px; padding: 12px; border: 1px solid rgba(215, 232, 190, .23); border-radius: 17px; background: linear-gradient(145deg, rgba(126, 160, 111, .17), rgba(19, 46, 42, .38)); }
.appearance-panel strong { display: block; margin-bottom: 9px; color: #e6edc9; font-size: 11px; letter-spacing: .14em; }
#appearance-preview { position: relative; width: 154px; height: 192px; overflow: hidden; border-radius: 12px; background: radial-gradient(circle at 50% 55%, #68846a, #294c49 75%); box-shadow: inset 0 0 0 1px rgba(234, 240, 209, .18), 0 5px 15px rgba(0,0,0,.2); }
.appearance-row { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.appearance-row > span { width: 39px; flex: none; color: #c5d1be; font-size: 10px; }
.appearance-row button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 2px solid rgba(235,241,207,.33); border-radius: 9px; background: var(--swatch); color: #e7e8c6; font-size: 19px; cursor: pointer; }
.appearance-row button.appearance-hat { background: #28403b; }
.appearance-row button.selected { border-color: #e6f2a8; box-shadow: 0 0 0 2px rgba(187,222,115,.32), 0 0 15px rgba(182,216,121,.22); }
.lobby-form { gap: 9px; }
.lobby-card input { padding: 12px 14px; }
.lobby-footer { margin-top: 3px; padding-top: 13px; }

#vitals { top: calc(env(safe-area-inset-top) + 10px); gap: clamp(5px, .65vw, 10px); }
.vital-row { width: clamp(63px, 4.2vw, 78px); gap: 3px; }
.vital-row[data-vital="health"] { width: clamp(92px, 5.6vw, 112px); margin-top: -2px; }
.vital-row[data-vital="hunger"], .vital-row[data-vital="thirst"] { margin-top: 11px; }
.vital-row[data-vital="warmth"], .vital-row[data-vital="energy"] { margin-top: 18px; }
.vital-orb { width: clamp(57px, 3.8vw, 71px); height: clamp(57px, 3.8vw, 71px); box-shadow: 0 0 0 2px #f4ebc7, 0 0 0 5px rgba(20,47,44,.68), 0 9px 20px rgba(0,0,0,.25); }
.vital-orb::before { inset: 5px; background: radial-gradient(circle at 35% 26%, rgba(255,255,255,.27), transparent 43%), color-mix(in srgb, var(--vital-color) 52%, #293b36); }
.vital-row[data-vital="health"] .vital-orb { width: clamp(84px, 5.3vw, 101px); height: clamp(84px, 5.3vw, 101px); }
.vital-value { right: -3px; bottom: -3px; min-width: 27px; padding: 2px 5px; font-size: 11px; }
.vital-row[data-vital="health"] .vital-value { right: 9px; bottom: -7px; min-width: 38px; font-size: 13px; }
.vital-name { display: none; }

@media (max-width: 900px) {
  .overlay { justify-items: center; padding: 8px; }
  .lobby-card { max-height: calc(100dvh - 12px); padding: 14px; }
  .appearance-panel { grid-template-columns: 94px minmax(0, 1fr); padding: 8px; gap: 10px; }
  #appearance-preview { width: 94px; height: 136px; }
  #vitals { top: calc(env(safe-area-inset-top) + 54px); gap: 4px; }
  .vital-row { width: clamp(49px, 12vw, 60px); }
  .vital-row[data-vital="health"] { width: clamp(66px, 16vw, 78px); }
  .vital-row[data-vital="warmth"], .vital-row[data-vital="energy"] { margin-top: 12px; }
  .vital-row[data-vital="hunger"], .vital-row[data-vital="thirst"] { margin-top: 8px; }
  .vital-orb { width: clamp(44px, 11vw, 55px); height: clamp(44px, 11vw, 55px); }
  .vital-row[data-vital="health"] .vital-orb { width: clamp(62px, 15vw, 74px); height: clamp(62px, 15vw, 74px); }
  .vital-value { font-size: 9px; min-width: 22px; }
}

.hotbar-bag { touch-action: manipulation; position: relative; z-index: 2; }
.inventory-layout { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 14px; align-items: stretch; }
.equipment-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; }
.equipment-avatar { position: relative; height: 236px; overflow: hidden; border: 1px solid rgba(185, 211, 154, .28); border-radius: 15px; background: radial-gradient(ellipse at 50% 67%, rgba(178, 209, 143, .35), transparent 48%), linear-gradient(150deg, #526e64, #223a37 68%, #192e2e); box-shadow: inset 0 1px rgba(249, 245, 211, .18), inset 0 -23px 34px rgba(5, 18, 19, .35); }
.equipment-avatar::before { content: ''; position: absolute; z-index: 1; inset: 10px; border: 1px solid rgba(228, 235, 194, .17); border-radius: 11px; pointer-events: none; }
.equipment-canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.equipment-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.equipment-slot { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 54px; padding: 6px; border: 1px dashed rgba(185, 210, 164, .38); border-radius: 10px; background: rgba(12, 31, 29, .43); color: #cbd8c5; font-size: 11px; font-weight: 800; }
.equipment-slot .item-art.mini { width: 37px; height: 37px; flex: none; }
.equipment-slot .item-art.mini svg { width: 34px; height: 34px; }
.equipment-slot.equipped { border-style: solid; border-color: #bdd786; background: rgba(84, 116, 73, .46); color: #f0f3d8; cursor: pointer; }
.equipment-slot.equipped:hover { background: rgba(105, 145, 86, .55); }
.equipment-slot:disabled { opacity: .73; }
.equipment-bonus { padding: 8px 10px; border-radius: 8px; background: rgba(170, 197, 135, .13); color: #d3e3bb; font-size: 10px; font-weight: 750; line-height: 1.4; }

#vitals { gap: clamp(7px, 1vw, 16px); }
.vital-row { width: clamp(70px, 4.8vw, 92px); }
.vital-row[data-vital="health"] { width: clamp(132px, 8.5vw, 168px); margin-top: -2px; }
.vital-row[data-vital="hunger"], .vital-row[data-vital="thirst"] { margin-top: 25px; }
.vital-row[data-vital="warmth"], .vital-row[data-vital="energy"] { margin-top: 34px; }
.vital-orb { width: clamp(64px, 4.2vw, 82px); height: clamp(64px, 4.2vw, 82px); }
.vital-row[data-vital="health"] .vital-orb { width: clamp(120px, 8vw, 152px); height: clamp(120px, 8vw, 152px); }
.vital-row[data-vital="health"] .vital-value { right: 18px; bottom: -8px; min-width: 46px; font-size: 16px; }

@media (max-width: 900px) {
  #vitals { top: calc(env(safe-area-inset-top) + 52px); gap: clamp(3px, 1vw, 7px); }
  .vital-row { width: clamp(47px, 12vw, 63px); }
  .vital-row[data-vital="health"] { width: clamp(84px, 23vw, 112px); }
  .vital-row[data-vital="hunger"], .vital-row[data-vital="thirst"] { margin-top: 14px; }
  .vital-row[data-vital="warmth"], .vital-row[data-vital="energy"] { margin-top: 20px; }
  .vital-orb { width: clamp(45px, 11vw, 58px); height: clamp(45px, 11vw, 58px); }
  .vital-row[data-vital="health"] .vital-orb { width: clamp(78px, 21vw, 105px); height: clamp(78px, 21vw, 105px); }
  .vital-row[data-vital="health"] .vital-value { right: 8px; font-size: 11px; }
}

#panel[data-kind="inventory"] { border: 1px solid rgba(203, 220, 175, .32); border-radius: 22px; background: radial-gradient(circle at 12% 4%, rgba(100, 129, 98, .32), transparent 37%), radial-gradient(circle at 96% 87%, rgba(95, 113, 67, .2), transparent 31%), linear-gradient(155deg, #28433c, #152b29 62%, #102220); color: #eff3df; box-shadow: 0 35px 95px rgba(0, 12, 12, .68), inset 0 1px rgba(245, 245, 216, .19), inset 0 0 0 5px rgba(9, 29, 27, .35); }
#panel[data-kind="inventory"]::before, #panel[data-kind="inventory"]::after { background: rgba(220, 225, 178, .43); }
#panel[data-kind="inventory"] .panel-head { border-bottom: 1px solid rgba(221, 232, 184, .26); background: linear-gradient(90deg, rgba(66, 95, 75, .98), rgba(29, 59, 50, .98)); box-shadow: 0 8px 20px rgba(4, 17, 17, .21); }
#panel[data-kind="inventory"] .panel-head h2 { color: #eff1d2; font-family: inherit; font-size: 23px; letter-spacing: .03em; text-shadow: none; }
#panel[data-kind="inventory"] .panel-head button { border: 1px solid rgba(225, 233, 201, .34); border-radius: 12px; background: rgba(9, 30, 28, .45); color: #e8eed4; box-shadow: none; }
#panel[data-kind="inventory"] .inventory-section { border: 1px solid rgba(204, 221, 179, .25); background: linear-gradient(155deg, rgba(73, 102, 80, .32), rgba(19, 49, 45, .54)); box-shadow: inset 0 1px rgba(240, 240, 205, .09), 0 9px 27px rgba(7, 21, 20, .2); }
#panel[data-kind="inventory"] .inventory-section-heading { color: #e9edd4; }
#panel[data-kind="inventory"] .inventory-section-heading strong { font-family: inherit; font-size: 16px; letter-spacing: .06em; }
#panel[data-kind="inventory"] .inventory-capacity { color: #c4d3b5; font-size: 12px; }
#panel[data-kind="inventory"] .visual-card { border: 1px solid rgba(204, 220, 178, .26); background: radial-gradient(circle at 32% 12%, rgba(221, 231, 191, .13), transparent 53%), linear-gradient(145deg, #3b5647, #223c35); box-shadow: inset 0 1px rgba(243, 239, 202, .13), 0 5px 12px rgba(6, 21, 18, .19); }
#panel[data-kind="inventory"] .visual-card:hover { transform: translateY(-2px); border-color: rgba(214, 238, 170, .7); }
#panel[data-kind="inventory"] .visual-card .item-art { border-color: rgba(217, 229, 178, .37); background: radial-gradient(circle at 32% 21%, rgba(247, 236, 198, .65), transparent 55%), linear-gradient(145deg, #d7c99e, #9eac87); }
#panel[data-kind="inventory"] .card-copy strong { color: #f0f2dd; }
#panel[data-kind="inventory"] .visual-card > button { background: #b3d17e; }
#panel[data-kind="inventory"] .inventory-empty { border-color: rgba(187, 208, 170, .22); background: rgba(8, 31, 29, .29); box-shadow: inset 0 3px 10px rgba(4, 16, 15, .13); }
#panel[data-kind="inventory"] .loadout-editor { border: 1px solid rgba(207, 222, 179, .27); border-radius: 13px; background: rgba(14, 37, 34, .58); box-shadow: inset 0 1px rgba(242, 242, 207, .1); }
#panel[data-kind="inventory"] .loadout-heading { color: #e9eed4; }
#panel[data-kind="inventory"] .loadout-heading strong { font-family: inherit; }
#panel[data-kind="inventory"] .loadout-heading small { color: #b9ccb5; }
#panel[data-kind="inventory"] .loadout-slot { border-color: rgba(197, 217, 175, .38); background: rgba(52, 79, 64, .49); }
#panel[data-kind="inventory"] .loadout-slot.occupied { background: linear-gradient(145deg, rgba(120, 147, 90, .55), rgba(44, 83, 67, .8)); }
#panel[data-kind="inventory"] .loadout-slot .slot-key { color: #dce8c1; }
#panel[data-kind="inventory"] .loadout-slot .slot-empty { color: rgba(215, 229, 189, .33); }

@media (max-width: 760px) {
  .inventory-layout { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .inventory-layout > .inventory-section:last-child { order: -1; }
  .equipment-panel { grid-template-columns: minmax(110px, .8fr) minmax(0, 1.2fr); gap: 8px; }
  .equipment-avatar { height: 155px; grid-row: span 2; }
  .equipment-slot { min-height: 47px; padding: 3px; gap: 3px; font-size: 10px; }
  .equipment-slot .item-art.mini { width: 27px; height: 27px; }
  .equipment-slot .item-art.mini svg { width: 25px; height: 25px; }
  .equipment-bonus { font-size: 9px; }
}

.intro-symbols .tutorial-art { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid rgba(241, 229, 178, .38); border-radius: 12px; background: rgba(237, 222, 174, .13); }
.intro-symbols .tutorial-art .item-art { width: 42px; height: 42px; border: 0; background: transparent; box-shadow: none; }
.intro-symbols .tutorial-art svg { width: 40px; height: 40px; }
#appearance-preview .equipment-canvas { width: 100%; height: 100%; }
.lobby-entry-actions, .lobby-room-actions { display: flex; gap: 9px; }
.lobby-entry-actions > button, .lobby-room-actions > button { flex: 1; width: auto; min-width: 0; margin: 0; padding: 12px 8px; font-size: 11px; letter-spacing: .05em; }
.secondary { border: 1px solid rgba(221, 236, 194, .38); border-radius: 12px; background: rgba(14, 39, 36, .83); color: #e7efd7; font-weight: 850; cursor: pointer; }
.secondary:hover { border-color: #d8e8aa; background: rgba(55, 86, 69, .88); }
.lobby-entry-actions .primary { display: grid; place-items: center; }
.lobby-room { display: grid; gap: 12px; }
.lobby-room-label { color: #b8c9ae; font-size: 10px; font-weight: 900; letter-spacing: .2em; text-align: center; }
.room-code { display: flex; align-items: center; justify-content: center; gap: 17px; width: 100%; padding: 12px; border: 1px solid rgba(219, 235, 188, .45); border-radius: 14px; background: rgba(9, 27, 27, .85); color: #f1ecbc; font-size: 23px; font-weight: 900; letter-spacing: .28em; cursor: pointer; }
.room-code span:last-child { color: #a6c197; font-size: 19px; letter-spacing: 0; }
.lobby-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.lobby-player { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; column-gap: 8px; min-width: 0; padding: 8px; border: 1px solid rgba(207, 228, 188, .23); border-radius: 11px; background: rgba(22, 51, 45, .67); }
.lobby-player.self { border-color: rgba(220, 238, 168, .6); }
.lobby-player-avatar { position: relative; grid-row: span 2; width: 35px; height: 35px; border: 2px solid rgba(236, 231, 193, .5); border-radius: 11px; background: radial-gradient(circle at 50% 35%, var(--skin-color) 0 21%, transparent 23%), linear-gradient(145deg, var(--player-color), #1e3a35); }
.lobby-player-avatar::before { content: ''; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 3px; border-radius: 5px; background: var(--scarf-color); }
.lobby-player-avatar.hat-cap::after, .lobby-player-avatar.hat-beanie::after { content: ''; position: absolute; top: 4px; left: 9px; width: 13px; height: 6px; border-radius: 8px 8px 1px 1px; background: #283f3a; }
.lobby-player-avatar.hat-beanie::after { height: 8px; border-radius: 8px 8px 2px 2px; background: var(--scarf-color); }
.lobby-player strong { overflow: hidden; color: #f4eed0; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lobby-player small { color: #bccea9; font-size: 9px; font-weight: 850; letter-spacing: .06em; }
#lobby-wait { min-height: 19px; margin: 0; color: #c4d5bd; font-size: 12px; text-align: center; }
.lobby-room-actions .primary:disabled { opacity: .65; cursor: wait; }
@media (max-width: 900px) {
  .intro-symbols .tutorial-art { width: 37px; height: 37px; }
  .intro-symbols .tutorial-art .item-art, .intro-symbols .tutorial-art svg { width: 32px; height: 32px; }
}
@media (max-width: 460px) {
  .lobby-entry-actions, .lobby-room-actions { flex-wrap: wrap; }
  .lobby-room-actions #leave-room { flex-basis: 100%; }
  .lobby-card .brand p, .lobby-footer { display: none; }
  .lobby-players { grid-template-columns: 1fr 1fr; }
}

.privacy-link { display: block; margin-top: 12px; text-align: center; font-size: 11px; letter-spacing: .04em; color: rgba(232, 236, 222, .6); text-decoration: underline; text-underline-offset: 3px; }
.privacy-link:hover { color: rgba(232, 236, 222, .9); }