html,body{margin:0;height:100%;overflow:hidden;background:#8fd3ff;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#1b1340;touch-action:none;-webkit-user-select:none;user-select:none}
#scene3d{position:fixed;inset:0;width:100%;height:100%;display:block}
[data-ic]::before{content:attr(data-ic);font-size:1.35em;line-height:1}
#hud{position:fixed;inset:0;pointer-events:none}
#hud>*{pointer-events:auto}
.me{position:absolute;left:max(10px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;background:rgba(255,255,255,.82);box-shadow:0 4px 14px rgba(40,20,90,.18);font:800 14px system-ui}
/* an animal in its rank frame (as www/studio.css, which this page does not load): the "who is here" list, the knock card */
.aigs-av{position:relative;display:inline-block;background:center/contain no-repeat}
.aigs-av img{position:absolute;left:50%;top:50%;width:48%;height:48%;transform:translate(-50%,-50%)}
.me .aigs-av{width:36px;height:36px}
#knock .aigs-av{display:block}
.energy{position:absolute;right:max(10px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));width:128px;height:30px;border-radius:999px;background:rgba(255,255,255,.82);overflow:hidden;box-shadow:0 4px 14px rgba(40,20,90,.18)}
.energy i{position:absolute;left:0;top:0;bottom:0;width:100%;background:#3fb950;transition:width .6s ease,background .6s}
.energy span{position:relative;display:block;text-align:center;font:800 14px/30px system-ui;color:#13202b;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.tip{position:absolute;left:50%;top:calc(132px + env(safe-area-inset-top));transform:translateX(-50%);max-width:min(92vw,420px);padding:9px 16px;border-radius:16px;background:rgba(27,19,64,.82);color:#fff;font:700 15px/1.3 system-ui;text-align:center;opacity:0;transition:opacity .3s;pointer-events:none}
.tip.on{opacity:1;pointer-events:auto;cursor:pointer}
.buttons{position:absolute;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:0 10px}
.buttons button,.buttons a{display:inline-flex;align-items:center;gap:8px;height:56px;padding:0 20px;border:0;border-radius:18px;background:linear-gradient(90deg,#5ad7ff,#ff5fd2);color:#1b1340;font:900 16px system-ui;letter-spacing:.03em;text-decoration:none;box-shadow:0 8px 22px rgba(255,95,210,.35);cursor:pointer}
.buttons .small{height:44px;padding:0 13px;background:rgba(255,255,255,.85);box-shadow:0 4px 14px rgba(40,20,90,.18);font-size:13px}
.buttons button:disabled{opacity:.55;filter:grayscale(.4)}
.buttons button:active,.buttons a:active{transform:scale(.96)}
.progress{position:absolute;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(70vw,280px);height:18px;border-radius:999px;background:rgba(255,255,255,.8);overflow:hidden}
.progress i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#ff4d6d,#fbbf24,#3fb950,#3b82f6,#a855f7);transition:width .15s}
.progress span{position:relative;display:block;text-align:center;font:800 12px/18px system-ui}
.gate{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:radial-gradient(circle at 50% 40%,#fff6fd,#bfe7ff 60%,#8fd3ff);text-align:center;padding:20px;transition:opacity .6s}
.gate.off{opacity:0;pointer-events:none}
.gate .big{font-size:84px;margin:0;animation:bob 1.6s ease-in-out infinite}
.gate p{font:800 18px system-ui;margin:0}
.gate a{display:inline-flex;gap:8px;align-items:center;margin-top:14px;padding:14px 22px;border-radius:18px;background:linear-gradient(90deg,#5ad7ff,#ff5fd2);color:#1b1340;font:900 16px system-ui;text-decoration:none}
@keyframes bob{50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.gate .big{animation:none}.energy i{transition:none}}
.buttons [hidden],[hidden]{display:none!important}
/* Goodbye: fade, the Earth, the card (h4p1NAT 2026-10-29 23:14) */
#hud.quiet .buttons,#hud.quiet .tip{opacity:0;pointer-events:none;transition:opacity .4s}
#fade{position:fixed;inset:0;background:#f4fbff;opacity:0;pointer-events:none;z-index:5}
#bye{position:fixed;inset:0;z-index:6;display:flex;align-items:flex-end;justify-content:center;padding:0 14px max(18px,env(safe-area-inset-bottom));pointer-events:none}
#bye .card{pointer-events:auto;width:min(100%,430px);background:rgba(10,12,30,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#eef3ff;border:1px solid rgba(255,255,255,.18);border-radius:24px;padding:18px 18px 14px;text-align:center;transform:translateY(30px);opacity:0;transition:transform .6s cubic-bezier(.2,1.4,.4,1),opacity .5s}
#bye.on .card{transform:none;opacity:1}
#bye .big{font-size:54px;margin:0;line-height:1}
#bye h2{margin:4px 0 6px;font:900 30px system-ui;background:linear-gradient(90deg,#ff4d6d,#fbbf24,#3fb950,#22d3ee,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}
#bye .lead{margin:0 0 10px;font:700 16px system-ui}
#bye .row{margin:6px 0;font:500 15px/1.35 system-ui;color:#d7def0}#bye .row b{color:#fff}
#bye .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0 2px}
#bye .btns button,#bye .btns a{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 18px;border:0;border-radius:16px;background:linear-gradient(90deg,#5ad7ff,#ff5fd2);color:#1b1340;font:900 15px system-ui;text-decoration:none;cursor:pointer}
#bye .btns a{background:rgba(255,255,255,.9)}
#bye .btns button:disabled{opacity:.45;filter:grayscale(.5)}
/* mini map, compass to the house, Polish clock (h4p1NAT 2026-10-29 23:25–23:26) */
.nav{position:absolute;right:max(10px,env(safe-area-inset-right));top:calc(74px + env(safe-area-inset-top));display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
#minimap{width:118px;height:118px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 4px 16px rgba(40,20,90,.25),0 0 0 3px rgba(255,255,255,.85)}
.compass{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border-radius:999px;background:rgba(255,255,255,.85);box-shadow:0 4px 14px rgba(40,20,90,.18);font:800 13px system-ui;color:#1b1340}
.compass span{display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;background:#ff5fd2;color:#fff;font-size:13px;transform-origin:50% 50%;transition:transform .15s linear}
.compass span{rotate:-90deg}
.clock{display:flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:999px;background:rgba(255,255,255,.85);box-shadow:0 4px 14px rgba(40,20,90,.18);color:#1b1340}
#clockFace{width:40px;height:40px}
.clock span{display:flex;flex-direction:column;line-height:1.05}
.clock b{font:800 15px system-ui;font-variant-numeric:tabular-nums}
.clock small{font:700 10px system-ui;opacity:.75}
#hud.quiet .nav{opacity:0;transition:opacity .4s}

/* who is in Unicornville (h4p1NAT 2026-10-30 07:54) */
.whochip{pointer-events:auto;padding:6px 14px;border-radius:999px;border:0;background:linear-gradient(90deg,#5ad7ff,#ff5fd2);color:#1b1340;font:800 15px system-ui;box-shadow:0 4px 14px rgba(40,20,90,.25);cursor:pointer}
.who{position:fixed;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));max-height:58vh;overflow:auto;z-index:30;border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 14px 40px rgba(40,20,90,.35);color:#1b1340;padding:10px 12px 12px}
.who header{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 8px;font:800 16px system-ui}
.who .close{border:0;background:#efeaff;border-radius:50%;width:36px;height:36px;font-size:16px;cursor:pointer}
.who ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.who li button{width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;border-radius:16px;background:#f5f2ff;color:inherit;text-align:left;font:inherit;cursor:pointer}
.who .aigs-av{width:40px;height:40px;flex:none}.who .wn{flex:1;min-width:0;display:flex;flex-direction:column}.who .wn b{font:800 15px system-ui}.who .wn small{font:600 13px system-ui;color:#5b4a8f}
.who .wd{display:flex;align-items:center;gap:6px;font:800 14px system-ui;white-space:nowrap}.who .wd i{display:inline-block;font-style:normal;color:#ff5fd2;rotate:-90deg}
.who li.none{padding:12px;color:#5b4a8f;font:600 14px system-ui}

/* reports from the world (h4p1NAT 2026-10-30 08:38) */
.rep .kinds{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.rep .kinds button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border:2px solid transparent;border-radius:14px;background:#f5f2ff;color:#1b1340;font:800 12px system-ui;cursor:pointer}
.rep .kinds button[aria-pressed=true]{border-color:#ff5fd2;background:#ffe9f8}
.rep textarea{width:100%;box-sizing:border-box;border:2px solid #e2dcff;border-radius:14px;padding:10px;font:500 16px system-ui;color:#1b1340;resize:vertical}
.rep .send{width:100%;height:48px;margin-top:6px;border:0;border-radius:14px;background:linear-gradient(90deg,#5ad7ff,#ff5fd2);color:#1b1340;font:900 15px system-ui;cursor:pointer}
.rep .repmsg{min-height:1.2em;margin:6px 2px 0;font:700 13px system-ui;color:#5b4a8f}

/* resources (report 39) */
.inv{position:absolute;left:max(10px,env(safe-area-inset-left));top:calc(62px + env(safe-area-inset-top));display:flex;gap:6px;flex-wrap:wrap;max-width:60vw;pointer-events:none}
.inv button{pointer-events:auto;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s}.inv button:active{transform:scale(.92)}
.inv button{padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.88);box-shadow:0 3px 10px rgba(40,20,90,.16);font:700 14px system-ui;color:#1b1340}
.inv b{font-variant-numeric:tabular-nums}
/* a counter that changed pops (ZG-55) */
.inv button.pop{animation:invPop .55s cubic-bezier(.3,1.6,.5,1)}.inv button.up{box-shadow:0 0 0 3px #3fb950,0 3px 10px rgba(40,20,90,.16)}.inv button.down{box-shadow:0 0 0 3px #ff5fd2,0 3px 10px rgba(40,20,90,.16)}
@keyframes invPop{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.inv button.pop{animation:none}}

/* the mine (report 41) */
#btnRails.on{outline:3px solid #ff5fd2}
#btnCraft:disabled{opacity:.5}

/* what is new after an update (h4p1NAT 2026-10-30 09:33) */
.news{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(20,10,50,.35);padding:16px}
.news .card{width:min(460px,100%);max-height:80vh;overflow:auto;border-radius:24px;background:#fff;color:#1b1340;padding:16px 18px;box-shadow:0 18px 50px rgba(20,10,60,.4);font:500 15px/1.45 system-ui}
.news h2{margin:0 0 6px;font:900 22px system-ui;background:linear-gradient(90deg,#5ad7ff,#ff5fd2);-webkit-background-clip:text;background-clip:text;color:transparent}
.news h3{margin:10px 0 4px;font:800 14px system-ui;color:#5b4a8f}.news ul{margin:0;padding-left:20px}.news li{margin:3px 0}
.news .head{display:flex;align-items:center;gap:8px}.news .head h2{flex:1}
.news button.ok{width:100%;height:50px;margin-top:12px;border:0;border-radius:16px;background:linear-gradient(90deg,#5ad7ff,#ff5fd2);color:#1b1340;font:900 16px system-ui;cursor:pointer}

/* read aloud (h4p1NAT 2026-10-30 09:43): the button and the word being read */
.speak{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:rgba(90,215,255,.25);font-size:20px;line-height:40px;padding:0;cursor:pointer;pointer-events:auto;vertical-align:middle}
.speak.on{background:linear-gradient(135deg,#5ad7ff,#ff5fd2);animation:speakPulse 1s ease-in-out infinite}
.tip .speak{width:32px;height:32px;font-size:16px;line-height:32px;margin-left:8px;background:rgba(255,255,255,.18)}
.sw{border-radius:5px;transition:background .12s,color .12s}
.sw.on{background:#ffe066;color:#1b1340;box-shadow:0 0 0 2px #ffe066}
@keyframes speakPulse{50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.speak.on{animation:none}}

/* a new version: an offer or a 10 s countdown, with what it brings (h4p1NAT 2026-10-30 09:46–09:47) */
.upd{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:35;width:min(420px,calc(100vw - 32px));max-height:42vh;overflow:auto;border-radius:20px;background:rgba(255,255,255,.96);color:#1b1340;padding:10px 14px 12px;box-shadow:0 12px 36px rgba(20,10,60,.35);font:500 14px/1.4 system-ui;animation:updIn .3s ease-out}
.upd .head{display:flex;align-items:center;gap:8px}.upd .head b{flex:1;font:900 16px system-ui}
.upd.must .head b{color:#c2187a}.upd p{margin:4px 0 2px;font-weight:700;color:#5b4a8f}.upd ul{margin:0;padding-left:18px}.upd li{margin:2px 0}
.upd .bar{height:6px;margin-top:8px;border-radius:3px;background:#eee8ff;overflow:hidden}.upd .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5ad7ff,#ff5fd2)}
.upd .row{display:flex;gap:8px;margin-top:10px}.upd .row button{flex:1;height:44px;border:0;border-radius:14px;font:900 15px system-ui;cursor:pointer}
.upd .go{background:linear-gradient(90deg,#5ad7ff,#ff5fd2);color:#1b1340}.upd .no{flex:0 0 34%!important;background:#eee8ff;color:#5b4a8f}
@keyframes updIn{from{opacity:0;transform:translate(-50%,16px)}}
@media (prefers-reduced-motion:reduce){.upd{animation:none}}
/* abilities under the nick: 🐾 land, 🌊 water, 🪽 air (h4p1NAT 2026-10-30 09:44) */
.me .ab{border:0;background:rgba(90,215,255,.2);border-radius:999px;padding:2px 7px;font-size:14px;line-height:1.3;cursor:pointer;pointer-events:auto}
.me .ab:empty{display:none}
/* a ship's shop (h4p1NAT 2026-10-30 09:32) */
.shop .cap{margin:0 4px 8px;font:600 14px/1.35 system-ui;color:#5b4a8f}.shop ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.shop li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:14px;background:#f5f1ff;font:700 16px system-ui;color:#1b1340}
.shop li span{flex:1;white-space:nowrap}.shop li button{flex:none;width:auto;min-width:96px;border:0;border-radius:12px;padding:8px 14px;background:linear-gradient(90deg,#5ad7ff,#ff5fd2);color:#1b1340;font:900 14px system-ui;cursor:pointer}.shop li button:disabled{opacity:.4;filter:grayscale(1)}
/* the big map (report 44) */
.bigmap{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(20,10,50,.55);padding:16px}
.bigmap header{display:flex;align-items:center;justify-content:space-between;width:min(100%,520px);color:#fff;font:900 18px system-ui}
.bigmap .close{border:0;background:#fff;border-radius:50%;width:38px;height:38px;font-size:16px;cursor:pointer}
.bigmap canvas{border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 10px 40px rgba(0,0,0,.4)}
.bigmap p{margin:0;color:#fff;font:600 14px system-ui;text-align:center}

/* a knock on my door (h4p1NAT 12:51): over everything, also over the goodbye card */
#knock{position:fixed;left:0;right:0;top:max(70px,calc(env(safe-area-inset-top) + 60px));z-index:9;display:flex;justify-content:center;padding:0 14px;pointer-events:none}
#knock .card{pointer-events:auto;width:min(100%,400px);background:rgba(255,255,255,.96);color:#1b1340;border-radius:22px;padding:14px 16px 12px;text-align:center;box-shadow:0 10px 30px rgba(27,19,64,.35);animation:knockIn .35s cubic-bezier(.2,1.4,.4,1)}
#knock .aigs-av{width:56px;height:56px;margin:0 auto 4px}
#knock .lead{margin:4px 0 10px;font:700 17px/1.35 system-ui}
#knock .btns{display:flex;gap:10px;justify-content:center;margin:0}
#knock .btns button{height:50px;padding:0 18px;border:0;border-radius:16px;font:900 15px system-ui;cursor:pointer;background:linear-gradient(90deg,#5ad7ff,#ff5fd2);color:#1b1340}
#knock .btns .no{background:#ece8f7}
@keyframes knockIn{from{transform:translateY(-20px) scale(.96);opacity:0}to{transform:none;opacity:1}}

/* the 🍽️ meter under the energy (h4p1NAT 12:45): a tap says what my animal eats */
.food{position:absolute;right:max(10px,env(safe-area-inset-right));top:calc(48px + env(safe-area-inset-top));width:128px;height:20px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.82);overflow:hidden;box-shadow:0 3px 10px rgba(40,20,90,.15);cursor:pointer}
.food i{position:absolute;left:0;top:0;bottom:0;width:100%;background:#ff9f43;transition:width .6s ease,background .6s}
.food span{position:relative;display:block;text-align:center;font:800 12px/20px system-ui;color:#13202b;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.food.hungry i{background:#ef4444}
@media (prefers-reduced-motion:reduce){.food i{transition:none}}
/* the shark's „AM!” (h4p1NAT 11:38): big over the game for a moment, never in the way of a finger */
.am{position:fixed;left:50%;top:38%;z-index:8;white-space:nowrap;transform:translate(-50%,-50%);pointer-events:none;font:900 64px system-ui;color:#e0393e;-webkit-text-stroke:3px #fff;text-shadow:0 6px 18px rgba(27,19,64,.35);animation:amPop 1.4s ease-out forwards}
@keyframes amPop{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}15%{transform:translate(-50%,-50%) scale(1.15);opacity:1}70%{opacity:1}100%{transform:translate(-50%,-60%) scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.am{animation:none;opacity:1}}

/* inside a house (K-116): the chest and the workbench in a sheet under the room */
.room{max-height:46vh;bottom:calc(78px + env(safe-area-inset-bottom))}
.room li span{white-space:normal;font-size:15px}
.room li button{min-width:0!important;padding:8px 10px!important;font-size:13px!important}
.room li.none{display:block;background:none;color:#5b4a8f;font:600 14px system-ui}
.room li.unknown{background:#ece8f6;color:#6d6390}.room li.unknown small{display:block;font:600 12px system-ui;color:#5b4a8f;margin-top:2px}
.inv button.tool{background:rgba(255,246,214,.94)}.inv button.tool.broken{background:rgba(255,220,226,.94);color:#a1213d}
#hud.inroom #minimap,#hud.inroom .compass{display:none}
/* rarely used: icons only, the name in the label (fewer rows of buttons over the world, 0.21.0) */
.buttons .icon{width:44px;padding:0;justify-content:center;font-size:0;gap:0}
.buttons .icon::before{font-size:20px}
/* ---------- ghosts (K-132): the countdown, a ghost's HUD, the waiting room and the goodbye ---------- */
.gtime{display:none}
.ghost .gtime{display:block;position:absolute;right:max(10px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));padding:0 14px;height:32px;border-radius:999px;background:rgba(255,255,255,.88);box-shadow:0 4px 14px rgba(40,20,90,.18);font:900 16px/32px system-ui;font-variant-numeric:tabular-nums;color:#2b2160}
.ghost .gtime.low{background:#ffe1ec;color:#b0124a}
.ghost .energy,.ghost .food,.ghost .inv,.ghost #meAb,.ghost .buttons>:not(#btnSurface){display:none!important}
.me .gav .gh{width:28px;height:34px;display:block;animation:none}
.ghostgate{position:fixed;inset:0;z-index:50;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;display:flex;align-items:flex-start;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));background:radial-gradient(120% 80% at 50% 0%,#e9e4ff,#b9d8ff 55%,#8fb9f0);transition:opacity .6s;box-sizing:border-box}
.ghostgate[data-kind=end]{background:radial-gradient(120% 80% at 50% 0%,rgba(233,228,255,.94),rgba(185,216,255,.92) 55%,rgba(143,185,240,.94))}
.ghostgate.off{opacity:0;pointer-events:none}
.ghostgate[hidden]{display:none}
.gcard{width:100%;max-width:440px;margin:auto 0;text-align:center;-webkit-user-select:text;user-select:text}
.gcard h1{margin:4px 0 6px;font:900 30px/1.1 system-ui;letter-spacing:-.01em;color:#2b2160}
.glang{display:flex;justify-content:flex-end;gap:6px;margin:0}
.glang button{border:0;border-radius:10px;padding:6px 10px;background:rgba(255,255,255,.6);font:800 13px system-ui;color:#2b2160}
.glang button[aria-pressed=true]{background:#2b2160;color:#fff}
.grow{display:flex;align-items:flex-end;justify-content:center;gap:6px;min-height:78px;margin:6px 0 2px}
.gh{width:36px;height:44px;fill:rgba(255,255,255,.85);stroke:rgba(110,120,200,.35);stroke-width:1.2;filter:drop-shadow(0 4px 8px rgba(60,50,140,.25))}
.gh circle:nth-of-type(1),.gh circle:nth-of-type(2){fill:#241a4a;stroke:none}
.gh circle:nth-of-type(3),.gh circle:nth-of-type(4){fill:#fff;stroke:none}
.gh.you{width:52px;height:62px;fill:#fff;stroke:#8a7cff;stroke-width:1.6}
.gh.a0,.gh.a1,.gh.a2,.gh.you,.gh.wave{animation:ghbob 1.8s ease-in-out infinite}
.gh.a1{animation-delay:-.6s}.gh.a2{animation-delay:-1.2s}.gh.you{animation-duration:1.5s}
.grow .more{font:900 20px system-ui;color:#5b4fb0;align-self:center}
.gate-arch{font-size:40px;line-height:1;margin-left:4px;align-self:center}
@keyframes ghbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.gq{margin:8px 0 12px;font:900 21px/1.25 system-ui;color:#2b2160}
.gbig{margin:6px 0 0}.gbig .gh{width:84px;height:100px;fill:#fff;stroke:#8a7cff}
.gsub{margin:0 0 10px;font:800 18px system-ui;color:#3b2a7a}
.gtxt{margin:8px auto;max-width:400px;font:600 16px/1.45 system-ui;color:#2b2160}
.gfund{font-weight:800}
.gbtns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:16px 0 8px}
.gbtns a,.gbtns button{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 22px;border:0;border-radius:18px;background:linear-gradient(90deg,#5ad7ff,#ff5fd2);color:#1b1340;font:900 17px system-ui;text-decoration:none;box-shadow:0 6px 18px rgba(80,40,160,.25)}
.gbtns button{background:#fff}
.gbtns button.genter{background:#2b1d5c;color:#fff;font-size:1.1em}
.glinks{margin:6px 0}
.glinks a{color:#3b2a9a;font:800 15px/1.4 system-ui}
.gcard footer{margin:18px auto 4px;max-width:400px;font:500 11.5px/1.45 system-ui;color:#4a4a7a}
.gcard footer a{color:inherit}
@media (prefers-reduced-motion:reduce){.gh{animation:none!important}}
/* the pirate captain's treasure (K-147): the parchment map, the Captain's Journal, the chest card */
.news.parch .card,.news.journal .card{background:linear-gradient(160deg,#fbf0d2,#f1dca8);border:3px solid #c9a46a;color:#3b2410}
.news.parch h2,.news.journal h2{background:none;color:#7a3b12;-webkit-text-fill-color:#7a3b12}
.news.parch .chart{display:block;width:100%;height:auto;margin:4px 0 6px;border-radius:14px;background:repeating-linear-gradient(45deg,rgba(201,164,106,.18) 0 6px,transparent 6px 12px)}
.news.parch .card{padding:12px 10px 12px;max-height:94vh}
.news.parch .head{padding:0 6px}
.news.parch .chartbox{width:100%;line-height:0;margin:2px 0 6px}
.news.parch canvas.tmap{display:block;margin:0 auto;max-width:100%;height:auto;touch-action:none}
.news.parch .body{padding:0 6px;font:500 14.5px/1.45 Georgia,serif}.news.parch .body p{margin:4px 0}
.news.parch .from{font-style:italic;color:#7a3b12}
.news.parch .give{padding:0 6px}
.news.parch .giveBtn,.news.parch .giveList .to{width:100%;height:46px;margin-top:8px;border:2px solid #c9a46a;border-radius:14px;background:#fff7e0;color:#3b2410;font:800 15px system-ui;cursor:pointer}
.news.parch .giveList .to.sure{background:linear-gradient(90deg,#ffd23f,#ff8c42);border-color:#b7791f}
.news.parch .giveLead,.news.parch .nobody{margin:8px 0 0;font:500 13.5px/1.4 system-ui;color:#6b4a22}
.news.parch .ok{width:calc(100% - 12px);margin:10px 6px 0}
.news.parch.got .btns{display:flex;gap:8px;padding:0 6px}.news.parch.got .btns button{flex:1;height:50px;margin-top:8px;border:0;border-radius:16px;font:900 16px system-ui;cursor:pointer;background:#fff7e0;color:#3b2410}
.news.parch.got .btns .look{background:linear-gradient(90deg,#ffd23f,#ff8c42)}
.news.parch.got p.got{font:800 18px/1.4 system-ui;text-align:center}
.news.journal .page{margin:6px 0 10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.55);font:500 15px/1.5 Georgia,serif}
.news.journal .page.locked{color:#9a8a6e;font-style:italic}
.news.journal h3,.news.parch h3{color:#7a3b12}
.news.treasure .card{text-align:center;background:radial-gradient(circle at 50% 0,#fff6c9,#fff 60%)}
.news.treasure .big{margin:0;font-size:56px;animation:treasureBob 1.2s ease-in-out infinite}
.news.treasure ul{list-style:none;padding:0;font:800 17px system-ui}.news.treasure .wings{font:800 16px system-ui;color:#b7791f}
.news.treasure .btns{display:flex;gap:8px}.news.treasure .btns button{flex:1;height:50px;margin-top:8px;border:0;border-radius:16px;font:900 16px system-ui;cursor:pointer;background:#f1e9ff;color:#1b1340}
.news.treasure .btns button.ok{background:linear-gradient(90deg,#ffd23f,#ff8c42)}
@keyframes treasureBob{50%{transform:translateY(-6px) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.news.treasure .big{animation:none}}

/* the chest-opening ceremony in 3D (K-147, h4p1NAT 2026-10-31 12:29–12:37): www/world/chest3d.js draws the scene */
.chest3d{position:fixed;inset:0;z-index:9999;background:#150f35;overflow:hidden;font-family:system-ui,sans-serif;touch-action:none;cursor:pointer}
.chest3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.chest3d .hint{position:absolute;left:0;right:0;top:12%;margin:0;text-align:center;color:#fff;font:900 26px system-ui;text-shadow:0 2px 12px #000a;animation:c3Hint 1s ease-in-out infinite;pointer-events:none}
.chest3d .pips{position:absolute;left:0;right:0;bottom:18%;display:flex;justify-content:center;gap:10px;pointer-events:none}
.chest3d .pips i{width:14px;height:14px;border-radius:50%;background:#fff3;transition:background .2s,transform .2s}.chest3d .pips i.on{background:#ffd23f;transform:scale(1.35);box-shadow:0 0 12px #ffd23f}
.chest3d.open .hint,.chest3d.open .pips{display:none}
.chest3d .chips{position:absolute;left:12px;right:12px;top:10%;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;pointer-events:none}
.chest3d .chip{display:flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:999px;background:#ffffffe6;color:#1b1340;font:800 14px system-ui;animation:c3Chip .5s cubic-bezier(.2,1.8,.4,1) both}
.chest3d .chip em{font:900 17px system-ui;font-style:normal;color:#b7791f}
.chest3d .end{position:absolute;left:16px;right:16px;bottom:5%;max-width:420px;margin:0 auto;text-align:center;color:#fff;animation:c3Chip .8s cubic-bezier(.2,1.6,.4,1) both;cursor:default}
.chest3d .end h2{margin:0 0 4px;font:900 30px system-ui;color:#ffd23f;text-shadow:0 0 18px #ff8c42}
.chest3d .end p{margin:6px 0;font:700 16px system-ui;text-shadow:0 1px 6px #000a}
.chest3d .end .btns{display:flex;gap:8px}.chest3d .end .btns button{flex:1;height:52px;border:0;border-radius:16px;font:900 17px system-ui;cursor:pointer}
.chest3d .end .btns .ok{background:linear-gradient(90deg,#ffd23f,#ff8c42);color:#1b1340}.chest3d .end .btns .jr{background:#fff;color:#1b1340}
@keyframes c3Hint{50%{transform:scale(1.08)}}
@keyframes c3Chip{from{transform:translateY(30px) scale(.4);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.chest3d *{animation:none!important}}
/* discoveries and levels (K-175): the level by the nick, the bubble of a discovery, the book of discoveries */
.me{max-width:calc(100vw - 160px);box-sizing:border-box}
.me .nm{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
#meNick{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me .lvl{flex:none;display:flex;align-items:center;gap:5px;border:0;border-radius:999px;padding:2px 7px;background:linear-gradient(90deg,#ffd166,#ffb0e6);color:#3b2410;font:900 11px/1.1 system-ui;cursor:pointer;pointer-events:auto}
.me .lvl i{display:block;width:38px;height:4px;border-radius:2px;background:rgba(59,36,16,.2);overflow:hidden}
.me .lvl u{display:block;height:100%;width:0;background:#fff;transition:width .6s}
#discToast{position:fixed;left:50%;top:34%;z-index:45;display:flex;flex-direction:column;align-items:center;gap:2px;width:max-content;max-width:min(88vw,420px);box-sizing:border-box;padding:10px 18px;border-radius:18px;background:linear-gradient(90deg,#ffe08a,#ffb0e6);color:#1b1340;font:800 15px/1.3 system-ui;text-align:center;box-shadow:0 10px 30px rgba(60,20,90,.35);opacity:0;transform:translate(-50%,-16px) scale(.9);transition:opacity .3s,transform .35s cubic-bezier(.2,1.6,.4,1);pointer-events:none}
#discToast.on{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto;cursor:pointer}
#discToast b{font-weight:900}
.discbook ul{padding-left:0;margin:0}
.discbook li{list-style:none;display:flex;gap:8px;align-items:flex-start;margin:5px 0}
.discbook li i{font-style:normal;font-size:20px;line-height:1.2;width:26px;flex:none;text-align:center}
.discbook li span{display:flex;flex-direction:column}
.discbook li small,.discbook h3 small,.discbook .small{font-weight:600;opacity:.75}
.discbook li.no{opacity:.72}
.discbook .lvl{margin:2px 0;font-weight:800}
.discbook .bar{height:10px;margin:4px 0;border-radius:5px;background:rgba(122,59,18,.18);overflow:hidden}
.discbook .bar u{display:block;height:100%;background:linear-gradient(90deg,#ffd166,#ff5fd2)}

/* K-184: home choices wrap within a narrow phone. */
.room.home-style li{flex-wrap:wrap;justify-content:flex-start}
.room.home-style li>span{flex-basis:100%;min-width:0}
.room.home-style li button{min-height:48px;max-width:100%;white-space:normal}
.room.home-style header{position:sticky;top:-10px;z-index:2;background:#fff;padding:8px 0}

/* the kraken's life (K-170) */
#bossBar{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 322px);transform:translateX(-50%);z-index:40;width:min(80vw,320px);box-sizing:border-box;padding:6px 12px 8px;border-radius:14px;background:rgba(27,19,64,.82);color:#fff;font:800 13px/1.2 system-ui;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.3);pointer-events:none}
#bossBar[hidden]{display:none}
#bossBar i{display:block;height:10px;margin:5px 0 3px;border-radius:6px;background:rgba(255,255,255,.18);overflow:hidden}
#bossBar u{display:block;height:100%;width:100%;border-radius:6px;background:linear-gradient(90deg,#ff5fd2,#7a5cff);transition:width .4s}
#bossBar span{font-weight:700;font-size:12px;opacity:.9}


/* K-198: dream theatre, native dialog focus trapping and reduced motion. */
#dreamDialog { color:#f2eeff; background:#17122c; border:1px solid #a294c9; border-radius:24px; width:min(560px,calc(100vw - 24px)); max-width:calc(100vw - 24px); max-height:85dvh; padding:18px; box-sizing:border-box; overflow:auto; box-shadow:0 20px 80px #000a; }
#dreamDialog::backdrop { background:#0b0629b8; backdrop-filter:blur(5px); }
#dreamDialog header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#dreamDialog h2 { font-size:1.25rem; margin:0; }
#dreamDialog h3 { font-size:.85rem; color:#cabfe5; margin:18px 0 8px; }
#dreamDialog button { min-height:44px; color:inherit; background:#41365e; border:1px solid #8c7baf; border-radius:12px; padding:8px 12px; cursor:pointer; }
#dreamDialog button:focus-visible { outline:3px solid #f6d88c; outline-offset:3px; }
#dreamDialog .dream-note { font-size:.85rem; color:#c6bed7; line-height:1.5; }
.dream-sky { position:relative; display:flex; align-items:center; justify-content:space-evenly; min-height:200px; padding:35px 4px 8px; overflow:hidden; border-radius:18px; background:radial-gradient(circle at 25% 25%,#fff8 1px,transparent 2px) 0 0/43px 57px,radial-gradient(ellipse at bottom,#7259a4,#161535 80%); }
.dream-sky.mood-1 { background-color:#123742; }
.dream-moon { position:absolute; top:0; right:16px; font-size:48px; color:#ffe5b5; }
.dream-sky figure { width:30%; margin:0; text-align:center; animation:dream-rise 1s both; animation-delay:calc(var(--i)*.6s); }
.dream-sky figure>span { display:block; font-size:clamp(40px,12vw,70px); filter:drop-shadow(0 8px 12px #d4b7ff66); }
.dream-sky figcaption { margin-top:12px; font-size:.78rem; overflow-wrap:anywhere; line-height:1.35; }
.dream-sentence { line-height:1.6; font-size:1rem; }
.dream-sentence .speak { margin-left:8px; }
@keyframes dream-rise { from { opacity:0; transform:translateY(20px) scale(.85); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { .dream-sky figure { animation:none; } }
/* K-171: a readable cabinet, album and public chronicle on a phone. */
#memoryDialog { box-sizing:border-box; width:min(640px,calc(100vw - 24px)); max-width:calc(100vw - 24px); max-height:86dvh; overflow:auto; padding:18px; border:1px solid #d8c79b; border-radius:22px; background:#fff8e8; color:#322843; box-shadow:0 20px 70px #0007; }
#memoryDialog::backdrop { background:#171027aa; backdrop-filter:blur(4px); }
#memoryDialog header { display:flex; align-items:center; gap:12px; justify-content:space-between; }
#memoryDialog h2 { margin:0; font-size:1.2rem; }
#memoryDialog h3 { margin:6px 0; font-size:1rem; }
#memoryDialog p { line-height:1.5; font-size:.9rem; }
#memoryDialog button { cursor:pointer; min-height:44px; padding:9px 12px; border-radius:12px; border:1px solid #bbaacb; background:#fffdf8; color:#3e285c; }
#memoryDialog button:focus-visible { outline:3px solid #8253c2; outline-offset:2px; }
#memoryDialog nav { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:16px 0; }
#memoryDialog nav [aria-pressed=true] { background:#4e346e; color:white; }
.memory-cabinet { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.memory-cabinet article { padding:12px; border:1px solid #dacba6; border-radius:16px; background:linear-gradient(145deg,#fffdf5,#f5e7bd); overflow-wrap:anywhere; }
.memory-cabinet article.locked { background:#ede8df; color:#645c60; }
.memory-cabinet progress { width:100%; accent-color:#8853b2; }
.memory-icon { font-size:1.7rem; display:inline-block; margin-right:10px; }
.memory-entry { margin:8px 0; padding:12px; border-bottom:1px solid #dacdab; overflow-wrap:anywhere; }
.memory-entry time { display:block; color:#665b6e; font-size:.85rem; margin-top:6px; }
.memory-plaque { border:2px solid #b59042; background:linear-gradient(135deg,#fff5cd,#e8cc88); border-radius:14px; padding:14px; margin:12px 0; box-shadow:inset 0 0 0 3px #fff5d9; overflow-wrap:anywhere; }
/* K-174: keep the craft panel within the phone, above movement controls. */
#communityPanel { position:fixed; z-index:60; left:12px; right:12px; top:12vh; bottom:auto; width:auto; max-width:460px; max-height:72vh; margin:auto; overflow:auto; box-sizing:border-box; }
#communityPanel ul { max-height:52vh; overflow:auto; }
#communityPanel li { flex-wrap:wrap; gap:8px; }
#communityPanel li span { min-width:0; flex:1 1 160px; }
#communityPanel button { min-height:44px; }
.dimension-ladder ol{list-style:none;padding:0 0 0 18px;border-left:2px solid #64758f}.dimension-ladder li{display:flex;flex-direction:column;margin:12px 0;padding:10px;border-radius:12px}.dimension-ladder li.got{background:#21765c44}.dimension-ladder li.next{outline:1px solid #92cbf2}.dimension-ladder small{opacity:.8}.dimension-actions{display:flex;flex-wrap:wrap;gap:8px}.dimension-actions button{white-space:normal}

/* ---------- K-208 (h4p1NAT 2026-11-01 00:03–00:07): the screen in order — „blisko i intuicyjnie”, „przyjemnie,
   płynnie i zmysłowo”. A fixed top bar, the map with the clock and the quest line, a feed (tip + „+N”), one big
   situational button over a 5-tab dock, sheets from the bottom. Glass with a light edge, warm shadows, rainbow accents.
   Targets: dock tabs ≥ 56×56, the big button 64 high, 🪽 64×64, tiles ≥ 88 high (children: bigger than 48). ---------- */
:root{--hud-ink:#1b1340;--hud-sub:#4a3a7a;--hud-glass:rgba(255,255,255,.74);--hud-glass-hi:rgba(255,255,255,.88);--hud-edge:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.4);--hud-shadow:0 10px 28px rgba(110,40,90,.26),0 2px 6px rgba(60,20,90,.16);--hud-rainbow:linear-gradient(100deg,#5ad7ff,#a78bfa 52%,#ff5fd2);--hud-spring:cubic-bezier(.2,1.25,.35,1);--dock-h:68px;--hud-bot:max(8px,env(safe-area-inset-bottom));--hud-top:max(8px,env(safe-area-inset-top));--hud-l:max(10px,env(safe-area-inset-left));--hud-r:max(10px,env(safe-area-inset-right))}
.buttons{display:none!important} /* the inbox: the HUD takes every button from here (hud.js) */
.aigs-bug,.aigs-home{display:none!important} /* 🐞 and ‹ live in ☰ Więcej here: in the corners they sat on the dock's ends */
.me,.energy,.food,.clock,.compass,.whochip,.hud-dock,.hud-quest,.hud-drop,.hud-act[data-role=extra]{-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5)}
.me,.clock,.compass,.hud-dock,.hud-quest,.hud-drop,.hud-act[data-role=extra]{background:var(--hud-glass);box-shadow:var(--hud-edge),var(--hud-shadow)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.me,.clock,.compass,.hud-dock,.hud-quest,.hud-drop,.hud-act[data-role=extra],.sheet-in{background:rgba(255,255,255,.95)!important}}
/* the top bar: who I am (a tap on ⭐ opens the book of discoveries) · energy and food */
.me{top:var(--hud-top);left:var(--hud-l);min-height:52px;padding:4px 12px 4px 4px;gap:7px;max-width:calc(100vw - 156px)}
.me .nm{flex:1}.me .ab{padding:2px 6px;font-size:13px}
.me .aigs-av{width:44px;height:44px}
.me .lvl{position:relative;min-height:22px;padding:3px 9px;font-size:12px;white-space:nowrap}
.me .lvl::after,.me .ab::after{content:'';position:absolute;inset:-13px -6px} /* 22 px to see, 48 px to hit */
.me .ab{position:relative}
.energy{top:calc(var(--hud-top) + 2px);right:var(--hud-r);width:124px;height:28px;box-shadow:var(--hud-edge),var(--hud-shadow)}
.energy span{line-height:28px}
.food{top:calc(var(--hud-top) + 36px);right:var(--hud-r);width:124px;height:22px;overflow:visible;box-shadow:var(--hud-edge),0 4px 12px rgba(110,40,90,.18)}
.food i{border-radius:999px}.food span{line-height:22px}
.food::after{content:'';position:absolute;inset:-12px -4px -14px} /* 22 px to see, 48 px to hit */
/* the map: 👥 and the way home on its edge, the clock with the weather under it, the quest line below */
.nav{top:calc(var(--hud-top) + 68px);right:var(--hud-r);width:156px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.mapbox{position:relative;width:112px;height:112px;margin-right:2px}
#minimap{width:112px;height:112px;pointer-events:auto;cursor:pointer;box-shadow:0 8px 22px rgba(110,40,90,.3),0 0 0 3px rgba(255,255,255,.9)}
.mapbox .whochip{position:absolute;left:-16px;top:-6px;padding:3px 10px;min-height:26px;font:800 13px system-ui;box-shadow:var(--hud-edge),var(--hud-shadow);background:var(--hud-rainbow)}
.whochip::after{content:'';position:absolute;inset:-11px -6px}
.mapbox .compass{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);padding:2px 9px 2px 3px;gap:4px;font:800 12px system-ui;white-space:nowrap;pointer-events:none}
.mapbox .compass span{width:18px;height:18px;line-height:18px;font-size:10px}
.nav .clock{margin-top:10px;padding:4px 11px;pointer-events:none}
#clockFace{display:none}
.clock span{flex-direction:row;align-items:baseline;gap:6px}.clock b{font-size:14px}.clock small{font-size:11px;white-space:nowrap}
.hud-quest{pointer-events:auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:156px;min-height:48px;padding:7px 12px;border:0;border-radius:16px;color:var(--hud-ink);text-align:left;cursor:pointer}
.hud-quest b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:900 14px/1.2 system-ui}
.hud-quest span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:700 12.5px/1.3 system-ui;color:var(--hud-sub)}
/* the feed under the top bar: one tip, then „+N” — never over the counters, the map or the big button */
.hud-feed{position:absolute;left:var(--hud-l);top:calc(var(--hud-top) + 66px);width:calc(100vw - 196px);display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none}
.hud-feed .tip{position:relative;left:auto;top:auto;transform:none;box-sizing:border-box;max-width:100%;padding:9px 12px;border-radius:16px;background:rgba(27,19,64,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 22px rgba(10,5,30,.3);font:700 15px/1.3 system-ui;text-align:left}
.hud-feed .tip:not(.on){position:absolute;visibility:hidden}
.hud-feed .tip .speak{width:30px;height:30px;line-height:30px;margin-left:6px}
.hud-drops{display:flex;flex-wrap:wrap;gap:6px}
.hud-drop{padding:5px 12px;border-radius:999px;color:var(--hud-ink);font:900 16px system-ui;white-space:nowrap}
/* the situational row over the dock: [small extra] [BIG] [🪽] — in the thumb's zone, the big one nearest the middle */
.hud-row{position:absolute;left:0;right:0;bottom:calc(var(--hud-bot) + var(--dock-h) + 14px);display:flex;align-items:center;gap:10px;padding:0 var(--hud-r) 0 var(--hud-l);pointer-events:none}
.hud-ctx{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:10px}
.hud-ctx>*{pointer-events:auto}
.hud-act{display:none!important}
.hud-act[data-role=main],.hud-act[data-role=extra]{display:inline-flex!important;align-items:center;justify-content:center;border:0;color:var(--hud-ink);cursor:pointer;-webkit-tap-highlight-color:transparent;text-decoration:none;transition:transform .12s,filter .12s}
.hud-act[data-role=main]{order:2;box-sizing:border-box;min-height:64px;min-width:168px;max-width:100%;padding:6px 22px;gap:10px;border-radius:24px;background:var(--hud-rainbow);font:900 18px/1.15 system-ui;letter-spacing:.01em;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -2px 0 rgba(120,40,140,.18),0 12px 28px rgba(255,95,210,.42),0 3px 8px rgba(80,30,120,.25)}
.hud-act[data-role=main]::before{font-size:28px}
.hud-act[data-role=extra]{order:1;box-sizing:border-box;min-height:56px;min-width:56px;max-width:132px;padding:4px 12px;gap:6px;border-radius:20px;font:800 14px/1.1 system-ui;text-align:left;overflow:hidden;overflow-wrap:anywhere}
.hud-act[data-role=extra]::before{font-size:22px;flex:none}
.hud-act .sub{margin-left:2px;font:900 15px system-ui;opacity:.9}
.hud-act[data-role=extra] .sub{display:none}
.hud-act:disabled{filter:grayscale(.5);opacity:.6}
.hud-ctx.pair .hud-act[data-role=extra]{order:3;min-height:64px;min-width:120px;max-width:none;font:900 18px system-ui;background:var(--hud-glass-hi)}
.hud-ghost{position:absolute!important;margin:0;pointer-events:none!important;z-index:1}
.hud-fly{flex:none;display:flex;pointer-events:none}
.hud-fly:not(:has(.hud-flybtn:not([hidden]))){display:none}
.hud-flybtn{pointer-events:auto;width:64px;height:64px;padding:0;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0;color:transparent;background:radial-gradient(circle at 32% 26%,#fff 0 18%,#d7f3ff 45%,#ffc1ea);box-shadow:inset 0 1px 0 #fff,0 10px 24px rgba(255,95,210,.4),0 3px 8px rgba(80,30,120,.22);cursor:pointer;transition:transform .12s}
.hud-flybtn::before{font-size:30px;color:initial}
.hud-left .hud-row{flex-direction:row-reverse}
.hud-left .hud-act[data-role=extra]{order:3}
/* the dock: 5 tabs (Hick), each a whole 56+ px target; the open one glows softly under its icon */
.hud-dock{position:absolute;left:var(--hud-l);right:var(--hud-r);bottom:var(--hud-bot);box-sizing:border-box;height:var(--dock-h);max-width:560px;margin:0 auto;display:flex;align-items:stretch;justify-content:space-around;gap:2px;padding:4px 6px;border-radius:26px;transition:transform .3s var(--hud-spring),opacity .2s}
.hud-dock.off{transform:translateY(140%);opacity:0;pointer-events:none}
.hud-tab{position:relative;flex:1;min-width:56px;min-height:56px;padding:0;border:0;border-radius:20px;background:none;color:var(--hud-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font:800 14px/1.1 system-ui;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.hud-tab[hidden]{display:none!important}
.hud-tab .ic{position:relative;font-size:26px;line-height:1.05;display:inline-block}
.hud-tab::before{content:'';position:absolute;inset:4px 6px;border-radius:18px;background:radial-gradient(70% 80% at 50% 30%,rgba(255,95,210,.28),rgba(90,215,255,.22) 60%,transparent);opacity:0;transform:scale(.8);transition:opacity .2s,transform .3s var(--hud-spring)}
.hud-tab.on::before{opacity:1;transform:none}
.hud-tab .dot{position:absolute;top:5px;left:calc(50% + 10px);width:11px;height:11px;border-radius:50%;background:#ff3b5c;box-shadow:0 0 0 2px #fff;animation:hudDot 1.6s ease-in-out infinite}
@keyframes hudDot{50%{transform:scale(1.3)}}
.hud-tab:focus-visible,.hud-act:focus-visible,.hud-flybtn:focus-visible,.hud-tile:focus-visible,.hud-sheet button:focus-visible{outline:3px solid #7a5cff;outline-offset:2px}
.press{transform:scale(.96)!important;filter:brightness(1.08)}
#progress{bottom:calc(var(--hud-bot) + var(--dock-h) + 92px)}
#hud.quiet .hud-row,#hud.quiet .hud-feed{opacity:0;pointer-events:none;transition:opacity .4s}
.room{bottom:calc(var(--hud-bot) + var(--dock-h) + 92px)}
/* sheets from the bottom: a handle to drag (half / full), a tap on the world or Esc closes; GPU only (transform) */
.hud-sheet{position:fixed;inset:auto 0 0 0;margin:0 auto;box-sizing:border-box;width:min(100%,600px);max-width:100%;max-height:none;padding:0;border:0;background:transparent;color:var(--hud-ink);overflow:visible;will-change:transform}
.hud-sheet::backdrop{background:rgba(20,10,50,.3);animation:hudFade .25s ease-out}
@keyframes hudFade{from{opacity:0}}
.sheet-in{box-sizing:border-box;height:100%;display:flex;flex-direction:column;border-radius:26px 26px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(246,240,255,.96)); /* no blur on the big sheet: it cost frames while it moves (K-208 measurement) */box-shadow:inset 0 1px 0 #fff,0 -12px 40px rgba(40,10,60,.3)}
.sheet-grab{flex:none;height:24px;display:flex;align-items:center;justify-content:center;cursor:grab}
.sheet-grab i{width:44px;height:5px;border-radius:3px;background:rgba(27,19,64,.28)}
.hud-sheet header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px 6px 18px;cursor:grab}
.hud-sheet h2{margin:0;font:900 21px system-ui}
.sheet-x{flex:none;width:48px;height:48px;border:0;border-radius:50%;background:rgba(239,234,255,.95);font-size:18px;color:var(--hud-ink);cursor:pointer}
.sheet-body{flex:1;min-height:0;overflow:auto;padding:4px 14px calc(18px + env(safe-area-inset-bottom));overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.hud-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.hud-grid>button,.hud-grid>a{position:relative!important;inset:auto!important;box-sizing:border-box;width:auto!important;height:auto!important;min-height:88px;margin:0!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 6px!important;border:0!important;border-radius:20px!important;background:rgba(255,255,255,.94)!important;color:var(--hud-ink)!important;font:800 15px/1.2 system-ui!important;letter-spacing:0!important;text-align:center;text-decoration:none;white-space:normal;overflow-wrap:anywhere;box-shadow:inset 0 1px 0 #fff,0 4px 14px rgba(70,20,90,.13)!important;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.hud-grid>[hidden]{display:none!important}
.hud-grid>[data-ic]::before{font-size:32px;line-height:1}
.hud-grid>button:disabled{opacity:.5}
.hud-grid>.on{box-shadow:0 0 0 3px #ff5fd2,0 4px 14px rgba(70,20,90,.13)!important}
.sheet-empty{margin:6px 0;padding:18px 8px;font:600 15px/1.4 system-ui;color:var(--hud-sub);text-align:center}
.ghost .hud-grid>:not([data-ghost="1"]){display:none!important}
/* the bag: sections, each thing a tile (tap = what it is, where it comes from, what it is for) */
.bag-info{min-height:2.6em;margin:0 2px 6px;font:600 14px/1.35 system-ui;color:var(--hud-sub)}
.sheet-panel .inv{position:static;max-width:none;display:block;pointer-events:auto}
.inv h3{margin:12px 2px 6px;font:900 14px system-ui;letter-spacing:.02em;color:#5b4a8f}
.inv .bag-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.inv .bag-items button{min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:6px 4px;border-radius:18px;background:rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 3px 10px rgba(70,20,90,.12);font:800 12px system-ui;color:var(--hud-ink)}
.inv .bag-items .i{font-size:26px;line-height:1.1}.inv .bag-items b{font:900 16px system-ui}
.inv .bag-items small{max-width:100%;font:700 11px/1.15 system-ui;color:#5b4a8f;overflow-wrap:anywhere}
.inv .bag-items button.tool{background:rgba(255,246,214,.98)}.inv .bag-items button.tool.broken{background:rgba(255,220,226,.98)}
/* ☰ Więcej: settings (the hand, sound, vibration, less motion) and help */
.hud-settings h3{margin:18px 2px 8px;font:900 15px system-ui}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;margin-bottom:8px;padding:4px 8px 4px 14px;border-radius:16px;background:rgba(255,255,255,.8);font:800 15px system-ui}
.seg{display:flex;gap:6px}.seg button{min-width:72px;min-height:48px;border:0;border-radius:14px;background:#efeaff;color:var(--hud-ink);font:800 14px system-ui;cursor:pointer}
.seg.langs button{min-width:56px}
.seg [aria-pressed=true]{background:var(--hud-rainbow);box-shadow:0 4px 12px rgba(255,95,210,.3)}
.switch{position:relative;flex:none;width:68px;height:48px;padding:0;border:0;background:none;cursor:pointer}
.switch i{position:absolute;left:8px;right:8px;top:12px;height:24px;border-radius:12px;background:#d8d2ec;transition:background .2s}
.switch i::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .25s var(--hud-spring)}
.switch[aria-checked=true] i{background:#a78bfa}.switch[aria-checked=true] i::after{transform:translateX(28px)}
.hud-help{margin-top:10px}.hud-help summary{min-height:48px;display:flex;align-items:center;font:900 15px system-ui;cursor:pointer}
.hud-help ul{margin:0;padding-left:20px}.hud-help li{margin:5px 0;font:600 14px/1.45 system-ui}
.news.recipes li{margin:6px 0}.news.recipes li.locked{color:#8a7a5e}
/* less motion: every change at once (prefers-reduced-motion or ☰ → „Ogranicz ruch”) */
.hud-calm .hud-dock,.hud-calm .hud-tab,.hud-calm .hud-tab::before,.hud-calm .hud-act,.hud-calm .hud-flybtn,.hud-calm .switch i,.hud-calm .switch i::after,.hud-calm .hud-grid>*,.hud-calm #hud.quiet .hud-row{transition:none!important}
.hud-calm .hud-tab .dot,.hud-calm .hud-sheet::backdrop{animation:none}
@media (prefers-reduced-motion:reduce){.hud-tab .dot,.hud-sheet::backdrop{animation:none}.hud-dock,.hud-tab,.hud-tab::before,.hud-act,.hud-flybtn,.switch i,.switch i::after,.hud-grid>*{transition:none!important}}
/* lying down (landscape, e.g. 844×390): the dock stands at the right edge, the big button by the right thumb */
@media (orientation:landscape) and (max-height:540px){
  :root{--dock-w:78px}
  .hud-dock{left:auto;right:var(--hud-r);top:var(--hud-top);bottom:var(--hud-bot);width:var(--dock-w);height:auto;max-width:none;margin:0;flex-direction:column;justify-content:space-evenly;padding:6px 4px}
  .hud-dock.off{transform:translateX(140%)}
  .hud-tab{flex:1;min-height:52px;max-height:72px;font-size:12.5px}.hud-tab .ic{font-size:23px}
  .hud-row{left:auto;right:calc(var(--hud-r) + var(--dock-w) + 12px);bottom:var(--hud-bot);padding:0}
  .hud-ctx{flex:none}
  .energy,.food{right:calc(var(--hud-r) + var(--dock-w) + 12px)}
  .nav{right:calc(var(--hud-r) + var(--dock-w) + 12px);top:calc(var(--hud-top) + 64px);gap:6px}
  .mapbox,#minimap{width:92px;height:92px}
  .hud-feed{width:min(44vw,380px)}
  .me{max-width:calc(100vw - 2 * var(--dock-w) - 200px)}
  #progress{bottom:calc(var(--hud-bot) + 80px)}
  .room{bottom:calc(var(--hud-bot) + 80px);right:calc(var(--hud-r) + var(--dock-w) + 12px)}
  .hud-sheet{width:min(calc(100% - 2 * var(--dock-w) - 32px),600px)}
  .hud-left .hud-dock{right:auto;left:var(--hud-l);top:calc(var(--hud-top) + 62px)}
  .hud-left .hud-dock.off{transform:translateX(-140%)}
  .hud-left .hud-row{right:auto;left:calc(var(--hud-l) + var(--dock-w) + 12px)}
  .hud-left .hud-feed{left:calc(var(--hud-l) + var(--dock-w) + 12px)}
}
#hud>.hud-row,#hud>.hud-feed,#hud>.nav,.mapbox{pointer-events:none}
.upd{bottom:calc(var(--hud-bot) + var(--dock-h) + 92px)} /* the new-version card: over the big button, not on it (K-208) */

.social-card label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0}.social-card select,.social-card input{min-height:44px;max-width:65%;box-sizing:border-box;font:inherit}.social-card input{width:80px}.social-card button{min-height:44px;margin:5px;max-width:100%;white-space:normal}.social-card .body>div{padding:10px 0;border-bottom:1px solid #ddd}

/* K-182: touch-sized choices in the cave and reef card. */
.depths-card .card { padding: 20px; max-height: 78dvh; overflow: auto; }
.depths-card .card button { display: block; width: 100%; min-height: 46px; margin-top: 10px; padding: 12px 16px; border: 0; border-radius: 14px; background: #d9efff; color: #251a49; font: 800 16px system-ui; cursor: pointer; }
.depths-card .card button:focus-visible { outline: 3px solid #8b54db; outline-offset: 2px; }
.depths-card .card button:disabled { opacity: .6; cursor: wait; }
/* K-183: portal destinations fit touch screens and keyboard focus. */
.transit-card .card { padding: 20px; max-height: 78dvh; overflow: auto; }
.transit-card .card button { display: block; width: 100%; min-height: 46px; margin-top: 10px; padding: 12px 16px; border: 0; border-radius: 14px; background: #dbf4ed; color: #251a49; font: 800 16px system-ui; cursor: pointer; }
.transit-card .card button:focus-visible { outline: 3px solid #8b54db; outline-offset: 2px; }

.planet-picker{border:1px solid #8eb1bd;border-radius:24px;background:#172a44;color:#fff;max-width:calc(100vw - 24px);width:370px;max-height:90dvh;padding:22px}.planet-picker::backdrop{background:#050c20bc}.planet-picker h2{margin-top:0}.planet-picker p{line-height:1.5}.planet-picker div{display:grid;gap:8px}.planet-picker input{font:inherit;width:100px;margin:14px 8px 14px 0;min-height:48px;border-radius:10px;padding:8px}.planet-picker>button{margin:4px}

.boulder-cave{box-sizing:border-box;width:min(94vw,620px);max-height:90dvh;overflow:auto;border:1px solid #8c9db8;border-radius:24px;background:#142039;color:#f1f5ff;padding:20px}.boulder-cave::backdrop{background:#050c20bb}.boulder-cave canvas{display:block;width:100%;height:min(45dvh,360px);touch-action:none;border-radius:16px}.boulder-cave button{min-height:52px;width:100%;margin-top:16px;border-radius:14px;background:#dfd2aa;color:#172239;font:inherit}


/* K-152: stay above the closing dock and accept keyboard input immediately. */
dialog.social-card{box-sizing:border-box;margin:0;border:0;width:100vw;height:100dvh;max-width:none;max-height:none}dialog.social-card::backdrop{background:transparent}.social-card input{user-select:text;-webkit-user-select:text}
.herd-panel button,.herd-nest button{min-height:44px;padding:8px 14px;border:1px solid #c8b9ec66;border-radius:14px;background:#344f65;color:#fff6df;font:inherit;cursor:pointer}.herd-panel p,.herd-nest p{line-height:1.5}.herd-panel h2,.herd-nest h2{color:#f2d8ff}.herd-panel::backdrop,.herd-nest::backdrop{background:#09172899;backdrop-filter:blur(3px)}