/* Mind the Doors: brass, mahogany, cream card stock. Limelight for the maker's marks, Bungee for lift signage,
   Patrick Hand for anything a person says. No rounded dark cards. */
:root {
  --brass: #c9a227; --brass-hi: #f0d470; --brass-lo: #8a6a1c; --mahog: #5a2a1a; --mahog-d: #2a1712; --cream: #f3e6c8;
  --paper: #fbf3dc; --ink: #2a1712; --red: #c8352b; --teal: #0f3b3a; --ghost: #bfe3f2;
  --brass-grad: linear-gradient(160deg, #f0d470 0%, #c9a227 35%, #9a7a1e 60%, #d9b445 100%);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1c1210; color: var(--ink); font-family: 'Patrick Hand', 'Comic Sans MS', system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
/* the vignette and grade live in the post chain on 'high' (body.post); lower presets get a CSS approximation */
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(25,12,6,.32)); mix-blend-mode: multiply; z-index: 0; }
body.post::after { display: none; }
body:not(.post) #gl { filter: saturate(.96) contrast(1.03); }
#ui > * { pointer-events: auto; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud > #bubbles, #hud > #pts, #hud > #toasts, #hud > #deadveil, #hud > #spectate, #hud > #status, #hud > #intercom, #hud > #alarm, #hud > #floorplate, #hud > #task, #hud > #frag, #hud > #chatlog, #hud > #prompt { pointer-events: none; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; color: inherit; }
.small { font-size: 15px; opacity: .8; }
kbd { font-family: Bungee, sans-serif; font-size: 12px; background: var(--paper); border: 2px solid var(--ink); border-bottom-width: 4px; border-radius: 4px; padding: 1px 6px; color: var(--ink); }

/* ------------------------------------------------------------ brass plate + screws */
.callplate, .panelplate, .wardrobe, .cabinet {
  position: relative; background: var(--brass-grad); border: 4px solid var(--mahog-d); box-shadow: 0 0 0 6px var(--mahog), 0 0 0 9px var(--mahog-d), 0 24px 60px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.25);
  padding: 34px 34px 26px; color: var(--ink);
}
.screws i { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f6e39a, #7a5a14 70%); border: 2px solid var(--mahog-d); }
.screws i::after { content: ''; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px; background: var(--mahog-d); transform: rotate(35deg); }
.screws i:nth-child(1) { left: 10px; top: 10px; } .screws i:nth-child(2) { right: 10px; top: 10px; } .screws i:nth-child(3) { left: 10px; bottom: 10px; } .screws i:nth-child(4) { right: 10px; bottom: 10px; }
.maker { font-family: Limelight, serif; letter-spacing: .14em; font-size: 13px; text-align: center; margin: 0 0 6px; opacity: .85; }
.brass { font-family: Bungee, sans-serif; font-size: 13px; letter-spacing: .04em; background: var(--brass-grad); border: 3px solid var(--mahog-d); padding: 8px 14px; box-shadow: 0 3px 0 var(--mahog-d), inset 0 1px 0 rgba(255,255,255,.6); color: var(--ink); }
.brass:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--mahog-d); }

/* ------------------------------------------------------------ title */
#title { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at 50% 30%, rgba(28,18,16,.15), rgba(28,18,16,.75)); }
.callplate { width: min(440px, 100%); text-align: center; transform: rotate(-.6deg); }
.callplate h1 { font-family: Limelight, serif; font-weight: 400; font-size: clamp(48px, 13vw, 76px); line-height: .9; margin: 6px 0 10px; color: var(--mahog-d); text-shadow: 0 2px 0 rgba(255,255,255,.45), 0 -1px 0 rgba(0,0,0,.35); }
.callplate h1 span { font-size: .45em; letter-spacing: .3em; vertical-align: middle; }
.tag { font-size: 19px; margin: 0 0 18px; line-height: 1.25; } .tag em { color: var(--red); font-style: normal; text-decoration: underline wavy; }
.badge { display: flex; align-items: center; gap: 8px; background: var(--paper); border: 3px solid var(--ink); padding: 6px 8px 6px 10px; margin: 0 auto 18px; width: min(320px, 100%); transform: rotate(.8deg); box-shadow: 3px 4px 0 rgba(42,23,18,.35); }
.badge span { font-family: Bungee, sans-serif; font-size: 12px; background: var(--red); color: var(--paper); padding: 3px 6px; }
.badge input { flex: 1; min-width: 0; border: 0; border-bottom: 2px dashed var(--ink); background: transparent; font: inherit; font-size: 24px; color: var(--ink); outline: none; }
.dice { width: 34px; height: 34px; border: 3px solid var(--ink); background: var(--paper); font-family: Bungee; font-size: 16px; transform: rotate(8deg); }
.callrow { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 18px; }
.callbtn { width: 92px; height: 92px; border-radius: 50%; border: 5px solid var(--mahog-d); background: radial-gradient(circle at 38% 32%, #fff6cf, #f2c94c 45%, #c08a17 80%); box-shadow: 0 0 0 8px #8a6a1c, 0 0 0 11px var(--mahog-d), 0 0 24px 8px rgba(255,200,80,.55), inset 0 -6px 10px rgba(0,0,0,.25); animation: callglow 2.2s ease-in-out infinite; }
.callbtn b { font-size: 34px; color: var(--mahog-d); }
.callbtn:active { transform: scale(.95); }
@keyframes callglow { 50% { box-shadow: 0 0 0 8px #8a6a1c, 0 0 0 11px var(--mahog-d), 0 0 40px 14px rgba(255,200,80,.8), inset 0 -6px 10px rgba(0,0,0,.25); } }
.callinfo { text-align: left; display: grid; } .callinfo strong { font-family: Bungee; font-size: 20px; } .callinfo span { font-size: 16px; }
.private { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.private input { width: 86px; font-family: Bungee; font-size: 16px; text-align: center; letter-spacing: .2em; border: 3px solid var(--ink); background: var(--paper); padding: 6px; text-transform: uppercase; }
.fine { font-size: 14px; margin: 16px 0 0; opacity: .75; } .fine a { color: var(--mahog-d); }

/* ------------------------------------------------------------ HUD */
#floorplate { position: fixed; left: 12px; top: 12px; display: flex; align-items: center; gap: 9px; background: rgba(42,23,18,.82); border: 1px solid rgba(201,162,39,.75); box-shadow: inset 0 0 0 1px rgba(255,230,160,.12), 0 6px 18px rgba(0,0,0,.35); padding: 4px 12px 4px 4px; color: var(--cream); max-width: calc(100vw - 150px); backdrop-filter: blur(2px); }
#floorplate b { font-family: Bungee; font-size: 19px; min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff3c4, #e8b84a 55%, #9a7a1e); color: var(--mahog-d); border: 2px solid var(--brass-lo); }
#floorplate span { font-family: Limelight; font-size: 15px; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#status { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); font-family: Bungee; font-size: 17px; letter-spacing: .06em; color: var(--mahog-d); background: rgba(243,230,200,.94); border: 1px solid var(--mahog-d); padding: 4px 12px; font-size: 15px; box-shadow: 0 4px 14px rgba(0,0,0,.3); white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; }
#status:empty { display: none; }
#task { position: fixed; left: 12px; top: 62px; max-width: min(310px, calc(100vw - 24px)); background: var(--paper); border: 1px solid rgba(42,23,18,.7); padding: 6px 11px; font-size: 17px; line-height: 1.12; box-shadow: 0 6px 16px rgba(0,0,0,.3); transform: rotate(-.6deg); opacity: .96; }
#task i { display: block; font-style: normal; font-family: Bungee; font-size: 10px; letter-spacing: .1em; color: var(--red); }
#task p { margin: 0; }
#task.team { background: #fbf3dc; border-color: var(--mahog-d); box-shadow: 0 6px 16px rgba(0,0,0,.3), 3px 3px 0 rgba(42,23,18,.5); }
#task.team i { color: var(--mahog-d); }
#task.done { background: #d9f0c2; } #task.done i { color: #2a6a3a; }
#task-bar { height: 9px; margin: 5px 0 2px; border: 1px solid var(--ink); background: repeating-linear-gradient(45deg, #eadfc2 0 6px, #e0d4b4 6px 12px); }
#task-bar b { display: block; height: 100%; width: 0; background: var(--brass-grad); border-right: 2px solid var(--ink); transition: width .4s; }
#task small { display: block; font-size: 14px; opacity: .78; line-height: 1.1; }
#spectate { position: fixed; left: 50%; bottom: 66px; transform: translateX(-50%); display: grid; justify-items: center; background: var(--mahog-d); color: var(--cream); border: 3px solid var(--brass); padding: 6px 16px; max-width: calc(100vw - 24px); text-align: center; pointer-events: none; }
#spectate i { font-style: normal; font-family: Bungee; font-size: 11px; color: #f6c9c0; letter-spacing: .08em; }
#spectate b { font-family: Limelight; font-weight: 400; font-size: 24px; } #spectate span { font-size: 14px; opacity: .8; }
#deadveil { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(20,8,6,.55)); }
body.dead:not(.post) #gl { filter: grayscale(.85) sepia(.25) contrast(1.05); }
body.dead #tools #b-chat, body.dead #tools #b-emote { opacity: .35; pointer-events: none; }
#intercom { position: fixed; left: 50%; top: 52px; transform: translateX(-50%); width: min(520px, calc(100vw - 24px)); display: flex; gap: 10px; align-items: center; background: rgba(31,19,16,.88); border: 1px solid var(--brass-lo); padding: 6px 12px; color: #f6dfa6; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
#intercom .grille, .tool.mic .grille { flex: none; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, #000 1.6px, transparent 2px) 0 0/6px 6px, radial-gradient(circle at 40% 35%, #8a7a5a, #3a2e22); border: 2px solid var(--brass); }
#intercom p { margin: 0; font-size: 17px; line-height: 1.15; font-family: 'Patrick Hand'; }
#alarm { position: fixed; right: 16px; top: 74px; display: grid; justify-items: center; color: var(--cream); animation: ring .12s linear infinite; }
#alarm .clockface { position: relative; width: 112px; height: 112px; border-radius: 50%; background: radial-gradient(circle, #fff9e6 55%, #e9dcb8); border: 7px solid var(--red); box-shadow: 0 0 0 4px var(--mahog-d), 0 8px 0 rgba(0,0,0,.4), 0 0 30px rgba(255,60,40,.6); display: grid; place-items: center; }
#alarm .clockface b { font-family: Bungee; font-size: 42px; color: var(--red); }
#alarm .hand { position: absolute; left: 50%; top: 8px; width: 4px; height: 48px; margin-left: -2px; background: var(--ink); transform-origin: 50% 100%; border-radius: 2px; }
#alarm .bells { display: flex; gap: 52px; margin-bottom: -16px; position: relative; z-index: 1; }
#alarm .bells i { width: 34px; height: 24px; border-radius: 34px 34px 6px 6px; background: var(--red); border: 3px solid var(--mahog-d); }
#alarm p { margin: 6px 0 0; font-family: Bungee; font-size: 20px; color: var(--paper); background: var(--red); padding: 2px 10px; border: 3px solid var(--mahog-d); }
#alarm.urgent { animation-duration: .06s; } #alarm.urgent .clockface { border-color: #ff2a1a; }
@keyframes ring { 0% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } 100% { transform: rotate(-3deg); } }
#frag { position: fixed; left: 12px; bottom: 120px; display: flex; align-items: center; gap: 6px; background: var(--paper); border: 3px solid var(--ink); padding: 4px 10px 4px 4px; transform: rotate(-2deg); }
#frag b { font-family: Bungee; color: var(--red); background: #f2d06a; padding: 2px 6px; clip-path: polygon(0 10%, 20% 0, 40% 12%, 60% 0, 80% 10%, 100% 0, 100% 90%, 60% 100%, 30% 88%, 0 100%); }
#prompt { position: fixed; left: 50%; top: calc(50% + 26px); transform: translateX(-50%); background: rgba(251,243,220,.92); border: 1px solid rgba(42,23,18,.8); padding: 3px 11px; font-size: 18px; display: flex; gap: 8px; align-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.35); white-space: nowrap; }
#prompt kbd { font-size: 11px; padding: 0 5px; border-width: 1px 1px 3px; }
/* first-person crosshair: a small cream dot with a dark ring; it grows when something can be used */
#hud::before { content: ''; position: fixed; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255,248,230,.92); box-shadow: 0 0 0 1.5px rgba(30,15,8,.55), 0 0 6px rgba(0,0,0,.4); pointer-events: none; transition: transform .12s; z-index: 2; }
#hud:has(#prompt:not([hidden]):not(:empty))::before { transform: scale(1.6); background: #ffd36a; }
body.dead #hud::before, body[data-phase="title"] #hud::before { display: none; }
#pts { position: fixed; left: 50%; top: 36%; transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; }
#pts .pt { font-size: 22px; color: var(--paper); text-shadow: 0 2px 0 var(--ink), 0 0 6px var(--ink); animation: rise 2.6s ease-out forwards; }
#pts .pt b { font-family: Bungee; color: #ffd36a; }
@keyframes rise { 0% { opacity: 0; transform: translateY(20px) scale(.8); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50px); } }
#toasts { position: fixed; right: 12px; bottom: 120px; display: grid; gap: 8px; justify-items: end; max-width: min(320px, calc(100vw - 24px)); }
.plaque { background: var(--brass-grad); border: 2px solid var(--mahog-d); padding: 8px 14px; display: grid; box-shadow: 0 3px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5); color: var(--ink); }
.plaque i { font-family: Limelight; font-style: normal; font-size: 11px; letter-spacing: .2em; }
.plaque b { font-family: Bungee; font-size: 16px; } .plaque span { font-size: 15px; }
.toast { animation: slidein .5s cubic-bezier(.2,1.4,.4,1); } .toast.out, .note.out { opacity: 0; transform: translateX(30px); transition: .6s; }
@keyframes slidein { from { transform: translateX(120%) rotate(6deg); } }
.note { background: var(--paper); border: 2px solid var(--ink); padding: 6px 12px; font-size: 18px; box-shadow: 3px 4px 0 rgba(0,0,0,.3); transform: rotate(-1deg); }
.note.bad { background: #f6c9c0; } .note.good { background: #d9f0c2; }
#chatlog { position: fixed; left: 12px; bottom: 64px; width: min(380px, calc(100vw - 24px)); display: grid; gap: 2px; }
#chatlog p { margin: 0; font-size: 17px; color: var(--paper); text-shadow: 0 1px 0 #000, 0 0 4px #000; transition: opacity 1.5s; }
#chatlog p b { color: #ffd36a; } #chatlog p.ghost { color: var(--ghost); font-style: italic; } #chatlog p.sys { color: #f6c9c0; } #chatlog p.old { opacity: .35; }
#chatform { position: fixed; left: 12px; bottom: 64px; width: min(420px, calc(100vw - 24px)); display: flex; background: var(--paper); border: 3px solid var(--ink); }
#chatform input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 20px; padding: 6px 10px; outline: none; }
#chatform button { border: 0; border-left: 3px solid var(--ink); background: var(--brass); font-family: Bungee; padding: 0 12px; }
#roster { position: fixed; right: 12px; top: 12px; display: grid; gap: 4px; justify-items: end; max-width: 46vw; }
.rider { display: flex; align-items: center; gap: 6px; background: rgba(243,230,200,.82); border: 1px solid rgba(42,23,18,.6); padding: 1px 8px; font-size: 15px; }
.rider i { width: 10px; height: 10px; border-radius: 50%; background: #5fae8f; border: 2px solid var(--ink); }
.rider.dead { background: rgba(191,227,242,.85); font-style: italic; } .rider.dead i { background: #fff; }
.rider.talk i { background: #ffd36a; box-shadow: 0 0 0 3px rgba(255,211,106,.6); }
.rider button { font-size: 12px; border: 2px solid var(--ink); background: var(--paper); padding: 0 5px; } .rider button.muted { background: var(--red); color: var(--paper); }
#tools { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; }
.tool { min-width: 54px; height: 38px; display: grid; place-items: center; gap: 1px; background: linear-gradient(rgba(58,34,24,.88), rgba(42,23,18,.88)); border: 1px solid rgba(201,162,39,.8); color: var(--cream); padding: 2px 6px; box-shadow: 0 4px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,230,160,.15); opacity: .9; }
.tool:hover { opacity: 1; }
.tool em { font-style: normal; font-family: Bungee; font-size: 10px; letter-spacing: .05em; }
.tool.mic { display: flex; gap: 6px; padding: 2px 8px; } .tool.mic .grille { width: 26px; height: 26px; }
.tool.mic.on .grille { border-color: #5fae8f; } .tool.mic.live .grille { border-color: #ffd36a; box-shadow: 0 0 10px #ffd36a; } .tool.mic.denied { opacity: .6; }
.tool.off { opacity: .6; }
#wheel { position: fixed; left: 50%; bottom: 66px; transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--mahog-d); border: 3px solid var(--brass); padding: 8px; }
#wheel button { background: var(--paper); border: 2px solid var(--ink); padding: 6px 10px; font-size: 18px; display: flex; gap: 6px; align-items: center; }
#touchpad { position: fixed; right: 12px; bottom: 70px; display: none; gap: 10px; flex-direction: column; align-items: flex-end; }
body.touch #touchpad { display: flex; }
#touchpad button { width: 70px; height: 70px; border-radius: 50%; font-family: Bungee; font-size: 13px; background: radial-gradient(circle at 40% 35%, #fff3c4, #e8b84a 55%, #9a7a1e); border: 4px solid var(--mahog-d); box-shadow: 0 4px 0 #000; color: var(--mahog-d); }
.joy { position: fixed; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; border: 4px solid rgba(243,230,200,.7); background: rgba(42,23,18,.25); pointer-events: none; }
.joy .knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff3c4, #c9a227); border: 3px solid var(--mahog-d); }
#bubbles { position: fixed; inset: 0; overflow: hidden; }
.bubble { position: absolute; left: 0; top: 0; max-width: 220px; background: #fffdf6; border: 2px solid var(--ink); border-radius: 18px 18px 18px 4px; padding: 6px 12px; font-size: 18px; line-height: 1.1; transform: translate(-10%, -100%); box-shadow: 3px 3px 0 rgba(0,0,0,.25); white-space: pre-wrap; word-wrap: break-word; transition: opacity .3s; }
.bubble.ghost { background: rgba(225,243,250,.85); font-style: italic; color: #34607a; border-style: dashed; }
.bubble.npc { background: #fbf3dc; font-family: Bungee; font-size: 16px; border-radius: 4px; }
.bubble.helium { font-size: 15px; letter-spacing: .08em; } .bubble.whisper { font-size: 14px; opacity: .8; text-transform: lowercase; } .bubble.under { border-radius: 30px; background: #dff4ff; }
.bubble.off { opacity: 0; }

/* ------------------------------------------------------------ overlays */
.overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(20,12,10,.55); overflow-y: auto; }
.panelplate { width: min(360px, 100%); padding-top: 36px; }
#pbtns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 10px 6px; }
#pbtns button { position: relative; aspect-ratio: 1; border-radius: 50%; border: 4px solid #5a3a0a; background: radial-gradient(circle at 38% 32%, #fffaf0, #e8dcbc 55%, #b8a77a); box-shadow: 0 4px 0 #5a3a0a, inset 0 -3px 6px rgba(0,0,0,.2); font-family: Bungee; font-size: 20px; color: var(--ink); padding: 0; }
#pbtns button:active { transform: translateY(3px); box-shadow: 0 1px 0 #5a3a0a; }
#pbtns button.lit { background: radial-gradient(circle at 38% 32%, #fffbe0, #ffcf40 55%, #e08a10); box-shadow: 0 4px 0 #5a3a0a, 0 0 18px 4px rgba(255,190,60,.8); }
#pbtns button.visited b { opacity: .45; } #pbtns button.visited::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--red); font-size: 40px; font-family: sans-serif; }
#pbtns button.closed { opacity: .62; } #pbtns button.closed::after { content: 'CLOSED'; position: absolute; left: -4px; right: -4px; bottom: 2px; font-size: 8px; background: var(--red); color: var(--paper); transform: rotate(-8deg); }
#pbtns button.absent { opacity: .5; filter: grayscale(.6); }
#pbtns button svg { position: absolute; left: 50%; bottom: 9%; width: 30%; height: 30%; transform: translateX(-50%); fill: none; stroke: #5a3a0a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#pbtns button b { position: relative; top: -10%; }
#pbtns button.fun b { color: #2a6a3a; }
#pbtns { max-height: min(62vh, 520px); overflow-y: auto; }
#pbtns button.taped i { position: absolute; left: -10px; right: -10px; top: 38%; background: rgba(238,226,190,.97); border: 1px solid #b9a77a; font-style: normal; font-size: 11px; transform: rotate(-22deg); padding: 2px 0; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.pnote { text-align: center; font-size: 17px; margin: 6px 0 12px; }
.close { display: block; margin: 0 auto; }
.deathcard { width: min(420px, 100%); background: var(--paper); border: 4px solid var(--ink); padding: 26px; text-align: center; transform: rotate(-1.5deg); box-shadow: 8px 10px 0 rgba(0,0,0,.4); background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(42,23,18,.08) 27px 28px); }
.deathcard .stamp { display: inline-block; font-family: Bungee; font-size: 30px; color: var(--red); border: 5px solid var(--red); padding: 4px 14px; transform: rotate(-8deg); margin: 0 0 10px; opacity: .9; }
.deathcard h2 { font-family: Limelight; font-weight: 400; font-size: 34px; margin: 0; } .deathcard p { font-size: 21px; }
.ticket { width: min(620px, 100%); background: var(--paper); border: 4px solid var(--ink); padding: 22px 22px 16px; box-shadow: 8px 10px 0 rgba(0,0,0,.4); position: relative; transform: rotate(.6deg);
  -webkit-mask: radial-gradient(circle 10px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat; }
.ticket h2 { font-family: Limelight; font-weight: 400; font-size: 34px; text-align: center; margin: 4px 0; } .ticket > p { text-align: center; }
.ticket table { width: 100%; border-collapse: collapse; font-size: 18px; } .ticket th { font-family: Bungee; font-size: 11px; text-align: left; border-bottom: 3px solid var(--ink); padding: 4px; }
.ticket td { padding: 4px; border-bottom: 1px dashed rgba(42,23,18,.4); } .ticket tr.me td { background: rgba(255,211,106,.35); }
.wardrobe { width: min(560px, 100%); } .wardrobe h2, .cabinet h2 { font-family: Limelight; font-weight: 400; text-align: center; font-size: 30px; margin: 0 0 10px; }
.wgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 14px; } .wgrid h3 { font-family: Bungee; font-size: 12px; margin: 0 0 4px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; } .swatches button { width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 3px solid var(--ink); }
.swatches button.on { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }
.opts { display: flex; flex-wrap: wrap; gap: 5px; } .opts button { background: var(--paper); border: 2px solid var(--ink); padding: 2px 8px; font-size: 16px; text-transform: capitalize; } .opts button.on { background: var(--mahog-d); color: var(--cream); }
.cabinet { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; } .cabinet.small { width: min(460px, 100%); }
#tlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 12px; }
#tlist .plaque { opacity: .45; filter: grayscale(1); box-shadow: none; } #tlist .plaque.got { opacity: 1; filter: none; box-shadow: 0 3px 0 var(--mahog-d); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; font-size: 18px; }
.help { font-size: 18px; padding-left: 20px; } .help li { margin-bottom: 6px; }
#arrival { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; pointer-events: none; }
#arrival.go { animation: arrive 3.6s ease forwards; }
#arrival .n { font-family: Bungee; font-size: 22px; color: var(--mahog-d); background: var(--brass-grad); border: 3px solid var(--mahog-d); padding: 4px 14px; display: inline-block; margin: 0; }
#arrival .t { font-family: Limelight; font-size: clamp(30px, 7vw, 54px); color: var(--paper); margin: 6px 0 0; text-shadow: 0 3px 0 var(--mahog-d), 0 0 18px rgba(0,0,0,.6); }
@keyframes arrive { 0% { opacity: 0; transform: translate(-50%, 20px); } 12% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; } }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .6s; } #fade.on { opacity: 1; }
.nojs { color: var(--cream); padding: 20px; }

@media (max-width: 640px) {
  #floorplate span { display: none; } #floorplate { padding-right: 6px; }
  #status { top: 64px; font-size: 13px; white-space: normal; text-align: center; max-width: calc(100vw - 24px); }
  #spectate { bottom: 64px; } #spectate b { font-size: 20px; } #spectate span { display: none; } body.dead #chatlog { bottom: 140px; } #intercom { top: auto; bottom: 120px; } #intercom p { font-size: 16px; }
  #task { top: 64px; right: 12px; max-width: none; font-size: 17px; }
  #alarm { top: 150px; right: 10px; } #alarm .clockface { width: 86px; height: 86px; } #alarm .clockface b { font-size: 32px; } #alarm .hand { height: 34px; }
  #roster { max-width: 52vw; } .rider { font-size: 14px; }
  #prompt { font-size: 16px; } #chatlog { bottom: 64px; width: calc(100vw - 110px); } #chatlog p { font-size: 16px; }
  .tool { min-width: 50px; } .tool em { font-size: 9px; } #toasts { bottom: 260px; }
  .wgrid { grid-template-columns: 1fr; }
  .callplate { padding: 30px 18px 22px; }
}

/* ------------------------------------------------------------ pockets: four brass key cubbies (1-4 / wheel, F use, G drop) */
#pockets { position: fixed; left: 50%; bottom: 62px; transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; pointer-events: none; }
#pk-row { display: flex; gap: 6px; padding: 5px 7px; background: linear-gradient(#3a1d12, #24120b); border: 2px solid var(--mahog-d); box-shadow: 0 0 0 2px var(--brass-lo), 0 6px 14px rgba(0,0,0,.45); border-radius: 3px; pointer-events: auto; }
.pk { position: relative; width: 54px; height: 54px; padding: 0; border: 2px solid #1a0d07; background: radial-gradient(circle at 50% 35%, #4a2a1a, #1e0f08 75%); box-shadow: inset 0 3px 6px rgba(0,0,0,.7), 0 0 0 2px #8a6a1c; transition: transform .12s, box-shadow .12s; }
.pk img { position: absolute; inset: 3px; width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.pk img:not([src]) { display: none; }
.pk kbd { position: absolute; left: -4px; top: -6px; font-size: 9px; padding: 0 4px; border-width: 1px 1px 2px; }
.pk em { display: none; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); font: 9px Bungee, sans-serif; font-style: normal; letter-spacing: .06em; background: var(--red); color: #fff3e0; padding: 0 4px; border: 1px solid var(--mahog-d); }
.pk.worn em { display: block; }
.pk.on { transform: translateY(-5px); background: radial-gradient(circle at 50% 30%, #ffe7a8 0%, #c98a3a 45%, #5a2a14 85%); box-shadow: inset 0 2px 4px rgba(0,0,0,.35), 0 0 0 2px var(--brass-hi), 0 0 14px rgba(255,200,110,.55); }
#pk-name { margin: 0; min-height: 22px; font: 17px 'Patrick Hand', sans-serif; color: #fff3dc; text-shadow: 0 2px 3px rgba(0,0,0,.8); opacity: 0; }
#pk-name.show { animation: pkname 2.4s ease-out forwards; }
@keyframes pkname { 0% { opacity: 0; transform: translateY(6px); } 10%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }
body.dead #pockets { opacity: .4; }

/* ------------------------------------------------------------ floor reward: a kraft parcel tag on a string */
#reward { position: fixed; left: 50%; top: 0; transform: translateX(-50%); pointer-events: none; z-index: 6; }
#reward .tagcard { position: relative; margin-top: 18px; width: 250px; padding: 30px 18px 16px; display: grid; justify-items: center; gap: 2px; text-align: center; color: #3a2414;
  background: linear-gradient(170deg, #e0c49a, #c9a576); border: 2px solid #6a4a2a; clip-path: polygon(14% 0, 86% 0, 100% 9%, 100% 100%, 0 100%, 0 9%); box-shadow: 0 14px 30px rgba(0,0,0,.5);
  animation: tagdrop .9s cubic-bezier(.2,1.5,.35,1) both; transform-origin: 50% -40px; }
#reward .tagcard::before { content: ''; position: absolute; left: 50%; top: -60px; width: 2px; height: 70px; background: #e8dcc0; }
#reward .hole { position: absolute; top: 9px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #2a1712; box-shadow: 0 0 0 3px #b08a5a; }
#reward .from { margin: 0; font: 11px Limelight, serif; letter-spacing: .2em; color: #8a2a1a; border: 2px solid #8a2a1a; padding: 2px 8px; transform: rotate(-3deg); }
#reward img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.35)); }
#reward b { font: 20px Bungee, sans-serif; } #reward span { font-size: 17px; line-height: 1.15; } #reward small { font-size: 14px; opacity: .75; }
#reward.out .tagcard { transition: transform .55s ease-in, opacity .55s; transform: translateY(-140%) rotate(8deg); opacity: 0; }
@keyframes tagdrop { 0% { transform: translateY(-160%) rotate(-12deg); } 60% { transform: translateY(0) rotate(5deg); } 80% { transform: rotate(-2deg); } 100% { transform: none; } }
@media (max-width: 640px) { .pk { width: 44px; height: 44px; } .pk img { width: 36px; height: 36px; } #pockets { bottom: auto; top: 54px; } }

/* ------------------------------------------------------------ floor screen styles (styles.js): every floor its own game */
#styleveil { position: fixed; inset: 0; pointer-events: none; z-index: 1; display: none; }
#styleosd { position: absolute; inset: 0; }
body[class*="st-"] #styleveil { display: block; }
body.st-noir #gl { filter: grayscale(1) contrast(1.4) brightness(.92); }
body.st-noir #styleveil { background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0,0,0,.65)), repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
body.st-vhs #gl { filter: saturate(1.45) contrast(1.08) hue-rotate(-6deg) blur(.35px); }
body.st-vhs #styleveil { background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(10,0,30,.5)); animation: vhsjit 4s steps(1) infinite; }
body.st-vhs #styleosd { font: 26px 'VT323', 'Courier New', monospace; color: #f4f4f4; text-shadow: 2px 0 rgba(255,0,60,.6), -2px 0 rgba(0,200,255,.6); letter-spacing: .08em; }
body.st-vhs #styleosd b { position: absolute; left: 34px; top: 26px; font-weight: normal; } body.st-vhs #styleosd span { position: absolute; right: 40px; top: 26px; }
body.st-vhs #styleosd i { position: absolute; left: 34px; bottom: 120px; font-style: normal; } body.st-vhs #styleosd em { position: absolute; right: 40px; bottom: 120px; font-style: normal; }
@keyframes vhsjit { 0%, 100% { transform: none; } 37% { transform: translateY(2px); } 38% { transform: translateX(-3px); } 72% { transform: translateY(-1px); } }
body.st-pixel #gl, body.st-arcade #gl { image-rendering: pixelated; }
body.st-pixel #gl { filter: saturate(1.35) contrast(1.15); }
body.st-arcade #gl { filter: saturate(1.6) contrast(1.2) brightness(1.05); }
body.st-arcade #styleveil { background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 2px, transparent 2px 4px), radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.6)); border-radius: 18px; box-shadow: inset 0 0 80px rgba(0,0,0,.6); }
body.st-souls #gl { filter: sepia(.35) saturate(.62) contrast(1.18) brightness(.82); }
body.st-souls #styleveil { background: radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(0,0,0,.78)); }
body.st-silent #gl { filter: grayscale(1) sepia(.55) contrast(1.25) brightness(var(--flick, .95)); }
body.st-silent #styleveil { --flick: .95; background: linear-gradient(90deg, transparent calc(var(--sx, 30%) - 1px), rgba(255,255,255,.35) var(--sx, 30%), transparent calc(var(--sx, 30%) + 1px)), radial-gradient(ellipse at center, transparent 45%, rgba(30,20,10,.75)); }
body.st-nightvision #gl { filter: grayscale(1) sepia(1) hue-rotate(58deg) saturate(3.2) brightness(1.15) contrast(1.2); }
body.st-nightvision #styleveil { background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 2px), radial-gradient(circle at 50% 50%, transparent 52%, #000 72%); }
body.st-dream #gl { filter: saturate(1.6) brightness(1.08) blur(.6px) hue-rotate(10deg); }
body.st-dream #styleveil { background: radial-gradient(ellipse at center, transparent 40%, rgba(255,210,255,.35)); mix-blend-mode: screen; }
/* the banner: YOU DIED */
.stbanner { position: fixed; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 26px 0; text-align: center; pointer-events: none; z-index: 7; background: linear-gradient(90deg, transparent, rgba(0,0,0,.82) 20%, rgba(0,0,0,.82) 80%, transparent); opacity: 0; animation: stban 1.6s ease-out forwards; }
.stbanner span { font: 72px 'Cinzel', 'Trajan Pro', Georgia, serif; letter-spacing: .14em; color: #a3201a; text-shadow: 0 0 22px rgba(160,20,10,.55); }
.stbanner.win span { color: #e8c96a; text-shadow: 0 0 22px rgba(230,190,90,.5); }
.stbanner.out { transition: opacity 1.2s; opacity: 0 !important; }
@keyframes stban { 0% { opacity: 0; letter-spacing: .02em; } 100% { opacity: 1; } }

/* side / top / chase views: no mouse capture, so no 'click to look' hint */
body[data-cam=side] #lockhint, body[data-cam=top] #lockhint, body[data-cam=chase] #lockhint { display: none !important; }

/* ------------------------------------------------------------ the mode card: a floor that is a different game says so */
#modecard { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; text-align: center; width: min(640px, 92vw); padding: 22px 26px 18px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.08), transparent 60%), rgba(14,10,12,.86); border: 3px solid var(--mc); box-shadow: 0 0 0 3px #000, 0 0 40px color-mix(in srgb, var(--mc) 40%, transparent), 0 20px 60px rgba(0,0,0,.6); }
#modecard.go { animation: mcin .55s cubic-bezier(.2,1.5,.4,1) both, mcout .5s ease-in 4.6s forwards; }
#modecard .rib { display: inline-block; font: 15px Bungee, sans-serif; letter-spacing: .14em; color: #120a0c; background: var(--mc); padding: 3px 14px; transform: rotate(-2deg); }
#modecard h2 { margin: 10px 0 4px; font: clamp(34px, 7vw, 64px)/1 Bungee, sans-serif; color: var(--mc); text-shadow: 0 4px 0 #000, 0 0 24px color-mix(in srgb, var(--mc) 50%, transparent); animation: mcstamp .5s .15s cubic-bezier(.2,1.8,.4,1) both; }
#modecard p { margin: 6px auto 12px; max-width: 520px; font: 19px 'Patrick Hand', sans-serif; color: #f3e6c8; }
#modecard .keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; }
#modecard .keys span { font: 15px 'Patrick Hand', sans-serif; color: #e8dcc0; display: inline-flex; align-items: center; gap: 6px; }
#modecard kbd { font-size: 12px; }
@keyframes mcin { from { opacity: 0; transform: translate(-50%, -50%) scale(.7) rotate(-3deg); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes mcout { to { opacity: 0; transform: translate(-50%, -60%) scale(.95); } }
@keyframes mcstamp { from { transform: scale(2.4); opacity: 0; } to { transform: none; opacity: 1; } }
body.touch #modecard .keys { display: none; }

/* the war film: bleached, crushed, grainy, a slight sway */
body.st-warfilm #gl { filter: saturate(.38) contrast(1.28) brightness(.92) sepia(.18); }
body.st-warfilm #styleveil { background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(20,18,14,.7)), repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px); animation: warsway 6s ease-in-out infinite; }
@keyframes warsway { 0%, 100% { transform: none; } 50% { transform: translateX(1px) rotate(.08deg); } }

/* knocked flat (onKO): the world swims for a few seconds */
body.dazed #gl { animation: dazed 3.6s ease-out; }
@keyframes dazed { 0% { filter: blur(3px) saturate(1.6) brightness(1.3); transform: rotate(-2deg) scale(1.03); } 30% { filter: blur(1.5px) saturate(1.3); transform: rotate(1.5deg) scale(1.02); } 60% { filter: blur(.6px); transform: rotate(-.8deg) scale(1.01); } 100% { filter: none; transform: none; } }

/* Honk Party accounts: verified names are gold with a check (hub sso-kit rule) */
#chatlog b.sq-gold { color: #ffc53d; }