:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #fff;
  background: #0d1420;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button { font: inherit; }
.game-root { position: relative; width: 100%; height: 100%; background: #79b9e8; user-select: none; }
.game-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.hud { position: absolute; inset: 0; pointer-events: none; text-shadow: 0 2px 4px rgba(0,0,0,.55); }
.hud__brand { position: absolute; top: 18px; left: 20px; padding: 8px 11px; background: rgba(10,16,24,.62); border: 1px solid rgba(255,255,255,.15); border-radius: 8px; backdrop-filter: blur(8px); font-weight: 900; letter-spacing: .11em; font-size: 13px; }
.hud__brand span { color: #f0cc55; font-size: 9px; vertical-align: top; margin-left: 3px; }
.hud__coords { position: absolute; top: 19px; right: 20px; padding: 8px 11px; background: rgba(10,16,24,.55); border: 1px solid rgba(255,255,255,.13); border-radius: 8px; font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%,-50%); filter: drop-shadow(0 1px 1px #000); }
.crosshair i { position: absolute; background: rgba(255,255,255,.95); border-radius: 1px; }
.crosshair i:first-child { width: 18px; height: 2px; left: 2px; top: 10px; }
.crosshair i:last-child { width: 2px; height: 18px; left: 10px; top: 2px; }
.hotbar { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; gap: 5px; padding: 6px; border-radius: 11px; background: rgba(9,12,18,.7); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(9px); }
.hotbar__slot { position: relative; width: 64px; height: 64px; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.18); border-radius: 7px; background: rgba(255,255,255,.07); transition: transform .12s ease,border-color .12s ease,background .12s ease; }
.hotbar__slot.is-selected { transform: translateY(-5px); border-color: #fff; background: rgba(255,255,255,.19); box-shadow: 0 5px 18px rgba(0,0,0,.35); }
.hotbar__key { position: absolute; left: 5px; top: 3px; font: 800 10px ui-monospace,monospace; opacity: .75; }
.hotbar__block { width: 31px; height: 31px; background: var(--block-color); border: 2px solid rgba(255,255,255,.2); box-shadow: inset -5px -5px 0 rgba(0,0,0,.13),inset 4px 4px 0 rgba(255,255,255,.12),0 3px 5px rgba(0,0,0,.28); image-rendering: pixelated; }
.hotbar__name { position: absolute; bottom: 3px; max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; font-weight: 700; opacity: .8; }
.hud__selected { position: absolute; left: 50%; bottom: 105px; transform: translateX(-50%); font-size: 13px; font-weight: 800; }
.controls-hint { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); white-space: nowrap; font-size: 10px; font-weight: 650; color: rgba(255,255,255,.8); }
.hud__save { position: absolute; top: 61px; right: 20px; padding: 7px 10px; border-radius: 7px; background: rgba(36,118,66,.82); font-size: 11px; font-weight: 800; opacity: 0; transform: translateY(-5px); transition: .2s ease; }
.hud__save.is-visible { opacity: 1; transform: translateY(0); }
.panel-screen { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 35%,rgba(40,62,79,.2),rgba(7,11,17,.76)); backdrop-filter: blur(5px); pointer-events: auto; transition: opacity .2s ease; }
.panel-screen.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.panel { width: min(520px,100%); padding: 38px; border: 1px solid rgba(255,255,255,.17); border-radius: 18px; background: linear-gradient(145deg,rgba(18,28,38,.94),rgba(8,13,20,.95)); box-shadow: 0 30px 100px rgba(0,0,0,.52); text-align: center; }
.panel--small { width: min(390px,100%); }
.panel__eyebrow { margin-bottom: 10px; color: #f0cc55; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.panel h1 { margin: 0; font-size: clamp(48px,9vw,76px); line-height: .95; letter-spacing: -.06em; text-transform: uppercase; }
.panel h2 { margin: 0 0 24px; font-size: 42px; letter-spacing: -.04em; }
.panel p { margin: 22px auto 27px; max-width: 420px; color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.6; }
.panel__small { margin-top: 15px; color: rgba(255,255,255,.44); font-size: 11px; }
.button { width: 100%; min-height: 51px; padding: 0 18px; margin-top: 10px; border: 0; border-radius: 9px; color: #fff; font-weight: 900; cursor: pointer; pointer-events: auto; transition: transform .13s ease,filter .13s ease; }
.button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.button:active { transform: translateY(0); }
.button--primary { color: #11170d; background: linear-gradient(180deg,#a8dd65,#73ac3e); box-shadow: 0 8px 28px rgba(97,167,56,.25); }
.button--danger { background: rgba(191,65,55,.2); border: 1px solid rgba(237,100,88,.45); }
.fatal-error { display: grid; place-content: center; min-height: 100%; padding: 32px; color: #fff; background: #111926; text-align: center; }
.fatal-error h1 { margin: 0 0 10px; }
.fatal-error p { max-width: 620px; color: rgba(255,255,255,.7); }
@media (max-width: 720px) {
  .hotbar { gap: 2px; padding: 4px; max-width: calc(100vw - 12px); }
  .hotbar__slot { width: calc((100vw - 58px)/8); max-width: 52px; height: 54px; }
  .hotbar__name,.controls-hint { display: none; }
  .hotbar__block { width: 27px; height: 27px; }
  .hud__coords { top: 58px; left: 20px; right: auto; }
  .panel { padding: 28px 22px; }
}

/* Survival HUD */
.survival-status { position:absolute; left:50%; bottom:108px; transform:translateX(-50%); display:flex; gap:18px; align-items:center; padding:7px 11px; border-radius:9px; background:rgba(8,12,17,.54); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(7px); }
.status-row { display:flex; gap:2px; min-width:118px; justify-content:center; filter:drop-shadow(0 2px 1px rgba(0,0,0,.6)); }
.heart,.food { display:inline-block; width:11px; font-size:15px; line-height:1; text-align:center; }
.heart { color:#ee4e4e; }
.food { color:#d8933f; transform:rotate(45deg) scale(.82); }
.heart.is-empty,.food.is-empty { opacity:.22; filter:grayscale(1); }
.heart.is-half,.food.is-half { opacity:.58; }
.hud__selected { bottom:145px; }
.hud__toast { position:absolute; left:50%; top:88px; transform:translate(-50%,-8px); padding:9px 13px; border-radius:8px; background:rgba(12,17,24,.8); border:1px solid rgba(255,255,255,.13); font-size:12px; font-weight:850; opacity:0; transition:.18s ease; }
.hud__toast.is-visible { opacity:1; transform:translate(-50%,0); }
.hud__toast--good { background:rgba(39,112,63,.86); }
.hud__toast--bad { background:rgba(147,49,43,.88); }
.mining-progress { position:absolute; left:50%; top:calc(50% + 28px); width:180px; height:8px; transform:translateX(-50%); border-radius:999px; overflow:visible; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.22); opacity:0; transition:opacity .12s ease; }
.mining-progress.is-visible { opacity:1; }
.mining-progress > span { display:block; width:0; height:100%; border-radius:999px; background:#f0d36a; }
.mining-progress > b { position:absolute; top:12px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:10px; font-weight:850; color:rgba(255,255,255,.9); }

/* Dynamic item slots */
.hotbar__slot { width:60px; height:60px; }
.item-icon { display:block; width:38px; height:38px; overflow:visible; image-rendering:pixelated; shape-rendering:crispEdges; filter:drop-shadow(0 2px 1px rgba(0,0,0,.5)); pointer-events:none; }
.item-count { position:absolute; right:5px; bottom:13px; z-index:2; min-width:13px; text-align:right; font:900 11px ui-monospace,monospace; }
.slot-empty { opacity:.2; font-size:26px; line-height:1; }
.durability { position:absolute; left:7px; right:7px; bottom:7px; height:4px; overflow:hidden; border-radius:999px; background:rgba(0,0,0,.55); }
.durability i { display:block; height:100%; background:#8ed05a; }
.hotbar__name { bottom:1px; font-size:7px; max-width:54px; }

/* Inventory + crafting */
.inventory-screen { z-index:5; background:rgba(5,8,12,.72); }
.inventory-panel { width:min(980px,96vw); max-height:90vh; overflow:auto; padding:28px; border:1px solid rgba(255,255,255,.17); border-radius:18px; background:linear-gradient(145deg,rgba(22,30,38,.98),rgba(9,14,20,.98)); box-shadow:0 32px 110px rgba(0,0,0,.6); pointer-events:auto; }
.inventory-panel__head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:20px; }
.inventory-panel__head h2 { margin:0; font-size:38px; letter-spacing:-.04em; }
.inventory-close { width:44px; height:44px; border:1px solid rgba(255,255,255,.14); border-radius:9px; background:rgba(255,255,255,.06); color:#fff; font-size:29px; cursor:pointer; }
.inventory-layout { display:grid; grid-template-columns:minmax(480px,1fr) minmax(280px,.6fr); gap:24px; align-items:start; }
.inventory-grid { display:grid; grid-template-columns:repeat(9,minmax(45px,1fr)); gap:6px; padding:10px; border-radius:12px; background:rgba(0,0,0,.26); }
.inventory-slot { position:relative; aspect-ratio:1; min-width:0; display:grid; place-items:center; border:2px solid rgba(255,255,255,.13); border-radius:7px; background:rgba(255,255,255,.055); color:#fff; cursor:pointer; transition:.12s ease; }
.inventory-slot:hover { border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.1); }
.inventory-slot--hotbar { border-color:rgba(240,204,85,.24); }
.inventory-slot.is-picked { border-color:#f0cc55; transform:translateY(-2px); box-shadow:0 0 0 2px rgba(240,204,85,.14); }
.inventory-slot[draggable="true"] { cursor:grab; }
.inventory-slot[draggable="true"]:active { cursor:grabbing; }
.inventory-slot.is-dragging { opacity:.4; transform:scale(.94); }
.inventory-slot.is-drop-target { border-color:#8ed05a; background:rgba(142,208,90,.13); box-shadow:0 0 0 3px rgba(142,208,90,.12); }
.inventory-slot .hotbar__name { display:none; }
.inventory-slot .item-count { bottom:4px; right:4px; }
.inventory-slot .durability { bottom:4px; left:5px; right:5px; }
.inventory-slot .hotbar__key { left:4px; top:3px; }
.inventory-tip { margin:10px 3px 0; color:rgba(255,255,255,.47); font-size:11px; line-height:1.5; }
.crafting-panel { padding:17px; border-radius:12px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.09); }
.crafting-panel h3 { margin:0 0 12px; font-size:17px; }
.recipes { display:grid; gap:8px; }
.recipe { display:flex; width:100%; gap:11px; align-items:center; padding:10px; border:1px solid rgba(255,255,255,.12); border-radius:9px; background:rgba(255,255,255,.06); color:#fff; text-align:left; cursor:pointer; }
.recipe:hover:not(:disabled) { border-color:rgba(168,221,101,.6); background:rgba(168,221,101,.09); }
.recipe.is-disabled { opacity:.38; cursor:not-allowed; }
.recipe__icon { flex:0 0 38px; display:grid; place-items:center; width:38px; height:38px; border-radius:6px; background:var(--item-color); font-size:20px; font-weight:900; box-shadow:inset -5px -5px 0 rgba(0,0,0,.13),inset 4px 4px 0 rgba(255,255,255,.12); }
.recipe strong { display:block; font-size:12px; }
.recipe small { display:block; margin-top:3px; color:rgba(255,255,255,.5); font-size:9px; line-height:1.35; }

@media (max-width: 820px) {
  .inventory-layout { grid-template-columns:1fr; }
  .inventory-grid { grid-template-columns:repeat(9,minmax(30px,1fr)); gap:3px; padding:6px; }
  .inventory-panel { padding:18px 12px; }
  .inventory-slot .item-icon { width:26px; height:26px; font-size:15px; }
  .survival-status { bottom:95px; gap:8px; padding:5px 7px; }
  .status-row { min-width:auto; }
  .heart,.food { width:9px; font-size:12px; }
  .hud__selected { bottom:126px; }
  .hotbar__slot { width:calc((100vw - 58px)/9); max-width:48px; height:50px; }
  .hotbar__slot .item-icon { width:25px; height:25px; font-size:14px; }
}

/* Minecraft-style crafting grid */
.crafting-workspace { display:flex; align-items:center; justify-content:center; gap:16px; padding:18px 10px; border-radius:12px; background:rgba(255,255,255,.035); }
.crafting-grid { --craft-size:2; display:grid; grid-template-columns:repeat(var(--craft-size),64px); gap:6px; }
.craft-slot,.craft-output { position:relative; width:64px; height:64px; display:grid; place-items:center; border:2px solid rgba(255,255,255,.14); border-radius:7px; background:rgba(255,255,255,.055); color:#fff; cursor:pointer; }
.craft-slot:hover { border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.1); }
.craft-output { width:72px; height:72px; cursor:default; border-color:rgba(255,255,255,.16); }
.craft-output.has-result { cursor:pointer; border-color:rgba(168,221,101,.75); background:rgba(168,221,101,.12); box-shadow:0 0 0 3px rgba(168,221,101,.08); }
.craft-arrow { font-size:36px; font-weight:900; color:rgba(255,255,255,.45); }
.crafting-help { margin:12px 0 0; color:rgba(255,255,255,.5); font-size:11px; line-height:1.5; }
.craft-slot .hotbar__name,.craft-output .hotbar__name { display:none; }
.craft-slot .item-count,.craft-output .item-count { bottom:4px; right:5px; }
.craft-slot .durability,.craft-output .durability { display:none; }

/* First person blocky arm / held item */
.first-person-hand { position:absolute; right:-18px; bottom:-20px; width:280px; height:280px; transform-origin:80% 85%; pointer-events:none; z-index:2; filter:drop-shadow(0 10px 12px rgba(0,0,0,.25)); }
.arm-cube { position:absolute; right:28px; bottom:6px; width:92px; height:190px; border:4px solid rgba(0,0,0,.14); background:linear-gradient(110deg,#d7a27e 0 28%,#bf805e 29% 68%,#9e6248 69%); transform:rotate(-27deg) skewY(-4deg); box-shadow:inset 14px 0 rgba(255,255,255,.08),inset -15px -12px rgba(0,0,0,.12); image-rendering:pixelated; }
.held-model { position:absolute; right:112px; bottom:122px; width:92px; height:92px; display:grid; place-items:center; border:0; border-radius:0; background-image:var(--item-icon); background-position:center; background-repeat:no-repeat; background-size:contain; image-rendering:pixelated; filter:drop-shadow(0 8px 3px rgba(0,0,0,.35)); transform:rotate(-19deg); opacity:0; }
.first-person-hand.has-item .held-model { opacity:1; }
.first-person-hand.has-tool .held-model { width:74px; height:150px; right:114px; bottom:106px; transform:rotate(-35deg); }
.first-person-hand.is-moving { animation:handBob .42s ease-in-out infinite alternate; }
.first-person-hand.is-swinging { animation:handSwing .24s cubic-bezier(.25,.8,.35,1); }
@keyframes handBob { from { transform:translate(0,0) rotate(0); } to { transform:translate(-4px,7px) rotate(1.8deg); } }
@keyframes handSwing { 0% { transform:translate(0,0) rotate(0); } 48% { transform:translate(-110px,70px) rotate(-38deg); } 100% { transform:translate(0,0) rotate(0); } }

.night-warning { position:absolute; left:50%; top:24px; transform:translate(-50%,-10px); padding:8px 13px; border-radius:8px; background:rgba(58,47,92,.82); border:1px solid rgba(184,157,255,.32); font-size:11px; font-weight:900; letter-spacing:.03em; opacity:0; transition:.3s ease; }
.night-warning.is-visible { opacity:1; transform:translate(-50%,0); }

@media (max-width:820px) {
  .first-person-hand { transform:scale(.72); transform-origin:100% 100%; }
  .crafting-grid { grid-template-columns:repeat(var(--craft-size),52px); }
  .craft-slot { width:52px; height:52px; }
  .craft-output { width:60px; height:60px; }
}


/* v0.5 — reliable item SVGs, crafting DnD and underwater HUD */
.craft-slot[draggable="true"] { cursor:grab; }
.craft-slot[draggable="true"]:active { cursor:grabbing; }
.craft-slot.is-dragging { opacity:.42; transform:scale(.94); }
.craft-slot.is-drop-target { border-color:#8ed05a; background:rgba(142,208,90,.16); box-shadow:0 0 0 3px rgba(142,208,90,.13); }
.inventory-slot.is-drop-target { border-color:#8ed05a; background:rgba(142,208,90,.16); box-shadow:0 0 0 3px rgba(142,208,90,.13); }

.status-row--oxygen { min-width:100px; }
.status-row.is-hidden { display:none; }
.bubble { display:inline-block; width:10px; font-size:12px; line-height:1; color:#8fd8ff; text-shadow:0 0 5px rgba(55,168,235,.75); }
.bubble.is-empty { opacity:.18; }
.underwater-overlay { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; background:linear-gradient(rgba(20,96,150,.23),rgba(7,55,101,.36)); box-shadow:inset 0 0 120px rgba(2,35,69,.5); mix-blend-mode:multiply; transition:opacity .18s ease; }
.underwater-overlay.is-visible { opacity:1; }

/* First person geometry is now rendered in WebGL; hide the old flat DOM arm. */
.first-person-hand { display:none !important; }

/* v0.6 — armor, chest and furnace UI */
.status-row--armor.is-hidden { display:none; }
.armor-icon { display:inline-block; width:10px; font-size:11px; color:#d8e1e4; text-shadow:0 0 5px rgba(180,220,235,.4); }
.armor-icon.is-empty { opacity:.14; }
.armor-section { margin-bottom:14px; padding-bottom:13px; border-bottom:1px solid rgba(255,255,255,.09); }
.armor-section h3,.chest-section h3,.furnace-section h3 { margin:0 0 10px; font-size:15px; }
.armor-grid { display:grid; grid-template-columns:repeat(4,52px); gap:7px; }
.armor-slot,.machine-slot { position:relative; width:52px; height:52px; display:grid; place-items:center; border:2px solid rgba(255,255,255,.14); border-radius:7px; background:rgba(255,255,255,.055); color:#fff; cursor:pointer; }
.armor-slot:hover,.machine-slot:hover { border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.1); }
.armor-slot .hotbar__name,.machine-slot .hotbar__name { display:none; }
.armor-placeholder { color:rgba(255,255,255,.18); font-size:22px; }
.chest-grid { display:grid; grid-template-columns:repeat(9,46px); gap:5px; padding:9px; background:rgba(0,0,0,.18); border-radius:9px; }
.chest-slot { width:46px; height:46px; }
.furnace-ui { display:grid; grid-template-columns:58px 42px 58px; grid-template-rows:58px 12px 58px; gap:7px 10px; align-items:center; justify-content:center; padding:16px; border-radius:10px; background:rgba(0,0,0,.2); }
.machine-slot { width:58px; height:58px; }
.furnace-input { grid-column:1; grid-row:1; }
.furnace-fuel { grid-column:1; grid-row:3; }
.furnace-output { grid-column:3; grid-row:1 / span 3; align-self:center; }
.furnace-flame { grid-column:1; grid-row:2; text-align:center; opacity:.25; filter:grayscale(1); }
.furnace-section.is-burning .furnace-flame { opacity:1; filter:none; animation:furnacePulse .45s ease-in-out infinite alternate; }
.furnace-progress { grid-column:2; grid-row:1 / span 3; width:42px; height:12px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.1); }
.furnace-progress i { display:block; height:100%; width:0; background:linear-gradient(90deg,#e7a53b,#f6dc73); transition:width .15s linear; }
@keyframes furnacePulse { from { transform:scale(.9); } to { transform:scale(1.08); } }
@media(max-width:820px){ .chest-grid{grid-template-columns:repeat(9,34px);gap:3px}.chest-slot{width:34px;height:34px}.armor-grid{grid-template-columns:repeat(4,44px)}.armor-slot{width:44px;height:44px} }
.crafting-section.is-hidden,.chest-section.is-hidden,.furnace-section.is-hidden{display:none!important;}
.weather-warning { position:fixed; top:96px; left:50%; transform:translateX(-50%) translateY(-6px); z-index:8; padding:7px 14px; border-radius:8px; background:rgba(12,20,27,.68); border:1px solid rgba(255,255,255,.15); color:#e8f4ff; font-weight:900; letter-spacing:.04em; opacity:0; pointer-events:none; transition:.18s ease; text-shadow:0 2px 3px rgba(0,0,0,.55); }
.weather-warning.is-visible { opacity:1; transform:translateX(-50%) translateY(0); }
.weather-warning[data-weather="storm"] { color:#fff3a6; }
.weather-warning[data-weather="snow"] { color:#f5fbff; }
.inventory-cursor { position:fixed; left:0; top:0; z-index:1000; width:48px; height:48px; pointer-events:none; display:grid; place-items:center; filter:drop-shadow(0 4px 4px rgba(0,0,0,.7)); }
.inventory-cursor.is-hidden { display:none; }
.inventory-cursor .item-icon { width:38px; height:38px; }
.inventory-cursor .item-count { position:absolute; right:1px; bottom:1px; font-size:15px; font-weight:900; text-shadow:0 2px 2px #000; }
.inventory-cursor .hotbar__name,.inventory-cursor .hotbar__key,.inventory-cursor .durability { display:none; }
.inventory-slot.is-distribute-target,.craft-slot.is-distribute-target,.chest-slot.is-distribute-target { border-color:#f0cc55 !important; background:rgba(240,204,85,.13) !important; box-shadow:0 0 0 3px rgba(240,204,85,.12); }

/* v1.4 — food + farming */
.eating-progress { position:absolute; left:50%; top:calc(50% + 28px); width:180px; height:8px; transform:translateX(-50%); border-radius:999px; overflow:visible; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.22); opacity:0; transition:opacity .1s ease; }
.eating-progress.is-visible { opacity:1; }
.eating-progress > span { display:block; width:0; height:100%; border-radius:999px; background:#d99a45; }
.eating-progress > b { position:absolute; top:12px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:10px; font-weight:850; color:rgba(255,255,255,.92); }
.eating-progress.is-visible + .hotbar { }
.hud__toast--warn { background:rgba(155,103,38,.9); border-color:rgba(245,191,82,.45); }

/* v1.5 — sleeping */
.sleep-overlay {
  position:absolute; inset:0; z-index:18; pointer-events:none;
  display:grid; place-items:center;
  background:rgba(8,12,29,0); opacity:0;
  transition:background .28s ease, opacity .28s ease;
}
.sleep-overlay div {
  padding:14px 18px; border-radius:10px;
  background:rgba(16,20,36,.82); border:1px solid rgba(255,255,255,.14);
  color:#f7f2e9; font-size:13px; font-weight:900; letter-spacing:.02em;
  transform:translateY(8px); transition:transform .28s ease;
}
.sleep-overlay.is-visible { background:rgba(8,12,29,.78); opacity:1; }
.sleep-overlay.is-visible div { transform:translateY(0); }