/* DOS mood: black, VGA 16 colours, a bitmap-ish font, blue dialog boxes with double borders */
:root { --w: min(1280px, 100%); --blue: #0000aa; --cyan: #55ffff; --yellow: #ffff55; --white: #ffffff; --grey: #aaaaaa; --red: #ff5555; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: var(--white); font-family: 'VT323', ui-monospace, monospace; font-size: 20px; }
#wrap { display: flex; flex-direction: column; align-items: center; min-height: 100%; padding: 10px 12px; gap: 6px; }
#hud { width: 100%; max-width: 1280px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; line-height: 1.05; }
.pl { display: flex; flex-direction: column; gap: 2px; }
.pl.right { align-items: flex-end; text-align: right; }
.pl .name { font-size: 24px; }
.bar { width: 160px; height: 10px; background: #333; border: 1px solid #777; }
.bar i { display: block; height: 100%; background: currentColor; }
.pl .meta { color: var(--grey); font-size: 18px; }
.center { text-align: center; color: var(--grey); font-size: 18px; }
.center b { color: var(--yellow); font-weight: normal; font-size: 22px; }
#stage { position: relative; width: 100%; max-width: 1280px; }
#game { display: block; width: 100%; aspect-ratio: 320 / 200; image-rendering: pixelated; image-rendering: crisp-edges; background: #000; }
#overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#controls { width: 100%; max-width: 1280px; display: flex; gap: 22px; justify-content: center; align-items: baseline; flex-wrap: wrap; font-size: 22px; min-height: 30px; }
#controls b { color: var(--yellow); font-weight: normal; }
#controls .keys { color: #777; font-size: 17px; }
.float { position: absolute; transform: translate(-50%, 0); font-size: 20px; text-shadow: 1px 1px 0 #000; animation: rise 1.4s ease-out forwards; white-space: nowrap; }
@keyframes rise { to { transform: translate(-50%, -34px); opacity: 0; } }
.bubble { position: absolute; transform: translate(-50%, -100%); background: var(--white); color: #000; padding: 1px 7px; font-size: 18px;
          width: max-content; max-width: 320px; text-align: center; line-height: 1.1; }   /* long taunts wrap onto a few lines */
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; border: 6px solid transparent; border-top-color: var(--white); border-bottom: 0; transform: translateX(-50%); }
.dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--blue); color: var(--white);
          border: 4px double var(--white); padding: 14px 26px; text-align: center; min-width: 320px; pointer-events: auto; box-shadow: 8px 8px 0 #000; }
.dialog h1 { margin: 0 0 6px; font-weight: normal; font-size: 40px; color: var(--yellow); letter-spacing: 2px; }
.dialog p { margin: 4px 0; }
.dialog .dim { color: var(--cyan); }
.blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.shop { text-align: left; min-width: 460px; }
.shop h1, .shop > p { text-align: center; }
.shop .cash b { color: var(--yellow); font-weight: normal; font-size: 26px; }
.shop table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 21px; }
.shop td { padding: 1px 10px; white-space: nowrap; }
.shop td:nth-child(2), .shop td:nth-child(3) { text-align: right; color: var(--cyan); }
.shop td:nth-child(4) { color: var(--grey); text-align: right; }
.shop tr { cursor: pointer; }
.shop tr.poor td { color: #6a6aaa; }
.shop tr.sel td { background: var(--white); color: var(--blue); }
.shop td.go { text-align: center; color: var(--yellow); padding-top: 6px; }
.shop tr.sel td.go { background: var(--yellow); color: var(--blue); }

/* the garito: the strip of faces and the toolbar */
#strip { width: 100%; max-width: 1280px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.tile { position: relative; width: 176px; aspect-ratio: 4 / 3; background: #111; border: 3px solid var(--seat, #555); }
.tile.turn { box-shadow: 0 0 0 3px #000, 0 0 16px 4px var(--seat); }
.tile video { width: 100%; height: 100%; object-fit: cover; display: block; background: #111; }
.tile.me video { transform: scaleX(-1); }
.tile .nocam { position: absolute; inset: 0; display: grid; place-items: center; color: #777; font-size: 34px; pointer-events: none; }
.tile .who { position: absolute; left: 0; bottom: 0; padding: 0 6px; background: rgba(0,0,0,.7); font-size: 18px; }
.tile .badge { position: absolute; right: 0; top: 0; padding: 0 5px; background: var(--seat); color: #000; font-size: 18px; }
.tile .badge:empty { display: none; }
#toolbar { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; color: var(--grey); font-size: 18px; }
#toolbar button { font: inherit; background: var(--blue); color: var(--white); border: 2px solid var(--white); padding: 0 10px; cursor: pointer; }
#toolbar button:hover { background: #0000dd; }
.dialog input { font: inherit; font-size: 22px; background: #000; color: var(--yellow); border: 2px solid var(--white); padding: 0 6px; width: 12em; }
.shop .status { color: var(--grey); font-size: 18px; min-height: 1em; }

/* the garito: the game takes the whole window; HUD and aiming line float over it; faces in a slim strip below */
:is(body.garito, body.solo) #wrap { height: 100vh; padding: 6px 8px; gap: 6px; }
:is(body.garito, body.solo) #stagebox { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; }
:is(body.garito, body.solo) #stage { position: relative; max-width: none; width: auto; }
:is(body.garito, body.solo) #game { width: 100%; height: 100%; aspect-ratio: auto; }
:is(body.garito, body.solo) #hud { position: absolute; top: 0; left: 0; right: 0; max-width: none; padding: 6px 12px 22px; z-index: 2;
                   pointer-events: none; background: linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,0)); }
:is(body.garito, body.solo) #controls { position: absolute; left: 0; right: 0; bottom: 0; max-width: none; padding: 18px 12px 6px; z-index: 2;
                        pointer-events: none; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.72)); min-height: 0; }
:is(body.garito, body.solo) #overlay { z-index: 3; }
body.garito #bottom { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; flex: none; }
body.garito #strip { width: auto; max-width: none; margin: 0; gap: 6px; flex-wrap: nowrap; }
body.garito .tile { width: 198px; border-width: 2px; }     /* faces 1.5x (was 132px); the game shrinks to fit */
body.garito .tile .who, body.garito .tile .badge { font-size: 18px; }
body.garito #toolbar { flex-direction: column; align-items: stretch; gap: 4px; }

/* up to six players: panels on both sides of the round/wind block */
#hud .side { display: flex; gap: 14px; }
#hud .side.right { justify-content: flex-end; }
#hud.many .pl .name { font-size: 20px; }
#hud.many .bar { width: 96px; }
#hud.many .pl .meta { font-size: 16px; }
#hud .pl.dead { opacity: 0.35; }

/* the weather picker in the lobby */
.dialog button.wx { font: inherit; font-size: 20px; background: #000; color: var(--grey); border: 2px solid var(--grey); padding: 0 10px; cursor: pointer; }
.dialog button.wx.on { background: var(--yellow); color: var(--blue); border-color: var(--yellow); }

#toolbar #hear { background: var(--yellow); color: var(--blue); border-color: var(--yellow); }