:root { color-scheme: light; --face:#c0c0c0; --light:#fff; --shadow:#808080; --dark:#000; --navy:#000080; --teal:#008080; }
* { box-sizing:border-box; }
body { margin:0; color:#000; font:18px/1.4 "MS Sans Serif", Tahoma, Arial, sans-serif; background:var(--teal); }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; border-radius:0; }
button,a { touch-action:manipulation; }
a { color:#000080; }
[hidden] { display:none !important; }
.window,.button,.task,.caption-button { background:var(--face); border:0; box-shadow:inset -2px -2px #000,inset 2px 2px #dfdfdf,inset -4px -4px #808080,inset 4px 4px #fff; }
.window { padding:4px; }
.titlebar { height:33px; padding:3px 4px; display:flex; align-items:center; gap:6px; color:white; background:var(--navy); }
h1,h2,p { margin:0; }
.titlebar h1,.titlebar h2 { font-size:18px; line-height:24px; font-weight:bold; flex:1; }
.caption-button { width:27px; height:24px; padding:4px; display:grid; place-items:center; text-decoration:none; color:#000; }
.maximize-glyph { width:15px; height:14px; border:2px solid #000; border-top-width:3px; }
.close-glyph { width:15px; height:15px; position:relative; }
.close-glyph:before,.close-glyph:after { content:""; position:absolute; width:18px; height:3px; top:6px; left:-2px; background:#000; transform:rotate(45deg); }
.close-glyph:after { transform:rotate(-45deg); }
.button { display:inline-flex; align-items:center; justify-content:center; min-width:112px; min-height:38px; padding:6px 21px; text-decoration:none; color:#000; }
button:not(:disabled),.button { cursor:pointer; }
.button:active,.caption-button:active,.task:active { box-shadow:inset 2px 2px #000,inset -2px -2px #fff,inset 4px 4px #808080; padding-top:8px; }
button:focus-visible,.button:focus-visible { outline:2px dotted #000; outline-offset:-8px; }
.inset { box-shadow:inset -2px -2px #fff,inset 2px 2px #808080,inset -4px -4px #dfdfdf,inset 4px 4px #000; }
.games-window { width:min(1152px,calc(100% - 240px)); margin:64px 32px 0 208px; position:relative; }
.window-menu { height:44px; padding:8px 12px; display:flex; align-items:center; gap:21px; }
.icon-grid { background:white; min-height:420px; padding:48px 87px 45px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 45px; align-content:start; }
.game-icon { color:#000; text-decoration:none; display:flex; flex-direction:column; gap:9px; align-items:center; justify-content:flex-start; min-height:141px; padding:14px 6px; text-align:center; cursor:default; outline:none; }
a.game-icon { cursor:pointer; }
.game-icon img { width:64px; height:64px; image-rendering:pixelated; }
.icon-label { display:block; padding:2px 4px; max-width:210px; line-height:22px; }
.game-icon:focus-visible .icon-label { background:#000080; color:#fff; outline:2px dotted #fff; outline-offset:-2px; }
.game-icon[data-state="coming"],.game-icon[data-state="down"] { color:#808080; text-shadow:2px 2px #fff; }
.game-icon[data-state="coming"] img,.game-icon[data-state="down"] img { filter:grayscale(1); opacity:.4; }
.icon-state { font-size:16px; color:#808080; line-height:20px; }
.statusbar { display:flex; gap:4px; padding-top:4px; min-height:36px; }
.statusbar > div { padding:4px 9px; box-shadow:inset 2px 2px #808080,inset -2px -2px #fff; }
#status-note { flex:1; }
.busy-dialog { width:465px; margin:24px 80px 64px auto; position:relative; }
.dialog-body { display:flex; align-items:center; gap:28px; padding:32px 34px 27px; }
.information-icon { font:bold 39px/45px Georgia,serif; background:#fff; border:3px solid #000; color:#000080; width:48px; height:48px; text-align:center; border-radius:50%; box-shadow:3px 3px #808080; flex-shrink:0; }
.dialog-actions { text-align:center; padding:0 15px 24px; }
.default-button { outline:2px solid #000; outline-offset:2px; }
.taskbar { position:fixed; bottom:0; left:0; right:0; min-height:45px; background:#c0c0c0; box-shadow:inset 0 2px #dfdfdf,inset 0 3px #fff; display:flex; align-items:center; gap:8px; padding:6px 4px 4px; z-index:5; }
.home-button { font-weight:bold; padding:4px 14px; min-height:36px; }
.task { height:36px; width:240px; display:flex; align-items:center; gap:8px; padding:4px 10px; text-align:left; }
.task.active { font-weight:bold; background:#dfdfdf; box-shadow:inset 2px 2px #000,inset -2px -2px #fff,inset 4px 4px #808080; }
.tray { margin-left:auto; padding:4px 18px; box-shadow:inset 2px 2px #808080,inset -2px -2px #fff; font-size:16px; }
.games-window.maximized { margin:0; width:100%; min-height:calc(100vh - 48px); display:flex; flex-direction:column; }
.games-window.maximized .icon-grid { flex:1; }
.desktop:has(.maximized) .busy-dialog { position:fixed; bottom:69px; right:45px; margin:0; }
.game-desktop { padding:12px 12px 60px; position:relative; min-height:100vh; }
.game-desktop .taskbar { position:absolute; }
.game-window { min-height:calc(100vh - 72px); display:flex; flex-direction:column; }
.game-toolbar { height:54px; padding:8px 6px; display:flex; align-items:center; gap:18px; }
.game-toolbar a { color:#000; }
.toolbar-note { flex:1; min-width:0; }
.game-layout { display:grid; grid-template-columns:336px minmax(0,1fr); gap:8px; flex:1; min-width:0; }
.help-pane { background:#ffffe1; padding:28px 24px 36px; border:2px solid #808080; box-shadow:inset -2px -2px #fff; }
.help-pane h2 { font-size:27px; line-height:1.2; margin:0 0 22px; }
.help-pane p { font-size:16px; line-height:1.55; margin-bottom:21px; }
.help-pane .help-meta { font-size:16px; padding-top:18px; border-top:2px solid #c0c0c0; margin:30px 0 0; }
.client { min-width:0; background:#808080; padding:24px; display:flex; align-items:flex-start; justify-content:center; }
.game-area { width:960px; max-width:100%; aspect-ratio:3/2; background:#fff; display:flex; align-items:center; justify-content:center; text-align:center; }
.placeholder-title { font-size:24px; color:#808080; margin-bottom:6px; }
.placeholder-note { color:#808080; font-size:16px; }
.link-client { background:#c0c0c0; align-items:center; }
.launch-panel { text-align:center; padding:48px 18px; }
.launch-panel img { width:64px; height:64px; image-rendering:pixelated; margin-bottom:30px; }
.launch-panel .button { display:flex; min-height:46px; padding:9px 33px; }
.launch-panel p { margin-top:20px; color:#444; font-size:16px; }
.game-status { flex:1; }
body.desktop { min-height:100vh; position:relative; padding-bottom:64px; display:flow-root; }
.titlebar > img,.task img { width:24px; height:24px; image-rendering:pixelated; }
.titlebar h1,.titlebar h2 { min-width:0; }
.titlebar h2:focus { outline:none; }
.caption-button { flex-shrink:0; }
.desktop-icons { position:absolute; left:20px; top:28px; width:156px; display:flex; flex-direction:column; gap:28px; }
.desktop-icon { display:flex; flex-direction:column; align-items:center; gap:9px; padding:6px 2px; color:#fff; font:inherit; text-decoration:none; text-align:center; border:0; background:transparent; cursor:pointer; outline:none; }
.desktop-icon img { width:64px; height:64px; image-rendering:pixelated; }
.desktop-icon .icon-label { line-height:22px; text-shadow:1px 1px #000; }
.desktop-icon:focus .icon-label,.desktop-icon[aria-expanded="true"] .icon-label { background:#000080; outline:1px dotted white; outline-offset:-1px; }
@media(hover:hover) {
 a.game-icon:hover .icon-label { background:#000080; color:white; }
 .desktop-icon:hover .icon-label { background:#000080; }
 .document-entry:hover { background:#000080; color:#fff; }
}
.taskbar { z-index:1000; flex-wrap:wrap; }
.desktop .taskbar { position:absolute; }
.window-tasks { display:flex; gap:8px; min-width:0; }
.auxiliary-window { position:absolute; width:min(720px,calc(100% - 260px)); left:248px; top:116px; z-index:10; }
.notepad-window { left:310px; top:150px; display:flex; flex-direction:column; max-height:calc(100vh - 150px - 72px); }
.notepad-window .notepad-paper { overflow:auto; flex:1; }
.document-list { background:white; padding:16px 14px; }
.document-entry { display:flex; align-items:center; gap:16px; padding:10px 12px; min-height:64px; color:#000; text-decoration:none; }
.document-entry img { width:32px; height:32px; image-rendering:pixelated; flex-shrink:0; }
.document-entry:focus { outline:2px dotted #000; outline-offset:-3px; }
.notepad-paper { background:white; padding:24px 28px; min-height:340px; font:18px/1.55 "Courier New",monospace; }
.notepad-paper p { margin-bottom:20px; }
.notepad-paper p:last-child { margin-bottom:0; }
.auxiliary-window .statusbar > div { flex:1; }
@media(max-width:800px) {
 body { font-size:16px; }
 body.desktop { min-height:844px; padding-bottom:104px; }
 .desktop-icons { left:4px; top:18px; width:88px; gap:23px; }
 .desktop-icon { font-size:14px; gap:6px; padding:4px 0; }
 .desktop-icon .icon-label { padding:2px; line-height:18px; overflow-wrap:anywhere; }
 .games-window { width:calc(100% - 106px); margin:24px 8px 0 98px; }
 .titlebar { height:33px; padding:3px 4px; gap:5px; }
 .titlebar h1,.titlebar h2 { font-size:18px; line-height:24px; }
 .caption-button { width:27px; height:25px; }
 .window-menu { height:36px; padding:5px 8px; }
 .icon-grid { grid-template-columns:repeat(2,minmax(0,1fr)); padding:20px 5px 16px; gap:19px 2px; min-height:460px; }
 .game-icon { padding:8px 0; min-height:125px; gap:9px; }
 .icon-label { max-width:100%; padding:1px 2px; line-height:21px; }
 .icon-state { font-size:13px; line-height:16px; }
 .statusbar { flex-direction:column; font-size:14px; }
 .statusbar > div { min-height:29px; padding:4px 6px; }
 .busy-dialog { width:calc(100% - 40px); margin:24px 12px 16px auto; }
 .dialog-body { padding:24px 18px; gap:18px; }
 .dialog-actions { padding-bottom:22px; }
 .dialog-actions .button { min-height:40px; min-width:100px; }
 .taskbar { gap:5px; padding:6px 4px; }
 .home-button { min-height:36px; padding:4px 7px; font-size:15px; }
 .task { width:auto; min-width:110px; max-width:100%; height:36px; padding:4px 8px; font-size:14px; }
 .window-tasks { order:4; flex:1 0 100%; gap:5px; }
 .window-tasks:empty { display:none; }
 .window-tasks .task { flex:1; }
 .tray { padding:6px; font-size:11px; }
 .auxiliary-window,.notepad-window { left:8px; top:92px; width:calc(100% - 16px); }
 .notepad-window { max-height:calc(100vh - 92px - 120px); }
 .document-list { padding:10px 6px; }
 .document-entry { padding:10px 8px; gap:12px; min-height:66px; line-height:22px; }
 .notepad-paper { font-size:16px; padding:22px 18px; min-height:370px; }
 .game-desktop { padding:6px 6px 58px; }
 .game-window { min-height:calc(100vh - 64px); }
 .game-layout { display:flex; flex-direction:column; }
 .help-pane { padding:24px 20px 12px; }
 .help-pane h2 { font-size:24px; }
 .help-pane p { font-size:16px; }
 .help-pane .help-meta { font-size:14px; margin:18px 0 12px; }
 .client { padding:6px; }
 .game-area { aspect-ratio:3/2; min-height:280px; }
 .link-client { min-height:300px; }
 .game-toolbar { min-height:50px; height:auto; padding:6px; gap:12px; }
 .game-toolbar .button { min-height:36px; min-width:90px; }
 .placeholder-title { font-size:22px; }
 .placeholder-note,.launch-panel p { font-size:14px; }
 .desktop:has(.maximized) .busy-dialog { right:12px; width:calc(100% - 24px); }
 .games-window.maximized { margin:0; width:100%; min-height:calc(100vh - 50px); z-index:9; }
}
.placeholder-words { color:#808080; }