:root{color-scheme:dark;font-family:Space Grotesk,Segoe UI,sans-serif;--bg: #0b1726;--panel: rgba(9, 18, 30, .78);--panel-strong: rgba(5, 12, 22, .9);--line: rgba(180, 232, 255, .16);--text: #eef7ff;--muted: #9bb4c8;--accent: #ffae57;--accent-soft: rgba(255, 174, 87, .18)}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:radial-gradient(circle at top,rgba(120,190,255,.18),transparent 38%),linear-gradient(180deg,#16314c,#0d1d32 48%,#09131f);color:var(--text)}body{font-family:Space Grotesk,Segoe UI,sans-serif}button,input,textarea,select{font:inherit}.game-shell{position:relative;width:100%;height:100%}#game-canvas{display:block;width:100%;height:100%}.names-layer{position:absolute;inset:0;z-index:6;pointer-events:none}.hud-card{position:absolute;z-index:5;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(180deg,#101e2fc7,#050c16d6);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 50px #01080f5c}.brand-card{top:20px;left:20px;width:min(360px,calc(100vw - 40px));padding:18px 20px}.brand-card h1{margin:0 0 8px;font-size:clamp(2rem,4vw,2.6rem);line-height:.95;letter-spacing:-.06em}.brand-card p{margin:0;color:var(--muted);line-height:1.45}.eyebrow{margin-bottom:10px;color:var(--accent);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase}.status-card{top:20px;right:20px;width:min(300px,calc(100vw - 40px));padding:16px 18px}.status-line{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}.status-line:last-child{border-bottom:0;padding-bottom:0}.status-line span{color:var(--muted)}.status-line strong{text-align:right;max-width:54%;overflow:hidden;text-overflow:ellipsis}.hud-skin-card{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07)}.hud-skin-card__frame{--preview-accent: #63b6ff;position:relative;min-height:88px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:radial-gradient(circle at 25% 22%,color-mix(in srgb,var(--preview-accent) 56%,white 44%),transparent 28%),linear-gradient(180deg,color-mix(in srgb,var(--preview-accent) 30%,#162437 70%),#0b1520)}.hud-skin-card__frame img{width:100%;height:100%;display:block;object-fit:cover;opacity:0;transition:opacity .18s ease}.hud-skin-card__frame img.visible{opacity:1}.hud-skin-placeholder{position:absolute;inset:0;display:grid;place-items:center;font-size:1rem;font-weight:700;letter-spacing:.18em;color:#ffffffc7;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hud-skin-placeholder.hidden{opacity:0}.hud-skin-card__meta{display:grid;align-content:center;gap:6px}.hud-skin-card__meta span{color:var(--muted);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}.hud-skin-card__meta strong{font-size:.96rem;line-height:1.2}.crosshair{position:absolute;inset:50% auto auto 50%;z-index:4;width:22px;height:22px;transform:translate(-50%,-50%);pointer-events:none}.crosshair:before,.crosshair:after{content:"";position:absolute;background:#ffffffeb;border-radius:999px}.crosshair:before{top:10px;left:0;width:22px;height:2px}.crosshair:after{left:10px;top:0;width:2px;height:22px}.mining-indicator{position:absolute;inset:calc(50% + 22px) auto auto 50%;z-index:4;width:92px;height:10px;transform:translate(-50%);border-radius:999px;border:1px solid rgba(255,255,255,.14);background:#030a12b8;overflow:hidden;pointer-events:none;transition:opacity .12s ease}.mining-indicator.hidden{opacity:0}.mining-indicator__fill{width:100%;height:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#ffc47afa,#ff8e4ef5),#ffae57eb}.hotbar{position:absolute;left:50%;bottom:22px;z-index:5;display:flex;gap:10px;transform:translate(-50%);max-width:calc(100vw - 24px);overflow-x:auto;padding:4px}.hotbar-slot{min-width:108px;padding:12px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:#040a12b8;color:var(--muted);display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease}.hotbar-slot__topline{display:flex;align-items:center;justify-content:space-between;gap:10px}.hotbar-slot__count{min-width:30px;padding:4px 8px;border-radius:999px;background:#ffffff14;text-align:center}.hotbar-slot span{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em}.hotbar-slot__swatch{width:26px;height:26px;display:block;border-radius:8px;border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px #ffffff1f,0 8px 18px #0000002e}.hotbar-slot[data-type=grass] .hotbar-slot__swatch{background:linear-gradient(180deg,#7ad353 0 28%,#7a5432 28% 100%),linear-gradient(90deg,rgba(255,255,255,.06),transparent)}.hotbar-slot[data-type=dirt] .hotbar-slot__swatch{background:radial-gradient(circle at 28% 34%,rgba(255,220,170,.18),transparent 28%),linear-gradient(145deg,#936338,#664021)}.hotbar-slot[data-type=stone] .hotbar-slot__swatch{background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.2),transparent 26%),linear-gradient(145deg,#9aa4af,#5d6671)}.hotbar-slot[data-type=wood] .hotbar-slot__swatch{background:repeating-linear-gradient(90deg,#7e4f28 0 4px,#9a6538 4px 8px),linear-gradient(180deg,rgba(255,255,255,.08),transparent)}.hotbar-slot[data-type=leaves] .hotbar-slot__swatch{background:radial-gradient(circle at 38% 30%,rgba(164,235,124,.42),transparent 24%),linear-gradient(145deg,#3f8c3a,#25562f)}.hotbar-slot[data-type=sand] .hotbar-slot__swatch{background:radial-gradient(circle at 70% 32%,rgba(255,255,255,.18),transparent 24%),linear-gradient(145deg,#e1cb8a,#b79c5d)}.hotbar-slot strong{font-size:.96rem}.hotbar-slot.empty{color:#9bb4c894;border-color:#ffffff0a}.hotbar-slot.empty .hotbar-slot__count{background:#ffffff0a}.hotbar-slot.active{color:var(--text);border-color:#ffae57cc;background:linear-gradient(180deg,#ffae572e,#ffae570a),#060e16e0;transform:translateY(-4px);box-shadow:0 14px 24px #ffae5726}.overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at center,rgba(139,185,255,.12),transparent 38%),#02070d75;transition:opacity .18s ease,visibility .18s ease}.overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.overlay-panel{width:min(520px,100%);padding:28px;border-radius:28px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,#122236eb,#050b13eb),var(--panel-strong);box-shadow:0 26px 80px #00000073}.overlay-panel h2{margin:0 0 10px;font-size:clamp(2rem,5vw,3rem);line-height:.95;letter-spacing:-.06em}.overlay-panel p{margin:0 0 20px;color:var(--muted);line-height:1.55}.profile-form{display:grid;gap:16px}.profile-field{display:grid;gap:10px}.profile-field>span{color:var(--muted);font-size:.88rem;letter-spacing:.08em;text-transform:uppercase}#nickname-input{width:100%;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:#030a12c2;color:var(--text);padding:14px 16px;outline:none;transition:border-color .16s ease,box-shadow .16s ease}#nickname-input:focus{border-color:#ffae57bf;box-shadow:0 0 0 4px #ffae5729}#nickname-input:disabled{opacity:.72;cursor:not-allowed}.skin-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.skin-preview-panel{display:grid;grid-template-columns:136px minmax(0,1fr);gap:14px;padding:14px;border-radius:22px;border:1px solid rgba(255,255,255,.1);background:#030a129e}.skin-preview-frame{--preview-accent: #63b6ff;position:relative;min-height:136px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:radial-gradient(circle at 25% 22%,color-mix(in srgb,var(--preview-accent) 56%,white 44%),transparent 28%),linear-gradient(180deg,color-mix(in srgb,var(--preview-accent) 30%,#162437 70%),#0b1520)}.skin-preview-frame img{width:100%;height:100%;display:block;object-fit:cover;opacity:0;transition:opacity .18s ease}.skin-preview-frame img.visible{opacity:1}.skin-preview-placeholder{position:absolute;inset:0;display:grid;place-items:center;font-size:1.3rem;font-weight:700;letter-spacing:.18em;color:#ffffffc7;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.skin-preview-placeholder.hidden{opacity:0}.skin-preview-meta{display:grid;align-content:space-between;gap:12px}.skin-preview-status{min-height:3.6em;color:var(--muted);line-height:1.45}.skin-option{position:relative;min-height:52px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.38),transparent 36%),linear-gradient(180deg,color-mix(in srgb,var(--skin-color) 84%,white 16%),var(--skin-color));cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.skin-option:after{content:"";position:absolute;inset:8px;border-radius:12px;border:1px solid rgba(255,255,255,.18)}.skin-option:hover{transform:translateY(-2px)}.skin-option.active{border-color:#ffffffe6;box-shadow:0 10px 20px color-mix(in srgb,var(--skin-color) 35%,transparent)}.skin-option:disabled{cursor:not-allowed;opacity:.65}#start-button{appearance:none;border:0;border-radius:999px;padding:14px 22px;background:linear-gradient(135deg,#ffbe74,#ff8f4e);color:#111827;font-weight:700;cursor:pointer;box-shadow:0 16px 28px #ff8f4e47}.secondary-button{appearance:none;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:12px 18px;background:#ffffff0f;color:var(--text);font-weight:600;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}.secondary-button:hover:not(:disabled){transform:translateY(-1px);border-color:#ffae576b;background:#ffae571f}.secondary-button:disabled{opacity:.56;cursor:progress}.overlay-note{margin-top:14px;color:var(--muted);font-size:.95rem}.player-nameplate{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#040a12d1;color:var(--text);font-size:.86rem;font-weight:600;letter-spacing:.02em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 24px #0000002e;white-space:nowrap}.player-nameplate.hidden{opacity:0}.player-nameplate__swatch{width:12px;height:12px;border-radius:999px;box-shadow:0 0 0 2px #ffffff2e}@media(max-width:900px){.brand-card,.status-card{width:calc(100vw - 32px)}.brand-card{top:16px;left:16px}.status-card{inset:auto 16px 110px}.hotbar{gap:8px;bottom:14px;justify-content:flex-start}.hotbar-slot{min-width:96px}.skin-options{grid-template-columns:repeat(4,minmax(0,1fr))}.skin-preview-panel{grid-template-columns:1fr}.skin-preview-frame{min-height:180px}}