@font-face { font-family: "RetroPixel"; src: url(data:font/woff;base64,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) format("woff"); font-display: block; }
@font-face { font-family: "RetroPixelMono"; src: url(data:font/woff;base64,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) format("woff"); font-display: block; }
@font-face { font-family: "RetroUI"; src: local("Tahoma"); font-display: swap; }
@font-face { font-family: "RetroUIAlt"; src: local("Liberation Sans"); size-adjust: 97%; font-display: swap; }
@font-face { font-family: "RetroUIAlt"; src: local("DejaVu Sans"); size-adjust: 93%; font-display: swap; }
@font-face { font-family: "RetroUIAlt"; src: local("Verdana"); size-adjust: 91%; font-display: swap; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
width: 100%;
height: 100%;
overflow: hidden;
overscroll-behavior: none;
background: #000000;
color: #000000;
font-family: "RetroPixel", "RetroUI", "RetroUIAlt", Tahoma, Verdana, sans-serif;
font-size: 11px;
line-height: 1.3;
font-kerning: none;
font-variant-ligatures: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
touch-action: manipulation;
}
input, textarea {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
body {
--badgetext: #ffffff;
--tip: #ffffe1;
--tiptext: #000000;
--tipline: #000000;
--tipcell: #f0e9bd;
--tipdim: #5b5334;
--face: #d4d0c8;
--face-l: #e6e3dd;
--face-ll: #f2f0ec;
--face-d: #9d9a94;
--face-dd: #808080;
--edge: #404040;
--hi: #ffffff;
--lo: #0a0a0a;
--text: #000000;
--dim: #4a4a4a;
--title1: #0a246a;
--title2: #a6caf0;
--titlei1: #808080;
--titlei2: #c0c0c0;
--titletext: #ffffff;
--sel: #0a246a;
--seltext: #ffffff;
--field: #ffffff;
--fieldtext: #000000;
--accent: #0a246a;
--ok: #007800;
--warn: #b08000;
--err: #a00000;
--wall: #3a6ea5;
}
body[data-theme="theme_slate"] {
--face: #c3c7cb;
--face-l: #dcdfe2;
--face-ll: #eef0f2;
--face-d: #909499;
--face-dd: #74787d;
--edge: #383c40;
--title1: #1d3c5c;
--title2: #7fa8cc;
--titlei1: #74787d;
--titlei2: #a8acb0;
--sel: #1d3c5c;
--accent: #1d3c5c;
--wall: #45637f;
}
body[data-theme="theme_sand"] {
--face: #ded8c4;
--face-l: #efeade;
--face-ll: #f8f5ee;
--face-d: #a9a48e;
--face-dd: #8a836c;
--edge: #4a4536;
--title1: #6b4a12;
--title2: #d8b46a;
--titlei1: #8a836c;
--titlei2: #bcb6a2;
--sel: #6b4a12;
--accent: #6b4a12;
--wall: #8a7a52;
}
body[data-theme="theme_amber"] {
--tip: #2a231a;
--tiptext: #f0e2c4;
--tipline: #7a6a52;
--tipcell: #3a3125;
--tipdim: #bda986;
--face: #3a3125;
--face-l: #4c4133;
--face-ll: #5e5140;
--face-d: #2a231a;
--face-dd: #1b1610;
--edge: #0c0a07;
--hi: #7a6a52;
--lo: #000000;
--text: #f0e2c4;
--dim: #bda986;
--title1: #4a3312;
--title2: #b98a3c;
--titlei1: #2c2419;
--titlei2: #46392a;
--sel: #7a5416;
--field: #221c14;
--fieldtext: #f0e2c4;
--accent: #e0b060;
--wall: #2a2016;
}
body[data-theme="theme_matrix"] {
--badgetext: #0a1d12;
--tip: #06140b;
--tiptext: #7dffab;
--tipline: #2f8f56;
--tipcell: #0a1d12;
--tipdim: #46b374;
--face: #0a1d12;
--face-l: #12301e;
--face-ll: #1a4128;
--face-d: #06140b;
--face-dd: #030a06;
--edge: #010402;
--hi: #2f8f56;
--lo: #000000;
--text: #7dffab;
--dim: #46b374;
--title1: #06301a;
--title2: #35c46f;
--titlei1: #071a10;
--titlei2: #123021;
--titletext: #b6ffd0;
--sel: #157a3d;
--seltext: #ccffdd;
--field: #04120a;
--fieldtext: #7dffab;
--accent: #4dff92;
--ok: #6cff9c;
--warn: #d7ff5e;
--err: #ff7a6a;
--wall: #04140a;
}
body[data-theme="theme_brass"] {
--badgetext: #241b10;
--tip: #221e18;
--tiptext: #f6e6bf;
--tipline: #8a7550;
--tipcell: #2f2a22;
--tipdim: #c3ac82;
--face: #2f2a22;
--face-l: #423a2e;
--face-ll: #554a3a;
--face-d: #221e18;
--face-dd: #14110d;
--edge: #0a0806;
--hi: #8a7550;
--lo: #000000;
--text: #f6e6bf;
--dim: #c3ac82;
--title1: #6b4a12;
--title2: #e0b060;
--titlei1: #2a241a;
--titlei2: #43392a;
--titletext: #fff6e0;
--sel: #8a5f18;
--seltext: #fff6e0;
--field: #1d1913;
--fieldtext: #f6e6bf;
--accent: #f0c070;
--ok: #8ad07a;
--warn: #e8c060;
--err: #e08a70;
--wall: #241d14;
}
body[data-theme="theme_night"] {
--tip: #2a2a2a;
--tiptext: #e4e4e4;
--tipline: #6e6e6e;
--tipcell: #3a3a3a;
--tipdim: #a8a8a8;
--face: #3a3a3a;
--face-l: #4c4c4c;
--face-ll: #5c5c5c;
--face-d: #2a2a2a;
--face-dd: #1c1c1c;
--edge: #0a0a0a;
--hi: #6e6e6e;
--lo: #000000;
--text: #e4e4e4;
--dim: #a8a8a8;
--title1: #101a2e;
--title2: #3c5c86;
--titlei1: #232323;
--titlei2: #3c3c3c;
--sel: #26456e;
--field: #1e1e1e;
--fieldtext: #e4e4e4;
--accent: #7fa8dc;
--wall: #16283c;
}
#screen {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 400; }
.hidden { display: none !important; }
#boot {
background: #000000;
color: #c8c8c8;
font-family: "RetroPixelMono", "Lucida Console", Consolas, monospace;
padding: 24px 30px;
overflow: hidden;
z-index: 500;
}
.post { max-width: 760px; }
.postline { font-size: 13px; padding: 2px 0; color: #c8c8c8; }
.bootbrand { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); text-align: center; }
.bootlogo { display: flex; justify-content: center; margin-bottom: 16px; }
.boottitle { font-family: inherit; font-size: 30px; font-weight: 700; color: #ffffff; }
.bootsub { font-family: inherit; font-size: 12px; color: #9aa8b8; margin-top: 6px; letter-spacing: 0.08em; }
.bootbar {
position: absolute;
left: 50%;
bottom: 24%;
transform: translateX(-50%);
width: min(320px, 70vw);
height: 16px;
background: #000000;
border: 1px solid #6a6a6a;
padding: 2px;
}
.bootbarfill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, #3a6ea5 0 10px, #000000 10px 13px); transition: width 2.4s linear; }
.bootskip {
position: absolute;
right: 20px;
bottom: 18px;
font-family: inherit;
font-size: 11px;
color: #d4d0c8;
background: #3a3a3a;
border: 1px solid #6a6a6a;
padding: 6px 16px;
cursor: pointer;
}
.bootskip:hover { background: #4a4a4a; }
#login {
background: linear-gradient(180deg, #3a6ea5 0%, #2d587f 100%);
display: flex;
align-items: center;
justify-content: center;
z-index: 480;
padding: 16px;
overflow: auto;
}
.loginpanel {
width: min(440px, 96vw);
background: var(--face);
padding: 0 0 14px;
color: var(--text);
box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll), 3px 3px 10px rgba(0, 0, 0, 0.5);
}
.loginhead {
display: flex;
align-items: center;
gap: 12px;
margin: 3px;
padding: 14px 16px;
background: linear-gradient(90deg, var(--title1), var(--title2));
color: var(--titletext);
}
.loginlogo { display: flex; }
.logintitle { font-size: 18px; font-weight: 700; }
.loginsub { font-size: 11px; margin-top: 3px; }
.loginhint { padding: 12px 18px 8px; font-size: 11px; color: var(--dim); }
.loginlist { padding: 0 14px; display: flex; flex-direction: column; gap: 5px; }
.loginrow {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
background: var(--face);
border: none;
cursor: pointer;
text-align: left;
color: var(--text);
font: inherit;
box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll);
}
.loginrow:active { box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--face-dd), inset -2px -2px 0 var(--face-ll); }
.loginrow.disabled { color: var(--face-dd); }
.logincol { flex: 1; min-width: 0; }
.loginname { font-weight: 700; font-size: 12px; }
.loginnote { font-size: 11px; color: var(--dim); }
.loginlang { display: flex; gap: 8px; padding: 14px 14px 0; justify-content: center; }
.langbtn {
font: inherit;
font-size: 11px;
padding: 6px 18px;
background: var(--face);
border: none;
cursor: pointer;
color: var(--text);
box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll);
}
.langbtn.on { background: var(--face-l); font-weight: 700; box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--face-dd), inset -2px -2px 0 var(--face-ll); }
#shell { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }
#desktop { touch-action: none; }
#desktop {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 40px;
overflow: hidden;
background: var(--wall);
}
body[data-wall="wall_grid"] #desktop { background: var(--wall); }
body[data-wall="wall_dusk"] #desktop { background: linear-gradient(180deg, #6a4a72 0%, #a5705c 55%, #d9a05e 78%, #3a2a3a 100%); }
body[data-wall="wall_blueprint"] #desktop {
background:
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 24px),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 24px),
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 120px),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 120px),
#1d4e8f;
}
body[data-wall="wall_tape"] #desktop {
background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 3px, rgba(0, 0, 0, 0.18) 3px 9px), linear-gradient(100deg, #4a3b30 0%, #6b5340 45%, #33291f 100%);
}
body[data-wall="wall_window"] #desktop {
background:
linear-gradient(115deg, rgba(255, 226, 170, 0.30) 0%, rgba(255, 226, 170, 0) 48%),
repeating-linear-gradient(115deg, rgba(255, 240, 205, 0.10) 0 56px, transparent 56px 200px),
linear-gradient(170deg, #5a6f86, #24303d);
}
body[data-wall="wall_matrix"] #desktop {
background: radial-gradient(ellipse at 50% -10%, #082616 0%, #020a05 62%, #010402 100%);
}
#deskrain { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
body[data-wall="wall_night"] #desktop {
background:
radial-gradient(circle at 78% 26%, rgba(255, 214, 140, 0.30), transparent 22%),
repeating-linear-gradient(0deg, rgba(255, 214, 140, 0.05) 0 3px, transparent 3px 96px),
repeating-linear-gradient(90deg, rgba(10, 18, 34, 0.55) 0 2px, transparent 2px 120px),
linear-gradient(185deg, #101c30 0%, #0a1120 58%, #06080f 100%);
}
body[data-wall="wall_circuit"] #desktop {
background:
repeating-linear-gradient(90deg, rgba(150, 220, 170, 0.18) 0 2px, transparent 2px 44px),
repeating-linear-gradient(0deg, rgba(150, 220, 170, 0.12) 0 2px, transparent 2px 68px),
radial-gradient(circle at 22% 34%, rgba(180, 240, 190, 0.16) 0 4px, transparent 5px),
radial-gradient(circle at 68% 72%, rgba(180, 240, 190, 0.16) 0 4px, transparent 5px),
linear-gradient(160deg, #14472a, #072012);
}
body[data-wall="wall_paper"] #desktop { background: repeating-linear-gradient(0deg, rgba(120, 130, 160, 0.18) 0 1px, transparent 1px 26px), linear-gradient(180deg, #efe9d8, #ded6c1); }
body[data-wall="wall_signal"] #desktop {
background:
repeating-linear-gradient(0deg, rgba(224, 176, 96, 0.10) 0 1px, transparent 1px 18px),
radial-gradient(ellipse at 50% 120%, rgba(224, 176, 96, 0.24), transparent 62%),
linear-gradient(180deg, #241a10, #0d0906);
}
body[data-wall="wall_ark"] #desktop {
background:
repeating-radial-gradient(circle at 50% 46%, rgba(126, 216, 205, 0.13) 0 2px, transparent 2px 44px),
radial-gradient(circle at 50% 46%, rgba(47, 122, 114, 0.55), transparent 62%),
#0f2a2a;
}
#desktop::after {
content: "";
position: absolute;
top: -20%;
right: -20%;
bottom: -20%;
left: -20%;
pointer-events: none;
z-index: 0;
opacity: 0;
}
.buildstamp { position: absolute; right: 12px; bottom: 10px; z-index: 0; text-align: right; pointer-events: none; user-select: none; color: rgba(255, 255, 255, 0.42); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45); }
.stampname { font-size: 11px; letter-spacing: 0.04em; }
.stampline { font-size: 11px; opacity: 0.75; }
body[data-wall="wall_paper"] .buildstamp { color: rgba(40, 34, 24, 0.45); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4); }
@media (max-width: 620px) { .buildstamp { display: none; } }
@media (max-height: 460px) { .buildstamp { display: none; } }
#deskicons { touch-action: none; }
#deskicons { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
body[data-wall="wall_blueprint"] #desktop::after {
opacity: 1;
background: linear-gradient(115deg, transparent 42%, rgba(190, 225, 255, 0.13) 50%, transparent 58%);
animation: wallsweep 19s linear infinite;
}
body[data-wall="wall_window"] #desktop::after {
opacity: 1;
background: linear-gradient(115deg, transparent 40%, rgba(255, 236, 190, 0.16) 50%, transparent 60%);
animation: wallsweep 26s linear infinite;
}
body[data-wall="wall_matrix"] #desktop::after { opacity: 0; }
body[data-wall="wall_matrix"] .deskiconlabel { color: #a6ffc4; text-shadow: 0 0 5px rgba(40, 255, 120, 0.6); }
body[data-wall="wall_matrix"] .buildstamp { color: rgba(130, 255, 180, 0.55); text-shadow: 0 0 6px rgba(30, 220, 110, 0.55); }
body[data-wall="wall_night"] #desktop::after {
opacity: 1;
background: radial-gradient(circle at 78% 26%, rgba(255, 226, 170, 0.18), transparent 26%);
animation: wallpulse 9s ease-in-out infinite;
}
body[data-wall="wall_circuit"] #desktop::after {
opacity: 1;
background: linear-gradient(90deg, transparent 44%, rgba(150, 240, 180, 0.16) 50%, transparent 56%);
animation: wallsweep 13s linear infinite;
}
body[data-wall="wall_tape"] #desktop::after {
opacity: 1;
background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 7px);
animation: walldrift 6s linear infinite;
}
body[data-wall="wall_signal"] #desktop::after {
opacity: 1;
background: linear-gradient(0deg, transparent 40%, rgba(240, 200, 130, 0.12) 50%, transparent 60%);
animation: wallrise 9s linear infinite;
}
@keyframes wallrise {
0% { transform: translateY(26%); }
100% { transform: translateY(-26%); }
}
body[data-wall="wall_ark"] #desktop::after {
opacity: 1;
background: repeating-radial-gradient(circle at 50% 46%, rgba(126, 216, 205, 0.10) 0 2px, transparent 2px 44px);
animation: wallpulse 11s ease-in-out infinite;
}
@keyframes wallsweep {
0% { transform: translateX(-32%); }
100% { transform: translateX(32%); }
}
@keyframes walldrift {
0% { transform: translateY(0); }
100% { transform: translateY(7px); }
}
@keyframes wallpulse {
0%, 100% { transform: scale(1); opacity: 0.75; }
50% { transform: scale(1.05); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.deskicon.guide::before { animation: none; }
.guidetip { animation: none; }
#desktop::after { animation: none; }
#crt { animation: none; }
}
.deskicon {
position: absolute;
width: 76px;
padding: 4px 2px;
background: transparent;
border: 1px dotted transparent;
color: #ffffff;
font: inherit;
font-size: 11px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
cursor: default;
text-align: center;
touch-action: none;
}
.deskiconlabel {
padding: 1px 3px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
line-height: 1.2;
max-height: 2.5em;
overflow: hidden;
word-break: break-word;
}
.deskicon.sel { border-color: rgba(255, 255, 255, 0.85); }
.deskicon.sel .deskiconlabel { background: var(--sel); text-shadow: none; }
.deskicon.sel .iconbox { filter: brightness(0.72) saturate(1.5); }
body[data-wall="wall_paper"] .deskicon { color: #101010; }
body[data-wall="wall_paper"] .deskiconlabel { text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9); }
body[data-wall="wall_paper"] .deskicon.sel .deskiconlabel { color: #ffffff; text-shadow: none; }
#taskbar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 40px;
display: flex;
align-items: center;
gap: 4px;
padding: 2px 3px;
background: var(--face);
box-shadow: inset 0 1px 0 var(--hi), inset 0 2px 0 var(--face-l), inset 0 -1px 0 var(--face-dd);
z-index: 300;
}
#startbtn { min-height: 32px; }
#startbtn {
display: flex;
align-items: center;
gap: 5px;
height: 28px;
padding: 0 11px 0 6px;
font: inherit;
font-size: 12px;
font-weight: 700;
color: var(--text);
background: var(--face);
border: none;
cursor: pointer;
flex: 0 0 auto;
box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll);
}
#startbtn:active, #startbtn.on { box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--face-dd), inset -2px -2px 0 var(--face-ll); }
#startglyph { display: flex; align-items: center; }
#quicklaunch {
display: flex;
gap: 1px;
padding: 0 3px;
flex: 0 0 auto;
box-shadow: inset 1px 0 0 var(--face-dd), inset -1px 0 0 var(--hi);
}
.quickbtn { min-height: 28px; min-width: 28px; }
.quickbtn {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
}
.quickbtn:hover { box-shadow: inset -1px -1px 0 var(--face-dd), inset 1px 1px 0 var(--hi); }
.quickbtn:active { box-shadow: inset 1px 1px 0 var(--face-dd), inset -1px -1px 0 var(--hi); }
#tasks { display: flex; gap: 3px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.taskbtn { min-height: 30px; }
.taskbtn {
display: flex;
align-items: center;
gap: 4px;
height: 22px;
min-width: 0;
max-width: 160px;
flex: 1 1 40px;
padding: 0 6px;
font: inherit;
font-size: 11px;
color: var(--text);
background: var(--face);
border: none;
cursor: pointer;
box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll);
}
.taskbtn.on {
font-weight: 700;
background: repeating-conic-gradient(var(--face-l) 0% 25%, var(--face) 0% 50%) 0 0 / 2px 2px;
box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--face-dd), inset -2px -2px 0 var(--face-ll);
}
.tasklabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tray {
display: flex;
align-items: center;
gap: 5px;
height: 28px;
padding: 0 7px;
flex: 0 0 auto;
background: var(--face-d);
box-shadow: inset 1px 1px 0 var(--face-dd), inset 2px 2px 0 var(--edge), inset -1px -1px 0 var(--hi), inset -2px -2px 0 var(--face-l);
}
.overlaystreak { font-size: 12px; font-weight: 700; color: var(--accent); margin-top: 2px; animation: streakpop 0.5s ease-out 1; }
@keyframes streakpop { 0% { transform: scale(0.7); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
.overlayline.dim { color: var(--dim); font-size: 11px; }
.statswrap { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.statsbox { box-shadow: inset -1px -1px 0 var(--hi), inset 1px 1px 0 var(--face-dd); padding: 7px 9px 9px; }
.boardbody { display: flex; flex-direction: column; gap: 2px; }
.boardrow { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 2px 3px; }
.boardrow.me { background: var(--sel); color: var(--seltext); font-weight: 700; }
.boardrank { flex: 0 0 26px; text-align: right; font-variant-numeric: tabular-nums; color: var(--dim); }
.boardrow.me .boardrank { color: var(--seltext); }
.boardname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boardscore { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.boardnote { font-size: 11px; color: var(--dim); line-height: 1.4; padding: 2px 0; }
.statshead { font-weight: 700; font-size: 11px; margin-bottom: 5px; color: var(--text); }
.statsrow { display: flex; justify-content: space-between; font-size: 11px; padding: 2px 0; }
.statslabel { color: var(--dim); }
.statsvalue { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.statsbar { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 11px; }
.statsbarname { flex: 0 0 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.statstrack { flex: 1 1 auto; height: 10px; background: var(--field); box-shadow: inset 1px 1px 0 var(--face-dd), inset -1px -1px 0 var(--hi); }
.statsfill { height: 100%; background: linear-gradient(90deg, var(--title1), var(--title2)); }
.statsfill.empty { background: var(--face-d); }
.statsnum { font-variant-numeric: tabular-nums; flex: 0 0 52px; text-align: right; font-weight: 700; color: var(--text); }
.statslvl { flex: 0 0 62px; text-align: right; color: var(--dim); }
.calpanel { padding: 8px; min-width: 196px; }
.calhead { text-align: center; font-weight: 700; font-size: 12px; padding: 3px 0 6px; color: var(--text); }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.caldow { font-size: 10px; text-align: center; color: var(--dim); padding: 2px 0; }
.calcell { font-variant-numeric: tabular-nums; font-size: 11px; text-align: center; padding: 3px 0; color: var(--text); }
.calcell.pad { color: transparent; }
.calcell.today { background: var(--sel); color: var(--seltext); font-weight: 700; }
.calfoot { margin-top: 7px; padding-top: 5px; font-size: 11px; text-align: center; color: var(--dim); box-shadow: inset 0 1px 0 var(--face-dd); }
#trayclock:hover { box-shadow: inset -1px -1px 0 var(--face-dd), inset 1px 1px 0 var(--hi); }
.tbgrip {
flex: 0 0 auto;
width: 4px;
height: 24px;
box-shadow: inset 1px 0 0 var(--hi), inset -1px 0 0 var(--face-dd);
}
#trayapplets { display: flex; gap: 2px; }
.trayicon {
min-width: 22px;
min-height: 22px;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
}
.trayicon.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
#traycoins { font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text); cursor: pointer; padding: 0 2px; }
#coinglyph { display: flex; }
#trayclock { font-variant-numeric: tabular-nums; font-size: 12px; line-height: 24px; color: var(--text); min-width: 50px; text-align: center; cursor: default; padding: 0 2px; }
#showdesk { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
#wins { position: absolute; left: 0; right: 0; top: 0; bottom: 40px; pointer-events: none; z-index: 100; }
.win {
position: absolute;
display: flex;
flex-direction: column;
background: var(--face);
padding: 3px;
pointer-events: auto;
overflow: hidden;
outline: none;
box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll), 2px 2px 5px rgba(0, 0, 0, 0.35);
}
.win.appearing { animation: winin 0.12s ease-out; }
@keyframes winin { from { transform: scale(0.98); opacity: 0.5; } to { transform: scale(1); opacity: 1; } }
.titlebar {
display: flex;
align-items: center;
gap: 4px;
height: 20px;
flex: 0 0 auto;
padding: 0 2px 0 3px;
background: linear-gradient(90deg, var(--titlei1), var(--titlei2));
color: #dfdfdf;
cursor: default;
touch-action: none;
}
.win.active > .titlebar { background: linear-gradient(90deg, var(--title1), var(--title2)); color: var(--titletext); }
.winicon { display: flex; align-items: center; flex: 0 0 auto; }
.wintitle { flex: 1; font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winbtns { display: flex; gap: 2px; flex: 0 0 auto; }
.winbtn {
width: 16px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
background: var(--face);
border: none;
cursor: pointer;
padding: 0;
box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll);
}
.winbtn:active { box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--face-dd), inset -2px -2px 0 var(--face-ll); }
.winbtn i { display: block; background: var(--text); }
.bmin i { width: 6px; height: 2px; margin-top: 5px; }
.bmax i { width: 8px; height: 7px; border: 1px solid var(--text); border-top-width: 2px; background: transparent; }
.bclose i {
width: 8px;
height: 8px;
background:
linear-gradient(45deg, transparent 44%, var(--text) 44% 56%, transparent 56%),
linear-gradient(-45deg, transparent 44%, var(--text) 44% 56%, transparent 56%);
}
.menubar { display: flex; flex: 0 0 auto; gap: 0; padding: 1px 0; background: var(--face); }
.menubtn { font: inherit; font-size: 11px; padding: 3px 8px; background: transparent; border: none; cursor: pointer; color: var(--text); }
.menubtn:hover { background: var(--sel); color: var(--seltext); }
.winbody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--face); }
.statusbar { flex: 0 0 auto; display: flex; gap: 2px; padding: 2px 0 0; background: var(--face); }
.statuscell {
flex: 1;
font-size: 11px;
color: var(--text);
padding: 2px 6px;
box-shadow: inset 1px 1px 0 var(--face-dd), inset -1px -1px 0 var(--hi);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.grip { position: absolute; touch-action: none; }
.gn { left: 6px; right: 6px; top: 0; height: 4px; cursor: ns-resize; }
.gs { left: 6px; right: 6px; bottom: 0; height: 4px; cursor: ns-resize; }
.gw { top: 6px; bottom: 6px; left: 0; width: 4px; cursor: ew-resize; }
.ge { top: 6px; bottom: 6px; right: 0; width: 4px; cursor: ew-resize; }
.gnw { left: 0; top: 0; width: 8px; height: 8px; cursor: nwse-resize; }
.gne { right: 0; top: 0; width: 8px; height: 8px; cursor: nesw-resize; }
.gsw { left: 0; bottom: 0; width: 8px; height: 8px; cursor: nesw-resize; }
.gse { right: 0; bottom: 0; width: 12px; height: 12px; cursor: nwse-resize; }
.win.maxed .grip { display: none; }
.snapghost { position: absolute; background: rgba(10, 36, 106, 0.30); border: 2px dotted #ffffff; pointer-events: none; z-index: 999; }
#dialogs { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 600; }
.dlgoverlay {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
padding: 12px;
}
.dlg {
width: min(420px, 94vw);
max-height: 92%;
display: flex;
flex-direction: column;
background: var(--face);
padding: 3px;
box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll), 3px 3px 8px rgba(0, 0, 0, 0.45);
}
.dlg > .titlebar { background: linear-gradient(90deg, var(--title1), var(--title2)); color: var(--titletext); }
.dlgbody { display: flex; gap: 14px; padding: 16px 14px 10px; overflow: auto; }
.dlgicon { flex: 0 0 auto; }
.dlgtext { flex: 1; min-width: 0; font-size: 11px; color: var(--text); }
.dlgline { min-height: 6px; word-wrap: break-word; }
.dlgbtns { display: flex; gap: 8px; justify-content: center; padding: 6px 14px 12px; flex-wrap: wrap; }
.btn {
font: inherit;
font-size: 11px;
min-width: 76px;
padding: 5px 12px;
background: var(--face);
border: none;
color: var(--text);
cursor: pointer;
box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll);
}
.btn:active { box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--face-dd), inset -2px -2px 0 var(--face-ll); }
.btn:focus-visible { outline: 1px dotted var(--text); outline-offset: -4px; }
.btn.primary { font-weight: 700; box-shadow: inset 0 0 0 1px var(--lo), inset -2px -2px 0 var(--lo), inset 2px 2px 0 var(--hi), inset -3px -3px 0 var(--face-dd), inset 3px 3px 0 var(--face-ll); }
.btn:disabled { color: var(--face-dd); text-shadow: 1px 1px 0 var(--hi); cursor: default; }
.btn.locked { color: var(--dim); }
.btn.adbtn { font-weight: 700; box-shadow: inset 0 0 0 1px var(--lo), inset -2px -2px 0 var(--lo), inset 2px 2px 0 var(--hi), inset -3px -3px 0 var(--face-dd), inset 3px 3px 0 var(--face-ll); }
.btn.adbtn::before { content: '\25B6'; display: inline-block; margin-right: 6px; color: var(--accent); font-size: 9px; vertical-align: 1px; }
.btn.adbtn:disabled::before { color: var(--face-dd); }
.btnrow { display: flex; gap: 6px; padding: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.textfield {
font: inherit;
font-size: 11px;
padding: 4px 6px;
width: 100%;
background: var(--field);
color: var(--fieldtext);
border: none;
outline: none;
box-shadow: inset 1px 1px 0 var(--face-dd), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--edge), inset -2px -2px 0 var(--face-ll);
}
.textfield.wide { flex: 1; }
#balloons { position: absolute; right: 6px; bottom: 40px; width: min(290px, 88vw); display: flex; flex-direction: column; gap: 5px; z-index: 550; pointer-events: none; }
.balloon {
background: var(--tip);
color: var(--tiptext);
border: 1px solid var(--tipline);
padding: 6px 8px;
pointer-events: auto;
animation: balloonin 0.18s ease-out;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
@keyframes balloonin { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.balloon.clickable { cursor: pointer; }
.balloonhead { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.balloontitle { flex: 1; font-weight: 700; font-size: 11px; }
.balloonclose { width: 16px; height: 16px; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.balloonclose i {
width: 7px;
height: 7px;
display: block;
background:
linear-gradient(45deg, transparent 43%, var(--tiptext) 43% 57%, transparent 57%),
linear-gradient(-45deg, transparent 43%, var(--tiptext) 43% 57%, transparent 57%);
}
.balloontext { font-size: 11px; line-height: 1.4; }
#menus { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 700; }
.popup {
position: absolute;
min-width: 160px;
background: var(--face);
padding: 2px;
pointer-events: auto;
max-height: 88vh;
overflow: visible;
box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll), 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.popup.submenu { position: absolute; z-index: 5; }
.menuitem {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 4px 8px;
font: inherit;
font-size: 11px;
background: transparent;
border: none;
color: var(--text);
cursor: default;
text-align: left;
}
.menuitem:hover, .menuitem.open { background: var(--sel); color: var(--seltext); }
.menuitem.disabled { color: var(--face-dd); text-shadow: 1px 1px 0 var(--hi); }
.menuitem.disabled:hover { background: transparent; color: var(--face-dd); }
.menuicon { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.menulabel { flex: 1; white-space: nowrap; }
.menuhint { font-size: 11px; opacity: 0.7; }
.menuarrow { font-size: 8px; }
.menusep { height: 2px; margin: 3px 2px; box-shadow: inset 0 1px 0 var(--face-dd), inset 0 -1px 0 var(--hi); }
.startmenu { min-width: 200px; padding-left: 24px; }
.startside {
position: absolute;
left: 2px;
top: 2px;
bottom: 2px;
width: 22px;
background: linear-gradient(0deg, var(--title1), var(--title2));
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 10px;
}
.startsidetext {
writing-mode: vertical-rl;
transform: rotate(180deg);
color: #ffffff;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.1em;
white-space: nowrap;
}
.panelpop { padding: 8px; }
.volpanel { display: flex; flex-direction: column; gap: 8px; width: 150px; }
.vollabel { font-size: 11px; font-weight: 700; color: var(--text); }
.volslider { width: 100%; accent-color: var(--title1); }
.volslider.wide { flex: 1; min-width: 140px; }
#saver { background: #000000; z-index: 900; display: flex; align-items: center; justify-content: center; cursor: none; }
.savercanvas { width: 100%; height: 100%; object-fit: contain; background: #070b12; }
#power { background: #000000; z-index: 950; display: flex; align-items: center; justify-content: center; }
.powerpanel { text-align: center; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.powertext { color: #d4d0c8; font-size: 15px; }
.powerbtn {
width: 84px;
height: 84px;
border-radius: 50%;
background: radial-gradient(circle at 34% 30%, #6d6d6d, #2b2b2b 62%, #141414 100%);
border: 2px solid #101010;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.7), inset 0 2px 3px rgba(255, 255, 255, 0.25), inset 0 -3px 6px rgba(0, 0, 0, 0.6);
}
.powerbtn:hover { background: radial-gradient(circle at 34% 30%, #7f7f7f, #343434 62%, #1a1a1a 100%); }
.powerbtn:active { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7), inset 0 3px 7px rgba(0, 0, 0, 0.7); }
.powerbtn .iconbox { filter: drop-shadow(0 0 5px rgba(120, 220, 160, 0.6)); }
.powerhint { color: #6f6f6f; font-size: 11px; }
.toolbar { display: flex; align-items: center; gap: 1px; padding: 2px; background: var(--face); flex: 0 0 auto; flex-wrap: wrap; box-shadow: inset 0 -1px 0 var(--face-dd); }
.toolbtn {
display: flex;
align-items: center;
gap: 4px;
height: 22px;
padding: 0 6px;
font: inherit;
font-size: 11px;
color: var(--text);
background: transparent;
border: none;
cursor: pointer;
}
.toolbtn:hover { box-shadow: inset -1px -1px 0 var(--face-dd), inset 1px 1px 0 var(--hi); }
.toolbtn:active { box-shadow: inset 1px 1px 0 var(--face-dd), inset -1px -1px 0 var(--hi); }
.toolsep { width: 2px; height: 18px; margin: 0 3px; box-shadow: inset 1px 0 0 var(--face-dd), inset -1px 0 0 var(--hi); }
.split { display: flex; flex: 1 1 auto; min-height: 0; }
.pane { overflow: auto; min-height: 0; }
.addressrow { display: flex; align-items: center; gap: 5px; padding: 2px 3px; background: var(--face); flex: 0 0 auto; box-shadow: inset 0 -1px 0 var(--face-dd); }
.addresslabel { font-size: 11px; color: var(--text); flex: 0 0 auto; }
.addressfield {
flex: 1;
min-width: 0;
font: inherit;
font-size: 11px;
padding: 3px 5px;
background: var(--field);
color: var(--fieldtext);
border: none;
outline: none;
box-shadow: inset 1px 1px 0 var(--face-dd), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--edge), inset -2px -2px 0 var(--face-ll);
}
.filetree, .regtree, .cpside, .helpside, .mailside, .chatside {
flex: 0 0 180px;
background: var(--field);
color: var(--fieldtext);
padding: 2px;
box-shadow: inset 1px 1px 0 var(--face-dd), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--edge);
}
.filelist, .reglist, .cpcontent, .helpcontent, .mailright, .chatview { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: auto; }
.treerow {
display: flex;
align-items: center;
gap: 5px;
width: 100%;
padding: 3px 5px;
font: inherit;
font-size: 11px;
background: transparent;
border: none;
color: var(--fieldtext);
cursor: default;
text-align: left;
}
.treerow:hover { background: var(--face-l); }
.treerow.on { background: var(--sel); color: var(--seltext); }
.treelabel { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.treetoggle { width: 11px; text-align: center; font-size: 10px; font-family: "RetroPixelMono", "Lucida Console", monospace; flex: 0 0 auto; }
.badge { background: var(--err); color: var(--badgetext); font-size: 10px; font-weight: 700; padding: 0 5px; }
.listview { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; background: var(--field); color: var(--fieldtext); box-shadow: inset 1px 1px 0 var(--face-dd), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--edge); }
.listhead { display: flex; flex: 0 0 auto; background: var(--face); }
.listheadcell { font-weight: 400; font-size: 11px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset -1px -1px 0 var(--face-dd), inset 1px 1px 0 var(--hi); }
.listbody { flex: 1 1 auto; overflow: auto; min-height: 0; }
.listrow { display: flex; align-items: center; cursor: default; }
.listrow:hover { background: var(--face-l); }
.listrow.sel { background: var(--sel); color: var(--seltext); }
.listrow.unread .listtext { font-weight: 700; }
.listrow.droptarget { background: rgba(10, 36, 106, 0.25); outline: 1px dotted var(--sel); outline-offset: -2px; }
.listcell { display: flex; align-items: center; gap: 4px; padding: 3px 6px; min-width: 0; overflow: hidden; box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.09); }
.listcell:last-child { box-shadow: none; }
.listtext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.emptynote { padding: 18px; text-align: center; color: var(--dim); font-size: 11px; }
.proptable { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.proprow { display: flex; gap: 10px; font-size: 11px; }
.propkey { flex: 0 0 42%; color: var(--dim); }
.propval { flex: 1; min-width: 0; word-break: break-word; }
.picklist { display: flex; flex-direction: column; gap: 0; max-height: 240px; overflow: auto; margin-top: 8px; background: var(--field); padding: 2px; box-shadow: inset 1px 1px 0 var(--face-dd), inset 2px 2px 0 var(--edge); }
.pickrow {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 6px;
font: inherit;
font-size: 11px;
background: transparent;
border: none;
color: var(--fieldtext);
cursor: default;
text-align: left;
}
.pickrow:hover { background: var(--sel); color: var(--seltext); }
.picklabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.textarea {
flex: 1 1 auto;
min-height: 0;
width: 100%;
font-family: "RetroPixelMono", "Lucida Console", Consolas, monospace;
font-size: 12px;
line-height: 1.45;
padding: 6px 8px;
background: var(--field);
color: var(--fieldtext);
border: none;
resize: none;
outline: none;
white-space: pre-wrap;
box-shadow: inset 1px 1px 0 var(--face-dd), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--edge);
}
.termwrap { flex: 1 1 auto; min-height: 0; overflow: auto; background: #000000; padding: 6px 8px; display: flex; flex-direction: column; }
.termout { font-family: "RetroPixelMono", "Lucida Console", Consolas, monospace; font-size: 12px; color: #c0c0c0; }
.termout[data-color="amber"] { color: #d8a020; }
.termout[data-color="blue"] { color: #7ca8e0; }
.termrow { white-space: pre-wrap; word-break: break-word; min-height: 1.3em; }
.termrow.err { color: #ff5555; }
.termrow.echo { color: #ffffff; }
.termline { display: flex; align-items: center; gap: 3px; margin-top: 1px; }
.termprompt { font-family: "RetroPixelMono", "Lucida Console", Consolas, monospace; font-size: 12px; color: #c0c0c0; flex: 0 0 auto; }
.terminput {
flex: 1;
min-width: 0;
font-family: "RetroPixelMono", "Lucida Console", Consolas, monospace;
font-size: 12px;
background: transparent;
border: none;
outline: none;
color: #ffffff;
caret-color: #c0c0c0;
}
.tabs { display: flex; gap: 1px; padding: 3px 3px 0; background: var(--face); flex: 0 0 auto; flex-wrap: wrap; }
.tab {
font: inherit;
font-size: 11px;
padding: 4px 10px;
background: var(--face);
border: none;
color: var(--text);
cursor: default;
box-shadow: inset 1px 1px 0 var(--hi), inset -1px 0 0 var(--face-dd), inset -2px 0 0 var(--lo);
}
.tab.on { font-weight: 700; padding-bottom: 6px; margin-bottom: -2px; background: var(--face-l); }
.tabbody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: auto; background: var(--face); box-shadow: inset 0 1px 0 var(--hi); }
.perfwrap { padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.perflabel { font-size: 11px; font-weight: 700; color: var(--text); }
.perfcanvas { width: 100%; max-width: 100%; height: auto; background: #000000; box-shadow: inset 1px 1px 0 var(--face-dd), inset 2px 2px 0 var(--edge); }
.calcwrap { flex: 1 1 auto; display: flex; flex-direction: column; padding: 5px; gap: 5px; min-height: 0; }
.calcdisplay {
font-family: "RetroPixelMono", "Lucida Console", Consolas, monospace;
font-size: 22px;
text-align: right;
padding: 5px 8px;
background: var(--field);
color: var(--fieldtext);
overflow: hidden;
flex: 0 0 auto;
box-shadow: inset 1px 1px 0 var(--face-dd), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--edge);
}
.calcgrid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; min-height: 0; }
.calckey {
font: inherit;
font-size: 13px;
background: var(--face);
border: none;
color: var(--accent);
cursor: pointer;
min-height: 30px;
box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll);
}
.calckey.num { font-weight: 700; color: var(--text); }
.calckey.primary { color: var(--err); font-weight: 700; }
.calckey:active { box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--face-dd), inset -2px -2px 0 var(--face-ll); }
.painttools { display: flex; gap: 2px; padding: 3px; background: var(--face); flex-wrap: wrap; flex: 0 0 auto; align-items: center; box-shadow: inset 0 -1px 0 var(--face-dd); }
.painttool {
font: inherit;
font-size: 11px;
padding: 4px 8px;
background: var(--face);
border: none;
color: var(--text);
cursor: pointer;
box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll);
}
.painttool.on { box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--face-dd), inset -2px -2px 0 var(--face-ll); }
.paintstage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--face-dd); padding: 6px; overflow: hidden; }
.paintcanvas {
max-width: 100%;
max-height: 100%;
image-rendering: pixelated;
background: #ffffff;
touch-action: none;
cursor: crosshair;
box-shadow: inset 1px 1px 0 var(--face-dd), 0 0 0 1px var(--edge);
}
.paintpalette { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; background: var(--face); flex: 0 0 auto; box-shadow: inset 0 1px 0 var(--hi); }
.palcell { width: 20px; height: 18px; border: none; cursor: pointer; padding: 0; box-shadow: inset 1px 1px 0 var(--face-dd), inset -1px -1px 0 var(--hi); }
.palcell.on { outline: 2px solid var(--text); outline-offset: 0; }
.selectfield {
font: inherit;
font-size: 11px;
padding: 3px 5px;
background: var(--field);
color: var(--fieldtext);
border: none;
box-shadow: inset 1px 1px 0 var(--face-dd), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--edge);
}
.fieldrow { display: flex; align-items: center; gap: 10px; margin: 5px 0; flex-wrap: wrap; }
.fieldlabel { font-size: 11px; color: var(--text); min-width: 110px; }
.viewstage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--face-dd); padding: 10px; overflow: auto; }
.viewimage { max-width: 100%; max-height: 100%; box-shadow: 0 0 0 1px var(--edge), 2px 2px 5px rgba(0, 0, 0, 0.4); }
.usercanvas { image-rendering: pixelated; background: #ffffff; }
.memocanvas { background: #e8e4d6; }
.playerwrap { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 6px; min-height: 0; }
.playerscreen { width: 100%; max-width: 100%; height: auto; background: #000000; flex: 0 0 auto; box-shadow: inset 1px 1px 0 var(--face-dd), inset 2px 2px 0 var(--edge); }
.playercontrols { display: flex; gap: 5px; flex: 0 0 auto; }
.playerlist { flex: 1 1 auto; overflow: auto; min-height: 0; background: var(--field); padding: 2px; box-shadow: inset 1px 1px 0 var(--face-dd), inset 2px 2px 0 var(--edge); }
.playerrow {
display: flex;
align-items: center;
gap: 7px;
width: 100%;
padding: 5px 7px;
font: inherit;
background: transparent;
border: none;
color: var(--fieldtext);
cursor: default;
text-align: left;
}
.playerrow:hover { background: var(--face-l); }
.playerrow.on { background: var(--sel); color: var(--seltext); }
.playerinfo { flex: 1; min-width: 0; }
.playername { font-size: 11px; font-weight: 700; }
.playerdesc { font-size: 11px; opacity: 0.85; }
.regnote { margin: 6px; padding: 7px 9px; background: var(--tip); color: var(--tiptext); border: 1px solid var(--tipline); font-size: 11px; }
.cpsection { padding: 10px 12px; box-shadow: inset 0 -1px 0 var(--face-dd), inset 0 -2px 0 var(--hi); }
.cptitle { font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.cphint { font-size: 11px; color: var(--dim); margin-top: 8px; line-height: 1.5; }
.cpline { font-size: 11px; color: var(--text); margin: 3px 0; }
.wallgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.wallcell {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 4px;
background: var(--face);
border: none;
cursor: pointer;
font: inherit;
color: var(--text);
box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll);
}
.wallcell.on { box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--face-dd), inset -2px -2px 0 var(--face-ll); }
.wallcell.locked { color: var(--dim); }
.walllabel { font-size: 11px; text-align: center; }
.wallpreview { width: 100%; height: 50px; box-shadow: inset 1px 1px 0 var(--edge), 0 0 0 1px var(--face-dd); background: #3a6ea5; }
.wallpreview[data-wall="wall_grid"] { background: #3a6ea5; }
.wallpreview[data-wall="wall_signal"] { background: linear-gradient(180deg, #241a10, #0d0906); box-shadow: inset 0 -6px 8px -4px rgba(224, 176, 96, 0.6); }
.wallpreview[data-wall="wall_dusk"] { background: linear-gradient(180deg, #6a4a72, #a5705c 55%, #d9a05e 80%, #3a2a3a); }
.wallpreview[data-wall="wall_blueprint"] { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 9px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 9px), #1d4e8f; }
.wallpreview[data-wall="wall_tape"] { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 2px, rgba(0, 0, 0, 0.2) 2px 6px), linear-gradient(100deg, #4a3b30, #6b5340 45%, #33291f); }
.wallpreview[data-wall="wall_window"] { background: linear-gradient(115deg, rgba(255, 226, 170, 0.4) 0%, rgba(255, 226, 170, 0) 50%), linear-gradient(170deg, #5a6f86, #24303d); }
.wallpreview[data-wall="wall_circuit"] { background: repeating-linear-gradient(90deg, rgba(150, 220, 170, 0.22) 0 1px, transparent 1px 13px), linear-gradient(160deg, #14472a, #072012); }
.wallpreview[data-wall="wall_paper"] { background: repeating-linear-gradient(0deg, rgba(120, 130, 160, 0.22) 0 1px, transparent 1px 8px), linear-gradient(180deg, #efe9d8, #ded6c1); }
.wallpreview[data-wall="wall_ark"] { background: repeating-radial-gradient(circle at 50% 50%, rgba(126, 216, 205, 0.2) 0 1px, transparent 1px 11px), #0f2a2a; }
.bigclock { font-family: "RetroPixelMono", "Lucida Console", Consolas, monospace; font-size: 30px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.dblcheck { touch-action: manipulation; }
.dblcheck.half { background: var(--face-l); color: var(--dim); }
.dblcheck {
margin-top: 8px;
padding: 18px;
text-align: center;
background: var(--field);
color: var(--fieldtext);
font-size: 11px;
cursor: default;
box-shadow: inset 1px 1px 0 var(--face-dd), inset 2px 2px 0 var(--edge);
}
.userrow { display: flex; align-items: center; gap: 10px; padding: 6px 2px; box-shadow: inset 0 -1px 0 var(--face-dd); }
.userinfo { flex: 1; min-width: 0; }
.username { font-size: 11px; font-weight: 700; color: var(--text); }
.usernote { font-size: 11px; color: var(--dim); }
.usercurrent { font-size: 11px; color: var(--ok); font-weight: 700; }
.devtree { flex: 1 1 auto; overflow: auto; background: var(--field); color: var(--fieldtext); padding: 4px; min-height: 0; box-shadow: inset 1px 1px 0 var(--face-dd), inset 2px 2px 0 var(--edge); }
.devgroup { display: flex; align-items: center; gap: 6px; padding: 4px 3px; font-weight: 700; font-size: 11px; }
.devrow {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 3px 3px 3px 24px;
font: inherit;
font-size: 11px;
background: transparent;
border: none;
color: var(--fieldtext);
cursor: default;
text-align: left;
}
.devrow:hover { background: var(--face-l); }
.devname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logwrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.defragstage { display: flex; align-items: center; justify-content: center; padding: 8px; background: var(--face); flex: 0 0 auto; }
.defragcanvas { max-width: 100%; height: auto; background: #000000; image-rendering: pixelated; box-shadow: inset 1px 1px 0 var(--face-dd), 0 0 0 1px var(--edge); }
.progressbar { margin: 0 8px; height: 16px; background: var(--field); padding: 2px; flex: 0 0 auto; box-shadow: inset 1px 1px 0 var(--face-dd), inset 2px 2px 0 var(--edge); }
.progressfill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--title1) 0 8px, transparent 8px 11px); transition: width 0.2s linear; }
.defraglegend { display: flex; gap: 10px; padding: 6px 8px; flex-wrap: wrap; flex: 0 0 auto; }
.legenditem { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text); }
.legendswatch { width: 12px; height: 12px; box-shadow: inset 1px 1px 0 var(--face-dd), 0 0 0 1px var(--edge); }
.legendswatch.c0 { background: #101010; }
.legendswatch.c1 { background: #0a246a; }
.legendswatch.c2 { background: #a00000; }
.legendswatch.c3 { background: #2f7a72; }
.binwrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.searchrow { display: flex; gap: 5px; padding: 6px; align-items: center; flex: 0 0 auto; }
.searchresults { flex: 1 1 auto; overflow: auto; min-height: 0; background: var(--field); padding: 3px; box-shadow: inset 1px 1px 0 var(--face-dd), inset 2px 2px 0 var(--edge); }
.searchitem {
display: flex;
align-items: center;
gap: 7px;
width: 100%;
padding: 5px 7px;
font: inherit;
background: transparent;
border: none;
color: var(--fieldtext);
cursor: default;
text-align: left;
}
.searchitem:hover { background: var(--sel); color: var(--seltext); }
.searchinfo { flex: 1; min-width: 0; }
.searchname { font-size: 11px; font-weight: 700; }
.searchpath { font-size: 11px; opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.helpcontent { padding: 14px 18px; background: var(--field); color: var(--fieldtext); }
.helphead { font-size: 15px; margin-bottom: 10px; color: var(--accent); }
.helppara { font-size: 12px; line-height: 1.55; margin-bottom: 5px; }
.helpgap { height: 8px; }
.journalarea { font-family: Tahoma, sans-serif; font-size: 12px; }
.charmapgrid { flex: 1 1 auto; overflow: auto; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 1px; padding: 5px; background: var(--field); box-shadow: inset 1px 1px 0 var(--face-dd), inset 2px 2px 0 var(--edge); }
.charcell {
font-family: Tahoma, sans-serif;
font-size: 15px;
min-height: 30px;
background: var(--face);
border: none;
color: var(--fieldtext);
cursor: pointer;
box-shadow: inset -1px -1px 0 var(--face-dd), inset 1px 1px 0 var(--hi);
}
.charcell:hover { background: var(--sel); color: var(--seltext); }
.mailright { display: flex; flex-direction: column; }
.maillist { flex: 0 0 42%; min-height: 0; display: flex; }
.mailview { flex: 1 1 auto; overflow: auto; min-height: 0; background: var(--field); color: var(--fieldtext); padding: 10px 14px; box-shadow: inset 1px 1px 0 var(--face-dd), inset 2px 2px 0 var(--edge); }
.mailhead { padding-bottom: 7px; margin-bottom: 9px; box-shadow: inset 0 -1px 0 var(--face-dd); }
.mailsubject { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.mailmeta { display: flex; gap: 16px; flex-wrap: wrap; }
.mailmetacell { font-size: 11px; color: var(--dim); }
.mailbody { font-size: 12px; line-height: 1.6; }
.mailpara { margin-bottom: 2px; word-wrap: break-word; }
.mailgap { height: 9px; }
.chatinfo { flex: 1; min-width: 0; }
.chatname { font-size: 11px; font-weight: 700; }
.chatdate { font-size: 11px; opacity: 0.8; }
.chathead { padding: 6px 10px; background: var(--face); font-size: 11px; font-weight: 700; color: var(--text); flex: 0 0 auto; box-shadow: inset 0 -1px 0 var(--face-dd); }
.chatlog { flex: 1 1 auto; overflow: auto; min-height: 0; padding: 10px; background: var(--field); display: flex; flex-direction: column; gap: 7px; box-shadow: inset 1px 1px 0 var(--face-dd), inset 2px 2px 0 var(--edge); }
.chatmsg { max-width: 84%; padding: 6px 9px; background: var(--face); color: var(--text); box-shadow: inset -1px -1px 0 var(--face-dd), inset 1px 1px 0 var(--hi); }
.chatmsg.them { align-self: flex-start; }
.chatmsg.me { align-self: flex-end; background: var(--sel); color: var(--seltext); }
.chatwho { font-size: 11px; font-weight: 700; color: var(--accent); margin-right: 8px; }
.chattime { font-size: 10px; color: var(--dim); }
.chatmsg.me .chatwho, .chatmsg.me .chattime { color: var(--seltext); }
.chattext { font-size: 12px; line-height: 1.45; margin-top: 3px; }
.intrapage { flex: 1 1 auto; overflow: auto; min-height: 0; padding: 14px 18px; background: #ffffff; color: #000000; box-shadow: inset 1px 1px 0 var(--face-dd), inset 2px 2px 0 var(--edge); }
.intratitle { font-size: 15px; margin-bottom: 10px; color: #000080; border-bottom: 1px solid #000080; padding-bottom: 5px; }
.intrabody { font-family: "RetroPixelMono", "Lucida Console", Consolas, monospace; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.intraerror { padding: 18px; color: #800000; font-size: 12px; }
.intralinks { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.intralink { font: inherit; font-size: 11px; padding: 3px 8px; background: transparent; border: none; color: #0000ee; text-decoration: underline; cursor: pointer; }
.intralink:hover { color: #ee0000; }
.storewrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.storehead { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: var(--face); flex: 0 0 auto; flex-wrap: wrap; box-shadow: inset 0 -1px 0 var(--face-dd); }
.storecredits { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--text); flex: 1; }
.storelist { flex: 1 1 auto; overflow: auto; min-height: 0; background: var(--field); padding: 4px; display: flex; flex-direction: column; gap: 3px; box-shadow: inset 1px 1px 0 var(--face-dd), inset 2px 2px 0 var(--edge); }
.storeitem { display: flex; align-items: center; gap: 9px; padding: 7px 8px; background: var(--face); box-shadow: inset -1px -1px 0 var(--face-dd), inset 1px 1px 0 var(--hi); }
.storeinfo { flex: 1; min-width: 0; }
.storename { font-size: 11px; font-weight: 700; color: var(--text); }
.storedesc { font-size: 11px; color: var(--dim); line-height: 1.4; }
.storeact { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.storeprice.yan { color: var(--accent); }
.yantag { font-weight: 700; letter-spacing: 0.02em; }
.storefoot { display: flex; align-items: center; gap: 8px; padding: 6px 8px; box-shadow: inset 0 1px 0 var(--face-dd), inset 0 2px 0 var(--face-ll); }
.storefoothint { flex: 1; min-width: 0; font-size: 11px; color: var(--dim); line-height: 1.35; }
.storeprice { font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text); }
.storeowned { font-size: 11px; color: var(--ok); font-weight: 700; }
.storeswatch { width: 44px; height: 32px; flex: 0 0 auto; background: #3a6ea5; box-shadow: inset 1px 1px 0 var(--edge), 0 0 0 1px var(--face-dd); }
.storeswatch[data-wall="wall_grid"] { background: #3a6ea5; }
.storeswatch[data-wall="wall_dusk"] { background: linear-gradient(180deg, #6a4a72, #a5705c 55%, #d9a05e 80%, #3a2a3a); }
.storeswatch[data-wall="wall_blueprint"] { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 8px), #1d4e8f; }
.storeswatch[data-wall="wall_tape"] { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 2px, rgba(0, 0, 0, 0.2) 2px 6px), linear-gradient(100deg, #4a3b30, #6b5340 45%, #33291f); }
.storeswatch[data-wall="wall_window"] { background: linear-gradient(115deg, rgba(255, 226, 170, 0.4) 0%, rgba(255, 226, 170, 0) 50%), linear-gradient(170deg, #5a6f86, #24303d); }
.storeswatch[data-wall="wall_circuit"] { background: repeating-linear-gradient(90deg, rgba(150, 220, 170, 0.22) 0 1px, transparent 1px 12px), linear-gradient(160deg, #14472a, #072012); }
.storeswatch[data-wall="wall_paper"] { background: repeating-linear-gradient(0deg, rgba(120, 130, 160, 0.22) 0 1px, transparent 1px 7px), linear-gradient(180deg, #efe9d8, #ded6c1); }
.storeswatch[data-wall="wall_ark"] { background: repeating-radial-gradient(circle at 50% 50%, rgba(126, 216, 205, 0.2) 0 1px, transparent 1px 10px), #0f2a2a; }
.storeswatch[data-wall="wall_signal"] { background: repeating-linear-gradient(90deg, rgba(255, 214, 140, 0.30) 0 1px, transparent 1px 6px), radial-gradient(circle at 50% 40%, #d8a24a, #6a3d12 60%, #22140a); }
.storeswatch[data-wall="wall_night"] { background: radial-gradient(circle at 74% 26%, rgba(255, 214, 140, 0.55), transparent 34%), repeating-linear-gradient(90deg, rgba(10, 18, 34, 0.6) 0 1px, transparent 1px 9px), linear-gradient(185deg, #101c30, #06080f); }
.storeswatch[data-wall="wall_matrix"] { background: repeating-linear-gradient(180deg, rgba(126, 255, 176, 0.85) 0 2px, transparent 2px 7px), repeating-linear-gradient(90deg, rgba(126, 255, 176, 0.5) 0 1px, transparent 1px 6px), #020a05; }
.achwrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.achhead { padding: 6px 8px; background: var(--face); flex: 0 0 auto; box-shadow: inset 0 -1px 0 var(--face-dd); }
.achcount { font-size: 11px; font-weight: 700; color: var(--text); }
.achgrid { flex: 1 1 auto; overflow: auto; min-height: 0; padding: 5px; background: var(--field); display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; box-shadow: inset 1px 1px 0 var(--face-dd), inset 2px 2px 0 var(--edge); }
.achitem { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--face); box-shadow: inset -1px -1px 0 var(--face-dd), inset 1px 1px 0 var(--hi); }
.achitem .iconbox { filter: grayscale(1) opacity(0.45); }
.achitem.got .iconbox { filter: none; }
.achinfo { flex: 1; min-width: 0; }
.achname { font-size: 11px; font-weight: 700; color: var(--text); }
.achitem.got .achname { color: var(--ok); }
.achdesc { font-size: 11px; color: var(--dim); line-height: 1.35; }
.gamewrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.gamefield { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.gamefield.wide { flex-direction: row-reverse; }
.gamefield.wide .gamecontrols { flex-direction: column; flex: 0 0 auto; padding: 6px; }
.gamefield.wide .padside { flex-direction: column; }
.gamefield.wide .gamebtn { min-width: 96px; }
.gamehud { position: relative; display: flex; gap: 2px; padding: 2px 42px 2px 2px; background: var(--face); flex: 0 0 auto; }
.hudpause {
position: absolute;
right: 2px;
top: 2px;
bottom: 2px;
width: 38px;
font: inherit;
font-size: 13px;
font-weight: 700;
line-height: 1;
background: var(--face);
border: none;
color: var(--text);
cursor: pointer;
touch-action: manipulation;
box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll);
}
.hudpause:active { box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--face-dd), inset -2px -2px 0 var(--face-ll); background: var(--face-d); }
.hudpause i {
display: block;
width: 9px;
height: 11px;
margin: 0 auto;
background: linear-gradient(90deg, var(--text) 0 3px, transparent 3px 6px, var(--text) 6px 9px);
}
.hudpause:disabled { cursor: default; }
.hudpause:disabled i { background: linear-gradient(90deg, var(--dim) 0 3px, transparent 3px 6px, var(--dim) 6px 9px); }
.hudcell {
font-variant-numeric: tabular-nums;
flex: 1;
font-size: 11px;
font-weight: 700;
color: var(--text);
padding: 3px 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
box-shadow: inset 1px 1px 0 var(--face-dd), inset -1px -1px 0 var(--hi);
}
.gamestage {
position: relative;
flex: 1 1 auto;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background:
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 4px),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 4px),
radial-gradient(ellipse at 50% 40%, #1b2a3a 0%, #0b1119 70%, #05080c 100%);
box-shadow: inset 1px 1px 0 var(--face-dd), inset 2px 2px 0 var(--edge);
}
.gamecanvas { display: block; touch-action: none; box-shadow: 0 0 0 1px #000000, 0 0 0 3px #2a3a4c, 0 0 22px rgba(0, 0, 0, 0.75); }
.gameoverlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.72); padding: 10px; overflow: auto; }
.gameoverlay.on { display: flex; }
.overlaypanel {
width: min(340px, 94%);
background: var(--face);
padding: 14px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll), 3px 3px 8px rgba(0, 0, 0, 0.5);
}
.overlaytitle { font-size: 14px; font-weight: 700; color: var(--text); }
.overlayline { font-size: 11px; color: var(--text); }
.overlaygoal { font-size: 11px; color: var(--dim); line-height: 1.5; }
.overlayhint { font-size: 11px; color: var(--dim); line-height: 1.4; padding-top: 6px; width: 100%; box-shadow: inset 0 1px 0 var(--face-dd); }
.overlaycredit { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--warn); }
.gamecontrols { display: flex; gap: 8px; padding: 4px; background: var(--face); flex: 0 0 auto; align-items: center; justify-content: center; }
.dpad {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 2px;
width: 150px;
flex: 0 0 auto;
}
.dpad .padup { grid-column: 2; grid-row: 1; }
.dpad .padleft { grid-column: 1; grid-row: 2; }
.dpad .padhub { grid-column: 2; grid-row: 2; background: var(--face-d); box-shadow: inset 1px 1px 0 var(--face-dd), inset -1px -1px 0 var(--hi); }
.dpad .padright { grid-column: 3; grid-row: 2; }
.dpad .paddown { grid-column: 2; grid-row: 3; }
.padkey {
font: inherit;
font-size: 14px;
line-height: 1;
min-height: 30px;
background: var(--face);
border: none;
color: var(--text);
cursor: pointer;
touch-action: none;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll);
}
.padkey.held, .padkey:active { box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--face-dd), inset -2px -2px 0 var(--face-ll); background: var(--face-d); }
.padside { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.padbtn {
font: inherit;
font-size: 12px;
min-height: 38px;
min-width: 84px;
padding: 0 12px;
background: var(--face);
border: none;
color: var(--text);
cursor: pointer;
touch-action: none;
box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll);
}
.padbtn.held, .padbtn:active { box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--face-dd), inset -2px -2px 0 var(--face-ll); background: var(--face-d); }
.gamebtn {
flex: 1;
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
font: inherit;
font-size: 11px;
background: var(--face);
border: none;
color: var(--text);
cursor: pointer;
touch-action: none;
box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll);
}
.gamebtn:active { box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--face-dd), inset -2px -2px 0 var(--face-ll); }
.launcher { flex: 1 1 auto; overflow: auto; min-height: 0; background: var(--field); padding: 5px; box-shadow: inset 1px 1px 0 var(--face-dd), inset 2px 2px 0 var(--edge); }
.gamegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 4px; }
.gametile.feature { grid-column: 1 / -1; position: relative; background: linear-gradient(180deg, var(--face-ll), var(--face)); box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll), inset -2px -2px 0 var(--face-d), 0 0 0 2px var(--accent); }
.gameflag { position: absolute; right: 6px; top: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 6px; background: var(--sel); color: var(--seltext); }
.gametile {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 8px;
background: var(--face);
border: none;
cursor: pointer;
font: inherit;
color: var(--text);
text-align: left;
box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll);
}
.gametile:active { box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--face-dd), inset -2px -2px 0 var(--face-ll); }
.gametile.locked .iconbox { filter: grayscale(1) opacity(0.55); }
.gameinfo { flex: 1; min-width: 0; }
.gamename { font-size: 11px; font-weight: 700; }
.gamedesc { font-size: 11px; color: var(--dim); line-height: 1.35; }
.gamestats { display: flex; gap: 12px; margin-top: 3px; flex-wrap: wrap; }
.gamestat { font-size: 11px; color: var(--accent); font-weight: 700; }
.iconbox { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ico { display: block; }
body[data-cursor="large"] { cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 2l20 13-9 2 5 11-4 2-5-11-7 6z' fill='%23ffffff' stroke='%23000000' stroke-width='1.6'/%3E%3C/svg%3E") 2 2, default; }
body[data-cursor="precise"] { cursor: crosshair; }
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: repeating-conic-gradient(#ffffff 0% 25%, var(--face) 0% 50%) 0 0 / 2px 2px; }
::-webkit-scrollbar-thumb { background: var(--face); box-shadow: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi), inset -2px -2px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll); }
::-webkit-scrollbar-corner { background: var(--face); }
@media (pointer: coarse) {
#taskbar { height: 46px; gap: 4px; padding: 3px; }
#desktop { bottom: 46px; }
#wins { bottom: 46px; }
#startbtn { height: 38px; padding: 0 12px 0 8px; font-size: 13px; }
.quickbtn { width: 36px; height: 36px; }
.taskbtn { height: 38px; font-size: 12px; max-width: 190px; }
#tray { height: 38px; gap: 6px; padding: 0 6px; }
.trayicon { width: 28px; height: 28px; }
#showdesk { width: 28px; height: 28px; }
#trayclock { font-size: 12px; min-width: 44px; }
#traycoins { font-size: 12px; }
.titlebar { height: 40px; padding: 0 3px 0 6px; }
.wintitle { font-size: 13px; }
.winbtn { width: 30px; height: 26px; }
.winbtn i { transform: scale(1.4); }
.menuitem { padding: 11px 10px; font-size: 13px; }
.menubtn { padding: 9px 13px; font-size: 13px; }
.btn { min-height: 40px; font-size: 12px; padding: 8px 14px; }
.toolbtn { height: 36px; padding: 0 10px; font-size: 12px; }
.tab { padding: 10px 14px; font-size: 12px; }
.listcell { padding: 10px 7px; }
.listtext { font-size: 12px; }
.treerow { padding: 10px 7px; font-size: 12px; }
.deskicon { width: 84px; font-size: 12px; padding: 6px 2px; }
.grip { display: none; }
.gse { display: block; width: 22px; height: 22px; }
.gamebtn { min-height: 52px; font-size: 13px; }
.dpad { width: 174px; }
.padkey { min-height: 42px; font-size: 17px; }
.padbtn { min-height: 46px; font-size: 13px; }
.calckey { min-height: 44px; font-size: 16px; }
.charcell { min-height: 42px; font-size: 18px; }
.palcell { width: 30px; height: 26px; }
.painttool { padding: 9px 12px; font-size: 12px; }
.filetree, .regtree, .cpside, .helpside, .mailside, .chatside { flex: 0 0 150px; }
.searchitem, .pickrow, .playerrow, .devrow { padding: 11px 8px; }
.loginrow { padding: 13px; }
.langbtn { padding: 11px 20px; }
.storeitem, .achitem, .gametile { padding: 11px; }
.balloonclose { width: 26px; height: 26px; }
.helppara, .mailbody, .chattext { font-size: 13px; }
}
@media (max-width: 620px) and (pointer: fine) {
.titlebar { height: 28px; }
.winbtn { width: 26px; height: 22px; }
.winbtn i { transform: scale(1.25); }
.trayicon { width: 26px; height: 26px; }
.treerow { padding: 7px 7px; }
.listcell { padding: 7px 6px; }
.toolbtn { height: 30px; }
}
@media (max-width: 620px) {
.listhead .listcell:nth-child(n+3) { display: none; }
.listrow .listcell:nth-child(n+3) { display: none; }
#quicklaunch { display: none; }
#showdesk { display: none; }
#trayapplets { flex: 0 1 auto; overflow: hidden; }
#tray { gap: 4px; padding: 0 4px; }
.taskbtn { max-width: none; flex: 1 1 30px; padding: 0 4px; }
.gamehud { flex-wrap: wrap; }
.gamehud .hudcell { flex: 1 1 40%; }
.dlgbtns .btn { flex: 1; min-width: 0; }
.gamegrid { grid-template-columns: 1fr; }
.achgrid { grid-template-columns: 1fr; }
.filetree, .regtree, .cpside, .helpside, .mailside, .chatside { flex: 0 0 116px; }
.helpcontent { padding: 10px; }
.mailview { padding: 8px; }
.storehead { gap: 6px; }
.storecredits { font-size: 12px; }
.wallgrid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.storeitem { flex-wrap: wrap; }
.storeact { width: 100%; }
}
@media (max-width: 400px) {
.tasklabel { display: none; }
.taskbtn { flex: 0 0 36px; justify-content: center; padding: 0; }
#startlabel { display: none; }
#startbtn { padding: 0 8px; }
}
@media (max-height: 700px) {
.overlaypanel { padding: 8px 10px; gap: 4px; }
.overlaypanel .btnrow { padding: 4px; gap: 5px; }
.overlaypanel .btn { min-height: 34px; padding: 6px 10px; }
.overlayline.dim { display: none; }
}
@media (max-height: 460px) {
.overlaypanel > .iconbox { display: none; }
.overlaypanel .btn { min-height: 32px; padding: 5px 8px; font-size: 11px; }
.overlaygoal, .overlayhint { line-height: 1.3; }
.maillist { flex: 0 0 48%; }
.gamehud { padding: 1px; }
.hudcell { font-size: 10px; padding: 2px 3px; }
.gamecontrols { padding: 2px; gap: 6px; }
.gamebtn { min-height: 32px; }
.dpad { width: 120px; }
.padkey { min-height: 26px; font-size: 12px; }
.padbtn { min-height: 26px; min-width: 62px; font-size: 11px; }
.helpcontent { padding: 8px 12px; }
}
#crt {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
pointer-events: none;
z-index: 990;
}
#crt::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
}
#crt::after {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background:
radial-gradient(ellipse 92% 88% at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.42) 100%),
linear-gradient(90deg, rgba(255, 40, 40, 0.05), rgba(40, 255, 40, 0) 30%, rgba(40, 40, 255, 0.05));
animation: crtflicker 5.5s steps(60) infinite;
}
@keyframes crtflicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: 0.93; } 98.5% { opacity: 0.97; } }
.deskicon.squat { padding-top: 3px; }
.deskicon.squat .deskiconlabel { font-size: 10px; line-height: 11px; max-height: 22px; }
.storehint { font-size: 11px; color: var(--dim); margin-left: auto; }
.storeitem.flash { animation: storeflash 1.4s ease-out 1; }
@keyframes storeflash {
0%, 60% { background: var(--sel); color: var(--seltext); box-shadow: inset 0 0 0 2px var(--title2); }
100% { background: transparent; }
}
.dropcell {
position: absolute;
background: rgba(10, 36, 106, 0.30);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 0 0 2px rgba(10, 36, 106, 0.55);
pointer-events: none;
z-index: 4;
}
.deskicon.sel .deskiconlabel { outline: 1px dotted rgba(255, 255, 255, 0.75); outline-offset: 1px; }
.deskicon.guide { position: relative; }
.deskicon.guide::before { content: ""; position: absolute; left: 50%; top: 4px; width: 46px; height: 46px; margin-left: -23px; border: 2px solid var(--accent); border-radius: 50%; animation: guidering 1.5s ease-out infinite; pointer-events: none; }
@keyframes guidering { 0% { transform: scale(0.72); opacity: 0.95; } 70% { transform: scale(1.28); opacity: 0; } 100% { transform: scale(1.28); opacity: 0; } }
.guidetip { position: absolute; z-index: 40; display: flex; align-items: center; gap: 8px; max-width: 260px; padding: 7px 10px; background: var(--face); color: var(--text); cursor: pointer; box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--face-dd), inset 2px 2px 0 var(--face-ll), inset -2px -2px 0 var(--face-d), 3px 3px 0 rgba(0, 0, 0, 0.35); animation: guidepop 0.24s ease-out 1; }
.guidetext { font-size: 11px; line-height: 1.35; }
@keyframes guidepop { from { transform: translateY(-6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.deskicon.dragging { opacity: 0.62; z-index: 9; }
.selband {
position: absolute;
background: rgba(10, 36, 106, 0.28);
border: 1px dotted #ffffff;
pointer-events: none;
z-index: 5;
}
.btn.gold {
color: #2f2103;
font-weight: bold;
text-shadow: 0 1px 0 rgba(255, 252, 220, 0.6);
border-color: #8a6a12;
background: linear-gradient(180deg, #fff0bd 0%, #f6cf62 45%, #dea62a 55%, #f8dc86 100%);
box-shadow: inset 1px 1px 0 #fffbe4, inset -1px -1px 0 #a2790f, 0 0 0 1px #6d520c, 0 0 6px rgba(240, 196, 70, 0.55);
position: relative;
overflow: hidden;
}
.btn.gold::before {
content: '';
position: absolute;
left: 2px;
top: 2px;
right: 2px;
bottom: 2px;
border: 1px solid rgba(255, 250, 214, 0.75);
background-image: repeating-linear-gradient(45deg, rgba(255, 252, 226, 0.30) 0 2px, rgba(255, 252, 226, 0) 2px 5px);
pointer-events: none;
}
.btn.gold::after {
content: '';
position: absolute;
top: 0;
left: -55%;
width: 26%;
height: 100%;
background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.42) 50%, rgba(255, 255, 255, 0) 100%);
animation: goldsheen 2.8s linear infinite;
pointer-events: none;
}
.btn.gold:active {
box-shadow: inset -1px -1px 0 #fffbe4, inset 1px 1px 0 #a2790f, 0 0 0 1px #6d520c;
}
@keyframes goldsheen {
0% { left: -55%; }
55% { left: 125%; }
100% { left: 125%; }
}
.yancoin { display: block; width: 14px; height: 14px; image-rendering: auto; }
.cptoggle { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text); cursor: default; }
.bestflag { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: #3b2a05; background: linear-gradient(180deg, #ffe9a8, #edc255); border: 1px solid #8a6a12; padding: 1px 6px; }
.shiftrow { display: flex; gap: 2px; margin: 6px 0 3px; }
.shiftcell { flex: 1 1 0; min-width: 0; text-align: center; padding: 3px 1px; background: var(--tipcell); color: var(--tiptext); box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.28), inset 1px 1px 0 rgba(255, 255, 255, 0.35); }
.shiftcell.done { background: transparent; color: var(--tipdim); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.shiftcell.now { background: linear-gradient(180deg, #fff0bd, #f0c765); color: #3b2a05; box-shadow: inset -1px -1px 0 #a2790f, inset 1px 1px 0 #fffbe4, 0 0 5px rgba(240, 196, 70, 0.5); }
.shiftday { font-size: 10px; font-weight: 700; line-height: 1.2; }
.shiftpay { display: flex; align-items: center; justify-content: center; gap: 1px; font-size: 9px; font-variant-numeric: tabular-nums; }
.shifthint { font-size: 10px; color: var(--tipdim); line-height: 1.35; margin-top: 2px; }
.mailright.nosel .mailview { display: none; }
.mailright.nosel .maillist { flex: 1 1 auto; }
@media (max-width: 560px) {
.mailside { flex: 0 0 38px; }
.mailside .treerow .treelabel { display: none; }
.mailside .treerow { justify-content: center; padding: 6px 0; }
}
.toolbtn.off { opacity: 0.4; }
.toolbtn:disabled { cursor: default; }