/* tesoro together: the lobby, the four corners and their huds. the rest comes from game.css. */
#views { position: fixed; inset: 0; pointer-events: none; }
.seat-view { position: absolute; overflow: hidden; box-shadow: inset 0 0 0 2px #0008, inset 0 0 0 5px var(--c); }
.seat-view .crosshair { zoom: var(--s); }
.seat-view .mine-ring { zoom: var(--s); }
.seat-view .hotbar { zoom: var(--s); bottom: 10px; box-shadow: 0 0 0 3px var(--c); }
.seat-tag { position: absolute; left: 12px; top: 10px; zoom: var(--s); background: var(--c); color: #fff; font-weight: 900; font-size: 20px; padding: 4px 14px; border-radius: 999px; text-shadow: 0 1px 2px #0006; box-shadow: 0 2px 6px #0005; }
.seat-tag .fly { font-style: normal; margin-left: 6px; }
.palette { position: absolute; inset: 8% 6% 18%; zoom: var(--s); background: #102230ee; border-radius: 18px; box-shadow: 0 0 0 4px var(--c), 0 8px 24px #0008; padding: 12px; display: flex; flex-direction: column; }
.pal-grid { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(8, 50px); gap: 4px; justify-content: center; align-content: start; scrollbar-width: none; }
.pal-grid .slot.sel { border-color: var(--c); background: #ffffff40; box-shadow: 0 0 0 3px #fff; }
.palette p { margin: 8px 0 0; text-align: center; color: #fff; font-size: 17px; font-weight: 700; }
.unplugged { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: #0009; color: #fff; font-size: calc(26px * var(--s)); font-weight: 900; }
.unplugged b { font-size: calc(70px * var(--s)); display: block; }
.unplugged small { font-size: .7em; font-weight: 700; opacity: .85; }
#map-label { position: absolute; margin: 10px; background: #0007; color: #fff; padding: 4px 12px; border-radius: 999px; font-weight: 900; font-size: 16px; }

#lobby { position: fixed; inset: 0; display: grid; place-items: center; background: linear-gradient(#0000 30%, #0007); padding: 20px; overflow: auto; }
.lobby-card { text-align: center; width: min(900px, 100%); }
.lobby-hint { color: #fff; font-size: clamp(18px, 2.6vw, 28px); font-weight: 900; text-shadow: 0 2px 6px #0008; margin: 18px 0; }
.seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.seat { background: #0006; border-radius: 22px; padding: 16px 8px; color: #fff; border: 4px dashed #ffffff66; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .15s; }
.seat b { font-size: clamp(40px, 6vw, 70px); filter: grayscale(1) opacity(.5); }
.seat span { font-size: clamp(18px, 2.4vw, 28px); font-weight: 900; }
.seat small { font-size: 14px; opacity: .85; min-height: 1.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.seat.in { background: var(--c); border: 4px solid #fff; transform: translateY(-4px); box-shadow: 0 8px 18px #0006; animation: pop .25s; }
.seat.in b { filter: none; }
.lobby-btns { margin-top: 22px; display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.lobby-small { color: #fff; opacity: .8; font-size: 14px; cursor: pointer; text-decoration: underline; margin-top: 14px; }
@media (max-width: 600px) { .seats { grid-template-columns: repeat(2, 1fr); } }

/* short screens (a handheld or a tv in a browser): keep the whole lobby in view */
#lobby .logo .l1 { font-size: clamp(34px, min(15vw, 12vh), 104px); }
#lobby .logo .l2 { font-size: clamp(26px, min(11vw, 9vh), 76px); }
#lobby .lobby-hint { margin: min(18px, 2.5vh) 0; font-size: clamp(16px, min(2.6vw, 4.5vh), 28px); }
#lobby .seat { padding: min(16px, 2vh) 8px; }
#lobby .seat b { font-size: clamp(30px, min(6vw, 10vh), 70px); }
#lobby .lobby-btns { margin-top: min(22px, 3vh); }
#lobby .lobby-small { margin: min(14px, 2vh) 0 0; }

/* everything a player opens stays inside their own corner */
.seat-hint { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); zoom: var(--s); background: #ffc23d; color: #3a2400; font-weight: 900; font-size: 20px; padding: 6px 16px; border-radius: 999px; box-shadow: 0 3px 10px #0006; animation: pop .2s; white-space: nowrap; }
.help { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: #000a; color: #fff; padding: 10px; }
.help > * { zoom: var(--s); }
.help h3 { margin: 0 0 6px; font-size: 30px; color: var(--c); }
.help p { margin: 4px 0; font-size: 20px; font-weight: 700; }
.help b { background: #fff2; border-radius: 6px; padding: 0 6px; }
.help small { display: block; margin-top: 10px; opacity: .75; font-size: 16px; }

.wardrobe { position: absolute; left: 10px; top: 50px; zoom: calc(var(--s) * .85); width: 290px; background: #102230e6; color: #fff; border-radius: 18px; padding: 10px; box-shadow: 0 0 0 4px var(--c), 0 8px 24px #0008; }
.wrow { padding: 4px 8px; border-radius: 12px; opacity: .6; display: flex; align-items: center; gap: 6px; }
.wrow.on { background: #ffffff22; opacity: 1; box-shadow: inset 0 0 0 2px var(--c); }
.wrow small { width: 42px; flex: none; font-size: 13px; opacity: .8; }
.wrow .wpick { flex: 1; }
.seat-view:has(.wardrobe:not([hidden]), .help:not([hidden]), .chestcard:not([hidden])) .hotbar { display: none; }
.wpick { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.wpick b { flex: 1; font-size: 17px; line-height: 1.15; }
.wpick .em { font-size: 28px; }
.swatch { width: 28px; height: 28px; border-radius: 8px; border: 2px solid #fff; flex: none; }
.whint { margin: 8px 0 0; font-size: 14px; text-align: center; opacity: .8; }

.chestcard { position: absolute; inset: 4%; zoom: var(--s); background: var(--cream); color: var(--ink); border-radius: 22px; padding: 12px 16px; box-shadow: 0 0 0 5px #ffc23d, 0 10px 30px #0009; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; animation: pop .25s; }
.qhead { font-size: 16px; font-weight: 900; color: #a06a00; }
.qpic { font-size: 74px; line-height: 1.1; }
.qemoji { font-size: 40px; }
.qtext { font-size: 24px; font-weight: 900; line-height: 1.25; margin: 4px 0 10px; max-width: 640px; }
.choices { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.choice { position: relative; min-width: 104px; padding: 10px 14px 30px; border-radius: 16px; background: #fff; box-shadow: inset 0 -4px 0 #0002, 0 0 0 2px #0002; display: flex; flex-direction: column; align-items: center; }
.choice b { font-size: 28px; }
.choice .cemo { font-size: 30px; }
.choice.mine { box-shadow: inset 0 -4px 0 #0002, 0 0 0 4px var(--c); }
.choice.crossed { opacity: .3; text-decoration: line-through; }
.toks { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }
.tok { font-style: normal; font-size: 18px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 2px var(--c); opacity: .7; }
.tok.locked { opacity: 1; background: var(--c); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c); }
.cmsg { margin: 10px 0 0; font-size: 18px; font-weight: 900; }
.chint { margin: 4px 0 0; font-size: 14px; opacity: .65; }
.treasure { font-size: 40px; font-weight: 900; color: #a06a00; }
.got { display: flex; gap: 18px; justify-content: center; margin: 8px 0; }
.got span { display: flex; flex-direction: column; align-items: center; font-size: 20px; font-weight: 900; }
.got b { font-size: 64px; }