/* The Pit — lobby shell: stone & iron frame around the game, chat, avatar strip, loading screen.
 * Layout flags on <body> (set by js/pit-shell.js):
 *   .fs         fullscreen layout: no frame, game + docked chat
 *   .narrow     window < 1100px: chat is a drawer over the game
 *   .chat-open  chat visible (only meaningful with .fs or .narrow; the windowed wide layout always shows it)
 *   .in-game    after ENTER THE PIT
 */
:root {
	--bronze: #c98a3a; --bronze-hi: #f2c46b; --bronze-lo: #5c3614; --blood: #8e1b12; --ink: #100a08; --sand: #f1dfbf;
	--stone: #2a2422; --gold-text: #f6dca6;
	--u: 1px;                 /* pixel-art unit: 1px small screens, 2px large */
	--top: 40px;              /* top bar height */
	--fb: 12px;               /* frame border thickness */
	--strip-min: 116px;       /* avatar strip height */
	--chat-w: 296px;
	--dock-w: 340px;
	--avs: 1;                 /* avatar sprite scale */
	--chat-font: 14px; --btn-font: 11px;
	--font-px: 'Pixelify Sans', ui-monospace, monospace;
	--font-serif: 'Cinzel', 'Times New Roman', serif;
	--font-deco: 'Cinzel Decorative', 'Cinzel', serif;
}
@media (min-width: 1400px) and (min-height: 780px) {
	:root { --top: 48px; --chat-w: 340px; --strip-min: 178px; --avs: 2; --chat-font: 15px; }
}
@media (min-width: 1800px) and (min-height: 980px) {
	:root { --u: 2px; --top: 60px; --fb: 24px; --strip-min: 200px; --chat-w: 420px; --dock-w: 420px; --avs: 2; --chat-font: 17px; --btn-font: 13px; }
}
@media (max-height: 560px) { :root { --strip-min: 0px; } }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; border: 0; height: 100%; }
body {
	color: var(--sand); background: var(--ink); overflow: hidden;
	font-family: var(--font-px); -webkit-font-smoothing: none; font-smooth: never;
}
button { font: inherit; color: inherit; }
#canvas { display: block; margin: 0; padding: 0; border: 0; touch-action: none; outline: none; background: #000; }
[hidden] { display: none !important; }
.px, .gem, .torch, .corner, .banner, .ico-swords, .av-fig, .laurel { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ============================================================ lobby grid */
#lobby {
	position: fixed; inset: 0; display: grid;
	grid-template-columns: minmax(0, 1fr) var(--chat-w);
	grid-template-rows: var(--top) minmax(0, 1fr);
	grid-template-areas: "top top" "stage chat";
	background: #171210 url("../img/ui/stone.png") 0 0 / calc(96 * 2px) auto;
	image-rendering: pixelated;
}
#lobby::after {  /* vignette over the masonry */
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background:
		radial-gradient(ellipse 60% 50% at 0% 100%, rgba(255, 140, 40, .13), transparent 70%),
		radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(4, 2, 2, .62) 100%);
}
#topbar, #stage-col, #chat { position: relative; z-index: 1; min-width: 0; min-height: 0; }

/* ============================================================ top bar */
#topbar {
	grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 0 calc(10px + 2 * var(--u));
	background:
		linear-gradient(rgba(255, 220, 160, .07), rgba(0, 0, 0, .38)),
		url("../img/ui/stone_dark.png") 0 0 / calc(96 * 2px) auto;
	border-bottom: var(--u) solid #000;
	box-shadow: inset 0 calc(-1 * var(--u)) 0 #5c3614, inset 0 calc(-2 * var(--u)) 0 #000, inset 0 var(--u) 0 rgba(255, 255, 255, .06), 0 4px 14px rgba(0, 0, 0, .6);
	z-index: 3;
}
.tb-left, .tb-right { display: flex; align-items: center; gap: calc(6px + 2 * var(--u)); flex: 1 1 0; min-width: 0; }
.tb-right { justify-content: flex-end; }
.ico-swords { width: calc(16 * var(--u) * 1.5); height: calc(16 * var(--u) * 1.5); background: url("../img/ui/swords.png") center / contain no-repeat; flex: none; }
.tb-logo {
	font-family: var(--font-deco); font-weight: 900; font-size: calc(var(--top) * .44); letter-spacing: .08em; white-space: nowrap;
	background: linear-gradient(#fff3c9 10%, #f2c46b 45%, #a8661f 80%); -webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 10px rgba(255, 150, 50, .25));
}
.tb-tag { font-family: var(--font-serif); font-weight: 600; font-size: calc(var(--top) * .24); letter-spacing: .26em; text-transform: uppercase; color: #a08a66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: .3em; }
.tb-center { display: flex; align-items: center; gap: calc(8px + 2 * var(--u)); flex: none; height: 100%; position: relative; }
.banner { width: calc(20 * var(--u)); height: calc(var(--top) - 2 * var(--u)); align-self: flex-start; background: url("../img/ui/banner.png") top center / calc(20 * var(--u)) auto no-repeat; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .6)); }
.plate { display: flex; flex-direction: column; justify-content: center; min-width: calc(var(--top) * 3.6); line-height: 1; }
.plate-room { align-items: flex-end; text-align: right; }
.plate-count { align-items: flex-start; }
.plate small { font-family: var(--font-serif); font-weight: 600; font-size: calc(var(--top) * .2); letter-spacing: .3em; color: #8d7858; margin-bottom: calc(var(--top) * .06); }
.plate b { font-family: var(--font-serif); font-weight: 800; font-size: calc(var(--top) * .42); letter-spacing: .06em; color: var(--gold-text); text-shadow: 0 2px 0 #000, 0 0 12px rgba(255, 170, 60, .28); white-space: nowrap; max-width: 36vw; overflow: hidden; text-overflow: ellipsis; }
.plate-count b { font-family: var(--font-px); font-weight: 600; font-size: calc(var(--top) * .4); letter-spacing: 0; display: flex; align-items: baseline; gap: .3em; }
.plate-count em { font-style: normal; font-size: .72em; color: #a08a66; font-weight: 400; }
.plate-count .dot { width: .34em; height: .34em; background: var(--bronze); transform: rotate(45deg) translateY(-.2em); margin: 0 .25em; }
.keystone { position: relative; width: calc(32 * var(--u)); height: 100%; flex: none; }
.keystone::before { /* iron bracket that the gem hangs from */
	content: ""; position: absolute; left: 50%; top: 0; width: calc(6 * var(--u)); height: 55%; transform: translateX(-50%);
	background: linear-gradient(90deg, #6e6c76, #3e3c42 60%, #1e1d21); border: var(--u) solid #000; border-top: 0;
}
.keystone .gem { position: absolute; left: 0; bottom: calc(-10 * var(--u)); }

.gem {
	display: inline-block; width: calc(32 * var(--u)); height: calc(32 * var(--u)); flex: none;
	background: url("../img/ui/gem.png") center / contain no-repeat;
	filter: drop-shadow(0 0 calc(3 * var(--u)) rgba(255, 60, 40, .55)) drop-shadow(0 2px 0 #000);
	animation: gem-idle 3.2s ease-in-out infinite;
}
.gem.sm { width: calc(16px + 8 * var(--u)); height: calc(16px + 8 * var(--u)); }
.gem.pulse { animation: gem-pulse .7s ease-out 1; }
body.chat-offline .gem { background-image: url("../img/ui/gem_blue.png"); filter: grayscale(.85) brightness(.7) drop-shadow(0 2px 0 #000); animation: none; }
@keyframes gem-idle { 50% { filter: drop-shadow(0 0 calc(6 * var(--u)) rgba(255, 70, 40, .85)) drop-shadow(0 2px 0 #000) brightness(1.12); } }
@keyframes gem-pulse {
	0% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255, 200, 120, 1)) brightness(2.2); }
	30% { transform: scale(1.28); filter: drop-shadow(0 0 16px rgba(255, 120, 50, 1)) brightness(1.7); }
	100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(255, 60, 40, .55)) brightness(1); }
}

/* ============================================================ buttons */
.pbtn {
	position: relative; cursor: pointer; white-space: nowrap; user-select: none; -webkit-user-select: none;
	font-family: var(--font-serif); font-weight: 800; font-size: var(--btn-font); letter-spacing: .14em; line-height: 1;
	color: var(--gold-text); text-shadow: 0 1px 0 #000, 0 -1px 0 rgba(0, 0, 0, .5);
	padding: 7px 12px 6px; min-height: 26px;
	border: 6px solid transparent; border-image: url("../img/ui/btn.png") 6 fill / 6px stretch; background: none;
	image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .7));
	transition: color .12s;
}
.pbtn:hover { border-image-source: url("../img/ui/btn_hover.png"); color: #fff7dc; }
.pbtn:active, .pbtn.down { border-image-source: url("../img/ui/btn_down.png"); transform: translateY(1px); filter: none; }
.pbtn:focus-visible { outline: 2px solid var(--bronze-hi); outline-offset: 1px; }
.pbtn.iron { border-image-source: url("../img/ui/btn_iron.png"); color: #dcd6cc; }
.pbtn.iron:hover { filter: brightness(1.25) drop-shadow(0 2px 0 rgba(0, 0, 0, .7)); color: #fff; }
.pbtn.mini { padding: 4px 6px 3px; min-height: calc(12px + var(--btn-font)); font-size: calc(var(--btn-font) - 1px); letter-spacing: .08em; }
.pbtn[disabled] { opacity: .5; cursor: default; }
#topbar .pbtn { font-size: calc(9px + var(--top) * .06); padding: calc(var(--top) * .14) calc(var(--top) * .3) calc(var(--top) * .11); }

/* ============================================================ stage (game) column */
#stage-col { grid-area: stage; display: flex; flex-direction: column; align-items: center; }
#stage-frame {
	position: relative; flex: none; width: min(100%, calc((100vh - var(--top) - var(--strip-min)) * 16 / 9 - var(--fb) * 14 / 9));
	border: var(--fb) solid transparent; border-image: url("../img/ui/frame.png") 12 / var(--fb) stretch; image-rendering: pixelated;
	background: #000; background-clip: padding-box;
	box-shadow: 0 8px 14px rgba(0, 0, 0, .55);
}
#stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
#stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .9); }
#canvas { position: absolute; left: 0; top: 0; }
.corner { position: absolute; width: calc(24 * var(--u)); height: calc(24 * var(--u)); background: url("../img/ui/corner.png") 0 0 / contain no-repeat; pointer-events: none; z-index: 2; }
#stage-frame .corner { display: none; }
.corner.tl { left: calc(-1 * var(--fb) + 2 * var(--u)); top: calc(-1 * var(--fb) + 2 * var(--u)); }
.corner.tr { right: calc(-1 * var(--fb) + 2 * var(--u)); top: calc(-1 * var(--fb) + 2 * var(--u)); transform: scaleX(-1); }
.corner.bl { left: calc(-1 * var(--fb) + 2 * var(--u)); bottom: calc(-1 * var(--fb) + 2 * var(--u)); transform: scaleY(-1); }
.corner.br { right: calc(-1 * var(--fb) + 2 * var(--u)); bottom: calc(-1 * var(--fb) + 2 * var(--u)); transform: scale(-1, -1); }

/* fullscreen corner button + hint (live inside the stage so they never cover the chat) */
#fs-btn {
	position: absolute; right: 10px; bottom: 10px; z-index: 5; width: 38px; height: 38px; padding: 0; cursor: pointer;
	background: rgba(20, 12, 8, .85); border: 2px solid var(--bronze); border-radius: 4px; opacity: 0; transition: opacity .25s; pointer-events: none;
	display: none; align-items: center; justify-content: center;
}
body.in-game #fs-btn { display: flex; }
#fs-btn.peek { opacity: .9; pointer-events: auto; }
#fs-btn:hover { opacity: 1; }
#fs-btn svg { width: 22px; height: 22px; fill: none; stroke: var(--bronze-hi); stroke-width: 2.4; stroke-linecap: square; }
#fs-hint { position: absolute; right: 56px; bottom: 16px; z-index: 5; font: 13px var(--font-px); color: var(--sand); background: rgba(20, 12, 8, .88); border: 1px solid var(--bronze); padding: 5px 10px; border-radius: 3px; opacity: 0; transition: opacity .4s; pointer-events: none; white-space: nowrap; }
#fs-hint.on { opacity: 1; }

/* ============================================================ avatar strip */
#strip {
	position: relative; flex: 1 1 auto; align-self: stretch; min-height: var(--strip-min); overflow: hidden;
	background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .15) 40%, rgba(0, 0, 0, .5)), url("../img/ui/stone_dark.png") 0 0 / calc(96 * 2px) auto;
	box-shadow: inset 0 8px 14px rgba(0, 0, 0, .75);
	--name-h: calc(34px * (1 + (var(--avs) - 1) * .4));
}
.strip-floor {
	position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--name-h) + 9 * 2px);
	background: url("../img/ui/floor.png") 0 0 / auto 40px repeat-x, linear-gradient(#141110, #0c0a09);
}
.strip-colonnade {
	position: absolute; left: 0; right: 0; bottom: calc(var(--name-h) + 18px); height: calc(64px * var(--avs));
	background: url("../img/ui/colonnade.png") center bottom / calc(128px * var(--avs)) 100% repeat-x; image-rendering: pixelated; opacity: .95;
}
.strip-glow { position: absolute; bottom: 0; width: 46%; height: 190%; pointer-events: none; mix-blend-mode: screen; animation: flicker 2.6s steps(6) infinite; }
.strip-glow.l { left: -6%; background: radial-gradient(ellipse at 14% 62%, rgba(255, 150, 50, .42), rgba(255, 110, 30, .12) 40%, transparent 68%); }
.strip-glow.r { right: -6%; background: radial-gradient(ellipse at 86% 62%, rgba(255, 150, 50, .42), rgba(255, 110, 30, .12) 40%, transparent 68%); animation-delay: -1.1s; }
@keyframes flicker { 0% { opacity: .9 } 20% { opacity: 1 } 40% { opacity: .82 } 60% { opacity: .96 } 80% { opacity: .86 } 100% { opacity: .92 } }
.torch {
	position: absolute; bottom: calc(var(--name-h) + 2px); width: calc(32px * var(--avs)); height: calc(80px * var(--avs));
	background: url("../img/ui/torch.png") 0 0 / calc(128px * var(--avs)) 100% no-repeat; animation: torch .52s steps(4) infinite; z-index: 1;
	filter: drop-shadow(0 0 14px rgba(255, 140, 40, .8));
}
.torch.l { left: calc(10px + 4 * var(--u)); }
.torch.r { right: calc(10px + 4 * var(--u)); animation-delay: -.2s; }
@keyframes torch { to { background-position-x: calc(-128px * var(--avs)); } }
@supports not (background-position-x: 0) { .torch { animation: none; } }

#strip-scroll { position: absolute; left: calc(52px * var(--avs) + 8px); right: calc(52px * var(--avs) + 8px); top: 0; bottom: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; z-index: 2; }
#strip-scroll::-webkit-scrollbar { display: none; }
#avatars { display: flex; align-items: flex-end; justify-content: center; min-width: 100%; width: max-content; height: 100%; padding: 0 6px; }
#avatars.overflow { justify-content: flex-start; }
#strip-empty { position: absolute; left: 0; right: 0; bottom: calc(var(--name-h) + 26px); text-align: center; font-size: 14px; color: #7d6a50; letter-spacing: .06em; z-index: 1; }
#strip.has-avatars #strip-empty { display: none; }

.av {
	position: relative; flex: none; width: calc(76px * (1 + (var(--avs) - 1) * .6)); margin-left: var(--av-overlap, 0px);
	display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 0; border: 0; background: none; color: inherit;
	animation: av-in .45s ease-out both;
}
.av:first-child { margin-left: 0; }
@keyframes av-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.av.leaving { animation: av-out .35s ease-in both; }
@keyframes av-out { to { opacity: 0; transform: translateY(6px) scale(.9); } }
.av-fig {
	width: calc(48px * var(--avs)); height: calc(64px * var(--avs)); background-repeat: no-repeat; background-position: 0 0;
	background-size: calc(192px * var(--avs)) calc(64px * var(--avs));
	animation: av-stand 1s steps(4) infinite; animation-delay: var(--av-delay, 0s);
	filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55));
	margin-bottom: -2px;
}
@keyframes av-stand { to { background-position-x: calc(-192px * var(--avs)); } }
.av:hover .av-fig { filter: drop-shadow(0 0 6px rgba(255, 200, 110, .9)) brightness(1.15); }
.av.self .av-fig { filter: drop-shadow(0 0 5px rgba(255, 190, 90, .75)); }
.av.squelched .av-fig { filter: grayscale(1) brightness(.5); }
.av-label { height: var(--name-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; max-width: 100%; line-height: 1; }
.av-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12px + (var(--avs) - 1) * 3px); font-weight: 500; color: #e8d5b0; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.av.self .av-name { color: #ffd98a; }
.av-flair { display: flex; align-items: center; gap: 3px; font-size: calc(10px + (var(--avs) - 1) * 3px); color: #a9966f; white-space: nowrap; max-width: 100%; overflow: hidden; }
.laurel { width: calc(12px * (1 + (var(--avs) - 1) * .5)); height: calc(10px * (1 + (var(--avs) - 1) * .5)); background: url("../img/ui/laurel.png") center / contain no-repeat; flex: none; }
.av-rank { color: #c7a25c; overflow: hidden; text-overflow: ellipsis; }
#avatars.dense .av-label { visibility: hidden; }
#avatars.dense .av:hover .av-label, #avatars.dense .av.self .av-label { visibility: visible; overflow: visible; z-index: 3; }
#avatars.dense .av:hover { z-index: 4; }
#avatars.dense .av:hover .av-name, #avatars.dense .av.self .av-name { overflow: visible; }

/* tier colours (names in the strip and in the chat log) */
.t-0, .t-1, .t-2, .t-3 { color: #e8d5b0; }
.t-4, .t-5, .t-6 { color: #f2c46b; }
.t-7, .t-8 { color: #ffa560; }
.t-9, .t-10 { color: #e6a0ff; }
.t-11 { color: #9fe0ff; }
.t-12 { color: #ff7a4a; text-shadow: 0 0 6px rgba(255, 90, 30, .7); }

.av-bubble {
	position: fixed; transform: translateX(-50%); z-index: 9; pointer-events: none;
	max-width: calc(96px + 40px * var(--avs)); min-width: 24px; padding: 3px 7px 4px; font-size: calc(10px + 2px * var(--avs)); line-height: 1.15; color: #1c120b; text-align: center;
	background: #f4e6c8; border: 2px solid #000; box-shadow: inset 0 0 0 1px #c9a56a, 0 3px 0 rgba(0, 0, 0, .5);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
	animation: bubble 4.2s ease both;
}
@keyframes bubble { 0% { opacity: 0; transform: translate(-50%, 6px); } 6% { opacity: 1; transform: translate(-50%, 0); } 88% { opacity: 1; } 100% { opacity: 0; } }

/* avatar popover */
#av-pop {
	position: fixed; z-index: 40; width: 276px; padding: 8px 8px 8px;
	border: 12px solid transparent; border-image: url("../img/ui/frame.png") 12 fill / 12px stretch; image-rendering: pixelated;
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .8)); font-size: 13px;
	background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .55)), url("../img/ui/stone_dark.png") 0 0 / 192px auto; background-clip: padding-box;
}
#av-pop .pop-top { display: flex; gap: 10px; align-items: center; }
#av-pop img { width: 64px; height: 64px; image-rendering: pixelated; border: 2px solid #000; box-shadow: 0 0 0 1px var(--bronze-lo); background: #1a1310; flex: none; }
#av-pop .pop-name { font-family: var(--font-serif); font-weight: 800; font-size: 15px; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; }
#av-pop .pop-rank { color: #c7a25c; margin-top: 3px; }
#av-pop .pop-line { color: #a9966f; margin-top: 3px; display: flex; align-items: center; gap: 4px; }
#av-pop .pop-btns { display: flex; gap: 6px; margin-top: 10px; }
#av-pop .pop-btns .pbtn { flex: 1; font-size: 10.5px; padding-left: 4px; padding-right: 4px; }
#av-pop .pop-top > div { min-width: 0; }

/* ============================================================ chat panel */
#chat {
	grid-area: chat; display: flex; flex-direction: column; min-height: 0;
	margin: calc(2 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u)) 0;
	border: var(--fb) solid transparent; border-image: url("../img/ui/frame.png") 12 / var(--fb) stretch; image-rendering: pixelated;
	background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .55)), url("../img/ui/stone_dark.png") 0 0 / calc(96 * 2px) auto; background-clip: padding-box;
	box-shadow: 0 8px 14px rgba(0, 0, 0, .55);
}
.chat-head { display: flex; align-items: center; gap: 8px; padding: 7px 8px 5px; flex: none; }
.chat-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.05; }
.chat-title b { font-family: var(--font-serif); font-weight: 800; font-size: calc(var(--chat-font) + 2px); letter-spacing: .06em; color: var(--gold-text); text-shadow: 0 2px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-title small { font-size: calc(var(--chat-font) - 3px); letter-spacing: .04em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-online { color: #9bd17a; } .st-connecting { color: #d9a94e; } .st-offline { color: #ff8f7a; }
.chat-title small::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; background: currentColor; box-shadow: 0 0 6px currentColor; vertical-align: 1px; }
#chat-collapse, #chat-channel { display: none; flex: none; }
.filigree { height: 9px; flex: none; margin: 0 8px 4px; background: url("../img/ui/filigree.png") center / auto 9px repeat-x; image-rendering: pixelated; opacity: .9; }
.chat-log-wrap { position: relative; flex: 1 1 auto; min-height: 0; margin: 0 6px; display: flex; }
#chat-log {
	flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 5px 7px 6px; overflow-wrap: anywhere; word-break: break-word;
	border: 6px solid transparent; border-image: url("../img/ui/panel.png") 6 fill / 6px stretch; image-rendering: pixelated;
	font-size: var(--chat-font); line-height: 1.36; color: #eadcc0; scrollbar-width: thin; scrollbar-color: #6d4a22 #120d0b;
	-webkit-user-select: text; user-select: text;
}
#chat-log::-webkit-scrollbar { width: 10px; }
#chat-log::-webkit-scrollbar-track { background: #120d0b; border-left: 1px solid #000; }
#chat-log::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #8a5c28, #5c3614); border: 1px solid #000; }
.ln { padding: 1px 0; animation: ln-in .22s ease-out; }
@keyframes ln-in { from { opacity: 0; transform: translateX(6px); } }
.ln .ts { color: #6f5f49; font-size: .78em; margin-right: 5px; }
.ln .nm { font-weight: 600; cursor: pointer; }
.ln .nm:hover { text-decoration: underline; }
.ln.self .nm { color: #ffd98a; }
.ln.sys { color: #d9a94e; }
.ln.sys::before { content: "◆ "; color: #8e6a2e; font-size: 10px; vertical-align: 1px; }
.ln.info { color: #b9a682; }
.ln.err { color: #ff8f7a; }
.ln.err::before { content: "✖ "; font-size: 10px; }
.ln.me { color: #cdb78c; font-style: italic; }
.ln.wh { color: #d7a6ff; }
.ln.wh .nm { color: #ebccff; }
.ln.join { color: #8fae6e; font-size: .92em; } .ln.leave { color: #8a7a62; font-size: .92em; }
.ln.motd { color: #f2c46b; font-family: var(--font-serif); font-weight: 600; letter-spacing: .04em; text-align: center; padding: 4px 0 6px; font-size: .95em; }
#chat-jump {
	position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: none; cursor: pointer; z-index: 2;
	font: 12px var(--font-px); color: #1c120b; background: var(--bronze-hi); border: 2px solid #000; padding: 3px 10px; box-shadow: 0 3px 0 rgba(0, 0, 0, .6);
}
#chat-jump.on { display: block; }
#chat-form { position: relative; flex: none; margin: 6px 6px 0; }
#chat-input, #dlg-input {
	width: 100%; font: 500 var(--chat-font) var(--font-px); color: #fff3d6; caret-color: var(--bronze-hi);
	padding: 6px 40px 6px 8px; outline: none; border-radius: 0;
	border: 6px solid transparent; border-image: url("../img/ui/panel_input.png") 6 fill / 6px stretch; image-rendering: pixelated; background: none;
}
#chat-input::placeholder, #dlg-input::placeholder { color: #6f5f49; }
#chat-input:focus, #dlg-input:focus { filter: drop-shadow(0 0 5px rgba(242, 196, 107, .55)); }
#chat-len { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; color: #6f5f49; pointer-events: none; }
#chat-len.warn { color: #ff8f7a; }
.chat-btns { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px 6px 6px; }
.chat-btns .pbtn { padding-left: 2px; padding-right: 2px; font-size: calc(var(--btn-font) - .5px); min-height: calc(18px + var(--btn-font)); }

/* chat tab (shown when the chat is collapsed in fullscreen / drawer layouts) */
#chat-tab {
	display: none; position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 12; cursor: pointer;
	flex-direction: column; align-items: center; gap: 6px; padding: 10px 5px 10px 7px;
	border: 6px solid transparent; border-right: 0; border-image: url("../img/ui/btn_iron.png") 6 fill / 6px stretch; image-rendering: pixelated; background: none;
	filter: drop-shadow(-3px 3px 6px rgba(0, 0, 0, .7)); opacity: .82; transition: opacity .2s;
}
#chat-tab:hover { opacity: 1; }
#chat-tab span { writing-mode: vertical-rl; font-family: var(--font-serif); font-weight: 800; font-size: 11px; letter-spacing: .3em; color: var(--gold-text); text-shadow: 0 1px 0 #000; }
#chat-badge { display: none; min-width: 20px; height: 20px; padding: 0 4px; line-height: 16px; text-align: center; font: 600 12px var(--font-px); color: #fff; background: #b3261a; border: 2px solid #000; box-shadow: 0 0 10px rgba(255, 60, 40, .8); }
#chat-badge.on { display: block; animation: badge 1s ease-in-out infinite; }
@keyframes badge { 50% { transform: scale(1.14); } }

/* ============================================================ layout: narrow window -> chat drawer */
body.narrow #lobby { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "stage"; }
body.narrow #chat, body.fs.narrow #chat {
	position: fixed; right: 0; top: var(--top); bottom: 0; width: min(360px, 94vw); margin: 0; z-index: 11;
	transform: translateX(105%); transition: transform .22s ease-out; visibility: hidden;
}
body.fs.narrow #chat { top: 0; }
body.narrow.chat-open #chat { transform: none; visibility: visible; }
body.narrow #chat-collapse, body.fs #chat-collapse { display: block; }
body.narrow.in-game:not(.chat-open) #chat-tab, body.fs.in-game:not(.chat-open) #chat-tab { display: flex; }
body.narrow .tb-tag, body.narrow .banner { display: none; }
@media (max-width: 760px) {
	.plate small { display: none; } .plate { min-width: 0; } .tb-logo { display: none; }
	.plate-count em:last-of-type, .plate-count .dot, #online-count { display: none; }
	#btn-fs { display: none; }
}

/* ============================================================ layout: fullscreen -> game + docked chat */
body.fs #lobby { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); grid-template-areas: "stage chat"; background: #000; }
body.fs #lobby::after, body.fs #topbar, body.fs #strip { display: none; }
body.fs #stage-col { display: block; }
body.fs .av-bubble { display: none; }
body.fs #stage-frame { width: 100%; height: 100%; border: 0; box-shadow: none; }
body.fs #stage { width: 100%; height: 100%; aspect-ratio: auto; }
body.fs:not(.narrow) #chat { width: var(--dock-w); margin: 0; box-shadow: none; }
body.fs:not(.narrow):not(.chat-open) #chat { display: none; }
body.fs #chat-channel { display: block; }
body.fs .chat-btns { grid-template-columns: repeat(3, 1fr); }

/* ============================================================ dialogs */
.dlg-back { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(6, 3, 2, .72); backdrop-filter: blur(2px); animation: fade .18s ease-out; }
@keyframes fade { from { opacity: 0; } }
.dlg {
	position: relative; width: min(440px, 94vw); max-height: 88vh; display: flex; flex-direction: column; padding: 14px 16px 12px;
	border: 24px solid transparent; border-image: url("../img/ui/frame.png") 12 fill / 24px stretch; image-rendering: pixelated;
	filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .9)); animation: dlg-in .22s ease-out;
	background: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .6)), url("../img/ui/stone_dark.png") 0 0 / 192px auto; background-clip: padding-box;
}
.dlg > .corner { display: none; }
@keyframes dlg-in { from { transform: translateY(14px) scale(.97); opacity: 0; } }
.dlg h2 { margin: 0 0 8px; text-align: center; font-family: var(--font-deco); font-weight: 700; font-size: 20px; letter-spacing: .06em; color: var(--gold-text); text-shadow: 0 2px 0 #000, 0 0 14px rgba(255, 170, 60, .35); }
.dlg-sub { margin: 4px 0 10px; font-size: 13px; line-height: 1.35; color: #b9a682; text-align: center; }
#dlg-form { display: flex; gap: 8px; }
#dlg-input { padding-right: 8px; flex: 1; font-size: 15px; }
#dlg-error { min-height: 18px; margin: 5px 2px 2px; font-size: 13px; color: #ff8f7a; }
.dlg-list-head { display: flex; justify-content: space-between; font-family: var(--font-serif); font-weight: 600; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #8d7858; padding: 2px 10px 4px; }
#dlg-list { overflow-y: auto; min-height: 84px; max-height: 240px; border: 6px solid transparent; border-image: url("../img/ui/panel.png") 6 fill / 6px stretch; image-rendering: pixelated; scrollbar-width: thin; scrollbar-color: #6d4a22 #120d0b; }
.room-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 6px 8px; cursor: pointer; border: 0; background: none; text-align: left; font: 500 14px var(--font-px); color: #eadcc0; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.room-row:hover, .room-row:focus-visible { background: rgba(201, 138, 58, .2); color: #fff7dc; outline: none; }
.room-row.here .room-name::after { content: "  ◂ you are here"; color: #9bd17a; font-size: 11px; }
.room-row .room-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-row .room-count { flex: none; display: flex; align-items: center; gap: 8px; color: #c7a25c; }
.room-row .meter { width: 64px; height: 8px; background: #0b0807; border: 1px solid #000; box-shadow: 0 0 0 1px #3b2a1c; }
.room-row .meter i { display: block; height: 100%; background: linear-gradient(#f2c46b, #a8661f); }
.room-row.full { color: #8a7a62; } .room-row.full .meter i { background: linear-gradient(#d0463a, #7a1a12); }
.room-empty { padding: 18px 10px; text-align: center; color: #7d6a50; font-size: 13px; }
.dlg-foot { display: flex; justify-content: flex-end; margin-top: 10px; }

/* ============================================================ loading screen (unchanged look) */
#loader {
	position: fixed; inset: 0; z-index: 100; overflow: hidden;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: var(--ink); transition: opacity .7s ease, visibility .7s;
	font-family: var(--font-px);
}
#loader.gone { opacity: 0; visibility: hidden; }
#loader-bg {
	position: absolute; inset: -4%; background: url("../load_bg.jpg") center/cover no-repeat;
	image-rendering: pixelated; filter: brightness(.42) saturate(1.1);
	animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-1.5%, 1%); } }
#loader-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(8,4,3,.92) 100%); }
#embers { position: absolute; inset: 0; pointer-events: none; }
.ember {
	position: absolute; bottom: -10px; width: 3px; height: 3px; background: #ffb347;
	box-shadow: 0 0 6px 2px rgba(255,140,40,.7); animation: rise linear infinite; opacity: 0;
}
@keyframes rise { 0% { transform: translate(0,0); opacity: 0 } 10% { opacity: .9 } 100% { transform: translate(var(--dx), -105vh); opacity: 0 } }
#loader-inner { position: relative; width: min(760px, 92vw); text-align: center; }
#logo { width: min(560px, 80vw); image-rendering: pixelated; filter: drop-shadow(0 10px 18px rgba(0,0,0,.8)); animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.025); } }
#subtitle { font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: .32em; font-size: clamp(11px, 1.6vw, 15px); color: var(--bronze-hi); margin: 4px 0 34px; text-shadow: 0 2px 0 #000; }
#bar-wrap { position: relative; height: 34px; margin: 0 auto; width: min(560px, 84vw); }
#bar-track {
	position: absolute; left: 34px; right: 22px; top: 11px; height: 12px;
	background: #1c120d; border: 2px solid #000; box-shadow: inset 0 0 0 2px #3b2a1c, 0 3px 0 rgba(0,0,0,.6);
}
#bar-fill {
	height: 100%; width: 0%; transition: width .25s ease-out;
	background: linear-gradient(#fff3d1 0 25%, #d9d9d9 25% 55%, #9da3ad 55% 100%);
	box-shadow: 0 0 10px rgba(255,230,170,.5);
}
#hilt { position: absolute; left: 0; top: 0; width: 38px; height: 34px; }
#hilt::before { content: ""; position: absolute; left: 30px; top: 3px; width: 7px; height: 28px; background: var(--bronze); border: 2px solid #000; box-sizing: border-box; box-shadow: inset 0 0 0 1px var(--bronze-hi); }
#hilt::after { content: ""; position: absolute; left: 4px; top: 12px; width: 26px; height: 10px; background: #5a2e17; border: 2px solid #000; box-sizing: border-box; }
#pommel { position: absolute; left: -4px; top: 10px; width: 12px; height: 14px; background: var(--bronze-hi); border: 2px solid #000; box-sizing: border-box; }
#tip { position: absolute; right: 8px; top: 9px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 16px solid #1c120d; filter: drop-shadow(2px 0 0 #000); }
#tip.lit { border-left-color: #d9d9d9; }
#status-line { margin-top: 14px; font-size: 15px; color: #e8cfa2; text-shadow: 0 2px 0 #000; min-height: 20px; }
#pct { color: var(--bronze-hi); }
#tip-line { margin: 22px auto 0; max-width: 560px; font-size: 14px; color: #bfa982; min-height: 40px; line-height: 1.45; transition: opacity .4s; }
#tip-line b { color: var(--bronze-hi); font-weight: 500; }
#enter {
	margin-top: 26px; display: none; cursor: pointer; font-family: 'Cinzel', serif; font-weight: 800;
	font-size: clamp(18px, 2.6vw, 24px); letter-spacing: .14em; color: #2a1406; padding: 14px 42px;
	background: linear-gradient(#ffd98a, #d6923c 55%, #a8661f); border: 3px solid #000;
	box-shadow: inset 0 2px 0 #fff2c4, inset 0 -3px 0 #7a4410, 0 6px 0 #000, 0 0 30px rgba(255,170,60,.45);
	animation: pulse 1.6s ease-in-out infinite;
}
#enter:hover { filter: brightness(1.1); }
#enter:active { transform: translateY(3px); box-shadow: inset 0 2px 0 #fff2c4, inset 0 -3px 0 #7a4410, 0 3px 0 #000; }
@keyframes pulse { 50% { box-shadow: inset 0 2px 0 #fff2c4, inset 0 -3px 0 #7a4410, 0 6px 0 #000, 0 0 46px rgba(255,170,60,.8); } }
#enter-fs { display: none; margin-top: 12px; font-size: 13px; color: #bfa982; cursor: pointer; user-select: none; }
#enter-fs span { color: #8d7858; }
#enter-fs input { accent-color: var(--bronze); vertical-align: -2px; }
#error { display: none; margin-top: 20px; color: #ff9b8a; font-size: 15px; white-space: pre-line; }

@media (prefers-reduced-motion: reduce) {
	.gem, .strip-glow, #logo, #loader-bg, #chat-badge.on { animation: none; }
}