/* ===== v13-UI: tijdperk-skins (variabelen gezet door ui.js) ===== */
@font-face{font-family:'Cinzel';src:url(fonts/Cinzel-VariableFont_wght.ttf) format('truetype');font-weight:400 900;font-display:swap}
@font-face{font-family:'Cinzel Decorative';src:url(fonts/CinzelDecorative-Bold.ttf) format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Pirata One';src:url(fonts/PirataOne-Regular.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Grenze';src:url(fonts/Grenze-VariableFont_wght.ttf) format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Alegreya Sans';src:url(fonts/AlegreyaSans-Medium.ttf) format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Alegreya Sans';src:url(fonts/AlegreyaSans-Bold.ttf) format('truetype');font-weight:700;font-display:swap}
:root{--panel:url(panel-ijzer.png);--btn:url(btn-ijzer.png);--tile:url(tile-ijzer.jpg);--accent:#e7b66d;--accent2:#8a5a2b;--text:#f7ead0;--btn-text:#fbeedb;--glow:#ffcf7a;--title:'Grenze',serif;--tw:800;--slice:24;--bw:11px;
 --ease:cubic-bezier(.22,.9,.3,1.08);--tap:46px}
html,body{font-family:'Alegreya Sans',"Trebuchet MS",system-ui,sans-serif}
.card9{border:var(--bw) solid transparent;border-image:var(--panel) var(--slice) fill / var(--bw) round;filter:drop-shadow(0 3px 6px #000a)}
/* ---------- bovenbalk: twee slanke plaquettes i.p.v. volle balk ---------- */
#hud{background:none;border:0;box-shadow:none;height:auto;top:max(3px,env(safe-area-inset-top));padding:0 6px;padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right));gap:6px;pointer-events:none;align-items:flex-start}
#hud>*{pointer-events:auto}
#hud .plq{display:flex;align-items:center;gap:2px;padding:0 3px;height:34px;border:8px solid transparent;border-image:var(--panel) var(--slice) fill / 8px round;filter:drop-shadow(0 2px 4px #000b);box-sizing:border-box}
#hud .plq.r{margin-left:auto;gap:4px}
.res{background:none;border:0;min-width:0;padding:0 5px 0 0;gap:3px;color:var(--text);font-weight:700;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000}
.res img{width:20px;height:20px;border-radius:50%;box-shadow:0 1px 2px #000a}
.res+.res{border-left:1px solid color-mix(in srgb,var(--accent) 35%,transparent);padding-left:5px}
#age{margin:0;font-family:var(--title);font-weight:var(--tw);color:var(--accent);letter-spacing:.5px;font-size:15px;padding:0 4px}
#clock{background:none;color:var(--text);font-size:13px;padding:0 2px}
.hb{width:30px;height:24px;border-radius:7px;background:none;border:1.5px solid color-mix(in srgb,var(--accent) 70%,transparent);color:var(--accent);font-size:13px;position:relative}
.hb::after{content:'';position:absolute;inset:-8px -4px}
/* ---------- AoE II-indeling: onderste HUD = [commandoraster | selectie | inactief/leger | minimap] ---------- */
:root{--cell:56px;--gap:3px;--cols:5;--rows:3;--pad:7px;--hh:calc(var(--rows)*var(--cell) + (var(--rows) - 1)*var(--gap) + 2*var(--pad));--miniw:200px;--sidew:58px}
@media (max-height:430px){:root{--cell:44px;--gap:2px;--cols:6;--rows:2;--pad:5px;--miniw:150px;--sidew:48px}}
#hudbg{position:fixed;left:0;right:0;bottom:0;height:calc(var(--hh) + env(safe-area-inset-bottom));z-index:4;border:var(--bw) solid transparent;border-bottom:0;border-image:var(--panel) var(--slice) fill / var(--bw) var(--bw) 0 round;box-shadow:0 -4px 12px #0009;box-sizing:border-box;transition:transform .32s var(--ease)}
#hudbg::after{content:'';position:absolute;top:calc(-1*var(--bw) - 2px);left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--accent) 15%,var(--accent) 85%,transparent);opacity:.75}
#panel{position:fixed;left:0;right:0;bottom:0;top:auto;transform:none;width:auto;max-width:none;min-height:0;height:calc(var(--hh) + env(safe-area-inset-bottom));padding:0;background:none;border:0;box-shadow:none;display:block;pointer-events:none;z-index:5;transition:transform .32s var(--ease)}
#panel>*{pointer-events:auto}
#panel .grid{position:absolute;left:calc(max(var(--pad),env(safe-area-inset-left)) + 2px);top:var(--pad);display:grid;grid-template-columns:repeat(var(--cols),var(--cell));grid-auto-rows:var(--cell);gap:var(--gap);padding:2px;background:#0007;border-radius:4px;box-shadow:inset 0 1px 3px #000}
#panel .slot{background:linear-gradient(#0005,#0002);box-shadow:inset 0 0 0 1px #ffffff10,inset 0 2px 4px #000a;border-radius:2px}
#panel .pbtn.gb{width:var(--cell);height:var(--cell);min-width:0;max-width:none;padding:0;border:0;border-radius:2px;position:relative;overflow:hidden;background:#000;box-shadow:0 1px 2px #000;flex:none;margin:0;cursor:pointer;transition:transform .08s,filter .15s}
#panel .pbtn.gb:active{transform:scale(.93)}
#panel .pbtn.ibtn img.ic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#panel .pbtn.ibtn .l{display:none}
#panel .pbtn.ibtn .c{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:2px;padding:6px 1px 2px;font-size:9px;font-weight:700;line-height:1;color:#fff;background:linear-gradient(transparent,#000d 55%);text-shadow:0 1px 1px #000;white-space:nowrap}
#panel .pbtn.ibtn .c img{width:9px;height:9px;margin-right:1px;border-radius:50%}
#panel .pbtn.ibtn .c.c3{font-size:7.5px;gap:1px}#panel .pbtn.ibtn .c.c3 img{width:7px;height:7px}
@media (min-height:431px){#panel .pbtn.ibtn .c{font-size:10.5px}#panel .pbtn.ibtn .c img{width:11px;height:11px}#panel .pbtn.ibtn .c.c3{font-size:9px}}
#panel .pbtn.abtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#fff;background:radial-gradient(circle at 50% 35%,#ffffff40,#0000 60%),linear-gradient(#7a6a58,#3a2e22)}
#panel .pbtn.abtn::before{content:'';position:absolute;inset:0;box-shadow:inset 2px 2px 0 #ffffff55,inset -2px -2px 0 #0008;pointer-events:none}
#panel .pbtn.abtn.c-ok{background:radial-gradient(circle at 50% 35%,#ffffff50,#0000 60%),linear-gradient(#4cae58,#1c5a26)}
#panel .pbtn.abtn.c-no{background:radial-gradient(circle at 50% 35%,#ffffff40,#0000 60%),linear-gradient(#c0463a,#5c1912)}
#panel .pbtn.abtn .si{width:46%;height:46%}
#panel .pbtn.abtn .l{font-size:8px;font-weight:700;line-height:1;white-space:nowrap;text-shadow:0 1px 1px #000;max-width:100%;overflow:hidden}
#panel .pbtn.on{box-shadow:inset 0 0 0 2px var(--glow),0 0 8px var(--glow)}
#panel .pbtn.dis{filter:grayscale(.85) brightness(.55)}
#panel .pbtn.dis .c .no{color:#ff7a66;filter:none}
/* selectiepaneel (midden) */
#panel .info.sel{position:absolute;left:calc(max(var(--pad),env(safe-area-inset-left)) + var(--cols)*var(--cell) + (var(--cols) - 1)*var(--gap) + 12px);right:calc(max(var(--pad),env(safe-area-inset-right)) + var(--miniw) + var(--sidew) + 12px);top:var(--pad);bottom:calc(var(--pad) + env(safe-area-inset-bottom));width:auto;flex:none;padding:3px 26px 3px calc(var(--cell) + 10px);font-size:11.5px;line-height:1.25;color:var(--text);background:#0006;border-radius:4px;box-shadow:inset 0 1px 4px #000c;overflow:hidden;box-sizing:border-box}
#panel .info.sel.empty{background:#0004}
#panel .info.sel .pport{position:absolute;left:4px;top:4px;width:var(--cell);height:var(--cell);border-radius:2px;border:0;float:none;margin:0;object-fit:cover;box-shadow:0 0 0 1px #000,0 0 0 2px var(--accent2)}
#panel .info.sel b{display:block;font-family:var(--title);font-weight:var(--tw);color:var(--accent);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px #000}
[data-skin=ren] #panel .info.sel b{font-size:12.5px}
#panel .info.sel .bar{position:absolute;left:4px;top:calc(var(--cell) + 7px);width:var(--cell);height:5px;margin:0;background:#400;border-radius:1px}
#panel .info.sel .bar i{background:linear-gradient(#8f6,#2a2)}
#panel .info.sel .st{display:block;font-size:10.5px;color:#d8f0c0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#panel .info.sel #pi-txt{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#panel .info.sel .qbar{position:absolute;left:calc(var(--cell) + 10px);right:8px;bottom:4px;height:4px;background:#0009}
#panel .info.sel .queue{display:flex;gap:2px;margin-top:2px}
#panel .info.sel .queue .chip{width:26px;height:26px;padding:0;border:0;border-radius:2px;background:#000;box-shadow:0 0 0 1px var(--accent2)}
#panel .info.sel .queue .chip:first-child{width:30px;height:30px;box-shadow:0 0 0 1.5px var(--glow)}
#panel .info.sel .queue img{width:100%;height:100%;object-fit:cover}
#panel .info.sel .garr{display:flex;align-items:center;gap:1px;margin-top:2px}#panel .info.sel .garr img{width:18px;height:18px}#panel .info.sel .garr span{font-size:10px;margin-left:3px}
#panel .info.sel.multi{padding-left:4px}
#panel .info.sel.multi .pport,#panel .info.sel.multi .bar,#panel .info.sel.multi #pi-txt,#panel .info.sel.multi .st{display:none}
#panel .info.sel.multi b{font-size:12px}
#panel .mgrid{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px}
#panel .mgrid button{position:relative;width:30px;height:30px;padding:0;border:0;background:#000;border-radius:2px;box-shadow:0 0 0 1px var(--accent2);overflow:hidden;cursor:pointer}
#panel .mgrid button img{width:100%;height:100%;object-fit:cover;display:block}
#panel .mgrid button i{position:absolute;left:0;bottom:0;height:3px;background:#5f5}
#panel .mgrid .more{font-size:11px;align-self:center;margin-left:3px}
@media (min-height:431px){#panel .mgrid button{width:40px;height:40px}#panel .info.sel{font-size:13px}#panel .info.sel b{font-size:17px}}
.xclose{position:absolute;right:0;top:0;width:28px;height:28px;padding:6px;border:0;background:none;color:var(--accent);cursor:pointer}
.xclose::after{content:'';position:absolute;inset:-8px}
.xclose .si{width:100%;height:100%}
.si{width:22px;height:22px;fill:currentColor;filter:drop-shadow(0 1px 1px #0009);flex:0 0 auto}
/* bevestigen (plaatsen) */
#panel[data-mode=confirm] .pcost{display:block;font-size:12px;margin-top:2px}
#panel .pcost img{width:12px;height:12px;vertical-align:-2px}
/* AoE: inactieve-dorpeling- en legerknop naast de minimap */
#side{position:fixed;top:auto;left:auto;right:calc(max(var(--pad),env(safe-area-inset-right)) + var(--miniw) + 6px);bottom:calc(var(--pad) + env(safe-area-inset-bottom));flex-direction:column;gap:var(--gap);z-index:6;transition:transform .32s var(--ease)}
#side button{width:var(--sidew);height:calc((var(--hh) - 2*var(--pad) - var(--gap))/2);border-radius:3px;border:0;padding:0;position:relative;overflow:hidden;background:#000;box-shadow:0 0 0 1px #000,0 0 0 2px var(--accent2)}
#side button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#side button small{position:absolute;left:0;right:0;bottom:0;font-size:8px;font-weight:700;color:#fff;background:linear-gradient(transparent,#000c);padding:5px 0 1px;margin:0;text-align:center}
#side button.on{box-shadow:0 0 0 2px var(--glow),0 0 10px var(--glow)}
#side #b-box,#side #b-home{display:none}
#mini{position:fixed;top:auto;right:max(var(--pad),env(safe-area-inset-right));bottom:calc(var(--pad) + env(safe-area-inset-bottom));width:var(--miniw);height:calc(var(--hh) - 2*var(--pad));border:0;border-radius:2px;outline:2px solid var(--accent2);outline-offset:0;box-shadow:0 0 0 3px #000a;z-index:6;transition:transform .32s var(--ease);object-fit:contain;background:#0b0f1a}
#hudtog{position:fixed;z-index:7;right:calc(max(var(--pad),env(safe-area-inset-right)) + 8px);bottom:calc(var(--hh) + env(safe-area-inset-bottom) + 4px);width:52px;height:20px;padding:0;border:0;border-radius:8px 8px 0 0;background:var(--btn) center/cover;color:var(--btn-text);box-shadow:0 -2px 6px #0008,inset 0 0 0 1.5px var(--accent2);cursor:pointer;transition:bottom .32s var(--ease)}
#hudtog::after{content:'';position:absolute;inset:-14px -6px -4px}
#hudtog .si{width:18px;height:18px;transform:rotate(90deg);transition:transform .3s}
body.hudcol #hudbg,body.hudcol #panel,body.hudcol #side,body.hudcol #mini{transform:translateY(calc(100% + var(--hh) + 12px))}
body.hudcol #hudtog{bottom:env(safe-area-inset-bottom);height:26px;width:60px}
body.hudcol #hudtog .si{transform:rotate(-90deg)}
#cinfo{display:none}
.hbx{font-size:15px}
/* lang drukken: nooit selecteren / markeren */
html,body,body *,#game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
input,#seed{-webkit-user-select:text;user-select:text}
::selection{background:transparent}
img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
button img,.mgrid img{pointer-events:none}
/* ---------- overlays / startmenu ---------- */
.overlay{background:radial-gradient(ellipse at 50% 40%,#0000 0%,#0006 60%,#000c 100%)}
.card{border:14px solid transparent;border-image:var(--panel) var(--slice) fill / 14px round;background:none;border-radius:0;box-shadow:none;filter:drop-shadow(0 10px 24px #000c);color:var(--text)}
.card h1{font-family:var(--title);font-weight:var(--tw);background:linear-gradient(#fff6d8,var(--accent) 60%,var(--accent2));-webkit-background-clip:text;background-clip:text}
.big{font-family:var(--title);font-weight:var(--tw);letter-spacing:.5px;border:0;border-radius:10px;background:var(--btn) center/cover;color:var(--btn-text);box-shadow:inset 0 0 0 2px var(--accent),0 4px 10px #000a;text-shadow:0 1px 2px #0009;min-height:44px}
.big:not(.alt):not(.no){background:linear-gradient(#ffffff22,#0000 40%,#00000044),linear-gradient(#3f9a4a,#1f5e29);color:#fff;box-shadow:inset 0 0 0 2px var(--glow),0 0 16px color-mix(in srgb,var(--glow) 40%,transparent),0 4px 10px #000a}
.big.no{background:linear-gradient(#9a3326,#5a1a12);color:#fff}
[data-skin=ren] .big{text-shadow:none}
[data-skin=ren] .big:not(.alt):not(.no),[data-skin=ren] .big.no{text-shadow:0 1px 2px #0008}
.opt{border-radius:9px;border:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent);background:#0005;color:var(--text);min-height:40px;font-family:inherit;font-weight:700}
.opt.on{background:linear-gradient(var(--accent),var(--accent2));color:#1d1206;border-color:#fff8}
#menu{background:#000 url(menu-bg.jpg) center/cover;animation:kb 40s ease-in-out infinite alternate}
#menu::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,#0000 20%,#000a 85%),linear-gradient(#0008,#0000 30%,#0000 65%,#000c)}
@keyframes kb{from{background-size:auto 108%;background-position:40% 50%}to{background-size:auto 118%;background-position:60% 45%}}
#menu .mwrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:min(560px,94vw);max-height:100%;overflow:auto;padding:8px 0}
.logo{text-align:center;line-height:.9;filter:drop-shadow(0 3px 0 #0009) drop-shadow(0 0 18px #000)}
.logo .l1{display:block;font-family:'Cinzel',serif;font-weight:700;font-size:15px;letter-spacing:7px;color:var(--accent);text-transform:uppercase}
.logo .l2{display:block;font-family:'Cinzel Decorative','Cinzel',serif;font-weight:700;font-size:54px;letter-spacing:2px;background:linear-gradient(#fffbe8 10%,#ffd77a 45%,#b77a22 70%,#ffe9a8 90%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.6px #3a2208}
.logo .orn{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:4px;color:var(--accent);font-family:'Alegreya Sans',sans-serif;font-size:13px;letter-spacing:1px;text-shadow:0 1px 2px #000}
.logo .orn::before,.logo .orn::after{content:'';height:2px;width:70px;background:linear-gradient(90deg,transparent,var(--accent))}
.logo .orn::after{transform:scaleX(-1)}
#menu .mcard{width:100%;padding:6px 10px;display:flex;flex-direction:column;gap:6px;align-items:center;border:14px solid transparent;border-image:var(--panel) var(--slice) fill / 14px round;filter:drop-shadow(0 8px 18px #000c)}
#menu .mrow{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap}
#menu .mlab{font-family:var(--title);font-weight:var(--tw);font-size:12px;color:var(--accent);letter-spacing:1px;text-transform:uppercase;min-width:66px;text-align:right}
#menu #seed{width:78px;min-height:40px;font-size:15px;text-align:center;border:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:9px;background:#0007}
#menu .big{font-size:20px;padding:6px 34px}
#menu .help{display:none;font-size:11.5px;line-height:1.45;color:var(--text);opacity:.9;text-align:center;max-width:520px}
#menu.helpopen .help{display:block}
#m-help-t{background:none;border:0;color:var(--accent);font-family:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer;min-height:32px}
#menu .crest{display:none}
@media (max-height:420px){.logo .l2{font-size:38px}.logo .l1{font-size:11px;letter-spacing:5px}.logo .orn{font-size:11px;margin-top:2px}#menu .mwrap{gap:3px}#menu .mcard{padding:2px 8px;gap:4px}#menu .big{font-size:17px;padding:4px 26px}.opt{min-height:36px;padding:4px 10px}#menu #seed{min-height:36px}}
#panel .pbtn.ibtn .c{overflow:hidden;text-overflow:ellipsis}
/* ===== v3: compacte gsm-variant (liggend, hoogte <= 500px): één slanke rij ===== */
#minitog{display:none}
@media (max-height:500px){
 :root{--cell:44px;--gap:3px;--rows:1;--pad:4px;--miniw:88px;--sidew:40px;--selw:178px}
 #hudbg{border-width:5px 0 0;border-image-width:5px 5px 0}
 #panel .grid{left:max(var(--pad),env(safe-area-inset-left));right:calc(max(var(--pad),env(safe-area-inset-right)) + var(--miniw) + 2*var(--sidew) + var(--selw) + 20px);top:var(--pad);display:flex;gap:var(--gap);padding:0;background:none;box-shadow:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-x;mask-image:linear-gradient(90deg,#000 calc(100% - 14px),transparent)}
 #panel .grid::-webkit-scrollbar{display:none}
 #panel .grid>*{flex:0 0 auto}
 #panel .slot{display:none}
 #panel .pbtn.ibtn .c{display:none}
 #panel .pbtn.gb{width:var(--cell);height:var(--cell);border-radius:3px;box-shadow:0 0 0 1px #000,inset 0 0 0 1px #ffffff22}
 #panel .pbtn.abtn .l{font-size:7.5px}
 #panel .pbtn.abtn .si{width:50%;height:50%}
 #panel .info.sel{left:auto;right:calc(max(var(--pad),env(safe-area-inset-right)) + var(--miniw) + 2*var(--sidew) + 14px);width:var(--selw);top:var(--pad);bottom:calc(var(--pad) + env(safe-area-inset-bottom));padding:1px 22px 1px 48px;font-size:11px;background:#0005;overflow:visible}
 #panel .info.sel .pport{left:2px;top:2px;width:40px;height:40px;pointer-events:auto;cursor:pointer}
 #panel .info.sel .bar{left:48px;right:24px;top:auto;bottom:4px;width:auto;height:5px}
 #panel .info.sel b{font-size:13px;line-height:1.15;margin-top:1px}
 [data-skin=ren] #panel .info.sel b{font-size:11.5px}
 #panel .info.sel #pi-txt{font-size:10px;opacity:.85}
 #panel .info.sel .st{display:none}
 #panel .info.sel .qbar{left:48px;right:24px;bottom:1px;height:3px}
 #panel .info.sel .queue{position:absolute;left:48px;bottom:11px;margin:0;gap:2px}
 #panel .info.sel .queue .chip,#panel .info.sel .queue .chip:first-child{width:18px;height:18px}
 #panel .info.sel:has(.queue) #pi-txt{display:none}
 #panel .info.sel .garr{display:none}
 #panel .info.sel .xclose{width:24px;height:24px;padding:5px;top:1px;right:0}
 /* statistiek-popover (tik op portret) */
 body.statsopen #panel .info.sel .st,body.statsopen #panel .info.sel:not(.multi) #pi-txt{display:block;position:absolute;left:0;width:220px;padding:5px 8px;background:linear-gradient(#2a1d12f4,#140d07f4);border:1.5px solid var(--accent);border-radius:6px;font-size:12px;white-space:normal;z-index:9;box-shadow:0 4px 12px #000b}
 body.statsopen #panel .info.sel #pi-txt{bottom:calc(100% + 34px)}
 body.statsopen #panel .info.sel .st{bottom:calc(100% + 6px)}
 /* multiselectie: compacte strip met aantal */
 #panel .info.sel.multi{padding:1px 22px 1px 4px}
 #panel .info.sel.multi b{display:inline-block;font-size:11px;max-width:90px;vertical-align:top}
 #panel .info.sel .mcount{position:absolute;right:24px;top:2px;font-weight:700;font-size:12px;color:var(--accent)}
 #panel .mgrid{flex-wrap:nowrap;overflow:hidden;gap:2px;margin-top:2px;mask-image:linear-gradient(90deg,#000 85%,transparent)}
 #panel .mgrid button{width:24px;height:24px;flex:0 0 auto}
 #panel .mgrid .more{display:none}
 /* leger/inactief naast elkaar, minimap klein + vergrootknop */
 #side{flex-direction:row;right:calc(max(var(--pad),env(safe-area-inset-right)) + var(--miniw) + 6px);gap:3px}
 #side button{width:var(--sidew);height:var(--cell)}
 #side button small{font-size:7px;padding-top:3px}
 #mini{width:var(--miniw);height:var(--cell);transition:width .25s,height .25s,transform .32s var(--ease)}
 #minitog{display:block;position:fixed;z-index:7;right:max(var(--pad),env(safe-area-inset-right));bottom:calc(var(--pad) + env(safe-area-inset-bottom) + var(--cell) - 20px);width:20px;height:20px;padding:2px;border:0;border-radius:0 2px 0 4px;background:#000a;color:var(--accent);transition:transform .32s var(--ease)}
 #minitog::after{content:'';position:absolute;inset:-10px -4px -6px -12px}
 #minitog .si{width:16px;height:16px}
 body.minibig #mini{width:264px;height:138px}
 body.minibig #minitog{bottom:calc(var(--pad) + env(safe-area-inset-bottom) + 118px)}
 body.hudcol #minitog{transform:translateY(200px)}
 #hudtog{bottom:calc(var(--hh) + env(safe-area-inset-bottom) + 3px);height:18px;width:46px;right:calc(max(var(--pad),env(safe-area-inset-right)) + var(--miniw) + 2*var(--sidew) + 16px)}
 body.hudcol #hudtog{right:calc(max(var(--pad),env(safe-area-inset-right)) + 8px)}
 /* slanke bovenbalk */
 #hud{top:max(2px,env(safe-area-inset-top));gap:4px}
 #hud .plq{height:26px;border-width:5px;border-image-width:5px;padding:0 2px}
 .res{font-size:12px;padding-right:3px}.res img{width:15px;height:15px}.res+.res{padding-left:4px}
 #age{font-size:12.5px;padding:0 2px}#clock{font-size:11.5px}
 .hb{width:26px;height:18px;font-size:11px;border-radius:5px}
 .hb::after{inset:-6px -2px}
}