/* The Office: a management game about a real building. Every piece of interface is an object you'd find in it: enamel signs, a felt directory
   board, brass lift panels, ID badges, cork and manila. Chunky, high contrast, and it presses back when you press it. */
@font-face { font-family: "Lilita One"; src: url(/theoffice/assets/fonts/lilita-one-400.woff2?v=8d6cd0f29873) format('woff2'); font-weight: 400; font-display: swap; }
/* The 3D scene's painted signs ask for this family by name. It means the building's sign lettering now. */
@font-face { font-family: Fraunces; src: url(/theoffice/assets/fonts/lilita-one-400.woff2?v=8d6cd0f29873) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Barlow; src: url(/theoffice/assets/fonts/barlow-500.woff2?v=80e7dc5605dd) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Barlow; src: url(/theoffice/assets/fonts/barlow-700.woff2?v=98aa8b5c2582) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/theoffice/assets/fonts/barlow-condensed-600.woff2?v=5bc49d41f328) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/theoffice/assets/fonts/barlow-condensed-700.woff2?v=e3e520cb7468) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: "Patrick Hand"; src: url(/theoffice/assets/fonts/patrick-hand-400.woff2?v=42156e008dd5) format('woff2'); font-weight: 400; font-display: swap; }
:root {
  --display: "Lilita One", "Arial Black", sans-serif;
  --sans: Barlow, "Trebuchet MS", Verdana, sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --hand: "Patrick Hand", "Comic Sans MS", cursive;
  --mono: var(--cond);
  --serif: var(--display);
  --ink: #1c1712; --ink-2: #43392e; --ink-3: #5f5244;
  --paper: #fff7e3; --paper-2: #f6e8c8; --line: #d3bf94; --white: #fffdf6;
  --teal: #0b6e69; --teal-d: #074a47; --teal-l: #d5f1ea;
  --sun: #ffc425; --sun-d: #c28600;
  --tomato: #d93a24; --tomato-d: #8f2110;
  --leaf: #1f8f45; --sky: #1d6fc2;
  --brass: #d6ad52; --brass-l: #f4dd97; --brass-d: #80601c;
  --felt: #16120e;
  --glass-line: var(--line);
  --brand: #d9774a; --brand-2: #f4c95d; --ok: #1f8f45; --warn: #a86a00; --bad: #c22f1b;
  --r: 14px;
}
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #8c7a5c transparent; }
html, body { margin: 0; height: 100%; background: #16605c; color: var(--ink); font: 500 16px/1.42 var(--sans); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
body { overflow: hidden; position: fixed; inset: 0; }
body[data-page="admin"] { overflow: auto; position: static; height: auto; min-height: 100%; background: var(--paper-2); }
body[data-page="admin"] #scene { display: none; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#scene:active { cursor: grabbing; }
/* No WebGL, or a phone has taken the GPU away: a painted street, never a black screen. */
body.no-webgl, body.gl-lost, body[data-tower].gl-lost {
  background:
    linear-gradient(90deg, #c9a24a, #e0bb68 52%, #a9842f 52%, #bd9640) 58% 100% / 92px 56% no-repeat,
    linear-gradient(0deg, #2b2b2b 11%, #0b6e69 11%, #2aa198 62%, #8fdccb);
}
body.no-webgl #scene { display: none; }
body.gl-lost #scene { opacity: 0; }
body.gl-lost #labels { display: none; }
/* The curtain, up until the first finished picture. */
#boot { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--teal); transition: opacity .4s ease; }
#boot.gone { opacity: 0; pointer-events: none; }
.boot-mark { font: 400 clamp(44px, 8vw, 76px)/1 var(--display); color: var(--sun); display: flex; flex-direction: column; align-items: center; gap: 18px; text-shadow: 0 5px 0 var(--teal-d); }
.boot-bar { display: block; width: 160px; height: 12px; border-radius: 6px; background: var(--teal-d); overflow: hidden; position: relative; }
.boot-bar::after { content: ''; position: absolute; inset: 2px; width: 40%; background: var(--sun); border-radius: 4px; animation: boot-slide 1.1s ease-in-out infinite alternate; }
@keyframes boot-slide { from { transform: translateX(0); } to { transform: translateX(150%); } }
.boot-slow { position: absolute; bottom: calc(44px + env(safe-area-inset-bottom)); left: 0; right: 0; margin: 0; text-align: center; font-weight: 700; color: #fff; opacity: 0; animation: boot-late .6s ease 9s forwards; }
@keyframes boot-late { to { opacity: 1; } }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
body:not([data-page="floor"]) #labels { display: none; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
body[data-page="admin"] #ui { position: static; pointer-events: auto; }
#ui > * { pointer-events: auto; }
#ui .hero, #ui .hints { pointer-events: none; }
/* The lift doors: shut in a blink, open with a slide and a ding. */
#fade { position: fixed; inset: 0; pointer-events: none; z-index: 30; display: grid; place-items: center; overflow: hidden; visibility: hidden; transition: visibility 0s .62s; }
#fade.in { visibility: visible; transition: none; pointer-events: auto; }
#fade .door { position: absolute; top: 0; bottom: 0; width: 50.2%; background: linear-gradient(90deg, #79848a, #c7cfd2 22%, #eef2f2 44%, #b3bcc0 72%, #7f8a90); transition: transform .6s cubic-bezier(.65, 0, .25, 1); }
#fade .door.left { left: 0; transform: translateX(-101%); box-shadow: inset -4px 0 0 #444d52; }
#fade .door.right { right: 0; transform: translateX(101%); box-shadow: inset 4px 0 0 #444d52; }
#fade.in .door { transform: none; transition: transform .2s ease-in; }
#fade::after { content: attr(data-title); position: relative; z-index: 2; max-width: min(84vw, 680px); padding: 12px 22px; border-radius: 8px; background: var(--felt); color: #ffb52e; font: 700 clamp(22px, 3.6vw, 34px)/1.15 var(--cond); letter-spacing: .05em; text-transform: uppercase; text-align: center; box-shadow: 0 0 0 5px var(--brass), 0 8px 0 5px var(--brass-d); opacity: 0; }
#fade.in::after { opacity: 1; }
#fade:not([data-title])::after, #fade[data-title=""]::after { display: none; }
body.flying #ui { opacity: 0; transition: opacity .3s; }
.nojs { position: fixed; z-index: 100; left: 0; right: 0; bottom: 18%; margin: 0; padding: 24px; text-align: center; font-weight: 700; font-size: 18px; color: #fff; }
.ico { width: 20px; height: 20px; fill: currentColor; flex: none; display: block; }

button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
input, textarea, select { font: 500 16px/1.3 var(--sans); color: var(--ink); background: var(--white); border: 2px solid var(--ink-2); border-radius: 9px; padding: 10px 12px; width: 100%; box-shadow: inset 0 2px 0 rgba(28, 23, 18, .12); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input[type="color"] { padding: 3px; height: 40px; width: 74px; cursor: pointer; }
input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--teal); flex: none; box-shadow: none; }
input[type="range"] { padding: 0; accent-color: var(--teal); background: none; border: 0; box-shadow: none; }
a { color: var(--teal); font-weight: 700; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }

/* buttons: a lip you can press down */
.btn { --face: var(--white); --lip: #bda876; --text: var(--ink); position: relative; border: 0; background: var(--face); color: var(--text); padding: 9px 16px; border-radius: 10px; font: 700 16px/1.1 var(--sans); display: inline-flex; gap: 8px; align-items: center; justify-content: center; text-decoration: none; min-height: 44px; white-space: nowrap; box-shadow: 0 4px 0 var(--lip); margin-bottom: 4px; transition: transform .07s ease-out, box-shadow .07s ease-out, filter .12s; }
.btn:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 5px 0 var(--lip); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--lip); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary, .btn.resume { --face: var(--sun); --lip: var(--sun-d); --text: var(--ink); }
.btn.danger { --face: var(--tomato); --lip: var(--tomato-d); --text: #fff; }
.btn.ghost { --face: var(--white); --lip: #bda876; }
.btn.chrome { --face: var(--teal); --lip: var(--teal-d); --text: #fff; }
.btn.wide { width: 100%; }
.btn.small { min-height: 36px; padding: 5px 12px; font-size: 14.5px; }
.btn.grow, .grow { flex: 1; }
.icon-btn { background: var(--tomato); border: 0; color: #fff; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; box-shadow: 0 3px 0 var(--tomato-d); transition: transform .07s, box-shadow .07s; flex: none; }
.icon-btn:hover { filter: brightness(1.1); }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tomato-d); }
.mute-btn { width: 44px; height: 44px; border: 0; border-radius: 10px; display: grid; place-items: center; background: var(--felt); color: var(--sun); box-shadow: 0 4px 0 #000; transition: transform .07s, box-shadow .07s; }
.mute-btn[aria-pressed="true"] { color: #b9ad99; }
.mute-btn:hover { filter: brightness(1.5); }
.mute-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
.link { background: none; border: 0; padding: 0; color: var(--teal); font-weight: 700; text-align: left; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.link:hover { color: var(--tomato); }
.row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.row input { flex: 1; min-width: 120px; }
.row.spread { justify-content: space-between; flex-wrap: nowrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }

/* modal: a form on a clipboard, with a painted header */
.modal-back { position: fixed; inset: 0; background: rgba(7, 42, 40, .72); display: grid; place-items: center; padding: 18px; z-index: 40; animation: fadein .14s; }
@keyframes fadein { from { opacity: 0; } }
.modal { background: var(--paper); border-radius: 16px; width: min(460px, 100%); max-height: min(88vh, 860px); max-height: min(88dvh, 860px); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 9px 0 var(--teal-d), 0 30px 70px rgba(0, 0, 0, .5); animation: rise .2s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes rise { from { transform: translateY(26px) scale(.97); opacity: 0; } }
.modal.wide { width: min(820px, 100%); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px 12px 20px; background: var(--teal); color: #fff; flex: none; }
.modal-head h2 { font-size: 25px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-body { padding: 18px 22px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lede { margin: 0; color: var(--ink); line-height: 1.45; }
.step-kicker { margin: 0; font: 700 16px var(--cond); letter-spacing: .05em; text-transform: uppercase; color: var(--teal); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font: 700 16px var(--cond); letter-spacing: .02em; color: var(--ink); }
.form-error { margin: 0; color: var(--bad); font-weight: 700; }
.fineprint { margin: 0; color: var(--ink-3); font-size: 14px; word-break: break-word; }
.code-input { font: 700 19px var(--cond); text-transform: uppercase; letter-spacing: .05em; }
.recovery { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--felt); color: #ffb52e; }
.recovery code { flex: 1; font: 700 17px var(--cond); letter-spacing: .04em; word-break: break-all; user-select: all; }
.swatches, .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 34px; height: 34px; border-radius: 7px; border: 3px solid var(--white); background: var(--c); padding: 0; box-shadow: 0 0 0 1px var(--ink-3), 0 3px 0 rgba(28, 23, 18, .35); transition: transform .08s; }
.swatch:hover { transform: translateY(-2px); }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 3px var(--ink), 0 3px 0 3px rgba(28, 23, 18, .35); }
.chip { padding: 5px 12px; border-radius: 8px; border: 0; background: var(--white); color: var(--ink); font: 700 15px/1.1 var(--sans); min-height: 36px; box-shadow: 0 3px 0 #bda876; transition: transform .07s, box-shadow .07s; }
.chip:hover { background: #fff; transform: translateY(-1px); }
.chip:active { transform: translateY(2px); box-shadow: 0 1px 0 #bda876; }
.chip[aria-checked="true"] { background: var(--ink); color: var(--sun); box-shadow: 0 3px 0 #000; }
.char-builder { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
.char-stage { background: linear-gradient(#bfe6dc 0 70%, #94c9bc 70%); border-radius: 12px; border: 5px solid var(--white); box-shadow: 0 0 0 1px var(--line), 0 4px 0 #bda876; position: sticky; top: 0; }
.char-preview { display: block; width: 100%; height: 260px; }
.char-options { display: flex; flex-direction: column; gap: 11px; }
.sticky-foot { position: sticky; bottom: -24px; margin: 0 -22px -24px; padding: 12px 22px 18px; background: var(--paper); border-top: 2px solid var(--line); z-index: 2; }
.opt-row { display: flex; flex-direction: column; gap: 5px; }
.opt-label { font: 700 15.5px var(--cond); letter-spacing: .02em; color: var(--ink); }
.toggle { display: flex; gap: 9px; align-items: center; cursor: pointer; font-weight: 700; }
.toggle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.custom-pane { padding-top: 14px; }
.staff-pick { margin-bottom: 14px; }
.signout { margin-top: 16px; color: var(--ink-2); }
.site-frame { width: 100%; height: min(62vh, 560px); height: min(62dvh, 560px); border: 0; border-radius: 8px; background: #fff; display: block; box-shadow: 0 0 0 3px var(--ink-2); }
.frame-foot { margin: 10px 0 0; font-size: 15px; }
.doc { line-height: 1.5; }
.doc :is(h1, h2, h3) { margin: .7em 0 .3em; }
.code { background: var(--felt); color: #ffe7b0; padding: 14px; border-radius: 10px; overflow: auto; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; max-height: 60vh; margin: 0; }
.empty { color: var(--ink); padding: 18px 16px; margin: 0; font-size: 16px; font-weight: 700; list-style: none; }
.notfound { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 28px; width: min(420px, 90vw); background: var(--paper); border-radius: 16px; box-shadow: 0 9px 0 var(--teal-d); display: flex; flex-direction: column; gap: 12px; }
.notfound h1 { font-size: 36px; color: var(--tomato); } .notfound p { margin: 0; }

#toasts { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 60; pointer-events: none; width: 90vw; }
.toast { background: var(--ink); color: #fff; font-weight: 700; padding: 10px 16px; border-radius: 10px; box-shadow: 0 4px 0 #000; animation: rise .18s; transition: opacity .3s; max-width: 100%; text-align: center; }
.toast.bad { background: var(--tomato); box-shadow: 0 4px 0 var(--tomato-d); }
.toast.gone { opacity: 0; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.bars i { flex: 1; min-width: 3px; background: var(--teal); border-radius: 3px 3px 0 0; }
.meter { height: 8px; background: rgba(127, 127, 127, .18); border-radius: 4px; overflow: hidden; margin: -2px 0 8px; }
.meter i { display: block; height: 100%; background: var(--teal); border-radius: 4px; }
.kv { display: flex; justify-content: space-between; gap: 12px; margin: 3px 0; overflow-wrap: anywhere; }

/* admin: the building manager's back office */
.admin { max-width: 1120px; margin: 0 auto; padding: 28px 22px 60px; }
.admin-login { max-width: 380px; margin: 14vh auto 0; padding: 26px; display: flex; flex-direction: column; gap: 14px; background: var(--paper); border-radius: 16px; box-shadow: 0 9px 0 var(--teal-d); }
.admin-login h1 { font-size: 32px; }
.admin-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.admin-head h1 { font-size: 38px; color: var(--teal); }
.admin h2 { font-size: 24px; margin: 28px 0 10px; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.metric { padding: 13px 15px; border-radius: 10px; background: var(--white); box-shadow: 0 3px 0 var(--line); display: flex; flex-direction: column; gap: 3px; }
.metric small { color: var(--ink-2); font-size: 14px; } .metric b { font: 400 21px var(--display); }
.budget-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 12px; }
.budget-card { padding: 13px 15px; border-radius: 10px; background: var(--white); box-shadow: 0 3px 0 var(--line); display: flex; flex-direction: column; gap: 6px; }
.budget-card p { margin: 0; font: 700 15px var(--cond); }
.budget-card small { color: var(--ink-2); font-size: 14px; }
.budget-track { display: block; height: 8px; border-radius: 4px; background: var(--paper-2); overflow: hidden; }
.budget-track i { display: block; height: 100%; background: var(--ok); }
.budget-flag { padding: 2px 8px; border-radius: 5px; font: 700 13px var(--cond); background: var(--paper-2); color: var(--warn); }
.budget-card.flag-80 .budget-track i, .budget-card.flag-50 .budget-track i { background: var(--warn); }
.budget-card.flag-100 .budget-track i { background: var(--bad); } .budget-card.flag-100 .budget-flag { color: var(--bad); }
.table-wrap { overflow-x: auto; border-radius: 10px; background: var(--white); box-shadow: 0 3px 0 var(--line); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 760px; }
.admin-table th { text-align: left; font: 700 15px var(--cond); color: #fff; background: var(--teal); padding: 10px 12px; }
.admin-table td { padding: 10px 12px; border-bottom: 2px solid var(--paper-2); }
.admin-table .num { font-family: var(--cond); font-weight: 700; }
.acts { display: flex; gap: 5px; justify-content: flex-end; }

@media (max-width: 760px) {
  .modal-back { padding: 0 0 var(--kb, 0px); place-items: end stretch; }
  .modal, .modal.wide { width: 100%; max-height: 92vh; max-height: calc(92dvh - var(--kb, 0px)); border-radius: 16px 16px 0 0; box-shadow: 0 -6px 0 var(--teal-d); }
  .modal-body { padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); }
  .sticky-foot { margin: 0 -16px -20px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); bottom: calc(-20px - env(safe-area-inset-bottom)); }
  .char-builder { grid-template-columns: 1fr; }
  .char-stage { position: static; }
  .char-preview { height: 190px; }
  #toasts { bottom: auto; top: calc(max(12px, env(safe-area-inset-top)) + 58px); }
  body[data-page='floor'] #toasts { top: auto; bottom: calc(54% - 58px); }
  .toast { font-size: 15px; padding: 8px 13px; }
  .admin { padding: 18px 14px 40px; }
  .admin-head h1 { font-size: 30px; }
}
/* Fingers: about 44 points for anything you can press. */
@media (pointer: coarse) {
  .btn { min-height: 46px; }
  .btn.small { min-height: 40px; padding: 6px 13px; }
  .icon-btn { width: 44px; height: 44px; }
  .chip { min-height: 40px; padding: 6px 13px; }
  .swatch { width: 38px; height: 38px; }
  .swatches, .chips { gap: 9px; }
  .toggle { min-height: 40px; }
  input[type="color"] { height: 44px; }
  .link { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .boot-bar::after { animation: none; width: 100%; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; transition-duration: .01s !important; } }