@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900&family=Silkscreen:wght@400;700&display=swap');

:root {
  color-scheme: dark;
  --ink-950: #080d14;
  --ink-900: #0e1722;
  --ink-850: #121e2b;
  --ink-800: #182738;
  --ink-700: #263b4e;
  --ink-600: #38516a;
  --paper: #f6f1df;
  --muted: #a9bbca;
  --green: #72d17c;
  --green-dark: #32875b;
  --cyan: #5fd2d5;
  --blue: #559bde;
  --gold: #f0c55b;
  --orange: #e9944e;
  --red: #e55d68;
  --violet: #ae7de3;
  --panel: rgba(13, 24, 35, .94);
  --panel-soft: rgba(13, 24, 35, .78);
  --border: rgba(183, 221, 227, .2);
  --border-strong: rgba(183, 221, 227, .4);
  --shadow: 0 24px 70px rgba(0, 0, 0, .46), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  --pixel: "Silkscreen", ui-monospace, monospace;
  --ui: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --safe-top: max(12px, env(safe-area-inset-top));
  --safe-right: max(12px, env(safe-area-inset-right));
  --safe-bottom: max(12px, env(safe-area-inset-bottom));
  --safe-left: max(12px, env(safe-area-inset-left));
}

*, *::before, *::after { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

html { background: var(--ink-950); font-family: var(--ui); }

body {
  color: var(--paper);
  background: var(--ink-950);
  font-size: 16px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

button, input, select { font: inherit; }
button, select, input[type="range"], input[type="checkbox"] { cursor: pointer; }
input[type="text"], input[type="search"], input[type="number"], input[type="password"] { user-select: text; }
button { color: inherit; }
button:disabled { cursor: not-allowed; filter: grayscale(.35); opacity: .46; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--gold) !important;
  outline-offset: 3px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  left: 16px;
  top: -60px;
  padding: 10px 16px;
  color: var(--ink-950);
  background: var(--gold);
  border-radius: 5px;
  font-weight: 900;
  transition: top .15s ease;
}
.skip-link:focus { top: 16px; }

.app-shell, #main-content, .screen { width: 100%; height: 100%; }

.screen {
  position: fixed;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .24s ease;
}
.screen.is-active { opacity: 1; }

h1, h2, h3, h4, p { margin-top: 0; }
h2 { margin-bottom: 0; font: 700 clamp(1.25rem, 2vw, 1.8rem)/1.1 var(--pixel); letter-spacing: -.03em; }
h3 { margin-bottom: .45rem; font: 800 1.04rem/1.2 var(--ui); }
h4 { margin: 1.2rem 0 .65rem; color: var(--muted); font: 800 .76rem/1 var(--pixel); text-transform: uppercase; }

.eyebrow {
  margin: 0 0 .36rem;
  color: var(--cyan);
  font: 700 .62rem/1.2 var(--pixel);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.panel {
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 25%),
    var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.panel-lite {
  border: 1px solid var(--border);
  background: var(--panel-soft);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
  backdrop-filter: blur(8px);
}

.ui-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  gap: 10px;
  padding: 10px 16px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  color: var(--paper);
  background: rgba(50, 75, 93, .56);
  font-weight: 900;
  letter-spacing: .01em;
  text-shadow: 0 1px 1px #000;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .26), inset 0 1px rgba(255,255,255,.06);
  transition: transform .12s ease, border-color .12s ease, background .12s ease, filter .12s ease;
}
.ui-button::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(255,255,255,.035);
  border-radius: 2px;
  pointer-events: none;
}
.ui-button:not(:disabled):hover { transform: translateY(-1px); border-color: rgba(136, 224, 203, .65); background: rgba(61, 94, 112, .75); }
.ui-button:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.ui-button--primary { color: #07150e; border-color: #92e4a3; background: linear-gradient(#82dc8f, #57b875); text-shadow: 0 1px rgba(255,255,255,.35); }
.ui-button--primary:not(:disabled):hover { background: linear-gradient(#98e9a3, #68ca82); border-color: #c3f2bd; }
.ui-button--quiet { min-height: 36px; border-color: transparent; background: transparent; box-shadow: none; color: var(--muted); }
.ui-button--quiet::after { display: none; }
.ui-button--quiet:not(:disabled):hover { color: var(--paper); background: rgba(255,255,255,.055); }
.ui-button--danger { border-color: rgba(229,93,104,.65); background: rgba(134, 45, 56, .54); }
.ui-button--danger:not(:disabled):hover { border-color: var(--red); background: rgba(167, 55, 66, .72); }
.ui-button--small { min-height: 35px; padding: 6px 11px; font-size: .82rem; }
.ui-button--large { min-height: 52px; font-size: 1rem; }
.ui-button small { margin-left: auto; opacity: .7; font-size: .7rem; font-weight: 700; }
.button-icon { min-width: 18px; color: var(--gold); font: 700 1rem/1 var(--pixel); }
.ui-button--primary .button-icon { color: #183e28; }

.icon-button {
  display: inline-grid;
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: rgba(255,255,255,.045);
  font: 700 1.25rem/1 var(--pixel);
  transition: color .12s, background .12s, transform .12s;
}
.icon-button:hover { color: var(--cyan); background: rgba(95,210,213,.1); transform: translateY(-1px); }
.icon-button--tiny { width: 26px; height: 24px; font-size: .65rem; }

.text-button { padding: 4px 6px; border: 0; color: var(--muted); background: transparent; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.text-button:hover { color: var(--paper); }

kbd {
  display: inline-grid;
  min-width: 25px;
  min-height: 23px;
  padding: 3px 6px;
  place-items: center;
  border: 1px solid #65798a;
  border-bottom-width: 3px;
  border-radius: 4px;
  color: var(--paper);
  background: #293b4b;
  font: 700 .69rem/1 var(--pixel);
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}

/* Main menu */
.screen--menu {
  background: linear-gradient(#376d86 0%, #68a7aa 50%, #d4bd87 100%);
  isolation: isolate;
}
.menu-sky, .menu-sky > * { position: absolute; pointer-events: none; }
.menu-sky { inset: 0; overflow: hidden; z-index: -1; }
.menu-sky::after { content: ""; inset: 0; position: absolute; background: linear-gradient(90deg, rgba(8,20,28,.55), transparent 46%, rgba(8,20,28,.12)); }
.menu-sun { top: 9%; right: 13%; width: clamp(76px, 9vw, 130px); aspect-ratio: 1; background: #f7d982; box-shadow: 0 0 80px 24px rgba(255,226,137,.25); clip-path: polygon(14% 0,86% 0,86% 14%,100% 14%,100% 86%,86% 86%,86% 100%,14% 100%,14% 86%,0 86%,0 14%,14% 14%); }
.cloud { height: 18px; width: 130px; opacity: .28; background: #e5f1dc; box-shadow: 22px -18px 0 #e5f1dc, 56px -7px 0 8px #e5f1dc, 87px -22px 0 #e5f1dc; image-rendering: pixelated; animation: cloud-drift 32s linear infinite; }
.cloud--one { top: 18%; left: 37%; }
.cloud--two { top: 34%; left: 70%; transform: scale(.7); animation-duration: 44s; animation-delay: -12s; }
.mountain { left: -5%; right: -5%; bottom: 10%; height: 56%; clip-path: polygon(0 74%,7% 61%,13% 67%,22% 37%,29% 63%,37% 44%,44% 68%,54% 31%,63% 65%,70% 45%,78% 69%,88% 40%,100% 72%,100% 100%,0 100%); }
.mountain--back { background: #426d6e; opacity: .65; transform: translateY(-13%); }
.mountain--front { background: linear-gradient(135deg,#315551,#28443f); }
.mountain--front::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 50px, rgba(10,29,30,.15) 52px 78px); }
.menu-ground { left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(#5b8652 0 12px, #594633 12px 100%); box-shadow: inset 0 12px #85ad63; }
.menu-ground::after { content: ""; position: absolute; inset: 18px 0 0; opacity: .23; background-image: linear-gradient(45deg,#2c2c28 25%,transparent 25%),linear-gradient(-45deg,#2c2c28 25%,transparent 25%); background-size: 34px 34px; }

.main-menu-layout {
  position: relative;
  display: flex;
  width: min(1120px, 100%);
  height: 100%;
  margin: 0 auto;
  padding: max(5vh, 34px) max(5vw, 28px) max(4vh, 25px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.brand { display: flex; align-items: center; gap: 20px; margin: 0 0 24px 6px; filter: drop-shadow(0 7px 1px rgba(4,15,20,.35)); }
.brand-title { display: flex; margin: 0; font: 700 clamp(2.65rem, 6vw, 5rem)/.88 var(--pixel); letter-spacing: -.12em; text-transform: uppercase; }
.brand-title span:first-child { color: #d3e0d5; text-shadow: 0 5px #3c5860, 4px 0 #3c5860; }
.brand-title span:last-child { color: #8bd273; text-shadow: 0 5px #366442, 4px 0 #366442; }
.brand-subtitle { margin: 13px 0 0 4px; color: #f2d77e; font: 700 clamp(.58rem, 1.3vw, .84rem)/1 var(--pixel); letter-spacing: .18em; text-transform: uppercase; }
.brand-mark { position: relative; width: clamp(64px, 7vw, 88px); height: clamp(70px, 7.7vw, 96px); transform: rotate(-5deg); }
.brand-block { position: absolute; width: 58%; height: 47%; border: 4px solid rgba(14,25,31,.75); box-shadow: inset -7px -7px rgba(0,0,0,.16); }
.brand-block--grass { left: 0; top: 0; background: linear-gradient(#8fd370 0 25%,#8c6844 25%); }
.brand-block--earth { right: 0; bottom: 0; background: #8c6844; }
.brand-block--crystal { right: 2%; top: 3%; width: 28%; height: 45%; border-width: 3px; transform: rotate(45deg); background: linear-gradient(135deg,#b7fbef,#50c4cf 60%,#498fc9); box-shadow: inset -5px -5px rgba(39,66,124,.35), 0 0 18px #72e9de; }
.menu-card { width: min(430px, 100%); padding: 18px; border-radius: 8px; }
.menu-card > .ui-button { width: 100%; margin-bottom: 10px; }
.menu-status-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(145px,.72fr); gap: 8px; margin: -3px 0 12px; }
.account-summary { display: flex; min-width: 0; margin: 0; padding: 8px 10px; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 5px; background: rgba(2,10,16,.26); }
.account-summary > span:last-child { display: grid; min-width: 0; }
.account-summary small { color: var(--muted); font-size: .64rem; }
.account-summary strong { overflow: hidden; font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }
.menu-online-players { display: flex; min-width: 0; padding: 8px 10px; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 5px; background: rgba(2,10,16,.34); }
.menu-online-players.is-online { border-color: rgba(114,209,124,.36); background: rgba(30,91,53,.22); }
.menu-online-copy { display: grid; min-width: 0; }
.menu-online-copy small { color: var(--muted); font-size: .6rem; white-space: nowrap; }
.menu-online-copy strong { display: flex; align-items: baseline; gap: 4px; overflow: hidden; color: var(--muted); font-size: .63rem; white-space: nowrap; }
#menu-online-player-count { color: var(--cyan); font: 700 .8rem/1.2 var(--pixel); font-variant-numeric: tabular-nums; }
.menu-online-players.is-online #menu-online-player-count { color: var(--green); }
.connection-dot { display: inline-block; width: 9px; height: 9px; flex: 0 0 auto; border: 1px solid #789; border-radius: 50%; background: #65717b; box-shadow: 0 0 0 3px rgba(101,113,123,.12); }
.connection-dot.is-online { border-color: #b5efb4; background: var(--green); box-shadow: 0 0 8px rgba(114,209,124,.75); }
.connection-dot.is-connecting { border-color: #ffe39a; background: var(--gold); animation: loading-step-pulse .7s infinite alternate; }
.ui-button--online { border-color: rgba(95,210,213,.5); background: linear-gradient(180deg,rgba(50,133,143,.32),rgba(20,63,73,.42)); }
.ui-button--online:hover { border-color: var(--cyan); background: linear-gradient(180deg,rgba(61,157,165,.42),rgba(23,77,86,.52)); }
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu-row .ui-button { margin-bottom: 10px; }
.menu-footer { display: flex; margin: 18px 0 0 8px; gap: 8px; color: rgba(246,241,223,.7); font-size: .74rem; font-weight: 700; text-shadow: 0 1px #000; }

/* General screens and settings */
.screen--backdrop { padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); overflow: auto; background: radial-gradient(circle at 70% 10%,rgba(60,124,126,.24),transparent 38%),linear-gradient(145deg,#101d29,#081018); }
.screen--backdrop::before { content: ""; position: fixed; inset: 0; opacity: .08; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px); background-size: 32px 32px; }
.screen-panel { position: relative; width: min(880px, calc(100% - 20px)); min-height: min(720px, calc(100vh - 40px)); margin: 20px auto; padding: clamp(18px, 3vw, 30px); border-radius: 8px; }
.screen-panel--wide { width: min(1040px, calc(100% - 20px)); }
.screen-panel--narrow { width: min(650px, calc(100% - 20px)); min-height: auto; }
.panel-header { display: flex; align-items: center; gap: 15px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.panel-header > div:nth-child(2) { flex: 1; }
.panel-header h2 { margin: 0; }
.header-actions { display: flex; gap: 8px; align-items: center; }

.save-list { display: grid; gap: 12px; margin-top: 20px; }
.save-card { display: grid; grid-template-columns: 150px minmax(0,1fr) auto; min-height: 120px; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: rgba(255,255,255,.035); transition: border-color .15s, transform .15s, background .15s; }
.save-card:hover { border-color: rgba(95,210,213,.52); transform: translateY(-1px); background: rgba(255,255,255,.055); }
.save-preview { position: relative; overflow: hidden; background: linear-gradient(#4f90a0 0 42%,#78a65f 42% 50%,#76573c 50%); image-rendering: pixelated; }
.save-preview::before { content: ""; position: absolute; left: 12%; bottom: 44%; width: 45%; height: 26%; background: #315f55; clip-path: polygon(0 100%,36% 5%,56% 55%,75% 20%,100% 100%); }
.save-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg,transparent 60%,rgba(2,8,13,.45)); }
.save-card-info { min-width: 0; padding: 17px; }
.save-card-info h3 { overflow: hidden; margin-bottom: 3px; font: 700 1rem/1.2 var(--pixel); text-overflow: ellipsis; white-space: nowrap; }
.save-card-info p { margin: 4px 0; color: var(--muted); font-size: .8rem; }
.save-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag { padding: 3px 7px; border: 1px solid var(--border); border-radius: 3px; color: #cedde2; background: rgba(255,255,255,.04); font-size: .68rem; font-weight: 800; text-transform: capitalize; }
.save-card-actions { display: flex; width: 105px; padding: 13px; flex-direction: column; justify-content: center; gap: 8px; }
.empty-state { display: flex; padding: 48px 20px; color: var(--muted); flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-state-icon { display: grid; width: 62px; height: 62px; margin-bottom: 14px; place-items: center; color: var(--cyan); border: 1px solid var(--border); transform: rotate(45deg); font: 700 1.5rem/1 var(--pixel); }
.empty-state-icon + h3 { color: var(--paper); }
.empty-state .ui-button { margin-top: 10px; }

/* Compte et salles en ligne */
.online-panel { min-height: min(680px,calc(100vh - 40px)); }
.online-account-chip { display: flex; padding: 7px 10px; align-items: center; gap: 8px; border: 1px solid rgba(114,209,124,.3); border-radius: 999px; background: rgba(56,143,87,.1); font-size: .78rem; }
.online-status { min-height: 42px; margin: 18px 0; padding: 11px 14px; border: 1px solid var(--border); border-left: 3px solid var(--cyan); border-radius: 4px; color: var(--muted); background: rgba(4,12,18,.38); }
.online-status.is-error { border-left-color: var(--red); color: #ffc1c6; }
.online-status.is-success { border-left-color: var(--green); color: #c9f2ce; }
.auth-layout, .online-member-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.online-member-layout { grid-template-columns: repeat(2,minmax(0,1fr)); }
.online-card { display: flex; min-width: 0; padding: 18px; gap: 14px; border: 1px solid var(--border); border-radius: 6px; background: rgba(255,255,255,.025); flex-direction: column; }
.online-card > div:first-child p:last-child { margin: 0; color: var(--muted); font-size: .82rem; }
.online-card > .ui-button:last-child { margin-top: auto; }
.online-profile { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
.online-profile > div { min-width: 0; }
.online-profile-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
#hosted-worlds-button { min-width: 185px; }
#hosted-worlds-button > strong { display: inline-grid; min-width: 24px; height: 22px; padding: 0 6px; place-items: center; border-radius: 999px; color: var(--ink-950); background: var(--cyan); font-size: .7rem; font-variant-numeric: tabular-nums; }
.online-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field select { width: 100%; min-height: 42px; padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--paper); background: rgba(4,12,18,.52); }
.room-code-input { letter-spacing: .22em; text-transform: uppercase; text-align: center; font: 700 1.2rem/1 var(--pixel) !important; }
.online-session-badge { position: absolute; right: var(--safe-right); bottom: var(--safe-bottom); display: flex; min-height: 46px; padding: 7px 10px; align-items: center; gap: 9px; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--paper); background: rgba(8,17,24,.86); text-align: left; }
.online-session-badge > span:nth-child(2) { display: grid; }
.online-session-badge small { color: var(--muted); font-size: .55rem; text-transform: uppercase; }
.online-session-badge strong { color: var(--cyan); font: 700 .72rem/1.2 var(--pixel); letter-spacing: .12em; }
.online-session-badge > span:last-child { padding-left: 8px; border-left: 1px solid var(--border); color: var(--muted); font-size: .68rem; }

.game-chat { position: absolute; z-index: 20; left: var(--safe-left); bottom: calc(var(--safe-bottom) + 62px); display: grid; width: min(360px,calc(100vw - 24px)); max-height: min(245px,42vh); overflow: hidden; border-radius: 6px; background: rgba(7,16,23,.9); pointer-events: auto; }
.game-chat-header { display: flex; min-height: 34px; padding: 7px 10px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); }
.game-chat-header strong { font-size: .72rem; }
.game-chat-header small { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: .58rem; }
.game-chat-header kbd { min-width: auto; min-height: 17px; padding: 2px 4px; border-bottom-width: 2px; font-size: .48rem; }
.game-chat-log { display: grid; min-height: 62px; max-height: 145px; margin: 0; padding: 7px 9px; overflow: auto; align-content: end; gap: 6px; list-style: none; scrollbar-color: var(--ink-600) transparent; user-select: text; }
.game-chat-log:empty::before { content: "Aucun message pour le moment."; align-self: center; color: var(--muted); font-size: .68rem; font-style: italic; text-align: center; }
.game-chat-message { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 8px; padding-left: 7px; border-left: 2px solid rgba(95,210,213,.38); }
.game-chat-message.is-own { border-left-color: var(--green); }
.game-chat-author { overflow: hidden; color: var(--cyan); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.game-chat-message.is-own .game-chat-author { color: var(--green); }
.game-chat-time { color: #8093a1; font-size: .56rem; font-variant-numeric: tabular-nums; }
.game-chat-text { grid-column: 1 / -1; margin-top: 1px; overflow-wrap: anywhere; color: #e1e8e6; font-size: .72rem; line-height: 1.3; white-space: pre-wrap; }
.game-chat-form { display: grid; grid-template-columns: minmax(0,1fr) 38px; gap: 6px; padding: 7px; border-top: 1px solid var(--border); background: rgba(0,0,0,.16); }
.game-chat-form input { width: 100%; min-width: 0; height: 36px; padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--paper); background: rgba(4,11,16,.82); cursor: text; }
.game-chat-form input::placeholder { color: #788b99; }
.game-chat-form button { display: grid; width: 38px; height: 36px; padding: 0; place-items: center; border: 1px solid rgba(114,209,124,.52); border-radius: 4px; color: #d9f5dd; background: rgba(50,135,91,.48); }
.game-chat-form button:not(:disabled):hover { border-color: var(--green); background: rgba(58,157,102,.64); }
.game-chat[data-connection-state="reconnecting"] .game-chat-form, .game-chat[data-connection-state="offline"] .game-chat-form { opacity: .65; }

.hosted-worlds-modal { width: min(820px,100%); }
.hosted-worlds-hint { margin: 16px 0 0; color: var(--muted); font-size: .82rem; }
.hosted-worlds-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; max-height: min(52vh,470px); padding: 2px; overflow: auto; }
.hosted-world-card { display: grid; min-width: 0; padding: 14px; gap: 11px; border: 1px solid var(--border); border-radius: 6px; background: rgba(255,255,255,.025); }
.hosted-world-card:hover { border-color: rgba(95,210,213,.42); background: rgba(255,255,255,.04); }
.hosted-world-heading { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hosted-world-heading > span:first-child { display: grid; min-width: 0; }
.hosted-world-heading strong { overflow: hidden; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.hosted-world-heading small { color: var(--muted); font-size: .67rem; }
.hosted-world-code { flex: 0 0 auto; color: var(--cyan); font: 700 .7rem/1.2 var(--pixel); letter-spacing: .08em; }
.hosted-world-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.hosted-world-meta span { padding: 3px 6px; border: 1px solid var(--border); border-radius: 3px; color: var(--muted); background: rgba(255,255,255,.025); font-size: .65rem; }
.hosted-world-actions { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: auto; }
.hosted-world-actions .ui-button { min-height: 34px; margin: 0; padding: 5px 9px; font-size: .72rem; }
.hosted-worlds-empty { padding-block: 30px; }
.hosted-worlds-empty .empty-state-icon { width: 45px; height: 45px; }
.hosted-worlds-modal[aria-busy="true"] .hosted-worlds-list { opacity: .55; }

.settings-layout { max-width: 830px; }
.settings-form { padding-top: 20px; }
.settings-group { display: grid; grid-template-columns: minmax(155px, .7fr) minmax(220px, 1.3fr); gap: 12px 22px; margin: 0 0 22px; padding: 18px; border: 1px solid var(--border); border-radius: 6px; }
.settings-group legend { padding: 0 8px; color: var(--gold); font: 700 .68rem/1 var(--pixel); text-transform: uppercase; }
.settings-group > label { align-self: center; color: #d3dfe3; font-weight: 800; }
.settings-group select, .field input, .search-field, .craft-quantity input {
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: var(--paper);
  background: rgba(4,12,18,.52);
}
.range-setting { display: flex; align-items: center; justify-content: space-between; }
.range-setting output { color: var(--cyan); font-size: .78rem; }
input[type="range"] { width: 100%; height: 7px; border-radius: 0; appearance: none; background: #304557; }
input[type="range"]::-webkit-slider-thumb { width: 18px; height: 22px; border: 2px solid #d8f1de; border-radius: 2px; appearance: none; background: var(--green); box-shadow: 0 2px 4px #0008; }
input[type="range"]::-moz-range-thumb { width: 16px; height: 20px; border: 2px solid #d8f1de; border-radius: 2px; background: var(--green); }
.toggle-setting { display: flex; grid-column: 1 / -1; align-items: center !important; justify-content: space-between; gap: 20px; }
.toggle-setting span { display: grid; }
.toggle-setting small { color: var(--muted); font-weight: 600; }
input[role="switch"] { position: relative; width: 43px; height: 24px; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 13px; appearance: none; background: #273949; transition: background .15s; }
input[role="switch"]::after { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 2px; border-radius: 2px; background: #c1ccd0; transition: transform .15s; }
input[role="switch"]:checked { background: var(--green-dark); }
input[role="switch"]:checked::after { transform: translateX(18px); background: #e8f5e5; }
.settings-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 18px; border-top: 1px solid var(--border); }
.settings-hint { margin: 18px 0; color: var(--muted); }

.controls-list { display: grid; gap: 6px; max-height: calc(100vh - 265px); overflow: auto; padding-right: 5px; }
.control-row { display: grid; grid-template-columns: minmax(170px, 1fr) auto; align-items: center; gap: 14px; min-height: 52px; padding: 8px 12px; border: 1px solid transparent; border-radius: 4px; background: rgba(255,255,255,.025); }
.control-row:hover { border-color: var(--border); }
.control-row span { display: grid; font-weight: 800; }
.control-row small { color: var(--muted); font-weight: 600; }
.key-bind { min-width: 94px; min-height: 34px; padding: 5px 10px; border: 1px solid var(--border-strong); border-bottom-width: 3px; border-radius: 4px; color: var(--paper); background: #263b4c; font: 700 .68rem/1 var(--pixel); }
.key-bind.is-listening { color: #08130d; border-color: var(--gold); background: var(--gold); animation: key-pulse .8s infinite alternate; }

.credits-panel { margin-top: max(20px, 7vh); text-align: center; }
.credits-panel .panel-header { text-align: left; }
.credits-crystal { width: 74px; height: 74px; margin: 45px auto 32px; transform: rotate(45deg); border: 5px solid #172d40; background: linear-gradient(135deg,#e0fff6 0 15%,#5fd2d5 16% 53%,#6779ce 54% 100%); box-shadow: inset -10px -10px rgba(5,19,49,.27),0 0 40px rgba(95,210,213,.45); }
.credits-list { max-width: 460px; margin: 30px auto; border-top: 1px solid var(--border); }
.credits-list div { display: flex; padding: 13px; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--border); }
.credits-list dt { color: var(--muted); }
.credits-list dd { margin: 0; font-weight: 800; }
.credits-thanks { color: var(--gold); font-weight: 800; }

/* World form and modals */
.modal-dialog { width: min(760px, calc(100% - 24px)); max-width: none; max-height: calc(100% - 24px); padding: 0; overflow: visible; border: 0; color: var(--paper); background: transparent; }
.modal-dialog::backdrop { background: rgba(3,8,12,.76); backdrop-filter: blur(6px); }
.modal-card { max-height: calc(100vh - 24px); padding: clamp(18px,3vw,28px); overflow: auto; border-radius: 8px; }
.modal-card--small { width: min(430px,100%); margin: 0 auto; text-align: center; }
.world-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 22px 0; }
.field { display: grid; gap: 7px; }
.field--wide { grid-column: 1 / -1; }
.field > span:first-child, .choice-field legend { color: #d7e1e3; font-weight: 900; }
.field small { color: var(--muted); }
.field input { width: 100%; outline: 0; }
.field input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(95,210,213,.14); }
.input-action { display: flex; }
.input-action input { min-width: 0; border-radius: 4px 0 0 4px; }
.input-action button { width: 48px; border: 1px solid var(--border-strong); border-left: 0; border-radius: 0 4px 4px 0; background: rgba(67,99,113,.5); font: 700 1rem/1 var(--pixel); }
.choice-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-field legend { margin-bottom: 8px; }
.segmented-control { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.segmented-control--vertical { grid-template-columns: 1fr; }
.segmented-control label { position: relative; }
.segmented-control input { position: absolute; opacity: 0; pointer-events: none; }
.segmented-control label > span { display: flex; min-height: 70px; padding: 10px; border: 1px solid var(--border); border-radius: 5px; background: rgba(255,255,255,.025); flex-direction: column; justify-content: center; transition: border-color .12s, background .12s, transform .12s; }
.segmented-control label:hover > span { border-color: var(--border-strong); transform: translateY(-1px); }
.segmented-control input:checked + span { border-color: var(--green); background: rgba(74,172,110,.14); box-shadow: inset 0 0 0 1px rgba(114,209,124,.15); }
.segmented-control input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.segmented-control small { color: var(--muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 17px; border-top: 1px solid var(--border); }
.confirm-icon { display: grid; width: 56px; height: 56px; margin: 5px auto 20px; place-items: center; border: 3px solid var(--red); color: var(--red); transform: rotate(45deg); font: 700 1.2rem/1 var(--pixel); }
.modal-card--small h2 { margin-bottom: 12px; }
.modal-card--small p { color: var(--muted); }

/* Loading */
.screen--loading { display: grid; padding: 24px; place-items: center; overflow: auto; background: radial-gradient(circle at 50% 26%,#284b52,#101c29 45%,#080d14 80%); }
.loading-card { position: relative; z-index: 1; width: min(720px,100%); padding: clamp(24px,4vw,42px); border-radius: 8px; }
.loading-card h2 { margin-bottom: 8px; }
.seed-label { color: var(--muted); font-family: var(--pixel); font-size: .7rem; }
.progress-block { margin: 28px 0 22px; }
.progress-meta { display: flex; margin-bottom: 8px; justify-content: space-between; gap: 20px; }
.progress-meta strong { color: var(--green); font-family: var(--pixel); }
.progress-track { height: 18px; padding: 3px; border: 1px solid var(--border-strong); background: #071016; }
.progress-track span { display: block; width: 0; height: 100%; background: repeating-linear-gradient(135deg,#72d17c 0 12px,#5cbd70 12px 24px); box-shadow: 0 0 16px rgba(114,209,124,.28); transition: width .2s ease; }
.loading-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px 15px; padding: 0; list-style: none; counter-reset: loading-step; }
.loading-steps li { position: relative; padding: 7px 7px 7px 27px; color: #718797; font-size: .75rem; font-weight: 800; counter-increment: loading-step; }
.loading-steps li::before { content: counter(loading-step); position: absolute; left: 0; top: 7px; display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid #496073; font: 700 .51rem/1 var(--pixel); }
.loading-steps li.is-current { color: var(--paper); }
.loading-steps li.is-current::before { color: #092015; border-color: var(--green); background: var(--green); animation: loading-step-pulse .7s infinite alternate; }
.loading-steps li.is-complete { color: var(--green); }
.loading-steps li.is-complete::before { content: "✓"; border-color: var(--green-dark); }
.loading-tip { display: flex; margin-top: 24px; padding: 14px; align-items: center; gap: 14px; border: 1px solid rgba(240,197,91,.25); background: rgba(240,197,91,.06); }
.loading-tip > span { color: var(--gold); font-size: 1.2rem; }
.loading-tip p { display: grid; margin: 0; font-size: .8rem; }
.loading-tip strong { color: var(--gold); text-transform: uppercase; }
.loading-scene { position: absolute; left: calc(50% - 390px); top: calc(50% - 300px); width: 64px; height: 64px; opacity: .6; image-rendering: pixelated; }
.loading-miner { position: absolute; left: 16px; top: 20px; width: 28px; height: 36px; background: linear-gradient(#d5ac7f 0 30%,#5b8794 30% 68%,#394c55 68%); box-shadow: 4px -7px 0 #b67b42,-5px 34px 0 -1px #273844,14px 34px 0 -1px #273844; }
.loading-pickaxe { position: absolute; left: 40px; top: 15px; width: 5px; height: 46px; transform: rotate(35deg); transform-origin: 50% 80%; background: #9a6d46; animation: pickaxe-swing .8s ease-in-out infinite alternate; }
.loading-pickaxe::before { content: ""; position: absolute; left: -13px; top: 0; width: 31px; height: 6px; background: #9fa9a5; }

/* Canvas and HUD */
.screen--game { background: #101820; }
#game-canvas { display: block; width: 100%; height: 100%; outline: none; background: #1b3342; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }
.hud { position: absolute; inset: 0; padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); pointer-events: none; }
.hud button, .hud [role="toolbar"] { pointer-events: auto; }
.hud-vitals { position: absolute; left: var(--safe-left); top: var(--safe-top); display: flex; min-width: min(370px,calc(100vw - 24px)); padding: 10px; gap: 10px; border-radius: 6px; }
.player-badge { display: grid; width: 55px; height: 55px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 2px solid #638093; background: #294557; }
.player-badge span { width: 25px; height: 31px; background: linear-gradient(#d9aa78 0 33%,#5fb1b1 33% 72%,#3c5668 72%); box-shadow: 0 -5px #704c33; }
.vitals-stack { display: grid; flex: 1; gap: 3px; }
.vital-row { display: grid; grid-template-columns: 18px minmax(90px,1fr) 72px; align-items: center; gap: 5px; font-size: .75rem; }
.vital-icon { text-align: center; text-shadow: 0 1px #000; }
.vital-row strong { font-variant-numeric: tabular-nums; text-align: right; }
.vital-track, .experience-track { height: 9px; padding: 2px; overflow: hidden; border: 1px solid rgba(0,0,0,.6); background: #060b0f; }
.vital-track span, .experience-track span { display: block; width: 100%; height: 100%; transition: width .22s ease; }
.vital-row--health .vital-icon { color: #ef6570; }
.vital-row--health .vital-track span { background: linear-gradient(90deg,#b7344b,#ee6570); }
.vital-row--hunger .vital-icon { color: var(--orange); }
.vital-row--hunger .vital-track span { background: linear-gradient(90deg,#b56537,#eda050); }
.vital-row--stamina .vital-icon { color: var(--green); }
.vital-row--stamina .vital-track span { background: linear-gradient(90deg,#388f5e,#72d17c); }
.experience-row { display: grid; grid-template-columns: 47px 1fr 68px; align-items: center; gap: 5px; margin-top: 2px; color: var(--muted); font-size: .7rem; }
.experience-track { height: 6px; padding: 1px; }
.experience-track span { width: 0; background: var(--violet); }
.experience-row > span:last-child { text-align: right; }

.hud-world { position: absolute; top: var(--safe-top); left: 50%; display: flex; min-height: 44px; padding: 7px 11px; align-items: center; gap: 13px; border-radius: 5px; transform: translateX(-50%); font-size: .78rem; }
.world-time, .world-detail { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.world-time strong { font: 700 .8rem/1 var(--pixel); }
.world-time > span:first-child { color: var(--gold); }
.world-detail { padding-left: 12px; border-left: 1px solid var(--border); color: #d5e0e3; }
#day-text { color: var(--muted); }

.tracked-quest { position: absolute; right: var(--safe-right); top: var(--safe-top); width: min(285px,calc(100vw - 24px)); padding: 11px 13px; border-radius: 5px; }
.tracked-quest-heading { display: flex; align-items: center; gap: 7px; color: var(--cyan); font: 700 .58rem/1 var(--pixel); text-transform: uppercase; }
.tracked-quest-heading span:nth-child(2) { flex: 1; }
.quest-gem { display: block; width: 9px; height: 9px; transform: rotate(45deg); background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.tracked-quest > strong { display: block; margin: 8px 0 3px; font-size: .87rem; }
.tracked-quest p { margin: 0; color: var(--muted); font-size: .75rem; }
.quest-progress { height: 6px; margin-top: 9px; padding: 1px; background: #071016; }
.quest-progress span { display: block; width: 0; height: 100%; background: var(--cyan); transition: width .2s; }
.tracked-quest > small { display: block; margin-top: 3px; color: var(--muted); text-align: right; }

.hotbar { position: absolute; left: 50%; bottom: var(--safe-bottom); display: flex; padding: 5px; gap: 4px; transform: translateX(-50%); border-radius: 6px; }
.item-slot { position: relative; display: grid; width: 50px; height: 50px; padding: 3px; place-items: center; border: 1px solid #516678; border-radius: 3px; background: rgba(9,17,24,.88); box-shadow: inset 0 0 0 2px rgba(255,255,255,.025); color: var(--paper); touch-action: none; }
.item-slot:hover { border-color: #87a7b7; background: rgba(26,43,55,.95); }
.item-slot.is-selected { border-color: var(--gold); background: rgba(77,66,36,.9); box-shadow: 0 0 0 2px rgba(240,197,91,.32), inset 0 0 0 1px var(--gold); transform: translateY(-3px); }
.item-slot.is-drag-source { opacity: .38; }
.item-slot.is-drop-target { border-color: var(--green); background: rgba(58,126,76,.34); }
.slot-key { position: absolute; left: 3px; top: 2px; color: #8ca0ae; font: 700 .52rem/1 var(--pixel); }
.slot-icon { display: grid; width: 32px; height: 32px; place-items: center; font: 700 1.35rem/1 var(--pixel); text-shadow: 0 2px #0009; image-rendering: pixelated; }
.slot-count { position: absolute; right: 3px; bottom: 1px; font: 700 .64rem/1 var(--pixel); text-shadow: 1px 1px #000,-1px -1px #000; }
.slot-durability { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; background: #351d27; }
.slot-durability span { display: block; height: 100%; background: var(--green); }
.rarity-uncommon { box-shadow: inset 0 0 0 1px rgba(114,209,124,.4); }
.rarity-rare { box-shadow: inset 0 0 0 1px rgba(85,155,222,.55); }
.rarity-epic { box-shadow: inset 0 0 0 1px rgba(174,125,227,.6); }
.rarity-legendary { box-shadow: inset 0 0 0 1px rgba(240,197,91,.65); }

.save-indicator { position: absolute; left: var(--safe-left); bottom: var(--safe-bottom); display: flex; padding: 7px 11px; align-items: center; gap: 8px; border-radius: 4px; color: var(--muted); background: rgba(8,16,23,.78); font-size: .72rem; }
.save-spinner { width: 12px; height: 12px; border: 2px solid #506675; border-top-color: var(--green); animation: spin .7s linear infinite; }
.save-indicator.is-saved .save-spinner { border-color: var(--green); animation: none; }
.notification-stack { position: absolute; left: 50%; top: 15%; display: grid; width: min(390px,calc(100vw - 24px)); gap: 8px; transform: translateX(-50%); }
.notification { display: grid; grid-template-columns: 37px minmax(0,1fr) auto; min-height: 52px; padding: 8px 10px; align-items: center; gap: 9px; border: 1px solid var(--border-strong); border-left: 3px solid var(--cyan); border-radius: 4px; background: rgba(10,20,28,.92); box-shadow: 0 8px 25px #0007; animation: notification-in .22s ease-out; pointer-events: auto; }
.notification.is-leaving { animation: notification-out .2s ease-in forwards; }
.notification--success { border-left-color: var(--green); }
.notification--warning { border-left-color: var(--gold); }
.notification--danger { border-left-color: var(--red); }
.notification-icon { display: grid; width: 34px; height: 34px; place-items: center; background: rgba(255,255,255,.05); font: 700 1rem/1 var(--pixel); }
.notification-copy { display: grid; min-width: 0; }
.notification-copy strong { font-size: .8rem; }
.notification-copy span { overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; }
.notification-close { width: 25px; height: 25px; border: 0; background: transparent; color: var(--muted); }
.discovery-banner { position: absolute; left: 50%; top: 24%; display: grid; min-width: min(440px,calc(100vw - 24px)); padding: 16px 40px; border-block: 1px solid rgba(240,197,91,.45); transform: translateX(-50%); background: linear-gradient(90deg,transparent,rgba(8,17,23,.84) 20% 80%,transparent); text-align: center; animation: discovery-in .55s ease-out; }
.discovery-banner strong { font: 700 1.1rem/1.4 var(--pixel); }
.discovery-banner small { color: var(--muted); }

.boss-bar { position: absolute; z-index: 15; left: 50%; top: calc(var(--safe-top) + 76px); width: min(720px,calc(100vw - 30px)); padding: 9px 12px; transform: translateX(-50%); border-color: rgba(229,93,104,.55); }
.boss-heading { display: grid; grid-template-columns: 80px 1fr 115px; align-items: center; margin-bottom: 6px; gap: 10px; font-size: .68rem; }
.boss-heading strong { text-align: center; font: 700 .75rem/1 var(--pixel); }
.boss-heading > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
#boss-phase { color: var(--red); font-weight: 900; }
.boss-track { height: 13px; padding: 2px; background: #09080d; }
.boss-track span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#8e2940,#e55763); box-shadow: 0 0 12px rgba(229,93,104,.45); transition: width .25s; }

/* In-game panels */
.game-panel { position: absolute; z-index: 30; inset: 50% auto auto 50%; width: min(1000px,calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; transform: translate(-50%,-50%); border-radius: 8px; animation: panel-open .17s ease-out; }
.game-panel::before { content: ""; position: fixed; z-index: -2; inset: -100vh -100vw; background: rgba(2,7,11,.54); backdrop-filter: blur(3px); }
.game-panel-header { position: sticky; z-index: 3; top: 0; padding: 18px 20px 14px; background: rgba(13,24,35,.97); }
.panel-shortcuts { display: flex; min-height: 37px; padding: 8px 18px; justify-content: center; gap: 28px; border-top: 1px solid var(--border); color: var(--muted); background: rgba(6,13,19,.38); font-size: .68rem; }
.panel-shortcuts kbd { min-width: 20px; min-height: 18px; padding: 2px 4px; font-size: .53rem; }

.inventory-layout { display: grid; grid-template-columns: 210px 1fr; min-height: 470px; }
.equipment-column { position: relative; padding: 20px; border-right: 1px solid var(--border); background: rgba(6,15,22,.24); }
.equipment-avatar { position: relative; display: grid; height: 170px; margin-bottom: 13px; place-items: center; background: radial-gradient(ellipse,rgba(95,210,213,.12),transparent 65%); }
.equipment-avatar::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 5px; height: 11px; border-radius: 50%; background: rgba(0,0,0,.35); }
.avatar-head { position: absolute; z-index: 1; top: 22px; width: 45px; height: 48px; border: 5px solid #263947; background: #d6a879; box-shadow: inset 0 12px #72513b; }
.avatar-body { position: absolute; z-index: 0; top: 65px; width: 77px; height: 90px; border: 7px solid #253b48; background: linear-gradient(90deg,#437f83 0 24%,#68b5ae 24% 76%,#437f83 76%); clip-path: polygon(20% 0,80% 0,100% 32%,83% 42%,82% 100%,18% 100%,17% 42%,0 32%); }
.equipment-slots { position: absolute; display: contents; }
.equipment-slots .item-slot { position: absolute; width: 42px; height: 42px; }
.equipment-slots .item-slot:nth-child(1) { left: 9px; top: 3px; }
.equipment-slots .item-slot:nth-child(2) { right: 9px; top: 48px; }
.equipment-slots .item-slot:nth-child(3) { left: 9px; top: 93px; }
.equipment-slots .item-slot:nth-child(4) { right: 9px; top: 138px; }
.player-stats { display: grid; gap: 5px; }
.player-stats div { display: flex; padding: 6px 8px; justify-content: space-between; border-bottom: 1px solid var(--border); color: var(--muted); font-size: .75rem; }
.player-stats strong { color: var(--paper); }
.inventory-main { padding: 20px; overflow: hidden; }
.slot-grid { display: grid; grid-template-columns: repeat(9,minmax(42px,1fr)); gap: 6px; }
.slot-grid .item-slot { width: 100%; aspect-ratio: 1; height: auto; min-width: 0; }
.inventory-grid { padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.inventory-bottom { display: grid; grid-template-columns: 1fr 85px; margin-top: 16px; align-items: end; gap: 14px; }
.section-label { display: block; margin-bottom: 7px; color: var(--muted); font: 700 .59rem/1 var(--pixel); text-transform: uppercase; }
.drop-zone { min-height: 66px; padding: 8px; border: 1px dashed rgba(229,93,104,.55); border-radius: 4px; color: #dc9da2; background: rgba(108,40,50,.15); font-weight: 900; }
.drop-zone span { display: block; font: 700 1rem/1.4 var(--pixel); }
.drop-zone.is-drop-target { border-style: solid; background: rgba(172,56,70,.38); }

.crafting-layout, .journal-layout { display: grid; grid-template-columns: minmax(320px,.9fr) minmax(340px,1.1fr); min-height: 520px; }
.recipe-browser, .quest-browser { padding: 18px; border-right: 1px solid var(--border); background: rgba(6,15,22,.24); }
.search-field { display: flex; align-items: center; gap: 8px; padding: 0 11px; }
.search-field input { width: 100%; height: 39px; padding: 0; border: 0; outline: 0; color: var(--paper); background: transparent; }
.filter-tabs { display: flex; margin: 12px 0; gap: 4px; overflow-x: auto; }
.filter-tabs button { min-height: 31px; padding: 5px 9px; white-space: nowrap; border: 1px solid transparent; border-radius: 3px; color: var(--muted); background: transparent; font-size: .7rem; font-weight: 900; }
.filter-tabs button:hover { color: var(--paper); background: rgba(255,255,255,.04); }
.filter-tabs button.is-active { color: var(--green); border-color: rgba(114,209,124,.3); background: rgba(114,209,124,.08); }
.filter-tabs button span { display: inline-grid; min-width: 17px; height: 17px; margin-left: 3px; place-items: center; border-radius: 50%; color: var(--ink-950); background: var(--green); font-size: .61rem; }
.recipe-list, .quest-list { display: grid; max-height: 410px; gap: 5px; overflow-y: auto; padding-right: 4px; }
.recipe-card, .quest-card { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; min-height: 55px; padding: 6px; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: 4px; color: var(--paper); background: rgba(255,255,255,.025); text-align: left; }
.recipe-card:hover, .quest-card:hover { border-color: var(--border); background: rgba(255,255,255,.045); }
.recipe-card.is-selected, .quest-card.is-selected { border-color: var(--green); background: rgba(78,148,92,.12); }
.recipe-card.is-locked { opacity: .48; }
.recipe-icon, .quest-icon { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--border); background: rgba(5,12,18,.45); font-size: 1.2rem; }
.recipe-card-copy, .quest-card-copy { display: grid; min-width: 0; }
.recipe-card-copy strong, .quest-card-copy strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.recipe-card-copy small, .quest-card-copy small { color: var(--muted); font-size: .66rem; }
.craftable-mark { color: var(--green); font: 700 .7rem/1 var(--pixel); }
.craftable-mark.is-missing { color: var(--red); }
.recipe-detail, .quest-detail { padding: clamp(18px,3vw,30px); }
.recipe-result { display: flex; align-items: center; gap: 18px; }
.item-large { display: grid; width: 82px; height: 82px; flex: 0 0 auto; place-items: center; border: 2px solid var(--border-strong); background: #0c1720; font-size: 2.4rem; }
.recipe-result h3, .quest-detail h3 { font: 700 1.08rem/1.2 var(--pixel); }
.recipe-result p { margin: 0; color: var(--muted); }
.station-required { display: flex; margin: 18px 0; padding: 10px; gap: 10px; border: 1px solid rgba(95,210,213,.24); background: rgba(95,210,213,.055); color: var(--muted); }
.station-required strong { color: var(--paper); }
.ingredient-list { display: grid; gap: 6px; }
.ingredient { display: grid; grid-template-columns: 34px 1fr auto; min-height: 42px; padding: 4px 8px; align-items: center; gap: 9px; border: 1px solid var(--border); background: rgba(255,255,255,.02); }
.ingredient-icon { display: grid; width: 31px; height: 31px; place-items: center; background: #111e28; }
.ingredient-count { color: var(--green); font-weight: 900; }
.ingredient.is-missing .ingredient-count { color: var(--red); }
.craft-quantity { display: flex; margin: 24px 0 12px; align-items: center; gap: 12px; }
.craft-quantity > span:first-child { flex: 1; font-weight: 900; }
.stepper { display: grid; grid-template-columns: 32px 48px 32px; }
.stepper button { border: 1px solid var(--border-strong); background: #293d4c; font-weight: 900; }
.stepper input { width: 48px; min-height: 34px; padding: 4px; border-inline: 0; border-radius: 0; text-align: center; appearance: textfield; }
.stepper input::-webkit-inner-spin-button { display: none; }

.quest-card { grid-template-columns: 35px minmax(0,1fr) auto; }
.quest-icon { width: 33px; height: 33px; font-size: .9rem; transform: rotate(0deg); }
.quest-status-dot { width: 8px; height: 8px; transform: rotate(45deg); background: var(--cyan); }
.quest-status-dot.completed { background: var(--green); }
.quest-status-dot.locked { background: #5a6670; }
.quest-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.status-badge { padding: 4px 7px; border: 1px solid rgba(95,210,213,.3); color: var(--cyan); font-size: .65rem; font-weight: 900; text-transform: uppercase; }
#quest-description { color: var(--muted); line-height: 1.55; }
.quest-objectives, .quest-rewards { display: grid; gap: 7px; }
.objective-row { display: grid; grid-template-columns: 22px 1fr auto; padding: 8px 0; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); font-size: .78rem; }
.objective-check { display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid #526677; color: var(--green); font-size: .7rem; }
.objective-row.is-complete .objective-check { border-color: var(--green); background: rgba(114,209,124,.1); }
.objective-row small { color: var(--muted); }
.reward-row { display: flex; padding: 8px; align-items: center; gap: 9px; border: 1px solid var(--border); background: rgba(240,197,91,.045); }
.reward-icon { display: grid; width: 30px; height: 30px; place-items: center; color: var(--gold); background: rgba(240,197,91,.08); }
.quest-actions { margin-top: 24px; }

.chest-panel { width: min(950px,calc(100vw - 28px)); }
.chest-layout { display: grid; grid-template-columns: 1fr 40px 1fr; min-height: 360px; padding: 24px; align-items: center; gap: 10px; }
.chest-layout section { align-self: stretch; }
.chest-layout h3 { color: var(--muted); font: 700 .66rem/1 var(--pixel); text-transform: uppercase; }
.chest-grid { grid-template-columns: repeat(6,1fr); }
.transfer-arrows { color: var(--cyan); text-align: center; font: 700 1.3rem/1 var(--pixel); }

.pause-panel { z-index: 50; inset: 0; width: 100%; max-height: none; transform: none; display: grid; place-items: center; overflow: auto; border: 0; border-radius: 0; background: rgba(2,7,11,.62); backdrop-filter: blur(5px) saturate(.7); }
.pause-panel::before { display: none; }
.pause-card { width: min(390px,calc(100% - 28px)); padding: 28px; border-radius: 8px; text-align: center; }
.pause-card h2 { font-size: 2rem; }
.pause-card > p:not(.eyebrow) { color: var(--muted); }
.pause-card nav { display: grid; gap: 9px; margin: 24px 0; }
.pause-card small { color: var(--muted); }
.pause-online-leave { margin-top: 8px; }

/* Dialogue, tutorial, death, debug */
.dialogue-panel { position: absolute; z-index: 45; left: 50%; bottom: max(24px,var(--safe-bottom)); display: grid; grid-template-columns: 155px 1fr; width: min(900px,calc(100vw - 32px)); min-height: 190px; padding: 18px; transform: translateX(-50%); border-radius: 7px; animation: dialogue-in .2s ease-out; }
.dialogue-portrait { display: grid; margin-right: 18px; overflow: hidden; place-items: center; border: 1px solid var(--border-strong); background: radial-gradient(circle at 50% 35%,#476778,#182b37 70%); }
.dialogue-portrait span { position: relative; width: 72px; height: 88px; background: linear-gradient(#d5a878 0 38%,#567f8a 38%); box-shadow: 0 -13px #73523a; }
.dialogue-portrait span::before, .dialogue-portrait span::after { content: ""; position: absolute; top: 20px; width: 7px; height: 5px; background: #29343a; }
.dialogue-portrait span::before { left: 15px; }.dialogue-portrait span::after { right: 15px; }
.dialogue-content { min-width: 0; }
.dialogue-content h2 { font-size: 1rem; }
.dialogue-text { min-height: 48px; margin: 10px 0; color: #e0e7e5; line-height: 1.55; }
.dialogue-text::after { content: "▌"; color: var(--cyan); animation: caret .6s steps(1) infinite; }
.dialogue-text.is-complete::after { display: none; }
.dialogue-choices { display: grid; gap: 5px; margin: 8px 0; }
.dialogue-choice { padding: 7px 10px; border: 1px solid var(--border); color: #dce6e7; background: rgba(255,255,255,.025); text-align: left; font-weight: 800; }
.dialogue-choice:hover { border-color: var(--cyan); color: var(--cyan); }
.dialogue-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--muted); font-size: .7rem; }

.tutorial-card { position: absolute; z-index: 25; right: max(20px,var(--safe-right)); bottom: max(90px,calc(var(--safe-bottom) + 76px)); display: grid; grid-template-columns: 54px 1fr 34px; width: min(410px,calc(100vw - 30px)); padding: 14px; gap: 12px; border-radius: 6px; animation: tutorial-in .3s ease-out; }
.tutorial-icon { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid var(--border); color: var(--gold); background: rgba(255,255,255,.035); font: 700 1.1rem/1 var(--pixel); }
.tutorial-card h2 { font-size: .84rem; }
.tutorial-card p:not(.eyebrow) { margin: 6px 0; color: var(--muted); font-size: .78rem; }
.tutorial-count { position: absolute; right: 14px; top: -23px; color: var(--muted); font: 700 .55rem/1 var(--pixel); }
.tutorial-card > .text-button { grid-column: 2 / -1; justify-self: end; font-size: .7rem; }
.key-row { display: flex; gap: 5px; }

.death-screen { position: absolute; z-index: 80; inset: 0; display: grid; place-items: center; overflow: auto; background: rgba(13,4,8,.7); backdrop-filter: grayscale(.8) blur(2px); }
.death-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 180px 60px #3a0715; animation: death-pulse 2s infinite alternate; }
.death-content { position: relative; width: min(520px,calc(100% - 28px)); padding: 30px; text-align: center; }
.death-icon { display: grid; width: 68px; height: 68px; margin: 0 auto 30px; place-items: center; transform: rotate(45deg); color: var(--red); border: 4px solid var(--red); font: 700 1.3rem/1 var(--pixel); }
.death-content h2 { color: #f0d8da; font-size: clamp(1.7rem,4vw,2.8rem); }
.death-content p { color: #c8afb4; }
.death-timer { margin: 26px 0 12px; color: var(--muted); }
.death-content .ui-button, .death-content .text-button { width: min(320px,100%); margin: 6px auto; }

.debug-panel { position: absolute; z-index: 22; left: var(--safe-left); top: 95px; width: 230px; padding: 8px; border: 1px solid #62bd8b; color: #a5f1bd; background: rgba(2,11,8,.86); font: 500 .64rem/1.4 ui-monospace,monospace; pointer-events: auto; }
.debug-panel header { display: flex; padding-bottom: 5px; justify-content: space-between; border-bottom: 1px solid #376e50; }
.debug-panel dl { margin: 5px 0; }
.debug-panel dl div { display: flex; justify-content: space-between; gap: 12px; }
.debug-panel dt { opacity: .7; }.debug-panel dd { margin: 0; text-align: right; }
.debug-toggles { display: flex; padding-top: 5px; gap: 7px; border-top: 1px solid #376e50; flex-wrap: wrap; }

.item-tooltip { position: fixed; z-index: 110; width: min(270px,calc(100vw - 20px)); padding: 10px 12px; border-color: #667c8e; pointer-events: none; }
.item-tooltip h3 { margin: 0 0 4px; font-size: .82rem; }
.item-tooltip .tooltip-rarity { color: var(--muted); font: 700 .56rem/1 var(--pixel); text-transform: uppercase; }
.item-tooltip p { margin: 7px 0; color: #c5d2d7; font-size: .72rem; }
.item-tooltip dl { display: grid; margin: 8px 0 0; gap: 3px; font-size: .68rem; }
.item-tooltip dl div { display: flex; justify-content: space-between; }
.item-tooltip dt { color: var(--muted); }.item-tooltip dd { margin: 0; }
.drag-ghost { position: fixed; z-index: 120; display: grid; width: 45px; height: 45px; place-items: center; transform: translate(-50%,-50%); border: 1px solid var(--gold); background: rgba(10,20,28,.85); font-size: 1.4rem; pointer-events: none; }
.drag-ghost small { position: absolute; right: 2px; bottom: 0; font: 700 .6rem/1 var(--pixel); }
.noscript-message { position: fixed; z-index: 9999; inset: 0; display: grid; padding: 25px; place-items: center; color: var(--paper); background: var(--ink-950); font: 700 1rem/1.5 var(--pixel); text-align: center; }
.fatal-error { position: fixed; z-index: 10000; left: 50%; top: 50%; width: min(560px,calc(100% - 28px)); padding: 28px; transform: translate(-50%,-50%); border-radius: 8px; text-align: center; }
.fatal-error h1 { color: var(--red); font: 700 1.15rem/1.3 var(--pixel); }
.fatal-error p { color: var(--muted); }
.fatal-error pre { max-height: 150px; padding: 10px; overflow: auto; border: 1px solid var(--border); color: #edc3c6; background: rgba(5,10,14,.7); user-select: text; text-align: left; white-space: pre-wrap; }
.fatal-error .ui-button { width: 100%; margin-top: 16px; }

/* Motion */
@keyframes cloud-drift { from { translate: -180px 0; } to { translate: calc(100vw + 180px) 0; } }
@keyframes key-pulse { to { filter: brightness(1.25); } }
@keyframes loading-step-pulse { to { box-shadow: 0 0 12px var(--green); } }
@keyframes pickaxe-swing { from { transform: rotate(-25deg); } to { transform: rotate(47deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes notification-in { from { opacity: 0; transform: translateY(-12px) scale(.97); } }
@keyframes notification-out { to { opacity: 0; transform: translateY(-8px) scale(.97); } }
@keyframes discovery-in { from { opacity: 0; transform: translate(-50%,-12px); letter-spacing: .08em; } }
@keyframes panel-open { from { opacity: 0; transform: translate(-50%,calc(-50% + 8px)) scale(.985); } }
@keyframes dialogue-in { from { opacity: 0; transform: translate(-50%,12px); } }
@keyframes tutorial-in { from { opacity: 0; transform: translateX(12px); } }
@keyframes caret { 50% { opacity: 0; } }
@keyframes death-pulse { to { box-shadow: inset 0 0 220px 90px #4f071a; } }

/* Responsive laptop and mobile fallback */
@media (max-width: 1080px) {
  .hud-world { top: calc(var(--safe-top) + 73px); left: var(--safe-left); transform: none; }
  .tracked-quest { width: 245px; }
  .hotbar .item-slot { width: 46px; height: 46px; }
  .inventory-layout { grid-template-columns: 170px 1fr; }
  .equipment-column { padding: 14px; }
}

@media (max-width: 820px) {
  .main-menu-layout { align-items: center; }
  .brand { align-self: center; }
  .menu-footer { align-self: center; }
  .settings-group { grid-template-columns: 1fr; }
  .toggle-setting { grid-column: auto; }
  .loading-steps { grid-template-columns: repeat(2,1fr); }
  .hud-world { display: none; }
  .tracked-quest { top: calc(var(--safe-top) + 76px); }
  .hud-vitals { min-width: 320px; }
  .hotbar { max-width: calc(100vw - 20px); overflow-x: auto; }
  .hotbar .item-slot { width: 43px; height: 43px; flex: 0 0 43px; }
  .game-panel { max-height: calc(100vh - 12px); width: calc(100vw - 12px); }
  .inventory-layout { grid-template-columns: 1fr; }
  .equipment-column { display: none; }
  .slot-grid { gap: 4px; }
  .crafting-layout, .journal-layout { grid-template-columns: 1fr; }
  .recipe-browser, .quest-browser { border-right: 0; border-bottom: 1px solid var(--border); }
  .recipe-list, .quest-list { max-height: 210px; }
  .chest-layout { grid-template-columns: 1fr; }
  .transfer-arrows { transform: rotate(90deg); }
  .chest-grid { grid-template-columns: repeat(6,1fr); }
  .dialogue-panel { grid-template-columns: 90px 1fr; }
  .panel-shortcuts { display: none; }
  .auth-layout, .online-member-layout { grid-template-columns: 1fr; }
  .online-profile { grid-column: auto; }
  .online-session-badge { bottom: calc(var(--safe-bottom) + 65px); }
  .game-chat { bottom: calc(var(--safe-bottom) + 68px); }
}

@media (max-width: 600px) {
  body { font-size: 14px; }
  .main-menu-layout { padding-inline: 14px; }
  .brand { gap: 10px; }
  .brand-mark { width: 52px; height: 60px; }
  .brand-title { font-size: clamp(2rem,12vw,3rem); }
  .brand-subtitle { letter-spacing: .08em; }
  .menu-card { padding: 12px; }
  .menu-status-row { grid-template-columns: 1fr; }
  .account-summary { display: none; }
  .menu-online-players { min-height: 42px; }
  .menu-row { grid-template-columns: 1fr; gap: 0; }
  .menu-footer { display: none; }
  .panel-header { align-items: flex-start; }
  .panel-header > .ui-button { font-size: 0; }
  .panel-header > .ui-button::before { content: "+"; font-size: 1rem; }
  .save-card { grid-template-columns: 92px 1fr; }
  .save-card-actions { grid-column: 1 / -1; width: auto; padding-top: 0; flex-direction: row; }
  .save-card-actions > * { flex: 1; }
  .world-form-grid { grid-template-columns: 1fr; }
  .field--wide { grid-column: auto; }
  .segmented-control { grid-template-columns: 1fr; }
  .loading-steps { grid-template-columns: 1fr; }
  .loading-steps li:nth-child(n+6) { display: none; }
  .hud-vitals { min-width: 245px; padding: 7px; }
  .player-badge { display: none; }
  .vital-row { grid-template-columns: 15px minmax(75px,1fr) 60px; }
  .tracked-quest { display: none; }
  .boss-heading { grid-template-columns: 60px 1fr; }
  .boss-heading > span:last-child { display: none; }
  .inventory-main { padding: 12px; }
  .inventory-bottom { grid-template-columns: 1fr; }
  .drop-zone { min-height: 45px; }
  .item-slot { min-width: 32px; }
  .slot-icon { width: 26px; height: 26px; font-size: 1rem; }
  .dialogue-panel { grid-template-columns: 1fr; max-height: calc(100vh - 30px); overflow: auto; }
  .dialogue-portrait { display: none; }
  .dialogue-actions { align-items: flex-end; }
  .dialogue-actions > span { display: none; }
  .dialogue-actions .ui-button { width: 100%; }
  .tutorial-card { left: 15px; right: 15px; bottom: 75px; width: auto; }
  .debug-panel { top: 82px; width: 190px; }
  .online-profile { align-items: stretch; flex-direction: column; }
  .online-profile-actions { align-items: stretch; flex-direction: column; }
  .online-profile-actions .ui-button { width: 100%; }
  .online-fields-row { grid-template-columns: 1fr; }
  .hosted-worlds-list { grid-template-columns: 1fr; max-height: 48vh; }
  .hosted-world-actions { grid-template-columns: 1fr; }
  .online-session-badge { right: 8px; bottom: 72px; padding: 6px 8px; }
  .online-session-badge > span:last-child { display: none; }
  .game-chat { left: 8px; right: 8px; bottom: calc(var(--safe-bottom) + 112px); width: auto; max-height: 34vh; }
  .game-chat-log { max-height: 110px; }
  .game-chat-header small { display: none; }
}

@media (max-height: 660px) and (min-width: 700px) {
  .main-menu-layout { padding-block: 18px; }
  .brand { margin-bottom: 12px; transform: scale(.82); transform-origin: left bottom; }
  .menu-card { padding: 11px; }
  .ui-button { min-height: 38px; padding-block: 7px; }
  .menu-card > .ui-button, .menu-row .ui-button { margin-bottom: 6px; }
  .game-panel-header { padding-block: 10px; }
  .inventory-layout { min-height: 405px; }
  .equipment-avatar { height: 135px; }
  .crafting-layout, .journal-layout { min-height: 400px; }
  .recipe-list, .quest-list { max-height: 290px; }
  .game-chat-log { max-height: 82px; }
}

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

html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }

@media (forced-colors: active) {
  .panel, .panel-lite, .ui-button, .item-slot, .menu-online-players, .game-chat-form input, .game-chat-form button, .hosted-world-card { border: 1px solid CanvasText; }
  .vital-track span, .quest-progress span, .progress-track span { forced-color-adjust: none; }
}

.fatal-error {
  position: fixed; z-index: 9999; inset: 50% auto auto 50%; transform: translate(-50%,-50%);
  width: min(560px,calc(100vw - 32px)); padding: 28px; color: var(--text); background: #17232d;
}
.fatal-error pre { max-height: 180px; overflow: auto; margin: 16px 0; padding: 12px; border-radius: 8px; background: #0c141b; color: #ffb7b7; white-space: pre-wrap; }