:root {
  color-scheme: dark; font-family: Inter, "Segoe UI", system-ui, sans-serif;
  --bg: #071017; --panel: rgba(10, 20, 27, .86); --panel-strong: rgba(10, 18, 24, .96);
  --line: rgba(255,255,255,.11); --muted: rgba(235,244,249,.62); --text: #f4f8fa;
  --accent: #78d8ad; --accent-2: #8fcaf5; --danger: #ff7d72;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); }
body { color: var(--text); }
button, input, select { font: inherit; }
button { color: inherit; }
#app-shell { position: relative; width: 100%; height: 100%; min-height: 100dvh; overflow: hidden; }
#game-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none;
  background: radial-gradient(circle at 50% 15%, #244866 0, #102636 38%, #071017 78%);
}
#ambient-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at center, transparent 45%, rgba(0,0,0,.35) 100%);
}

.screen-layer {
  position: absolute; inset: 0; z-index: 20; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(360px,.75fr);
  gap: clamp(24px, 5vw, 72px); align-items: center; padding: clamp(24px, 5vw, 72px);
  background: linear-gradient(115deg, rgba(5,12,17,.88), rgba(5,12,17,.48)); backdrop-filter: blur(5px);
}
.hero-panel { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(8px,2vw,24px); }
.brand-lockup { display: flex; gap: 16px; align-items: center; }
.brand-mark {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(145deg, var(--accent), var(--accent-2)); color: #062019; font-weight: 900; letter-spacing: -.08em;
  box-shadow: 0 10px 30px rgba(74,190,151,.22);
}
.brand-mark.large { width: 58px; height: 58px; border-radius: 16px; font-size: 22px; }
.brand-lockup h1 { margin: 0; font-size: clamp(28px,4vw,48px); letter-spacing: -.055em; }
.brand-lockup p { margin: 3px 0 0; color: var(--muted); }
.hero-copy { max-width: 720px; }
.hero-copy h2 { margin: 0 0 16px; max-width: 14ch; font-size: clamp(34px,5.5vw,76px); line-height: .98; letter-spacing: -.06em; }
.hero-copy p { max-width: 56ch; margin: 0; color: var(--muted); font-size: clamp(15px,1.5vw,19px); line-height: 1.65; }
.feature-row { display: flex; gap: 10px; flex-wrap: wrap; }
.feature-row span { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.035); font-size: 12px; }

.panel, .create-world-card, .loading-card {
  border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(22px); box-shadow: 0 28px 90px rgba(0,0,0,.38);
}
.auth-panel { width: min(100%, 470px); justify-self: end; padding: 24px; border-radius: 24px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; margin-bottom: 24px; border-radius: 13px; background: rgba(255,255,255,.055); }
.segmented button { border: 0; border-radius: 9px; padding: 10px 12px; background: transparent; color: var(--muted); cursor: pointer; }
.segmented button.active { background: rgba(255,255,255,.1); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
#auth-form { display: grid; gap: 15px; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
input, select {
  width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 0 13px;
  background: rgba(2,8,12,.6); color: var(--text); outline: none; transition: border-color .18s, box-shadow .18s;
}
input:focus { border-color: rgba(120,216,173,.6); box-shadow: 0 0 0 3px rgba(120,216,173,.09); }
.primary-btn, .ghost-btn {
  border: 0; border-radius: 12px; min-height: 44px; padding: 0 17px; font-weight: 700; cursor: pointer; transition: transform .15s, opacity .15s, background .15s;
}
.primary-btn { background: linear-gradient(135deg, #78d8ad, #84bdf0); color: #061814; box-shadow: 0 12px 34px rgba(95,194,158,.2); }
.primary-btn:hover { transform: translateY(-1px); }
.primary-btn:disabled { opacity: .5; cursor: wait; transform: none; }
.ghost-btn { border: 1px solid var(--line); background: rgba(255,255,255,.055); color: var(--text); }
.form-error { min-height: 19px; margin: 0; color: #ff9c93; font-size: 13px; }
.version-line { display: block; margin-top: 18px; color: rgba(235,244,249,.36); text-align: center; }

#world-screen { display: block; overflow: auto; background: linear-gradient(150deg, rgba(5,12,17,.93), rgba(9,30,34,.72)); }
.world-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: clamp(32px,6vh,68px) 0 80px; }
.world-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.world-header h2 { margin: 5px 0 8px; font-size: clamp(30px,4vw,52px); letter-spacing: -.05em; }
.world-header p { margin: 0; color: var(--muted); }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.create-world-card {
  display: grid; grid-template-columns: 1.15fr minmax(220px,.75fr) 180px auto; align-items: center; gap: 18px; padding: 20px;
  border-radius: 20px; margin-bottom: 24px;
}
.create-world-card div { display: grid; gap: 5px; }
.create-world-card span { color: var(--muted); font-size: 13px; }
.world-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.world-card {
  min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(150deg, rgba(18,42,43,.82), rgba(10,18,24,.94)); cursor: pointer; transition: transform .18s,border-color .18s;
}
.world-card:hover { transform: translateY(-3px); border-color: rgba(120,216,173,.42); }
.world-card strong { font-size: 21px; }
.world-card small { color: var(--muted); }
.world-card .world-seed { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: rgba(143,202,245,.7); font-size: 11px; }
.empty-worlds { grid-column: 1 / -1; padding: 42px; border: 1px dashed var(--line); border-radius: 20px; text-align: center; color: var(--muted); }

#topbar {
  position: absolute; z-index: 12; top: max(12px,env(safe-area-inset-top)); left: 16px; right: 16px;
  display: flex; justify-content: space-between; align-items: center; pointer-events: none;
}
#topbar button { pointer-events: auto; }
.mini-brand { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(7,16,23,.55); backdrop-filter: blur(14px); }
.top-actions { display: flex; gap: 8px; align-items: center; pointer-events: auto; }
#save-pill { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(7,16,23,.62); color: var(--muted); font-size: 12px; backdrop-filter: blur(14px); }
#save-pill[data-state="dirty"] { color: #f4d58a; }
#save-pill[data-state="saving"] { color: var(--accent-2); }
#save-pill[data-state="error"] { color: #ff9c93; border-color: rgba(255,125,114,.28); }
#crosshair { position: absolute; z-index: 8; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%,-50%); pointer-events: none; filter: drop-shadow(0 1px 2px #000); }
#crosshair i { position: absolute; background: rgba(255,255,255,.92); border-radius: 2px; }
#crosshair i:first-child { width: 2px; height: 14px; left: 8px; top: 2px; }
#crosshair i:last-child { height: 2px; width: 14px; left: 2px; top: 8px; }
#debug-hud { position: absolute; z-index: 8; left: 16px; bottom: 92px; display: flex; gap: 7px; pointer-events: none; }
#debug-hud span, #desktop-help { padding: 6px 9px; border-radius: 8px; background: rgba(4,10,14,.55); color: rgba(240,247,250,.65); font: 11px/1.2 ui-monospace,Consolas,monospace; backdrop-filter: blur(10px); }
#desktop-help { position: absolute; z-index: 7; right: 16px; bottom: 92px; pointer-events: none; }

.hotbar {
  position: absolute; z-index: 10; left: 50%; bottom: max(18px,env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; gap: 7px; padding: 7px; border: 1px solid var(--line); border-radius: 17px; background: rgba(5,12,17,.68); backdrop-filter: blur(18px); box-shadow: 0 16px 40px rgba(0,0,0,.26);
}
.hotbar button { position: relative; width: 68px; min-height: 58px; display: grid; grid-template-columns: 25px 1fr; grid-template-rows: 1fr auto; align-items: center; gap: 1px 5px; padding: 7px; border: 1px solid transparent; border-radius: 11px; background: transparent; cursor: pointer; }
.hotbar button.selected { border-color: rgba(120,216,173,.55); background: rgba(120,216,173,.09); }
.hotbar b { justify-self: end; color: rgba(255,255,255,.42); font-size: 10px; }
.hotbar em { grid-column: 1 / -1; font-style: normal; font-size: 10px; color: var(--muted); white-space: nowrap; }
.swatch { width: 25px; height: 25px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.13),0 4px 9px rgba(0,0,0,.2); }
.swatch.wood { background: linear-gradient(135deg,#966a42,#5f3d27); }
.swatch.brick { background: linear-gradient(135deg,#9d5547,#713a35); }
.swatch.concrete { background: linear-gradient(135deg,#b8b8b3,#777a7c); }
.swatch.glass { background: linear-gradient(135deg,rgba(166,224,235,.82),rgba(81,142,157,.48)); }
.swatch.stone { background: linear-gradient(135deg,#777c82,#42484f); }
.swatch.plaster { background: linear-gradient(135deg,#e5dfd0,#bcb6aa); }
.swatch.metal { background: linear-gradient(135deg,#8c999f,#47535b); }
#toast { position: absolute; z-index: 50; left: 50%; top: 84px; transform: translate(-50%,-10px); padding: 10px 14px; border: 1px solid var(--line); border-radius: 11px; background: rgba(7,16,23,.86); opacity: 0; pointer-events: none; transition: opacity .18s,transform .18s; }
#toast.show { opacity: 1; transform: translate(-50%,0); }

#mobile-controls { display: none; }
.screen-layer.compact { grid-template-columns: 1fr; place-items: center; }
.loading-card { min-width: min(88vw,380px); display: grid; place-items: center; gap: 12px; padding: 28px; border-radius: 22px; text-align: center; }
.loading-card p { margin: 0; color: var(--muted); font-size: 13px; }
.loader { width: 30px; height: 30px; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 920px) {
  .screen-layer { grid-template-columns: 1fr; align-content: center; overflow: auto; }
  .hero-panel { min-height: auto; padding: 0; gap: 24px; }
  .hero-copy h2 { max-width: 18ch; font-size: clamp(32px,8vw,58px); }
  .feature-row { display: none; }
  .auth-panel { justify-self: stretch; width: 100%; }
  .create-world-card { grid-template-columns: 1fr; }
  .world-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .screen-layer { padding: max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom)); gap: 18px; }
  .hero-copy { display: none; }
  .brand-mark.large { width: 46px; height: 46px; border-radius: 13px; font-size: 18px; }
  .brand-lockup h1 { font-size: 30px; }
  .world-shell { width: calc(100% - 28px); }
  .world-grid { grid-template-columns: 1fr; }
  .world-header { align-items: center; }
  .world-header h2 { font-size: 30px; }
}

@media (pointer: coarse) {
  #desktop-help { display: none; }
  #debug-hud { bottom: 132px; }
  .hotbar { bottom: max(10px,env(safe-area-inset-bottom)); max-width: calc(100vw - 150px); overflow-x: auto; left: 50%; }
  .hotbar button { flex: 0 0 48px; width: 48px; min-height: 48px; grid-template-columns: 1fr; grid-template-rows: 1fr; padding: 5px; }
  .hotbar b, .hotbar em { display: none; }
  .swatch { width: 32px; height: 32px; justify-self: center; }
  #mobile-controls { position: absolute; inset: 0; z-index: 11; display: block; pointer-events: none; }
  .move-pad { position: absolute; left: max(14px,env(safe-area-inset-left)); bottom: max(18px,env(safe-area-inset-bottom)); width: 124px; height: 124px; }
  .move-pad button, .mobile-actions button { position: absolute; pointer-events: auto; border: 1px solid rgba(255,255,255,.15); background: rgba(4,10,14,.56); backdrop-filter: blur(12px); color: rgba(255,255,255,.88); }
  .move-pad button { width: 42px; height: 42px; border-radius: 13px; }
  .move-pad [data-move="forward"] { left: 41px; top: 0; }
  .move-pad [data-move="left"] { left: 0; top: 41px; }
  .move-pad [data-move="back"] { left: 41px; top: 82px; }
  .move-pad [data-move="right"] { left: 82px; top: 41px; }
  .mobile-actions { position: absolute; right: max(14px,env(safe-area-inset-right)); bottom: max(82px,env(safe-area-inset-bottom)); width: 184px; height: 96px; }
  .mobile-actions button { width: 46px; height: 46px; border-radius: 50%; font-size: 18px; }
  .mobile-actions [data-action="jump"] { left: 0; top: 25px; background: rgba(84,138,196,.72); }
  .mobile-actions [data-action="place"] { right: 0; top: 0; background: rgba(70,164,126,.72); }
  .mobile-actions [data-action="remove"] { right: 0; bottom: 0; background: rgba(183,78,70,.64); }
  .mobile-actions [data-action="interact"] { right: 51px; top: 25px; background: rgba(81,139,194,.72); font-size: 13px; font-weight: 800; }
}

.build-tools {
  position: absolute; z-index: 10; left: 50%; bottom: 92px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(5,12,17,.72); backdrop-filter: blur(18px); box-shadow: 0 14px 38px rgba(0,0,0,.24);
}
.build-tools button { min-height: 36px; padding: 0 11px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; }
.build-tools button.selected { border-color: rgba(120,216,173,.48); background: rgba(120,216,173,.11); color: var(--text); }
.build-tools #rotate-build { color: var(--accent-2); }
.build-tools small { padding: 0 8px 0 3px; color: rgba(235,244,249,.5); white-space: nowrap; }
@media (pointer: coarse) {
  .build-tools { top: max(62px,env(safe-area-inset-top)); bottom: auto; max-width: calc(100vw - 24px); }
  .build-tools button { min-height: 38px; padding: 0 9px; font-size: 12px; }
  .build-tools small { display: none; }
}

.build-tools { max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
.build-tools::-webkit-scrollbar { display: none; }

.play-capture { position:absolute; z-index:18; left:50%; top:50%; transform:translate(-50%,52px); display:grid; gap:5px; min-width:270px; padding:12px 16px; border:1px solid rgba(255,255,255,.18); border-radius:13px; background:rgba(5,12,17,.8); backdrop-filter:blur(14px); cursor:pointer; text-align:center; }
.play-capture strong { font-size:14px; }
.play-capture span { color:var(--muted); font-size:11px; }
body[data-view="game"] #game-canvas { cursor:none; }
@media (pointer:coarse) { .play-capture { display:none !important; } }

#mission-panel { position:absolute; z-index:9; left:16px; top:72px; width:min(340px,calc(100vw - 32px)); padding:11px 12px; border:1px solid var(--line); border-radius:13px; background:rgba(5,12,17,.7); backdrop-filter:blur(15px); pointer-events:none; }
.mission-top,.mission-bottom { display:flex; align-items:center; gap:8px; }
.mission-top strong { flex:1; font-size:12px; }
.mission-top span,.mission-top b,.mission-bottom { font-size:10px; color:var(--muted); }
#level-readout { color:var(--accent) !important; font-weight:800; }
#score-readout { color:#f0d48f !important; }
.mission-progress { height:5px; margin:8px 0 6px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.09); }
.mission-progress i { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .25s ease; }
.mission-bottom { justify-content:space-between; }
@media (pointer:coarse) { #mission-panel { top:112px; width:min(280px,calc(100vw - 28px)); } }

#crosshair[data-action="break"] { transform:translate(-50%,-50%) scale(1.35); filter:drop-shadow(0 0 5px rgba(255,112,96,.9)); }
#crosshair[data-action="build"] { transform:translate(-50%,-50%) scale(1.28); filter:drop-shadow(0 0 5px rgba(120,216,173,.95)); }
#crosshair { transition:transform .08s ease,filter .08s ease; }

#resource-strip { position:absolute; z-index:9; right:16px; top:72px; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; max-width:min(520px,55vw); padding:7px; border:1px solid var(--line); border-radius:12px; background:rgba(5,12,17,.68); backdrop-filter:blur(14px); pointer-events:none; }
#resource-strip strong,#resource-strip span { padding:4px 6px; border-radius:7px; font-size:10px; background:rgba(255,255,255,.045); color:var(--muted); }
#resource-strip strong { color:var(--accent); }
#resource-strip b { color:var(--text); font-weight:800; }
@media (max-width:620px) { #resource-strip { top:205px; right:12px; left:12px; max-width:none; justify-content:center; } }
@media (pointer:coarse) and (min-width:621px) { #resource-strip { top:112px; max-width:48vw; } }

/* 0.8 mobile-first gameplay HUD */
body[data-view="game"] .mini-brand { display:none; }
body[data-view="game"] #topbar { left:auto; right:10px; top:max(8px,env(safe-area-inset-top)); }
body[data-view="game"] #save-pill { padding:5px 8px; font-size:10px; background:rgba(4,12,16,.38); border-color:rgba(255,255,255,.07); }
body[data-view="game"] #exit-game { min-height:30px; padding:0 10px; font-size:11px; background:rgba(4,12,16,.38); }
body[data-view="game"] #mission-panel { left:50%; top:max(8px,env(safe-area-inset-top)); transform:translateX(-50%); width:min(360px,42vw); padding:7px 10px; background:rgba(4,12,16,.45); border-color:rgba(255,255,255,.07); }
body[data-view="game"] .mission-bottom { display:none; }
body[data-view="game"] .mission-progress { margin:5px 0 0; height:3px; }
body[data-view="game"] #desktop-help { opacity:.18; bottom:58px; font-size:9px; transition:opacity .2s; }
body[data-view="game"] #desktop-help:hover { opacity:.85; }
body[data-view="game"] .build-tools { opacity:.16; bottom:58px; transform:translateX(-50%) scale(.86); transition:opacity .18s; }
body[data-view="game"] .build-tools:hover,body[data-view="game"] .build-tools:focus-within { opacity:.95; }
body[data-view="game"] .hotbar { bottom:8px; padding:4px; gap:3px; border-radius:12px; background:rgba(4,12,16,.44); }
body[data-view="game"] .hotbar button { width:42px; min-height:38px; padding:4px; grid-template-columns:22px 1fr; }
body[data-view="game"] .hotbar em { display:none; }
.hud-icon { position:absolute; z-index:14; right:12px; bottom:12px; width:42px; height:42px; border:1px solid rgba(255,255,255,.12); border-radius:13px; background:rgba(4,12,16,.52); backdrop-filter:blur(12px); font-size:22px; cursor:pointer; }
#selected-item-pill { position:absolute; z-index:9; left:50%; bottom:54px; transform:translateX(-50%); padding:5px 9px; border-radius:999px; background:rgba(4,12,16,.42); color:rgba(255,255,255,.72); font-size:10px; pointer-events:none; }
.catalog-panel { position:absolute; z-index:70; right:12px; top:12px; bottom:12px; width:min(440px,42vw); padding:12px; border:1px solid var(--line); border-radius:18px; background:rgba(5,14,19,.94); backdrop-filter:blur(22px); box-shadow:0 24px 80px rgba(0,0,0,.42); }
.catalog-panel header { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.catalog-panel header strong { flex:1; }
.catalog-panel header b { color:var(--accent); font-size:10px; }
.catalog-panel header button { width:32px; height:32px; border:0; border-radius:9px; background:rgba(255,255,255,.07); font-size:20px; }
.catalog-filters { display:grid; grid-template-columns:1fr 150px; gap:7px; margin-bottom:10px; }
.catalog-filters input,.catalog-filters select { min-height:38px; font-size:12px; }
.catalog-grid { height:calc(100% - 92px); overflow:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; align-content:start; }
.catalog-item { min-height:66px; padding:8px; border:1px solid rgba(255,255,255,.07); border-radius:11px; background:rgba(255,255,255,.035); text-align:left; cursor:pointer; }
.catalog-item strong { display:block; font-size:11px; }
.catalog-item span { display:block; margin-top:4px; color:var(--muted); font-size:9px; }
.catalog-item.selected { border-color:rgba(120,216,173,.55); background:rgba(120,216,173,.1); }
#portrait-lock { position:absolute; inset:0; z-index:100; place-items:center; align-content:center; gap:8px; background:#071017; text-align:center; }
#portrait-lock strong { font-size:22px; } #portrait-lock span { color:var(--muted); font-size:12px; }
@media (pointer:coarse) {
  body[data-view="game"] #topbar { right:max(6px,env(safe-area-inset-right)); top:max(5px,env(safe-area-inset-top)); }
  body[data-view="game"] #save-pill { display:none; }
  body[data-view="game"] #mission-panel { top:max(5px,env(safe-area-inset-top)); width:min(300px,48vw); padding:5px 8px; }
  body[data-view="game"] #mission-panel .mission-top span,body[data-view="game"] #mission-panel .mission-top b { display:none; }
  body[data-view="game"] .build-tools,body[data-view="game"] .hotbar,body[data-view="game"] #desktop-help { display:none; }
  body[data-view="game"] #selected-item-pill { bottom:max(7px,env(safe-area-inset-bottom)); font-size:9px; }
  .hud-icon { right:max(10px,env(safe-area-inset-right)); bottom:max(10px,env(safe-area-inset-bottom)); width:40px; height:40px; }
  .move-stick { position:absolute; left:max(18px,env(safe-area-inset-left)); bottom:max(16px,env(safe-area-inset-bottom)); width:112px; height:112px; border:1px solid rgba(255,255,255,.13); border-radius:50%; background:rgba(4,12,16,.18); box-shadow:inset 0 0 0 18px rgba(255,255,255,.015); pointer-events:auto; touch-action:none; }
  .stick-knob { position:absolute; left:50%; top:50%; width:50px; height:50px; transform:translate(-50%,-50%); border-radius:50%; background:rgba(230,245,248,.18); border:1px solid rgba(255,255,255,.22); box-shadow:0 8px 24px rgba(0,0,0,.24); pointer-events:none; }
  .mobile-actions { right:max(58px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); width:132px; height:118px; }
  .mobile-actions button { width:48px; height:48px; border:1px solid rgba(255,255,255,.12); background:rgba(4,12,16,.28); backdrop-filter:blur(8px); }
  .mobile-actions [data-action="place"] { right:0; top:0; background:rgba(70,164,126,.5); font-size:25px; }
  .mobile-actions [data-action="remove"] { right:0; bottom:0; background:rgba(183,78,70,.42); font-size:25px; }
  .mobile-actions [data-action="jump"] { left:0; bottom:0; background:rgba(84,138,196,.42); }
  .mobile-actions [data-action="interact"] { left:0; top:0; background:rgba(81,139,194,.36); }
}
@media (pointer:coarse) {
  .catalog-panel { left:8px; right:8px; top:8px; bottom:8px; width:auto; padding:9px; border-radius:15px; }
  .catalog-panel header { margin-bottom:6px; }
  .catalog-filters { grid-template-columns:1fr 130px; margin-bottom:6px; }
  .catalog-grid { height:calc(100% - 78px); grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }
  .catalog-item { min-height:54px; padding:6px; }
  .catalog-item strong { font-size:10px; } .catalog-item span { font-size:8px; }
}
@media (pointer:coarse) and (orientation:portrait) {
  body[data-view="game"] #portrait-lock:not([hidden]) { display:grid !important; }
}
@media (max-height:500px) and (pointer:coarse) {
  #crosshair { width:14px; height:14px; }
  #crosshair i:first-child { height:10px; left:6px; top:2px; }
  #crosshair i:last-child { width:10px; left:2px; top:6px; }
  .move-stick { width:96px; height:96px; }
  .stick-knob { width:42px; height:42px; }
  .mobile-actions { width:118px; height:102px; }
  .mobile-actions button { width:42px; height:42px; }
}

.contract-field { min-width:220px; display:grid; gap:5px; }
.contract-field span,.contract-field small { color:var(--muted); font-size:10px; }
#create-world-form select { min-height:46px; border:1px solid var(--line); border-radius:12px; padding:0 12px; background:rgba(2,8,12,.72); color:var(--text); }
#contract-panel { position:absolute; z-index:9; left:16px; top:164px; width:min(390px,calc(100vw - 32px)); padding:11px 12px; border:1px solid var(--line); border-radius:13px; background:rgba(5,12,17,.72); backdrop-filter:blur(15px); pointer-events:none; }
.contract-head,.contract-meta { display:flex; align-items:center; gap:8px; }
.contract-head span { font-size:9px; color:var(--accent-2); letter-spacing:.12em; }
.contract-head strong { flex:1; font-size:12px; }
#house-rating { color:#f0d48f; font-size:11px; }
#contract-description { margin:6px 0; color:var(--muted); font-size:10px; line-height:1.35; }
.contract-meter { height:5px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.08); }
.contract-meter i { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--accent-2),var(--accent)); transition:width .25s ease; }
.contract-meta { justify-content:space-between; margin-top:6px; color:var(--muted); font-size:9px; }
.contract-brief { margin-top:6px; font-size:9px; color:rgba(240,247,250,.72); }
@media (pointer:coarse) { #contract-panel { top:184px; width:min(300px,calc(100vw - 28px)); } }
@media (max-width:620px) { #contract-panel { top:260px; left:12px; right:12px; width:auto; } }

/* 0.8 clutter reduction */
body[data-view="game"] #contract-panel { display:none !important; }
@media (pointer:coarse) {
  body[data-view="game"] #topbar #exit-game { opacity:.28; }
  body[data-view="game"] #topbar #exit-game:active { opacity:.9; }
  body[data-view="game"] #mission-panel { background:rgba(4,12,16,.28); border-color:rgba(255,255,255,.045); }
  body[data-view="game"] #catalog-toggle { background:rgba(4,12,16,.32); }
}

/* 0.9 free-cursor desktop + visual catalog */
body[data-view="game"] #game-canvas { cursor:url('../icons/game-cursor.svg') 4 3,crosshair; }
body[data-view="game"].desktop-free-aim #game-canvas { cursor:url('../icons/game-cursor.svg') 4 3,crosshair; }
@media (pointer:fine) { body.desktop-free-aim #crosshair { opacity:.22; } }
.play-capture { pointer-events:none; transform:translate(-50%,46px); background:rgba(5,12,17,.62); }
.world-card { position:relative; padding:0; overflow:hidden; cursor:default; }
.world-open { flex:1; width:100%; min-height:150px; display:flex; flex-direction:column; justify-content:space-between; padding:20px; border:0; background:transparent; text-align:left; cursor:pointer; }
.world-open strong { font-size:21px; }
.world-open span { color:var(--muted); font-size:12px; }
.world-delete { position:absolute; right:10px; bottom:10px; z-index:2; min-height:30px; padding:0 10px; border:1px solid rgba(255,125,114,.25); border-radius:9px; background:rgba(91,28,27,.46); color:#ffaaa2; font-size:10px; cursor:pointer; }
.world-delete:hover { background:rgba(130,42,38,.66); }
.catalog-item { position:relative; min-height:92px; display:grid; place-items:center; padding:6px; overflow:hidden; }
.catalog-thumb { display:block; width:100%; aspect-ratio:1; max-height:78px; }
.catalog-thumb svg { width:100%; height:100%; display:block; filter:drop-shadow(0 7px 7px rgba(0,0,0,.28)); }
.catalog-item strong,.catalog-item>span:not(.catalog-thumb) { display:none; }
.catalog-material { position:absolute; right:6px; bottom:6px; width:8px; height:8px; border-radius:50%; box-shadow:0 0 0 2px rgba(4,12,16,.72); }
.catalog-material.wood{background:#a77649}.catalog-material.brick{background:#a45649}.catalog-material.concrete{background:#b8b9b6}.catalog-material.glass{background:#78c6d8}.catalog-material.stone{background:#7e858b}.catalog-material.plaster{background:#ddd7c9}.catalog-material.metal{background:#79858c}

/* 0.9.0-alpha2 pointer-lock gameplay cursor */
body[data-view="game"] #game-canvas { cursor:none; }
body.desktop-locked #crosshair {
  width:30px; height:30px; opacity:1;
  background:url('../icons/game-cursor.svg') center/24px 24px no-repeat;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.95)) drop-shadow(0 0 8px rgba(120,216,173,.45));
}
body.desktop-locked #crosshair i { display:none; }
body.desktop-locked #crosshair::after {
  content:''; position:absolute; inset:2px; border:1px solid rgba(255,255,255,.72); border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.45),0 0 12px rgba(120,216,173,.25);
}
body[data-view="game"]:not(.desktop-locked) #crosshair { opacity:.65; }

/* 0.9.0-alpha2 visible desktop cursor */
body[data-view="game"] #game-canvas{cursor:url("../icons/game-cursor.svg") 4 3,crosshair !important;}
@media (pointer:coarse){body[data-view="game"] #game-canvas{cursor:default !important;}}

/* 0.10 launch + inventory experience */
.splash-screen{position:fixed;inset:0;z-index:300;display:grid;place-items:center;align-content:center;gap:22px;background:radial-gradient(circle at 50% 36%,#173e4d 0,#07151d 48%,#03080c 100%);perspective:900px;transition:opacity .34s ease,transform .34s ease;overflow:hidden}
.splash-screen::before{content:"";position:absolute;inset:-30%;background:conic-gradient(from 0deg,transparent,rgba(92,225,181,.09),transparent 25%,rgba(105,178,255,.08),transparent 55%);animation:splashAura 4s linear infinite}
.splash-screen.splash-out{opacity:0;transform:scale(1.035);pointer-events:none}
.splash-orbit{width:92px;height:92px;display:grid;place-items:center;transform-style:preserve-3d;animation:splashFloat 1.8s ease-in-out infinite}
.splash-cube{position:relative;width:54px;height:54px;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(34deg);animation:splashCube 2.6s linear infinite}
.splash-cube i{position:absolute;inset:0;border:1px solid rgba(255,255,255,.28);background:linear-gradient(145deg,rgba(120,216,173,.82),rgba(70,134,189,.52));box-shadow:inset 0 0 22px rgba(255,255,255,.08),0 0 28px rgba(94,211,174,.13)}
.splash-cube i:nth-child(1){transform:translateZ(27px)}.splash-cube i:nth-child(2){transform:rotateY(90deg) translateZ(27px)}.splash-cube i:nth-child(3){transform:rotateX(90deg) translateZ(27px)}
.splash-brand{position:relative;display:grid;place-items:center;gap:3px;letter-spacing:.18em}.splash-brand b{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,#78d8ad,#8fcaf5);color:#062019;font-size:19px;letter-spacing:-.08em;box-shadow:0 16px 42px rgba(81,199,157,.22)}
.splash-brand strong{font-size:clamp(22px,4vw,34px);letter-spacing:.13em}.splash-brand span{font-size:8px;color:rgba(235,244,249,.5);letter-spacing:.35em}
.splash-line{position:relative;width:150px;height:2px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.07)}.splash-line i{position:absolute;inset:0 auto 0 0;width:45%;background:linear-gradient(90deg,transparent,#78d8ad,#8fcaf5,transparent);animation:splashLoad 1.1s ease-in-out infinite}
@keyframes splashAura{to{transform:rotate(360deg)}}@keyframes splashCube{to{transform:rotateX(336deg) rotateY(394deg)}}@keyframes splashFloat{50%{transform:translateY(-7px)}}@keyframes splashLoad{from{transform:translateX(-120%)}to{transform:translateX(330%)}}
body.desktop-locked #crosshair{width:24px;height:24px;border:1px solid rgba(255,255,255,.38);border-radius:50%;box-shadow:0 0 0 4px rgba(0,0,0,.12),0 0 14px rgba(120,216,173,.18)}
body.desktop-locked #crosshair::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(120,216,173,.9)}

.catalog-panel{left:50%;right:auto;top:50%;bottom:auto;width:min(860px,92vw);height:min(690px,88vh);transform:translate(-50%,-50%);padding:12px;border-radius:22px;background:rgba(5,14,19,.96)}
.catalog-panel header{height:38px;margin:0 0 8px;padding:0 3px}.catalog-panel header strong{letter-spacing:.04em}.catalog-panel header b{font-size:9px;color:rgba(235,244,249,.46)}
.catalog-categories{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 9px;scrollbar-width:none}.catalog-categories::-webkit-scrollbar{display:none}
.catalog-category-tab{flex:0 0 42px;width:42px;height:42px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.035);font-size:20px;cursor:pointer;filter:saturate(.78);transition:transform .12s,border-color .12s,background .12s}
.catalog-category-tab.selected{transform:translateY(-1px);border-color:rgba(120,216,173,.55);background:rgba(120,216,173,.1);filter:none}
.catalog-grid{height:calc(100% - 100px);display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:max-content;gap:7px;overflow-y:auto;overscroll-behavior:contain;padding:3px 5px 16px 2px;scrollbar-width:thin}
.catalog-item{aspect-ratio:1;min-height:0;padding:7px;border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border-color:rgba(255,255,255,.07);transition:transform .12s,border-color .12s,background .12s}
.catalog-item:hover,.catalog-item:focus-visible{transform:translateY(-2px) scale(1.025);border-color:rgba(120,216,173,.4);background:rgba(120,216,173,.075)}
.catalog-thumb{width:100%;height:100%;display:grid;place-items:center}.catalog-thumb svg{max-width:72px;max-height:72px}
@media (pointer:coarse){#crosshair{display:none}.catalog-panel{inset:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));width:auto;height:auto;transform:none;border-radius:18px;padding:8px}.catalog-panel header{height:32px;margin-bottom:4px}.catalog-categories{padding:2px 0 6px;gap:5px}.catalog-category-tab{flex-basis:38px;width:38px;height:38px;border-radius:11px;font-size:18px}.catalog-grid{height:calc(100% - 80px);grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;padding-bottom:12px}.catalog-item{padding:5px;border-radius:10px}.catalog-thumb svg{max-width:58px;max-height:58px}.mobile-actions{right:max(18px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:104px;height:92px}.mobile-actions [data-action="jump"]{left:0;bottom:0}.mobile-actions [data-action="interact"]{right:0;top:0;left:auto}}
@media (pointer:coarse) and (max-height:430px){.catalog-grid{grid-template-columns:repeat(10,minmax(0,1fr))}.catalog-category-tab{flex-basis:34px;width:34px;height:34px;font-size:16px}}

/* 0.10.0-alpha3 input, map and mobile stability */
body[data-view="game"],body[data-view="game"] *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body[data-view="game"] input,body[data-view="game"] textarea{user-select:text;-webkit-user-select:text}
#game-canvas{touch-action:none;overscroll-behavior:none}
#mini-map{position:absolute;z-index:9;left:10px;top:10px;width:112px;height:112px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:rgba(4,12,16,.68);box-shadow:0 8px 24px rgba(0,0,0,.24);image-rendering:pixelated;pointer-events:none;opacity:.88}
.catalog-item{aspect-ratio:1/1;width:100%;min-width:0;min-height:0}
.catalog-thumb{aspect-ratio:1/1;width:100%;height:auto;max-height:none}
.catalog-thumb svg{width:100%;height:100%;max-width:100%;max-height:100%;aspect-ratio:1/1;preserveAspectRatio:xMidYMid meet}
@media(pointer:coarse){#mini-map{left:auto;right:58px;top:7px;width:82px;height:82px;border-radius:11px;opacity:.72}.catalog-grid{grid-auto-rows:auto}.catalog-item{aspect-ratio:1/1}.catalog-thumb{aspect-ratio:1/1}}

/* Phase 1 final: mobile viewport + catalog normalization */
#app-shell{width:var(--av-viewport-w,100vw);height:var(--av-viewport-h,100dvh);min-height:0;max-width:100%;max-height:100%;}
#game-canvas{width:100%!important;height:100%!important;inset:0!important;}
.catalog-panel{display:flex;flex-direction:column;overflow:hidden;contain:layout paint;}
.catalog-panel>header{flex:0 0 auto;min-height:34px;}
.catalog-categories{flex:0 0 auto;min-height:40px;}
.catalog-grid{flex:1 1 auto!important;min-height:0!important;height:auto!important;width:100%;overflow-y:auto!important;overflow-x:hidden!important;align-content:start!important;grid-template-columns:repeat(auto-fill,minmax(62px,1fr))!important;grid-auto-rows:68px!important;gap:6px!important;padding:4px!important;touch-action:pan-y;overscroll-behavior:contain;}
.catalog-item{width:100%!important;height:68px!important;min-width:0!important;min-height:0!important;aspect-ratio:auto!important;margin:0!important;padding:4px!important;overflow:hidden!important;contain:layout paint;}
.catalog-thumb{display:grid!important;place-items:center;width:56px!important;height:56px!important;max-width:100%!important;max-height:100%!important;aspect-ratio:1/1!important;overflow:hidden;}
.catalog-thumb svg{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;aspect-ratio:1/1!important;}
@media(pointer:coarse){.catalog-panel{display:flex;flex-direction:column;}.catalog-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))!important;grid-auto-rows:62px!important;gap:4px!important;}.catalog-item{height:62px!important;}.catalog-thumb{width:52px!important;height:52px!important;}}

/* 0.11 city/build experience selector */
.experience-shell{position:relative;z-index:4;width:min(1080px,calc(100vw - 36px));margin:auto;display:grid;gap:22px}
.experience-header{display:flex;align-items:end;justify-content:space-between;gap:18px}.experience-header h2{font-size:clamp(28px,4vw,52px);margin:4px 0}.experience-header p{margin:0;color:var(--muted)}
.experience-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.experience-card{display:grid;grid-template-rows:minmax(180px,1fr) auto auto auto;gap:10px;min-height:420px;padding:16px;text-align:left;color:var(--text);background:linear-gradient(160deg,rgba(18,31,38,.95),rgba(8,17,23,.96));border:1px solid rgba(255,255,255,.11);border-radius:24px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.26)}
.experience-card:hover{transform:translateY(-3px);border-color:rgba(120,226,174,.5)}.experience-card strong{font-size:24px}.experience-card p{color:var(--muted);margin:0;line-height:1.5}.experience-card b{font-size:12px;letter-spacing:.12em;color:#7fe0ad}
.experience-art{position:relative;display:block;overflow:hidden;border-radius:17px;background:linear-gradient(#62a9cb 0 48%,#79ae62 49%);min-height:200px}.build-art i{position:absolute;background:#d5c38e;box-shadow:inset 0 -12px rgba(0,0,0,.08)}.build-art i:nth-child(1){width:42%;height:34%;left:29%;bottom:22%;clip-path:polygon(0 28%,50% 0,100% 28%,100% 100%,0 100%)}.build-art i:nth-child(2){width:16%;height:28%;left:42%;bottom:22%;background:#795b45}.build-art i:nth-child(3){width:100%;height:18%;left:0;bottom:0;background:repeating-linear-gradient(90deg,#5d8c4d 0 12px,#669a54 12px 24px)}
.city-art{background:linear-gradient(#68afd0 0 43%,#6da55b 44%)}.city-art:after{content:'';position:absolute;left:0;right:0;bottom:0;height:42%;background:#343b40;clip-path:polygon(0 34%,38% 34%,46% 0,54% 0,62% 34%,100% 34%,100% 100%,0 100%)}.city-art i{position:absolute;bottom:26%;z-index:2;border-radius:4px 4px 1px 1px;box-shadow:inset 0 -10px rgba(0,0,0,.08)}.city-art i:nth-child(1){left:8%;width:21%;height:38%;background:#df725c}.city-art i:nth-child(2){left:31%;width:17%;height:52%;background:#638eaa}.city-art i:nth-child(3){right:9%;width:23%;height:33%;background:#e1c570}.city-art i:nth-child(4){right:34%;width:18%;height:24%;bottom:17%;background:#d65b4d;border-top:8px solid #263b44}
@media(max-width:720px),(pointer:coarse){.experience-shell{width:min(100% - 22px,900px);gap:10px}.experience-header h2{font-size:25px}.experience-header p{font-size:12px}.experience-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.experience-card{min-height:0;padding:9px;border-radius:16px;grid-template-rows:112px auto auto auto}.experience-art{min-height:112px;border-radius:11px}.experience-card strong{font-size:16px}.experience-card p{font-size:11px;line-height:1.3}.experience-card b{font-size:9px}}

.build-version{position:fixed;top:54px;right:14px;z-index:55;padding:5px 9px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(5,13,18,.58);backdrop-filter:blur(8px);color:rgba(238,247,244,.78);font:600 11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.02em;pointer-events:none}
@media(max-width:720px){.build-version{top:50px;right:9px;font-size:9px;padding:4px 7px}}

/* alpha6 mobile input hardening */
body[data-view="game"]{overscroll-behavior:none;}
#mobile-controls,#mobile-controls button,#catalog-toggle{touch-action:none;-webkit-tap-highlight-color:transparent;}

/* 0.13.0-alpha7 mobile gameplay controls: separated 2x2 actions + catalog clearance */
@media(pointer:coarse){
  body[data-view="game"] .mobile-actions{right:max(18px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:112px;height:112px;}
  body[data-view="game"] .mobile-actions [data-action="interact"]{left:0;right:auto;top:0;bottom:auto;}
  body[data-view="game"] .mobile-actions [data-action="jump"]{left:0;right:auto;top:auto;bottom:0;}
  body[data-view="game"] .mobile-actions [data-action="place"]{left:auto;right:0;top:0;bottom:auto;}
  body[data-view="game"] .mobile-actions [data-action="remove"]{left:auto;right:0;top:auto;bottom:0;}
  body[data-view="game"] #catalog-toggle{right:max(20px,env(safe-area-inset-right));bottom:max(142px,calc(env(safe-area-inset-bottom) + 142px));}
}
/* 0.13.0-alpha8 City mobile: direct-canvas build interaction, compact actions */
@media(pointer:coarse){body[data-view="game"][data-experience="city"] .mobile-actions{width:48px;height:112px;}body[data-view="game"][data-experience="city"] .mobile-actions [data-action="interact"]{left:0;right:auto;top:0;bottom:auto;}body[data-view="game"][data-experience="city"] .mobile-actions [data-action="jump"]{left:0;right:auto;top:auto;bottom:0;}}

/* alpha8 City touch: build directly on the canvas, never show +/- action buttons */
@media(pointer:coarse){
  body[data-view="game"][data-experience="city"] .mobile-actions [data-action="place"],
  body[data-view="game"][data-experience="city"] .mobile-actions [data-action="remove"]{display:none!important;}
}