/* Survivorscape: the old-school interface. Brown stone panels with a bevel, orange titles, yellow and
   white text with a hard 1px shadow, green / red bars, a round minimap. */
@font-face { font-family: Pixelify; src: url(/fonts/pixelify.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Quill; src: url(/fonts/alegreya-sc-700.woff2) format('woff2'); font-display: swap; }
:root { --panel: #3e3529; --panel2: #4a3f31; --edge: #000; --hi: #6b5e4c; --lo: #231d15; --orange: #ff981f; --yellow: #ffff00; --green: #0dc10d; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d0d0a; color: #fff; font: 16px Pixelify, monospace; user-select: none; -webkit-user-select: none; touch-action: none; font-variant-ligatures: none; }
canvas#gl, canvas#ov { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
canvas#ov { pointer-events: none; }
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 48%, rgba(0,0,0,0) 58%, rgba(0,0,0,0.22) 84%, rgba(0,0,0,0.5) 100%); }
body.flat #vignette { display: none; }
#hurtflash { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(160,0,0,0) 45%, rgba(200,0,0,0.65) 100%); }
#hurtflash.go { animation: hurt .45s ease-out forwards; }
@keyframes hurt { from { } to { opacity: 0; } }
#screenflash { position: fixed; inset: 0; pointer-events: none; opacity: 0; }
#screenflash.go { animation: sflash .7s ease-out; }
@keyframes sflash { 0% { opacity: .75; } 100% { opacity: 0; } }
.shadow, #timer, #lvl, #msgs, .slot b, #counters, #hptext, .box, button { text-shadow: 1px 1px 0 #000; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; }
#xpbar { position: absolute; left: 0; right: 0; top: 0; height: 9px; background: #101018; border-bottom: 1px solid #000; }
#xpbar i { display: block; height: 100%; width: 0; background: linear-gradient(#5aa8ff, #1e6ae0 60%, #1450b0); box-shadow: 0 0 8px rgba(80,150,255,.6); transition: width .12s linear; }
#lvl { position: absolute; right: 10px; top: 12px; color: #fff; font-size: 15px; }
#timer { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); font: 38px Quill, serif; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1, 'tnum' 1; color: #fff; letter-spacing: 1px; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
#msgs { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); text-align: center; font-size: 16px; line-height: 1.35; width: 90vw; }
#msgs .big { font: 26px Quill, serif; }
#bossbar { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); width: min(520px, 70vw); text-align: center; }
#bossbar b { font: 20px Quill, serif; color: #ff6a3a; display: block; text-shadow: 1px 1px 0 #000; }
#bossbar .track { height: 12px; background: #e00000; border: 1px solid #000; box-shadow: 0 0 0 1px #5a4a3a; }
#bossbar i { display: block; height: 100%; background: #00e000; width: 100%; }

#slots { position: absolute; left: 10px; top: 18px; display: flex; flex-direction: column; gap: 5px; }
#slots .row { display: flex; gap: 5px; }
.slot { position: relative; width: 44px; height: 44px; background: rgba(40,34,26,.82); border: 2px solid #5a5045; box-shadow: inset 0 0 0 1px #000; display: grid; place-items: center; }
.slot.empty { background: rgba(30,26,20,.45); border-color: rgba(90,80,69,.6); }
.slot img { width: 38px; height: 38px; image-rendering: auto; }
.slot b { position: absolute; left: 3px; top: 0; color: var(--yellow); font-size: 13px; font-weight: normal; z-index: 1; }
.r-common { border-color: #4aa84a !important; } .r-uncommon { border-color: #d8c040 !important; } .r-rare { border-color: #e07a2a !important; } .r-vrare { border-color: #b860ff !important; }
#slots .grow { display: flex; gap: 3px; margin-top: 2px; }
.gslot { width: 30px; height: 30px; background: rgba(30,26,20,.5); border: 1px solid rgba(90,80,69,.8); display: grid; place-items: center; color: rgba(200,190,170,.55); font-size: 12px; }
.gslot img { width: 27px; height: 27px; }
.ltr { font-size: 12px; color: #d8c8a8; }

#mapwrap { position: absolute; right: 12px; top: 26px; width: 172px; height: 172px; border-radius: 50%; box-shadow: 0 0 0 3px #3e3529, 0 0 0 5px #000, 0 0 0 7px #5a5045, 0 3px 10px rgba(0,0,0,.6); background: #000; }
#minimap { width: 100%; height: 100%; display: block; border-radius: 50%; }
#compass { position: absolute; left: -6px; top: -6px; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(#5a4a36, #2a2218); border: 2px solid #000; color: #e02020; font-size: 13px; display: grid; place-items: center; text-shadow: 1px 1px 0 #000; }
#counters { position: absolute; right: 14px; top: 212px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 16px; }
#counters div { display: flex; align-items: center; gap: 6px; }
#coins { color: var(--yellow); }
.ico { width: 16px; height: 16px; display: inline-block; background-size: contain; background-repeat: no-repeat; }
.ico.skull { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23e8e2d0' stroke='%23000' d='M8 1C4 1 2 3.5 2 6.5c0 2 1 3.2 2 3.8V13h2v-1h1v1h2v-1h1v1h2v-2.7c1-.6 2-1.8 2-3.8C14 3.5 12 1 8 1z'/%3E%3Ccircle cx='5.6' cy='7' r='1.5'/%3E%3Ccircle cx='10.4' cy='7' r='1.5'/%3E%3C/svg%3E"); }
.ico.coin { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cellipse cx='8' cy='10' rx='6' ry='3' fill='%23c8901a' stroke='%23000'/%3E%3Cellipse cx='8' cy='7' rx='6' ry='3' fill='%23ffd84a' stroke='%23000'/%3E%3C/svg%3E"); }

#bottom { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
#items { display: flex; gap: 4px; pointer-events: auto; }
.islot { position: relative; width: 44px; height: 44px; background: rgba(40,34,26,.82); border: 2px solid #5a5045; box-shadow: inset 0 0 0 1px #000; display: grid; place-items: center; cursor: pointer; }
.islot.empty { background: rgba(30,26,20,.45); border-color: rgba(90,80,69,.55); cursor: default; }
.islot img { width: 38px; height: 38px; }
.islot u { position: absolute; left: 3px; top: 0; font-size: 11px; color: rgba(255,255,255,.55); text-decoration: none; }
#buffs { display: flex; gap: 6px; min-height: 0; }
.buff { position: relative; width: 34px; height: 34px; background: rgba(20,40,20,.75); border: 1px solid #3a8a3a; display: grid; place-items: center; }
.buff img { width: 30px; height: 30px; } .buff span { position: absolute; bottom: -2px; right: 1px; font-size: 11px; color: #fff; text-shadow: 1px 1px 0 #000; }
#hpbar { position: relative; width: 268px; height: 22px; background: #e00000; border: 2px solid #000; box-shadow: 0 0 0 1px #5a5045; }
#hpbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(#22ff22, #00c800 60%, #009a00); transition: width .1s linear; }
#hpbar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: #fff; }
#hpbar.low { animation: lowhp 0.8s infinite; }
#hpbar.hit { animation: hpflash .3s; }
@keyframes lowhp { 50% { box-shadow: 0 0 0 1px #5a5045, 0 0 14px 3px rgba(255,0,0,.7); } }
@keyframes hpflash { 0% { filter: brightness(2.2); } 100% { filter: none; } }

/* ---------------------------------------------------------------- old-school box */
.box { background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E");
  border: 2px solid #000; box-shadow: inset 2px 2px 0 var(--hi), inset -2px -2px 0 var(--lo), 0 8px 30px rgba(0,0,0,.6); color: #fff; padding: 16px 18px; }
.box h2 { font: 26px Quill, serif; color: var(--orange); text-align: center; margin: 2px 0 2px; font-weight: normal; }
.box h1 { font: 40px Quill, serif; text-align: center; margin: 0; font-weight: normal; }
.box .sub { text-align: center; margin: 0 0 12px; color: #c8bca8; font-size: 14px; }
button { font-variant-ligatures: none; font: 16px Pixelify, monospace; color: var(--orange); background: #3a3126; border: 2px solid #000; box-shadow: inset 1px 1px 0 #6b5e4c, inset -1px -1px 0 #1a150f; padding: 8px 14px; cursor: pointer; pointer-events: auto; }
button:hover:not(:disabled) { background: #4c4032; color: #ffb040; }
button:disabled { color: #7a6e5c; cursor: default; }
button.go { color: var(--yellow); }
button u { text-decoration: none; color: #c8bca8; font-size: 12px; margin-left: 4px; }
.btns { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.btns.col { flex-direction: column; align-items: stretch; }
.gold { color: var(--yellow); }

#modal { position: fixed; z-index: 20; }
#modal.box.levelbox { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(580px, 94vw); animation: pop .18s ease-out; }
@keyframes pop { from { transform: translate(-50%, -46%) scale(.94); opacity: 0; } }
.choice { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin: 8px 0; padding: 8px 12px; background: #2f281f; border: 2px solid; color: #fff; min-height: 64px; }
.choice:hover { background: #3c3327; }
.choice .num { color: #fff; font-size: 18px; width: 18px; text-align: center; }
.choice .ic { width: 48px; height: 48px; display: grid; place-items: center; }
.choice .ic img { width: 48px; height: 48px; }
.choice .tx { flex: 1; line-height: 1.3; }
.choice .tx b { color: var(--orange); font-weight: normal; font-size: 17px; }
.choice .tx em { color: var(--yellow); font-style: normal; }
.choice .tx small { color: #e8e0d0; font-size: 14px; }
.choice .rar { align-self: flex-start; font-size: 15px; }

#modal.casket { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,.35); }
.rays { position: absolute; left: 50%; top: 38%; width: 1100px; height: 1100px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,160,60,.55) 0deg 5deg, rgba(255,160,60,0) 5deg 15deg); -webkit-mask: radial-gradient(circle, #000 0%, rgba(0,0,0,.8) 18%, transparent 55%); mask: radial-gradient(circle, #000 0%, rgba(0,0,0,.8) 18%, transparent 55%); animation: spin 14s linear infinite; }
.rays.r-common { background: repeating-conic-gradient(from 0deg, rgba(120,255,120,.4) 0deg 5deg, rgba(0,0,0,0) 5deg 15deg); }
.rays.r-uncommon { background: repeating-conic-gradient(from 0deg, rgba(255,230,90,.5) 0deg 5deg, rgba(0,0,0,0) 5deg 15deg); }
.rays.r-vrare { background: repeating-conic-gradient(from 0deg, rgba(200,110,255,.6) 0deg 5deg, rgba(0,0,0,0) 5deg 15deg); }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.reveal { position: relative; text-align: center; margin-top: -60px; animation: rise .45s cubic-bezier(.2,1.6,.4,1); }
.reveal img { width: 128px; height: 128px; filter: drop-shadow(0 0 18px rgba(255,200,80,.7)); animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes rise { from { transform: scale(.4); opacity: 0; } }
.reveal h1 { font: 44px Quill, serif; text-shadow: 2px 2px 0 #000, 0 0 18px rgba(0,0,0,.6); margin: 8px 0 0; }
.reveal .tag { font: 16px Quill, serif; letter-spacing: 3px; text-shadow: 1px 1px 0 #000; }
.box.info { position: relative; width: min(440px, 92vw); margin-top: 18px; }
.box.info .head { display: flex; align-items: center; gap: 10px; }
.box.info .head img { width: 40px; height: 40px; }
.box.info .head b { color: var(--orange); font-weight: normal; font-size: 18px; }
.box.info .head small { color: #c8bca8; }
.box.info .found { margin-left: auto; color: #c8bca8; font-size: 12px; text-align: right; max-width: 120px; }
.box.info p { margin: 10px 0 0; font-size: 15px; }
.box.info .note { color: #a89c88; font-size: 13px; }
.box.info .btns button u { color: #fff; margin: 0 6px 0 0; font-size: 15px; }

#over, #pause, #how { position: fixed; inset: 0; display: grid; place-items: center; z-index: 25; background: rgba(0,0,0,.45); }
.overbox { width: min(560px, 94vw); }
.overbox h1 { color: #e02020; text-shadow: 2px 2px 0 #000; }
.overbox h1.won, .overbox.won h1 { color: #ffcf40; }
.overbox .sub { font-size: 15px; line-height: 1.45; color: #e8e0d0; margin: 8px 0 12px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 12px; }
.stats div { background: #2f281f; border: 1px solid #1a150f; text-align: center; padding: 6px; }
.stats small { display: block; color: #c8bca8; font-size: 12px; }
.stats b { font-weight: normal; font-size: 22px; }
.tx { text-align: center; background: #241e16; border: 1px solid #000; padding: 8px; margin: 0 0 12px; color: #c8bca8; font-size: 14px; }
.tx.done { color: #7dff5a; }
.tx a, .howbox a, .rec a { color: #ffb040; }
.pausebox { width: 280px; }

#joy { position: fixed; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; background: rgba(0,0,0,.25); border: 2px solid rgba(255,255,255,.25); z-index: 30; pointer-events: none; }
#knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.35); border: 2px solid rgba(0,0,0,.4); transform: translate(-50%, -50%); }
#loading { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #2c3a1a 0%, #141a0c 55%, #0d0d0a 100%); z-index: 50; transition: opacity .6s; }
#loading.done { opacity: 0; pointer-events: none; }
#loading .lbox { text-align: center; }
#loading h1 { font: 72px Quill, serif; margin: 0; color: #ffcf40; text-shadow: 0 2px 0 #8a5a10, 0 4px 0 #5a3a08, 0 6px 0 #2a1a04, 0 10px 24px rgba(0,0,0,.8); }
#loading p { color: #fff; font-size: 16px; margin: 8px 0 14px; text-shadow: 1px 1px 0 #000; }
.track { width: min(360px, 80vw); height: 14px; margin: 0 auto; background: #1a150f; border: 2px solid #000; box-shadow: 0 0 0 1px #5a5045; }
.track i { display: block; height: 100%; width: 4%; background: linear-gradient(#ffe066, #e0a020); transition: width .3s; }

@media (max-width: 700px), (max-height: 520px) {
  .slot, .islot { width: 34px; height: 34px; } .slot img, .islot img { width: 29px; height: 29px; }
  .gslot { width: 22px; height: 22px; font-size: 10px; } .gslot img { width: 20px; height: 20px; }
  #mapwrap { width: 120px; height: 120px; top: 22px; }
  #counters { top: 152px; font-size: 14px; }
  #timer { font-size: 28px; top: 10px; }
  #lvl { top: auto; bottom: 8px; right: 8px; }
  #slots { top: 14px; }
  #msgs { top: 48px; font-size: 13px; }
  #hpbar { width: 200px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .choice { min-height: 52px; } .choice .ic img { width: 38px; height: 38px; }
}

/* ---------------------------------------------------------------- the paid layer: header, adventurer card, live runs, bag, bank booth */
.is-hidden { display: none !important; }
#bar { position: fixed; left: 0; right: 0; top: 0; height: 40px; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 0 10px;
  background: linear-gradient(#4a3f31, #342b20); border-bottom: 2px solid #000; box-shadow: inset 0 -1px 0 #6b5e4c, 0 4px 14px rgba(0,0,0,.45); text-shadow: 1px 1px 0 #000; }
#bar .brand { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
#bar .wm { font: 24px Quill, serif; color: #ffcf40; font-weight: normal; letter-spacing: .5px; }
#bar .tk { color: var(--orange); font-size: 14px; }
.pot { display: flex; align-items: center; gap: 14px; font-size: 13px; white-space: nowrap; overflow: hidden; min-width: 0; }
.pot span { display: flex; align-items: baseline; gap: 5px; }
.pot small { color: #c8bca8; font-size: 11px; }
.pot b { font-weight: normal; color: #fff; }
.pot .prac { color: #ffb040; border: 1px solid #7a5a20; padding: 1px 6px; font-size: 11px; }
.hdr-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
#bar button, .xbtn { height: 28px; padding: 0 10px; font-size: 14px; display: inline-flex; align-items: center; }
.xbtn { color: #fff; background: #1a150f; border: 2px solid #000; box-shadow: inset 1px 1px 0 #5a5045; text-decoration: none; font: 16px system-ui, sans-serif; }
.ca-pill { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 0 8px; background: #241e16; border: 2px solid #000; box-shadow: inset 1px 1px 0 #5a5045; }
.ca-pill.is-live { box-shadow: inset 1px 1px 0 #5a5045, 0 0 0 1px #c8a030; }
.ca-lab { color: var(--orange); font-weight: normal; font-size: 13px; }
.ca-addr { height: 24px !important; padding: 0 4px !important; gap: 6px; background: none !important; border: 0 !important; box-shadow: none !important; color: #fff !important; font: 13px Pixelify, monospace !important; cursor: copy; }
.ca-copy { font-style: normal; color: var(--yellow); font-size: 12px; }
.ca-link { color: #ffb040; font-size: 12px; text-decoration: none; padding: 0 4px; }
.ca-link:hover { color: #fff; }

/* the HUD sits under the header */
#xpbar { top: 40px; }
#lvl, #timer { top: 50px; }
#slots { top: 56px; }
#mapwrap { top: 64px; }
#counters { top: 248px; }
#msgs { top: 102px; }
#bossbar { top: 130px; }

#bag { position: absolute; right: 12px; top: 300px; pointer-events: none; }
.bagbox { width: 200px; text-align: right; background: rgba(30,25,18,.82); border: 2px solid #000; box-shadow: inset 1px 1px 0 #6b5e4c; padding: 8px 10px; }
.bagbox small { display: block; color: #c8bca8; font-size: 12px; }
.bagbox > b { font: 30px Quill, serif; font-weight: normal; display: block; line-height: 1.1; }
.bagbox .worth { font-size: 13px; color: #c8bca8; margin-top: 2px; }
.bagbox .worth.ok { color: #7dff5a; }
.bagbox .worth i { color: #ffb040; font-style: normal; }
.bagbox .way { font-size: 13px; color: #ffd84a; margin-top: 4px; }
.bagbox .way i { display: inline-block; font-style: normal; }

#booth { pointer-events: auto; }
.boothbox { display: flex; align-items: center; gap: 12px; padding: 8px 12px; font-size: 14px; max-width: min(720px, 94vw); }
.boothbox > b { color: var(--orange); font-weight: normal; font-size: 16px; white-space: nowrap; }
.boothbox .no { color: #ff9a3a; }
.boothbox button { white-space: nowrap; }
.boothbox.banking { flex-wrap: wrap; justify-content: center; }
.boothbox .hold { flex-basis: 100%; height: 12px; background: #1a150f; border: 1px solid #000; }
.boothbox .hold i { display: block; height: 100%; background: linear-gradient(#a8ff7a, #2fbf1a); }

#mecard { position: fixed; left: 10px; top: 50px; z-index: 12; width: 300px; }
#runs { position: fixed; right: 10px; top: 50px; z-index: 12; width: 300px; max-height: calc(100vh - 170px); overflow: auto; }
body:not(.idle) #mecard, body.playing #runs, body.watching #runs { display: none; }
body.watching #runs { display: block; top: 300px; }
.mebox { padding: 10px 12px; }
.mebox .heroes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.hb { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; background: #2f281f; color: #fff; border: 2px solid #1a150f; font-size: 13px; }
.hb img { width: 40px; height: 40px; }
.hb.on { border-color: var(--yellow); background: #3e3426; color: var(--yellow); }
.mebox label { display: block; color: var(--orange); font-size: 13px; margin-top: 6px; }
.mebox label small { color: #a89c88; font-size: 11px; }
.mebox input { display: block; width: 100%; margin-top: 3px; padding: 6px 8px; font: 14px Pixelify, monospace; color: #fff; background: #1a150f; border: 2px solid #000; box-shadow: inset 1px 1px 0 #000, 0 0 0 1px #5a5045; outline: none; user-select: text; -webkit-user-select: text; }
.mebox input:focus { box-shadow: 0 0 0 1px var(--yellow); }
#meerr { color: #ff6a3a; font-size: 12px; min-height: 0; margin-top: 4px; }
.runsbox { padding: 8px 10px; }
.runsbox h3 { font: 18px Quill, serif; color: var(--orange); margin: 2px 0 6px; font-weight: normal; }
.runsbox h3 small { font: 11px Pixelify, monospace; color: #a89c88; }
.run { display: grid; grid-template-columns: 28px 1fr auto auto; align-items: center; gap: 6px; width: 100%; margin: 3px 0; padding: 3px 6px; background: #2f281f; border: 1px solid #1a150f; color: #fff; font-size: 13px; text-align: left; }
.run img { width: 26px; height: 26px; }
.run .t { color: #c8bca8; } .run .gp { color: var(--yellow); }
.run em { grid-column: 2 / -1; color: #7dff5a; font-style: normal; font-size: 11px; }
.run.on { border-color: var(--yellow); }
.rec { font-size: 12px; color: #c8bca8; margin: 3px 0; }
.rec .nm { color: #fff; } .rec.dead .nm { color: #ff8a6a; }
.none { color: #a89c88; font-size: 13px; margin: 4px 0; }
.startbox { position: fixed; left: 0; right: 0; bottom: 34px; margin: 0 auto; width: max-content; max-width: 94vw; z-index: 12; text-align: center; padding: 12px 22px; animation: breathe 2.4s ease-in-out infinite; }
.startbox b { display: block; font: 28px Quill, serif; color: #ffcf40; font-weight: normal; }
.startbox span { font-size: 13px; color: #e8e0d0; }
body:not(.idle) #start { display: none; }
@keyframes breathe { 50% { box-shadow: inset 2px 2px 0 var(--hi), inset -2px -2px 0 var(--lo), 0 8px 30px rgba(0,0,0,.6), 0 0 22px rgba(255,207,64,.28); } }
#watchbar { position: fixed; left: 50%; top: 92px; transform: translateX(-50%); z-index: 22; background: rgba(30,25,18,.9); border: 2px solid #000; padding: 6px 10px; font-size: 14px; display: flex; gap: 10px; align-items: center; text-shadow: 1px 1px 0 #000; }
#watchbar b { color: var(--yellow); font-weight: normal; }
#reconnect, #catchup { position: fixed; inset: 0; display: grid; place-items: center; z-index: 40; background: rgba(0,0,0,.35); }
#reconnect[hidden], #catchup[hidden] { display: none; }
#catchup .box { text-align: center; } #catchup .track { margin-top: 10px; }
.howbox { width: min(620px, 94vw); max-height: 88vh; overflow: auto; font-size: 14px; line-height: 1.45; }
.howbox ol { padding-left: 20px; margin: 8px 0; } .howbox li { margin: 4px 0; }
.howbox h3 { font: 18px Quill, serif; color: var(--orange); font-weight: normal; margin: 10px 0 4px; }
.paytab { border-collapse: collapse; margin: 8px auto; min-width: 260px; }
.paytab th { color: #c8bca8; font-weight: normal; font-size: 12px; text-align: left; padding: 2px 10px; }
.paytab td { border-top: 1px solid #2a2218; padding: 3px 10px; } .paytab td:last-child { color: var(--yellow); }

@media (max-width: 860px) {
  #bar { height: 40px; gap: 8px; } #bar .wm { font-size: 18px; } #bar .tk { display: none; }
  .pot span:nth-child(n+3) { display: none; }
  #howbtn { display: none !important; }
  .ca-link { display: none !important; }
  #mecard { width: min(300px, calc(100vw - 20px)); }
  #runs { display: none; }
  .startbox b { font-size: 22px; } .startbox span { font-size: 12px; }
  #bag { top: auto; bottom: 120px; right: 8px; } .bagbox { width: 160px; } .bagbox > b { font-size: 22px; }
  .boothbox { flex-wrap: wrap; justify-content: center; text-align: center; }
}
@media (max-width: 700px), (max-height: 520px) {
  #mapwrap { top: 54px; } #counters { top: 182px; } #timer { top: 46px; } #slots { top: 50px; } #msgs { top: 84px; }
  #lvl { top: auto; }
}