/* Сектор Ковчег (Sector Kovcheg) — the owner's mockup (release142) dressed in the game's own pixel kit (release152): the launcher's gold
   play plate for the main buttons, its card frame with gold corners, the game's metal panels, inventory slots, level badge,
   notification plate and the campfire strip. Kit art is scaled by whole pixels (×2/×3) and drawn pixelated. Pixel text
   sits on whole multiples of its em (Kovcheg Pixel 15 px, compact 12 px); paragraphs use the system font. */
@font-face{font-family:"Kovcheg Pixel";src:url(fonts/KovchegPixel.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Kovcheg Pixel Compact";src:url(fonts/KovchegPixelCompact.ttf) format("truetype");font-display:swap}

:root{
  --bg:#14100d;--bg-2:#1b1511;--board:#1a1714;--board-2:#24201b;--edge:#0a0705;--brass:#8a6738;--brass-light:#c79a55;
  --gold:#e3a94f;--amber:#e9a64a;--amber-hi:#f6c56f;--amber-lo:#b8712c;--ink:#24160c;
  --text:#efe5d2;--muted:#b9a88d;--dim:#857560;--green:#252f1e;
  --pixel:"Kovcheg Pixel",monospace;--compact:"Kovcheg Pixel Compact","Kovcheg Pixel",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,4vw,48px);--wide:1240px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.55 var(--sans);overflow-x:hidden}
/* Hover art is fetched ahead so the first hover never blinks. */
body::after{content:url(kit/play_hover.png?v=2546d397f3) url(kit/play_pressed.png?v=d03dcd0b79) url(kit/card_frame_hover.png?v=704912066f) url(kit/button_hover.png?v=eff157924a) url(kit/button_pressed.png?v=759533399e);position:absolute;width:0;height:0;overflow:hidden;z-index:-1;opacity:0}
img{display:block;max-width:100%;height:auto}
a{color:var(--amber-hi)}
h1,h2,h3{font-weight:400;margin:0;-webkit-font-smoothing:none;font-smooth:never}
.skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:var(--ink);padding:8px 14px;z-index:60}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--amber-hi);outline-offset:3px}
::selection{background:var(--amber);color:var(--ink)}
.kit,.btn,.card,.chip,.facts li,.realm__bar,.realm__bar i,.sector-card,.perk__slot,.sheet,.viewer__frame,.latest,.feed-track,.feed-arrow,.totop,.menu,.sheet__close,.viewer__arrow,.campfire,.latest__fire{image-rendering:pixelated}

/* ---- Buttons: the launcher's gold play plate (96×32, margins 12/10) at ×2; the game's dark button (48×24, 8/7) at ×2.
   The plate is drawn as a border image over a thin real border, so the padding — not the art — sets the text room. */
.btn{--frame:url(kit/play_normal.png?v=f05d0ce897);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:60px;padding:16px 28px 18px;color:var(--ink);text-decoration:none;white-space:nowrap;cursor:pointer;
  border:2px solid transparent;border-image:var(--frame) 10 12 fill / 20px 24px / 0 stretch;background:none;
  font:24px/1 var(--compact);letter-spacing:.02em;-webkit-font-smoothing:none;
  filter:drop-shadow(0 4px 0 var(--edge));transition:transform .12s var(--ease),filter .2s;overflow:hidden;isolation:isolate}
.btn>*{position:relative;z-index:1}
/* A glint runs across the plate on hover, clipped to it. */
.btn::before{content:"";position:absolute;inset:6px;z-index:0;background:linear-gradient(105deg,transparent 35%,rgba(255,246,214,.55) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.btn:hover{--frame:url(kit/play_hover.png?v=2546d397f3);transform:translateY(-2px);filter:drop-shadow(0 6px 0 var(--edge))}
.btn:hover::before{transform:translateX(120%);transition:transform .7s var(--ease)}
.btn:active{--frame:url(kit/play_pressed.png?v=d03dcd0b79);transform:translateY(3px);filter:drop-shadow(0 1px 0 var(--edge))}
.btn .icon{width:24px;height:24px;fill:currentColor;flex:none;shape-rendering:crispEdges}
.btn--ghost{--frame:url(kit/button_normal.png?v=34d557e719);color:var(--text);border-image:var(--frame) 7 8 fill / 14px 16px / 0 stretch}
.btn--ghost:hover{--frame:url(kit/button_hover.png?v=eff157924a)}
.btn--ghost:active{--frame:url(kit/button_pressed.png?v=759533399e)}
.btn--ghost::before{background:linear-gradient(105deg,transparent 35%,rgba(246,197,111,.22) 50%,transparent 65%)}
.btn--small{min-height:48px;padding:11px 18px 13px}
.btn--small:not(.btn--ghost){border-image-width:16px 20px}
.soon{display:none;font:12px/1 var(--compact);text-transform:uppercase;padding:4px 6px 5px;background:var(--edge);color:var(--amber-hi);border:1px solid var(--brass)}
/* A link the server has not filled yet stays visible but inert, with a «скоро» plate instead of a dead end. */
.btn[aria-disabled="true"]{--frame:url(kit/play_disabled.png?v=baf9067c23);color:#3a2c20;cursor:default;transform:none;filter:drop-shadow(0 4px 0 var(--edge)) saturate(.7)}
.btn[aria-disabled="true"]::before{display:none}
.btn--ghost[aria-disabled="true"]{--frame:url(kit/button_disabled.png?v=785a909df3);color:var(--dim)}
.btn[aria-disabled="true"] .soon{display:inline-block}

/* ---- Header: sticky, tightens and darkens once the page moves. */
.top{position:sticky;top:0;z-index:30;background:linear-gradient(#1c1612,#15100d);border-bottom:2px solid var(--brass);box-shadow:0 3px 0 var(--edge);transition:box-shadow .3s}
.top.is-scrolled{box-shadow:0 3px 0 var(--edge),0 10px 30px rgba(0,0,0,.55)}
.top__inner{max-width:1640px;margin:0 auto;padding:8px var(--gutter);display:flex;align-items:center;gap:20px;min-height:72px;transition:min-height .3s var(--ease)}
.top.is-scrolled .top__inner{min-height:62px}
.brand{display:flex;align-items:center;gap:14px;color:var(--text);text-decoration:none;flex:none}
.brand__mark{width:56px;height:56px;border:2px solid var(--brass);box-shadow:0 3px 0 var(--edge);transition:width .3s var(--ease),height .3s var(--ease),transform .4s var(--ease)}
.brand:hover .brand__mark{transform:rotate(-4deg) scale(1.05)}
.top.is-scrolled .brand__mark{width:46px;height:46px}
.brand__name{font:30px/1 var(--pixel);letter-spacing:.03em;-webkit-font-smoothing:none;padding-left:14px;border-left:2px solid var(--brass)}
.nav{display:flex;align-items:center;gap:24px;margin-left:auto}
.nav>a{position:relative;color:var(--text);text-decoration:none;font:24px/1 var(--compact);-webkit-font-smoothing:none;padding:8px 0;white-space:nowrap}
.nav>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav>a:hover::after,.nav>a.is-here::after{transform:scaleX(1)}
.nav>a.is-here{color:var(--amber-hi)}
.nav__downloads{display:flex;gap:12px;padding-left:8px}
.top__back{margin-left:auto}
.menu{display:none;margin-left:auto;width:52px;height:48px;padding:12px 13px;border:2px solid transparent;border-image:url(kit/button_normal.png?v=34d557e719) 7 8 fill / 14px 16px / 0 stretch;background:none;cursor:pointer}
.menu span{display:block;height:4px;background:var(--text);margin:3px 0;transition:transform .25s var(--ease),opacity .2s}
.menu[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- Hero: the campfire picture moves slower than the page; embers rise from its fire, the fire and the lamp breathe. */
.hero{position:relative;min-height:clamp(580px,86vh,800px);display:flex;align-items:center;overflow:hidden;border-bottom:3px solid var(--edge);background:#120d0a}
.hero__scene{position:absolute;inset:0;will-change:transform}
/* Owner 04.11.2026: the picture stands still (a slow zoom of pixel art stepped visibly); the fire and the lamp stay alive. */
.hero__stage{position:absolute;inset:0}
.hero__art,.hero__art img{position:absolute;inset:0;width:100%;height:100%}
.hero__art img{object-fit:cover;object-position:62% 45%}
.embers{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.glow{position:absolute;left:0;top:0;width:var(--size,240px);height:var(--size,240px);margin:calc(var(--size,240px)/-2) 0 0 calc(var(--size,240px)/-2);border-radius:50%;pointer-events:none;mix-blend-mode:screen;display:none}
.hero.is-lit .glow{display:block}
.glow--fire{background:radial-gradient(closest-side,rgba(255,170,70,.55),rgba(255,120,40,.22) 55%,transparent);animation:flicker 3.2s ease-in-out infinite}
.glow--lamp{background:radial-gradient(closest-side,rgba(255,214,140,.45),rgba(255,180,90,.12) 60%,transparent);animation:flicker 7s ease-in-out infinite reverse}
@keyframes flicker{0%{opacity:.85}9%{opacity:1}17%{opacity:.7}26%{opacity:.95}38%{opacity:.78}51%{opacity:1}63%{opacity:.82}72%{opacity:.92}86%{opacity:.72}100%{opacity:.88}}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(14,10,8,.94) 0%,rgba(14,10,8,.74) 30%,rgba(14,10,8,.12) 58%,transparent 72%),linear-gradient(0deg,rgba(14,10,8,.8),transparent 30%),radial-gradient(ellipse at 70% 50%,transparent 50%,rgba(0,0,0,.35))}
.hero__content{position:relative;z-index:2;width:100%;max-width:var(--wide);margin:0 auto;padding:56px var(--gutter) 72px}
.eyebrow{position:relative;display:inline-block;margin:0 0 22px;padding-bottom:12px;font:24px/1 var(--compact);letter-spacing:.08em;text-transform:uppercase;color:var(--text);-webkit-font-smoothing:none}
.eyebrow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--amber);transform-origin:left}
.hero h1{font:75px/1.06 var(--pixel);color:#f7eedc;text-shadow:5px 5px 0 var(--edge)}
.hero h1 .line{display:block}
.hero h1 .line>span{display:inline-block}
.hero__lead{margin:22px 0 32px;font-size:21px;line-height:1.5;color:var(--text);text-shadow:0 2px 6px rgba(0,0,0,.6)}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px 18px;max-width:680px}
.hero__note{margin:26px 0 0;font:24px/1 var(--compact);color:var(--muted);-webkit-font-smoothing:none}
.hero__down{position:absolute;z-index:2;left:50%;bottom:16px;width:48px;height:48px;margin-left:-24px;padding:10px;color:var(--amber-hi);animation:bob 1.6s steps(4) infinite}
.hero__down svg{width:100%;height:100%;fill:currentColor;shape-rendering:crispEdges;filter:drop-shadow(2px 2px 0 var(--edge))}
@keyframes bob{50%{transform:translateY(8px)}}
/* The newest card on the game's notification plate (96×28, socket 30 px) with the campfire in its socket. */
.latest{display:inline-flex;align-items:center;gap:14px;max-width:min(640px,100%);margin-top:26px;padding:10px 22px 10px 12px;min-height:56px;color:var(--text);text-decoration:none;
  border:2px solid transparent;border-image:url(kit/notification_plate.png?v=e5f62fb48e) 8 10 8 30 fill / 16px 20px 16px 60px / 0 stretch;filter:drop-shadow(0 4px 0 var(--edge));transition:transform .2s var(--ease)}
.latest:hover{transform:translateX(4px)}
.latest[hidden]{display:none}
.latest__fire{flex:none;width:36px;height:36px;margin-left:4px;background:url(kit/campfire_strip.png?v=02ae364904) 0 -6px/144px 48px no-repeat;animation:fire .55s steps(4) infinite}
@keyframes fire{to{background-position:-144px -6px}}
.latest__text{display:block;min-width:0;font-size:16px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.latest__text b{font:12px/1 var(--compact);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);background:var(--amber-hi);padding:3px 6px 4px;margin-right:6px;vertical-align:2px}
.latest__version{color:var(--amber-hi);margin-right:4px}
.latest__go{font:24px/1 var(--compact);color:var(--amber-hi);transition:transform .2s var(--ease)}
.latest:hover .latest__go{transform:translateX(4px)}

/* ---- Section heading: brass rules that draw out from the title. */
.section-head{display:flex;align-items:center;gap:28px;max-width:var(--wide);margin:0 auto 34px;padding:0 var(--gutter)}
.section-head__rule{flex:1;height:3px;background:linear-gradient(90deg,transparent,var(--brass) 25%,var(--brass) 75%,transparent);position:relative}
.section-head__rule::after{content:"";position:absolute;top:-3px;width:9px;height:9px;background:var(--gold);box-shadow:2px 2px 0 var(--edge);transform:rotate(45deg)}
.section-head__rule:first-child::after{right:-4px}.section-head__rule:last-child::after{left:-4px}
.section-head h2,.features h2,.community h2{font:45px/1.15 var(--pixel);color:#f4e9d3;text-shadow:3px 3px 0 var(--edge)}

/* ---- Updates: one horizontal shelf, the newest card on the left (owner's mockup), framed by the launcher's card frame. */
.updates{padding:68px 0 64px;background:radial-gradient(ellipse at 50% 0,rgba(138,103,56,.2),transparent 60%),var(--bg)}
.feed-wrap{position:relative;--inset:max(var(--gutter),calc((100% - var(--wide))/2 + var(--gutter)))}
.feed{list-style:none;margin:0;padding:24px var(--inset) 28px;display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--inset);scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab}
.feed::-webkit-scrollbar{display:none}
.feed.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.feed.is-dragging .card{pointer-events:none}
.card{--frame:url(kit/card_frame.png?v=be64d5c78b);position:relative;flex:0 0 340px;scroll-snap-align:start;display:flex;flex-direction:column;padding:6px;
  border:2px solid transparent;border-image:var(--frame) 6 fill / 18px / 0 stretch;filter:drop-shadow(0 6px 0 var(--edge));transition:transform .3s var(--ease)}
.card:hover,.card:focus-within{--frame:url(kit/card_frame_hover.png?v=704912066f);transform:translateY(-6px)}
/* The game's selection brackets close in around the card under the pointer. */
.card::after,.shot a::after{content:"";position:absolute;inset:-14px;border:2px solid transparent;border-image:url(kit/selection_frame.png?v=e020b3d1af) 8 / 24px / 0 stretch;opacity:0;transform:scale(1.04);transition:opacity .2s,transform .3s var(--ease);pointer-events:none;image-rendering:pixelated}
.card:hover::after,.card:focus-within::after,.shot a:hover::after,.shot a:focus-visible::after{opacity:1;transform:scale(1)}
/* Frames of the gallery sit near the screen edge on a phone: their brackets only fade in, never grow past it. */
.shot a::after{inset:-10px;transform:none}
.card__cover{position:relative;display:block;width:100%;padding:0;margin:0;aspect-ratio:16/9;background:#0e0b09;overflow:hidden;cursor:zoom-in;border:2px solid var(--edge);font:inherit;color:inherit}
.card__cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .card__cover img{transform:scale(1.06)}
.card--new .card__cover::before{content:"Новое";position:absolute;z-index:1;left:8px;top:8px;padding:6px 8px 7px;font:12px/1 var(--compact);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);background:var(--amber-hi);box-shadow:3px 3px 0 var(--edge);animation:pulse 2s steps(2) infinite}
@keyframes pulse{50%{background:var(--gold)}}
.card--new{filter:drop-shadow(0 6px 0 var(--edge)) drop-shadow(0 0 18px rgba(233,166,74,.28))}
.card__body{padding:14px 12px 10px;display:flex;flex-direction:column;gap:10px;flex:1}
.card__meta{display:flex;align-items:center;gap:12px;margin:0;color:var(--muted);font:24px/1 var(--compact);-webkit-font-smoothing:none}
/* The level badge (24×16, margins 6/5) at ×2 carries the version. */
.chip{padding:4px 10px 6px;color:var(--amber-hi);border:2px solid transparent;border-image:url(kit/badge_level.png?v=02de14ec37) 5 6 fill / 10px 12px / 0 stretch}
.chip:empty{display:none}
.card h3,.sheet h3{font:30px/1.15 var(--pixel);color:#f6ecd8;-webkit-font-smoothing:none}
.card__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:15.5px;line-height:1.45;color:var(--text)}
.card__list li{position:relative;padding-left:20px}
.card__list li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;background:var(--amber);box-shadow:2px 2px 0 var(--edge)}
.card__more{margin-top:auto;align-self:flex-start;background:none;border:0;padding:6px 0 0;color:var(--amber-hi);font:24px/1 var(--compact);cursor:pointer;-webkit-font-smoothing:none;position:relative}
.card__more::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.card__more:hover::after{transform:scaleX(1)}
.card--skeleton .card__cover{background:linear-gradient(90deg,#1a1512,#2a211a,#1a1512);background-size:200% 100%;animation:shine 1.4s infinite}
.card--skeleton .card__body span{display:block;height:16px;background:#2a221b}
.card--skeleton .card__body span:first-child{width:40%}.card--skeleton .card__body span:nth-child(2){width:80%;height:26px}
@keyframes shine{to{background-position:-200% 0}}
/* Cards rise into place one after another when the shelf comes into view. */
.feed.is-waiting .card{opacity:0;transform:translateY(28px)}
.feed .card.is-rising{animation:rise .6s var(--ease) both;animation-delay:calc(var(--i,0)*80ms)}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.feed-arrow{position:absolute;top:106px;z-index:3;width:52px;height:60px;padding:14px;border:2px solid transparent;border-image:url(kit/button_normal.png?v=34d557e719) 7 8 fill / 14px 16px / 0 stretch;background:none;color:var(--amber-hi);cursor:pointer;filter:drop-shadow(0 4px 0 var(--edge));transition:opacity .2s,transform .15s}
.feed-arrow:hover{border-image-source:url(kit/button_hover.png?v=eff157924a)}
.feed-arrow:active{transform:translateY(2px)}
.feed-arrow svg{width:100%;height:100%;fill:currentColor;shape-rendering:crispEdges}
.feed-arrow:disabled{opacity:0;pointer-events:none}
.feed-arrow--prev{left:max(4px,calc(var(--inset) - 66px))}.feed-arrow--next{right:16px}
/* Where the shelf stands: the game's progress bar (track 48×10, amber fill 8×6) at ×2. */
.feed-track{position:relative;max-width:420px;height:20px;margin:6px auto 0;border:2px solid transparent;border-image:url(kit/progress_track.png?v=01b4d406a7) 3 4 fill / 6px 8px / 0 stretch;opacity:0;transition:opacity .3s}
.feed-track.is-on{opacity:1}
.feed-track__fill{position:absolute;top:4px;bottom:4px;left:6px;width:var(--w,30%);transform:translateX(var(--x,0));background:url(kit/progress_fill_amber.png?v=6977bffc02) 0 0/16px 100% repeat-x;image-rendering:pixelated;transition:transform .12s linear}
.feed-empty{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter);color:var(--muted);font-size:18px}

/* ---- About: the story, four numbers in card frames and six things to do, each in an inventory slot with its HUD icon. */
.features{background:linear-gradient(180deg,var(--bg),var(--bg-2) 40%,var(--bg));border-top:3px solid var(--edge);border-bottom:3px solid var(--edge)}
.features__inner{max-width:var(--wide);margin:0 auto;padding:76px var(--gutter) 84px;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px 56px;align-items:start}
.features__intro p{color:var(--text);margin:18px 0 0}
.facts{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-self:center}
.facts li{padding:18px 20px;display:flex;flex-direction:column;gap:6px;border:2px solid transparent;border-image:url(kit/card_frame.png?v=be64d5c78b) 6 fill / 18px / 0 stretch;filter:drop-shadow(0 5px 0 var(--edge));transition:transform .3s var(--ease)}
.facts li:hover{transform:translateY(-4px);border-image-source:url(kit/card_frame_hover.png?v=704912066f)}
.facts b{font:60px/1 var(--pixel);color:var(--amber-hi);font-weight:400;-webkit-font-smoothing:none;text-shadow:3px 3px 0 var(--edge);font-variant-numeric:tabular-nums}
.facts span{color:var(--muted);font-size:15px;line-height:1.35}
.perks{grid-column:1/-1;list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 28px}
.perk{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:18px;align-items:start}
/* The inventory slot (32×32, margins 6) at ×3 holds the HUD icon (32×32) at ×2. */
.perk__slot{grid-row:1/3;width:96px;height:96px;display:grid;place-items:center;border:2px solid transparent;border-image:url(kit/slot_occupied.png?v=5342db6d9a) 6 fill / 18px / 0 stretch;filter:drop-shadow(0 4px 0 var(--edge))}
.perk__slot img{width:64px;height:64px;image-rendering:pixelated;transition:transform .3s steps(3)}
.perk:hover .perk__slot img{transform:translateY(-4px) rotate(-6deg)}
.perk h3{font:30px/1.1 var(--pixel);color:#f4e9d3;margin-top:8px;-webkit-font-smoothing:none}
.perk p{margin:8px 0 0;color:var(--muted);font-size:15.5px;line-height:1.45}

/* ---- System requirements (owner 04.11.2026): three plates in the card frame of the shelf. */
.specs{padding:64px 0 76px;background:var(--bg-2);border-bottom:3px solid var(--edge)}
.specs__grid{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.spec{padding:20px 22px 22px;border:2px solid transparent;border-image:url(kit/card_frame.png?v=be64d5c78b) 12 fill stretch;border-width:12px}
.spec h3{margin:0 0 12px;font:30px/1.1 var(--pixel);color:var(--amber-hi);-webkit-font-smoothing:none}
.spec dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 14px}
.spec dt{color:var(--muted);font:24px/1.1 var(--compact);-webkit-font-smoothing:none}
.spec dd{margin:0;color:var(--text);font-size:15.5px;line-height:1.4}

/* ---- Gallery: six frames of 0.3.0; the first is large. A frame opens in the viewer. */
.gallery{padding:72px 0 84px;background:radial-gradient(ellipse at 50% 100%,rgba(138,103,56,.14),transparent 60%),var(--bg)}
.shots{list-style:none;max-width:var(--wide);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.shot:first-child{grid-column:span 2;grid-row:span 2}
.shot a{position:relative;display:block;height:100%;padding:5px;background:var(--edge);box-shadow:inset 0 0 0 2px var(--brass),0 5px 0 var(--edge);cursor:zoom-in;color:var(--text);text-decoration:none}
.shot a>img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;transition:filter .4s}
.shot a:hover>img{filter:saturate(1.08) brightness(1.06)}
.shot__caption{position:absolute;left:5px;right:5px;bottom:5px;padding:26px 14px 12px;font:24px/1 var(--compact);-webkit-font-smoothing:none;background:linear-gradient(transparent,rgba(10,7,5,.88));transform:translateY(6px);opacity:.0;transition:opacity .25s,transform .3s var(--ease)}
.shot a:hover .shot__caption,.shot a:focus-visible .shot__caption{opacity:1;transform:none}
.shot:first-child .shot__caption{opacity:1;transform:none}

/* ---- Community band: the lantern melts into the green board on the right. */
.community{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);min-height:340px;background:var(--green);border-top:3px solid var(--edge);border-bottom:3px solid var(--edge);overflow:hidden}
.community__art img{width:100%;height:100%;object-fit:cover;object-position:18% 50%;-webkit-mask-image:linear-gradient(90deg,#000 62%,transparent);mask-image:linear-gradient(90deg,#000 62%,transparent)}
.community__text{position:relative;padding:56px var(--gutter) 60px 0;max-width:720px;align-self:center}
.community p{margin:14px 0 28px;font-size:19px;color:#dfe0cc}
/* The game's campfire strip (four 24×32 frames) at ×3, burning in steps. */
.campfire{display:block;width:72px;height:96px;margin:0 0 6px -8px;background:url(kit/campfire_strip.png?v=02ae364904) 0 0/288px 96px no-repeat;animation:camp .6s steps(4) infinite}
@keyframes camp{to{background-position:-288px 0}}
.campfire--small{display:inline-block;width:24px;height:32px;margin:0 12px -4px 0;background-size:96px 32px;animation-name:camp-small}
@keyframes camp-small{to{background-position:-96px 0}}

/* ---- Footer */
.foot{background:#0f0b09;border-top:2px solid var(--brass)}
.foot__inner{max-width:var(--wide);margin:0 auto;padding:22px var(--gutter);display:flex;align-items:center;flex-wrap:wrap;gap:14px 26px}
.foot__brand{font:30px/1 var(--pixel);-webkit-font-smoothing:none;display:inline-flex;align-items:flex-end}
.foot__studio{font:24px/1 var(--compact);color:var(--muted);padding-left:26px;border-left:2px solid var(--brass);-webkit-font-smoothing:none}
.foot__links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-left:auto}
.foot__links a{color:var(--muted);font-size:15px}
.foot__links a:hover{color:var(--amber-hi)}
.foot__age{font:24px/1 var(--compact);padding:6px 8px 8px;border:2px solid var(--muted);color:var(--muted)}
.foot__report{color:var(--amber-hi)!important}

/* ---- Back to the top: the game's dark button with a pixel arrow. */
.totop{position:fixed;z-index:25;right:18px;bottom:18px;width:52px;height:52px;padding:13px;color:var(--amber-hi);border:2px solid transparent;border-image:url(kit/button_normal.png?v=34d557e719) 7 8 fill / 14px 16px / 0 stretch;filter:drop-shadow(0 4px 0 var(--edge));opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .25s,transform .3s var(--ease)}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{border-image-source:url(kit/button_hover.png?v=eff157924a)}
.totop svg{width:100%;height:100%;fill:currentColor;shape-rendering:crispEdges}

/* ---- Card sheet and the frame viewer: the game's metal panel (64×64, margins 12) at ×2. */
.sheet,.viewer,.sectors{color:var(--text);padding:0;background:none;border:0;overflow:visible}
.sheet{width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 32px)}
.sheet[open]{display:flex;flex-direction:column;border:2px solid transparent;border-image:url(kit/panel_window.png?v=cf5b049583) 12 fill / 24px / 0 stretch;padding:14px 14px 18px;filter:drop-shadow(0 8px 0 var(--edge));animation:pop .28s var(--ease)}
.sheet::backdrop,.viewer::backdrop,.sectors::backdrop{background:rgba(8,5,3,.82);backdrop-filter:blur(3px);animation:fade .25s}
.sheet.is-closing,.viewer.is-closing,.sectors.is-closing{animation:drop .18s ease-in forwards}
.sheet.is-closing::backdrop,.viewer.is-closing::backdrop,.sectors.is-closing::backdrop{animation:fade .18s reverse forwards}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes drop{to{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet__cover{width:100%;aspect-ratio:16/9;object-fit:cover;border:2px solid var(--edge);flex:none}
.sheet__body{overflow:auto;padding:4px 10px 0;min-height:0;scrollbar-width:thin;scrollbar-color:var(--brass) transparent}
.sheet .card__meta{margin:16px 0 0}
.sheet h3{margin:12px 0 0}
.sheet .card__list{margin:14px 0 4px;font-size:17px}
.sheet__nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 8px 0;flex:none}
.sheet__count{font:24px/1 var(--compact);color:var(--muted);-webkit-font-smoothing:none}
.sheet__nav .btn:disabled{visibility:hidden}
.sheet form,.viewer form,.sectors form{position:absolute;right:14px;top:14px;z-index:2;margin:0}
.sheet__close{width:48px;height:48px;padding:0 0 4px;border:2px solid transparent;border-image:url(kit/button_normal.png?v=34d557e719) 7 8 fill / 14px 16px / 0 stretch;background:none;color:var(--text);font:30px/1 var(--pixel);cursor:pointer;filter:drop-shadow(0 3px 0 var(--edge))}
.sheet__close:hover{border-image-source:url(kit/button_hover.png?v=eff157924a);color:var(--amber-hi)}
.viewer{width:min(1280px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}
.viewer[open]{display:block;animation:pop .28s var(--ease)}
.viewer__frame{margin:0;padding:12px;border:2px solid transparent;border-image:url(kit/panel_window.png?v=cf5b049583) 12 fill / 24px / 0 stretch;filter:drop-shadow(0 8px 0 var(--edge))}
.viewer__img{width:100%;height:auto;max-height:calc(100dvh - 130px);object-fit:contain;background:#0b0907;transition:opacity .2s}
.viewer__img.is-swapping{opacity:.25}
.viewer__caption{padding:12px 6px 2px;font:24px/1.2 var(--compact);color:var(--text);-webkit-font-smoothing:none}
.viewer__arrow{position:absolute;top:50%;width:56px;height:64px;margin-top:-50px;padding:15px;border:2px solid transparent;border-image:url(kit/button_normal.png?v=34d557e719) 7 8 fill / 14px 16px / 0 stretch;background:none;color:var(--amber-hi);cursor:pointer;filter:drop-shadow(0 4px 0 var(--edge))}
.viewer__arrow:hover{border-image-source:url(kit/button_hover.png?v=eff157924a)}
.viewer__arrow svg{width:100%;height:100%;fill:currentColor;shape-rendering:crispEdges}
.viewer__arrow--prev{left:22px}.viewer__arrow--next{right:22px}

/* ---- Scroll reveal: site.js adds .io to <html> and reveals blocks as they come into view; without it everything stands in place. */
.io .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.io .reveal.is-in{opacity:1;transform:none}
.io .section-head.reveal .section-head__rule{transform:scaleX(0);transition:transform .9s var(--ease) .15s}
.io .section-head.reveal .section-head__rule:first-child{transform-origin:right}
.io .section-head.reveal .section-head__rule:last-child{transform-origin:left}
.io .section-head.reveal.is-in .section-head__rule{transform:scaleX(1)}
/* The first screen arrives on load by CSS alone: the headline types in by pixel steps, then the rest rises. */
.hero .eyebrow{animation:up .6s var(--ease) .05s both}
.hero .eyebrow::after{animation:grow .7s var(--ease) .35s both}
.hero h1 .line>span{animation:type .5s steps(10) both}
.hero h1 .line:nth-child(1)>span{animation-delay:.2s}
.hero h1 .line:nth-child(2)>span{animation-delay:.6s}
.hero__lead{animation:up .6s var(--ease) .95s both}
.hero__actions>*{animation:up .55s var(--ease) both}
.hero__actions>:nth-child(1){animation-delay:1.05s}
.hero__actions>:nth-child(2){animation-delay:1.12s}
.hero__actions>:nth-child(3){animation-delay:1.19s}
.latest{animation:up .6s var(--ease) .2s both}
.hero__note{animation:up .6s var(--ease) 1.4s both}
@keyframes type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- Narrow screens: one column, the menu under a button, the newest card still first on the left. */
/* The header holds the brand, seven sections and two download plates only from 1580 px; below that the plates stay in the first screen, and
   below 1180 px the sections go under the menu button with them. */
@media (max-width:1580px){
  .nav__downloads{display:none}
}
@media (max-width:1180px){
  .menu{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;gap:0;background:#17120f;border-bottom:2px solid var(--brass);box-shadow:0 4px 0 var(--edge),0 18px 30px rgba(0,0,0,.5);padding:6px var(--gutter) 18px;max-height:calc(100dvh - 64px);overflow:auto}
  .nav.is-open{display:flex;animation:pop .22s var(--ease)}
  .nav>a{display:block;padding:14px 0;border-bottom:2px solid #2e241c}
  .nav>a::after{display:none}
  .nav__downloads{display:flex;flex-direction:column;padding:16px 0 0}
}
@media (max-width:1080px){
  .brand__name{font-size:24px;font-family:var(--compact)}
  .perks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  html{scroll-padding-top:70px}
  .top__inner,.top.is-scrolled .top__inner{min-height:60px;gap:10px}
  .brand__mark,.top.is-scrolled .brand__mark{width:40px;height:40px}
  .brand__name{padding-left:10px}
  .hero{min-height:auto;align-items:flex-end}
  .hero__art img{object-position:72% 50%}
  .hero::after{background:linear-gradient(0deg,rgba(14,10,8,.97) 0%,rgba(14,10,8,.86) 45%,rgba(14,10,8,.25) 75%,rgba(14,10,8,.15))}
  .hero__content{padding:230px var(--gutter) 64px}
  .eyebrow{font-size:12px;margin-bottom:16px;padding-bottom:9px}
  .hero h1{font-size:45px;text-shadow:3px 3px 0 var(--edge)}
  .hero__lead{font-size:18px;margin:16px 0 24px}
  .hero__actions{flex-direction:column;align-items:stretch}
  .latest{display:flex}
  .latest__text{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .hero__down{display:none}
  .section-head{gap:14px;margin-bottom:24px}
  .section-head h2,.features h2,.community h2{font-size:30px}
  .updates{padding:48px 0 48px}
  .card{flex-basis:min(82vw,340px)}
  .feed-arrow{display:none}
  .feed-track{max-width:240px}
  .features__inner{grid-template-columns:1fr;gap:28px;padding:52px var(--gutter) 60px}
  .specs__grid{grid-template-columns:1fr}
  .facts b{font-size:45px}
  .perks{grid-template-columns:1fr;gap:18px;margin-top:8px}
  .perk{grid-template-columns:72px minmax(0,1fr);column-gap:14px}
  .perk__slot{width:72px;height:72px;border-image-width:12px}
  .perk__slot img{width:64px;height:64px}
  .perk h3{font-size:30px;margin-top:2px}
  .gallery{padding:52px 0 60px}
  .shots{grid-template-columns:1fr 1fr;gap:12px}
  .shot:first-child{grid-column:1/-1;grid-row:auto}
  .shot a::after{inset:-6px}
  .shot__caption{opacity:1;transform:none;font-size:12px;padding:18px 8px 7px}
  .shot:first-child .shot__caption{font-size:24px;padding:24px 12px 10px}
  .viewer__arrow{top:auto;bottom:-6px;margin:0;width:52px;height:56px;padding:13px}
  .viewer__arrow--prev{left:auto;right:76px}.viewer__arrow--next{right:14px}
  .viewer__caption{padding-right:136px;font-size:12px;line-height:1.4;min-height:52px}
  .community{grid-template-columns:1fr}
  .community__art{height:220px}
  .community__art img{-webkit-mask-image:linear-gradient(0deg,transparent,#000 45%);mask-image:linear-gradient(0deg,transparent,#000 45%);object-position:20% 40%}
  .community__text{padding:0 var(--gutter) 44px;margin-top:-30px}
  .campfire{width:48px;height:64px;background-size:192px 64px;animation-name:camp-48}
  @keyframes camp-48{to{background-position:-192px 0}}
  .foot__studio{border-left:0;padding-left:0}
  .foot__links{margin-left:0;width:100%}
  .totop{right:12px;bottom:12px}
}
/* A phone on its side (844×390): the first screen keeps the headline and the buttons within reach. */
@media (max-height:520px) and (min-width:769px){
  .top__inner,.top.is-scrolled .top__inner{min-height:56px}
  .brand__mark,.top.is-scrolled .brand__mark{width:40px;height:40px}
  .hero{min-height:auto}
  .hero__content{padding:28px var(--gutter) 32px}
  .eyebrow{margin-bottom:14px;padding-bottom:9px}
  .hero h1{font-size:45px;text-shadow:3px 3px 0 var(--edge)}
  .hero__lead{margin:12px 0 18px;font-size:18px}
  .hero__note{margin-top:16px}
  .latest{margin-top:16px}
  .hero__down{display:none}
}

/* ---- Release160: the servers, each on the launcher's card frame: its picture, name and mode, its lamp and how full it is. */
.servers{padding:64px 0 68px;background:var(--bg-2);border-top:3px solid var(--edge)}
.realms{list-style:none;max-width:var(--wide);margin:0 auto;padding:0 var(--gutter);display:flex;flex-direction:column;gap:18px}
.realm{display:grid;grid-template-columns:240px minmax(0,1fr) minmax(220px,300px);gap:22px;align-items:center;padding:14px 22px 14px 14px;border:2px solid transparent;border-image:url(kit/card_frame.png?v=be64d5c78b) 6 fill / 18px / 0 stretch;image-rendering:pixelated;filter:drop-shadow(0 5px 0 var(--edge))}
.realm__art{width:100%;aspect-ratio:16/9;object-fit:cover;background:#0e0b09;border:2px solid var(--edge);image-rendering:auto}
.realm__title{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0}
.realm__title h3{font:45px/1.05 var(--pixel);color:#f4e9d3;text-shadow:3px 3px 0 var(--edge)}
.realm__title .chip{font:24px/1 var(--compact);-webkit-font-smoothing:none}
.realm__main p{margin:8px 0 0;color:var(--text);font-size:16px;line-height:1.45}
.realm__main .realm__meta{color:var(--muted);font-size:15px}
.realm__state{display:flex;flex-direction:column;gap:10px}
.realm__word{display:flex;align-items:center;gap:12px;font:30px/1.1 var(--pixel);-webkit-font-smoothing:none;color:var(--muted)}
.lamp{flex:none;width:16px;height:16px;background:#6d6252;box-shadow:0 0 0 2px var(--edge),2px 2px 0 2px var(--edge)}
.realm[data-state="stable"] .lamp{background:#7bd35e;animation:lamp 2.4s ease-in-out infinite}
.realm[data-state="stable"] .realm__word{color:#a5e58b}
.realm[data-state="busy"] .lamp,.realm[data-state="full"] .lamp{background:var(--amber-hi)}
.realm[data-state="busy"] .realm__word,.realm[data-state="full"] .realm__word{color:var(--amber-hi)}
.realm[data-state="unavailable"] .lamp{background:#e08a3c}
.realm[data-state="unavailable"] .realm__word{color:#eba468}
.realm[data-state="down"] .lamp{background:#d9483b}
.realm[data-state="down"] .realm__word{color:#ef8a7c}
@keyframes lamp{50%{box-shadow:0 0 0 2px var(--edge),2px 2px 0 2px var(--edge),0 0 14px 3px rgba(123,211,94,.55)}}
.realm__bar{position:relative;height:20px;border:2px solid transparent;border-image:url(kit/progress_track.png?v=01b4d406a7) 3 4 fill / 6px 8px / 0 stretch}
.realm__bar i{position:absolute;left:6px;top:4px;bottom:4px;width:calc((100% - 16px)*var(--load,0));background:url(kit/progress_fill_amber.png?v=6977bffc02) 0 0/16px 100% repeat-x;transition:width .6s var(--ease)}
.realm__load{margin:0;color:var(--muted);font-size:15px}
.realms__note{max-width:var(--wide);margin:16px auto 0;padding:0 var(--gutter);color:var(--dim);font-size:14px;text-align:center}
.realm--skeleton .realm__art{height:auto;background:linear-gradient(90deg,#1a1512,#2a211a,#1a1512);background-size:200% 100%;animation:shine 1.4s infinite}
.realm--skeleton span{display:block;height:18px;margin:8px 0;background:#2a221b}
/* ---- «4 сектора» opens the sectors' window. */
.facts li.fact-link{padding:0}
.fact-link__button{display:flex;flex-direction:column;gap:6px;width:100%;height:100%;padding:18px 20px;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.fact-link__button small{margin-top:auto;padding-top:4px;font:24px/1 var(--compact);color:var(--amber-hi);-webkit-font-smoothing:none}
.fact-link__button small i{display:inline-block;font-style:normal;transition:transform .25s var(--ease)}
.fact-link__button:hover small i{transform:translateX(5px)}
/* ---- The sectors' window: the game's metal panel; four maps to choose from, then one map with its places. */
.sectors{width:min(1240px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}
.sectors[open]{display:flex;flex-direction:column;border:2px solid transparent;border-image:url(kit/panel_window.png?v=cf5b049583) 12 fill / 24px / 0 stretch;image-rendering:pixelated;filter:drop-shadow(0 8px 0 var(--edge));animation:pop .28s var(--ease)}
.sectors__body{overflow:auto;padding:26px 28px 28px;min-height:0;scrollbar-width:thin;scrollbar-color:var(--brass) transparent}
.sectors h2{font:45px/1.1 var(--pixel);color:#f4e9d3;text-shadow:3px 3px 0 var(--edge);padding-right:60px}
.sectors__lead{margin:10px 0 22px;color:var(--muted)}
.sector-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sector-card{display:flex;flex-direction:column;gap:8px;width:100%;height:100%;padding:10px 10px 14px;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;border:2px solid transparent;border-image:url(kit/card_frame.png?v=be64d5c78b) 6 fill / 18px / 0 stretch;filter:drop-shadow(0 4px 0 var(--edge));transition:transform .25s var(--ease)}
.sector-card:hover,.sector-card:focus-visible{border-image-source:url(kit/card_frame_hover.png?v=704912066f);transform:translateY(-4px)}
.sector-card img{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid var(--edge);image-rendering:auto;transition:filter .3s}
.sector-card:hover img{filter:brightness(1.12)}
.sector-card b{font:30px/1.1 var(--pixel);font-weight:400;color:#f6ecd8;-webkit-font-smoothing:none}
.sector-card .chip{align-self:flex-start;font:24px/1 var(--compact);-webkit-font-smoothing:none}
.sector-card small{color:var(--muted);font-size:14px;line-height:1.4}
.sector-card span.sector-card__about{font-size:15px;line-height:1.4}
.sector-view__top{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:16px;padding-right:60px}
.sector-tabs{display:flex;flex-wrap:wrap;gap:8px}
.sector-tabs button{padding:8px 14px 10px;background:none;color:var(--muted);font:24px/1 var(--compact);-webkit-font-smoothing:none;cursor:pointer;border:0;border-bottom:3px solid transparent}
.sector-tabs button:hover{color:var(--text)}
.sector-tabs button[aria-selected="true"]{color:var(--amber-hi);border-bottom-color:var(--amber)}
.sector-view__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:22px;align-items:start}
.sector-map{position:relative;aspect-ratio:1;max-height:calc(100dvh - 170px);background:#0e0b09;border:2px solid var(--edge);box-shadow:inset 0 0 0 2px var(--brass);image-rendering:auto;margin:0 auto;width:min(100%,calc(100dvh - 170px))}
.sector-map img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:auto}
.pin{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;padding:0;background:#e9a64a;border:2px solid var(--edge);box-shadow:1px 1px 0 var(--edge);cursor:pointer;transition:transform .12s}
.pin--safe,.pin-dot--safe{background:#7bd35e}
.pin--caution,.pin--medium,.pin-dot--caution{background:#f6c56f}
.pin--danger,.pin-dot--danger{background:#e2574a}
.pin:hover,.pin:focus-visible,.pin.is-on{transform:scale(1.6);z-index:3}
.pin::after{content:attr(data-name);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%) scale(.625);transform-origin:50% 100%;padding:6px 10px 8px;white-space:nowrap;background:#0f0b09;color:#f6ecd8;border:2px solid var(--brass);font:24px/1 var(--compact);-webkit-font-smoothing:none;opacity:0;pointer-events:none}
.pin:hover::after,.pin:focus-visible::after,.pin.is-on::after{opacity:1}
.sector-side h3{font:45px/1.05 var(--pixel);color:#f4e9d3;text-shadow:3px 3px 0 var(--edge)}
.sector-side__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 0;color:var(--muted);font-size:15px}
.sector-side__meta .chip{font:24px/1 var(--compact);-webkit-font-smoothing:none}
.sector-side>p:not(.sector-side__meta){margin:12px 0 0;font-size:16px;line-height:1.45}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 0;padding:0;color:var(--muted);font-size:14px}
.legend li{display:flex;align-items:center;gap:7px}
.pin-dot{display:inline-block;width:12px;height:12px;border:2px solid var(--edge)}
.places{list-style:none;margin:12px 0 0;padding:0 6px 0 0;max-height:calc(100dvh - 500px);min-height:200px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--brass) transparent}
.places li{display:flex;align-items:baseline;gap:8px;padding:6px 8px;border-bottom:1px solid #2e241c;font-size:15px;line-height:1.3;cursor:default}
.places li:hover,.places li.is-on{background:#2a211a}
.places b{font-weight:400;color:var(--text)}
.places small{margin-left:auto;flex:none;color:var(--amber-hi);font:12px/1 var(--compact);-webkit-font-smoothing:none}
.places em{display:block;font-style:normal;color:var(--dim);font-size:13px}
@media (max-width:1000px){
  .realm{grid-template-columns:180px minmax(0,1fr);gap:16px}
  .realm__state{grid-column:1/-1}
  .sector-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sector-view__grid{grid-template-columns:1fr}
  .sector-map{width:100%;max-height:none}
  .places{max-height:none;overflow:visible;min-height:0}
}
@media (max-width:768px){
  .servers{padding:48px 0}
  .realm{grid-template-columns:1fr;padding:10px 12px 14px}
  .realm__title h3{font-size:30px}
  .sectors__body{padding:20px 16px 18px}
  .sectors h2{font-size:30px}
  .sectors[open]{border-image-width:16px}
  .sector-side h3{font-size:30px}
  .sector-cards{grid-template-columns:1fr}
  .sector-card{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:12px;row-gap:4px}
  .sector-card img{grid-row:1/6}
  .pin{width:12px;height:12px;margin:-6px 0 0 -6px}
}
/* ---- Release144: «Сообщить об ошибке» — the site's panel and gold button around a plain form. */
.report,.doc{max-width:820px;margin:0 auto;padding:48px var(--gutter) 72px}
.report h1,.doc h1{font:45px/1.15 var(--pixel);color:#f4e9d3;text-shadow:3px 3px 0 var(--edge)}
.report__lead{color:var(--text);font-size:18px;margin:16px 0 26px}
.report__form,.report__done{border:2px solid transparent;border-image:url(kit/panel_window.png?v=cf5b049583) 12 fill / 24px / 0 stretch;filter:drop-shadow(0 6px 0 var(--edge));padding:30px 30px 32px;display:flex;flex-direction:column;gap:18px;image-rendering:pixelated;animation:pop .4s var(--ease)}
.report__done h2{font:45px/1.1 var(--pixel);color:var(--amber-hi)}
.report__done p{margin:0;font-size:18px}
.report__done .btn{align-self:flex-start}
.report__platform{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.report__platform legend,.field__name{font:24px/1 var(--compact);color:var(--amber-hi);margin-bottom:10px;padding:0;-webkit-font-smoothing:none}
.field__name b{color:#ef9a83;font-weight:400}
.report__platform label{cursor:pointer}
.report__platform input{position:absolute;opacity:0;pointer-events:none}
.report__platform span{display:inline-block;padding:12px 18px 14px;color:var(--text);font:24px/1 var(--compact);-webkit-font-smoothing:none;border:2px solid transparent;border-image:url(kit/button_normal.png?v=34d557e719) 7 8 fill / 14px 16px / 0 stretch;image-rendering:pixelated;filter:drop-shadow(0 3px 0 var(--edge))}
.report__platform label:hover span{border-image-source:url(kit/button_hover.png?v=eff157924a)}
.report__platform input:checked+span{border-image:url(kit/play_normal.png?v=f05d0ce897) 10 12 fill / 16px 20px / 0 stretch;color:var(--ink)}
.report__platform input:focus-visible+span{outline:3px solid var(--amber-hi);outline-offset:2px}
.field{display:flex;flex-direction:column}
.field input,.field textarea{width:100%;background:#100c0a;color:var(--text);border:2px solid #4a3725;padding:12px 14px;font:17px/1.45 var(--sans);resize:vertical;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus{border-color:var(--amber);outline:none;box-shadow:0 0 0 3px rgba(233,166,74,.18)}
.field textarea{min-height:120px}
.field__hint{align-self:flex-end;color:var(--dim);margin-top:6px;font-size:14px}
.report__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.drop{display:flex;align-items:center;justify-content:center;min-height:96px;border:2px dashed var(--brass);background:#120e0b;color:var(--muted);text-align:center;padding:14px;cursor:pointer;transition:border-color .2s,background .2s}
.drop.is-over,.drop:hover{border-color:var(--amber-hi);color:var(--text);background:#1d150f}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.drop u{color:var(--amber-hi)}
.shots-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.shots-list li{position:relative;width:180px;border:3px solid var(--edge);box-shadow:inset 0 0 0 2px var(--brass);padding:4px;background:var(--edge);animation:pop .3s var(--ease)}
.shots-list img{width:100%;height:110px;object-fit:cover}
.shots-list button{position:absolute;top:-10px;right:-10px;width:32px;height:32px;border:2px solid var(--edge);background:var(--amber);color:var(--ink);font:24px/1 var(--compact);cursor:pointer;box-shadow:0 3px 0 var(--edge)}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:12px;align-items:flex-start;color:var(--text);font-size:16px;cursor:pointer}
.consent input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--amber);flex:none}
.account [hidden]{display:none!important}
.account__links{margin:0;display:flex;flex-wrap:wrap;gap:18px}
.linklike{background:none;border:0;padding:0;color:var(--amber-hi);font:inherit;text-decoration:underline;cursor:pointer}
.account__consent{max-height:280px;overflow:auto;padding:12px 14px;background:#100c0a;border:2px solid #4a3725;white-space:pre-line;font-size:14.5px;color:var(--muted)}
.account__profile h2{font:45px/1.1 var(--pixel);color:var(--amber-hi);margin:0}
.account__facts{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px}
.account__facts dt{color:var(--muted);font:24px/1.1 var(--compact);-webkit-font-smoothing:none}
.account__facts dd{margin:0;font-size:18px}
.account__actions{display:flex;flex-wrap:wrap;gap:14px}
.report__error{margin:0;padding:12px 14px;border:2px solid #8a3a2a;background:#2a1410;color:#f2b3a3}
.report__form .btn{align-self:flex-start}
.report__note{color:var(--dim);font-size:15px;margin-top:22px}
/* The privacy page (Site/content/privacy.template.html): moved here so the site needs no inline styles (CSP). */
.doc .edition{color:var(--muted);font:24px/1 var(--compact);margin:16px 0 28px;-webkit-font-smoothing:none}
.doc h2{font:30px/1.2 var(--pixel);color:var(--amber-hi);margin:34px 0 10px}
.doc p{margin:10px 0;color:var(--text)}
.doc .site-note{border:2px solid transparent;border-image:url(kit/card_frame.png?v=be64d5c78b) 6 fill / 18px / 0 stretch;image-rendering:pixelated;padding:16px 20px;color:var(--muted)}
.doc .site-note h2{margin-top:6px}
/* ---- The 404 page. */
.lost{min-height:calc(100dvh - 160px);display:grid;place-items:center;text-align:center;padding:48px var(--gutter)}
.lost__inner{max-width:560px;display:flex;flex-direction:column;align-items:center}
.lost .campfire{margin:0 0 10px}
.lost h1{font:75px/1 var(--pixel);color:var(--amber-hi);text-shadow:5px 5px 0 var(--edge)}
.lost h2{font:30px/1.2 var(--pixel);color:#f4e9d3;margin:18px 0 0}
.lost p{color:var(--muted);margin:14px 0 28px}
@media (max-width:768px){
  .report h1,.doc h1{font-size:30px}
  .doc h2{font-size:30px}
  .report__form,.report__done{padding:20px 18px 22px;border-image-width:16px}
  .report__row{grid-template-columns:1fr}
  .report__form .btn,.report__done .btn{align-self:stretch}
  .shots-list li{width:calc(50% - 6px)}
  .lost h1{font-size:60px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .io .reveal,.feed.is-waiting .card{opacity:1!important;transform:none!important}
  .io .section-head.reveal .section-head__rule{transform:none!important}
  .embers,.glow{display:none!important}
}