:root {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  color: #202222;
  font-size: 12px;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; background: #fff; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; background: #c5c5c5; border: 2px solid; border-color: #fff #555 #555 #fff; border-radius: 0; padding: 4px 9px; }
button:disabled { cursor: default; color: #888; }
button:active:not(:disabled) { border-color: #555 #fff #fff #555; }
button:focus-visible, a:focus-visible { outline: 2px dotted #000; outline-offset: 2px; }
a { color: inherit; }
input, textarea, select { border: 2px solid; border-color: #777 #fff #fff #777; border-radius: 0; background: #fff; padding: 6px; min-width: 0; }
input:focus, textarea:focus, select:focus { outline: 1px solid #263c84; }
textarea { resize: vertical; }
label { display: grid; gap: 5px; }
label + label { margin-top: 13px; }
[hidden] { display: none !important; }

.page-header { width: min(1260px, 94vw); margin: 0 auto; padding: 24px 36px 2px; display: flex; justify-content: space-between; align-items: center; color: #686861; }
.page-header > a { text-decoration: none; font-size: 12px; }
.page-header > button { border: 0; background: none; font: 18px Georgia, serif; padding: 2px 8px; }
.monitor { position: relative; width: min(1440px, calc(100vw - 24px), calc((100svh - 64px) * 1.5)); aspect-ratio: 3 / 2; margin: 0 auto; flex: 0 0 auto; background: url('../assets/aim-monitor.png') center / 100% 100% no-repeat; filter: drop-shadow(0 18px 25px #392d1f35); }
.desktop { position: absolute; inset: 10.35% 12.7% 18.8%; overflow: hidden; isolation: isolate; border-radius: 1.3%; background: #69a8ce url('../assets/bliss.jpg') center / cover; box-shadow: inset 0 0 24px #0006; }
.desktop::before { content: ""; position: absolute; inset: 0; background: linear-gradient(130deg, #d0e4eb33, transparent 70%); pointer-events: none; }
.desktop-shortcuts { position: absolute; left: 17px; top: 20px; display: grid; gap: 20px; }
.desktop-shortcuts a, .desktop-shortcuts button { width: 65px; padding: 0; border: 0; background: none; color: #fff; text-align: center; text-decoration: none; text-shadow: 1px 1px #26313d; font-size: 10px; line-height: 1.4; }
.desktop-shortcuts span { display: block; color: #d4e4f3; text-shadow: 1px 2px #17366a; font-size: 32px; line-height: 1.2; }
.desktop-shortcuts .shortcut-image { width: 36px; height: 36px; margin: 0 auto; overflow: hidden; border: 2px solid #fff; background: #ccc; box-shadow: 1px 1px #111; }
.desktop-shortcuts .shortcut-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.desktop-shortcuts .shortcut-solitaire { border:0; background:transparent; box-shadow:none; }
.desktop-shortcuts .shortcut-solitaire img { filter:drop-shadow(1px 2px 1px #1118); }
.desktop-shortcuts .shortcut-mine { display:grid; width:36px; height:36px; margin:0 auto; grid-template-columns:repeat(3,1fr); background:#999; box-shadow:2px 3px 4px #1119; transform:perspective(50px) rotateX(3deg) rotateY(-4deg); }
.desktop-shortcuts .shortcut-mine i { position:relative; border:1px solid #888; background:#c0c0c0; }
.desktop-shortcuts .shortcut-mine i:nth-child(1)::after,.desktop-shortcuts .shortcut-mine i:nth-child(5)::after,.desktop-shortcuts .shortcut-mine i:nth-child(7)::after { content:"1"; position:absolute; inset:0; display:grid; place-items:center; color:#0000ef; font:700 12px/1 "Courier New",monospace; text-shadow:none; }
.desktop-shortcuts .shortcut-mine i:nth-child(2)::after { content:"3"; position:absolute; inset:0; display:grid; place-items:center; color:#ef0000; font:700 12px/1 "Courier New",monospace; text-shadow:none; }
.desktop-shortcuts .shortcut-mine i:nth-child(3)::before { content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%; background:#050505; box-shadow:-4px 0 #050505,4px 0 #050505,0 -4px #050505,0 4px #050505; transform:translate(-50%,-50%); }

.window { min-width: 0; padding: 3px; border: 2px solid; border-color: #f3f3f3 #3d3d3d #3d3d3d #f3f3f3; background: #c5c5c5; box-shadow: 1px 1px 0 #000, 4px 7px 17px #14232644; }
.titlebar { min-height: 24px; padding: 2px 3px 2px 5px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: linear-gradient(90deg, #080c75, #176baa); color: #fff; font-size: 12px; font-weight: bold; }
.titlebar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window-close { width: 18px; height: 18px; padding: 0; flex-shrink: 0; display: grid; place-items: center; border: 2px solid; border-color: #fff #444 #444 #fff; background: #c5c5c5; color: #111; text-decoration: none; font: 700 17px / 14px Arial, sans-serif; }
.menubar { min-height: 24px; padding: 1px 2px; display: flex; align-items: center; gap: 4px; border-bottom: 1px solid #888; }
.menubar button { padding: 3px 5px; border: 0; background: transparent; font-size: 10px; }
.menubar button:hover { background: #ddd; }
.window-status { min-height: 20px; padding: 3px 5px; display: flex; align-items: center; gap: 5px; border: 1px solid; border-color: #888 #eee #eee #888; font-size: 10px; line-height: 1.3; }
.window-status i { width: 7px; height: 7px; flex-shrink: 0; display: block; border: 1px solid #164600; border-radius: 50%; background: #327c24; }
.window-status i.disconnected { background: #a57818; }

.signon { position: absolute; left: 54%; top: 48%; width: 318px; transform: translate(-50%, -50%); }
.brand { margin: 16px 18px 18px; padding: 17px 12px; display: flex; align-items: center; justify-content: center; gap: 21px; border: 2px inset #dedede; background: radial-gradient(ellipse at 20% 10%, #255cb3, #060b6a 65%); color: #fff; }
.brand strong { font-size: 23px; font-style: italic; line-height: 1.02; }
.brand small { display: block; margin-top: 7px; color: #d8dced; font-size: 10px; letter-spacing: 1px; }
.brand-symbol { color: #ffdf00; font: 78px / 1 Georgia, serif; text-shadow: 2px 3px #000; }
#auth-form { padding: 0 23px 16px; }
.signon-hint { margin: 10px 0 0; font-size: 11px; text-align: center; color: #3f3f3f; }
.default-button { min-width: 110px; margin: 15px auto 9px; display: block; font-weight: bold; box-shadow: 0 0 0 1px #111; }
.text-button { margin: auto; display: block; border: 0; background: none; color: #000080; text-decoration: underline; font-size: 11px; }

.workspace { position: absolute; left: 6%; right: 4%; top: 8%; bottom: 10%; display: grid; grid-template-columns: minmax(190px, .7fr) minmax(300px, 1.55fr); align-items: start; gap: 17px; }
.buddy-window, .message-window { height: 94%; min-height: 0; display: flex; flex-direction: column; }
.buddy-brand { height: 71px; margin: 8px 7px; display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(120deg, #070c70, #265898); color: #fff; font-size: 13px; font-weight: bold; font-style: italic; }
.buddy-brand .brand-symbol { font-size: 53px; }
.buddy-brand small { display: block; margin-top: 4px; font-size: 9px; font-style: normal; font-weight: normal; }
.self { padding: 0 8px 9px; display: flex; align-items: center; gap: 8px; }
.self strong { display: block; overflow-wrap: anywhere; font-size: 11px; }
.self button { padding: 3px 0; border: 0; background: transparent; color: #245e1f; font-size: 10px; }
.avatar { min-width: 33px; height: 33px; display: grid; place-items: center; border: 2px solid; border-color: #fff9 #846533; background: linear-gradient(135deg, #ffe39f, #e8b255); box-shadow: inset 0 0 12px #ffe; color: #594521; font: 23px Georgia, serif; }
.avatar.large { width: 43px; min-width: 43px; height: 46px; font-size: 33px; }
.list-tabs { padding: 0 7px; display: flex; align-items: center; gap: 9px; font-size: 10px; }
.list-tabs strong { position: relative; bottom: -2px; padding: 5px 10px; border: 2px solid; border-color: #fff #777 #c5c5c5 #fff; background: #c5c5c5; }
.list-tabs > span { font-size: 9px; }
.buddy-list { min-height: 50px; margin: 0 7px; flex: 1; overflow: auto; border: 2px inset #eee; background: #fff; }
.buddy-group { padding: 8px 6px 4px; background: #f3f3f3; font-size: 10px; font-weight: bold; }
.buddy { width: 100%; padding: 7px 8px; display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; border: 0; background: #fff; text-align: left; font-size: 11px; }
.buddy small { display: block; margin-top: 3px; opacity: .75; font-size: 9px; font-weight: normal; }
.buddy > span:first-child { color: #27862a; font-size: 11px; }
.buddy.offline > span:first-child { color: #aaa; }
.buddy.away > span:first-child { color: #b17c05; }
.buddy-actions { padding: 10px 3px 7px; display: flex; justify-content: space-around; }
.buddy-actions button { padding: 0 3px; border: 0; background: transparent; font-size: 9px; }
.buddy-actions button > span { margin-bottom: 4px; display: block; color: #72571c; font-size: 23px; line-height: 1.1; }

.conversation-grid { min-height: 0; margin: 7px 5px 0; flex: 1; display: grid; grid-template-columns: 62px 1fr; grid-template-rows: minmax(90px, 1fr) 26px 90px; gap: 5px; }
.transcript { grid-column: 1 / -1; padding: 9px; overflow: auto; overflow-wrap: anywhere; border: 2px inset #eee; background: #fff; font: 14px / 1.4 'Times New Roman', serif; }
.message-row { margin: 0 0 7px; white-space: pre-wrap; }
.message-row strong { color: #0000af; }
.message-row.mine strong { color: #be1212; }
.message-delete { float: right; padding: 0 2px; border: 0; background: none; color: #8b0000; font: 12px / 1 Tahoma, sans-serif; }
.formatbar { grid-column: 1 / -1; padding: 2px 9px; display: flex; align-items: center; gap: 15px; border: 1px solid; border-color: #eee #888 #888 #eee; color: #111; font: 12px Georgia, serif; }
.formatbar button { padding: 0; border: 0; background: none; color: #908213; font-size: 19px; }
.format-a { color: #000080; font-weight: bold; }
.format-divider { width: 1px; height: 14px; background: #888; }
.icon-column { padding: 7px 4px; display: flex; flex-direction: column; align-items: center; gap: 8px; overflow: hidden; border: 2px inset #eee; background: linear-gradient(150deg, #aad9e9, #4e9ac0); }
.own { grid-row: 3; grid-column: 1; }
#message-form { min-height: 0; grid-row: 3; grid-column: 2; display: flex; }
#message { width: 100%; height: 100%; padding: 8px; resize: none; font: 14px / 1.4 'Times New Roman', serif; }
.sendbar { padding: 6px 7px; display: flex; align-items: center; justify-content: flex-end; }
.sendbar button { min-width: 76px; display: flex; align-items: center; gap: 8px; font-size: 11px; }
.sendbar button > span { color: #597069; font-size: 23px; }

.presence-event { position: absolute; right: 20px; bottom: 42px; z-index: 7; min-width: 126px; padding: 7px 10px; display: flex; align-items: center; gap: 9px; border: 2px solid; border-color: #fff #444 #444 #fff; background: #c5c5c5; box-shadow: 2px 3px 8px #0006; }
.presence-event strong { max-width: 150px; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.presence-door { position: relative; width: 26px; height: 34px; flex: 0 0 auto; display: block; border: 3px solid #6c542c; border-bottom: 0; perspective: 70px; }
.presence-door i { position: absolute; inset: 1px; display: block; background: #9a7440; transform-origin: left; }
.presence-door .runner { position: absolute; left: 5px; bottom: 3px; z-index: 2; width: 15px; height: 17px; }
.presence-event.joining .presence-door i { animation: door-open 1.2s ease-in-out both; }
.presence-event.leaving .presence-door i { animation: door-close 1.2s ease-in-out both; }
.presence-event.joining .presence-door .runner { animation: runner-in 1.2s ease-out both; }
.presence-event.leaving .presence-door .runner { animation: runner-out 1.2s ease-in both; }
@keyframes door-open { 0%, 30% { transform: rotateY(0); } 65%, 100% { transform: rotateY(-72deg); } }
@keyframes door-close { 0%, 30% { transform: rotateY(-72deg); } 75%, 100% { transform: rotateY(0); } }
@keyframes runner-in { 0%, 35% { transform: translateX(24px); opacity: 0; } 70%, 100% { transform: translateX(0); opacity: 1; } }
@keyframes runner-out { 0%, 25% { transform: translateX(0); opacity: 1; } 70%, 100% { transform: translateX(24px); opacity: 0; } }

.taskbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 29px; padding: 2px 4px; display: flex; align-items: center; gap: 7px; border-top: 2px solid #eee; background: #c5c5c5; }
.taskbar button { min-width: 150px; padding: 3px 10px; text-align: left; font-size: 10px; }
.start-button { padding: 3px 6px; border: 2px solid; border-color: #fff #444 #444 #fff; text-decoration: none; font-size: 11px; font-weight: bold; }
.start-button > span { margin-right: 4px; color: #166b32; }
.task-clock { margin-left: auto; padding: 4px 8px; border: 2px inset #ddd; font-size: 10px; }
.screen-glass { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; background: linear-gradient(125deg, #fff1, transparent 50%); box-shadow: inset 0 0 14px #0005; }

.profile-dialog { width: 340px; max-width: 92vw; padding: 3px; }
.profile-dialog::backdrop { background: #13202866; }
.profile-dialog form, #profile-view { padding: 17px; }
.profile-dialog input, .profile-dialog textarea, .profile-dialog select { width: 100%; }
.profile-dialog p { overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.5; }
.profile-dialog #profile-error { color: #a00000; font-size: 11px; }
#profile-view { display: grid; gap: 9px; }
#profile-view button { justify-self: start; }
.profile-identity { font-weight: bold; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.runner { width: 15px; height: 17px; vertical-align: middle; object-fit: contain; }
.brand-symbol .runner { width: 65px; height: 78px; }
.buddy-brand .brand-symbol .runner { width: 43px; height: 53px; }
.desktop-shortcuts .runner { width: 33px; height: 38px; }
.buddy-actions .runner { width: 23px; height: 23px; }
.titlebar .runner { margin-right: 4px; }

@media (min-width: 1450px) {
  .workspace { top: 10%; bottom: 12%; left: 8%; right: 7%; }
}

@media (max-width: 1100px) {
  .monitor { margin: 4px auto; }
  .desktop { position: absolute; inset: 10.35% 12.7% 18.8%; min-height: 0; border: 0; border-radius: 1.3%; box-shadow: inset 0 0 24px #0006; }
  .workspace { left: 4%; right: 4%; top: 7%; bottom: 9%; }
  .page-header { padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 650px) {
  .page-header { width: min(100%, 680px); padding: 7px 16px 1px; }
  .page-header > a { font-size: 9px; }
  .desktop-shortcuts { left: 8px; top: 8px; gap: 8px; transform: scale(.62); transform-origin: top left; }
  .signon { left: 54%; top: 48%; transform: translate(-50%, -50%) scale(.5); }
  .workspace { left: 2%; right: auto; top: 5%; bottom: auto; width: 150%; height: 135%; transform: scale(.66); transform-origin: top left; }
  .presence-event { transform: scale(.65); transform-origin: right bottom; }
}

@media (max-width: 480px) {
  .page-header { padding-top: 5px; }
  .signon { transform: translate(-50%, -50%) scale(.32); }
  .workspace { width: 200%; height: 190%; transform: scale(.5); }
  .desktop-shortcuts { transform: scale(.45); }
  .presence-event { transform: scale(.5); }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .presence-event .presence-door i, .presence-event .presence-door .runner { animation: none !important; }
}

@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {

  body { justify-content: flex-start; overflow: auto; }
  .page-header { width: 100%; padding: 0 12px; min-height: 44px; }
  .page-header > a { font-size: 13px; padding: 12px 0; }
  .page-header > button { min-width: 44px; min-height: 44px; }
  .monitor { width: 100%; margin: 0; aspect-ratio: auto; background: none; filter: none; }
  .desktop { position: relative; inset: auto; min-height: calc(100svh - 44px); overflow: visible; padding: 12px 8px 60px; border-radius: 0; box-shadow: none; }
  .desktop-shortcuts, .screen-glass { display: none; }
  .signon { position: relative; left: auto; top: auto; width: min(100%, 360px); margin: 16px auto; transform: none; }
  input, textarea, select, #message { font-size: 16px; }
  button, .text-button { min-height: 44px; }
  .window-close { width: 40px; height: 40px; min-height: 40px; }
  .workspace { position: relative; inset: auto; width: 100%; height: auto; transform: none; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .buddy-window { height: 360px; }
  .message-window { height: 540px; }
  .conversation-grid { grid-template-rows: minmax(90px, 1fr) 44px 90px; }
  .buddy-brand { display: none; }
  .self { padding-top: 8px; }
  .buddy-actions { padding: 4px; }
  .buddy, .self strong, .menubar button { font-size: 13px; }
  .taskbar { position: fixed; height: 48px; z-index: 8; }
  .start-button { display: grid; align-items: center; grid-auto-flow: column; min-height: 44px; }
  .taskbar button { min-width: 0; font-size: 11px; }
  .task-clock { padding: 4px; white-space: nowrap; }
  .presence-event { position: fixed; bottom: 55px; transform: none; }
}

img[src$="solitaire-logo.png"] { clip-path: polygon(23% 18%, 29% 9%, 43% 6%, 69% 6%, 74% 10%, 74% 28%, 80% 34%, 78% 38%, 74% 38%, 74% 79%, 36% 88%, 27% 80%, 27% 40%, 21% 39%, 18% 35%, 26% 26%); }
@media (max-height:500px) and (min-width:651px) {
  .desktop { padding-top:0; }
  .signon { width:min(620px,100%); margin:0 auto; display:grid; grid-template-columns:220px 1fr; }
  .signon > .titlebar,.signon > .window-status { grid-column:1 / -1; }
  .signon .brand { align-self:center; margin:12px; }
  #auth-form { padding:6px 16px; }
  #auth-form label { margin:4px 0; }
  #auth-form .default-button { margin:8px auto 2px; }
}
@media (max-height:500px) and (min-width:651px) {
  .signon .brand { gap:8px; padding:12px 6px; }
  .signon .brand strong { font-size:18px; }
  .signon .brand .runner { width:45px; }
}
/* The room is visible immediately; choosing a name is a small composition step. */
dialog.signon{position:fixed;inset:0;margin:auto;z-index:100;width:min(360px,90vw);height:fit-content;max-height:90vh;overflow:auto}
dialog.signon:not([open]){display:none}
dialog.signon::backdrop{background:rgba(0,0,0,.28)}
dialog.signon{transform:none}
.workspace{grid-template-rows:minmax(0,1fr)}
.buddy-window,.message-window{height:100%;overflow:hidden}
.message-window>.titlebar,.message-window>.sendbar,.message-window>.window-status{flex-shrink:0}
.conversation-grid{grid-template-rows:minmax(50px,1fr) 26px minmax(50px,.55fr)}
@media (max-width:700px),(max-width:950px) and (max-height:500px){
 .workspace{grid-template-rows:auto auto}
 .buddy-window{height:300px}
 .message-window{height:480px}
 .conversation-grid{grid-template-rows:minmax(90px,1fr) 44px 90px}
}