/* Bump ?v= when you replace the font file so the browser fetches the new one (font cache is very sticky) */
@font-face {
font-family: 'Myfont';
src: url('../images/Myfont-Regular.ttf?v=2') format('truetype');
font-weight: normal;
font-style: normal;
}
html, body{
overflow: hidden !important;
scrollbar-width: none !important; /* Firefox */
}
html::-webkit-scrollbar, body::-webkit-scrollbar{
display: none !important; /* Chrome/Safari/Edge */
}
:root {
/* --bug-animation-duration: 30s; */
--custom-dark-gray: #3e3d3d; /* single source of truth for dark gray */
--onyx: #303638ff;
--jonquil: #f0c808ff;
--field-drab: rgba(204, 115, 27, 0.801);
--viridian: #469374ff;
--purpureus: #9341b3ff;
--french-rose: #e3427dff;
--persian-orange: #e68653ff;
--vanilla: #ebe0b0ff;
--cream: #edfbbaff;
/* Dot colors: single source for A-mode links, keyhole links, proxies, and panel */
--dot-m0: rgba(253, 241, 103, 0.881);
--dot-m0b: rgba(38, 69, 94, 0.87);
--dot-m1: rgba(181, 93, 178, 0.765);
--dot-m2: hsla(42, 39%, 38%, 0.794);
--dot-m3: rgba(38, 144, 86, 0.728);
--dot-m4: rgba(192, 82, 48, 0.756);
--dot-m5: rgba(113, 140, 173, 0.8);
--dot-m6: rgba(30, 84, 64, 0.848);
--dot-m7: rgba(11, 54, 66, 0.758);
/* Man dot colors: shared nodes inherit from their cat counterpart */
--dot-c-krevet: var(--dot-m0);
--dot-c-teleskop: var(--dot-m1);
--dot-c-pipaot: var(--dot-m2);
--dot-c-pipazat: var(--dot-m2);
--dot-c-sint: var(--dot-m4);
--dot-c-komp: var(--dot-m5);
/* Each man pose matches the cat/moth lok it physically shares (crossMap). */
--dot-c-prozor: var(--dot-m7); /* lok7 */
--dot-c-gledasliku: rgba(200, 160, 80, 0.8); /* lok8 */
--dot-c-sjedi: var(--dot-m5); /* lok-sjedi */
--dot-c-sjedix: var(--dot-m5); /* lok-sjedix */
--dot-c-vani: rgba(100, 180, 130, 0.8); /* outside — no cat/moth lok */
}
.preload-img{
visibility: hidden !important;
}
/* base.blade: moth HUD icons — fetch only, no layout */
.asset-preload {
display: none;
}
body{
margin: 0 !important;
background-color: var(--custom-dark-gray);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Center horizontally, pin to top with breathing room */
min-height: 100dvh;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 1.5vh;
}
.container .m{
display: none;
z-index: 80003;
}
.blocker{
background-color: transparent !important;
}
/* Game surface should never show a text caret anywhere inside the main container/overlays */
.container,
.container *{
caret-color: transparent;
}
/* Cat A-mode nav anchors — one hit disc (15.5×14.5%), transparent; positions from PERCH_POS */
.container a.m0:not(.keyholdlink),
.container a.m0b:not(.keyholdlink),
.container a.m1:not(.keyholdlink),
.container a.m2:not(.keyholdlink),
.container a.m3:not(.keyholdlink),
.container a.m4:not(.keyholdlink),
.container a.m5:not(.keyholdlink),
.container a.m6:not(.keyholdlink),
.container a.m7:not(.keyholdlink) {
display: block;
background-color: transparent !important;
border-radius: 100%;
height: 14.5%;
width: 15.5%;
transform: translate(-50%, -50%);
box-sizing: border-box;
z-index: 80006;
}
.container a.m0:not(.keyholdlink) { top: var(--perch-lok0-top); left: var(--perch-lok0-left); }
.container a.m0b:not(.keyholdlink) { top: var(--perch-lok0b-top); left: var(--perch-lok0b-left); }
.container a.m1:not(.keyholdlink) { top: var(--perch-lok1-top); left: var(--perch-lok1-left); }
.container a.m2:not(.keyholdlink) { top: var(--perch-lok2-top); left: var(--perch-lok2-left); }
.container a.m3:not(.keyholdlink) { top: var(--perch-lok3-top); left: var(--perch-lok3-left); }
.container a.m4:not(.keyholdlink) { top: var(--perch-lok4-top); left: var(--perch-lok4-left); }
.container a.m5:not(.keyholdlink) { top: var(--perch-lok5-top); left: var(--perch-lok5-left); }
.container a.m6:not(.keyholdlink) { top: var(--perch-lok6-top); left: var(--perch-lok6-left); }
.container a.m7:not(.keyholdlink) { top: var(--perch-lok7-top); left: var(--perch-lok7-left); }
.container .keyholdlink{
border-radius: 0;
color: red;
z-index: 7999999;
border: 1px solid rgba(255, 0, 0, 0.4) !important;
background-color: transparent !important;
}
/* B-mode keyholdlink discs: shared geometry (fully transparent bg omitted) */
.container .t0m0,
.container .t0m0b,
.container .t0m3,
.container .t0bm0,
.container .t0bm1,
.container .t0bm3,
.container .t1m2,
.container .t1m7,
.container .t2m3,
.container .t2m0,
.container .t2bm3,
.container .t2bm0,
.container .t3m1,
.container .t3m4,
.container .t4m5,
.container .t4m5b,
.container .t4bm5,
.container .t4m7,
.container .t4bm7,
.container .t5m0,
.container .t5m0b,
.container .t5m6,
.container .t6m0,
.container .t6m4,
.container .t6bm4,
.container .t62m4,
.container .t62m0,
.container .t7m5 {
display: none;
background-color: transparent;
border-radius: 100%;
height: 14.5%;
width: 15.5%;
transform: translate(-50%, -50%);
z-index: 7999999;
}
/* Historically no translate on this slot — keep hitbox top-left anchored */
.container .t0m0b {
transform: none;
}
/* B-mode keyhold link positions — driven by KEYHOLD_POS in moth-new.js
via applyPerchCoordsToCssVars(). Edit ONLY there. */
.container .t0m0 { top: var(--kh-t0m0-top); left: var(--kh-t0m0-left); }
.container .t0m0b { top: var(--kh-t0m0b-top); left: var(--kh-t0m0b-left); }
.container .t0m3 { top: var(--kh-t0m3-top); left: var(--kh-t0m3-left); }
.container .t0bm0 { top: var(--kh-t0bm0-top); left: var(--kh-t0bm0-left); }
.container .t0bm1 { top: var(--kh-t0bm1-top); left: var(--kh-t0bm1-left); }
.container .t0bm3 { top: var(--kh-t0bm3-top); left: var(--kh-t0bm3-left); }
.container .t1m2 { top: var(--kh-t1m2-top); left: var(--kh-t1m2-left); }
.container .t1m7 { top: var(--kh-t1m7-top); left: var(--kh-t1m7-left); }
.container .t2m3 { top: var(--kh-t2m3-top); left: var(--kh-t2m3-left); }
.container .t2m0 { top: var(--kh-t2m0-top); left: var(--kh-t2m0-left); }
.container .t2bm3 { top: var(--kh-t2bm3-top); left: var(--kh-t2bm3-left); }
.container .t2bm0 { top: var(--kh-t2bm0-top); left: var(--kh-t2bm0-left); }
.container .t3m1 { top: var(--kh-t3m1-top); left: var(--kh-t3m1-left); }
.container .t3m4 { top: var(--kh-t3m4-top); left: var(--kh-t3m4-left); }
.container .t4m5 { top: var(--kh-t4m5-top); left: var(--kh-t4m5-left); }
.container .t4m5b { top: var(--kh-t4m5b-top); left: var(--kh-t4m5b-left); }
.container .t4bm5 { top: var(--kh-t4bm5-top); left: var(--kh-t4bm5-left); }
.container .t4m7 { top: var(--kh-t4m7-top); left: var(--kh-t4m7-left); }
.container .t4bm7 { top: var(--kh-t4bm7-top); left: var(--kh-t4bm7-left); }
.container .t5m0 { top: var(--kh-t5m0-top); left: var(--kh-t5m0-left); }
.container .t5m0b { top: var(--kh-t5m0b-top); left: var(--kh-t5m0b-left); }
.container .t5m6 { top: var(--kh-t5m6-top); left: var(--kh-t5m6-left); }
.container .t6m0 { top: var(--kh-t6m0-top); left: var(--kh-t6m0-left); }
.container .t6m4 { top: var(--kh-t6m4-top); left: var(--kh-t6m4-left); }
.container .t6bm4 { top: var(--kh-t6bm4-top); left: var(--kh-t6bm4-left); }
.container .t62m4 { top: var(--kh-t62m4-top); left: var(--kh-t62m4-left); }
.container .t62m0 { top: var(--kh-t62m0-top); left: var(--kh-t62m0-left); }
.container .t7m5 { top: var(--kh-t7m5-top); left: var(--kh-t7m5-left); }
.container .d11{
display: block;
background-color: rgba(38, 39, 40, 0);
border-radius: 100%;
height: 13%;
top: 29%;
left: 43%;
width: 15%;
z-index: 80005;
}
/* a18: a19 link hit-area (same geometry as old .d11), but with a gray dot */
.container .dd12{
display: block;
background-color: rgba(68,67,67, 0) !important; /* invisible clickable area 444343 */
border: none !important;
outline: none !important;
-webkit-tap-highlight-color: transparent;
border-radius: 100%;
height: 13%;
top: 29%;
left: 43%;
width: 15%;
z-index: 80005;
}
.container .dd12:focus{ outline: none !important; }
.container .d12{
display: block;
background-color: rgba(10, 15, 26, .0);
border-radius: 100%;
height: 82%;
top: 69%;
left: 48%;
width: 19%;
z-index: 80004;
}
.container .d13{
display: block;
background-color: rgba(10, 15, 26, .0);
border-radius: 100%;
height: 82%;
top: -66%;
left: 1%;
width: 100%;
z-index: 80004;
}
.container .d10{
display: block;
background-color: rgba(10, 15, 26, .0);
border-radius: 100%;
height: 19%;
top: 69%;
left: 82%;
width: 19%;
z-index: 80004;
}
.container .c{
display: block !important;
background-color: rgba(10, 15, 26, 0);
border-radius: 100%;
height: 14.5%;
width: 15.5%;
transform: translate(-50%, -50%);
z-index: 100000;
}
/* Full-screen boot overlay: text + two pulsing dots (jQuery hides #loader when ready). */
#loader {
position: fixed;
inset: 0;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
background: var(--custom-dark-gray);
color: #fff;
font: clamp(1.1rem, 5vmin, 2.2rem) system-ui, sans-serif;
user-select: none;
outline: none;
}
.loader-text { margin: 0; white-space: nowrap; }
.loader-dots span { animation: loader-dot-pulse 0.85s ease-in-out infinite; opacity: 0.2; }
.loader-dots span + span { animation-delay: 0.18s; }
@keyframes loader-dot-pulse { 45% { opacity: 1; } }
/* Keyhole / B-mode perspective images: hidden until JS fadeIn (do NOT leave a dangling comma — it would merge with the next rule and hide these always). */
.key-hold-img{
z-index: 80007;
display: none;
}
/* While todo overlay is open, hide/disable keyhold links */
body.todo-open .keyholdlink{
visibility: hidden !important;
pointer-events: none !important;
}
/* Todo overlay above the B-mode lok6 see-paper hitbox (JS gives .lok6-btn a huge z-index). */
body.todo-open .todo-closeup-wrap {
z-index: 899999990030;
}
/* See-paper ellipse: hidden while note overlay is open (puzzle btn uses the same a/b slot). */
body.todo-open .container .lok6-btn {
visibility: hidden !important;
pointer-events: none !important;
}
.key-hold-img .govno{
z-index: 80007;
display: block !important;
}
.key-hold-img .teleskopImages{
z-index: 80007;
display: block !important;
}
.key-hold-img .wall-image-hold{
z-index: 80007;
display: block !important;
}
/* ── Walk puzzle fail toast (#g5-fail-msg) ──────────────────────────────────
Overlaid on the room image when a puzzle ends in a backend fail
(premature / dead-end). Sits above room imgs (80007) and moth GIFs (80009).
Shown/hidden by adding/removing .g5-msg-visible via game.js. */
#g5-fail-msg {
position: absolute;
bottom: 14%;
left: 50%;
transform: translateX(-50%);
z-index: 80020;
background: rgba(14, 7, 3, 0.86);
color: #f0d8be;
font-family: monospace;
font-size: clamp(10px, 2cqw, 15px);
line-height: 1.55;
padding: 0.55em 1.2em;
border-radius: 5px;
border: 1px solid rgba(210, 100, 40, 0.45);
text-align: center;
white-space: pre-wrap;
max-width: 80%;
pointer-events: none;
opacity: 0;
transition: opacity 0.35s ease;
}
#g5-fail-msg.g5-msg-visible {
opacity: 1;
}
/* Forbidden-node variant: larger, more prominent, centred vertically. */
#g5-fail-msg.g5-msg-blocked {
bottom: auto;
top: 50%;
transform: translate(-50%, -50%);
font-size: clamp(13px, 3cqw, 20px);
padding: 0.8em 1.6em;
background: rgba(0, 0, 0, 0.92);
border-color: rgba(255, 80, 20, 0.6);
letter-spacing: 0.04em;
}
/* Moth GIFs — hidden by default; JS calls fadeIn() to activate one at a time (C-mode encounter). */
.key-hold-moth1, .key-hold-moth2, .key-hold-moth3,
.key-hold-moth4, .key-hold-moth5 {
display: none;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
z-index: 80009;
pointer-events: none;
}
/* Moth shared (body.moth-shared): cat and moth at same lok in B-mode — click the moth to trigger encounter.
Moth is pushed 7% below center and displayed at double size (both set via distantMothCombos top: 57%). */
body.moth-shared .container [data-role="bug"] {
pointer-events: auto !important;
cursor: url('../images/cursor/cursormove.png'), move;
}
body.moth-shared .container [data-role="bug"]::before,
body.moth-shared .container [data-role="bug"]::after {
width: 4.08cqw; /* 2 × 2.04 (+20%) */
height: 12.96cqw; /* 2 × 6.48 (+20%) */
top: -6.24cqw; /* 2 × -3.12 (+20%) */
}
/* Clickable target injected by moth-new.js when moth and cat share a location in B-mode.
Geometry (position/size/transform/z-index) is set via inline style in JS — only visuals here. */
#moth-shared-target {
cursor: url('../images/cursor/cursormove.png'), move;
border-radius: 50%;
border: 2px solid rgba(200, 180, 120, 0.55);
background: radial-gradient(circle, rgba(220, 190, 100, 0.18) 0%, rgba(220, 190, 100, 0.04) 60%, transparent 100%);
box-shadow: 0 0 0 0 rgba(220, 190, 100, 0.5);
animation: moth-shared-pulse 1.8s ease-in-out infinite;
pointer-events: auto;
}
#moth-shared-target:hover {
border-color: rgba(220, 190, 100, 0.9);
background: radial-gradient(circle, rgba(220, 190, 100, 0.30) 0%, rgba(220, 190, 100, 0.08) 60%, transparent 100%);
}
@keyframes moth-shared-pulse {
0% { box-shadow: 0 0 0 0 rgba(220, 190, 100, 0.55); }
60% { box-shadow: 0 0 0 18px rgba(220, 190, 100, 0); }
100% { box-shadow: 0 0 0 0 rgba(220, 190, 100, 0); }
}
/* Moth encounter (body.moth-encounter, set by moth-new.js on click while shared in B mode) */
body.moth-encounter .container [data-role="bug"] {
opacity: 0 !important;
pointer-events: none !important;
}
/* Zaklon: no global z-index (old value was invalid / huge). Stacking: room .key-hold-img 80007;
zaklon img 80007–80008; moth GIF .key-hold-moth* 80009; radial cone .container::before 80010. */
/* Rare: zaklon nested inside a key-hold img */
.key-hold-img .zaklon{
z-index: 80007;
display: block !important;
}
/* Zaklon on its own img.key-hold-img (sibling of room) */
img.key-hold-img.zaklon{
z-index: 80007;
}
/* When zaklon appears *before* the room in DOM, lift above room (80007) but stay under moth GIF (80009) */
img.key-hold-img.zaklon.higher-z-index{
z-index: 80008;
}
.key-hold-img .blink{
z-index: 1;
display: block !important;
}
.container a {
display: block;
position: absolute;
background-color: transparent;
height: 8%;
top: -1%;
left: 37%;
width: 8%;
/* Mobile: prevent default blue tap highlight / active flash */
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
}
.container a:active,
.container a:focus{
background-color: transparent !important;
outline: none !important;
}
.container a:after {
content: "m";
font-size: 0;
background-color: skyblue;
width: 8cqw;
height: 8cqw;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: inline-block;
border-radius: 100%;
z-index: 10;
opacity: 0;
transition: opacity 0.2s ease;
}
/* ── Player-mode nav dots (cat / man / moth) — synced from game-mode.js ─── */
body.gm-cat-player .container a.m0:not(.keyholdlink)::after,
body.gm-cat-player .container a.m0b:not(.keyholdlink)::after,
body.gm-cat-player .container a.m1:not(.keyholdlink)::after,
body.gm-cat-player .container a.m2:not(.keyholdlink)::after,
body.gm-cat-player .container a.m3:not(.keyholdlink)::after,
body.gm-cat-player .container a.m4:not(.keyholdlink)::after,
body.gm-cat-player .container a.m5:not(.keyholdlink)::after,
body.gm-cat-player .container a.m6:not(.keyholdlink)::after,
body.gm-cat-player .container a.m7:not(.keyholdlink)::after,
body.gm-man-player .container a.c::after,
body.gm-play-moth #moth-play-layer .moth-play-target::after {
opacity: 0.65;
}
body.gm-cat-player .container a.m0:not(.keyholdlink):hover::after,
body.gm-cat-player .container a.m0b:not(.keyholdlink):hover::after,
body.gm-cat-player .container a.m1:not(.keyholdlink):hover::after,
body.gm-cat-player .container a.m2:not(.keyholdlink):hover::after,
body.gm-cat-player .container a.m3:not(.keyholdlink):hover::after,
body.gm-cat-player .container a.m4:not(.keyholdlink):hover::after,
body.gm-cat-player .container a.m5:not(.keyholdlink):hover::after,
body.gm-cat-player .container a.m6:not(.keyholdlink):hover::after,
body.gm-cat-player .container a.m7:not(.keyholdlink):hover::after,
body.gm-man-player .container a.c:hover::after,
body.gm-play-moth #moth-play-layer .moth-play-target:hover::after {
opacity: 0.65;
}
/* Shared spot: node-split keeps one dot visible and hides the stacked
duplicates (behaviour still handled by the split overlay). */
.container a.nsplit-dot-hidden::after,
#moth-play-layer .moth-play-target.nsplit-dot-hidden::after {
opacity: 0 !important;
}
/* While a graph game (Node Collector / Tri-Graph) is running, the .game-proxy
layer owns the dots. Hide the player-mode nav dots so they don't double up
on top of the proxies at the same perch coordinates. */
body.g5-graph-interlude .container a:not(.keyholdlink)::after,
body.g5-graph-interlude #moth-play-layer .moth-play-target::after {
opacity: 0 !important;
}
/* ── Game proxies — shared dot layer (all games; A-mode only) ─────────────── */
.game-proxy {
position: absolute;
width: 8cqw;
height: 8cqw;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 80015;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
}
.game-proxy.game-lit {
opacity: 1;
}
/* Fail / quit: uncollected participating dots shrink to 0 (JS adds .game-proxy-shrink). */
@keyframes game-proxy-shrink {
from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
to { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}
.game-proxy.game-proxy-shrink {
animation: game-proxy-shrink 3s ease forwards !important;
pointer-events: none !important;
}
/* Game 1 — human claimed correlating shared spot (last-wins on that pair) */
.game-proxy.game-lit.game-ter-h {
box-shadow: 0 0 0 4px #000, 0 0 0 7px rgba(91, 200, 245, 0.4);
filter: saturate(1.08) brightness(1.06);
}
/* Walk Lab / walk puzzle — end node: the dot itself pulses 10%↔90% (no stacked overlay). */
@keyframes game-end-node-pulse {
0%, 100% { opacity: 0.9; }
50% { opacity: 0.1; }
}
.game-proxy.game-lit.game-walk-dest {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55);
filter: none !important;
transition: none;
animation: game-end-node-pulse 2s ease-in-out infinite;
border: 2px solid rgba(255, 255, 255, 0.92);
box-sizing: border-box;
}
/* B mode: pulse the keyhold dot (::after), not a second ::before layer on top. */
body[data-mode="b"] .container a.keyholdlink.game-walk-dest-kh[class*="m0b"] { color: var(--dot-m0b); }
body[data-mode="b"] .container a.keyholdlink.game-walk-dest-kh[class*="m0"]:not([class*="m0b"]) { color: var(--dot-m0); }
body[data-mode="b"] .container a.keyholdlink.game-walk-dest-kh[class*="m1"] { color: var(--dot-m1); }
body[data-mode="b"] .container a.keyholdlink.game-walk-dest-kh[class*="m2"] { color: var(--dot-m2); }
body[data-mode="b"] .container a.keyholdlink.game-walk-dest-kh[class*="m3"] { color: var(--dot-m3); }
body[data-mode="b"] .container a.keyholdlink.game-walk-dest-kh[class*="m4"] { color: var(--dot-m4); }
body[data-mode="b"] .container a.keyholdlink.game-walk-dest-kh[class*="m5"] { color: var(--dot-m5); }
body[data-mode="b"] .container a.keyholdlink.game-walk-dest-kh[class*="m6"] { color: var(--dot-m6); }
body[data-mode="b"] .container a.keyholdlink.game-walk-dest-kh[class*="m7"] { color: var(--dot-m7); }
body[data-mode="b"] .container a.keyholdlink.game-walk-dest-kh::after {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55);
transition: none;
animation: game-end-node-pulse 2s ease-in-out infinite;
border: 2px solid rgba(255, 255, 255, 0.92);
box-sizing: border-box;
}
/* Walk game — step satisfied (must beat .game-lit / .game-walk-dest; no transition ghost) */
.game-proxy.game-collected {
display: none !important;
opacity: 0 !important;
box-shadow: none !important;
filter: none !important;
transition: none !important;
}
/* Walk-all-nodes mode: only unlinked lit proxies capture clicks (moth toll) */
body.gm-walk-all-nodes.g5-walk-active:not(.gm-disable-all-nodes) .game-proxy.game-lit.walk-all-toll:not(.game-collected) {
pointer-events: auto;
cursor: url('../images/cursor/cursormove.png'), move;
}
body.gm-walk-all-nodes.gman-active:not(.gm-disable-all-nodes) .game-proxy.game-lit.walk-all-toll:not(.game-collected) {
pointer-events: auto;
cursor: url('../images/cursor/cursorman.png'), move;
}
body.gm-walk-all-nodes.g5-walk-active:not(.gm-disable-all-nodes) .game-proxy.game-lit.walk-all-toll:not(.game-collected):hover {
cursor: url('../images/cursor/cursormove.png'), move !important;
}
body.gm-walk-all-nodes.gman-active:not(.gm-disable-all-nodes) .game-proxy.game-lit.walk-all-toll:not(.game-collected):hover {
cursor: url('../images/cursor/cursorman.png'), move !important;
}
@keyframes walk-all-toll-shock {
0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); filter: none; }
8% { transform: translate(calc(-50% + 6px), calc(-50% - 5px)) scale(1.14) rotate(-9deg); filter: brightness(1.35) saturate(1.25); }
16% { transform: translate(calc(-50% - 7px), calc(-50% + 4px)) scale(0.9) rotate(8deg); filter: brightness(1.2); }
24% { transform: translate(calc(-50% + 5px), calc(-50% + 6px)) scale(1.1) rotate(-7deg); filter: brightness(1.3); }
32% { transform: translate(calc(-50% - 4px), calc(-50% - 3px)) scale(0.94) rotate(6deg); }
42% { transform: translate(calc(-50% + 3px), calc(-50% + 2px)) scale(1.05) rotate(-4deg); }
54% { transform: translate(calc(-50% - 2px), calc(-50% - 2px)) scale(0.98) rotate(3deg); }
68% { transform: translate(calc(-50% + 1px), calc(-50% + 1px)) scale(1.02) rotate(-1deg); }
82% { transform: translate(-50%, -50%) scale(1) rotate(0deg); filter: none; }
}
.game-proxy.walk-all-shock,
.container a.walk-all-shock {
animation: walk-all-toll-shock 0.48s ease-out;
will-change: transform, filter;
}
/* Walk game — links for nodes not in the current walk; hidden in both A and B mode */
a.game-walk-hidden,
body[data-mode="b"] a.game-walk-hidden,
body[data-mode="b"] .container a.keyholdlink.game-walk-hidden {
display: none !important;
pointer-events: none !important;
opacity: 0 !important;
}
body[data-mode="b"] .container a.keyholdlink.game-walk-hidden:after {
opacity: 0 !important;
display: none !important;
}
/* Color Mixer — excluded nodes: hide cat/man links and moth play targets. */
a.mix-node-hidden,
body[data-mode="b"] a.mix-node-hidden,
.moth-play-target.mix-node-hidden {
display: none !important;
pointer-events: none !important;
opacity: 0 !important;
}
/* Game Mode — hide all navigation nodes (visual only; valid hotspots stay clickable).
B-mode: cat keyhold links only — same contract as normal keyhole view. */
body.gm-hide-all-nodes:not([data-mode="b"]) .container a[data-routable="true"]:not(.first-links),
body.gm-hide-all-nodes:not([data-mode="b"]) #moth-play-layer .moth-play-target,
body.gm-hide-all-nodes[data-mode="b"] .container a.keyholdlink,
body.gm-hide-all-nodes .game-proxy,
body.gm-hide-all-nodes .nsplit-overlay:not(.nsplit-open) {
opacity: 0 !important;
}
body.gm-hide-all-nodes:not(.gm-disable-all-nodes) .nsplit-overlay.nsplit-open {
opacity: 1 !important;
}
body.gm-hide-all-nodes:not([data-mode="b"]) .container a[data-routable="true"]:not(.first-links):after,
body.gm-hide-all-nodes[data-mode="b"] .container a.keyholdlink:after {
opacity: 0 !important;
}
/* Disable — block mouse + auto (JS); keep invisible via hide class above. */
body.gm-disable-all-nodes .container a[data-routable="true"]:not(.first-links),
body.gm-disable-all-nodes #moth-play-layer .moth-play-target,
body.gm-disable-all-nodes .game-proxy,
body.gm-disable-all-nodes .nsplit-overlay {
pointer-events: none !important;
visibility: hidden !important;
}
/* B-mode (first-person keyhole) hides the whole graph board — dots included —
for EVERY variant, mirroring how room links hide. (The mix variant used to
override this and keep dots at 0.5/0.7; removed so B-mode is uniform.) */
body[data-mode="b"] .game-proxy {
opacity: 0 !important;
pointer-events: none !important;
}
/* ── Repeat-visit split dot ───────────────────────────────────────────────────
.game-repeat: full circle + vertical divider until first collection.
.game-v1-done: left half removed (clip); only right semicircle remains — no dim overlay. */
.game-proxy.game-repeat {
overflow: hidden;
}
/* Vertical divider (only while both halves still “active”) */
.game-proxy.game-repeat::after {
content: '';
position: absolute;
top: 0; bottom: 0;
left: calc(50% - 1px);
width: 2px;
background: rgba(0, 0, 0, 0.55);
pointer-events: none;
z-index: 1;
}
/* First collection done: hide divider; clip to right half only */
.game-proxy.game-repeat.game-v1-done {
clip-path: inset(0 0 0 50%);
}
.game-proxy.game-repeat.game-v1-done::after {
opacity: 0;
}
.game-proxy.game-repeat.game-v1-done::before {
display: none;
}
/* Proxy positions — all driven by PERCH_POS via applyPerchCoordsToCssVars(). */
.game-proxy[data-node="lok0"] { top: var(--perch-lok0-top); left: var(--perch-lok0-left); background-color: var(--dot-m0); color: var(--dot-m0); }
.game-proxy[data-node="lok0b"] { top: var(--perch-lok0b-top); left: var(--perch-lok0b-left); background-color: var(--dot-m0b); color: var(--dot-m0b); }
.game-proxy[data-node="lok1"] { top: var(--perch-lok1-top); left: var(--perch-lok1-left); background-color: var(--dot-m1); color: var(--dot-m1); }
.game-proxy[data-node="lok2"] { top: var(--perch-lok2-top); left: var(--perch-lok2-left); background-color: var(--dot-m2); color: var(--dot-m2); }
.game-proxy[data-node="lok3"] { top: var(--perch-lok3-top); left: var(--perch-lok3-left); background-color: var(--dot-m3); color: var(--dot-m3); }
.game-proxy[data-node="lok4"] { top: var(--perch-lok4-top); left: var(--perch-lok4-left); background-color: var(--dot-m4); color: var(--dot-m4); }
.game-proxy[data-node="lok5"] { top: var(--perch-lok5-top); left: var(--perch-lok5-left); background-color: var(--dot-m5); color: var(--dot-m5); }
.game-proxy[data-node="lok6"] { top: var(--perch-lok6-top); left: var(--perch-lok6-left); background-color: var(--dot-m6); color: var(--dot-m6); }
.game-proxy[data-node="lok7"] { top: var(--perch-lok7-top); left: var(--perch-lok7-left); background-color: var(--dot-m7); color: var(--dot-m7); }
.game-proxy[data-node="lok-sjedi"] { top: var(--perch-lok-sjedi-top); left: var(--perch-lok-sjedi-left); background-color: var(--dot-m5); color: var(--dot-m5); }
.game-proxy[data-node="lok-sjedix"] { top: var(--perch-lok-sjedix-top); left: var(--perch-lok-sjedix-left); background-color: var(--dot-m5); color: var(--dot-m5); }
.game-proxy[data-node="lok8"] { top: var(--perch-lok8-top); left: var(--perch-lok8-left); background-color: var(--dot-c-gledasliku); color: var(--dot-c-gledasliku); }
/* Man-graph proxy positions (data-graph="man") */
.game-proxy[data-graph="man"][data-node="krevet"] { top: var(--man-krevet-top); left: var(--man-krevet-left); }
.game-proxy[data-graph="man"][data-node="teleskop"] { top: var(--man-teleskop-top); left: var(--man-teleskop-left); }
.game-proxy[data-graph="man"][data-node="pipaot"] { top: var(--man-pipaot-top); left: var(--man-pipaot-left); }
.game-proxy[data-graph="man"][data-node="pipazat"] { top: var(--man-pipazat-top); left: var(--man-pipazat-left); }
.game-proxy[data-graph="man"][data-node="sint"] { top: var(--man-sint-top); left: var(--man-sint-left); }
.game-proxy[data-graph="man"][data-node="komp"] { top: var(--man-komp-top); left: var(--man-komp-left); }
.game-proxy[data-graph="man"][data-node="prozor"] { top: var(--man-prozor-top); left: var(--man-prozor-left); }
.game-proxy[data-graph="man"][data-node="sjedi"] { top: var(--man-sjedi-top); left: var(--man-sjedi-left); }
.game-proxy[data-graph="man"][data-node="sjedix"] { top: var(--man-sjedix-top); left: var(--man-sjedix-left); }
.game-proxy[data-graph="man"][data-node="gledasliku"] { top: var(--man-gledasliku-top); left: var(--man-gledasliku-left); }
.game-proxy[data-graph="man"][data-node="vani"] { top: var(--man-vani-top); left: var(--man-vani-left); }
/* Man-graph proxy colors — reuse the existing dot palette (per physical spot). */
.game-proxy[data-graph="man"][data-node="krevet"] { background-color: var(--dot-m0); }
.game-proxy[data-graph="man"][data-node="teleskop"] { background-color: var(--dot-m1); }
.game-proxy[data-graph="man"][data-node="pipaot"] { background-color: var(--dot-m2); }
.game-proxy[data-graph="man"][data-node="pipazat"] { background-color: var(--dot-m2); }
.game-proxy[data-graph="man"][data-node="sint"] { background-color: var(--dot-m4); }
.game-proxy[data-graph="man"][data-node="komp"] { background-color: var(--dot-m5); }
.game-proxy[data-graph="man"][data-node="prozor"] { background-color: var(--dot-c-prozor); }
.game-proxy[data-graph="man"][data-node="vani"] { background-color: var(--dot-m3); }
.game-proxy[data-graph="man"][data-node="sjedi"] { background-color: var(--dot-c-sjedi); }
.game-proxy[data-graph="man"][data-node="sjedix"] { background-color: var(--dot-c-sjedix); }
.game-proxy[data-graph="man"][data-node="gledasliku"] { background-color: var(--dot-c-gledasliku); }
/* ── Walk Lab panel (#g5-panel / #g5-list) ───────────────────────────────────── */
#g5-panel {
position: fixed; top: 8px; left: 8px; z-index: 999999999;
background: rgba(12,12,15,0.95); border: 1px solid #333; border-radius: 5px;
padding: 10px 10px 12px; font: 11px/1.5 "JetBrains Mono",monospace; color: #ccc;
pointer-events: auto; user-select: none; width: 279px;
max-height: calc(100vh - 20px); overflow-y: auto; box-sizing: border-box;
}
#g5-panel .g5-title { color: #c49a6c; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; }
#g5-panel .g5-close { position: absolute; top: 4px; right: 8px; color: #666; cursor: pointer; font-size: 14px; line-height: 1; }
#g5-panel .g5-close:hover { color: #fff; }
#g5-panel .g5-sep { border-top: 1px solid #2a2a2a; margin: 7px 0; }
#g5-panel .g5-row { display: flex; align-items: center; gap: 5px; margin: 3px 0; }
#g5-panel .g5-lbl { min-width: 52px; color: #888; font-size: 10px; flex-shrink: 0; }
#g5-panel .g5-row select,
#g5-panel .g5-row input[type=number] { background: #1a1a1e; color: #ccc; border: 1px solid #444; border-radius: 3px; font: 10px "JetBrains Mono",monospace; padding: 1px 4px; max-width: 200px; }
#g5-panel #g5-f-len,
#g5-panel #g5-a-len,
#g5-panel #g5-b-len { min-height: 44px; height: 44px; box-sizing: border-box; width: 68px; max-width: 90px; text-align: center; font: 600 17px/1.2 "JetBrains Mono",monospace; padding: 8px 10px; vertical-align: middle; }
#g5-panel #g5-f-len::-webkit-inner-spin-button,
#g5-panel #g5-a-len::-webkit-inner-spin-button,
#g5-panel #g5-b-len::-webkit-inner-spin-button { height: 38px; width: 28px; min-width: 24px; cursor: pointer; opacity: 1; margin: 2px; }
#g5-panel .g5-chk-row { display: flex; flex-wrap: wrap; gap: 3px 8px; margin: 3px 0; }
#g5-panel .g5-chk-row label { display: flex; align-items: center; gap: 3px; cursor: pointer; color: #aaa; font-size: 10px; }
#g5-panel .g5-subhead { color: #6b8f71; font-size: 10px; font-weight: 700; margin: 5px 0 2px; text-transform: uppercase; letter-spacing: .05em; }
#g5-panel .g5-leg { background: #111; border: 1px solid #222; padding: 5px 7px; border-radius: 3px; margin-bottom: 4px; }
#g5-panel .g5-btn { padding: 4px 14px; background: #c49a6c; color: #0c0c0f; border: none; border-radius: 3px; cursor: pointer; font: 700 11px "JetBrains Mono",monospace; margin-top: 5px; display: inline-block; }
#g5-panel .g5-btn:hover { opacity: .85; }
#g5-panel .g5-btn-sm { padding: 5px 13px; background: #1a1a1e; color: #ccc; border: 1px solid #444; border-radius: 3px; cursor: pointer; font: 12px "JetBrains Mono",monospace; }
#g5-panel .g5-btn-sm:hover { border-color: #c49a6c; color: #c49a6c; }
#g5-panel .g5-btn-play { background: #1a3a1a; color: #7dda7d; border-color: #3a7a3a; }
#g5-panel .g5-btn-play:hover { background: #264026; }
#g5-panel .g5-status { color: #666; font-size: 10px; margin: 4px 0; min-height: 14px; }
#g5-panel .g5-nav { display: flex; align-items: center; gap: 5px; margin: 6px 0 4px; flex-wrap: wrap; }
#g5-panel .g5-nav input[type=number] { width: 46px; text-align: center; background: #1a1a1e; color: #ccc; border: 1px solid #444; border-radius: 3px; font: 12px "JetBrains Mono",monospace; padding: 4px; }
#g5-panel .g5-playing { font-size: 10px; margin: 4px 0; color: #7dda7d; background: #0d1a0d; border: 1px solid #1a4a1a; padding: 4px 6px; border-radius: 3px; }
#g5-panel .g5-idx { color: #c49a6c; font-weight: 700; }
#g5-panel .g5-play-detail { margin-top: 5px; font-size: 10px; line-height: 1.35; color: #bbb; }
#g5-panel .g5-play-detail.g5-play-fail { color: #d8a0a0; }
#g5-panel .g5-dev-hint { margin-top: 5px; font-size: 9px; line-height: 1.35; color: #555; font-style: italic; }
#g5-list { max-height: 220px; overflow-y: auto; background: #0d0d10; border: 1px solid #222; border-radius: 3px; margin: 4px 0; display: none; position: relative; }
#g5-list .g5-li { padding: 2px 6px; cursor: pointer; font-size: 10px; color: #888; line-height: 1.6; word-break: break-all; border-bottom: 1px solid #161618; }
#g5-list .g5-li:last-child { border-bottom: none; }
#g5-list .g5-li:hover { background: #1a1a22; color: #ccc; }
#g5-list .g5-li.g5-li-sel { background: #1a1308; color: #c49a6c; }
#g5-list .g5-li-n { color: #444; margin-right: 5px; display: inline-block; min-width: 20px; text-align: right; }
#g5-list .g5-li-d { color: #c49a6c; font-weight: 700; margin-left: 4px; white-space: nowrap; }
#g5-list .g5-li-d .gw-stat { display: inline-block; font-size: 9px; font-weight: 600; margin-left: 3px; vertical-align: baseline; }
#g5-list .g5-li-d .gw-stat-v { color: #c4b06c; }
#g5-list .g5-li-d .gw-stat-e { color: #6c8fc4; }
#g5-list .g5-li-d .gw-stat-closed { color: #888; }
#g5-list .g5-li-d .gw-stat-df { color: #c49a6c; }
#g5-list .g5-li-d .gw-stat-dh { color: #8f7a5a; }
#g5-list .g5-li-d .gw-stat-sol { color: #6b8f71; }
#g5-list .g5-li-d .gw-stat-sol-line { color: #6b8f71; font-weight: 500; font-size: 8px; }
#g5-list .g5-li-d .gw-stat-h { color: #3db870; font-weight: 700; }
#g5-list .g5-li-d .gw-stat-rn,
#g5-list .g5-li-d .gw-stat-re { color: #c47a9a; font-weight: 500; }
#g5-list .g5-li-prev { color: #7a9a8a; font-weight: 600; font-size: 9px; margin-left: 3px; white-space: nowrap; }
#g5-list .g5-li-prev2 { color: #7a8a9a; font-weight: 600; font-size: 9px; margin-left: 3px; white-space: nowrap; }
#g5-list .g5-li-h { color: #8f7a5a; font-weight: 600; font-size: 9px; margin-left: 4px; }
#g5-list .g5-li-orders { padding: 2px 6px 4px 26px; border-top: 1px solid #1a1a1e; }
#g5-list .g5-li-order { font-size: 9px; color: #6b7a5a; line-height: 1.7; word-break: break-all; }
#g5-list .g5-li-order-n { color: #444; margin-right: 3px; }
#g5-list .g5-li-sel .g5-li-order { color: #8a9a6a; }
/* a18: specific link dot color override (do not affect global anchors) */
.container a.dd12:after{
background-color: rgba(170, 170, 170, 0.9) !important;
}
/* Do not render the blue button styling for wiki trigger; keep komp cursor */
.container a[data-wiki]{
background-color: transparent !important;
}
.container a[data-wiki]:after{
display: none !important;
}
/* Monitor trigger: same treatment as wiki (transparent, no blue dot, komp cursor).
Clickable hotspot mirrors the lok5 perch disc (same size/position as a.m5) — the
monitor/computer lives at lok5, so the hit area matches it. */
.container a[data-monitor]{
display: block !important;
background-color: transparent !important;
position: absolute;
height: 14.5%;
width: 15.5%;
top: var(--perch-lok5-top);
left: var(--perch-lok5-left);
transform: translate(-50%, -50%);
border-radius: 100%;
box-sizing: border-box;
z-index: 80006;
}
.container a[data-monitor]:after{
display: none !important;
}
/* ── Unified link visibility for cat / man / moth ─────────────────────────────
ALL links (cat .mX, man .c, moth play-targets) are visible only while the
GIF gate is open (body.auto-link-click-enabled) AND no moth flight is in
progress (body NOT .moth-flying). One shared condition for all three actors:
cat/man moves close the gate (navigation), moth moves raise .moth-flying —
either way every link hides until the transition finishes. Asymmetric:
- hide (gate closes / flight starts): INSTANT — no transition on the base
rule, so old links snap to opacity 0 the moment the class flips. Kills
the "all links flash for a frame" during Backbone's innerHTML swap.
- show (gate opens / flight ends): SMOOTH 0.25s fade-in, declared only in
the visible rule so it applies in the show direction only.
.first-links (start-screen anchors) are excluded — always visible. */
.container a:not(.first-links),
#moth-play-layer .moth-play-target {
opacity: 0;
pointer-events: none;
cursor: default;
}
body.auto-link-click-enabled:not(.moth-flying) .container a:not(.first-links),
body.auto-link-click-enabled:not(.moth-flying) #moth-play-layer .moth-play-target {
opacity: 1;
pointer-events: auto;
cursor: pointer;
transition: opacity 0.25s ease;
}
/* Game Mode — "1s fade in": nav dots/links are CSS-gated on opacity (base = 0,
gate-open = 1). This slows the gate-open transition to 1s so they fade in. */
body.gm-fade-in-1s.auto-link-click-enabled:not(.moth-flying) .container a:not(.first-links),
body.gm-fade-in-1s.auto-link-click-enabled:not(.moth-flying) #moth-play-layer .moth-play-target {
transition: opacity 1s ease !important;
}
/* Cat room-move links are only MOUSE-interactive when the cat is the player.
In auto / excluded / solo-other modes the auto-mover still drives them via a
programmatic jQuery click (pointer-events doesn't block scripted clicks), but
the human can't click them and no pointer cursor is shown. Mirrors the man
gate (body:not(.gm-man-player) a.c) — only here we keep the hotspot in place. */
body:not(.gm-cat-player) .container a.m0:not(.keyholdlink),
body:not(.gm-cat-player) .container a.m0b:not(.keyholdlink),
body:not(.gm-cat-player) .container a.m1:not(.keyholdlink),
body:not(.gm-cat-player) .container a.m2:not(.keyholdlink),
body:not(.gm-cat-player) .container a.m3:not(.keyholdlink),
body:not(.gm-cat-player) .container a.m4:not(.keyholdlink),
body:not(.gm-cat-player) .container a.m5:not(.keyholdlink),
body:not(.gm-cat-player) .container a.m6:not(.keyholdlink),
body:not(.gm-cat-player) .container a.m7:not(.keyholdlink),
body:not(.gm-cat-player) .container a.keyholdlink {
pointer-events: none !important;
cursor: default !important;
}
/* Hide-all (not disable): invisible nav hotspots stay mouse-clickable for VALID
links only — staff-disabled (.ot when window open), man-special-blocked,
forbidden, etc. must stay dead (see h44 prozor→h37). */
body.gm-hide-all-nodes:not(.gm-disable-all-nodes):not([data-mode="b"]).auto-link-click-enabled:not(.moth-flying) .container a[data-routable="true"]:not(.first-links):not(.disabled):not(.man-special-blocked):not(.forbidden):not(.forbiden):not(.forbidenwindow):not(.game-walk-hidden):not(.a18-link-hidden),
body.gm-hide-all-nodes:not(.gm-disable-all-nodes):not([data-mode="b"]).auto-link-click-enabled:not(.moth-flying) #moth-play-layer .moth-play-target:not([disabled]),
body.gm-hide-all-nodes:not(.gm-disable-all-nodes)[data-mode="b"].auto-link-click-enabled:not(.moth-flying) .container a.keyholdlink:not(.disabled),
body.gm-hide-all-nodes:not(.gm-disable-all-nodes) .nsplit-overlay:not(.nsplit-open) {
pointer-events: auto !important;
opacity: 0 !important;
}
body.gm-hide-all-nodes:not(.gm-disable-all-nodes) .nsplit-overlay.nsplit-open {
pointer-events: auto !important;
opacity: 1 !important;
}
body.gm-hide-all-nodes:not(.gm-disable-all-nodes):not([data-mode="b"]) .container a[data-routable="true"]:not(.first-links):after,
body.gm-hide-all-nodes:not(.gm-disable-all-nodes)[data-mode="b"] .container a.keyholdlink:after {
opacity: 0 !important;
}
/* a18: hide and disable a19 link until 4s after first body click (spacehum) */
.a18-link-hidden{
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Legacy showLink() adds .shown ~2s after each route. It must NOT re-enable
clicking — the gif gate (body.auto-link-click-enabled) is the sole authority
for pointer-events, opening at the page's real gifTime. Granting pointer-events
here let the human click at the 2s mark, before longer gifs finished. */
.container a.shown,
.container a.shown:after{
display: block;
}
div.container {
/*
* Responsive sizing — no zoom hacks, no fixed breakpoints.
* Portrait game canvas (690×771, ratio 0.895).
* On portrait/mobile → constrained by width (95vw)
* On landscape/desktop → constrained by height (90vh × ratio)
* The min() picks whichever fits without overflow — works on every screen size.
*/
aspect-ratio: 680 / 771;
width: min(95vw, calc(90vh * (680 / 771)));
/* container-type enables cqw inside so child elements scale
with the container, not the raw viewport */
container-type: inline-size;
margin: 0 auto;
position: relative;
background-color: #ffffff;
overflow: hidden;
}
/* Add the light cone effect */
div.container {
/*
* Cone color architecture (two extremes):
* - Set ONLY two endpoint colors (clickable in DevTools color picker)
* - All intermediate stops are computed via color-mix()
*/
--cone-warm: hsl(72, 100%, 92%); /* warm center (edit this) */
--cone-cool: hsl(120, 3%, 6%); /* cool edge (edit this) */
/* Intensities (edit these if you want more/less cone strength) */
--cone-a0: 13%;
--cone-a1: 10%;
--cone-a2: 42%;
--cone-a3: 80%;
/* Precompute mid colors in a perceptual space to avoid "surprise hues" */
--cone-mid1: color-mix(in oklab, var(--cone-warm) 88%, var(--cone-cool) 12%);
--cone-mid2: color-mix(in oklab, var(--cone-warm) 40%, var(--cone-cool) 60%);
/* One definition, two users: the ::before wash below and the blocker wash in
game-trailcombo.js, which repaints this same cone over PNGs that stack
above ::before and would otherwise miss the light. */
--cone-bg: radial-gradient(
circle at center 30%,
color-mix(in oklab, var(--cone-warm) var(--cone-a0), transparent) 0%,
/* Warm region extended outward (~+20% radius) */
/* 2026-03: tighten cone rings ~25% toward center */
color-mix(in oklab, var(--cone-mid1) var(--cone-a1), transparent) 30%,
color-mix(in oklab, var(--cone-mid2) var(--cone-a2), transparent) 52.5%,
color-mix(in oklab, var(--cone-cool) var(--cone-a3), transparent) 100%
);
}
div.container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--cone-bg);
pointer-events: none;
/* Above .key-hold-moth* (80009) so the vignette still affects the moth GIF */
z-index: 80010;
}
/* main.js toggles this on menu/about; without a rule the pseudo stayed active */
body.no-light-cone div.container::before {
content: none;
}
/* Instructions overlay (z 80016): keep the room cone washing over it */
body.guide-open div.container::before {
z-index: 80018;
}
.load-img{
position: relative !important;
}
body div.container .wall-image{
z-index: 9;
width: 25.7%;
position: absolute;
top: 0%;
left: 0%;
height: 14.3%;
}
/* Room / overlay art: every ![]()
under .container is full-bleed absolute.
Inline UI icons (panel text, nsplit cursor, …) MUST reset position/size. */
div.container img{
width: 100%;
height: 100%;
object-fit: contain;
position: absolute;
top: 0;
left: 0;
}
.teleskop-pokazan .tunos{
display: none !important;
}
.slika-pokazana .sunos{
display: none !important;
}
.prozorpodloga-pokazan .skok{
display: none !important;
}
.teleskop-img{
/* never visible until tunos + ~8s (teleskop-revealed) */
display: block;
opacity: 0;
visibility: hidden;
z-index: 80;
}
/* Show telescope only after teleskop-revealed (8s after tunos) */
.teleskop-pokazan.teleskop-revealed .teleskop-img {
opacity: 1 !important;
visibility: visible !important;
}
.teleskop-pokazan .t{
display: block !important;
}
a.disabled{
display: none !important;
}
.container a.c.disabled{
display: none !important;
}
/* "Forbidden" links: keep visible but clearly unavailable (do NOT use .disabled, which hides).
Dim via grayscale + a faded fill on the dot (below) instead of a low parent opacity,
so the dark ring on the greyed node stays crisp and readable. */
a.forbidden,
a.forbiden,
a.forbidenwindow{
opacity: 1 !important;
filter: grayscale(1) contrast(0.9);
}
/* Dark ring on the greyed forbidden node dot (matches the food-locked locked-node look).
No opacity override here — the dot's normal show/hide rules control visibility; we only
grey the fill and add the ring so it never gets washed out. */
.container a.forbidden::after,
.container a.forbiden::after,
.container a.forbidenwindow::after{
background-color: var(--custom-dark-gray) !important; /* unified dark-grey fill */
border: 1px solid rgba(0,0,0,0.6) !important;
box-sizing: border-box !important;
}
/* B mode: man/A-mode clickable buttons are invisible */
body[data-mode="b"] .container a.c{
display: none !important;
}
/* Man links only visible when player controls the man (play-man / play-both) */
body:not(.gm-man-player) .container a.c {
display: none !important;
}
/* Hide-all: keep man link hitboxes in the layout (invisible but clickable). A-mode only —
B-mode still uses keyhold, not a.c room links. Blocked links stay display:none. */
body.gm-hide-all-nodes:not(.gm-disable-all-nodes):not([data-mode="b"]) .container a.c[data-routable="true"]:not(.disabled):not(.man-special-blocked):not(.forbidden):not(.forbiden):not(.forbidenwindow):not(.game-walk-hidden):not(.a18-link-hidden) {
display: block !important;
}
/* Hide-all must not resurrect staff/graph-blocked links (e.g. .ot when window is open). */
body.gm-hide-all-nodes:not(.gm-disable-all-nodes) .container a.disabled,
body.gm-hide-all-nodes:not(.gm-disable-all-nodes) .container a.man-special-blocked,
body.gm-hide-all-nodes:not(.gm-disable-all-nodes) .container a.forbidden,
body.gm-hide-all-nodes:not(.gm-disable-all-nodes) .container a.forbiden,
body.gm-hide-all-nodes:not(.gm-disable-all-nodes) .container a.forbidenwindow,
body.gm-hide-all-nodes:not(.gm-disable-all-nodes) .container a.game-walk-hidden,
body.gm-hide-all-nodes:not(.gm-disable-all-nodes) .container a.a18-link-hidden,
body.gm-hide-all-nodes:not(.gm-disable-all-nodes) .container a.keyholdlink.disabled,
body.gm-hide-all-nodes:not(.gm-disable-all-nodes) #moth-play-layer .moth-play-target[disabled] {
display: none !important;
pointer-events: none !important;
visibility: hidden !important;
cursor: default !important;
}
/* B mode: keyhold link clickable containers have no visible border */
body[data-mode="b"] .container a.keyholdlink{
border: none !important;
}
/* Base state for keyholdlink dot — invisible, ready to fade in */
.container a.keyholdlink:after {
opacity: 0;
transition: opacity 0.45s ease;
}
/* B mode: fade dot in after a short delay so keyhole image appears first */
body[data-mode="b"] .container a.keyholdlink:after {
opacity: 0.8;
transition: opacity 0.45s ease 0.35s;
}
/* MOTH FOOD GATE B-MODE — commented out
body[data-mode="b"] .container a.keyholdlink.gr-mothfood-block { ... }
*/
/* In B mode, if JS marks keyholdlink disabled, show it but non-clickable/dimmed */
body[data-mode="b"] .container a.keyholdlink.disabled{
display: block !important;
pointer-events: none !important;
opacity: 0.3 !important;
}
/* Food-locked cat spots — a spot stays locked until the moth snack box holds enough
moths (RoomGraph.cat.forbiddenByFood; applied by custom-staff.js). Uses its own
class so it survives setMode('b') stripping .disabled. Works with no game running. */
/* Food-locked links stay clickable (pointer-events:auto) so a click can surface
the "jump requires N triangle shapes" hint; the move cursor signals it's a spot,
and a thin dark ring marks the greyed dot as a (locked) node. */
.container a.food-locked{
cursor: url('../images/cursor/cursormove.png'), move !important;
}
/* Clickable only while the GIF gate is open (same as every other link), so a
locked spot can't be clicked before it's shown. */
body.auto-link-click-enabled:not(.moth-flying) .container a.food-locked{
pointer-events: auto !important;
}
/* B mode: greyed keyhold link — appears only once the gate opens, WITH the other
links (not before). Gate closed → base opacity:0 hides it like the rest.
Dim the DOT fill (rgba), not the whole link, so the dark ring stays crisp
(same trick as the A-mode food-locked dot below). */
body[data-mode="b"].auto-link-click-enabled:not(.moth-flying) .container a.keyholdlink.food-locked{
display: block !important;
opacity: 1 !important;
filter: none !important;
}
body[data-mode="b"].auto-link-click-enabled:not(.moth-flying) .container a.keyholdlink.food-locked::after{
background-color: var(--custom-dark-gray) !important; /* unified dark-grey fill */
border: 1px solid rgba(0,0,0,0.6) !important;
box-sizing: border-box !important;
opacity: 0.9 !important;
}
/* A mode: food-locked perch dot reads as LOCKED — a faint grey fill plus a thin
dark ring so it still looks like a node. No forced opacity: the dot follows the
SAME show conditions as the other dots (gate open + cat player), so it fades in
WITH them, never before. Fill is dimmed via rgba alpha (NOT `opacity`) so the
dark border doesn't get dimmed away with it. */
body:not([data-mode="b"]) .container a.food-locked:not(.keyholdlink)::after{
background-color: var(--custom-dark-gray) !important; /* unified dark-grey fill */
border: 1px solid rgba(0,0,0,0.6) !important;
box-sizing: border-box !important;
filter: none !important;
}
body.gm-hide-all-nodes:not(.gm-disable-all-nodes) .container a.food-locked{
display: none !important;
pointer-events: none !important;
visibility: hidden !important;
}
/* Strong hide when window is closed (prevents first-toggle flash for m7 and its keyholds) */
body:not(.prozor-otvoren) .container a.m7{ display: none !important; }
body:not(.prozor-otvoren) .container a.keyholdlink[class*="m7"]{ display: none !important; }
.slika-pokazana .pipa{
display: block !important;
}
.t{
display: none !important;
}
.ot{
display: block;
}
.zat,
.skok{
display: none !important;
z-index: 90;
}
.prozor-otvoren .zat,
.prozor-otvoren .skok{
display: block !important;
}
.prozor-img{
display: block !important;
z-index: 90;
transition: opacity 0s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
opacity: 0;
}
/* DELETE: .prozor-otvoren-uvjek rule below was identical to the :not(.uvjek) rule above —
same opacity:1 and transition:4s. The -uvjek split produced no visual difference.
Collapsed into one rule. */
body.prozor-otvoren .prozor-img {
opacity: 1;
transition: opacity 4s;
}
body .prozorpodloga-img {
opacity: 0;
display: block !important;
transition:3s all;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: 80005;
}
/* Full-page overlay (entire window) – same behavior as prozorpodloga-img */
body .prozorpodlogacijeli-img {
opacity: 0;
display: block !important; /* match pp behavior: use opacity for fades */
transition:3s all;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: 80005; /* same layer as normal prozorpodloga */
pointer-events: none; /* do not block clicks */
}
/* DELETE: -uvjek / :not(-uvjek) split for ledge overlays was identical in both branches —
all variants just set opacity:1. Collapsed into single rules. */
body.prozorpodloga-pokazan .prozorpodloga-img {
opacity: 1;
}
body.prozorpodlogacijeli-pokazan .prozorpodlogacijeli-img {
display: block !important;
z-index: 80006;
opacity: 1;
}
.prozor-otvoren{
display: block !important;
z-index: 90;
}
.prozor-otvoren .ot{
display: none !important;
}
#svemir{
background-color: var(--custom-dark-gray);
z-index: 99999;
display: none;
/* Fill the container it sits inside (position: absolute child of .container) */
width: 100%;
height: 100%;
position: absolute !important;
top: 0px;
left: 0%;
}
.modal p{
margin-left: 0 !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 26px;
line-height: 1.5;
}
.modal h4{
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
}
/* Make wiki modal larger and slightly transparent for style consistency */
#wiki-modal{
position: fixed !important;
/* Match container width using the same responsive formula as .container */
width: min(95vw, calc(90vh * (680 / 771))) !important;
left: 50% !important;
transform: translateX(-50%) !important;
/* Anchor near the bottom of the viewport */
bottom: 2.5vh !important;
/* No box – only letters */
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
padding: 0 !important; /* full-width text edge-to-edge */
}
/* Apply flex layout only when the modal is actually shown by jquery-modal */
#wiki-modal[style*="display: block"]{
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
overflow: hidden !important;
}
#wiki-text{
font-size: 18px;
color: #ffffff; /* readable on dark scene */
line-height: 1.5;
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
overflow: auto;
max-height: 100%;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Ensure inner elements never exceed container width */
#wiki-modal, #wiki-modal *{
box-sizing: border-box;
max-width: 100% !important;
}
.blocker{
z-index: 9999999999 !important;
}
/*body.auto-link-click-disabled-medlodia *{*/
/*cursor: not-allowed !important;*/
/*}*/
embed{
position: absolute;
top: -500px;
left: -500px;
}
.container a[class*="m0"]:after { background-color: var(--dot-m0); }
.container a[class*="m0b"]:after { background-color: var(--dot-m0b); }
.container a[class*="m1"]:after { background-color: var(--dot-m1); }
.container a[class*="m2"]:after { background-color: var(--dot-m2); }
.container a[class*="m3"]:after { background-color: var(--dot-m3); }
.container a[class*="m4"]:after { background-color: var(--dot-m4); }
.container a[class*="m5"]:after { background-color: var(--dot-m5); }
.container a[class*="m6"]:after { background-color: var(--dot-m6); }
.container a[class*="m7"]:after { background-color: var(--dot-m7); }
/* Man link positions — vars set by moth-new.js applyPerchCoordsToCssVars()
from PERCH_POS + MAN_ONLY_POS. Positioning lives in CSS (not JS) so the
links never flash at the base `.container a` default of (37%, -1%) before
updateManButtons() runs. */
.container a.c[data-man-target="krevet"] { top: var(--man-krevet-top); left: var(--man-krevet-left); }
.container a.c[data-man-target="teleskop"] { top: var(--man-teleskop-top); left: var(--man-teleskop-left); }
.container a.c[data-man-target="pipaot"] { top: var(--man-pipaot-top); left: var(--man-pipaot-left); }
.container a.c[data-man-target="pipazat"] { top: var(--man-pipazat-top); left: var(--man-pipazat-left); }
.container a.c[data-man-target="sint"] { top: var(--man-sint-top); left: var(--man-sint-left); }
.container a.c[data-man-target="komp"] { top: var(--man-komp-top); left: var(--man-komp-left); }
.container a.c[data-man-target="prozor"] { top: var(--man-prozor-top); left: var(--man-prozor-left); }
.container a.c[data-man-target="gledasliku"] { top: var(--man-gledasliku-top); left: var(--man-gledasliku-left); }
.container a.c[data-man-target="sjedi"] { top: var(--man-sjedi-top); left: var(--man-sjedi-left); }
.container a.c[data-man-target="sjedix"] { top: var(--man-sjedix-top); left: var(--man-sjedix-left); }
.container a.c[data-man-target="vani"] { top: var(--man-vani-top); left: var(--man-vani-left); }
/* Man link dot colors — matched to cross-mapped cat locations */
.container a.c[data-man-target="krevet"]:after { background-color: var(--dot-c-krevet); }
.container a.c[data-man-target="teleskop"]:after { background-color: var(--dot-c-teleskop); }
.container a.c[data-man-target="pipaot"]:after { background-color: var(--dot-c-pipaot); }
.container a.c[data-man-target="pipazat"]:after { background-color: var(--dot-c-pipazat); }
.container a.c[data-man-target="sint"]:after { background-color: var(--dot-c-sint); }
.container a.c[data-man-target="komp"]:after { background-color: var(--dot-c-komp); }
/* Game Mode — moth out of game until "Show moth" is checked. */
body:not(.gm-moth-in-game) [data-role="bug"],
body:not(.gm-moth-in-game) #moth-play-layer,
body:not(.gm-moth-in-game) #moth-shared-target,
body:not(.gm-moth-in-game) .container .moth-btn-x,
body:not(.gm-moth-in-game) .container .moth-btn-y,
body:not(.gm-moth-in-game) .container .moth-btn-puzzle {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
opacity: 0 !important;
}
/* Game Mode — all nav dots + Trail+Edge ink edges neutral gray. */
body.gm-all-bts-gray .container a[data-routable="true"]:not(.first-links)::after,
body.gm-all-bts-gray .container a.keyholdlink::after,
body.gm-all-bts-gray #moth-play-layer .moth-play-target::after {
background-color: var(--custom-dark-gray) !important;
}
/* Trail+Edge corridors — force ink to the same neutral gray (overrides gradients). */
body.gm-all-bts-gray.g5-trailcombo .gm-edgetrail-overlay path,
body.gm-all-bts-gray.g5-trailcombo .gm-edgetrail-overlay line {
stroke: var(--custom-dark-gray) !important;
}
/* Cat Walk / Man Walk / Trail — graph proxy dots (not Color Mixer). */
body.gm-all-bts-gray.g5-graph-interlude:not(.g5-graph-mix) .game-proxy {
background-color: var(--custom-dark-gray) !important;
color: var(--custom-dark-gray) !important;
filter: none !important;
}
body.gm-all-bts-gray.g5-graph-interlude:not(.g5-graph-mix) .game-proxy:not(.game-walk-dest) {
box-shadow: none !important;
}
body.gm-all-bts-gray.g5-graph-interlude:not(.g5-graph-mix) .game-proxy.game-lit.game-ter-h {
box-shadow: none !important;
filter: none !important;
}
.container a.c[data-man-target="prozor"]:after { background-color: var(--dot-c-prozor); }
.container a.c[data-man-target="gledasliku"]:after { background-color: var(--dot-c-gledasliku); }
.container a.c[data-man-target="sjedi"]:after { background-color: var(--dot-c-sjedi); }
.container a.c[data-man-target="sjedix"]:after { background-color: var(--dot-c-sjedix); }
.container a.c[data-man-target="vani"]:after { background-color: var(--dot-c-vani); }
/* Keyhold link arrows: one shape (triangle + rect handle) rotated per direction
Left: t3m4, t3m1, t7m5 Right: t4bm5, t4m7 Up: t0bm0 Down: t0bm1 (t0m0b / t4m5 = normal circle dot)
Handle shortened: 100% -> 68% so overall arrow length is less.
*/
/* Keyhold arrows: non-circular marker (link hit area unchanged) */
.container a.t1m7:after,
.container a.t3m4:after,
.container a.t3m1:after,
.container a.t7m5:after,
.container a.t4bm5:after,
.container a.t4m7:after,
.container a.t0bm0:after,
.container a.t0bm1:after{
width: 13.2cqw !important;
height: 6.6cqw !important;
border-radius: 0;
transform: translate(-50%, -50%);
/* clip-path clips a real border, so fake a dark outline that hugs the arrow shape. */
filter: drop-shadow(0.5px 0 0 rgba(0,0,0,0.95)) drop-shadow(-0.5px 0 0 rgba(0,0,0,0.95)) drop-shadow(0 0.5px 0 rgba(0,0,0,0.95)) drop-shadow(0 -0.5px 0 rgba(0,0,0,0.95)) !important;
clip-path: polygon(
68% 23%,
45% 23%,
45% 0%,
0% 50%,
45% 100%,
45% 77%,
68% 77%
);
}
/* Blocked / gated keyhold ARROWS read as a clean dark-grey shape. Previously a tiny
arrow + the heavy 0.5px×4 black drop-shadow halo made it look like a solid black
blob; a solid dark-grey fill + a thinner, softer outline unifies these arrows with
the forbidden / food-gate dots (all "blocked" markers now look identical). */
.container a.keyholdlink.forbidden::after,
.container a.keyholdlink.forbiden::after,
.container a.keyholdlink.forbidenwindow::after,
.container a.keyholdlink.food-locked::after{
background-color: var(--custom-dark-gray) !important;
filter:
drop-shadow(0.4px 0 0 rgba(0,0,0,0.45))
drop-shadow(-0.4px 0 0 rgba(0,0,0,0.45))
drop-shadow(0 0.4px 0 rgba(0,0,0,0.45))
drop-shadow(0 -0.4px 0 rgba(0,0,0,0.45)) !important;
}
/* LEFT (default) */
.container a.t3m4:after,
.container a.t3m1:after,
.container a.t7m5:after{
transform: translate(-50%, -50%) rotate(0deg);
}
/* RIGHT */
.container a.t4bm5:after,
.container a.t4m7:after{
transform: translate(-50%, -50%) rotate(-180deg);
}
/* UP */
.container a.t1m7:after,
.container a.t0bm0:after{
transform: translate(-50%, -50%) rotate(-90deg);
}
/* DOWN */
.container a.t0bm1:after{
transform: translate(-50%, -50%) rotate(90deg);
}
/* m6 dot centred in hitbox — no vertical offset. */
body .container a.m6:after{
transform: translate(-50%, -50%) !important;
}
/* Keyhold arrow up/down: override m0/m1 transform so rotation wins (they share m0/m1 class) */
body .container a.t1m7:after{
transform: translate(-50%, -50%) rotate(90deg) !important;
}
body .container a.t0bm0:after{
transform: translate(-50%, -50%) rotate(90deg) !important;
}
body .container a.t0bm1:after{
transform: translate(-50%, -50%) rotate(-90deg) !important;
}
/* Keyhold arrow RIGHT: flip horizontally so arrow points right (base shape points left) */
body .container a.t4bm5:after,
body .container a.t4m7:after{
transform: translate(-50%, -50%) scaleX(-1) !important;
}
@keyframes wiggleHands {
0% { transform: translate(-2px, -2px); }
100% { transform: translate(2px, 2px); }
}
.piano-hands {
position: absolute;
top: 52.4%;
left: 43.3%;
width: 2.3%;
height: 2.3%;
background: rgb(50, 50, 50);
animation: wiggleHands 0.5s alternate infinite ease-in-out;
pointer-events: none;
z-index: 80006; /* Use a more reasonable z-index that's still above other elements */
display: none;
will-change: transform; /* Optimize animation performance */
}
/* Lok6 link-button visible only in B mode via JS.
Styled like a nav node: circular, node-sized (8cqw), dark gray, gently pulsing.
Position (bottom/left) is set inline by applyLok6PaperPos() in main.js. */
.lok6-btn{
background-color: var(--custom-dark-gray);
border: none;
border-radius: 50%;
padding: 0;
box-sizing: border-box;
width: 8cqw;
height: 8cqw;
z-index: 79999;
animation: lok6-btn-pulse 4s ease-in-out infinite;
}
/* Pulse opacity 1 → 0 → 1 over a 4s cycle. */
@keyframes lok6-btn-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* Simple image overlay for todo closeup */
.todo-closeup-wrap{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 80012;
display: none;
}
.todo-closeup-wrap img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0.8;
pointer-events: none;
}
/* todocloseup2 / todocloseup3 fully opaque (others stay semi-transparent) */
.todo-closeup-wrap img[src*="todocloseup2"],
.todo-closeup-wrap img[src*="todocloseup3"]{
opacity: 1;
}
/* Chain puzzle start — invisible full-overlay hitbox: any click on the paper closes it and enters the puzzle. */
.lok6-puzz-btn {
display: none;
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: auto;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
background: transparent;
border: none;
border-radius: 0;
cursor: pointer;
z-index: 10;
pointer-events: auto;
}
.lok6-puzz-btn img {
display: none;
}
body.todo-open .lok6-puzz-btn.lok6-puzz-visible {
display: inline-flex;
}
/* Monitor overlay matches container (same as todo closeup) */
.monitor-closeup-wrap{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 80012;
display: none;
}
.monitor-closeup-wrap .monitor-image{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: top center;
opacity: 0.9;
}
/* body.monitor-mothfind-done .monitor-closeup-wrap .monitor-image{ opacity: 1; } */
/* While moth-encounter GIF is showing: block all pointer events in container except the GIF itself. */
body.moth-encounter .container {
pointer-events: none;
}
body.moth-encounter .container .key-hold-moth1,
body.moth-encounter .container .key-hold-moth2,
body.moth-encounter .container .key-hold-moth3,
body.moth-encounter .container .key-hold-moth4,
body.moth-encounter .container .key-hold-moth5 {
pointer-events: auto;
cursor: pointer;
}
/* Moth encounter buttons during B-mode GIF overlay (moth-new.js). */
body.moth-encounter .container .moth-btn-x,
body.moth-encounter .container .moth-btn-y,
body.moth-encounter .container .moth-btn-puzzle {
pointer-events: auto !important;
cursor: pointer;
}
/* Walk puzzle active: food + info only — no second puzzle launch from moth encounter */
body.g5-walk-active.moth-encounter .container .moth-btn-puzzle {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* While moth-encounter GIF is showing, hide EVERY link in .container
(cat .mX, man .c, keyhold .keyholdlink, moth .moth-play-target, etc.).
The only clickable thing during encounter is the .key-hold-moth* GIF
itself, which is an ![]()
, not an , so this rule doesn't touch it. */
body.moth-encounter .container a,
body.moth-encounter #moth-play-layer .moth-play-target {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* While monitor overlay is open, hide ALL keyhold links and proxies.
Must beat B-mode specificity (0,4,2) so we match the same selector depth. */
body.monitor-open .container a.keyholdlink,
body[data-mode="b"].monitor-open .container a.keyholdlink,
body[data-mode="b"].monitor-open .container a.keyholdlink.gr-mothfood-block,
body[data-mode="b"].monitor-open .container a.keyholdlink.gr-puzz-block,
body[data-mode="b"].monitor-open .container a.keyholdlink.disabled{
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
body.monitor-open .container .kh-proxy{
display: none !important;
}
/* Myfont for all panel text */
.info-panel,
.info-panel .panel-text,
.info-panel .panel-text-stack,
.info-panel .panel-text-row-inner,
.info-panel .info-panel-row,
.info-panel .info-panel-blackbox,
.panel-text {
font-family: 'Myfont', sans-serif !important;
word-spacing: 0.12em;
/* Make Myfont read a bit bolder/clearer without a new font file */
-webkit-text-stroke: 0.25px rgba(0, 0, 0, 0.35);
text-shadow:
0 0.35px 0 rgba(0, 0, 0, 0.35),
0.35px 0 0 rgba(0, 0, 0, 0.22),
-0.35px 0 0 rgba(0, 0, 0, 0.22);
}
/* Hide panel perimeter (border) and 8-row grid lines only; moth box (Box 2) stays visible */
.info-panel{
border: none !important;
}
.info-panel .info-panel-line,
.info-panel .info-panel-vline{
visibility: hidden !important;
}
/* 3-row blackbox: fully invisible structure, text only */
.info-panel .info-panel-blackbox{
border: none !important;
background: transparent !important;
}
.info-panel .info-panel-blackbox-hline{
background: transparent !important;
height: 1px !important;
border-top: none !important;
}
/* Blackbox: three horizontal bands — row1 sit low, row2 centered, row3 sit high */
.info-panel .panel-text-stack {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
pointer-events: none;
padding: 0 1.5%;
box-sizing: border-box;
}
/* Chapter Instructions fold — lives on .container; open = full canvas size */
.container > .panel-chapter-guide {
position: absolute;
z-index: 80016;
pointer-events: auto;
font-family: 'Myfont', sans-serif;
text-transform: none;
letter-spacing: 0.02em;
box-sizing: border-box;
}
.container > .panel-chapter-guide[hidden] { display: none !important; }
/* Collapsed: flat pair with menu in the empty right triangle (opposite the boxes) */
.container > .panel-chapter-guide:not(.is-open) {
left: 94%;
right: auto;
top: 62%;
bottom: auto;
width: max-content;
transform: translate(-50%, -50%);
pointer-events: none;
}
.container > .panel-chapter-guide:not(.is-open) .panel-chapter-guide-toggle {
pointer-events: auto;
}
/* Open: fill the main game container */
.container > .panel-chapter-guide.is-open {
inset: 0;
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: none;
display: flex;
flex-direction: column;
padding: 2.5% 3.5% 3%;
background: rgba(245, 243, 240, 0.96);
border: none;
cursor: url('../images/cursor/cursormove.png'), move;
}
/* Open: no "i" — dismiss by clicking anywhere on the fold */
.container > .panel-chapter-guide.is-open .panel-chapter-guide-toggle {
display: none !important;
}
.panel-chapter-guide-toggle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
width: clamp(40px, 10cqw, 56px);
height: clamp(40px, 10cqw, 56px);
padding: 0;
box-sizing: border-box;
border: none;
background: transparent;
cursor: url('../images/cursor/cursormove.png'), move;
pointer-events: auto;
border-radius: 3px;
flex: 0 0 auto;
align-self: flex-start;
line-height: 0;
}
/* Undo `div.container img { position:absolute; top:0; left:0; width/height:100% }` */
.panel-chapter-guide-toggle .panel-chapter-guide-icon {
position: static;
top: auto;
left: auto;
display: block;
width: clamp(22px, 5.5cqw, 34px);
height: clamp(22px, 5.5cqw, 34px);
object-fit: contain;
margin: 0;
pointer-events: none;
user-select: none;
}
.panel-chapter-guide-body {
margin-top: 0.35em;
max-height: min(42%, 11em);
overflow: auto;
padding: 0.45em 0.55em;
background: rgba(245, 243, 240, 0.94);
border: 1px solid rgba(80, 78, 78, 0.35);
color: #3f3d3d;
font-family: 'Myfont', sans-serif;
/* 2× previous instructions size (was clamp(9px, 2.35cqw, 13px)) */
font-size: clamp(18px, 4.7cqw, 26px);
line-height: 1.35;
text-align: left;
text-transform: none;
letter-spacing: 0.02em;
word-spacing: 0.12em;
-webkit-text-stroke: 0.25px rgba(0, 0, 0, 0.35);
text-shadow:
0 0.35px 0 rgba(0, 0, 0, 0.35),
0.35px 0 0 rgba(0, 0, 0, 0.22),
-0.35px 0 0 rgba(0, 0, 0, 0.22);
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
}
.container > .panel-chapter-guide.is-open .panel-chapter-guide-body {
flex: 1 1 auto;
margin-top: 0;
max-height: none;
height: auto;
min-height: 0;
padding: 0.6em 0.2em;
background: transparent;
border: none;
}
.panel-chapter-guide-body[hidden] { display: none !important; }
.panel-chapter-guide.is-flash .panel-chapter-guide-toggle {
box-shadow: 0 0 0 1px rgba(90, 90, 90, 0.35);
}
body[data-mode="b"] .panel-chapter-guide {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* ── Menu blackout ────────────────────────────────────────────────────────────
On the menu / about / save pages nothing from the game may show or be clicked.
Every in-game element (HUD, moth, proxy dots, SVG ink layers, keyhole moth
GIFs, wall + window art, the svemir starfield, buttons) is a direct child of
.container, so hiding those children clears the room in one rule. Menu pages
render inside #spadiv, which is the only child left standing.
!important also beats the inline display jQuery .show() writes, so the
click-anywhere starfield toggle cannot punch through on a menu page. */
body.on-menu div.container > *:not(#spadiv) {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Elements the game parks on rather than in the container. */
body.on-menu .panel-cat-flyer,
body.on-menu #mix-score-panel,
body.on-menu .moth-btns {
display: none !important;
pointer-events: none !important;
}
/* Back-to-menu — sits with the i button in the empty right triangle */
.container > .panel-menu-btn {
position: absolute;
top: 73%;
left: 94%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
z-index: 80016;
margin: 0;
width: clamp(40px, 10cqw, 56px);
height: clamp(40px, 10cqw, 56px);
padding: 0;
box-sizing: border-box;
border: none;
border-radius: 3px;
background: transparent;
line-height: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: url('../images/cursor/cursormove.png'), move;
pointer-events: auto;
}
/* Undo `div.container img { position:absolute; top:0; left:0; width/height:100% }` */
.container > .panel-menu-btn .panel-menu-icon {
position: static;
top: auto;
left: auto;
display: block;
width: clamp(22px, 5.5cqw, 34px);
height: clamp(22px, 5.5cqw, 34px);
object-fit: contain;
margin: 0;
pointer-events: none;
user-select: none;
}
.container > .panel-menu-btn:hover {
background: transparent;
}
/* Off on the menu/about routes and in the keyhole view (whole HUD hidden there) */
.container > .panel-menu-btn.is-off,
body[data-mode="b"] .container > .panel-menu-btn,
body[data-mode="c"] .container > .panel-menu-btn,
/* Instructions overlay open — no path to menu from here */
.container > .panel-chapter-guide.is-open ~ .panel-menu-btn {
display: none !important;
}
.info-panel .panel-text-row {
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* All three bands share identical centering so the lines have an even rhythm. */
.info-panel .panel-text-row--band1,
.info-panel .panel-text-row--band2,
.info-panel .panel-text-row--band3 {
justify-content: center;
}
/* Inline box-legend PNGs inside panel messages / Instructions ({places} {puzzle} …).
MUST undo `div.container img { position:absolute; top:0; left:0; width/height:100% }`
or the icon parks at the blackbox corner and drops out of the text line. */
.info-panel .panel-msg-icon,
.panel-chapter-guide-body .panel-msg-icon {
position: static;
top: auto;
left: auto;
display: inline-block;
height: 1.05em;
width: auto;
max-width: 1.35em;
vertical-align: -0.18em;
margin: 0 0.12em;
object-fit: contain;
pointer-events: none;
/* Keep icons readable on the light panel wash; edge mask art is dark already. */
filter: none;
}
.info-panel .panel-msg-icon--edge,
.info-panel .panel-msg-icon--edges,
.panel-chapter-guide-body .panel-msg-icon--edge,
.panel-chapter-guide-body .panel-msg-icon--edges {
max-width: 1.55em;
height: 0.95em;
vertical-align: -0.12em;
}
.panel-chapter-guide-body .panel-msg-icon {
height: 1.2em;
max-width: 1.5em;
vertical-align: -0.22em;
}
.info-panel .panel-text-row-inner {
width: 100%;
max-height: 100%;
min-height: 0;
text-align: center;
white-space: normal;
word-break: break-word;
/* Floor kept tiny on purpose: cqw is relative to the (fixed-ratio) game
canvas, so the black box scales proportionally on every screen. A large px
floor would keep the text big while the box shrinks on mobile → overflow /
clipping. Let cqw govern so text always tracks the box. */
font-size: clamp(8px, 6cqw, 34px);
line-height: 1.0;
letter-spacing: 0.08em;
word-spacing: 0.22em;
font-weight: normal;
color: #525050;
/* Faux-bold: paint a second copy of the glyphs nudged ~half a stroke
right-and-down so the strokes overlap and thicken (the handwritten font
ignores font-weight, so a shadow copy is the reliable way to embolden). */
text-shadow: 0.025em 0.025em 0 currentColor;
text-transform: uppercase;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
text-overflow: clip;
/* Handwritten caps sit high in their line box; nudge them down so they land a
touch below the vertical center of each row. */
transform: translateY(0.18em);
}
/* Center the line within every band so all three rows read identically. */
.info-panel .panel-text-row--band1 .panel-text-row-inner,
.info-panel .panel-text-row--band2 .panel-text-row-inner,
.info-panel .panel-text-row--band3 .panel-text-row-inner {
-webkit-box-pack: center;
}
/* Single hand-authored line routed to the middle band (center green line).
Match the normal row font so a 1-line message reads the same size as the
lines of a 2- or 3-line message; keep a higher clamp so an unexpectedly long
unbroken string still wraps gracefully instead of clipping. */
.info-panel .panel-text-row-inner--solo-mid {
/* Center in the WHOLE black box (stack is position:absolute inset:0), not just
the 1/3 middle band — a long unbroken message (e.g. "Reach the glowing spot
by visiting all other spots first.") wraps to several lines, and confining it
to the middle band (overflow:hidden) dropped the lower lines off the bottom. */
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
-webkit-line-clamp: 3;
line-clamp: 3;
font-size: clamp(8px, 6cqw, 34px);
line-height: 1.08;
max-height: none;
overflow: hidden;
}
/* Legacy alias — same undo of container img absolute pin. */
.info-panel .panel-arc-icon {
position: static;
top: auto;
left: auto;
display: inline-block;
height: 1.05em;
width: auto;
max-width: 1.35em;
vertical-align: -0.18em;
margin: 0 0.12em;
object-fit: contain;
pointer-events: none;
}
/* Puzzle hint — "glowing" tinted to match the pulsing end-node dot. */
@keyframes g5-glow-word-pulse {
0%, 100% { opacity: 1; text-shadow: 0 0 6px currentColor, 0 0 14px currentColor; }
50% { opacity: 0.45; text-shadow: 0 0 2px currentColor, 0 0 6px currentColor; }
}
.info-panel .g5-glow-word {
animation: g5-glow-word-pulse 2s ease-in-out infinite;
}
/* Two hand-broken lines routed to the middle band: they must center as a pair
around 50% (the center green line runs between them). Let the band + inner
overflow so the taller two-line block stays vertically centered instead of
being clipped by the one-third band height. */
.info-panel .panel-text-row--band2:has(.panel-text-row-inner--pair-mid),
.info-panel .panel-text-row--band2:has(.panel-text-row-inner--solo-mid) {
overflow: visible;
}
.info-panel .panel-text-row-inner--pair-mid {
/* Absolutely center the two-line block in the WHOLE black box (the stack is
position:absolute inset:0), independent of the 3-band grid — flex band
centering kept drifting the pair low. */
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
display: block;
-webkit-line-clamp: none;
line-clamp: none;
font-size: clamp(8px, 6cqw, 34px);
line-height: 1.28;
max-height: none;
overflow: visible;
}
/* Puzzle progress box — shown in-game with cats + moth boxes (icons fill on solve) */
.info-panel .panel-box5 {
overflow: visible;
}
.info-panel .panel-moth-box {
overflow: visible;
}
/* Half-eaten moth token: the walk-all-nodes toll (clicking an offered node that
isn't linked on the current page) costs HALF a moth — two tolls eat one moth.
Show it literally halved + dimmed so the partial cost reads at a glance. */
.info-panel .panel-moth-box .moth-dot.moth-dot-half {
clip-path: inset(0 50% 0 0);
opacity: 0.5;
}
/* Moth box + food legend share one 93%-wide unit so the icon tracks the box edge. */
.info-panel .panel-moth-unit {
position: relative;
flex: 0 0 auto;
width: 93%;
height: 65%;
box-sizing: border-box;
}
.info-panel .panel-moth-unit .panel-moth-box {
width: 100%;
height: 100%;
}
.info-panel .panel-moth-unit .panel-box-legend {
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
margin-left: clamp(2px, 0.55cqw, 10px);
}
/* Puzzle collpuzzbox icons — base size from panel.js clamp; scale up so phone/desktop both read well in the box */
.info-panel .panel-box5 .panel-box5-icon {
position: relative;
z-index: 2;
isolation: isolate;
opacity: 1;
/* Crisp outline like cat dots — no muddy multi-shadow stack in JS */
filter: drop-shadow(0 0 0.6px #000) drop-shadow(0 0 0.6px #000);
}
@media (min-width: 769px) {
.info-panel .panel-box5 .panel-box5-icon {
transform: scale(1.55);
transform-origin: center center;
}
}
@media (max-width: 768px) {
.info-panel .panel-box5 .panel-box5-icon {
transform: scale(1.7);
transform-origin: center center;
}
}
/* Left stack puzzle box is shorter/narrower — keep icons inside the frame. */
.info-panel .panel-left-stack .panel-box5 {
overflow: hidden;
}
.info-panel .panel-left-stack .panel-box5 .panel-box5-icon {
transform: scale(1.15) !important;
transform-origin: center center;
max-width: 92%;
max-height: 92%;
}
/* Mujc puzzle in progress: next slot icon pulses until win/fail */
.info-panel .panel-box5 .panel-box5-icon.panel-box5-icon-blink {
animation: panelBox5PuzzleBlink 1.1s ease-in-out infinite;
}
@keyframes panelBox5PuzzleBlink {
0%, 100% {
opacity: 1;
filter: drop-shadow(0 0 0.6px #000) drop-shadow(0 0 0.6px #000)
drop-shadow(0 0 4px rgba(255, 255, 255, 0.55));
}
50% {
opacity: 1;
filter: drop-shadow(0 0 0.6px #000) drop-shadow(0 0 0.6px #000)
drop-shadow(0 0 9px rgba(255, 255, 255, 0.85));
}
}
/* One-shot “you just collected this” pulse (panel.js: flashPanelCollectible) — cats dot, moth snack slot, puzzle icon, mothhide tri; legend PNGs use same class in sync */
.info-panel .panel-collect-flash {
position: relative;
z-index: 2;
animation: panelCollectFlash 2.1s ease-out 1;
}
@keyframes panelCollectFlash {
0%, 100% {
filter: brightness(1);
}
10% {
filter: brightness(1.7) drop-shadow(0 0 14px rgba(255, 218, 120, 0.95)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.85));
}
28% {
filter: brightness(1.45) drop-shadow(0 0 10px rgba(255, 205, 95, 0.85));
}
55% {
filter: brightness(1.18) drop-shadow(0 0 5px rgba(255, 195, 80, 0.45));
}
}
/* Box 1 / puzzle-box fly: spot perch → panel slot, straight line (panel.js).
In flight it mimics the ON-SCREEN node (no border, fainter, no glow); the
real box dot supplies the border + full color once it lands. */
.panel-cat-flyer {
position: fixed;
z-index: 80020;
border-radius: 50%;
border: none;
box-sizing: border-box;
pointer-events: none;
opacity: 0.7;
transform: translate(-50%, -50%);
will-change: left, top, width, height;
box-shadow: none;
}
/* Box 1 cat-token glow — set by Trail / Trail+Edge when the matching room node
is lit. !important beats the inline box-shadow:none on the dots. */
@keyframes panel-cat-glow-pulse {
0%, 100% { box-shadow: 0 0 4px 1px rgba(255,214,110,0.75), 0 0 9px 3px rgba(255,214,110,0.45); }
50% { box-shadow: 0 0 6px 2px rgba(255,230,150,0.95), 0 0 14px 5px rgba(255,214,110,0.65); }
}
.panel-cats-box .panel-cat-glow {
box-shadow: 0 0 7px 2px rgba(255,224,140,0.95), 0 0 16px 6px rgba(255,214,110,0.6) !important;
animation: panel-cat-glow-pulse 1.8s ease-in-out infinite;
filter: brightness(1.22) saturate(1.2);
z-index: 3;
}
/* Un-lit location tokens: smaller / dimmer — scale is set inline. */
.panel-cats-box .panel-cat-dim {
opacity: 0.4;
filter: brightness(0.55);
box-shadow: none !important;
z-index: 0;
}
/* Left progress column: moth / puzzle / cats / edge — equal height, equal gap.
Shortest on top → widest on bottom (moth 50% / edge 135% of prior ~44% baseline). */
.info-panel .panel-left-stack {
position: absolute;
left: 1.5%;
/* pulled down ~30% of one box height from the prior 16% top */
top: 20%;
width: 48%;
/* another −10% on the prior 44% stack height */
height: 40%;
display: none;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 6px;
padding: 0 1%;
box-sizing: border-box;
pointer-events: none;
overflow: visible;
z-index: 3;
}
.info-panel .panel-left-stack .panel-moth,
.info-panel .panel-left-stack .panel-box1-extra,
.info-panel .panel-left-stack .panel-cats,
.info-panel .panel-left-stack .panel-trail-count {
position: relative;
left: 0;
top: 0;
flex: 1 1 0;
min-height: 0;
height: auto;
padding: 0;
box-sizing: border-box;
}
/* Fancy hover tips — progress boxes (right) + menu / instructions (left) */
.hud-tip[data-tip]::after {
content: attr(data-tip);
position: absolute;
top: 50%;
z-index: 80030;
padding: 0.35em 0.65em;
max-width: 14em;
white-space: normal;
text-align: left;
font-family: 'Myfont', sans-serif;
font-size: clamp(11px, 2.2cqw, 15px);
line-height: 1.3;
letter-spacing: 0.03em;
color: #f0ebe3;
background: rgba(28, 26, 24, 0.92);
border: 1px solid rgba(200, 180, 140, 0.45);
border-radius: 2px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.hud-tip:hover[data-tip]::after,
.hud-tip:focus-visible[data-tip]::after,
.hud-tip:focus-within[data-tip]::after {
opacity: 1;
visibility: visible;
}
/* Progress boxes: tip to the right
(!important: wraps also get inline pointer-events:none from panel.js) */
.info-panel .panel-left-stack .panel-box-tip {
pointer-events: auto !important;
cursor: url('../images/cursor/cursormove.png'), move;
z-index: 4;
}
.info-panel .panel-left-stack .panel-box-tip[data-tip]::after {
left: calc(100% + 0.55em);
right: auto;
transform: translateY(-50%) translateX(-4px);
}
.info-panel .panel-left-stack .panel-box-tip:hover[data-tip]::after,
.info-panel .panel-left-stack .panel-box-tip:focus-within[data-tip]::after {
transform: translateY(-50%) translateX(0);
}
/* Menu + instructions (right triangle): tip to the left so it stays on canvas */
.container > .panel-menu-btn.hud-tip[data-tip]::after,
.container > .panel-chapter-guide:not(.is-open) .panel-chapter-guide-toggle.hud-tip[data-tip]::after {
left: auto;
right: calc(100% + 0.55em);
transform: translateY(-50%) translateX(4px);
}
.container > .panel-menu-btn.hud-tip:hover[data-tip]::after,
.container > .panel-menu-btn.hud-tip:focus-visible[data-tip]::after,
.container > .panel-chapter-guide:not(.is-open) .panel-chapter-guide-toggle.hud-tip:hover[data-tip]::after,
.container > .panel-chapter-guide:not(.is-open) .panel-chapter-guide-toggle.hud-tip:focus-visible[data-tip]::after {
transform: translateY(-50%) translateX(0);
}
/* Hide tip while the instructions fold is open */
.container > .panel-chapter-guide.is-open .panel-chapter-guide-toggle[data-tip]::after {
display: none !important;
}
/* Taper: moth 50% → puzzle ~78% → cats ~107% → edge 135% of old 44% column. */
.info-panel .panel-left-stack .panel-moth {
width: 37%;
}
.info-panel .panel-left-stack .panel-box1-extra {
width: 58%;
}
.info-panel .panel-left-stack .panel-cats {
width: 78%;
}
.info-panel .panel-left-stack .panel-trail-count {
width: 100%;
}
.info-panel .panel-left-stack .panel-moth-unit,
.info-panel .panel-left-stack .panel-box5,
.info-panel .panel-left-stack .panel-cats-box,
.info-panel .panel-left-stack .panel-moth-track,
.info-panel .panel-left-stack .panel-box5-track,
.info-panel .panel-left-stack .panel-cats-track {
width: 100% !important;
height: 100% !important;
}
/* Edge meter — always a stack sibling (game none + every variant). */
.info-panel .panel-left-stack .panel-trail-count,
.info-panel .panel-cats-track .panel-trail-count {
display: none;
flex-direction: column;
gap: 0;
box-sizing: border-box;
pointer-events: none;
user-select: none;
z-index: 2;
}
.info-panel .panel-left-stack .panel-trail-count {
display: flex;
}
.info-panel .panel-left-stack .panel-trail-count .ptc-meter,
.info-panel .panel-cats-track .panel-trail-count .ptc-meter {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.info-panel .panel-left-stack .panel-trail-count .ptc-track,
.info-panel .panel-cats-track .panel-trail-count .ptc-track {
position: relative;
width: 100%;
height: 100%;
background: transparent;
border: 2px solid rgb(105, 98, 98);
box-sizing: border-box;
overflow: hidden;
}
/* Chain / Trail / Trail+Edge: compact play·quit parked just above the left stack.
Slot size = button size (no empty full-row magenta slab). */
body.gc5-active .info-panel .panel-chain-action,
body.g5-trail-action .info-panel .panel-chain-action,
body.g5-trailcombo .info-panel .panel-chain-action {
left: 1.5%;
top: calc(20% - clamp(49px, 12.2cqw, 75px) - 6px);
width: clamp(49px, 12.2cqw, 75px);
height: clamp(49px, 12.2cqw, 75px);
padding: 0;
align-items: stretch;
justify-content: stretch;
z-index: 50;
}
body.gc5-active .info-panel .panel-chain-action #gc5-action,
body.g5-trail-action .info-panel .panel-chain-action #gc5-action,
body.g5-trailcombo .info-panel .panel-chain-action #gc5-action {
width: 100%;
height: 100%;
transform: none;
z-index: 2;
}
body.gc5-active .info-panel .panel-chain-action .gc5-wedge,
body.g5-trail-action .info-panel .panel-chain-action .gc5-wedge,
body.g5-trailcombo .info-panel .panel-chain-action .gc5-wedge {
left: 0;
top: 0;
bottom: auto;
width: 100%;
height: 100%;
transform: none;
}
.info-panel .panel-trail-count .ptc-fill {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0%;
transition: width 0.4s ease;
background: #4a4a4a;
}
/* One line-token per visible corridor (edge.png ink stroke). */
.info-panel .panel-trail-count .ptc-cells {
position: absolute;
inset: 0;
display: flex;
align-items: center;
z-index: 0;
pointer-events: none;
padding: 0 1%;
box-sizing: border-box;
}
.info-panel .panel-trail-count .ptc-cell {
height: 100%;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
}
.info-panel .panel-trail-count .ptc-line-token {
display: block;
width: 78%;
height: 78%;
background: #243056;
/* Path is relative to this CSS file (css/ → ../images/). */
-webkit-mask: url(../images/edge.png) center / contain no-repeat;
mask: url(../images/edge.png) center / contain no-repeat;
transition: transform 0.18s ease, opacity 0.2s ease, filter 0.2s ease;
}
/* Trail+Edge erase story: leftmost N = still-inked (full); rest = wiped (faint/small). */
.info-panel .panel-trail-count .ptc-line-token.ptc-line-glow {
background: #2a2a2a;
filter: brightness(1.15) drop-shadow(0 0 3px rgba(40, 40, 40, 0.55));
z-index: 2;
}
.info-panel .panel-trail-count .ptc-line-token.ptc-line-dim {
opacity: 0.28;
filter: brightness(0.55);
}
/* Grain ticks removed — line tokens carry the count alone. */
.info-panel .panel-trail-count .ptc-grain {
display: none !important;
}
/* Count text removed — line tokens alone show progress. */
.info-panel .panel-trail-count .ptc-num {
display: none !important;
}
body.monitor-open .info-panel .panel-trail-count {
display: none !important;
}
/* MOTHHIDE PANEL TRIANGLES — commented out
body.mothhide-active .panel-mothhide-box .mh-tri:not(.mh-tri-found) { ... }
.info-panel .panel-mothhide-box .mh-tri.mh-tri-found { ... }
*/
/* Tiny legend PNGs: anchored to RIGHT edge of each progress track (panel.js). */
.info-panel .panel-box-legend {
flex: 0 0 auto;
height: clamp(11px, 2.8cqh, 26px);
width: auto;
max-width: clamp(14px, 4cqw, 32px);
object-fit: contain;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
.info-panel .panel-cats-track .panel-box-legend,
.info-panel .panel-box5-track .panel-box-legend,
.info-panel .panel-moth-track .panel-box-legend,
.info-panel .panel-trail-count .panel-box-legend,
.info-panel .panel-moth-unit .panel-box-legend {
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
margin-left: clamp(2px, 0.55cqw, 10px);
}
/* Hide info-panel cats box while monitor overlay is open */
body.monitor-open .info-panel .panel-cats-box{
display: none !important;
}
/* body.monitor-open .info-panel .panel-moth-box,
body.monitor-open .info-panel .panel-mothhide-box{ display: none !important; } */
body.monitor-open .info-panel .panel-box-legend{
display: none !important;
}
/* Pulse triangles inside requirement messages */
.info-panel .tri{
display: inline-block;
vertical-align: 0.05em;
transform: translateY(-0.04em);
animation: triPulse 1s ease-in-out infinite alternate;
}
@keyframes triPulse{
0%{ color: inherit; filter: brightness(1); }
100%{ color: #ffffff; filter: brightness(1.6); }
}
/* Default: keep normal m-links visually hidden to avoid flashes during mode toggles
They remain clickable/invisible; puzzle mode explicitly force-shows via .pzl-show */
.container a.m0,
.container a.m0b,
.container a.m1,
.container a.m2,
.container a.m3,
.container a.m4,
.container a.m5,
.container a.m6,
.container a.m7{
background-color: transparent !important;
}
/* Intro toggle */
.intro-toggle{
position: fixed; right: 190px; top: 10px; z-index: 899999990030;
background: color-mix(in srgb, var(--custom-dark-gray) 85%, transparent); color: #fff; border: 0; border-radius: 3px; padding: 6px 10px; font-size: 12px;
cursor: pointer;
}
.intro-toggle[aria-pressed="true"]{ background: rgba(140,100,40,0.9); }
/* Full-screen prozorpodloga overlay image */
.prozorpodloga-overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('images/prozorpodloga/prozorpodlogacijeli.png') center center / cover no-repeat;
z-index: 80005;
display: none;
pointer-events: none;
}
/* ── Game Mode graph dev overlay (game-graph-overlay.js) ─────────────────── */
svg.gm-graph-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 80012;
pointer-events: none;
overflow: visible;
}
svg.gm-edgetrail-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 80013;
pointer-events: none;
overflow: visible;
}
body.gm-graph-overlay-on img.prvipravi2-img {
display: none !important;
}
/* Hide unused frame overlay to prevent occasional full-size flashes */
.framehhh{
display: none !important;
}
/* Keyholdlink scaling now handled by container-relative units (cqw) — no media queries needed */
/* Man link gif-time hiding is handled by the inverted unified visibility
block at the top — a.c are .container a so they pick up opacity:0 default. */
/* ── Game action buttons — same position, mutually exclusive ─────────────────
abort: visible while puzzle is active (g5-walk-active)
new: visible while game is ready but no puzzle running (g5-active only) */
#g5-close-puzzle,
#g5-new-puzzle {
display: none;
position: absolute;
top: 84%;
left: 55%;
z-index: 80025;
border-radius: 4px;
font-size: clamp(10px, 2.2cqw, 14px);
padding: 0.35em 0.7em 0.5em;
cursor: pointer;
pointer-events: auto;
line-height: 1;
transition: background 0.15s;
flex-direction: column;
align-items: center;
gap: 0.3em;
}
#g5-close-puzzle {
background: rgba(10, 5, 2, 0.82);
color: #f0d8be;
border: 1px solid rgba(210, 100, 40, 0.5);
}
#g5-close-puzzle:hover { background: rgba(180, 60, 20, 0.85); }
#g5-new-puzzle {
left: 75%;
background: rgba(2, 10, 5, 0.82);
color: #beefd0;
border: 1px solid rgba(40, 180, 80, 0.5);
}
#g5-new-puzzle:hover { background: rgba(20, 140, 50, 0.85); }
#g5-close-puzzle-label,
#g5-new-puzzle-label {
display: block;
font-size: 0.78em;
opacity: 0.7;
letter-spacing: 0.04em;
margin-top: 0.3em;
}
body.g5-active:not(.g5-walk-active) #g5-new-puzzle { display: flex; }
body[data-mode="b"] #g5-close-puzzle,
body[data-mode="b"] #g5-new-puzzle { display: none !important; }
/* Graph games (Node Collector / Tri-Graph): hide walk-puzzle controls */
body.g5-graph-interlude #g5-new-puzzle,
body.g5-graph-interlude #g5-close-puzzle { display: none !important; }
/* ── Chain game action button — abort · play (one slot, always visible when active) ─ */
body.gc5-active #g5-close-puzzle { display: none !important; }
.info-panel .panel-chain-action {
position: absolute;
/* Panel-relative (direct child of .info-panel). Row 1 band = 12.5%–25%. */
left: -2%;
top: 12.5%;
width: 25.5%;
height: 12.5%;
display: none;
/* Anchor the wedge to the bottom of its slot so its extra height grows UP the
floor slope (into empty space) instead of dropping down over the moth box. */
align-items: flex-end;
justify-content: flex-start;
padding: 0 3%;
pointer-events: none;
box-sizing: border-box;
overflow: visible;
}
body.gc5-active.g5-walk-active .info-panel .panel-chain-action,
body.gc5-active.gc5-manual-hold .info-panel .panel-chain-action {
display: flex;
}
.info-panel .panel-chain-action #gc5-action {
display: none;
position: relative;
z-index: 1;
/* Square hit area matching the icon; the SVG glyph (play triangle / X) is the
whole visual — the text label is hidden. */
width: clamp(49px, 12.2cqw, 75px);
height: clamp(49px, 12.2cqw, 75px);
margin: 0;
padding: 0;
border: none;
background: transparent;
/* Shift the icon right 20% / down 4% of its own (square) size. */
transform: translate(20%, 4%);
box-sizing: border-box;
/* Hide the text label — the icon carries the meaning. */
color: transparent;
font-size: 0;
cursor: pointer;
pointer-events: auto;
user-select: none;
opacity: 1;
}
body.gc5-active.g5-walk-active .info-panel .panel-chain-action #gc5-action.gc5-act-abort,
body.gc5-active.g5-walk-active .info-panel .panel-chain-action #gc5-action.gc5-act-abort-fail,
body.gc5-active.gc5-manual-hold .info-panel .panel-chain-action #gc5-action.gc5-act-play {
display: flex !important;
}
/* ── Rounded state icons (inline SVG): green play-triangle · gray X ────────────
Square viewBox, proportional (no stretch). vector-effect=non-scaling-stroke +
round joins/caps give perfectly even rounded corners/ends at any size. */
.info-panel .panel-chain-action .gc5-wedge {
display: none;
position: absolute;
left: 3%;
bottom: 0;
width: clamp(49px, 12.2cqw, 75px);
height: clamp(49px, 12.2cqw, 75px);
transform: translate(20%, 4%);
overflow: visible;
pointer-events: none;
z-index: 0;
}
.panel-chain-action:has(#gc5-action.gc5-act-play) .gc5-wedge,
.panel-chain-action:has(#gc5-action.gc5-act-abort) .gc5-wedge,
.panel-chain-action:has(#gc5-action.gc5-act-abort-fail) .gc5-wedge {
display: block;
}
/* Both glyphs live in one SVG; show only the one for the active state. */
.gc5-wedge .gc5-ic { display: none; }
.panel-chain-action:has(#gc5-action.gc5-act-play) .gc5-ic-play { display: block; }
.panel-chain-action:has(#gc5-action.gc5-act-abort) .gc5-ic-x,
.panel-chain-action:has(#gc5-action.gc5-act-abort-fail) .gc5-ic-x { display: block; }
/* Play → solid green triangle (filled, no outline). */
.gc5-wedge .gc5-ic-play {
fill: rgba(52, 168, 82, 0.98);
stroke: none;
filter: drop-shadow(0 0 6px rgba(70, 175, 95, 0.45));
}
/* Quit → gray X (single fill — no dark centre from overlapping strokes). */
.gc5-wedge .gc5-ic-x {
fill: rgba(95, 95, 95, 0.55);
stroke: none;
opacity: 1;
filter: none;
}
body.gc5-quit-armed .gc5-wedge .gc5-ic-x,
.panel-chain-action:has(#gc5-action.gc5-quit-armed) .gc5-ic-x {
fill: rgba(72, 72, 72, 0.95);
filter: none;
}
/* Off-sequence (unwinnable): same full gray X */
.panel-chain-action:has(#gc5-action.gc5-act-abort-fail) .gc5-ic-x {
fill: rgba(72, 72, 72, 0.95);
filter: none;
}
/* Giftime: X stays washed-out and inert (whole hit target blocked below). */
body:not(.auto-link-click-enabled) .panel-chain-action:has(#gc5-action.gc5-act-abort) .gc5-ic-x,
body:not(.auto-link-click-enabled) .panel-chain-action:has(#gc5-action.gc5-act-abort-fail) .gc5-ic-x {
fill: rgba(95, 95, 95, 0.28);
}
/* Mirror boxes (right side of info panel) — toggled from the "Link dots & nodes"
subpanel checkbox. Overrides the inline display set by the panel route gate.
When the toggle is off, mirrors stay hidden even if the puzzle box is full
(no overflow tray reveal). */
body.mirror-boxes-hidden .info-panel .panel-right { display: none !important; }
/* Puzzle overflow: middle mirror is the overflow tray only when mirrors are on. */
body.puzzle-overflow-active:not(.mirror-boxes-hidden) .info-panel .panel-right--2 {
display: flex !important;
}
#gc5-action.gc5-act-abort:hover,
#gc5-action.gc5-act-abort-fail:hover,
#gc5-action.gc5-act-play:hover {
cursor: url('../images/cursor/cursormove.png'), move;
}
body:not(.auto-link-click-enabled) #gc5-action {
pointer-events: none !important;
cursor: default !important;
}
body:not(.auto-link-click-enabled) #gc5-action.gc5-act-play {
opacity: 0.45;
}
/* B (keyhole): hide the whole HUD — boxes, play/quit, text, instructions.
Keyhold links live in .container, not .info-panel, so they stay. */
body[data-mode="b"] .info-panel {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
body.g5-graph-interlude .panel-chain-action,
body.g5-graph-interlude #gc5-action { display: none !important; }
/* Trail / Trail+Edge reuse the wedge as their play·quit control. Show it while a
trail variant is active (overriding the graph-interlude hide above), except in
the B/C keyhole views where the whole HUD is hidden. */
body.g5-trail-action:not([data-mode="b"]):not([data-mode="c"]) .info-panel .panel-chain-action,
body.g5-trailcombo:not([data-mode="b"]):not([data-mode="c"]) .info-panel .panel-chain-action {
display: flex !important;
}
body.g5-trail-action:not([data-mode="b"]):not([data-mode="c"]) .info-panel .panel-chain-action #gc5-action.gc5-act-play,
body.g5-trail-action:not([data-mode="b"]):not([data-mode="c"]) .info-panel .panel-chain-action #gc5-action.gc5-act-abort,
body.g5-trailcombo:not([data-mode="b"]):not([data-mode="c"]) .info-panel .panel-chain-action #gc5-action.gc5-act-play,
body.g5-trailcombo:not([data-mode="b"]):not([data-mode="c"]) .info-panel .panel-chain-action #gc5-action.gc5-act-abort {
display: flex !important;
}
/* Clickable only after giftime (auto-link-click-enabled) — same gate as Chain. */
body.auto-link-click-enabled.g5-trail-action:not([data-mode="b"]):not([data-mode="c"]) .info-panel .panel-chain-action #gc5-action.gc5-act-play,
body.auto-link-click-enabled.g5-trail-action:not([data-mode="b"]):not([data-mode="c"]) .info-panel .panel-chain-action #gc5-action.gc5-act-abort,
body.auto-link-click-enabled.g5-trailcombo:not([data-mode="b"]):not([data-mode="c"]) .info-panel .panel-chain-action #gc5-action.gc5-act-play,
body.auto-link-click-enabled.g5-trailcombo:not([data-mode="b"]):not([data-mode="c"]) .info-panel .panel-chain-action #gc5-action.gc5-act-abort {
pointer-events: auto !important;
opacity: 1 !important;
}
body:not(.auto-link-click-enabled).g5-trail-action .info-panel .panel-chain-action #gc5-action,
body:not(.auto-link-click-enabled).g5-trailcombo .info-panel .panel-chain-action #gc5-action {
pointer-events: none !important;
cursor: default !important;
opacity: 0.45 !important;
}
body:not(.auto-link-click-enabled) .panel-chain-action:has(#gc5-action.gc5-act-play) .gc5-ic-play {
fill: rgba(52, 168, 82, 0.35);
filter: none;
}
/* Legacy moth placement (unused when moth lives in .panel-left-stack). */
.info-panel .panel-moth {
pointer-events: none;
overflow: visible;
}
.info-panel .panel-left-stack .panel-moth {
position: relative;
left: 0;
top: 0;
width: 37%;
height: auto;
flex: 1 1 0;
min-height: 0;
align-items: stretch;
justify-content: flex-start;
padding: 0;
}
/* Erase-all button (Color Mixer) — sits just below the container, only during the graph interlude */
#g5-erase-all {
display: none;
position: absolute;
top: 101%;
left: 50%;
transform: translateX(-50%);
z-index: 80025;
border-radius: 4px;
font-size: clamp(10px, 2.2cqw, 14px);
padding: 0.35em 0.7em 0.5em;
cursor: pointer;
pointer-events: auto;
line-height: 1;
transition: background 0.15s;
flex-direction: column;
align-items: center;
gap: 0.3em;
background: rgba(10, 5, 2, 0.82);
color: #f0d8be;
border: 1px solid rgba(210, 100, 40, 0.5);
}
#g5-erase-all:hover { background: rgba(180, 60, 20, 0.85); }
#g5-erase-all-label {
display: block;
font-size: 0.78em;
opacity: 0.7;
letter-spacing: 0.04em;
margin-top: 0.3em;
}
body.g5-graph-interlude #g5-erase-all { display: flex; }
/* During any gif time: keep button visible but non-clickable + dimmed */
body:not(.auto-link-click-enabled) #g5-new-puzzle {
pointer-events: none !important;
cursor: default !important;
opacity: 0.45;
}
/* Inline abort button inside panel text */
.g5-abort-inline {
display: inline-block;
margin-top: 0.3em;
padding: 0.15em 0.55em;
background: rgba(10, 5, 2, 0.82);
color: #f0d8be;
border: 1px solid rgba(210, 100, 40, 0.5);
border-radius: 3px;
cursor: pointer;
pointer-events: auto;
font-size: 0.85em;
transition: background 0.15s;
user-select: none;
position: relative;
z-index: 80030;
}
.g5-abort-inline:hover { background: rgba(180, 60, 20, 0.85); }
/* Relax overflow clipping and pointer-events on containers that host the abort span */
.info-panel .panel-text-row-inner:has(.g5-abort-inline),
.info-panel .panel-text-row:has(.g5-abort-inline),
.info-panel .panel-text-stack:has(.g5-abort-inline),
.info-panel-blackbox:has(.g5-abort-inline) {
overflow: visible !important;
pointer-events: auto !important;
}
body:not(.auto-link-click-enabled) .g5-abort-inline {
pointer-events: none !important;
cursor: default !important;
opacity: 0.45;
}
/* Optional hitbox outlines (toggle with window.debugLinks() → body.gm-nav-debug) */
body.gm-nav-debug.auto-link-click-enabled:not(.moth-flying) .container a.m0:not(.keyholdlink),
body.gm-nav-debug.auto-link-click-enabled:not(.moth-flying) .container a.m0b:not(.keyholdlink),
body.gm-nav-debug.auto-link-click-enabled:not(.moth-flying) .container a.m1:not(.keyholdlink),
body.gm-nav-debug.auto-link-click-enabled:not(.moth-flying) .container a.m2:not(.keyholdlink),
body.gm-nav-debug.auto-link-click-enabled:not(.moth-flying) .container a.m3:not(.keyholdlink),
body.gm-nav-debug.auto-link-click-enabled:not(.moth-flying) .container a.m4:not(.keyholdlink),
body.gm-nav-debug.auto-link-click-enabled:not(.moth-flying) .container a.m5:not(.keyholdlink),
body.gm-nav-debug.auto-link-click-enabled:not(.moth-flying) .container a.m6:not(.keyholdlink),
body.gm-nav-debug.auto-link-click-enabled:not(.moth-flying) .container a.m7:not(.keyholdlink),
body.gm-nav-debug.auto-link-click-enabled:not(.moth-flying) .container a.c,
body.gm-nav-debug.auto-link-click-enabled:not(.moth-flying) #moth-play-layer .moth-play-target {
outline: 1px dashed rgba(255, 255, 255, 0.4) !important;
}
body.gm-nav-debug.auto-link-click-enabled:not(.moth-flying)[data-mode="b"] .container a.keyholdlink {
outline: 1px dashed rgba(255, 160, 30, 0.75) !important;
}
/* Color Mixer (body.g5-graph-mix) — dots start pale grey and gain each visiting
agent's color (set inline by game-graph-mix.js). Unvisited = dim; visited = full. */
/* Grey base — plain flat fill, no border. */
body.g5-graph-interlude.g5-graph-mix .game-proxy {
display: block;
opacity: 0.5;
transform: translate(-50%, -50%);
box-shadow: none;
transition: background-color 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease;
}
/* Collected = colored: NO border — just the fill (with a subtle brightness pop). */
body.g5-graph-interlude.g5-graph-mix .game-proxy.game-lit {
opacity: 0.9;
box-shadow: none;
filter: saturate(1.1) brightness(1.08);
}
/* Tertiary (all three) — dark; a visit removes the visitor's color. */
body.g5-graph-interlude.g5-graph-mix .game-proxy.mix-tertiary {
opacity: 0.95;
box-shadow: none;
filter: none;
}
/* Offered grey nodes (reachable by the current player, not yet collected) carry
the ring cue. Collected/colored nodes stay borderless (":not(.game-lit)"). */
body.g5-graph-interlude.g5-graph-mix .game-proxy.mix-clickable:not(.game-lit) {
opacity: 1;
box-shadow: 0 0 0 1px #000, 0 0 8px 3px rgba(255, 255, 255, 0.5);
}
/* Only-gray mode exception: a DARK (collected) node that is still offerable is
otherwise borderless and invisible on the dark fill — give it a light ring so
the player can see it can be toggled back. */
body.g5-graph-interlude.g5-graph-mix .game-proxy.mix-gray-on.mix-clickable {
opacity: 1;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 8px 3px rgba(255, 255, 255, 0.45), 0 0 0 2px #000;
}
/* Color Mixer live score panel (left side, like the Walk Lab panel) */
#mix-score-panel {
position: fixed;
top: 8px;
left: 8px;
z-index: 999999999;
background: rgba(12, 12, 15, 0.95);
border: 1px solid #333;
border-radius: 5px;
padding: 8px 11px 10px;
font: 12px/1.55 "JetBrains Mono", monospace;
color: #ccc;
user-select: none;
min-width: 96px;
pointer-events: none;
}
#mix-score-panel .mix-score-title {
color: #c49a6c;
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 5px;
}
#mix-score-panel .mix-score-row {
display: flex;
justify-content: space-between;
gap: 16px;
font-weight: 700;
}
#mix-score-panel .mix-score-row[data-g="cat"] .mix-score-lbl { color: #f01010; }
#mix-score-panel .mix-score-row[data-g="man"] .mix-score-lbl { color: #2a7fff; }
#mix-score-panel .mix-score-row[data-g="moth"] .mix-score-lbl { color: #ffd400; }
#mix-score-panel .mix-score-val { color: #fff; }
#mix-score-panel .mix-rotate-row {
display: flex;
align-items: center;
gap: 6px;
margin-top: 7px;
padding-top: 7px;
border-top: 1px solid #333;
font-size: 11px;
color: #ccc;
cursor: pointer;
pointer-events: auto; /* panel is click-through; this control isn't */
}
#mix-score-panel .mix-rotate-row:hover { color: #fff; }
#mix-score-panel .mix-rotate-row input[type="checkbox"] {
width: 13px;
height: 13px;
accent-color: #6cae9a;
cursor: pointer;
flex-shrink: 0;
}
/* Consolidated per-agent grid: Show (board visibility) + Skip (rotation). */
#mix-score-panel .mix-agent-grid {
margin-top: 7px;
padding-top: 7px;
border-top: 1px solid #333;
pointer-events: auto; /* panel is click-through; this sub-panel isn't */
}
#mix-score-panel .mix-agent-grid-title {
color: #c49a6c;
font-weight: 700;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 4px;
}
#mix-score-panel .mix-agent-grid-row {
display: grid;
grid-template-columns: 1fr 32px 32px;
align-items: center;
font-size: 11px;
color: #ccc;
}
#mix-score-panel .mix-agent-grid-row .mix-ag-lbl { text-align: left; }
#mix-score-panel .mix-agent-grid-head {
color: #888;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 2px;
}
#mix-score-panel .mix-agent-grid-head span:not(.mix-ag-lbl) { text-align: center; }
#mix-score-panel .mix-agent-grid-row[data-g="cat"] .mix-ag-lbl { color: #f01010; }
#mix-score-panel .mix-agent-grid-row[data-g="man"] .mix-ag-lbl { color: #2a7fff; }
#mix-score-panel .mix-agent-grid-row[data-g="moth"] .mix-ag-lbl { color: #ffd400; }
#mix-score-panel .mix-agent-grid-row input[type="checkbox"] {
width: 13px;
height: 13px;
margin: 0 auto;
cursor: pointer;
}
#mix-score-panel .mix-agent-grid-row input[data-mix-show] { accent-color: #6cae9a; }
#mix-score-panel .mix-agent-grid-row input[data-rot-skip] { accent-color: #8a4a4a; }
#mix-score-panel #mix-reset-btn {
display: block;
width: 100%;
margin-top: 9px;
padding: 5px 8px;
background: #1a1a1e;
color: #ccc;
border: 1px solid #444;
border-radius: 3px;
font: 700 11px "JetBrains Mono", monospace;
cursor: pointer;
pointer-events: auto; /* panel is click-through; this control isn't */
}
#mix-score-panel #mix-reset-btn:hover { border-color: #c49a6c; color: #c49a6c; }
/* Excluded nodes are dropped from the board. */
body.g5-graph-interlude.g5-graph-mix .game-proxy.mix-excluded {
display: none !important;
}
/* "Exclude nodes" collapsible sub-panel. */
#mix-score-panel .mix-exclude {
margin-top: 8px;
border-top: 1px solid #333;
padding-top: 6px;
}
#mix-score-panel .mix-exclude-head {
color: #c49a6c;
font-weight: 700;
cursor: pointer;
pointer-events: auto;
user-select: none;
}
#mix-score-panel .mix-exclude-caret {
display: inline-block;
transition: transform 0.15s ease;
}
#mix-score-panel .mix-exclude:not(.collapsed) .mix-exclude-caret { transform: rotate(90deg); }
#mix-score-panel .mix-exclude.collapsed .mix-exclude-body { display: none; }
#mix-score-panel .mix-exclude-body {
margin-top: 5px;
max-height: 190px;
overflow-y: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px 8px;
}
#mix-score-panel .mix-exclude-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: #bbb;
cursor: pointer;
pointer-events: auto;
}
#mix-score-panel .mix-exclude-item input[type="checkbox"] {
width: 12px;
height: 12px;
margin: 0;
accent-color: #8a4a4a;
cursor: pointer;
flex-shrink: 0;
}
#mix-score-panel .mix-exclude-empty { color: #666; }
/* Floating score delta (+3/+2/+1/-1) that rises off a node on each paint. */
body.g5-graph-interlude.g5-graph-mix .mix-delta-float {
position: absolute;
z-index: 80020;
font: 700 5cqw/1 "JetBrains Mono", monospace;
text-shadow: 0 0 3px #000, 0 1px 2px #000;
pointer-events: none;
white-space: nowrap;
transform: translate(-50%, -50%);
animation: mix-delta-rise 2s ease-out forwards;
}
@keyframes mix-delta-rise {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
15% { opacity: 1; transform: translate(-50%, -120%) scale(1.1); }
100% { opacity: 0; transform: translate(-50%, -320%) scale(1); }
}
/* Play with Moth (GameMode): clickable perch dots inside .container —
same geometry and color system as cat A-mode links (a.mX / ::after dots). */
body:not(.gm-play-moth) #moth-play-layer {
display: none !important;
}
#moth-play-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 80016;
}
#moth-play-layer .moth-play-target {
position: absolute;
box-sizing: border-box;
width: 15.5%;
height: 14.5%;
margin: 0;
padding: 0;
border: none;
border-radius: 100%;
transform: translate(-50%, -50%);
pointer-events: auto;
cursor: pointer;
background: transparent;
}
#moth-play-layer .moth-play-target::after {
content: '';
width: 8cqw;
height: 8cqw;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 100%;
opacity: 0;
transition: opacity 0.2s ease;
}
#moth-play-layer .moth-play-target:disabled {
visibility: hidden;
pointer-events: none;
}
/* Moth play target gif/flight hiding is handled by the inverted unified
visibility block above (body.auto-link-click-enabled:not(.moth-flying)). */
/* Per-perch dot colors — same variables as cat/man graph */
#moth-play-layer .moth-play-target[data-moth-perch="lok0"]::after { background-color: var(--dot-m0); }
#moth-play-layer .moth-play-target[data-moth-perch="lok0b"]::after { background-color: var(--dot-m0b); }
#moth-play-layer .moth-play-target[data-moth-perch="lok1"]::after { background-color: var(--dot-m1); }
#moth-play-layer .moth-play-target[data-moth-perch="lok2"]::after { background-color: var(--dot-m2); }
#moth-play-layer .moth-play-target[data-moth-perch="lok3"]::after { background-color: var(--dot-m3); }
#moth-play-layer .moth-play-target[data-moth-perch="lok4"]::after { background-color: var(--dot-m4); }
#moth-play-layer .moth-play-target[data-moth-perch="lok5"]::after { background-color: var(--dot-m5); }
#moth-play-layer .moth-play-target[data-moth-perch="lok6"]::after { background-color: var(--dot-m6); }
#moth-play-layer .moth-play-target[data-moth-perch="lok7"]::after { background-color: var(--dot-m7); }
#moth-play-layer .moth-play-target[data-moth-perch="lok8"]::after { background-color: var(--dot-c-gledasliku); }
#moth-play-layer .moth-play-target[data-moth-perch="lok-sjedi"]::after { background-color: var(--dot-c-sjedi); }
#moth-play-layer .moth-play-target[data-moth-perch="lok-sjedix"]::after { background-color: var(--dot-c-sjedix); }
/* ── Moth (moth-new.js) ────────────────────────────────────────────────────── */
/* Register --moth-rot as a typed angle so it can be transitioned (the perched
pre-aim turn animates this variable; keyframes read it for the heading). */
@property --moth-rot {
syntax: '';
inherits: false;
initial-value: 0deg;
}
/* --moth-rot (set inline by moth-new.js) holds the moth's heading and lives ONLY on
the base transform below — never inside a keyframe. That lets the perched pre-aim
turn smoothly transition --moth-rot without an animation fighting it on transform
(which caused a snap at the end of the turn). Keyframes here touch opacity only. */
@keyframes moth-flyin {
0% { opacity: 0; }
100% { opacity: 1; }
}
[data-role="bug"] {
position: absolute;
width: 0;
height: 0;
pointer-events: none;
z-index: 8000;
opacity: 0;
transform: translate(-50%, -50%) rotate(var(--moth-rot, 0deg));
}
/* B-mode: keyhole image is z-index 80007 — moth must stack above it (same band as legacy .key-hold-moth*) */
body[data-mode="b"] .container [data-role="bug"] {
z-index: 80009 !important;
}
/* Distant / shared-location moth: above zaklon (80008) and radial cone .container::before (80010) */
body[data-mode="b"] .container [data-role="bug"].b-distant:not(.moth-b-hidden) {
z-index: 80011 !important;
}
/* Moth clickable buttons are hidden in keyhole (B) mode by default — even when
the moth is player-controlled — because the A-mode board is hidden there.
The Game Mode checkbox "Hide moth buttons in B (keyhole) mode" is ON by
default; unchecking it adds body.gm-show-moth-b to reveal them again. */
body[data-mode="b"]:not(.gm-show-moth-b) #moth-play-layer {
display: none !important;
}
/* While a game/walk is running the .game-proxy node dots (80015) are drawn at every
* node. The moth carrier is flat-centred on its perch node, so without this it would
* be painted OVER by that node's dot. Lift the moth just above the dots (and the
* #moth-play-layer at 80016) so a moth sitting on a node stays visible on top of it.
* A-MODE ONLY: game-proxy dots exist only in A mode, and B mode has its own tuned
* moth stacking (80009) for the distant keyhole moth — don't disturb it. */
body:not([data-mode="b"]).g5-graph-interlude .container [data-role="bug"],
body:not([data-mode="b"]).g5-walk-active .container [data-role="bug"] {
z-index: 80020 !important;
}
/* Lok7 window overlay (prozorpodlogacijeli peaks at z-index 80006).
* Must beat div.container::before light cone (80010), .game-proxy dots (80015),
* and #moth-play-layer (80016) so perched AND transitioning moth stays visible.
*/
body.prozorpodlogacijeli-pokazan .container [data-role="bug"] {
z-index: 80170 !important;
isolation: isolate;
}
/* moth-new.js only: run debugMothNew() in console — outlines bug carrier + .keyhold-moth-css (no mothhide UI). */
body.moth-new-debug .container [data-role="bug"] {
box-sizing: border-box;
min-width: 22px;
min-height: 22px;
outline: 2px dashed rgba(255, 60, 200, 0.95);
outline-offset: 2px;
background: rgba(255, 60, 200, 0.08);
}
body.moth-new-debug .container [data-role="bug"].moth-b-hidden {
opacity: 1 !important;
visibility: visible !important;
outline-color: rgba(255, 165, 0, 0.95);
}
body.moth-new-debug .container .keyhold-moth-css {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
min-width: 28px;
min-height: 28px;
outline: 2px dashed rgba(60, 200, 255, 0.95);
outline-offset: 2px;
background: rgba(60, 200, 255, 0.12);
pointer-events: auto;
z-index: 80100;
}
/* B-mode: no distantMothCombos entry for this view + moth lok — hide completely */
body[data-mode="b"] .container [data-role="bug"].moth-b-hidden {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Must follow rule above: debug visibility wins when body.moth-new-debug */
body.moth-new-debug[data-mode="b"] .container [data-role="bug"].moth-b-hidden {
opacity: 1 !important;
visibility: visible !important;
}
/* Perch positions — vars from moth-new.js PERCH_POS (applyPerchCoordsToCssVars on div.container).
No fallbacks: PERCH_POS is the only source. */
[data-role="bug"].lok0 { top: var(--perch-lok0-top); left: var(--perch-lok0-left); }
[data-role="bug"].lok0b { top: var(--perch-lok0b-top); left: var(--perch-lok0b-left); }
[data-role="bug"].lok1 { top: var(--perch-lok1-top); left: var(--perch-lok1-left); }
[data-role="bug"].lok2 { top: var(--perch-lok2-top); left: var(--perch-lok2-left); }
[data-role="bug"].lok3 { top: var(--perch-lok3-top); left: var(--perch-lok3-left); }
[data-role="bug"].lok4 { top: var(--perch-lok4-top); left: var(--perch-lok4-left); }
[data-role="bug"].lok5 { top: var(--perch-lok5-top); left: var(--perch-lok5-left); }
[data-role="bug"].lok6 { top: var(--perch-lok6-top); left: var(--perch-lok6-left); }
[data-role="bug"].lok7 { top: var(--perch-lok7-top); left: var(--perch-lok7-left); }
[data-role="bug"].lok8 { top: var(--perch-lok8-top); left: var(--perch-lok8-left); }
[data-role="bug"].lok-sjedi { top: var(--perch-lok-sjedi-top); left: var(--perch-lok-sjedi-left); }
[data-role="bug"].lok-sjedix { top: var(--perch-lok-sjedix-top); left: var(--perch-lok-sjedix-left); }
/* Visible: gentle opacity fade-in (heading stays on the base transform) */
[data-role="bug"].shown-bug {
opacity: 1;
animation: moth-flyin 1.2s ease-out forwards;
}
/* Parked (moth-stay): just visible; heading held by --moth-rot on the base transform */
[data-role="bug"].moth-stay {
opacity: 1;
}
/* Wall painting (lok8): A-MODE ONLY — once the moth lands it slowly fades into the
painting over 5s and holds at 0. On flyoff, _flyTo clears className and sets inline
opacity:1, so the moth shows instantly again for the travel flight. In B-mode the
distant moth variants (lok81/lok82) stay fully visible (no fade). */
@keyframes moth-fadeout5 {
0% { opacity: 1; }
100% { opacity: 0; }
}
body:not([data-mode="b"]) [data-role="bug"].moth-fade-out5 {
animation: moth-fadeout5 5s linear forwards;
}
/* Frozen (pause CSS animation during man-agent GIF transitions) */
[data-role="bug"].moth-frozen {
animation-play-state: paused !important;
}
/* Pure-CSS moth silhouette — elongated downward triangle, split into two halves.
* Sized in cqw (container query width) so it scales with the game canvas,
* not with browser zoom — same behaviour as the nav dot buttons. */
[data-role="bug"]::before,
[data-role="bug"]::after {
content: '';
position: absolute;
width: 2.04cqw; /* +20% (was 1.7cqw) */
height: 6.48cqw; /* +20% (was 5.4cqw) */
background: #3a3a3a;
top: -3.12cqw; /* +20% (was -2.6cqw) */
}
/* LEFT half */
[data-role="bug"]::before {
right: 0;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}
/* RIGHT half — mirror */
[data-role="bug"]::after {
left: 0;
clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}
/* PNG sprite (Game Mode → Moth PNG sprite) replaces CSS triangles above. */
body.gm-moth-sprite [data-role="bug"]::before,
body.gm-moth-sprite [data-role="bug"]::after {
display: none !important;
animation: none !important;
}
body.gm-moth-sprite [data-role="bug"] .moth-sprite-wrap {
/* PNG: head/tip at top of art (y=0), wings spread at bottom. scaleY(-1) on wings
aligns tip toward the lok perch. Pivot X ≈ 41.7% matches tip pixel on 18px-wide art. */
--moth-tip-y: 3.36cqw; /* +20% (was 2.8cqw) */
position: absolute;
left: 0;
top: var(--moth-tip-y);
height: 6.48cqw; /* +20% (was 5.4cqw) */
width: 0;
pointer-events: none;
}
body.gm-moth-sprite [data-role="bug"] .moth-sprite-wing {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: auto;
max-width: none;
pointer-events: none;
transform: translate(-41.667%, 0) scaleY(-1);
transform-origin: 41.667% 0;
object-fit: contain;
image-rendering: pixelated;
image-rendering: crisp-edges;
will-change: clip-path;
}
body.moth-shared.gm-moth-sprite .container [data-role="bug"] .moth-sprite-wrap {
/* Shared B-mode: pseudo top -6.24cqw, height 12.96cqw → tip +6.72cqw (all +20%) */
--moth-tip-y: 6.72cqw;
height: 12.96cqw;
}
/* Wing flap during active flight — faster beat, outer corner folds inward */
@keyframes moth-flap-fly-l {
0%, 100% { clip-path: polygon( 0% 0%, 100% 0%, 100% 100%); }
50% { clip-path: polygon( 55% 0%, 100% 0%, 100% 100%); }
}
@keyframes moth-flap-fly-r {
0%, 100% { clip-path: polygon(0% 0%, 100% 0%, 0% 100%); }
50% { clip-path: polygon(0% 0%, 45% 0%, 0% 100%); }
}
[data-role="bug"].moth-flying::before {
animation: moth-flap-fly-l 0.19s ease-in-out infinite;
}
[data-role="bug"].moth-flying::after {
animation: moth-flap-fly-r 0.19s ease-in-out infinite;
}
/* Sporadic idle flap while perched — a short, gentle burst triggered by JS at
* random intervals (moth-new.js _scheduleIdleFlap). Plays a few beats then rests.
* Skipped while flying so it never fights the faster flight flap above. */
@keyframes moth-flap-idle-l {
0%, 100% { clip-path: polygon( 0% 0%, 100% 0%, 100% 100%); }
50% { clip-path: polygon(48% 0%, 100% 0%, 100% 100%); }
}
@keyframes moth-flap-idle-r {
0%, 100% { clip-path: polygon(0% 0%, 100% 0%, 0% 100%); }
50% { clip-path: polygon(0% 0%, 52% 0%, 0% 100%); }
}
[data-role="bug"].moth-flap-idle:not(.moth-flying)::before {
animation: moth-flap-idle-l 0.24s ease-in-out 3;
}
[data-role="bug"].moth-flap-idle:not(.moth-flying)::after {
animation: moth-flap-idle-r 0.24s ease-in-out 3;
}
#mothhide-golden-brother.mothhide-golden-brother {
width: 0;
height: 0;
pointer-events: none;
opacity: 1;
z-index: 80009;
}
#mothhide-golden-brother.mothhide-golden-brother::before,
#mothhide-golden-brother.mothhide-golden-brother::after {
content: '';
position: absolute;
width: 7px;
height: 22px;
background: #3a3a3a;
top: -10px;
}
#mothhide-golden-brother.mothhide-golden-brother::before {
right: 0;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}
#mothhide-golden-brother.mothhide-golden-brother::after {
left: 0;
clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}
/* ── Custom cursors ───────────────────────────────────────────────────────────
LOOK = default cursor everywhere inside the game container.
MOVE = cat/man navigation links.
X = shown across the whole container for the gif-time duration
(while the click gate is closed: body:not(.auto-link-click-enabled)).
Re-applied after the unified link-visibility block, so !important is required
to beat its `cursor: pointer/default`. cursorkomp.png intentionally omitted. */
/* DEFAULT — look cursor everywhere inside the container */
.container,
.container a {
cursor: url('../images/cursor/cursorlook.png'), default !important;
}
/* MOVE — UI buttons that must use the move cursor instead of the look/default:
the a17 start-screen buttons (START / ABOUT) and both lok6 paper buttons
(the trigger .lok6-btn and the on-paper .lok6-puzz-btn). !important beats the
generic `.container a` look-cursor above and the