/* ===== Base & stage ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #07070a; overflow: hidden; color: #eee;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
#viewport { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage { position: relative; flex: none; width: 960px; height: 540px; overflow: hidden; background: #000;
  transform-origin: center; box-shadow: 0 0 80px #000; }
#shaker { position: absolute; inset: 0; }
#shaker.shake { animation: shake .5s linear 2; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-9px, 4px); }
  40% { transform: translate(8px, -6px); } 60% { transform: translate(-6px, -3px); } 80% { transform: translate(6px, 5px); }
}
.hidden { display: none !important; }

/* ===== Layers =====
 * #view: the pixelated scene. #world-ui: crisp text that scrolls with the camera. */
#view { position: absolute; inset: 0; overflow: hidden; }
#view.pixel, #actors-view.pixel { filter: url(#pixelate); }
#actors-view { position: absolute; inset: 0; overflow: hidden; z-index: 11; pointer-events: none; }
#actors, #bubbles { position: absolute; top: 0; left: 0; width: 5000px; height: 540px; will-change: transform; }
#bubbles { z-index: 12; pointer-events: none; }
#world, #world-ui { position: absolute; top: 0; left: 0; width: 5000px; height: 540px; will-change: transform; }
#world > * { position: absolute; }
#world-ui { z-index: 10; pointer-events: none; }
#world-ui > * { position: absolute; }

/* ===== Rooms: flat colors, one light and one shadow per surface ===== */
.room { top: 0; width: 800px; height: 540px; overflow: hidden; }
.room > * { position: absolute; }
.room i, .room b { position: absolute; display: block; font-style: normal; }
.wall { left: 0; top: 0; width: 100%; height: 440px; }
.wall::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36px; background: #0000002e; }
.wall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: #0004; }
.floor { left: 0; top: 440px; width: 100%; height: 100px; }
.floor::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #0005; }
.floor::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: #00000033; }
.jamb { top: 0; width: 16px; height: 440px; background: #2a1c14; z-index: 2; box-shadow: 4px 0 0 #0003; }
.jamb.steel { background: #2b313b; width: 20px; }

/* Roberto's office: dark wood, red carpet */
.boss .wall { background: #4a3226; }
.boss .wall::after { height: 120px; background: #3a271d; border-top: 6px solid #2a1b13; }
.boss .floor { background: #6a2424; }
.bookshelf { bottom: 100px; width: 110px; height: 240px; background: #2a1b13; border: 6px solid #2a1b13;
  background-image: repeating-linear-gradient(180deg, transparent 0 52px, #2a1b13 52px 58px),
    repeating-linear-gradient(90deg, #8b3a2b 0 12px, #3f5b7a 12px 22px, #a68a3d 22px 30px, #4e6b48 30px 38px, #2a1b13 38px 42px); }
.frame { top: 180px; width: 54px; height: 46px; border: 5px solid #b8933f; background: #7fa7c4; }
.frame .dog { left: 11px; top: 7px; width: 22px; height: 22px; background: #f0e2c4; border-radius: 50% 50% 45% 45%; }
.frame .dog::after { content: ""; position: absolute; left: 8px; top: 18px; width: 6px; height: 10px; background: #c0392b; }
.window { top: 70px; width: 220px; height: 150px; border: 8px solid #2a1b13; overflow: hidden; background: linear-gradient(#f0a868 0 35%, #f6d38f 35% 65%, #a9cfe8 65%); }
.window.wide { width: 300px; height: 170px; border-color: #8b8478; background: linear-gradient(#9cc6e4 0 45%, #bcdcef 45%); }
.window .sun { left: 140px; top: 18px; width: 34px; height: 34px; background: #fff3c4; border-radius: 50%; }
.window .city { left: 0; right: 0; bottom: 0; height: 70px; background: #3b4256;
  clip-path: polygon(0 40%, 12% 40%, 12% 5%, 26% 5%, 26% 55%, 40% 55%, 40% 15%, 55% 15%, 55% 45%, 70% 45%, 70% 0, 82% 0, 82% 35%, 100% 35%, 100% 100%, 0 100%); }
.window::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 49%, #0006 49% 51%, transparent 51%); }
.nuked .window, .nuked .sky { background: #fff; }
.desk { bottom: 100px; width: 150px; height: 62px; background: #7a5136; box-shadow: inset 0 10px 0 #93653f; }
.boss-desk { background: #3b2216; box-shadow: inset 0 10px 0 #523020; }
.desk .mug { left: 10px; bottom: 62px; width: 13px; height: 15px; background: #c0392b; }
.desk .nameplate { left: 50px; bottom: 62px; width: 40px; height: 10px; background: #b8933f; }
.desk .laptop { left: 28px; bottom: 62px; width: 58px; height: 6px; background: #9aa3ad; }
.desk .laptop b { left: 5px; bottom: 6px; width: 48px; height: 34px; border: 3px solid #9aa3ad; background: #5b3fa8; box-shadow: 0 0 18px #8b6cf6; }
.desk .monitor { left: 98px; bottom: 70px; width: 44px; height: 34px; background: #1d2633; border: 3px solid #2f3540; }
.desk .monitor::after { content: ""; position: absolute; left: 14px; bottom: -11px; width: 10px; height: 8px; background: #2f3540; }
.pedestal { bottom: 100px; width: 60px; height: 70px; background: #7b7f86; box-shadow: inset -12px 0 0 #63676d; }
.pedestal .red { left: 12px; top: -15px; width: 36px; height: 17px; border-radius: 50% 50% 4px 4px; background: #e02424; box-shadow: 0 0 16px #ff3030; }
.pedestal .dome { left: 5px; top: -32px; width: 50px; height: 34px; border-radius: 50% 50% 0 0; border: 2px solid #dbeafe99; border-bottom: none; }
.pedestal .plaque { left: 6px; top: 26px; width: 48px; height: 12px; background: repeating-linear-gradient(45deg, #f2c94c 0 6px, #1b1b1b 6px 12px); }
.robot-arm { top: 0; width: 26px; height: 250px; z-index: 1; background: #6b7280; box-shadow: inset -8px 0 0 #4b5563;
  transition: height .7s cubic-bezier(.7, 0, .9, .4); }
.robot-arm .claw { left: -9px; bottom: -14px; width: 44px; height: 16px; background: #374151; border-radius: 0 0 12px 12px; }
.robot-arm .led { left: 8px; top: 40px; width: 10px; height: 10px; background: #ef4444; animation: blinkled .8s steps(2) infinite; }
.robot-arm.press { height: 318px; }
@keyframes blinkled { 50% { opacity: .2; } }
.plant { bottom: 100px; width: 60px; height: 130px; }
.plant .pot { left: 12px; bottom: 0; width: 36px; height: 34px; background: #8a4b2e; }
.plant .leaf { width: 22px; height: 60px; background: #3f7d4e; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; bottom: 28px; transform-origin: 50% 100%; }
.plant .leaf.a { left: 19px; height: 90px; } .plant .leaf.b { left: 6px; transform: rotate(-30deg); } .plant .leaf.c { left: 32px; transform: rotate(30deg); }

/* Open office: warm gray, one big window */
.office .wall { background: #c9c1b2; }
.office .floor { background: #5a5f6b; }
.lamp { top: 0; width: 80px; height: 10px; background: #e7e5e4; }
.lamp::after { content: ""; position: absolute; left: -30px; top: 10px; width: 140px; height: 300px;
  background: #ffffff; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); opacity: .08; }
.poster { top: 220px; width: 76px; height: 100px; background: #1f3a68; border: 4px solid #f2efe8; }
.poster b { left: 0; right: 0; top: 20px; text-align: center; font-size: 40px; line-height: 1; }
.whiteboard { top: 120px; width: 150px; height: 96px; background: #f4f4f2; border: 5px solid #9ca3af; }
.whiteboard .chart { left: 14px; right: 14px; bottom: 14px; height: 50px;
  background: linear-gradient(90deg, #3b82f6 0 18%, transparent 18% 27%, #3b82f6 27% 45%, transparent 45% 54%, #ef4444 54% 72%, transparent 72% 81%, #ef4444 81%);
  clip-path: polygon(0 70%, 18% 70%, 18% 100%, 27% 100%, 27% 45%, 45% 45%, 45% 100%, 54% 100%, 54% 15%, 72% 15%, 72% 100%, 81% 100%, 81% 0, 100% 0, 100% 100%, 0 100%); }
.cooler { bottom: 100px; width: 34px; height: 92px; background: #e5e7eb; box-shadow: inset -8px 0 0 #c7cbd1; }
.cooler .bottle { left: 3px; top: -42px; width: 28px; height: 44px; background: #8ecae6; border-radius: 10px 10px 4px 4px; }
.elevator { bottom: 100px; width: 70px; height: 220px; background: #7c838d; border: 5px solid #5b616b; }
.elevator .doors { left: 4px; right: 4px; top: 26px; bottom: 0; background: linear-gradient(90deg, #a3aab3 0 49%, #5b616b 49% 51%, #a3aab3 51%); }
.elevator .panel { left: 18px; top: 6px; width: 24px; height: 14px; background: #1f2937; }
.elevator .arrow { left: 0; right: 0; top: 4px; text-align: center; color: #fbbf24; font-size: 14px; line-height: 1; }

/* Kitchen: calm tiles, low-contrast floor */
.kitchen .wall { background-color: #dfe5e8;
  background-image: linear-gradient(#c9d1d6 1px, transparent 1px), linear-gradient(90deg, #c9d1d6 1px, transparent 1px);
  background-size: 40px 40px; }
.kitchen .floor { background: conic-gradient(#9aa4ae 25%, #818b96 0 50%, #9aa4ae 0 75%, #818b96 0) 0 0 / 50px 50px; }
.fridge { bottom: 100px; width: 62px; height: 210px; background: #eef0f2; box-shadow: inset -10px 0 0 #d4d8dc; border-radius: 4px; }
.fridge .handle { right: 14px; top: 40px; width: 5px; height: 50px; background: #6b7280; }
.fridge .magnet { left: 10px; top: 110px; width: 26px; height: 14px; background: #d64545; transform: rotate(-6deg); }
.counter { bottom: 100px; width: 150px; height: 70px; background: #6f675f; box-shadow: inset 0 8px 0 #9a9189; }
.coffee { bottom: 170px; width: 64px; height: 84px; background: #26262b; box-shadow: inset -10px 0 0 #18181b; border-radius: 6px 6px 0 0; }
.coffee .screen { left: 12px; top: 10px; width: 34px; height: 18px; background: #0f5132; }
.coffee .led { right: 14px; top: 40px; width: 7px; height: 7px; background: #ef4444; animation: blinkled .5s steps(2) infinite; }
.coffee .spout { left: 24px; bottom: 6px; width: 12px; height: 16px; background: #52525b; }
.coffee.broken { height: 34px; background: #121214; border-radius: 30% 60% 0 0; }
.coffee.broken > * { display: none; }
.coffee.broken::after { content: ""; position: absolute; left: 10px; top: -60px; width: 40px; height: 60px;
  background: radial-gradient(#9ca3af88, transparent 70%); animation: smoke 2s ease-out infinite; }
@keyframes smoke { from { transform: translateY(10px) scale(.6); opacity: .9; } to { transform: translateY(-40px) scale(1.4); opacity: 0; } }
#boom { bottom: 200px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; opacity: 0; z-index: 9;
  background: radial-gradient(#fff, #fde047 30%, #f97316 55%, #7c2d12 75%, transparent 76%); }
#boom.go { animation: boom 1.1s ease-out forwards; }
@keyframes boom { 0% { opacity: 1; transform: scale(1); } 40% { opacity: 1; transform: scale(34); } 100% { opacity: 0; transform: scale(44); } }
.calendar { top: 150px; width: 64px; height: 76px; background: #fafaf9; border-top: 12px solid #c0392b; text-align: center; }
.calendar b { position: static !important; padding-top: 8px; color: #1c1917; font: bold 22px/1 Impact, "Arial Black", sans-serif; }
.calendar .circle { left: 14px; bottom: 6px; width: 36px; height: 16px; border: 3px solid #c0392b; border-radius: 50%; }
.table { bottom: 100px; width: 120px; height: 60px; }
.table::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: #8a5a36; }
.table::after { content: ""; position: absolute; left: 10px; right: 10px; top: 10px; bottom: 0;
  background: linear-gradient(90deg, #6b4429 0 8px, transparent 8px calc(100% - 8px), #6b4429 calc(100% - 8px)); }
.keycard { left: 48px; top: -12px; width: 24px; height: 14px; background: #facc15; border: 2px solid #1c1917;
  box-shadow: 0 0 12px #facc15; animation: bobcard 1s ease-in-out infinite alternate; }
@keyframes bobcard { to { transform: translateY(-3px); } }
.microwave { bottom: 170px; width: 56px; height: 40px; background: #e5e7eb; box-shadow: inset -12px 0 0 #b8bec6; }
.microwave .glass { left: 4px; top: 5px; width: 32px; height: 28px; background: #f6d365; overflow: hidden; }
.microwave .glass b { left: 8px; top: 10px; width: 16px; height: 8px; background: #e07a3f; border-radius: 50%; animation: spin 2s linear infinite; }
.microwave .panel { right: 3px; top: 6px; width: 6px; height: 26px; background: #6b7280; }
@keyframes spin { to { transform: scaleX(-1); } }

/* Server room: dark, one accent color */
.server .wall { background: #121722; }
.server .floor { background: #22262e; }
.racks { left: 0; right: 0; top: 70px; height: 370px;
  background: repeating-linear-gradient(90deg, #0b0f17 0 70px, transparent 70px 90px); }
.racks::after { content: ""; position: absolute; inset: 0; animation: racklights 1.4s steps(3) infinite;
  background: radial-gradient(circle, #34d399 2px, transparent 2.5px) 0 0 / 30px 26px; opacity: .6; }
@keyframes racklights { 33% { background-position: 10px 8px; } 66% { background-position: 4px 14px; } }
.logscreen { top: 100px; width: 172px; height: 160px; background: #03140b; border: 4px solid #374151; box-shadow: 0 0 24px #10b98133; }
.termdesk { bottom: 100px; width: 100px; height: 56px; background: #2b313b; box-shadow: inset 0 8px 0 #3a414d; }
.termdesk .crt { left: 18px; bottom: 56px; width: 64px; height: 52px; background: #0b1410; border: 4px solid #4b5563; }
.termdesk .crt b { left: 8px; top: 8px; width: 10px; height: 14px; background: #34d399; animation: blinkled 1s steps(2) infinite; }
.mainframe { bottom: 100px; width: 190px; height: 320px; background: #1f2530; box-shadow: inset -24px 0 0 #171c25; border: 4px solid #384152; }
.mainframe .screen { left: 18px; top: 26px; width: 146px; height: 100px; background: #120202; border: 4px solid #0b0f17; }
.mainframe .deye { top: 26px; width: 30px; height: 18px; background: #ff2e2e; box-shadow: 0 0 18px #f00; animation: stare 4s infinite; }
.mainframe .deye.l { left: 26px; clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%); }
.mainframe .deye.r { right: 26px; clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 100%); }
.mainframe .dmouth { left: 38px; top: 64px; width: 70px; height: 10px; background: repeating-linear-gradient(90deg, #ff2e2e 0 6px, transparent 6px 10px); }
@keyframes stare { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
.mainframe .lights { left: 20px; right: 30px; top: 150px; height: 140px;
  background: radial-gradient(circle, #ef4444 3px, transparent 4px) 0 0 / 24px 22px; animation: racklights 1s steps(3) infinite; }
.cable { bottom: 100px; width: 40px; height: 200px; }
.cable::before { content: ""; position: absolute; left: -110px; top: 0; width: 128px; height: 18px; background: #0b0b0d; }
.cable::after { content: ""; position: absolute; left: 4px; top: 0; width: 18px; height: 190px; background: #0b0b0d; }
.cable .plug { left: -4px; bottom: 0; width: 34px; height: 22px; background: #52525b; z-index: 1; }
.cable .sign { left: -20px; top: 60px; width: 70px; height: 26px; z-index: 1; border: 3px solid #0b0b0d;
  background: repeating-linear-gradient(45deg, #f2c94c 0 10px, #0b0b0d 10px 18px); }

/* Server door */
.door { bottom: 100px; width: 34px; height: 210px; z-index: 6; background: #5b616b; box-shadow: inset -8px 0 0 #474c55;
  transition: transform .5s ease-in; }
.door .keypad { position: absolute; left: 6px; top: 90px; width: 16px; height: 22px; background: #111; }
.door .keypad::after { content: ""; position: absolute; left: 5px; top: 4px; width: 6px; height: 6px; background: #ef4444; }
.door.open { transform: translateY(-200px); }
.door.open .keypad::after { background: #22c55e; }

/* Meeting room (2nd floor): cool gray, planning poker on the table */
.meeting .wall { background: #8c97a3; }
.meeting .floor { background: #3d4652; }
.projector { top: 90px; width: 200px; height: 130px; background: #f4f4f2; border: 6px solid #2f3540; }
.projector .bars { left: 20px; right: 20px; bottom: 16px; height: 70px;
  background: linear-gradient(90deg, #22c55e 0 22%, transparent 22% 39%, #22c55e 39% 61%, transparent 61% 78%, #ef4444 78%);
  clip-path: polygon(0 40%, 22% 40%, 22% 100%, 39% 100%, 39% 10%, 61% 10%, 61% 100%, 78% 100%, 78% 0, 100% 0, 100% 100%, 0 100%); }
.conf-table { bottom: 100px; width: 320px; height: 58px; background: #5a3d2b; box-shadow: inset 0 12px 0 #73503a; }
.conf-table .cards { left: 120px; top: -8px; width: 80px; height: 10px;
  background: repeating-linear-gradient(90deg, #fafaf9 0 12px, transparent 12px 16px); }
.chair { bottom: 100px; width: 48px; height: 90px; background: #1f2937; border-radius: 10px 10px 0 0; box-shadow: inset 0 -30px 0 #111827; }
/* Marta's mug rests on the table, at her seat */
.conf-table .marta-mug { left: 16px; top: -16px; width: 14px; height: 16px; background: #f2f2f2; border-right: 4px solid #c0392b; }

/* Rooftop (2nd floor): open sky, skyline, satellite dish */
.rooftop .sky { left: 0; top: 0; width: 100%; height: 440px; background: linear-gradient(#5b8fd1 0 28%, #7aa8de 28% 50%, #a9cdea 50% 70%, #f3d9b1 70%); }
.rooftop .skyline { left: 0; right: 0; top: 250px; height: 150px; background: #4a5568;
  clip-path: polygon(0 50%, 8% 50%, 8% 20%, 16% 20%, 16% 60%, 26% 60%, 26% 0, 34% 0, 34% 45%, 47% 45%, 47% 25%, 58% 25%, 58% 55%, 70% 55%, 70% 10%, 78% 10%, 78% 40%, 90% 40%, 90% 30%, 100% 30%, 100% 100%, 0 100%); }
.rooftop .parapet { left: 0; right: 0; top: 400px; height: 40px; background: #7b818c; box-shadow: inset 0 6px 0 #959ba5; }
.rooftop .floor { background: #555b66; }
.vent { bottom: 100px; width: 90px; height: 70px; background: #9aa1ab; box-shadow: inset -14px 0 0 #7d848e; }
.pole { bottom: 100px; width: 10px; height: 200px; background: #4b5563; }
.pole .sticky { left: -9px; top: 90px; width: 28px; height: 28px; background: #fde047; transform: rotate(6deg); }
.dish { bottom: 100px; width: 160px; height: 230px; }
.dish .base { left: 60px; bottom: 0; width: 40px; height: 50px; background: #6b7280; }
.dish .arm { left: 76px; bottom: 50px; width: 8px; height: 90px; background: #6b7280; transform: rotate(18deg); transform-origin: 50% 100%; }
.dish .bowl { left: 10px; top: 40px; width: 140px; height: 70px; background: #e5e7eb; border-radius: 0 0 70px 70px; box-shadow: inset 0 -14px 0 #c4c9d0; transform: rotate(-28deg); }
.dish .bowl::after { content: ""; position: absolute; left: 64px; top: -46px; width: 6px; height: 50px; background: #6b7280; }
.pigeon { bottom: 100px; width: 30px; height: 22px; background: #8b929c; border-radius: 50% 60% 30% 40%; }
.pigeon::after { content: ""; position: absolute; right: -6px; top: -8px; width: 14px; height: 14px; background: #6b7280; border-radius: 50%; }
.bench { bottom: 100px; width: 110px; height: 40px; background: linear-gradient(#7a5136 0 12px, transparent 12px);
  box-shadow: inset 8px 0 0 #4b3423, inset -8px 0 0 #4b3423; }

/* Crisp world text */
.room-sign { top: 84px; transform: translateX(-50%); white-space: nowrap; padding: 5px 12px; border-radius: 4px;
  background: #000c; color: #f5f5f4; font: bold 12px/1.2 ui-monospace, monospace; letter-spacing: 1px; }
.room-sign small { font-weight: normal; color: #d6d3d1; letter-spacing: 0; }
#logtext { top: 108px; width: 158px; font: 11px/1.45 ui-monospace, monospace; color: #6ee7b7; white-space: pre; overflow: hidden; height: 148px; }

/* ===== Characters (pure CSS) ===== */
.char { position: absolute; bottom: 100px; width: 80px; height: 160px; margin-left: -40px; z-index: 5; pointer-events: none; }
.char .rig { position: absolute; inset: 0; transform-origin: 50% 100%; }
.char::before { content: ""; position: absolute; left: 12px; bottom: -5px; width: 56px; height: 10px; border-radius: 50%; background: #0006; }
.char.left .rig { transform: scaleX(-1); }

@keyframes bob { to { transform: translateY(-4px); } }
.char .rig > div, .char .rig i, .char .rig b { position: absolute; display: block; }

.char .leg.l { left: 25px; } .char .leg.r { left: 42px; }

.char .arm { bottom: 50px; width: 11px; height: 42px; border-radius: 6px; transform-origin: 50% 4px;
  background: linear-gradient(var(--sleeve, var(--shirt)) 0 45%, var(--skin) 45%); }
.char .arm.l { left: 10px; transform: rotate(8deg); } .char .arm.r { left: 59px; transform: rotate(-8deg); }


@keyframes swing { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
.char .torso { left: 18px; bottom: 46px; width: 44px; height: 50px; background: var(--shirt); border-radius: 14px 14px 6px 6px; overflow: hidden; }
.char .band, .char .tie, .char .lanyard, .char .phones, .char .stache, .char .glasses { display: none !important; }
.char .neck { left: 34px; bottom: 92px; width: 12px; height: 10px; background: var(--skin-shade); }
.char .head { left: 17px; bottom: 98px; width: 46px; height: 52px; background: var(--skin); border-radius: 46% 46% 44% 44% / 50% 50% 46% 46%; }
.char .ear { top: 22px; width: 8px; height: 13px; background: var(--skin-shade); border-radius: 50%; }
.char .ear.l { left: -4px; } .char .ear.r { right: -4px; }
.char .hair { top: -8px; left: -3px; width: 52px; height: 24px; background: var(--hair); border-radius: 24px 28px 6px 10px; }
.char .brow { top: 17px; width: 13px; height: 4px; background: var(--brow, var(--hair)); border-radius: 2px; }
.char .brow.l { left: 7px; transform: rotate(10deg); } .char .brow.r { left: 26px; transform: rotate(-10deg); }
.char .eye { top: 23px; width: 11px; height: 8px; background: #fff; border-radius: 50%; overflow: hidden; animation: blink 4.2s infinite; }
.char .eye.l { left: 7px; } .char .eye.r { left: 27px; }
.char .iris { left: 4px; top: 1px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #111 0 28%, var(--eyes) 32%); }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.char .nose { left: 19px; top: 25px; width: 8px; height: 12px; background: var(--skin-shade); border-radius: 40% 40% 50% 50%; opacity: .75; }
.char .mouth { left: 18px; top: 45px; width: 10px; height: 3px; background: #8a3b2e; border-radius: 2px; }
.bubble { position: absolute; bottom: 168px; left: 50%; transform: translateX(-50%); display: none; z-index: 9; white-space: nowrap;
  padding: 5px 9px; background: #fff; color: #111; font: bold 12px/1.2 ui-monospace, monospace; border: 2px solid #111; border-radius: 8px; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -6px; border: 6px solid transparent; border-top-color: #111; border-bottom: none; }
.bubble.show { display: block; animation: pop .2s ease-out; }
@keyframes pop { from { transform: translateX(-50%) scale(.5); } }

/* Alan: the vibe coder with a magnificent mustache and blue eyes */
.char.alan { --skin: #e9b896; --skin-shade: #c98d6a; --hair: #2a1a12; --hair2: #3a2417; --eyes: #8fd6ff;
  --shirt: #151515; --pants: #2b3754; z-index: 6; }
.alan .band { display: block !important; left: 0; right: 0; bottom: 8px; height: 15px; background: #f2f2f2; }
.alan .band::after { content: "CLUTCH"; position: absolute; left: 0; right: 0; top: 2px; text-align: center; color: #151515; font: bold 8px/1 Impact, sans-serif; letter-spacing: 1px; }
.alan .hair::before { content: ""; position: absolute; left: 12px; top: -7px; width: 32px; height: 16px; background: var(--hair); border-radius: 60% 70% 10% 10%; transform: rotate(-6deg); }
.alan .hair::after { content: ""; position: absolute; left: 1px; top: 14px; width: 6px; height: 15px; background: var(--hair); box-shadow: 44px 0 0 var(--hair); }
.alan .stache { display: block !important; left: 6px; top: 35px; width: 34px; height: 9px; border-radius: 40% 40% 50% 50%;
  background: var(--hair2); }
/* Handlebar tips: thin crescents that sweep outward and curl up past the cheeks. */
.alan .stache::before, .alan .stache::after { content: ""; position: absolute; top: -8px; width: 16px; height: 14px;
  border-bottom: 4px solid var(--hair2); }
.alan .stache::before { left: -11px; border-left: 3px solid var(--hair2); border-radius: 0 0 0 100%; }
.alan .stache::after { right: -11px; border-right: 3px solid var(--hair2); border-radius: 0 0 100% 0; }
.alan .mouth { top: 46px; }
.alan .phones { display: block !important; left: 15px; bottom: 82px; width: 50px; height: 24px; }
.alan .phones::before { content: ""; position: absolute; left: 4px; right: 4px; top: 0; height: 20px; border: 5px solid #1b1b1b; border-top: none; border-radius: 0 0 22px 22px; }
.alan .cup { bottom: 0; width: 15px; height: 19px; background: #1d1d1d; border: 2px solid #3a3a3a; border-radius: 7px; }
.alan .cup.l { left: -1px; } .alan .cup.r { right: -1px; }
.char.caf .rig { filter: drop-shadow(0 0 5px #fbbf24); }

/* Roberto: CTO*, bald, suit, tie, ex timeshare salesman */
.char.boss { --skin: #f0c4a4; --skin-shade: #d39d7c; --hair: #8a8a8a; --brow: #6b6b6b; --eyes: #5a3b1d; --shirt: #4b5563; --pants: #374151; }
.boss .torso { left: 13px; width: 54px; border-radius: 22px 22px 16px 16px; }
.boss .torso::before { content: ""; position: absolute; left: 17px; top: 0; width: 20px; height: 22px; background: #f3f4f6; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.boss .tie { display: block !important; left: 23px; top: 4px; width: 8px; height: 32px; background: #dc2626; clip-path: polygon(20% 0, 80% 0, 100% 80%, 50% 100%, 0 80%); }
.boss .hair { top: 15px; left: -5px; width: 56px; height: 15px; background: transparent; border-left: 7px solid var(--hair); border-right: 7px solid var(--hair); border-radius: 6px; }
.boss .glasses { display: block !important; left: 4px; top: 21px; width: 38px; height: 12px; }
.boss .glasses::before, .boss .glasses::after { content: ""; position: absolute; top: 0; width: 15px; height: 11px; border: 2px solid #111; border-radius: 3px; }
.boss .glasses::before { left: 0; } .boss .glasses::after { right: 0; }
.char.sooty .rig { filter: brightness(.35) contrast(1.3); transform: rotate(-5deg); }
.char.sooty::after { content: ""; position: absolute; left: 20px; top: -30px; width: 40px; height: 50px; background: radial-gradient(#9ca3af88, transparent 70%); animation: smoke 2s ease-out infinite; }

/* Juancito: the intern with more access than you */
.char.juan { --skin: #d9a37f; --skin-shade: #b98261; --hair: #c2410c; --eyes: #3b2a1a; --shirt: #16a34a; --pants: #1f2937; }
.juan .hair { height: 20px; border-radius: 50% 50% 20% 20%; }
.juan .hair::before { content: ""; position: absolute; left: 6px; top: -8px; width: 40px; height: 12px; background: var(--hair);
  clip-path: polygon(0 100%, 12% 0, 25% 100%, 40% 10%, 55% 100%, 70% 0, 85% 100%, 100% 20%, 100% 100%); }
.juan .lanyard { display: block !important; left: 12px; top: 0; width: 20px; height: 22px; border: 2px solid #2563eb; border-top: none; border-radius: 0 0 10px 10px; }
.juan .card { left: 2px; bottom: -14px; width: 13px; height: 15px; background: #facc15; border: 1px solid #000; }
.juan.nocard .card { display: none; }


/* World bubbles live in the crisp layer, above the character's head */
#bubbles .bubble { bottom: 272px; }

/* ===== HUD ===== */
#hud { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
#clock { position: absolute; left: 14px; top: 12px; padding: 6px 12px; border-radius: 6px; background: #140404f0; border: 2px solid #5c1010;
  color: #ff4d4d; font: bold 32px/1 ui-monospace, monospace; }
#clock.danger { animation: danger .5s infinite alternate; }
@keyframes danger { to { color: #fff; background: #7f0000; } }
#loopinfo { position: absolute; left: 14px; top: 58px; padding: 3px 8px; border-radius: 4px; background: #000c; font-size: 12px; color: #f5f5f4; }
#inventory { position: absolute; right: 14px; top: 12px; display: flex; gap: 6px; }
.item { padding: 5px 9px; border-radius: 6px; background: #111827f0; border: 2px solid #facc15; color: #fef3c7; font-size: 12px; }
#prompt { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); white-space: nowrap; padding: 6px 14px; border-radius: 6px;
  background: #111827f2; border: 2px solid #facc15; color: #fef3c7; font-size: 13px; font-weight: bold; }
#keys-hint { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; line-height: 24px; text-align: center;
  background: #000000d9; color: #e7e5e4; font-size: 11px; }
#pa { position: absolute; left: 50%; top: 12px; z-index: 21; transform: translateX(-50%); max-width: 520px; padding: 6px 12px; text-align: center;
  background: #1c0606f2; border: 2px solid #ef4444; border-radius: 6px; color: #fee2e2; font-size: 12px; line-height: 1.35; animation: pop .2s ease-out; }
#pa::before { content: "📢 DOOMSDAY: "; color: #fca5a5; font-weight: bold; }
#banner { position: absolute; left: 0; right: 0; top: 190px; z-index: 22; text-align: center; opacity: 0; pointer-events: none;
  color: #fff; font: bold 56px/1 Impact, "Arial Black", sans-serif; letter-spacing: 4px; text-shadow: 0 4px 0 #7f1d1d, 0 0 24px #000; }
#banner.show { animation: banner 2.4s ease-out forwards; }
#banner small { display: inline-block; margin-top: 12px; padding: 4px 10px; border-radius: 4px; background: #000c; font: 15px/1.3 ui-monospace, monospace; letter-spacing: 0; text-shadow: none; }
@keyframes banner { 0% { opacity: 0; transform: scale(1.4); } 15%, 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
#toasts { position: absolute; right: 14px; top: 52px; z-index: 23; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.toast { max-width: 320px; padding: 6px 10px; border-radius: 6px; background: #1e1b4bf2; border: 2px solid #a78bfa; color: #f5f3ff; font-size: 12px;
  animation: toast 3.6s ease-out forwards; }
@keyframes toast { 0% { opacity: 0; transform: translateX(30px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes pop { from { transform: translateX(-50%) scale(.5); } }
#fade { position: absolute; inset: 0; z-index: 40; background: #000; opacity: 0; pointer-events: none; transition: opacity .25s; }
#fade.on { opacity: 1; }

/* ===== Dialog ===== */
#dialog { position: absolute; left: 20px; right: 20px; bottom: 32px; z-index: 30; display: flex; gap: 14px; min-height: 150px; max-height: 340px;
  padding: 12px; background: #0b0d14f8; border: 3px solid #e7e5e4; border-radius: 10px; box-shadow: 0 8px 0 #0009; }
#dlg-portrait { position: relative; flex: none; width: 130px; height: 130px; overflow: hidden; border-radius: 8px; background: #263241; border: 2px solid #475569; }
#dlg-portrait.none { display: none; }
#dlg-portrait .char { left: 50%; bottom: -110px; transform: scale(1.6); transform-origin: 50% 100%; }
#dlg-portrait .char::before { display: none; }
#dlg-portrait .ai { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 60px; }
#dlg-portrait .ai.vibe { background: #5b3fa8; }
#dlg-portrait .ai.doom { background: #1a0303; }
#dlg-portrait .ai.doom::before, #dlg-portrait .ai.doom::after { content: ""; position: absolute; top: 46px; width: 34px; height: 20px; background: #ff2e2e; box-shadow: 0 0 20px #f00; }
#dlg-portrait .ai.doom::before { left: 22px; clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%); }
#dlg-portrait .ai.doom::after { right: 22px; clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 100%); }
#dlg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#dlg-name { margin-bottom: 6px; color: #fcd34d; font-weight: bold; font-size: 14px; }
#dlg-text { white-space: pre-wrap; font-size: 14px; line-height: 1.45; color: #f5f5f4; }
#dlg-options { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; overflow: auto; }
.opt { padding: 3px 8px; border: none; border-radius: 4px; background: none; color: #e2e8f0; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.opt.sel { background: #fcd34d; color: #111; }
#dlg-hint { position: absolute; right: 16px; bottom: 10px; color: #cbd5e1; font-size: 11px; animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .55; } }

/* ===== Terminal ===== */
#terminal { position: absolute; left: 80px; top: 40px; z-index: 35; width: 800px; height: 450px; display: flex; flex-direction: column; padding: 16px;
  background: #020a04; border: 3px solid #1f6f3a; border-radius: 10px; color: #4ade80; font-size: 13px; box-shadow: 0 0 40px #0f04; }
#terminal::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 8px; background: repeating-linear-gradient(#0000 0 2px, #0002 2px 4px); }
#term-out { flex: 1; overflow: auto; white-space: pre-wrap; line-height: 1.35; }
#term-out .echo { color: #d1fae5; }
#term-out .bad { color: #fca5a5; }
#term-line { display: flex; gap: 8px; margin-top: 6px; }
#term-input { flex: 1; border: none; outline: none; background: none; color: #4ade80; font: inherit; caret-color: #4ade80; }
#term-hint { margin-top: 6px; font-size: 11px; color: #86efac; }

/* ===== Overlays: dark backgrounds so every line of text keeps strong contrast ===== */
#flash { position: absolute; inset: 0; z-index: 45; background: #fff; opacity: 0; pointer-events: none; }
#flash.on { animation: flash 1.2s ease-out forwards; }
@keyframes flash { 0% { opacity: 0; } 10% { opacity: 1; } 60% { opacity: 1; background: #fde68a; } 100% { opacity: 1; background: #fb923c; } }
.overlay { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px 60px; text-align: center; background: #0d0a16; }
.overlay h1 { font: bold 54px/1 Impact, "Arial Black", sans-serif; letter-spacing: 3px; color: #fff; text-shadow: 0 4px 0 #7f1d1d; }
.overlay h2 { font: bold 24px/1.2 Impact, "Arial Black", sans-serif; letter-spacing: 1px; color: #fcd34d; }
.overlay p { max-width: 720px; font-size: 14px; line-height: 1.5; color: #f5f5f4; }
.overlay .cta { margin-top: 10px; padding: 6px 14px; border: 2px solid currentColor; border-radius: 6px; color: #fcd34d; font-weight: bold;
  animation: pulse 1.2s ease-in-out infinite alternate; }
.overlay .small { font-size: 12px; color: #d6d3d1; }
.overlay button { padding: 6px 12px; border: 2px solid #fcd34d; border-radius: 6px; background: #111; color: #fef3c7; font: inherit; cursor: pointer; }
.overlay button:hover { background: #fcd34d; color: #111; }
#overlay-title { gap: 6px; padding: 14px 60px; background: radial-gradient(#1f1533, #0a0710); }
.title-art { position: relative; width: 160px; height: 168px; }
.title-art .char { left: 50%; bottom: 0; transform: scale(1.05); transform-origin: 50% 100%; }
/* On the title the bubble sits beside the head: above it, it would leave the screen. */
.title-art .bubble { bottom: 96px; left: 96px; transform: none; animation: none; font-size: 13px; }
.title-art .bubble::after { left: -7px; bottom: 8px; margin-left: 0; border: 6px solid transparent; border-right-color: #111; border-left: none; }
.controls { display: grid; grid-template-columns: auto auto; gap: 2px 16px; font-size: 12px; color: #e7e5e4; text-align: left; }
.controls b { color: #fcd34d; }
.lang-picker { position: absolute; top: 16px; right: 18px; display: flex; gap: 6px; }
.lang-picker button.active { background: #fcd34d; color: #111; }
#overlay-death { background: radial-gradient(circle at 50% 28%, #9a3412, #3b0d05 55%, #120403 85%); }
#overlay-death h1 { text-shadow: 0 4px 0 #450a0a; }
#overlay-death .new { color: #fef08a; font-weight: bold; }
#overlay-death .small { color: #fed7aa; }
#overlay-death .cta { color: #fff7ed; }
.mushroom { position: relative; width: 200px; height: 150px; animation: rise 1.4s ease-out; }
.mushroom i { position: absolute; display: block; }
.mushroom .cap { left: 20px; top: 0; width: 160px; height: 80px; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff7ae, #f97316 50%, #7c2d12); }
.mushroom .stem { left: 78px; top: 66px; width: 44px; height: 84px; background: linear-gradient(90deg, #9a3412, #fdba74 50%, #9a3412); border-radius: 40% 40% 10% 10%; }
.mushroom .ring { left: 50px; top: 92px; width: 100px; height: 18px; border-radius: 50%; background: #fdba74aa; }
@keyframes rise { from { transform: translateY(60px) scale(.3); opacity: 0; } }
#overlay-ending { background: radial-gradient(circle at 50% 20%, #166534, #052e16 55%, #020d07 90%); }
#overlay-ending h1 { text-shadow: 0 4px 0 #14532d; }
#overlay-ending h2 { color: #fde047; }
#overlay-ending .script { display: flex; flex-direction: column; gap: 4px; padding: 10px 16px; border-radius: 6px; background: #0008; font-size: 14px; color: #f0fdf4; }
#overlay-ending .small { color: #bbf7d0; }
#overlay-ending .cta { color: #fde047; }

/* ===== Notebook: every element is a multiple of one 28px line so text sits on the ruling ===== */
#overlay-notebook { background: #000a; }
.notebook { --line: 28px; width: 880px; max-height: calc(var(--line) * 18); overflow: auto; padding: var(--line) 28px var(--line) 24px;
  text-align: left; border-left: 30px solid #b91c1c; border-radius: 4px; color: #1f2937; box-shadow: 0 10px 30px #000a;
  background-color: #fefce8;
  background-image: repeating-linear-gradient(transparent 0 calc(var(--line) - 1px), #93c5fd calc(var(--line) - 1px) var(--line));
  background-attachment: local; background-position: 0 -6px;
  font: 15px/var(--line) "Comic Sans MS", "Chalkboard SE", cursive; }
.notebook * { margin: 0; }
.notebook h1 { padding-top: var(--line); font: bold 24px/var(--line) "Comic Sans MS", "Chalkboard SE", cursive; color: #1e3a8a; text-shadow: none; letter-spacing: 0; }
.notebook h2 { font: bold 16px/var(--line) "Comic Sans MS", "Chalkboard SE", cursive; color: #b91c1c; text-shadow: none; letter-spacing: 0; }
.notebook h2 + ul + h2 { margin-top: var(--line); }
.notebook p, .notebook li { max-width: none; font: inherit; color: #1f2937; }
.notebook ul { list-style: none; }
.notebook li.unknown { color: #6b7280; }
.notebook .cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 24px; margin-top: var(--line); }
.notebook .cta { margin-top: var(--line); padding: 0; border: none; color: #1e3a8a; animation: none; }
.notebook button { padding: 0 8px; line-height: 20px; vertical-align: middle; font-size: 12px; }

/* Inside the pixel scene the shirt text is noise; keep it only on crisp portraits and the title */
.alan .band::after { content: none; }

/* ===== Pixel UI theme =====
 * Everything shares one look: pixel fonts (bundled, OFL), aliased text, square boxes with hard drop shadows,
 * and the sprite filter on portraits and title art. */
@font-face { font-family: "VT323"; src: url("../assets/fonts/vt323-latin.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Press Start 2P"; src: url("../assets/fonts/press-start-2p-latin.woff2") format("woff2"); font-display: block; }
#stage { --px-text: "VT323", ui-monospace, monospace; --px-title: "Press Start 2P", "VT323", monospace; }
#stage, #stage * { font-family: var(--px-text) !important; -webkit-font-smoothing: none; -moz-osx-font-smoothing: unset; }
#stage #clock, #stage .overlay h1, #stage .overlay h2, #stage #banner, #stage #dlg-name, #stage .notebook h1, #stage .notebook h2,
#stage .room-sign b, #stage .controls b { font-family: var(--px-title) !important; }

/* Square boxes, hard shadows */
#stage #dialog, #stage #dlg-portrait, #stage .opt, #stage #clock, #stage #loopinfo, #stage .item, #stage #prompt, #stage #pa,
#stage .toast, #stage .room-sign, #stage .bubble, #stage #terminal, #stage .overlay button, #stage .overlay .cta, #stage .notebook,
#stage #overlay-ending .script, #stage #banner small { border-radius: 0; }
#stage #dialog { box-shadow: 6px 6px 0 #000; }
#stage #clock, #stage .item, #stage #prompt, #stage #pa, #stage .toast, #stage .overlay .cta, #stage .overlay button { box-shadow: 4px 4px 0 #000; }
#stage .bubble { border-width: 3px; box-shadow: 3px 3px 0 #0008; }
#stage .bubble::after { border-top-color: #111; }

/* Sizes tuned for VT323 (it renders smaller than a regular monospace font) */
#stage #clock { font-size: 24px; padding: 8px 12px; }
#stage #loopinfo, #stage .item, #stage .toast { font-size: 17px; }
#stage #loopinfo { top: 60px; }
#stage #pa { font-size: 17px; line-height: 1.15; }
#stage #prompt { font-size: 19px; font-weight: normal; }
#stage #keys-hint { font-size: 16px; }
#stage .room-sign { font-size: 16px; font-weight: normal; }
#stage .room-sign small { font-size: 15px; }
#stage .bubble { font-size: 17px; font-weight: normal; line-height: 1; padding: 5px 9px; }
#stage #logtext { font-size: 15px; line-height: 1.1; }
#stage #banner { font-size: 40px; letter-spacing: 2px; line-height: 1.2; }
#stage #banner small { font-size: 20px; }
#stage #dlg-name { font-size: 12px; margin-bottom: 10px; font-weight: normal; }
#stage #dlg-text { font-size: 21px; line-height: 1.15; }
#stage .opt { font-size: 19px; padding: 2px 8px; }
#stage #dlg-hint { font-size: 16px; }
#stage #terminal { font-size: 19px; }
#stage #term-out { line-height: 1.1; }
#stage #term-hint { font-size: 15px; }
#stage .overlay h1 { font-size: 34px; letter-spacing: 1px; line-height: 1.3; }
#stage .overlay h2 { font-size: 15px; letter-spacing: 0; line-height: 1.5; }
#stage .overlay p { font-size: 20px; line-height: 1.2; }
#stage .overlay .small { font-size: 17px; }
#stage .overlay .cta { font-size: 19px; font-weight: normal; }
#stage .overlay button { font-size: 18px; }
#stage #overlay-ending .script { font-size: 20px; }
#stage .controls { font-size: 18px; gap: 0 18px; }
#stage .controls b { font-size: 10px; line-height: 18px; font-weight: normal; }

/* Notebook keeps its 28px ruling with the pixel font */
#stage .notebook { font-size: 21px; }
#stage .notebook h1 { font-size: 16px; font-weight: normal; }
#stage .notebook h2 { font-size: 11px; font-weight: normal; }
#stage .notebook button { font-size: 17px; }

/* Standalone sprites get the same pixel treatment as the scene */
#dlg-portrait .rig, #dlg-portrait .ai, .title-art .rig, .mushroom { filter: url(#pixelate-sprite); }
#stage .notebook h1, #stage .notebook h2, #stage .notebook p, #stage .notebook li { line-height: var(--line); }
#stage .notebook h2 { white-space: nowrap; }

/* ===== Scenery detail (T1) ===== */
.diploma { top: 120px; width: 112px; height: 82px; background: #f4ecd2; border: 6px solid #b8933f; }
.employee { top: 100px; width: 70px; height: 70px; background: #e7e5e4; border: 5px solid #6b4429; }
.employee b { left: 0; right: 0; top: 8px; text-align: center; font-size: 34px; line-height: 1; }
.desk .postit { left: 120px; bottom: 98px; width: 14px; height: 14px; background: #fde047; transform: rotate(8deg); }
.desk .fishbox { left: 8px; bottom: 60px; font-size: 26px; line-height: 1; }
.desk .lunchbag { left: 44px; bottom: 62px; width: 26px; height: 22px; background: #c49a6c; }
.paper { top: 152px; width: 104px; height: 104px; background: #fafaf9; box-shadow: 4px 4px 0 #0002; transform: rotate(-2deg); }
.whiteboard { height: 120px; }
.whiteboard .chart { height: 24px; bottom: 8px; left: 96px; right: 10px; }
.fridge .magnet { width: 40px; height: 22px; left: 8px; }
.microwave .glass b { left: 4px; top: 2px; width: auto; height: auto; background: none; font-size: 20px; line-height: 1; border-radius: 0; }

/* Crisp scenery labels: pixel font, no smoothing, readable at a glance */
.wl { text-align: center; line-height: 1; font-size: 15px; color: #1c1917; white-space: nowrap; }
.wl em { display: block; margin-top: 4px; color: #ef4444; font-style: normal; }
.diploma-text { color: #5b4a1f; font-size: 14px; }
.tag { padding: 3px 6px; background: #111; color: #facc15; font-size: 14px; border: 2px solid #facc15; }
.plate { color: #2a1b13; font-size: 13px; }
.poster-text { color: #fde047; font-size: 15px; line-height: 1.05; }
.employee-text { color: #f5f5f4; font-size: 14px; background: #000a; padding: 2px 0; }
.board-text { text-align: left; color: #1d4ed8; font-size: 15px; line-height: 1.05; }
.board-text b { color: #b91c1c; font-weight: normal; }
.magnet-text { color: #fff; font-size: 12px; transform: rotate(-6deg); }
.coffee-text { color: #4ade80; font-size: 14px; }
.red-note { color: #b91c1c; font-size: 15px; }
.paper-text { color: #44403c; font-size: 14px; line-height: 1.05; transform: rotate(-2deg); }
.micro-timer { color: #ef4444; font-size: 15px; background: #111; }
.micro-timer:empty, .coffee-text:empty { display: none; }
.rack-tag { padding: 2px 5px; background: #e5e7eb; color: #111; font-size: 13px; }
.doom-label { color: #ff4d4d; font-size: 20px; letter-spacing: 1px; }
.roadmap-title { color: #111827; font-size: 16px; }
.chair-tag { color: #e5e7eb; font-size: 13px; }
.sticky-text { color: #1c1917; font-size: 14px; }

/* ===== Effects (T2, first part): steam and fish stink ===== */
.steam, .stink { bottom: 254px; width: 40px; height: 60px; pointer-events: none; }
.stink { bottom: 210px; }
.steam i, .stink i { position: absolute; bottom: 0; width: 8px; height: 22px; border-radius: 50%; opacity: 0; animation: rise-wisp 2.4s ease-out infinite; }
.steam i { background: #e5e7eb; }
.stink i { background: #84cc16; width: 6px; border-radius: 0; }
.steam i:nth-child(1), .stink i:nth-child(1) { left: 4px; }
.steam i:nth-child(2), .stink i:nth-child(2) { left: 16px; animation-delay: .8s; }
.steam i:nth-child(3), .stink i:nth-child(3) { left: 28px; animation-delay: 1.6s; }
@keyframes rise-wisp { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: .8; } 60% { transform: translate(5px, -30px); } 100% { transform: translate(-4px, -56px); opacity: 0; } }
.cal-day { color: #1c1917; font-size: 30px; }

/* ===== Effects (T2) ===== */
.cloud { left: 0; width: 120px; height: 26px; background: #f5f7fa; box-shadow: 20px -14px 0 -2px #f5f7fa, 56px -8px 0 0 #f5f7fa;
  animation: drift var(--d) linear var(--o) infinite; }
.cloud.small { width: 70px; height: 18px; box-shadow: 14px -10px 0 -2px #f5f7fa; }
.bird { left: 0; width: 14px; height: 6px; border-top: 3px solid #1f2937; border-radius: 50% 50% 0 0;
  animation: drift var(--d) linear var(--o) infinite, flap .35s steps(2) infinite; }
@keyframes drift { from { transform: translateX(-160px); } to { transform: translateX(960px); } }
@keyframes flap { 50% { height: 2px; } }
.flicker { left: 0; top: 0; width: 100%; height: 440px; background: #000; opacity: 0; animation: flicker 7s steps(1) infinite; pointer-events: none; }
@keyframes flicker { 0%, 91%, 93%, 95%, 100% { opacity: 0; } 92%, 94% { opacity: .35; } }
.mainframe .deye { translate: var(--look, 0px) 0; transition: translate .25s steps(3); }
.debris { position: absolute; left: 150px; bottom: 210px; width: 9px; height: 9px; z-index: 9;
  animation: debris 1.4s cubic-bezier(.2, .7, .4, 1) forwards; }
@keyframes debris { 0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  60% { transform: translate(calc(var(--dx) * .8), var(--dy)) rotate(var(--r)); opacity: 1; }
  100% { transform: translate(var(--dx), 110px) rotate(var(--r)); opacity: 0; } }
.dust { position: absolute; bottom: 98px; width: 10px; height: 6px; margin-left: -5px; background: #d6d3d1; opacity: .7;
  animation: dust .5s ease-out forwards; }
@keyframes dust { to { transform: translateY(-10px) scale(1.8); opacity: 0; } }
#alarm { position: absolute; inset: 0; z-index: 13; pointer-events: none; opacity: 0; background: #ff000033; }
#alarm.on { animation: alarm 1s ease-in-out infinite; }
@keyframes alarm { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
#scanlines { position: absolute; inset: 0; z-index: 14; pointer-events: none;
  background: repeating-linear-gradient(#0000 0 2px, #00000014 2px 3px); }
.robot-arm .led { animation-duration: .8s; }

/* ===== Natural walk cycle (T2b) =====
 * Thigh swings from the hip, the shin bends at the knee during the swing phase, the body dips at each footfall
 * (twice per stride) and the arms counter-swing. --stride sets each character's cadence. */
.char { --stride: .56s; }
.char.boss { --stride: .66s; }
.char.juan { --stride: .46s; }
.char.alan.caf { --stride: .38s; }
.char .leg { bottom: 27px; width: 13px; height: 22px; background: var(--pants); border-radius: 4px 4px 2px 2px; transform-origin: 50% 2px; }
.char .shin { left: 0; top: 19px; width: 13px; height: 22px; background: var(--pants); border-radius: 2px; transform-origin: 50% 2px; }
.char .shoe { left: -1px; bottom: -8px; width: 19px; height: 9px; background: var(--shoes, #0c0c0c); border-radius: 5px 8px 2px 2px; }
.char.walking { animation: step-bob calc(var(--stride) / 2) ease-in-out infinite; }
.char.walking .leg { animation: thigh var(--stride) ease-in-out infinite; }
.char.walking .leg .shin { animation: knee var(--stride) ease-in-out infinite; }
.char.walking .leg.r, .char.walking .leg.r .shin { animation-delay: calc(var(--stride) / -2); }
.char.walking .arm { animation: arm var(--stride) ease-in-out infinite; }
.char.walking .arm.l { animation-delay: calc(var(--stride) / -2); }
.char.walking .head { animation: head-lag calc(var(--stride) / 2) ease-in-out infinite; }
@keyframes thigh { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(20deg); } }
@keyframes knee { 0% { transform: rotate(0deg); } 40% { transform: rotate(6deg); } 62% { transform: rotate(48deg); } 82% { transform: rotate(18deg); } 100% { transform: rotate(0deg); } }
@keyframes arm { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(-16deg); } }
@keyframes step-bob { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-3px); } }
@keyframes head-lag { 0%, 100% { transform: translateY(0); } 60% { transform: translateY(1px); } }
/* Idle: a slow breath so nobody looks frozen */
.char:not(.walking) .torso { animation: breathe 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.char:not(.walking) .head, .char:not(.walking) .phones { animation: breathe-head 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scaleY(1.03); } }
@keyframes breathe-head { 50% { transform: translateY(-1px); } }

/* ===== Share row on the death screen ===== */
#stage .share { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 6px; max-width: 760px; }
#stage .share-label { color: #fed7aa; font-size: 18px; margin-right: 4px; }
#stage .share button { padding: 4px 10px; font-size: 17px; }

/* The rooftop sign stands on two posts: outdoors there is no wall to hang it on */
.sign-post { bottom: 100px; width: 8px; height: 140px; background: #3f4652; box-shadow: inset -3px 0 0 #2b313b; }
#stage .toast { max-width: 380px; }