/* The Starr Network: a 640x480 VGA "monitor", scaled to the window. Laid out in VGA pixels with the 8x16 IBM VGA font
   (The Ultimate Oldschool PC Font Pack by VileR, CC BY-SA 4.0). The frame follows the early-90s networks: a light title
   strip (place | product | screen), the screen, and a green-marble command column with the red Options button. */
@font-face { font-family: 'VGA'; src: url('/fonts/vga8x16.woff') format('woff'); font-display: block; }

:root {
  --scale: 1;
  --marble: #24553a; --marble2: #1a4129; --marble3: #2f6b4a; --gold: #d4ac52; --gold2: #a07a2a;
  --cyan: #46bcc8; --cyan-hi: #a6eef4; --cyan-lo: #1d7882; --red: #c8332e; --red-hi: #f08a80; --red-lo: #7a1512;
  --plate: #e8e04a; --plate-hi: #fffaa0; --plate-lo: #a89a1a; --maroon: #7a1f3d;
  --pink: #f1dfe6; --lavender: #e9d6e6; --teal: #1e9a9a; --royal: #1a2cb0; --felt: #2e8b3a; --felt2: #237030;
  --face: #c6c6c6; --hi: #ffffff; --lo: #6b6b6b; --ink: #000;
  --blue-t: #1c2fa0; --red-t: #a0102a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #050505; color: var(--ink); overflow: hidden; }
body { display: grid; place-items: center; font: 16px/16px 'VGA', 'Courier New', monospace; -webkit-font-smoothing: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.nojs { color: #fff; }
img, canvas { image-rendering: pixelated; }

#monitor { position: relative; width: calc(660px * var(--scale)); height: calc(500px * var(--scale)); display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 40%, #2a2a2e, #111 70%); border-radius: calc(18px * var(--scale)); box-shadow: 0 0 0 2px #000, 0 20px 60px rgba(0,0,0,.6); }
.bezel-label { position: absolute; bottom: calc(1px * var(--scale)); left: 0; right: 0; text-align: center; color: #555; font-size: calc(16px * var(--scale) * .55); line-height: 1; letter-spacing: .1em; }
#screen { position: relative; width: 640px; height: 480px; transform: scale(var(--scale)); transform-origin: center; background: #000; overflow: hidden; display: flex; flex-direction: column; }
#screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 99; background: repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 2px); }
#screen.lost::before { content: 'Connection to Host has been Lost. Redialing...'; position: absolute; z-index: 98; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap;
  background: var(--red); color: #fff; padding: 8px 16px; box-shadow: inset 2px 2px 0 var(--red-hi), inset -2px -2px 0 var(--red-lo), 0 0 0 2px #000; }

/* ------------------------------------------------------------ the frame */
.strip { height: 16px; flex: none; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; padding: 0 8px; background: #e6e6e6; white-space: nowrap; box-shadow: inset 0 -1px 0 #9a9a9a; }
.strip span { overflow: hidden; text-overflow: ellipsis; }
.s-place { color: #000; }
.s-product { color: var(--blue-t); text-align: center; }
.s-title { color: var(--red-t); text-align: right; }
#screen:not(.online) .strip { display: none; }
#content { flex: 1; position: relative; display: flex; min-height: 0; }
#main { flex: 1; position: relative; min-width: 0; overflow: hidden; }
.column { width: 136px; flex: none; display: flex; flex-direction: column; padding: 6px 8px 8px; gap: 6px; position: relative; }
.nocol .column { display: none; }
.marble, .column {
  background:
    radial-gradient(60px 26px at 30% 20%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(80px 30px at 70% 60%, rgba(0,0,0,.18), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(32deg, rgba(0,0,0,.12) 0 2px, transparent 2px 13px),
    linear-gradient(160deg, var(--marble3), var(--marble) 40%, var(--marble2));
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.18), inset -2px -2px 0 rgba(0,0,0,.4);
}
.logo { text-align: center; padding: 4px 0 6px; }
.logo b { display: block; font-size: 32px; line-height: 32px; color: var(--gold); font-weight: normal; letter-spacing: 3px; text-shadow: 2px 2px 0 #0d2416, -1px -1px 0 #f2d890; font-family: Georgia, 'Times New Roman', serif; font-weight: bold; }
.logo span { color: #f2d890; text-shadow: 1px 1px 0 #0d2416; }
.cmds { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cmds .gap { height: 6px; }
.pair { display: flex; gap: 6px; }
.pair .cbtn { flex: 1; }
.colfoot { display: flex; flex-direction: column; gap: 6px; }

.cbtn { background: var(--cyan); color: #000; border: 0; min-height: 28px; padding: 2px 6px; cursor: pointer; line-height: 16px;
  box-shadow: inset 2px 2px 0 var(--cyan-hi), inset -2px -2px 0 var(--cyan-lo), 0 0 0 1px #000; }
.cbtn:hover:not(:disabled) { background: #5ccfda; }
.cbtn:active:not(:disabled) { box-shadow: inset 2px 2px 0 var(--cyan-lo), inset -2px -2px 0 var(--cyan-hi), 0 0 0 1px #000; }
.cbtn:disabled { color: #1f6a72; cursor: default; }
.cbtn.options { background: var(--red); color: #fff; box-shadow: inset 2px 2px 0 var(--red-hi), inset -2px -2px 0 var(--red-lo), 0 0 0 1px #000; }
.cbtn.options:hover { background: #dc4640; }
.cbtn.wide { width: 100%; }
.cbtn.on { background: var(--plate); box-shadow: inset 2px 2px 0 var(--plate-hi), inset -2px -2px 0 var(--plate-lo), 0 0 0 1px #000; }
.mailflag { position: relative; }
.mailflag.on::after { content: '\2709'; position: absolute; right: 4px; top: 6px; color: var(--red); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.floatopts { position: absolute; right: 8px; bottom: 8px; z-index: 5; width: 112px; }

/* ------------------------------------------------------------ dialogs, buttons, inputs */
.win { background: var(--teal); color: #fff; box-shadow: inset 2px 2px 0 #6cd6d6, inset -2px -2px 0 #0e5a5a, 0 0 0 2px #000; padding: 2px; }
.titlebar { background: #fff; color: #000; height: 18px; padding: 1px 6px; display: flex; align-items: center; margin-bottom: 2px; }
.btn { background: var(--cyan); color: #000; border: 0; padding: 3px 12px; cursor: pointer; line-height: 16px; min-height: 24px;
  box-shadow: inset 2px 2px 0 var(--cyan-hi), inset -2px -2px 0 var(--cyan-lo), 0 0 0 1px #000; }
.btn:hover:not(:disabled) { background: #5ccfda; }
.btn:active:not(:disabled) { box-shadow: inset 2px 2px 0 var(--cyan-lo), inset -2px -2px 0 var(--cyan-hi), 0 0 0 1px #000; }
.btn:disabled { color: #1f6a72; cursor: default; }
.btn.primary { background: var(--red); color: #fff; box-shadow: inset 2px 2px 0 var(--red-hi), inset -2px -2px 0 var(--red-lo), 0 0 0 1px #000; }
.btn.primary:hover:not(:disabled) { background: #dc4640; }
.btn.small { padding: 1px 8px; min-height: 20px; }
.btn.tiny { padding: 0 5px; min-height: 18px; }
.btn.red { color: #a00; }
.btn:focus-visible, .cbtn:focus-visible, .plate:focus-visible, .facebtn:focus-visible, .card.clickable:focus-visible, .hot:focus-visible, .fbox:focus-visible, .plaque button:focus-visible { outline: 2px dotted #fff; outline-offset: -4px; }
input[type=text], input[type=password], input[type=search], textarea, select { background: #fff; color: #000; border: 0; padding: 2px 4px; line-height: 16px; border-radius: 0;
  box-shadow: inset 2px 2px 0 var(--lo), inset -2px -2px 0 var(--hi), 0 0 0 1px #000; outline: none; }
input:focus, textarea:focus, select:focus { background: #ffffe0; }
textarea { resize: none; width: 100%; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.fine { color: #cfeeee; }
.err { color: #ffe36a; min-height: 16px; margin: 4px 0 0; }
.empty { color: #666; padding: 8px; }
p { margin: 0 0 8px; }
h1, h2, h3 { font-weight: normal; margin: 0; }
.modal { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0,0,30,.35); }
.dialog { width: 400px; max-height: 456px; display: flex; flex-direction: column; }
.dialog.wide { width: 560px; }
.dialog-body { padding: 8px 10px; overflow: auto; }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; padding: 6px 8px; }
.dialog input[type=text], .dialog textarea { width: 100%; }
.dialog .status b { color: #ffe36a; font-weight: normal; }
.dialog .mailnote { color: #ffe36a; }
.optgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.msgbox { background: #fff; color: #000; padding: 6px 8px; box-shadow: inset 2px 2px 0 var(--lo); overflow-wrap: anywhere; }
label.opt, .compose label, .profile label { display: flex; gap: 8px; align-items: center; margin: 4px 0; }
label.opt span, .compose label span, .profile label span { width: 80px; flex: none; }
#toast { position: absolute; z-index: 60; left: 50%; bottom: 40px; transform: translate(-50%, 20px); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
  background: var(--plate); color: #000; padding: 4px 10px; box-shadow: inset 2px 2px 0 var(--plate-hi), inset -2px -2px 0 var(--plate-lo), 0 0 0 2px #000; max-width: 600px; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.error { background: var(--red); color: #fff; box-shadow: inset 2px 2px 0 var(--red-hi), inset -2px -2px 0 var(--red-lo), 0 0 0 2px #000; }
.popmenu { position: absolute; z-index: 55; width: 168px; display: flex; flex-direction: column; }
.popmenu button { background: none; border: 0; text-align: left; padding: 2px 8px; cursor: pointer; color: #fff; }
.popmenu button:hover { background: #fff; color: #000; }
.pm-head { display: flex; gap: 6px; align-items: center; padding: 2px; border-bottom: 2px solid #0e5a5a; margin-bottom: 2px; }
.pm-head img { width: 24px; height: 28px; }

/* ------------------------------------------------------------ boot / title / sign on */
.boot { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 26px; color: #fff;
  background: radial-gradient(ellipse at 50% 30%, #2a1a6a 0%, #0a0630 55%, #000 100%); }
.boot::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #aaf, transparent), radial-gradient(1px 1px at 70% 15%, #fff, transparent), radial-gradient(1px 1px at 85% 60%, #ffa, transparent), radial-gradient(1px 1px at 55% 85%, #fff, transparent), radial-gradient(1px 1px at 20% 90%, #fff, transparent), radial-gradient(1px 1px at 92% 30%, #fff, transparent); }
.boot-logo { position: relative; text-align: center; margin-bottom: 16px; }
.boot-logo .mono { display: inline-block; font: bold 56px/56px Georgia, 'Times New Roman', serif; color: var(--gold); letter-spacing: 6px; text-shadow: 3px 3px 0 #3a2a08, -1px -1px 0 #ffe9a8; }
.boot-logo h1 { font-size: 16px; color: #f2d890; letter-spacing: 4px; margin-top: 4px; }
.boot-logo .tag { color: var(--cyan-hi); margin-top: 8px; }
.connect { position: relative; width: 430px; }
.connect-body { padding: 10px 12px; }
.modem { display: flex; gap: 6px; align-items: center; background: #222; color: #aaa; padding: 4px 8px; margin: 4px 4px 8px; box-shadow: inset 2px 2px 0 #000; }
.led { width: 8px; height: 8px; background: #330; display: inline-block; }
.led.on { background: #ff5555; box-shadow: 0 0 4px #ff5555; }
.term { margin: 0 4px 4px; height: 150px; background: #000; color: #55ff55; padding: 6px 8px; font: inherit; white-space: pre-wrap; overflow: hidden; }
.signon label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.signon label span { width: 128px; }
.signon input { flex: 1; }
.signon .fine { color: #d8ffff; }
.stats { color: #ffe36a; margin: 10px 0 0; text-align: center; }

/* ------------------------------------------------------------ painted scenes (map and lands) */
.scene { position: absolute; inset: 0; background: #000; }
.scene canvas.art { position: absolute; left: 0; top: 0; width: 640px; height: 464px; }
.hot { position: absolute; background: none; border: 0; cursor: pointer; padding: 0; }
.hot .sign { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; opacity: 0;
  background: var(--plate); color: var(--maroon); padding: 1px 8px; box-shadow: inset 2px 2px 0 var(--plate-hi), inset -2px -2px 0 var(--plate-lo), 0 0 0 2px #000; text-transform: uppercase; }
.hot:hover .sign, .hot:focus-visible .sign { opacity: 1; }
.hot.soon .sign { background: #ccc; color: #444; box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #777, 0 0 0 2px #000; }
.caption { position: absolute; left: 8px; bottom: 8px; right: 128px; background: rgba(0,0,0,.72); color: #fff; padding: 4px 8px; box-shadow: 0 0 0 2px #000; min-height: 40px; }
.caption b { color: var(--plate); font-weight: normal; }
.scene .tl { position: absolute; left: 8px; top: 8px; z-index: 3; display: flex; gap: 6px; }

/* ------------------------------------------------------------ waiting rooms (nameplates) and chat rooms (face row) */
.wroom { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--pink); }
.plates { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 28px; gap: 8px 10px; padding: 10px 10px 6px; align-content: start; overflow-y: auto; }
.plate { display: flex; align-items: center; gap: 6px; background: var(--plate); color: var(--maroon); border: 0; padding: 0 6px 0 2px; cursor: pointer; text-align: center;
  box-shadow: inset 2px 2px 0 var(--plate-hi), inset -2px -2px 0 var(--plate-lo), 0 0 0 1px #000; min-width: 0; }
.plate.sel { background: #e0503a; color: #fff; box-shadow: inset 2px 2px 0 #ff9a80, inset -2px -2px 0 #8a1a10, 0 0 0 1px #000; }
.plate.me { color: #1c2fa0; }
.plate .ic { width: 20px; height: 20px; flex: none; display: grid; place-items: center; background: #f7f2c0; box-shadow: inset 1px 1px 0 var(--plate-lo); color: #000; }
.plate .ic img { width: 18px; height: 20px; object-fit: cover; object-position: top; }
.plate .ic.suit { color: #000; }
.plate .ic.suit.red { color: #c00; }
.plate b { flex: 1; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opentables { flex: none; padding: 0 10px 6px; display: flex; flex-direction: column; gap: 4px; max-height: 128px; overflow-y: auto; }
.opentables h4 { margin: 0; font-weight: normal; color: var(--maroon); }
.ot { display: flex; align-items: center; gap: 8px; background: #fff7fb; padding: 2px 4px; box-shadow: 0 0 0 1px #b48aa0; color: #000; }
.ot .seats { flex: 1; display: flex; gap: 6px; overflow: hidden; }
.ot .seats span { white-space: nowrap; }
.ot .seats .bot { color: #777; }
.ot .seats .open { color: #2a8a3e; }
.ot b { font-weight: normal; color: var(--maroon); white-space: nowrap; }
.wchat { flex: none; height: 92px; display: flex; flex-direction: column; margin: 0 10px 6px; }
.statusbar { flex: none; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.statusbar .readout { flex: 1; height: 20px; background: #0c3a1e; color: #8aff8a; padding: 2px 6px; box-shadow: inset 2px 2px 0 #000; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.statusbar .clock, .statusbar .pop { height: 20px; background: #0c3a1e; color: #e8f0a0; padding: 2px 6px; box-shadow: inset 2px 2px 0 #000; cursor: pointer; border: 0; }
.statusbar .pop::before { content: '\263a '; color: #8aff8a; }
.chatroom { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; padding: 6px; background: #c9d6e8; }
.facerow { flex: none; display: flex; gap: 4px; align-items: stretch; }
.fbox { width: 62px; height: 84px; flex: none; background: #f6d8e4; box-shadow: inset 0 0 0 2px #f2a0c0, inset 0 0 0 4px var(--plate), 0 0 0 1px #000; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 5px; border: 0; cursor: pointer; color: #000; }
.fbox.empty { cursor: default; background: repeating-linear-gradient(45deg, #f2dce6 0 2px, #e8d0dc 2px 4px); }
.fbox img { width: 48px; height: 56px; }
.fbox span { width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; text-align: center; margin-top: 2px; }
.pager { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.pager button { width: 22px; min-height: 26px; padding: 0; }
.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chatlog { flex: 1; overflow-y: auto; padding: 2px 6px; background: var(--teal); color: #fff; min-height: 0; overflow-wrap: anywhere; box-shadow: inset 2px 2px 0 #0e5a5a, 0 0 0 2px #6cd6d6; }
.chatlog .msg { display: grid; grid-template-columns: 96px 1fr; gap: 0 8px; }
.chatlog .msg > b { font-weight: normal; color: #ffffa0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatlog .msg > b.mine { color: #fff; }
.chatlog .sys { display: block; color: #b8ffb8; }
.chatlog .emote { display: block; color: #ffd0ff; }
.chatlog .whisper { display: block; color: #ffd0ff; }
.chatlog .t { display: none; }
.chatin { flex: none; margin-top: 6px; width: 100%; }
.crbar { flex: none; display: flex; gap: 8px; align-items: center; }
.crbar .herecount { margin-left: auto; color: #1c2fa0; }
.crbar .fine { color: #3a4a7a; }

/* ------------------------------------------------------------ the card table */
.table-screen { position: absolute; inset: 0; display: flex; }
.tfelt { position: relative; flex: 1; height: 100%; overflow: hidden;
  background:
    radial-gradient(ellipse 220px 160px at 50% 46%, rgba(255,255,255,.08), transparent 70%),
    repeating-radial-gradient(circle at 30% 40%, rgba(0,0,0,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(60deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px), var(--felt); }
.tside { width: 196px; flex: none; display: flex; flex-direction: column; padding: 6px; gap: 5px; color: #fff; }
.thead { display: flex; flex-direction: column; gap: 2px; }
.th-title { color: var(--gold); }
.th-sub { color: #cfe; min-height: 16px; }
.tboard { background: #0c3a1e; box-shadow: inset 2px 2px 0 #000; padding: 3px 4px; flex: none; }
.sheet { width: 100%; border-collapse: collapse; }
.sheet th { color: var(--gold); font-weight: normal; text-align: left; padding: 0 2px; }
.sheet td { padding: 0 2px; color: #c8e8c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 88px; }
.sheet tr.me td { color: #fff; }
.sheet tr.fine td, .tboard .fine { color: #8ab89a; white-space: normal; }
.tboard p { margin: 2px 0 0; }
.pegdot { display: inline-block; width: 8px; height: 8px; }
.contract b { color: var(--gold); font-weight: normal; }
.auction { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 2px; color: #c8e8c8; max-height: 48px; overflow: hidden; }
.auction b { color: #9ad; font-weight: normal; }
.call.red { color: #ff8a8a; }
.tlog { height: 64px; flex: none; overflow-y: auto; background: #0c3a1e; color: #8aff8a; padding: 2px 4px; box-shadow: inset 2px 2px 0 #000; overflow-wrap: anywhere; }
.tside .chat .chatlog .msg { grid-template-columns: 1fr; }
.tside .chatin { margin-top: 4px; }
.tside .cbtn.options { flex: none; }

.seat { position: absolute; display: flex; flex-direction: column; align-items: center; width: 112px; z-index: 2; }
.seat.top { left: calc(50% - 56px); top: 8px; }
.seat.left { left: 6px; top: 112px; }
.seat.right { right: 6px; top: 112px; }
.seat.bottom { left: 6px; bottom: 6px; width: 96px; }
.facebtn { border: 0; padding: 0; background: none; cursor: pointer; }
.seat .face { width: 48px; height: 56px; display: block; box-shadow: 0 0 0 1px #000; }
.seat.turn .face { box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--plate), 0 0 0 4px #000; }
.seat.turn .tag::before { content: '\25ba '; color: #c00; }
.seat .tag { margin-top: 2px; background: var(--plate); color: #000; padding: 0 5px; max-width: 112px; display: flex; gap: 4px; align-items: center; box-shadow: inset 1px 1px 0 var(--plate-hi), inset -1px -1px 0 var(--plate-lo), 0 0 0 1px #000; }
.seat .tag b { font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat.mine .tag { background: #fff; }
.seat .cpu, .seat .away { font-style: normal; color: #1c6a7a; }
.seat .away { color: #c00; }
.seat .badge { color: #fff; text-shadow: 1px 1px 0 #000; text-align: center; max-width: 150px; margin-top: 2px; }
.seat.empty .chairart { width: 48px; height: 56px; background: repeating-linear-gradient(90deg, #6b3e1c 0 6px, #7a4a22 6px 12px); box-shadow: 0 0 0 1px #000; opacity: .7; }
.seat .btn.tiny { margin-top: 3px; }
.backs { display: flex; position: absolute; }
.backs .card.tiny { width: 26px; height: 36px; margin-right: -19px; }
.backs.top { left: 86px; top: 2px; }
.backs.left, .backs.right { top: 112px; }
.backs.left { left: 30px; } .backs.right { right: 30px; }
.backs .cnt { position: absolute; right: -14px; top: -4px; background: var(--red); color: #fff; padding: 0 2px; line-height: 14px; box-shadow: 0 0 0 1px #000; }

.card { width: 34px; height: 48px; display: block; }
.card.clickable { cursor: pointer; }
.hand { position: absolute; left: 104px; right: 8px; bottom: 8px; display: flex; justify-content: center; height: 76px; align-items: flex-end; }
.hand .card { width: 51px; height: 72px; margin-right: -27px; transition: transform .08s; }
.hand.tight .card { margin-right: -31px; }
.hand .card:last-child { margin-right: 0; }
.hand .card.can:hover, .hand .card.sel { transform: translateY(-10px); }
.hand .card.sel { filter: drop-shadow(0 -2px 0 var(--plate)); }
.hand .card.dim { filter: brightness(.62); }
.hand .card.new { outline: 2px solid var(--plate); outline-offset: -2px; }
.trick { position: absolute; left: 50%; top: 178px; width: 0; height: 0; z-index: 3; }
.trick .card { position: absolute; width: 51px; height: 72px; }
.trick .tc-bottom { left: -25px; top: 26px; }
.trick .tc-top { left: -25px; top: -80px; }
.trick .tc-left { left: -84px; top: -28px; }
.trick .tc-right { left: 34px; top: -28px; }
.prompt { position: absolute; left: 104px; right: 8px; bottom: 90px; background: var(--plate); color: #000; padding: 3px 8px; box-shadow: inset 2px 2px 0 var(--plate-hi), inset -2px -2px 0 var(--plate-lo), 0 0 0 2px #000; display: flex; gap: 8px; align-items: center; justify-content: space-between; z-index: 4; }
.prompt.quiet { background: rgba(0,0,0,.55); box-shadow: none; color: #ddd; justify-content: center; }
.countdown { position: absolute; right: 12px; bottom: 118px; color: var(--plate); z-index: 5; text-shadow: 1px 1px 0 #000; }
.countdown.hurry { color: #ff6a6a; }
.centernote { position: absolute; left: 70px; right: 70px; top: 196px; text-align: center; color: #fff; text-shadow: 1px 1px 0 #000; }
.summary { position: absolute; left: 50px; right: 50px; top: 92px; z-index: 6; }
.sum-body { padding: 4px 8px; max-height: 210px; overflow: auto; }
.lobby { position: absolute; left: 112px; right: 12px; top: 236px; z-index: 6; }
.lobby.over { left: 60px; right: 60px; top: 116px; }
.lobby-body { padding: 8px 10px; }
.bidbox { position: absolute; left: 64px; right: 64px; top: 150px; z-index: 6; }
.bidbox.wide { left: 44px; right: 44px; top: 100px; }
.bb-body { padding: 6px 8px; }
.bb-grid { display: grid; gap: 3px; }
.bb-grid.spades { grid-template-columns: repeat(7, 1fr); }
.bb-grid.spades .nil { grid-column: span 2; }
.bb-grid.bridge { grid-template-columns: repeat(5, 1fr); }
.bb-grid .btn { padding: 0; }
.bb-grid .btn.red { color: #a00; }
/* cribbage */
.crib-center { position: absolute; inset: 0; pointer-events: none; }
.crib-center > * { pointer-events: auto; }
.cboard-wrap { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); box-shadow: 0 0 0 2px #000; }
.cboard { display: block; width: 280px; height: 44px; }
.deck, .crib { position: absolute; top: 164px; display: flex; flex-direction: column; align-items: center; color: #fff; text-shadow: 1px 1px 0 #000; }
.deck { left: 24px; } .crib { right: 24px; }
.deck .card, .crib .card, .cardslot { width: 51px; height: 72px; }
.deck .starter { position: absolute; top: 6px; left: 8px; }
.cardslot { box-shadow: inset 0 0 0 2px rgba(0,0,0,.3); }
.deck .lbl, .crib .lbl { margin-top: 10px; }
.pile { position: absolute; left: 50%; top: 172px; transform: translateX(-50%); display: flex; }
.pile .card { width: 51px; height: 72px; margin-right: -30px; }
.pile .card.pc-top { transform: translateY(-6px); }
.count { position: absolute; left: 50%; top: 250px; transform: translateX(-50%); color: #000; background: var(--plate); padding: 0 6px; box-shadow: 0 0 0 1px #000; }
.laid { position: absolute; display: flex; }
.laid .card.tiny { width: 26px; height: 36px; margin-right: -12px; }
.laid.l-top { left: calc(50% + 70px); top: 40px; }
.laid.l-bottom { left: 110px; bottom: 124px; }
.show { position: absolute; left: 56px; right: 56px; top: 120px; z-index: 6; }
.show-body { padding: 6px 8px; }
.show-cards { display: flex; gap: 2px; align-items: center; margin-bottom: 4px; }
.show-cards .plus { margin: 0 4px; }
.show-items div { display: flex; justify-content: space-between; }
.show-items b { font-weight: normal; color: #ffffa0; }
.show-total { margin-top: 4px; color: #ffe36a; text-align: right; }
/* bridge dummy */
.dummy { position: absolute; display: flex; flex-direction: column; gap: 2px; z-index: 2; }
.dummy .drow { display: flex; }
.dummy .card.mini { width: 26px; height: 36px; margin-right: -12px; }
.dummy .card.mini.can { cursor: pointer; }
.dummy .card.mini.can:hover { transform: translateY(-4px); }
.dummy .card.mini.dim { filter: brightness(.6); }
.dummy.d-top { left: calc(50% - 110px); top: 78px; flex-direction: row; gap: 6px; }
.dummy.d-top .drow { flex-direction: column; }
.dummy.d-top .card.mini { margin: 0 0 -26px; }
.dummy.d-left { left: 6px; top: 196px; }
.dummy.d-right { right: 6px; top: 196px; align-items: flex-end; }

/* ------------------------------------------------------------ FaceMaker, Post Office, Town Hall, profiles */
.fmscreen { position: absolute; inset: 0; background: var(--lavender); padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.banner { padding: 6px 12px; color: var(--gold); font: bold 16px/16px 'VGA', monospace; text-shadow: 1px 1px 0 #000; align-self: flex-start; }
.fm-body { display: flex; gap: 14px; align-items: flex-start; }
.portrait { padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.portrait canvas { width: 144px; height: 168px; display: block; box-shadow: 0 0 0 2px #000; }
.nametag { background: var(--plate); color: #000; padding: 0 8px; min-width: 120px; text-align: center; box-shadow: inset 1px 1px 0 var(--plate-hi), inset -1px -1px 0 var(--plate-lo), 0 0 0 1px #000; }
.plaques { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; flex: 1; }
.plaque { display: flex; align-items: center; background: linear-gradient(#ecc66a, #c79a3a); box-shadow: inset 2px 2px 0 #fbe6a8, inset -2px -2px 0 #7a5a1a, 0 0 0 1px #000; height: 28px; }
.plaque button { background: none; border: 0; width: 26px; height: 28px; cursor: pointer; color: #5a3a08; padding: 0; }
.plaque button:hover { color: #000; background: rgba(255,255,255,.2); }
.plaque span { flex: 1; text-align: center; color: #3a2408; white-space: nowrap; overflow: hidden; }
.plaque i { font-style: normal; color: #7a5a1a; margin-right: 4px; }
.fm-note { color: #4a2a5a; }
.postscreen { position: absolute; inset: 0; background: var(--royal); color: #fff; padding: 10px; display: flex; gap: 10px; }
.envelopes { flex: 1; position: relative; overflow-y: auto; padding: 4px 4px 4px 4px; }
.env { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; width: calc(100% - 12px); text-align: left; background: #e9e2c8; color: #000; border: 0; padding: 3px 8px; cursor: pointer; margin-bottom: -6px; position: relative;
  box-shadow: inset 2px 2px 0 #fff8e0, inset -2px -2px 0 #9a8a60, 0 0 0 1px #000, 3px 3px 0 rgba(0,0,0,.35); }
.env:nth-child(odd) { margin-left: 8px; }
.env span { grid-column: 1 / -1; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.env i { font-style: normal; color: #555; }
.env.unread { background: #f4ec90; }
.env.unread b::before { content: '\2709 '; color: #c00; }
.env:hover { z-index: 2; background: #fff6d0; }
.env.sel { z-index: 3; background: #fff; }
.postside { width: 132px; display: flex; flex-direction: column; gap: 6px; }
.letter { position: absolute; z-index: 10; inset: 10px; background: #fdfbf0; color: #000; padding: 10px 14px; overflow-y: auto; box-shadow: 0 0 0 2px #000, 4px 4px 0 rgba(0,0,0,.4); display: flex; flex-direction: column; }
.lhead { border-bottom: 2px dashed #bbb; padding-bottom: 6px; margin-bottom: 6px; }
.lbody { white-space: pre-wrap; overflow-wrap: anywhere; flex: 1; }
.compose textarea { margin-top: 4px; }
.hallscreen { position: absolute; inset: 0; background: #e8ddc8; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.hallscreen .desk { color: #fff; padding: 8px; }
.directory { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; align-content: start; }
.member { display: grid; grid-template-columns: 24px 1fr auto; grid-template-rows: auto auto; gap: 0 6px; align-items: center; background: var(--plate); color: var(--maroon); border: 0; padding: 2px 4px; text-align: left; cursor: pointer;
  box-shadow: inset 2px 2px 0 var(--plate-hi), inset -2px -2px 0 var(--plate-lo), 0 0 0 1px #000; }
.member img { grid-row: span 2; width: 24px; height: 28px; }
.member b { font-weight: normal; }
.member span { color: #6a4a2a; grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member i { font-style: normal; color: #8a6a3a; grid-row: 1; grid-column: 3; }
.face.mini { width: 24px; height: 28px; }
.wholist { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.whorow { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 2px; border-bottom: 1px solid #0e5a5a; }
.whorow span { display: block; color: #cfeeee; }
.whorow .you { color: #ffe36a; }
.whobtns { display: flex; gap: 4px; }
.profile { display: flex; gap: 12px; }
.pf-left { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.face.big { width: 96px; height: 112px; box-shadow: 0 0 0 2px #000; }
.pf-right { flex: 1; min-width: 0; }
.pf-right h3 { color: #ffe36a; font-size: 16px; }
.profile textarea, .profile input { flex: 1; }
table.stats { margin-top: 6px; border-collapse: collapse; width: 100%; }
table.stats th { text-align: left; font-weight: normal; color: #ffe36a; border-bottom: 1px solid #0e5a5a; }
.help code { background: #0e5a5a; padding: 0 2px; }
.credits { text-align: center; }
.credits b { color: #ffe36a; font-weight: normal; }