/* unpolished on purpose. no design references allowed. puke green, lowercase, comic neue. */
@font-face { font-family: "Comic Neue"; font-weight: 400; src: url("/assets/fonts/comic-neue-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Comic Neue"; font-weight: 700; src: url("/assets/fonts/comic-neue-700.woff2") format("woff2"); font-display: swap; }

body { margin: 0; background: #6b6b00; color: #ffff99; font-family: "Comic Neue", "Comic Sans MS", cursive; font-size: 16px; overflow: hidden; }
h1 { font-size: 24px; background: #ff00ff; color: #00ff00; margin: 0 0 8px 0; padding: 2px 6px; }
h2 { font-size: 18px; color: #00ffff; margin: 8px 0 4px 0; }
.small { font-size: 13px; color: #cccc66; font-weight: 400; }
.err { color: #ff6666; }
.screen { position: absolute; inset: 0; overflow: auto; padding: 8px; display: none; background: #6b6b00; }
.box { border: 3px ridge #ff9900; padding: 6px; margin: 6px 0; background: #4a4a00; }
details { border: 2px groove #00cccc; margin: 4px 0; padding: 3px; background: #3a3a00; }
summary { color: #ff9999; cursor: pointer; }
input, select, button, textarea { font-family: inherit; font-size: 16px; }
button { margin: 2px; }
label.row { display: block; margin: 2px 0; }
td, th { padding: 1px 8px; text-align: left; }
.chatlog { min-height: 3em; max-height: 9em; overflow: auto; background: #2d2d00; padding: 2px 4px; margin-bottom: 4px; white-space: pre-wrap; }
.charrow { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
#preview { background: #8d9b7a; image-rendering: pixelated; border: 2px solid #ff9900; }

#c { position: absolute; inset: 0; width: 100vw; height: 100vh; image-rendering: pixelated; background: #000; display: none; }
#hud { position: absolute; inset: 0; pointer-events: none; display: none; }
#hud > div, #hud > table { position: absolute; background: rgba(0,0,0,0.55); padding: 2px 6px; color: #ffff99; }
#hud > #borders, #hud > #redflash { background: none; padding: 0; inset: 0; }
#borders { box-shadow: inset 0 0 90px 28px #ffe600; opacity: 0; }
#redflash { background: radial-gradient(ellipse at center, rgba(255,0,0,0) 35%, rgba(255,0,0,0.8) 100%) !important; opacity: 0; display: none; }
#redflash.on { display: block; animation: flash 0.5s steps(2, jump-none) infinite; }
@keyframes flash { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
.bar { background: #222; width: 100%; }
#meterwrap { left: 8px; bottom: 8px; width: 220px; }
#meterbar { height: 14px; width: 0%; background: #00ff00; position: relative; z-index: 1; }
#meterwrap .bar { position: relative; }
#meterover { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: #ff0000; z-index: 2; pointer-events: none; }
#suspwrap { left: 8px; bottom: 56px; width: 140px; display: none; font-size: 13px; }
#suspbar { height: 8px; width: 0%; background: #ffe600; }
#hover { left: 50%; top: calc(50% + 16px); transform: translateX(-50%); text-align: center; white-space: pre; font-size: 15px; display: none; }
#hud > #slots { left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 4px; background: none; padding: 0; }
#slots div { position: relative; width: 48px; height: 48px; background: rgba(0,0,0,0.55); border: 2px solid #777; }
#slots div.sel { border: 3px solid #ffe600; }
#slots span { position: absolute; left: 2px; top: 0; font-size: 12px; color: #ffff99; }
#slots img { width: 48px; height: 48px; image-rendering: pixelated; }
#iteminfo { left: 50%; bottom: 84px; transform: translateX(-50%); text-align: center; white-space: pre; display: none; }
#timer { left: 50%; top: 6px; transform: translateX(-50%); font-size: 22px; }
#lb { right: 6px; top: 6px; font-size: 13px; border-collapse: collapse; }
#lb td, #lb th { padding: 0 6px; font-weight: 400; }
#toast { left: 50%; top: 80px; transform: translateX(-50%); font-size: 19px; color: #00ffff; display: none; }
#chat { left: 8px; bottom: 112px; max-width: 40vw; font-size: 14px; white-space: pre-wrap; } /* right above the faded meter and the sus bar, newest at the bottom */
#hint { left: 50%; bottom: 6px; transform: translateX(-50%); font-size: 13px; color: #aaaa66; }
#tip { left: 50%; bottom: 90px; transform: translateX(-50%); font-size: 15px; color: #ffffff; display: none; }
#watching { left: 50%; bottom: 40px; transform: translateX(-50%); font-size: 16px; display: none; }
#hud.spectating #slots, #hud.spectating #iteminfo, #hud.spectating #meterwrap, #hud.spectating #hover { display: none !important; }
#ping { left: 6px; top: 6px; font-size: 12px; color: #cccc66; }
#lvlbar { right: 6px; bottom: 6px; width: 170px; font-size: 14px; }
#lvlface { width: 20px; height: 20px; image-rendering: pixelated; vertical-align: middle; }
#lvlbar .bar { height: 6px; background: #333; margin-top: 2px; }
#lvlfill { height: 100%; width: 0%; background: #ff9900; }
#hud.spectating #lvlbar { display: none !important; }
#hud.teacher #slots, #hud.teacher #iteminfo, #hud.teacher #meterwrap, #hud.teacher #suspwrap { display: none !important; }

#hud > #xpfeed { left: calc(50% + 40px); top: 50%; transform: translateY(-50%); background: none; padding: 0; font-size: 15px; color: #66ff33; }
#xpfeed div.loss { color: #ff3333; }
#xpfeed div { background: rgba(0,0,0,0.55); padding: 1px 6px; margin: 2px 0; transition: opacity 0.6s; }
#cross { left: 50%; top: 50%; width: 4px; height: 4px; padding: 0 !important; background: #fff !important; transform: translate(-50%,-50%); }
#qbumps { position: absolute; top: 2px; right: 6px; }
#qte { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); width: 420px; max-width: 90vw; background: #000; border: 3px solid #ffffff; padding: 6px; display: none; text-align: center; color: #fff; }
#qbar { position: relative; height: 26px; background: #444; margin-top: 4px; }
#qtarget { position: absolute; top: 0; bottom: 0; background: #00ff00; opacity: 0.8; }
#qmark { position: absolute; top: -3px; bottom: -3px; width: 4px; background: #ff0000; }
#mini { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #000; border: 3px solid #fff; padding: 6px; display: none; text-align: center; color: #fff; z-index: 15; }
#minititle { font-size: 22px; font-weight: 700; }
#miniclock { position: absolute; top: 4px; right: 8px; font-size: 14px; }
#minicanvas { display: block; margin-top: 4px; }
#fatal { position: fixed; left: 0; right: 0; top: 0; z-index: 100; background: #cc0000; color: #ffffff; padding: 6px; white-space: pre-wrap; display: none; font-size: 14px; }
#escmenu { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #4a4a00; border: 3px ridge #ff9900; padding: 8px; display: none; z-index: 20; }
#chatin { position: absolute; left: 8px; bottom: 82px; width: 320px; display: none; }

/* the asset viewer */
body.viewer { overflow: auto; }
#vwrap { display: flex; gap: 8px; padding: 8px; flex-wrap: wrap; }
#vcanvas { width: 560px; height: 560px; max-width: 95vw; image-rendering: pixelated; background: #8d9b7a; border: 2px solid #ff9900; }
#vpanel { min-width: 260px; max-width: 420px; }
#vreport div { margin: 1px 0; }
.good { color: #66ff66; }
.bad { color: #ff6666; }