:root{
--wall:#8f9296; --wall-dark:#75787c; --wall-line:#7c7f83;
--floor:#5c6570; --floor-dark:#4a525c;
--desk:#d3c4a0; --desk-dark:#b5a67e; --desk-edge:#8c7d5c; --desk-hi:#e0d3b0;
--monitor:#26251f; --monitor-glow:#8fe0a0; --monitor-bez:#3a3830;
/* Bob's keyboard and mouse. A variable rather than a literal so an office
can issue him different hardware. (The withdrawn Adequate office was
the one that did, with dark grey peripherals for its pale grey desk.) */
--peripheral:#d8d3c4; --peripheral-key:#b7b19c;
--skin:#e3b98d; --shirt:#e9edf1; --tie:#8a2b2b;
--hair:#4a3826; --ink:#201d16;
--danger:#c23b3b; --warn:#d9a53d; --good:#5c9a5f; --gold:#e0b23a;
--panel:#23241d; --panel-light:#33352a; --text:#f4efe0; --text-dim:#b9b39a;
--shade: rgba(20,17,10,0.28);
--hi: rgba(255,255,255,0.16);
}
*{box-sizing:border-box;}
/* Stops a rapid double-tap on any button from being read as the browser's
zoom gesture on mobile. No effect on desktop -- this is purely a touch
concern, not a layout one. */
button, .iconbtn, .tabbtn, .supportbtn{ touch-action:manipulation; }
/* The same double-tap protection for the whole page, since a stray tap on the
desk or the wall zoomed the game just as readily as one on a button.
Draggables keep their own touch-action:none and are unaffected. */
html{ touch-action:manipulation; -webkit-text-size-adjust:100%; }
html,body{height:100%;}
/* A pull down at the top of the page reloads it on Android's Chrome, which
is a shift lost to a scroll. On touch screens the page never bounces or
refreshes itself. Not on a computer, where the same rule would switch off
a Mac trackpad's two-finger swipe back and forward. */
@media (pointer: coarse){ html, body{ overscroll-behavior:none; } }
body{
margin:0; min-height:100%; background:#111008;
background-image: radial-gradient(ellipse at 50% 0%, #1c1a12 0%, #0d0c08 70%);
display:flex; align-items:center; justify-content:center;
font-family:'VT323','Courier New',monospace; color:var(--text); padding:10px;
}
button{ font-family:inherit; }
/* Visible keyboard focus. Nothing in the game showed one before this --
several spots below explicitly stripped it -- so a keyboard player had no
way to see where they were on the page. */
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.cabinet{
/* Grows to fill more of the browser viewport on large screens instead of
sitting in a small fixed box, capped by whichever of these binds first:
an absolute ceiling (1000px), 92% of viewport width, or a height-derived
ceiling that keeps .cabinet's total height within 88% of viewport height.
.cabinet's height = .stage's height (3/4 of .cabinet's inner width, via
aspect-ratio) + ~193px of titlebar/status-row/coffee-button/padding/
border chrome above and below the stage (measured directly, not a
theoretical estimate) + 32px of body padding. On a short window this
naturally settles back near the original 640px rather than overflowing.
dev.html overrides this below to also clear its fixed dev bar. */
/* The height-derived term above is what keeps a tall game inside a short
window, and on a desktop that is exactly right. On a phone held sideways
it is a disaster: 390px of height puts this at about 186px wide, a
column narrower than the coffee button. It therefore only applies where
there is real height to work with, and never shrinks below 320px. Below
that height the width is driven by the viewport alone and the page is
allowed to scroll (see the short-screen rule further down). */
width:100%; max-width:92vw; background:var(--panel);
border:4px solid var(--ink); box-shadow:0 0 0 2px #000, 8px 8px 0 rgba(0,0,0,0.5);
padding:10px; position:relative;
/* The ruler everything inside is measured against. The office is drawn in
percentages of this box and always has been, so it stretches with the
window; the pop-ups on top of it were drawn in fixed pixels and did not,
which meant a card covering 70% of the office in one window covered 44%
of it in another. Naming the cabinet a container lets those pop-ups be
sized in cqw -- 1cqw is 1% of this width -- so what a card covers stays
constant and a placement decided once holds at every size.
inline-size, not size: the cabinet's width comes from the rule above,
never from its contents, but its HEIGHT does come from its contents and
full size containment would collapse it.
The same technique is already shipping one layer down -- see
.desktopScreen, which has been scaling SYNERGY's icons this way for
weeks. */
container-type:inline-size; container-name:cabinet;
/* The unit every pop-up is measured in. 2.217cqw is 17px in the owner's own
~864px-wide window -- the size all of this was laid out against -- so
nothing moves for him; bigger windows scale up from it and smaller ones
down, which is the whole point of the exercise.
A custom property rather than nested em on purpose. em compounds: a 12px
label inside a 13px chip inside a 17px panel needs three divisions to get
right and breaks the moment anything is re-nested. This inherits
unchanged, so every rule states its own ratio against one shared base and
none of them can interfere with each other.
Calibrated against the cabinet's CONTENT box, since container units
exclude its border and padding -- 28px of the 795 it measures on screen.
The floor is not decoration. Pure proportion puts body copy at 7px on a
small phone, and shrinking below readable was never the point: on a small
screen the answer is layout, not smaller type. */
--ui: clamp(13px, 2.217cqw, 26px);
/* The unit the game's own chrome is measured in -- the title bar, its
buttons, the energy row, the status line and GET COFFEE. Until 22
September 2026 all of that was fixed pixels, sized for the ~767px-wide
cabinet everything was designed in, and it was fine because the cabinet
was capped at 1000px. The cap is gone (see the max-width rule below),
and on a big monitor a room twice the size over a bar that had not moved
read as a toy with a tiny toolbar. The owner asked for the bar to grow
with the game. So: 17px at the design width, growing in proportion above
it, and NEVER below it -- a phone or a small window keeps exactly the
sizes it had, and every phone rule that sets its own pixels still wins.
--k is the same ratio as a plain number, for the icon drawings, whose
sizes are set one by one in the markup and are scaled rather than
re-sized. tan(atan2(a, b)) is how CSS divides two lengths into a number. */
--bar: max(17px, 2.217cqw);
--k: max(1, tan(atan2(100cqw, 766.8px)));
}
/* Fill the window. The game used to stop at 88% of the window's height and
at 1000px wide, and sat like a postcard in the middle of a dark page; on
22 September 2026 the owner asked for the wasted band above and below it
to go, with the game's shape and everything inside it untouched. Now the
cabinet grows until its stroke is 10px (the body padding) from the top and
bottom edges, and the width follows from the height.
Two candidates, and the smaller wins, because the cabinet's height is a
bent line in its width: below the design width (766.8px of content) the
chrome is a fixed 218.6px tall and the office is 3/4 of the content
width; above it the chrome grows with the width too (see --bar), and the
whole cabinet measures 0.9976 x content + 28px. Both lines were measured
in a browser, not worked out from the stylesheet. Each formula is its
line solved for width, with the 20px of body padding taken off the height
first and a pixel of slack. The wrong one of the two always gives the
LARGER answer, so min() picks the right one at every window height
without needing to know which side of the bend it is on. */
@media (min-height: 600px){
.cabinet{ max-width:min(92vw, max(320px, calc((100vh - 240px)/0.75 + 28px)), max(320px, calc((100vh - 49px)/0.998 + 28px))); }
}
/* A short window -- a phone held sideways, mostly -- gets a game bigger than
it can show at once, so it has to be scrollable rather than clipped and
vertically centred on nothing. */
@media (max-height: 599px){
html, body{ height:auto; }
body{ align-items:flex-start; padding:8px; }
}
.titlebar{ display:flex; align-items:center; justify-content:space-between; padding:calc(var(--bar) * 0.1176) calc(var(--bar) * 0.3529) calc(var(--bar) * 0.5882); }
/* A slow press on anything draggable otherwise pops iOS's text-selection
magnifier and a copy/paste bubble over the game. */
.decorItem, .toyItem, .papers, .clockwrap, .desktopIcon, .iconbtn, .stage, .solBoard,
.monitor, .titlebar h1, .startTitle{
-webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
/* And a long press on a toy's picture opens iOS's Save Image menu. */
.stage img, .stage svg{ -webkit-touch-callout:none; }
.titlebar h1{ font-family:'Press Start 2P',monospace; font-size:calc(var(--bar) * 0.7647); margin:0; color:var(--gold); letter-spacing:calc(var(--bar) * 0.0588); text-shadow:calc(var(--bar) * 0.1176) calc(var(--bar) * 0.1176) 0 var(--ink); }
.titlebar .btns{ display:flex; gap:calc(var(--bar) * 0.3529); position:relative; }
/* Held open from the sound button. Width is the span the panel is meant to
cover -- the stats button's left edge to the sound button's right edge --
which at 32px buttons and 6px gaps is three buttons plus two gaps. Right
aligned to .btns so it stays put if buttons are ever added on the left.
z-index because .stage is positioned and comes later in the document, so
without it the scene paints over the panel; this is HUD chrome sitting
above the stage, not part of the scene's own paint order. */
/* Hidden with opacity+visibility rather than display, so it can fade rather
than blink out when it times out or is dismissed. The delayed visibility
transition is what keeps it hit-testable and painted for the length of the
fade; on the way in, .show overrides that so it appears promptly. */
/* On the computer's bar the panel hangs UPWARDS from the button, because the
bar is at the bottom of the glass and there is nothing below it. Right
aligned to the bar's own right edge, which is where the sound button is. */
.volumePanel.volumeOnDesk{ top:auto; bottom:calc(100% + 6px); right:calc(var(--ui) * 0.4); }
.volumePanel{
position:absolute; top:calc(100% + 5px); right:0; z-index:30;
width:calc(var(--bar) * 6.353); display:flex; flex-direction:column; gap:5px;
background:var(--panel-light); border:2px solid var(--ink);
box-shadow:2px 2px 0 var(--ink); padding:6px 7px;
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity 350ms ease, visibility 0s linear 350ms;
}
.volumePanel.show{
opacity:1; visibility:visible; pointer-events:auto;
transition:opacity 120ms ease;
}
.volRow{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.volIcon{ font-size:11px; line-height:1; color:var(--text); width:10px; text-align:center; flex:none; }
.volumePanel input[type=range]{
-webkit-appearance:none; appearance:none; flex:1; min-width:0;
height:4px; background:var(--ink); outline:none; cursor:pointer;
}
.volumePanel input[type=range]:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.volumePanel input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none; width:8px; height:14px;
background:var(--gold); border:1.5px solid var(--ink); cursor:pointer;
}
.volumePanel input[type=range]::-moz-range-thumb{
width:8px; height:14px; border-radius:0;
background:var(--gold); border:1.5px solid var(--ink); cursor:pointer;
}
.iconbtn{ background:var(--panel-light); border:2px solid var(--ink); color:var(--text); width:32px; height:32px; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:2px 2px 0 var(--ink); }
.iconbtn svg{ flex-shrink:0; }
/* The game's own bar grows with the game (--bar); the buttons on windows and
panels do not, since those are sized with their panels (--ui). The
drawings keep the sizes the markup gives them and are scaled to match. */
.titlebar .iconbtn, .soundStartBtn{ border-width:calc(var(--bar) * 0.1176); width:calc(var(--bar) * 1.882); height:calc(var(--bar) * 1.882); font-size:calc(var(--bar) * 0.9412); box-shadow:calc(var(--bar) * 0.1176) calc(var(--bar) * 0.1176) 0 var(--ink); }
.titlebar .iconbtn svg, .soundStartBtn svg{ transform:scale(var(--k)); }
#terminalBtn{ font-family:'Space Mono',monospace; font-weight:700; font-size:14px; color:#8fef6a; }
/* The mug is drawn now, not an emoji, so it is sized like the other SVG
icons on this bar rather than by font-size. */
#supportBtn svg, .cupIcon{ width:24px; height:24px; flex:0 0 auto; }
.coffeebtn .cupIcon{ vertical-align:calc(var(--bar) * -0.3529); margin-right:calc(var(--bar) * 0.3529); width:calc(var(--bar) * 1.529); height:calc(var(--bar) * 1.529); }
.supportHead .cupIcon{ vertical-align:-5px; margin-right:4px; }
.iconbtn:active{ transform:translate(2px,2px); box-shadow:none; }
.titlebar .iconbtn:active, .soundStartBtn:active{ transform:translate(calc(var(--bar) * 0.1176), calc(var(--bar) * 0.1176)); }
/* ---- pinned programs -------------------------------------------------
Up to four favourites in the game's top bar. They sit in the same row as
the game's own buttons and are drawn the same way, because a pin IS a
button on that bar -- not a second thing living next to it.
The gold underline is the only difference, and it earns its place: it says
these ones are yours rather than Corporate's, and it is what tells you at a
glance where the game's buttons stop and your row begins.
display:contents so an empty container takes no room and no gap. Wrapping
the pins in a box of their own would put a hole in the bar on every
desktop that has none, which is most of them. */
/* No marking of any kind. A gold underline was tried and the owner took it
straight back off: a pinned program is a button on this bar like every
other button on this bar, and a badge saying "this one is different" is a
thing to explain rather than a thing that helps.
display:contents so an empty container takes no room and no gap. Wrapping
the pins in a box of their own would put a hole in the bar on every
desktop that has none, which is most of them. */
.topBarPins{ display:contents; }
.topBarPin svg{ width:22px; height:22px; }
.pinsDragging .topBarPin{ cursor:grabbing; }
/* Contacts: a permanent button, not a pin (see #contactsBtn in beta.html).
Drawn at a pin's size because it is SYNERGY's own icon, like theirs.
[hidden] needs saying: .iconbtn's display:flex would otherwise beat the
browser's own rule, and the button would show with the co-worker switch
off. */
#contactsBtn svg{ width:22px; height:22px; }
#contactsBtn[hidden]{ display:none; }
/* ---- phones ----------------------------------------------------------
430px, not the 620px Solitaire uses, because this is the width where the
top bar genuinely runs out of room: "CAFFEINATED BOB" at 13px plus six
32px buttons and their gaps needs about 429px, so below that the buttons
used to hang off the right-hand edge -- the computer, Support and sound were
entirely unreachable on an iPhone SE, and a Pixel 7 cleared it by nothing
at all. Worse, the overflow made the whole PAGE scroll sideways, so a
thumb-swipe meant for the office dragged the game off-centre and any
panel opened afterwards came up half off-screen.
No desktop window is ever this narrow, so none of this reaches one. */
@media (max-width: 430px){
.titlebar{ flex-wrap:wrap; justify-content:center; row-gap:8px; }
.titlebar h1{ width:100%; text-align:center; }
.titlebar .btns{ justify-content:center; }
/* 44px is the size Apple and Google both publish for a thumb. Solitaire's
controls were raised to it already; the top bar, the panel close buttons
and the Marketplace tabs were left behind at 32. The wrapped bar above
is what makes the room for it. */
.iconbtn{ width:44px; height:44px; font-size:20px; }
#supportBtn svg{ width:28px; height:28px; }
#terminalBtn{ font-size:18px; }
/* Still "three buttons plus two gaps", at the size those buttons now are. */
.volumePanel{ width:144px; }
/* The whole bar on ONE row at every phone width, pins included, with no
minimum size -- the owner's ruling of 13 September, matching his mockup
("Phone menu bar - shrinking icons mockup 9-13-26"). A stopgap before a
larger phone redesign, so it is kept simple.
The buttons share the row evenly and fill it, capped at 44px: with no
pins that is the size they have always been (about 43px at 390, 38px at
360, 34px at 320). Each pin is one more button in the same row, so every
button shrinks. The gap between them is 4px while buttons are 38px or
more, 3px while they are 32px or more, and 2px below that -- worked out
here from what the button would be at each gap, since CSS has no "if".
--pins is written by play/synergy-os.js (renderPins).
Sizes are rounded down to whole pixels so borders and drawings stay
crisp; each drawing is capped just inside its button so it stays
centred. The titlebar's side padding goes on phones for the few pixels
it gives back. Nothing here reaches a desktop window, which is never
this narrow. */
.titlebar{ padding-left:0; padding-right:0; }
.titlebar .btns{
/* Eight fixed buttons since the Camera joined the bar on 21 September
2026: menu, Contacts, the Employee File, the Marketplace, the computer,
the Camera, Support, sound. This number is the whole reason the row
fits -- get it wrong and the bar does not shrink to suit, it simply
runs off both ends, which is what the eighth button did for an hour
before this line caught up with it. Contacts is hidden until the
co-worker switch is on, so seven is the common case and eight is the
one that has to fit. */
--barN: calc(8 + var(--pins, 0));
--barW: 100cqw;
--barAt4: calc((var(--barW) - (var(--barN) - 1) * 4px) / var(--barN));
--barAt3: calc((var(--barW) - (var(--barN) - 1) * 3px) / var(--barN));
--barGap: calc(2px + clamp(0px, (var(--barAt3) - 31.99px) * 1000, 1px) + clamp(0px, (var(--barAt4) - 37.99px) * 1000, 1px));
--barBtn: min(44px, calc((var(--barW) - (var(--barN) - 1) * var(--barGap)) / var(--barN)));
flex-wrap:nowrap; gap:var(--barGap); max-width:100%;
}
.titlebar .iconbtn{
width:var(--barBtn); height:var(--barBtn);
width:round(down, var(--barBtn), 1px); height:round(down, var(--barBtn), 1px);
flex:0 0 auto; padding:0;
}
.titlebar .iconbtn svg{ max-width:calc(var(--barBtn) - 6px); max-height:calc(var(--barBtn) - 6px); }
#muteBtn{ font-size:min(20px, calc(var(--barBtn) * 0.5)); }
}
.stage{ position:relative; width:100%; aspect-ratio:4/3; background:var(--wall); border:3px solid var(--ink); overflow:hidden; }
.ceiling{ position:absolute; top:0; left:0; right:0; height:16%; background:#c2c4c1; background-image:repeating-linear-gradient(90deg, transparent 0 78px, rgba(0,0,0,0.08) 78px 80px), repeating-linear-gradient(0deg, transparent 0 28px, rgba(0,0,0,0.06) 28px 30px); border-bottom:3px solid #8c8f8c; }
.ceilingLight{ position:absolute; top:0; width:3%; height:15%; background:#f4f3ea; border:1.5px solid #a8a89c; }
.wallpanel{ position:absolute; top:16%; bottom:42%; left:0; right:0; background:repeating-linear-gradient(90deg, var(--wall) 0 58px, var(--wall-line) 58px 60px); }
.wallSide{ position:absolute; top:16%; bottom:42%; width:9%; background:#65686c; }
.wallSide.left{ left:0; }
.wallSide.right{ right:0; }
.neighborGlimpse{ position:absolute; top:16%; bottom:42%; width:3%; background:#54575b; opacity:0.75; }
.neighborGlimpse.left{ left:0; }
.neighborGlimpse.right{ right:0; }
.neighborDesk{ position:absolute; bottom:42%; width:2.5%; height:5%; background:#7a6b4a; opacity:0.55; }
.wallCorner{ position:absolute; top:16%; bottom:42%; width:4px; background:#45474a; }
.wallTrim{ position:absolute; left:0; right:0; top:16%; height:2.5%; background:#b0b3b6; border-bottom:3px solid #7c7f83; }
.wallSeam{ position:absolute; top:18.5%; bottom:42%; width:3px; background:var(--wall-line); }
.baseboard{ position:absolute; left:0; right:0; bottom:42%; height:3%; background:var(--wall-dark); }
.fluorflicker{ position:absolute; inset:0 0 42% 0; background:rgba(238,243,223,0.05); animation:flicker 7s infinite steps(1); pointer-events:none; }
@keyframes flicker{ 0%,100%{opacity:1;} 92%{opacity:1;} 93%{opacity:.4;} 94%{opacity:1;} 96%{opacity:.55;} 97%{opacity:1;} }
.floor{ position:absolute; left:0; right:0; bottom:0; height:42%; background:repeating-linear-gradient(0deg, var(--floor) 0 10px, var(--floor-dark) 10px 11px); }
/* ---- office skins ----
The room shell -- ceiling, cubicle wall, floor -- as ONE background image
per office, instead of the dozen absolutely-positioned divs above.
Deliberately a background rather than markup: a background cannot be
clicked, cannot be measured, and cannot land in the middle of the paint
order, so an office skin is incapable of disturbing anything in the room.
Everything that IS interactive -- the desk, Bob, the monitor, the clock,
the three placement zones -- is untouched and sits on top exactly where it
always did.
Each skin is drawn to the SAME three bands the divs above use: ceiling
0-16%, cubicle wall 16-58%, floor the bottom 42%. That is what makes these
skins and not a re-layout: every stored item position is a fraction of its
zone, so the zones must not move, so the art has to come to the zones.
preserveAspectRatio="none" in each file plus background-size:100% 100%
means the art stretches to the stage box, which is locked to 4/3 anyway.
The desk's three colours ride along with the skin, since a desk is part of
the office it stands in. */
.stage[data-office]{ background-size:100% 100%; background-repeat:no-repeat; background-position:center; }
.stage[data-office] > .ceiling,
.stage[data-office] > .ceilingLight,
.stage[data-office] > .wallpanel,
.stage[data-office] > .wallSide,
.stage[data-office] > .neighborGlimpse,
.stage[data-office] > .neighborDesk,
.stage[data-office] > .wallCorner,
.stage[data-office] > .wallSeam,
.stage[data-office] > .wallTrim,
.stage[data-office] > .baseboard,
.stage[data-office] > .floor{ display:none; }
/* .fluorflicker is NOT hidden: it is a translucent flicker over the whole
wall, and it reads correctly over any of the three skins. */
.stage[data-office="officedefault"]{ background-image:url("/play/skins/office-default.svg"); --desk:#d3c4a0; --desk-dark:#b5a67e; --desk-edge:#8c7d5c; }
.stage[data-office="officerefined"]{ background-image:url("/play/skins/office-refined.svg"); --desk:#f3f2ec; --desk-dark:#dcdbd3; --desk-edge:#a5a49c; }
/* Beige Standard Issue: oatmeal fabric with an aluminium trim rail, yellowed
tiles and a brown carpet that has seen things. Deliberately the most
nineteen-nineties room in the game, which is what stops it reading as a
recolour of the grey one. */
.stage[data-office="officefunctional"]{ background-image:url("/play/skins/office-functional.svg"); --desk:#c9b68e; --desk-dark:#a99672; --desk-edge:#7f6e4f; }
/* This Is Fine. The DEFAULT room's desk colours, deliberately: the joke only
works if the office looks completely ordinary and the fire is the one
abnormal thing in it. Nothing else restyles -- no scorched hardware, no
warm cast on the monitor -- for the same reason. The fire itself is SMIL
inside the SVG, which the browser plays in a background image with no
script, so this line is the entire wiring for an animated room. */
.stage[data-office="officethisisfine"]{ background-image:url("/play/skins/office-thisisfine.svg"); --desk:#d3c4a0; --desk-dark:#b5a67e; --desk-edge:#8c7d5c; }
/* This Is Fine is the one room whose picture is not only a background. Its
fire comes in two sheets the game lays into the room (see applyOfficeSkin):
the flames against the cubicle wall over the wall decor, and the seams,
floor rows, sparks and smoke over the floor items as well. Same geometry
as the room behind them, so all three line up. Neither catches a finger --
items are dragged and dropped straight through them. */
.fireLayer{
display:none; position:absolute; inset:0; pointer-events:none;
background-repeat:no-repeat; background-size:100% 100%; background-position:center;
}
.fireLayer[data-office="officethisisfine"]{ display:block; }
.fireWall[data-office="officethisisfine"]{ background-image:url("/play/skins/office-thisisfine-wall.svg"); }
.fireFront[data-office="officethisisfine"]{ background-image:url("/play/skins/office-thisisfine-front.svg"); }
/* iPhones and iPads get a picture of each room instead of the drawing.
On the owner's iPhone 13 (Chrome, which is Safari's engine underneath)
Functional came up as a blank grey room, although the same drawing
opened on its own drew perfectly and desktop Safari's engine draws it
too -- so it is the phone failing to paint the drawing as a background,
not the drawing. A photo of the room is the one thing every iPhone
paints. `-webkit-touch-callout` exists only on iPhone and iPad, so no
desktop browser takes this branch. This Is Fine keeps its drawing:
its fire moves, and a picture would stop it. Pictures are made from the
drawings at 1600x1200; redraw a room and remake its picture. */
@supports (-webkit-touch-callout: none){
.stage[data-office="officedefault"]{ background-image:url("/play/skins/office-default.jpg"); }
.stage[data-office="officerefined"]{ background-image:url("/play/skins/office-refined.jpg"); }
.stage[data-office="officefunctional"]{ background-image:url("/play/skins/office-functional.jpg"); }
}
/* ---- the dark ----
Lights off (officeDark, game.js). The room goes dark in two parts, and the
split is the whole point. The three sheets at the bottom of #stage darken
the office BACKGROUND only -- they are its first children, so the skin is
all that is under them. Everything standing in the room is then darkened
one element at a time with a filter, so the room's paint order is never
touched: the This Is Fine fire sheets stay exactly where applyOfficeSkin
lays them and are simply not in the list, so they burn on. Light sources
are also not in the list: the monitor's screen (a soft green from what is
on it), each string-light bulb in its own colour, the fire. The owner's
rule after the first mock-ups: only the bulbs glow, in the colour they
are, and a bad bulb's flicker takes its glow with it. */
/* Brightness only, never a hue shift: an earlier sepia/hue-rotate version
turned the green plant purple. The blue of the night is the room's. */
.stage.night{ isolation:isolate; --night-dim:brightness(.42) saturate(.85); }
.nightShade, .nightShade2, .nightWarm{ display:none; position:absolute; inset:0; pointer-events:none; }
.stage.night .nightShade{ display:block; background:#1c2340; mix-blend-mode:multiply; opacity:.86; }
.stage.night .nightShade2{ display:block; background:linear-gradient(180deg, rgba(8,10,22,.35), rgba(8,10,22,0) 40%, rgba(8,10,22,.25)); }
/* This Is Fine: the fire lights the room. Under the fire sheets, like everything here. */
.stage.night[data-office="officethisisfine"] .nightWarm{ display:block; mix-blend-mode:screen;
background:radial-gradient(ellipse at 50% 75%, rgba(255,140,50,.30), rgba(255,140,50,.10) 45%, rgba(255,140,50,0) 80%); }
.stage.night .fluorflicker{ display:none; } /* the tubes are off */
/* The three zones' ITEMS are dimmed, not the zones: a filter on a zone makes
the whole zone its own layer, and iPhone Safari drew the wall-decor zone's
layer over the top of the TPS box standing in front of the wall -- the
box's upper half vanished at exactly the wall line, where that zone ends
(the owner's phone, 27 September 2026). One item at a time looks the same
and leaves the zones as plain boxes. */
.stage.night .clockwrap, .stage.night .decorZone > *, .stage.night .floorZone > *, .stage.night .toyZone > *,
.stage.night .papers, .stage.night .keyboard, .stage.night .mouse, .stage.night .cup,
.stage.night .desk, .stage.night .deskLeg, .stage.night .chairEl, .stage.night .deskSurface, .stage.night .deskFront{ filter:var(--night-dim); }
/* The monitor: the case, stand and foot go dark together (the owner: the
foot and base "stay the same color as the monitor"), the screen does not,
and its light falls on all of them and on the desk. The glow is a child of
the monitor so it moves with it on the phone layout; it sits after .foot
and before .mailBadge in the markup so it lights the case and never the
badge. Not the Refined cream box's own glow rule (above): this adds to it. */
.stage.night .monitor{ background:color-mix(in srgb, var(--monitor-bez) 40%, #1c2340); }
.stage.night .monitor .stand, .stage.night .monitor .foot{ background:color-mix(in srgb, var(--ink) 40%, #1c2340); }
/* Refined at night: the white rim, the stand, the foot and the well all
take the night; the light from the glass is softer and spreads further
than the other rooms' -- "less punchy but more spread out" (the owner). */
.stage.night[data-office="officerefined"]{
--rc-shell:color-mix(in srgb, #e9e3d2 42%, #1c2340); --rc-edge:color-mix(in srgb, #ddd6c2 42%, #1c2340);
--rc-hi:color-mix(in srgb, #f4f0e2 42%, #1c2340); --rc-lo:color-mix(in srgb, #cfc8b1 42%, #1c2340);
--rc-well:color-mix(in srgb, #253252 45%, #1c2340); --rc-dot:#05090f;
}
.stage.night[data-office="officerefined"] .monitor .screen{
box-shadow:
0 0 13.5px rgba(105,215,230,0.175), 0 0 52.5px rgba(105,215,230,0.11),
0 0 0 .18cqw #0c1426, 0 0 0 .45cqw rgba(255,255,255,.10),
inset 0 0 0 .2cqw #7f9ea8, inset 0 0 0 .55cqw #0a1c22, inset 0 0 1.6cqw rgba(0,0,0,.95), inset .35cqw .5cqw .7cqw rgba(255,255,255,.14);
}
.stage.night[data-office="officerefined"] .monitor .nightGlow{
left:-115%; top:-95%; width:330%; height:390%;
background:radial-gradient(ellipse closest-side at 50% 52%, rgba(115,215,230,0.12), rgba(115,215,230,0.05) 40%, rgba(115,215,230,0.015) 75%, rgba(115,215,230,0) 100%);
}
.stage.night[data-office="officerefined"] .deskGlow{
background:radial-gradient(ellipse closest-side at 50% 30%, rgba(115,215,230,0.07), rgba(115,215,230,0.03) 50%, rgba(115,215,230,0) 100%);
}
/* Refined's coloured clocks at night: the dial takes the night by hand --
no filter on the whole clock, so the hands' glow is not dimmed with it --
and the glow is the hands' own drop-shadow, which cannot reach past the
dial. Nothing else about the clock lights up. */
/* The grey clock is not a light: at night it dims like the other clocks and
loses its day shadow. Stated outright because Refined's own day rule
(a drop shadow) is as specific as the night dim list and sits later. */
.stage.night[data-office="officerefined"] .clockwrap[data-clock-design="grey"]{ filter:var(--night-dim); }
.stage.night[data-office="officerefined"] .clockwrap[data-clock-design="blue"],
.stage.night[data-office="officerefined"] .clockwrap[data-clock-design="teal"]{ filter:none; }
.stage.night[data-office="officerefined"] .clockwrap[data-clock-design="blue"] .face,
.stage.night[data-office="officerefined"] .clockwrap[data-clock-design="teal"] .face{ fill:#141414; stroke:color-mix(in srgb, #f2f0ea 42%, #1c2340); }
.stage.night[data-office="officerefined"] .clockwrap[data-clock-design="blue"] .hand{ filter:drop-shadow(0 0 1.5px #2f8fdc) drop-shadow(0 0 4px rgba(47,143,220,0.7)); }
.stage.night[data-office="officerefined"] .clockwrap[data-clock-design="blue"] .cap{ filter:drop-shadow(0 0 2px #2f8fdc); }
.stage.night[data-office="officerefined"] .clockwrap[data-clock-design="teal"] .hand{ filter:drop-shadow(0 0 1.5px #3fbfa8) drop-shadow(0 0 4px rgba(63,191,168,0.7)); }
.stage.night[data-office="officerefined"] .clockwrap[data-clock-design="teal"] .cap{ filter:drop-shadow(0 0 2px #3fbfa8); }
.nightGlow{ display:none; position:absolute; left:-66.25%; top:-46.25%; width:232.5%; height:292.5%; pointer-events:none; mix-blend-mode:screen;
background:radial-gradient(ellipse closest-side at 50% 52%, rgba(150,205,160,.13), rgba(150,205,160,.045) 45%, rgba(150,205,160,0) 100%); }
.stage.night .monitor .nightGlow{ display:block; }
.stage.night .monitor .screen{ box-shadow:0 0 10.5px rgba(140,200,150,.175); } /* the owner, 26 Sept: glow halved, spread cut a quarter */
/* The wash on the things around the monitor -- very subtle, every room. */
.deskGlow{ display:none; position:absolute; pointer-events:none; mix-blend-mode:screen; }
.stage.night .deskGlow{ display:block; background:radial-gradient(ellipse closest-side at 50% 30%, rgba(150,205,160,.08), rgba(150,205,160,.03) 50%, rgba(150,205,160,0) 100%); }
/* String Lights at night: the wire, hooks and sockets go dark with the
room; each bulb loses its outline and glows its own colour, wide (the
owner: "the glow radius can be bigger … at night I don't think they need
to have a black line edging them"). A bad bulb's flicker takes the glow
with it (badBulbFlickerNight, with the wider shadows below). */
.stage.night .lightWire, .stage.night .lightDrop{ filter:brightness(.45); }
.stage.night .lightHook, .stage.night .lightSocket{ filter:brightness(.45); }
.stage.night .bulbCore{ stroke:none; filter:drop-shadow(0 0 3px var(--bulb-color)) drop-shadow(0 0 8px var(--bulb-color)) drop-shadow(0 0 16px color-mix(in srgb, var(--bulb-color) 55%, transparent)); }
.stage.night .stringLightBulb.bad .bulbCore{ animation-name:badBulbFlickerNight; }
@keyframes badBulbFlickerNight{
0%{ fill:var(--bulb-color); filter:drop-shadow(0 0 3px var(--bulb-color)) drop-shadow(0 0 8px var(--bulb-color)) drop-shadow(0 0 16px color-mix(in srgb, var(--bulb-color) 55%, transparent)); }
8%{ fill:var(--bulb-dark); filter:none; }
15%{ fill:var(--bulb-color); filter:drop-shadow(0 0 3px var(--bulb-color)) drop-shadow(0 0 8px var(--bulb-color)) drop-shadow(0 0 16px color-mix(in srgb, var(--bulb-color) 55%, transparent)); }
23%{ fill:var(--bulb-mid); filter:drop-shadow(0 0 2px var(--bulb-mid)); }
29%{ fill:var(--bulb-color); filter:drop-shadow(0 0 3px var(--bulb-color)) drop-shadow(0 0 8px var(--bulb-color)) drop-shadow(0 0 16px color-mix(in srgb, var(--bulb-color) 55%, transparent)); }
56%{ fill:var(--bulb-dark); filter:none; }
62%{ fill:var(--bulb-color); filter:drop-shadow(0 0 3px var(--bulb-color)) drop-shadow(0 0 8px var(--bulb-color)) drop-shadow(0 0 16px color-mix(in srgb, var(--bulb-color) 55%, transparent)); }
68%{ fill:var(--bulb-mid); filter:drop-shadow(0 0 2px var(--bulb-mid)); }
74%,100%{ fill:var(--bulb-color); filter:drop-shadow(0 0 3px var(--bulb-color)) drop-shadow(0 0 8px var(--bulb-color)) drop-shadow(0 0 16px color-mix(in srgb, var(--bulb-color) 55%, transparent)); }
}
/* ---- the scene's three groups ----
The wall (clock, string lights, wall decor), the floor, and the desk with
Bob at it -- see the note on #sceneWall in beta.html. On a desktop they are
display:contents: no box, no containing block, nothing painted, so every
child lays out against .stage exactly as it did before the groups existed.
Only the phone layout below gives them a box. */
.sceneWall, .sceneFloor, .sceneDesk{ display:contents; }
.phoneTabs{ display:none; }
/* ================= the phone layout =================
body.phoneLayout, set by syncPhoneLayout() in game.js: a portrait screen
under 600px wide, on a build that has the layout switched on (for now only
caffeinatedbob.com/mobiletesting and the dev bar's PHONE LAYOUT button).
The owner's design of 8 and 15 September 2026: the room edge to edge, taller
than the desktop's, with the wall and the desk each dropped down it as a
group; a dashboard of two tiles and GET COFFEE under it; BOB / SYNERGY /
FILE along the bottom. Nothing here reaches a desktop.
THE FRAME. The office drawings are 400 x 300. The phone room is a window on
them from x 67 to 335 and y 16 to 350 -- 268 x 334, redrawn for that frame
by tools/office-skins/build-phone.mjs, not stretched. Every group box below
is that original 400 x 300 room placed inside the window, so a position
stored as a fraction of the desktop room means the same spot here.
THE DIALS. The three numbers the owner may want to change after trying it on
his phone, and the only three: how far the desk group drops (a fraction of
the room's height), how much it grows, and how far the wall drops. The
boxes are worked out from them, so change these and nothing else. */
body.phoneLayout{
--ph-desk-drop: 0.235;
--ph-desk-scale: 1.08;
--ph-wall-drop: 0.073;
/* THE ROOM FITS THE PHONE. The owner, 15 September, on his iPhone in
Chrome: the whole page on one screen, no scrolling, on whatever phone it
is on. So the room is sized in its own units rather than as a fixed
shape: --u is one unit of the office drawings (the 268 units of room a
phone shows across its width), and the stage is as tall as the screen
leaves room for -- fitPhoneStage() in game.js works that out and writes
the height. The top is always the same (2% off the drawing's top, at the
owner's request: y 22.68); the bottom comes up as far as a short screen
needs, which shortens only the plain front panel of the desk, and goes
down as far as the drawing (y 350) on a tall one. Everything below is
measured from that fixed top, so nothing moves when the bottom does.
cqw is 1% of .cabinet's width, which on this layout is the screen's. */
--u: calc(100cqw / 268);
--ph-top: 22.68;
/* The 400 x 300 room: x 0 is 67 units left of the screen's edge. */
--ph-room-l: calc(-67 * var(--u));
--ph-room-w: calc(400 * var(--u));
--ph-room-t: calc(-1 * var(--ph-top) * var(--u));
--ph-room-h: calc(300 * var(--u));
/* The desk group grows about the middle of the room's bottom edge
(x 200, y 300) and then drops. */
--ph-desk-w: calc(400 * var(--ph-desk-scale) * var(--u));
--ph-desk-h: calc(300 * var(--ph-desk-scale) * var(--u));
--ph-desk-l: calc((200 - 200 * var(--ph-desk-scale) - 67) * var(--u));
--ph-desk-t: calc((300 + 300 * var(--ph-desk-drop) - 300 * var(--ph-desk-scale) - var(--ph-top)) * var(--u));
--ph-wall-t: calc((300 * var(--ph-wall-drop) - var(--ph-top)) * var(--u));
padding:0; align-items:flex-start;
background:#111008;
}
body.phoneLayout .cabinet{
max-width:100%; border:0; box-shadow:none; padding:0;
background:#111008;
/* A screen's height at least, with the tabs held to its bottom edge: on a
phone taller than the whole room drawing, the spare height sits between
GET COFFEE and the tabs rather than under the tabs. */
min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
/* A screen sliding in starts a whole screen to the side; clipped, so the
page never grows sideways while it moves. */
overflow-x:clip;
}
body.phoneLayout .phoneTabs{ margin-top:auto; }
/* Forced on a wide screen (the dev bar's button, or the test page opened on
a computer): a phone-width column, so what is on screen is what a phone
shows. ?width= on the test page picks another width. */
body.phoneLayout.phoneForced .cabinet{ max-width:var(--ph-column, 390px); margin:0 auto; }
body.phoneLayout.phoneForced{ justify-content:center; }
/* Email's tabs are a thumb's height on the phone (35px measured). */
body.phoneLayout .mailTabs .mailTab{ min-height:40px; }
/* The top bar: the title on its own line, then every button on one row at a
thumb's size. The same rules the narrow-screen block above gives a phone,
repeated here so a forced layout on a wide screen matches a real phone. */
body.phoneLayout .titlebar{ flex-wrap:wrap; justify-content:center; row-gap:6px; padding:7px 8px 7px; }
body.phoneLayout .titlebar h1{ width:100%; text-align:center; font-size:14px; }
body.phoneLayout .titlebar .btns{
/* Eight, and it has to be said twice: the narrow-screen block above counts
the same buttons for a small window, and THIS is the one a phone
actually gets. Changing only the other one left the bar at its old size
with two buttons hanging off the ends -- the menu and the sound, one at
each edge, which is the failure the note above that block describes from
the last time it happened. */
--barN: calc(8 + var(--pins, 0));
--barW: calc(100cqw - 16px);
--barAt4: calc((var(--barW) - (var(--barN) - 1) * 4px) / var(--barN));
--barAt3: calc((var(--barW) - (var(--barN) - 1) * 3px) / var(--barN));
--barGap: calc(2px + clamp(0px, (var(--barAt3) - 31.99px) * 1000, 1px) + clamp(0px, (var(--barAt4) - 37.99px) * 1000, 1px));
--barBtn: min(44px, calc((var(--barW) - (var(--barN) - 1) * var(--barGap)) / var(--barN)));
justify-content:center; flex-wrap:nowrap; gap:var(--barGap); max-width:100%;
}
body.phoneLayout .titlebar .iconbtn{
width:var(--barBtn); height:var(--barBtn);
width:round(down, var(--barBtn), 1px); height:round(down, var(--barBtn), 1px);
flex:0 0 auto; padding:0; font-size:20px;
}
body.phoneLayout .titlebar .iconbtn svg{ max-width:calc(var(--barBtn) - 6px); max-height:calc(var(--barBtn) - 6px); }
body.phoneLayout #supportBtn svg{ width:28px; height:28px; }
body.phoneLayout #muteBtn{ font-size:min(20px, calc(var(--barBtn) * 0.5)); }
body.phoneLayout .volumePanel{ width:144px; }
/* The room: edge to edge, no border, at the phone frame's shape. */
/* Its height comes from fitPhoneStage(); until that has run, the shape the
owner saw on his phone on 15 September. The drawing keeps its full 334
units of height and is hung so its y 22.68 is the stage's top edge. */
body.phoneLayout .stage{ aspect-ratio:auto; height:var(--ph-stage-h, calc(270.75 * var(--u))); border:0; }
body.phoneLayout .stage[data-office]{ background-size:100% calc(334 * var(--u)); background-position:center calc((16 - var(--ph-top)) * var(--u)); }
body.phoneLayout .fluorflicker{ inset:0 0 auto 0; height:calc((196 - var(--ph-top)) * var(--u)); }
body.phoneLayout .stage[data-office="officedefault"]{ background-image:url("/play/skins/phone/office-default.svg"); }
body.phoneLayout .stage[data-office="officerefined"]{ background-image:url("/play/skins/phone/office-refined.svg"); }
body.phoneLayout .stage[data-office="officefunctional"]{ background-image:url("/play/skins/phone/office-functional.svg"); }
body.phoneLayout .stage[data-office="officethisisfine"]{ background-image:url("/play/skins/phone/office-thisisfine.svg"); }
/* This Is Fine's fire, on the phone: the same two sheets, drawn to the
phone room's geometry. */
body.phoneLayout .fireWall[data-office="officethisisfine"]{ background-image:url("/play/skins/phone/office-thisisfine-wall.svg"); }
body.phoneLayout .fireFront[data-office="officethisisfine"]{ background-image:url("/play/skins/phone/office-thisisfine-front.svg"); }
body.phoneLayout .fireLayer{ background-size:100% calc(334 * var(--u)); background-position:center calc((16 - var(--ph-top)) * var(--u)); }
/* iPhones take pictures of the rooms, for the reason given above the desktop
version of this block. This Is Fine keeps its moving drawing. */
@supports (-webkit-touch-callout: none){
body.phoneLayout .stage[data-office="officedefault"]{ background-image:url("/play/skins/phone/office-default.jpg"); }
body.phoneLayout .stage[data-office="officerefined"]{ background-image:url("/play/skins/phone/office-refined.jpg"); }
body.phoneLayout .stage[data-office="officefunctional"]{ background-image:url("/play/skins/phone/office-functional.jpg"); }
}
/* The groups get their boxes. No transforms: the desk group is simply a
bigger box, so every measurement the drag code takes -- a rect here, a
clientWidth there -- agrees with every other. */
body.phoneLayout .sceneWall,
body.phoneLayout .sceneFloor,
body.phoneLayout .sceneDesk{ display:block; position:absolute; pointer-events:none; }
body.phoneLayout .sceneWall{ left:var(--ph-room-l); width:var(--ph-room-w); top:var(--ph-wall-t); height:var(--ph-room-h); }
body.phoneLayout .sceneFloor{ left:var(--ph-room-l); width:var(--ph-room-w); top:var(--ph-room-t); height:var(--ph-room-h); }
body.phoneLayout .sceneDesk{ left:var(--ph-desk-l); width:var(--ph-desk-w); top:var(--ph-desk-t); height:var(--ph-desk-h); }
/* A group has to let presses through -- the floor group's box covers the
whole wall -- but pointer-events is inherited, so every child that takes a
press on the desktop without saying so is given it back. The zones and Bob
say none for themselves, and the placed items say auto, so neither is
listed. */
body.phoneLayout .sceneWall > .clockwrap,
body.phoneLayout .sceneDesk > .desk,
body.phoneLayout .sceneDesk > .deskLeg,
body.phoneLayout .sceneDesk > .deskSurface,
body.phoneLayout .sceneDesk > .deskFront,
body.phoneLayout .sceneDesk > .keyboard,
body.phoneLayout .sceneDesk > .mouse,
body.phoneLayout .sceneDesk > .papers,
body.phoneLayout .sceneDesk > .cup,
body.phoneLayout .sceneDesk > .monitor{ pointer-events:auto; }
/* The wall zone: the cubicle panel between its top (y 57 in the phone
drawings since the walls were raised a tenth on 20 September 2026) and its
base (y 196), inside the wall group, and across only the part of the wall a
phone shows (x 67-335, less a little either side). The group has already
dropped the panel by 300 x --ph-wall-drop = 21.9, so in its own terms the
panel runs from y 35.1 to 174.1 -- 11.7% to 58.03% of the 300-unit group.
tests/phone-layout.test.js keeps these two numbers and the skin builder's
frame from drifting apart, which they did for a day when the walls grew and
this band stayed where the shorter wall had put it. */
body.phoneLayout .decorZone{ top:11.7%; height:46.33%; left:17.5%; width:65%; }
/* Wall decor is 11% of its zone; this zone is narrower than the desktop's
79.2%, so the same 11% would shrink every picture. Scaled back up, so a
poster is the same size against the wall on both. */
body.phoneLayout #decorZone > .decorItem{ width:calc(11% * 79.2 / 65); }
/* The floor zone: all the carpet a phone shows, from the panel base (y 196)
to the bottom of the room (y 350), the full width of the room drawing so a
plant is the same size here as on a desktop. Where on it an item may
actually stand is FLOOR_SHAPE's job (phoneFloorShape in game.js). */
body.phoneLayout .floorZone{ left:0; right:auto; width:100%; top:65.3333%; bottom:auto; height:51.3333%; }
/* No strip in front of the desk on a phone: the floor stops behind it. */
body.phoneLayout #floorFrontZone{ display:none; }
/* The dashboard: a wide ENERGY tile (the number, the bar, and the condition
line folded in under it), a CV/HR tile, and GET COFFEE across both. The
same elements as the desktop's row, laid out again -- nothing is copied, so
every listener and test still finds them. */
/* The owner's pick of 20 September 2026, after eight rounds of rendered
options: the energy tile is laid out like the CV/HR tile -- the number
over its word at the left, the top of the number level with the top of
the bar -- with the bar to the right and the condition line centered
under the bar. The CV/HR tile is half its old width so the bar gets the
rest, the 100% line stays inside the bar, and the two tiles sit 5px
apart, each running off its own edge. */
body.phoneLayout .hud{
display:grid; grid-template-columns:auto minmax(0, 1fr) 84px; column-gap:5px;
grid-template-rows:auto auto auto;
/* Edge to edge, like the room above them (the owner, 15 September): no
side margin, and the tiles' outer sides and the coffee button's run off
the screen, so nothing reads as a box floating short of the edge. */
padding:8px 0 2px;
}
body.phoneLayout .energyrow, body.phoneLayout .barlabel{ display:contents; }
body.phoneLayout .hud::before, body.phoneLayout .hud::after{
content:""; background:var(--panel-light); border:3px solid var(--ink);
}
body.phoneLayout .hud::before{ grid-area:1 / 1 / 3 / 3; border-left:0; }
body.phoneLayout .hud::after{ grid-area:1 / 3 / 3 / 4; border-right:0; }
body.phoneLayout #barLabelEnergy,
body.phoneLayout #barWrap,
body.phoneLayout #statusRow,
body.phoneLayout #barLabelRate{ position:relative; z-index:1; }
/* The number over the word ENERGY, the way the rate sits over CV/HR. Both
the number's padding and the bar's margin are 12px from the tile's top,
and both have no line-height to spare, so their tops line up. */
body.phoneLayout #barLabelEnergy{
grid-area:1 / 1 / 3 / 2; align-self:start; display:flex; flex-direction:column; align-items:center; gap:5px;
padding:12px 0 0 16px; line-height:1;
}
body.phoneLayout #barLabelEnergy::after{ content:"ENERGY"; font-family:'Space Mono',monospace; font-size:11px; font-weight:700; letter-spacing:1px; color:var(--text-dim); line-height:1; }
body.phoneLayout #barWrap{ grid-area:1 / 2; align-self:end; margin:12px 16px 0 10px; flex:none; height:16px; }
/* The 100% line stops at the bar's edges here rather than poking out above
and below it, which the owner found bothersome on a phone. */
body.phoneLayout .barmark100{ top:0; bottom:0; }
body.phoneLayout #statusRow{
grid-area:2 / 2; margin:0; padding:6px 16px 10px 10px; text-align:center; font-size:16px; line-height:1.1; min-height:0;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.phoneLayout #barLabelRate{
grid-area:1 / 3 / 3 / 4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; white-space:normal;
}
body.phoneLayout .barlabelWord{ display:none; }
body.phoneLayout .barlabelNum{ font-family:'Press Start 2P',monospace; font-size:13px; line-height:1; color:var(--gold); text-shadow:2px 2px 0 var(--ink); }
body.phoneLayout #barLabelRate::after{ content:"CV/HR"; font-family:'Space Mono',monospace; font-size:11px; font-weight:700; letter-spacing:1px; color:var(--text-dim); }
/* The rate's warning colours move to its number, since the tile's label
is always the same grey. */
body.phoneLayout .barlabelRate.rateZero .barlabelNum{ color:var(--danger); }
body.phoneLayout .barlabelRate.rateHigh .barlabelNum{ color:var(--good); }
body.phoneLayout #coffeeBtn{ grid-area:3 / 1 / 4 / 4; margin-top:8px; padding:13px 10px; border-left:0; border-right:0; box-shadow:none; }
/* A press darkens it rather than nudging it sideways, which on a button as
wide as the screen looks like the page jumping. */
body.phoneLayout #coffeeBtn:not(:disabled):active{ transform:none; background:#2a2c23; }
/* ---- the SYNERGY and FILE screens ----
Each fills the screen above the tabs, over the office (which keeps running
underneath). --ph-tabs-h is the tab row's height, written by fitPhoneStage.
Programs opened from SYNERGY are ordinary windows and come up over all of
it, tabs included, until they are closed. */
.phoneSynergy{ display:none; }
body.phoneLayout.phoneScreenSynergy .phoneSynergy,
body.phoneLayout.phonePeekSynergy .phoneSynergy{
display:flex; flex-direction:column; position:absolute; left:0; right:0; top:0; bottom:var(--ph-tabs-h, 66px); z-index:25;
/* Back to the dark screen the phone had before the desktop went blue --
the owner, 24 September 2026, while he works out what he wants from the
wallpapers. The logo stays, in SYNERGY's own green. Black from 1
October 2026, like the computer's (the owner: black with the green
logo, the same strength) -- and then back to this warm, lit-from-the-
corner glow the same day, because black lost the old-monitor feel. */
background:radial-gradient(120% 140% at 30% 12%, #322f27 0%, var(--monitor) 55%, #15130e 100%);
box-shadow:inset 0 0 40px 12px rgba(0,0,0,.55); overflow:hidden;
}
/* The same wallpaper as the computer: the dark glow with the logo centred and
faint behind the apps. One background, both screens -- which is also what
a bought one will be. */
/* Printed in the green rather than shown as artwork: the logo is used as a
stencil and the colour comes from underneath, so it is SYNERGY's own green
on the dark screen at a tenth of full strength. */
.phoneSynergy .deskLogo{ top:46%; width:56%; opacity:.1;
background:var(--monitor-glow);
-webkit-mask:url("/play/skins/synergy-logo.png") center/contain no-repeat;
mask:url("/play/skins/synergy-logo.png") center/contain no-repeat; }
.phSynBar{
flex:none; display:flex; align-items:center; justify-content:space-between; padding:12px 16px;
background:linear-gradient(180deg, #34322b, #22211b); border-bottom:1px solid #4a473d;
font-family:'Space Mono',monospace; font-size:13px; font-weight:700; color:var(--text);
}
.phSynLogo{ font-family:'Press Start 2P',monospace; font-size:11px; color:var(--gold); letter-spacing:1px; }
.phSynGrid{
flex:1; min-height:0; overflow-y:auto; display:grid; grid-template-columns:repeat(3, 1fr);
gap:18px 6px; padding:20px 12px; align-content:start;
}
.phSynApp{
position:relative; background:none; border:0; padding:0; cursor:pointer; color:var(--text);
display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0;
}
.phSynApp .glyph{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; }
.phSynApp .glyph svg{ width:52px; height:52px; }
.phSynApp .lbl{
font-family:'Space Mono',monospace; font-size:12px; font-weight:700; line-height:1.2; text-align:center;
text-shadow:1px 1px 0 #000; max-width:100%; overflow-wrap:anywhere;
}
.phSynApp:active .glyph{ transform:translate(1px, 1px); }
.phSynBadge{
position:absolute; top:-4px; left:calc(50% + 14px); min-width:22px; height:22px; padding:0 4px; border-radius:11px;
background:var(--danger); color:#fff; border:2px solid var(--ink); font-family:'Space Mono',monospace; font-size:12px;
font-weight:700; display:flex; align-items:center; justify-content:center;
}
.phSynDock{
flex:none; margin:0 12px 12px; padding:8px 10px; background:rgba(255,255,255,.06); border:1px solid #4a473d;
border-radius:20px; display:flex; justify-content:space-around;
}
.phSynDockApp .glyph{ width:48px; height:48px; }
.phSynDockApp .glyph svg{ width:44px; height:44px; }
/* SYNERGY Mobile: arranging (hold any app), folders, the dock. */
.phSynBar .phSynDone{ font-family:'Space Mono',monospace; font-weight:700; font-size:14px; color:var(--gold); background:none; border:1px solid var(--gold); border-radius:14px; padding:2px 14px; min-height:32px; cursor:pointer; }
.phSynEditing .phSynApp{ touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.phSynApp{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
@keyframes phSynTremble{ 0%{ transform:rotate(-1.4deg); } 50%{ transform:rotate(1.4deg); } 100%{ transform:rotate(-1.4deg); } }
.phSynEditing .phSynApp .glyph{ animation:phSynTremble 260ms ease-in-out infinite; }
.phSynEditing .phSynApp:nth-child(2n) .glyph{ animation-delay:-130ms; }
@media (prefers-reduced-motion: reduce){ .phSynEditing .phSynApp .glyph{ animation:none; } }
.phSynLifted{ opacity:.25; }
.phSynPlaceholder{ min-height:80px; }
.phSynGhost{ position:fixed; z-index:99999; pointer-events:none; transform:scale(1.12); opacity:.92; background:none; border:0; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--text); }
.phSynGhost .glyph{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; }
.phSynGhost .glyph svg{ width:52px; height:52px; }
.phSynGhost .lbl{ display:none; }
.phSynMergeRing .glyph{ outline:3px solid var(--gold); outline-offset:3px; border-radius:14px; }
/* A folder tile: its apps, small, in a rounded square. */
/* A tenth smaller than an app's icon: a folder was taking up more room than
the things inside it (the owner, 15 September). */
.phSynFolder .glyph{ width:50px; height:50px; }
.phSynFolderGlyph{ background:rgba(255,255,255,.12); border:1px solid #6a6656; border-radius:13px; box-sizing:border-box; padding:4px;
display:grid !important; grid-template-columns:repeat(3, 1fr); grid-auto-rows:13px; gap:2px; align-content:start; }
.phSynMini{ display:flex; align-items:center; justify-content:center; }
.phSynMini svg{ width:13px !important; height:13px !important; }
.phSynDock:empty{ min-height:64px; }
/* An open folder: a sheet over the dimmed grid. */
.phSynSheetScrim{ position:absolute; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:5; }
.phSynSheet{ width:min(88%, 360px); max-height:80%; overflow:auto; background:#2c2a22; border:1px solid #6a6656; border-radius:22px; box-shadow:0 10px 40px rgba(0,0,0,.6); padding:10px 8px 16px; }
.phSynSheetHead{ display:flex; align-items:center; gap:8px; padding:4px 8px 8px; }
.phSynSheetName{ flex:1; text-align:left; background:none; border:0; color:var(--text); font-family:'Space Mono',monospace; font-weight:700; font-size:18px; padding:4px; min-height:36px; }
.phSynSheetName.phSynRenameable{ border-bottom:1px dashed var(--gold); }
.phSynSheetClose{ width:40px; height:40px; background:rgba(255,255,255,.08); border:1px solid #6a6656; border-radius:20px; color:var(--text); font-size:16px; }
.phSynSheetGrid{ padding:8px 4px; }
.phSynSheetEmpty{ grid-column:1 / -1; color:#a49c88; text-align:center; font-size:13px; padding:18px 8px; }
/* The Employee File, full screen: the owner asked for it that way on phones
(15 September). No scrim, no border, no ✕ -- it is a screen, and the tabs
are the way off it. */
/* Drawn while it slides in, before it is the screen on show. */
body.phoneLayout #employeeOverlay.phonePeek{ display:flex; }
body.phoneLayout #employeeOverlay.phoneScreen,
body.phoneLayout #employeeOverlay.phonePeek{
bottom:var(--ph-tabs-h, 66px); padding:0; background:#111008; align-items:stretch; justify-content:stretch; z-index:25;
}
body.phoneLayout #employeeOverlay.phoneScreen #employeePanel,
body.phoneLayout #employeeOverlay.phonePeek #employeePanel{
max-width:none; max-height:none; width:100%; height:100%; border:0; box-shadow:none;
}
/* THE TOP BAR'S COMPUTER BUTTON IS A PHONE ON A PHONE. The owner, 15
September: "on mobile can we have different icons on the top menu bar than
what we see on desktop? in particular, I might be interested in an old
school mobile device instead of old computer monitor." He chose the
smartphone from the drawings (round two). Both pictures are in the button
and the layout picks one, so nothing has to be drawn in script and the
four builds stay generated from one file. */
.iconPhone{ display:none; }
body.phoneLayout .iconDesk{ display:none; }
body.phoneLayout .iconPhone{ display:inline; }
/* The attachment viewer's page buttons, a thumb's height on the phone (33px measured). */
body.phoneLayout #deckPrev, body.phoneLayout #deckNext{ min-height:44px; }
/* The Leaderboard, opened from the File on a phone: a screen of its own over
it, above the tabs, closed by the SAME ✕ every other panel in the game is
closed by -- drawn inside the corner here rather than hanging off it, which
is where it sits on a window with room around it.
It opened with "‹ File" at the top left until 22 September 2026, borrowed
from how a phone's own settings screens go back. The owner: "the leaderboard
menu on mobile needs an x in the top right corner. File on the left just
doesn't really make sense in the context of how the rest of the game works.
X is more familiar to the players." Every other panel here closes with an ✕
and this one is not special. */
body.phoneLayout #leaderboardOverlay.phoneFull{ bottom:var(--ph-tabs-h, 66px); padding:0; background:#111008; align-items:stretch; justify-content:stretch; }
body.phoneLayout #leaderboardOverlay.phoneFull #leaderboardPanel{ max-width:none; max-height:none; width:100%; height:100%; border:0; box-shadow:none; }
body.phoneLayout #leaderboardOverlay.phoneFull #leaderboardPanel > .panelClose{
top:6px; right:6px; width:44px; height:44px; font-size:18px;
}
/* And the title keeps clear of it. */
body.phoneLayout #leaderboardOverlay.phoneFull #leaderboardOverlayHeading{ padding-right:52px; }
/* THE PAPER GOES CLEAR TO THE EDGES, on the two forms that are a sheet of
paper: the TPS report and the After Hours Authorization. The owner, 22
September 2026: "we don't gain anything from having edges around the paper.
I want the paper to go clear to the edges and everything resized
accordingly on both."
There were three frames stacked around each sheet -- the dark outside the
panel, the panel's own ink border, and the padding of the panel's body --
which on a 390 screen spent 38 pixels of width on a document that has
nothing to spare. On a computer those edges are what make it read as a
window with a sheet of paper in it; on a phone the sheet IS the screen.
The paper keeps its own inside margin, so the type is not against the
glass -- that margin is now the only one there is. */
body.phoneLayout #afterHoursOverlay{ padding:0; }
body.phoneLayout #tpsOverlay .panelBox,
body.phoneLayout #afterHoursOverlay .panelBox{ border:0; box-shadow:none; max-width:none; }
body.phoneLayout #afterHoursOverlay .panelBox{ max-height:100%; height:100%; }
body.phoneLayout #tpsOverlay #tpsBody,
body.phoneLayout #afterHoursOverlay #afterHoursBody{ padding:0; }
body.phoneLayout #tpsOverlay .tpsPaper{ border:0; }
/* With the panel flush to the screen its ✕ has nothing to hang off -- it sits
14px outside the box everywhere else -- so it comes inside, thumb-sized,
and the heading keeps clear of it. The TPS report has the phone's own
program chrome above it and needs none of this. */
body.phoneLayout #afterHoursOverlay .panelBox > .panelClose{
top:6px; right:6px; width:44px; height:44px; font-size:18px;
}
body.phoneLayout #afterHoursOverlay #afterHoursHeading{ padding-right:52px; }
body.phoneLayout #employeeOverlay.phoneScreen #employeePanel > .panelClose,
body.phoneLayout #employeeOverlay.phonePeek #employeePanel > .panelClose{ display:none; }
/* The glide between screens is a transform written by the script, frame by
frame (phoneGlide in game.js), with no blur of any kind: the owner's ruling
of 15 September. What the browser must not do is start a sideways pan of
its own before the script has the finger, so on the three screens only
up-and-down is left to it. Things that drag keep touch-action:none. */
body.phoneLayout .titlebar, body.phoneLayout #stage, body.phoneLayout .hud,
body.phoneLayout .phoneSynergy, body.phoneLayout #employeeOverlay.phoneScreen{ touch-action:pan-y; }
/* BOB / SYNERGY / FILE. */
body.phoneLayout .phoneTabs{
display:grid; grid-template-columns:repeat(3, 1fr); row-gap:0; padding:8px 8px 0;
padding-bottom:env(safe-area-inset-bottom, 0px);
}
.phoneTabDots{ grid-column:1 / 4; display:flex; justify-content:center; gap:9px; }
.phoneTabDots span{ width:10px; height:10px; border-radius:50%; border:2px solid var(--text); }
.phoneTabDots span.on{ background:var(--text); }
.phoneTab{
background:none; border:0; color:var(--text-dim); font-family:'Press Start 2P',monospace; font-size:11px;
letter-spacing:1px; padding:6px 0; min-height:40px; cursor:pointer;
}
.phoneTab.on{ color:var(--gold); }
/* 10% smaller than it was (12.5% -> 11.25% -> 10.125%): the clock was
eating more of the wall than it earns, and the wall zone below is
smaller now. The numerals do NOT shrink with it -- buildClockNumerals
scales its font up by the same 10% so they stay exactly the size they
were on screen, which is the readable limit. Change one and change the
other. */
.clockwrap{ position:absolute; top:25.5%; left:50%; width:10.125%; aspect-ratio:1/1; cursor:grab; touch-action:none; transform:translate(-50%,-50%); }
.clockwrap svg{ width:100%; height:100%; display:block; }
/* Sized so that wall decor ends up with exactly the clock's travel area,
which is the reference for anything hung on the cubicle wall.
makeDraggable keeps an item wholly inside its zone, so a decor item's
centre is clamped to the zone inset by half the item's own size -- these
four values are the solution to that inset landing on the clock's own
bounds (x 0.0968-0.9032, y 0.209-0.521 of the stage, see the clockEl
makeFreeDraggable call). Every wall item is .decorItem at a uniform 11% of
the zone width (.bigItem/33% is only the plant, which lives on the floor in
.deskDecorZone), so one rect is exact for all of them, and .stage is locked
to aspect-ratio 4/3, so the vertical solution holds at any viewport size.
Changing the zone, the item width, or the stage aspect breaks the match --
re-solve rather than nudging these by eye. */
/* Also re-measured by the owner (dev picker, "Play area"): left 10.6, top
15.5, w 79.2, h 41.1. Smaller than it was, because the cubicle wall in the
new offices is a narrower panel between two angled sides -- the old box let
wall decor hang past the panel and onto the side walls. The clock is
clamped to this same box (decorZoneClamp), so it follows automatically. */
.decorZone{ position:absolute; top:15.5%; left:10.6%; width:79.2%; height:41.1%; pointer-events:none; }
.decorItem{ position:absolute; width:11%; aspect-ratio:1/1; cursor:grab; touch-action:none; user-select:none; pointer-events:auto; }
/* The floor: where the base of a free-standing item may be put down. Matches
the visible floor art -- .floor runs 0%-42% from the bottom and .baseboard
marks the wall join at 42% -- so the top of this band is exactly where the
floor stops, and nothing can be stood up the wall. Only the front 1% is
held back -- practically the whole floor is usable, right down to the frame
edge. Stopping any higher leaves a visible strip of floor that nothing can
be stood on, and at 18% it put the entire front of the room -- everything
nearer than the desk's front panel at 19.5% -- out of reach.
This bounds the item's BASE only; its artwork is free to rise above the
band, which is what lets a tall plant stand against the cubicle wall.
Height is 42% - 1% = 41%.
Was 1%-41% from the bottom and 98% wide, which made the box for the 33%-wide
plant TALLER than the zone containing it -- the clamp below then resolved to
Math.max(0.539, Math.min(0.461, y)), pinning the plant to one horizontal rail
it could never leave, with its pot clipped off the bottom of the stage. */
/* Re-measured by the owner against the new office art (dev picker, "Play
area" frame): left -0.1, right 99.8, top 58.4, bottom 100.4. This is only
the BOUNDING BOX -- the floor itself is a hexagon, because the two angled
cubicle walls cut a wedge out of each back corner. The box is what item
positions are fractions of; FLOOR_SHAPE in game.js is the shape they are
actually held inside. NOTE: item positions are
stored as fractions of THIS box, so changing it shifts anything already
placed -- see the note in loadCareer. */
.floorZone{ position:absolute; left:-0.1%; right:0.2%; bottom:-0.4%; height:42%; pointer-events:none; }
/* The plant, and only the plant.
Its box is square and a third of the floor zone wide; the plant drawn in it
fills the middle 58% horizontally and 78% vertically (measured with
getBBox). The whole box answered the pointer, so the plant could be picked
up from a hand's width away from any leaf -- the owner: "the grab area is
way bigger than the actual item, especially horizontally and a little bit
vertically as well."
The box itself cannot shrink: every plant anybody has placed is stored as a
position within it, and resizing would move them all. So the box stays and
the CLIP changes. clip-path is hit-tested as well as painted, so this
trims the dead space away from the pointer without moving anything -- and,
unlike taking the element out of hit testing, it leaves the pointer capture
that dragging depends on completely alone.
The insets are the art's own bounds on the 24-unit icon grid, with about
half a unit of margin: left 4.5/24, right (24-19.3)/24, top 2.4/24,
bottom (24-22)/24. Nothing is clipped that is ever drawn. */
/* Bigger than the 33% it was (the owner, 24 September 2026): first 5% --
"the plant needs to be bigger in general -- not the resizing of it but the
actual base size should go up by about 5% overall" -- then 10%, the same
evening: "let's make the plant 10% bigger. I want to see how that feels." Safe to change now that a floor
item is pinned at the base of its artwork: it grows about the spot it
stands on and no placed plant moves. The depth effect scales on top. */
.decorItem.bigItem{ width:calc(33% * 1.10); clip-path: inset(10% 19.6% 8.3% 18.75%); }
/* Smaller than the plant, larger than a picture frame: a banker's box read as
an object standing in the room. Its aspect and width come from the cropped
viewBox in ITEM_VIEWBOXES, so the element hugs the artwork instead of
carrying a square of empty floor around with it -- that padding was grab
area, and it made the plant hard to put down anywhere nearby. Rendered size
is unchanged; only the invisible margin is gone. */
.decorItem.floorBox{ width:10.455%; aspect-ratio:15.4/14.1; }
/* String Lights (renderStringLights). The wrap has no pointer events of its
own, so it never blocks the wall decor under it; the wire's stroke and the
bulbs do, so the string can be grabbed by its wire and dragged up and
down the ceiling, and a bulb still answers a click (toggleBulb). Its top
and its scale are written by applyLightsDepth: higher is nearer and bigger. */
.stringLightsFull{ position:absolute; top:5%; left:0; width:100%; height:10%; pointer-events:none; cursor:grab; } /* left/width/top/height are rewritten by applyLightsDepth */
.stringLightsFull svg{ width:100%; height:100%; overflow:visible; }
/* The string may be wider than the room; `.stage` already has overflow:hidden (game.css:312), which is where it ends. */
.lightWire{ fill:none; stroke:#4a4436; stroke-width:2; pointer-events:stroke; }
.lightHook{ fill:#6b655a; pointer-events:auto; }
.lightDrop{ stroke:#4a4436; stroke-width:1.5; }
.lightSocket{ fill:#3a3a38; }
.decorItem:active{ cursor:grabbing; }
.decorItem svg{ width:100%; height:100%; overflow:visible; }
.desk{ position:absolute; left:16%; right:16%; bottom:8%; height:32.5%; background:var(--desk-dark); border-top:4px solid var(--desk-edge); }
.deskFront{ position:absolute; left:16%; right:16%; bottom:19.2%; height:8.5%; background:var(--desk-dark); }
.deskFront::before{ content:""; position:absolute; left:12%; width:3px; top:15%; bottom:15%; background:var(--desk-dark); opacity:.4; }
.deskFront::after{ content:""; position:absolute; right:12%; width:3px; top:15%; bottom:15%; background:var(--desk-dark); opacity:.4; }
/* The desk's surface band, repainted in front of Bob. .desk sits behind him
and so cannot occlude anything; this covers the identical span (top 59.5%
to 72.3%, matching .desk's top edge and .deskFront's top edge) but paints
AFTER .charwrap in the scene markup, so it is what hides his lower half.
Bob is sized and placed against these two edges -- hands on the top, feet
on the bottom -- so his lower half is exactly this band's height and the
surface swallows it whole when he sits down. Keep it flush with both edges.
This is the only part of the desk in the light var(--desk); .desk itself,
.deskFront and the legs are all var(--desk-dark), so the body reads as one
colour and the surface is the single lighter plane sitting on top of it. */
.deskSurface{ position:absolute; left:16%; right:16%; bottom:27.7%; height:12.8%; background:var(--desk); }
.keyboard{ position:absolute; left:42.9%; bottom:35.5%; width:17%; height:4%; background:var(--peripheral); border:2px solid var(--ink); }
.keyboard::after{ content:""; position:absolute; inset:15% 8%; background:repeating-linear-gradient(90deg, var(--peripheral-key) 0 3px, transparent 3px 5px); }
/* Flipped end-for-end: the mouse is symmetric left-to-right, so swapping the
top and bottom corner radii is the same 180-degree rotation without a
transform (which would spawn a stacking context for no reason). Order is
top-left, top-right, bottom-right, bottom-left. */
.mouse{ position:absolute; left:38.9%; bottom:35.5%; width:2.6%; height:4%; background:var(--peripheral); border:2px solid var(--ink); border-radius:20% 20% 40% 40%; }
/* Pressing the keyboard or the mouse makes Bob type or click (game.js,
triggerTypingBurst). The mouse is a sliver -- 16px across on a phone -- so
it answers a little way around itself, but only a hair towards the
keyboard, which sits just to its right. */
.keyboard, .mouse{ cursor:pointer; }
.mouse::after{ content:""; position:absolute; top:-8px; bottom:-8px; left:-10px; right:-3px; }
/* This declaration IS the paper's standard spawn: resetPaperStackPosition
clears the saved position and inline styles each new day so the stack falls
back to exactly here, which is why the coordinates live in one place rather
than being duplicated as a JS constant. Positioned so the stapler's own
spawn lands on the LEFT side of the pile -- move one and the other needs
re-measuring against it. */
.papers{ position:absolute; left:23.18%; bottom:31.79%; width:11%; height:3%; cursor:grab; touch-action:none; }
/* Ten stapleable sheets in the footprint the three static ones used to
occupy. The offsets are percentages, not the concept's pixels: the whole
stack is only ~15px tall in game, so 2.67% per sheet is what keeps the top
sheet (24% + 72% height) inside the element. Removing sheets shortens the
stack by ~24% overall, which reads as the pile going down even though any
single sheet is a fraction of a pixel. */
/* Each sheet's height on the pile, tilt and paper tone are set inline by
renderPaperStack, derived from PAPER_SHEETS_PER_STACK. They used to be a
hardcoded ladder of :nth-child rules, which only covered ten sheets and
would have silently left everything above that unpositioned the moment the
stack got deeper. The tilt arrives as a custom property rather than an
inline transform specifically so .removing can still override the
transform -- an inline transform would outrank the class and kill the
stapling animation. */
.paperSheet{
position:absolute; left:0; right:0; height:72%; overflow:hidden;
background:#efe9d6; border:1.5px solid var(--ink);
transform-origin:50% 80%;
transform:rotate(var(--tilt,0deg));
transition:opacity 90ms ease-out, transform 110ms ease-out;
}
.paperSheet.removing{ opacity:0; transform:translateY(12%) scale(.97) rotate(0deg); }
.papers.gone{ display:none; }
/* A pile that was dragged off the delivery spot and left unfinished. Same
look and same drag as the pile at the spot; only its position differs, and
that is written on the element by renderPaperExtras. */
.papersExtra{ left:auto; }
/* Document artwork stretches to the sheet with preserveAspectRatio="none",
so it is drawn in a 100x55 box with deliberately heavy strokes -- a sheet
is about 76x11 real pixels, so anything under ~4 units of stroke weight
disappears entirely at this scale. */
.paperArt{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.monitor{ position:absolute; left:59%; bottom:41%; width:21.25%; height:19.55%; background:var(--monitor-bez); border:3px solid var(--ink); cursor:pointer; transform:perspective(340px) rotateY(-14deg); transform-style:preserve-3d; }
.monitor:hover{ filter:brightness(1.08); }
/* THE REFINED MONITOR (the owner, 28-29 September 2026, after fifteen rounds
of mock-ups). The terminal from the severed floor, drawn flat but built to
read as a solid, turned toward Bob: a cream case that shades to a warmer
rim, a rear housing peeking over the top (two vents) and out to the right,
a knob on the side, a navy well with the camera dot and the button, and a
swivel neck on a wide flat slab. The glass is a thick, rounded tube, and the
refining game runs edge to edge inside its shape.
Same box the monitor has in every room (height, and so the desk and the
click target), moved and widened by the owner's numbers: left 58.446% (60.446% at first, then 2% further left),
bottom 39.2067%, width 23.562%, turned 29 degrees and drawn 3% smaller. The parts are children of .monitor (beta.html):
.rPlate, .rNeck, .rHood, .rFace, .rWell, .screen, .rKnob, painted back to
front in that order; every one is display:none in the other rooms. The
colours are variables so the night can mix them toward the dark. */
.monitor .rPlate, .monitor .rNeck, .monitor .rHood, .monitor .rFace, .monitor .rWell, .monitor .rKnob, .screen .rGrain{ display:none; }
.stage[data-office="officerefined"]{
--rc-shell:#e9e3d2; --rc-edge:#ddd6c2; --rc-hi:#f4f0e2; --rc-lo:#cfc8b1;
--rc-well:#253252; --rc-dot:#0a1220;
}
/* The refining machine (the owner, 27 September 2026): the monitor opens
nothing in Refined, so no pointing hand, no hover glow and no unread-mail
badge; a drag on a touch screen steers the numbers instead of scrolling. */
.stage[data-office="officerefined"] .monitor{
cursor:default; left:58.446%; bottom:39.2067%; width:23.562%;
transform:perspective(40cqw) rotateY(-29deg) scale(.97);
background:transparent; border:0; border-radius:0; box-shadow:none;
}
.stage[data-office="officerefined"] .monitor:hover{ filter:none; }
.stage[data-office="officerefined"] .monitor .mailBadge{ display:none !important; }
.stage[data-office="officerefined"] .monitor .screen{ touch-action:none; }
.stage[data-office="officerefined"] .monitor::before{ content:none; }
.stage[data-office="officerefined"] .monitor .stand,
.stage[data-office="officerefined"] .monitor .foot{ display:none; }
/* The base: a slab lying on the desk, a sliver under the case, a short neck. */
.stage[data-office="officerefined"] .monitor .rPlate{ display:block; position:absolute; left:50%; bottom:-11.5%; width:76%; height:10.5%; transform:translateX(-50%); overflow:visible; }
.stage[data-office="officerefined"] .monitor .rPlate polygon, .stage[data-office="officerefined"] .monitor .rPlate path{ stroke:#2a2721; stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.stage[data-office="officerefined"] .monitor .rPlate .top{ fill:var(--rc-shell); }
.stage[data-office="officerefined"] .monitor .rPlate .lip{ fill:var(--rc-lo); }
.stage[data-office="officerefined"] .monitor .rPlate .shine{ fill:var(--rc-hi); stroke:none; opacity:.7; }
.stage[data-office="officerefined"] .monitor .rNeck{
display:block; position:absolute; left:50%; bottom:-3%; width:27%; height:9%; transform:translateX(-50%);
border:2px solid #2a2721; border-radius:30% / 22%;
background:linear-gradient(90deg, var(--rc-edge), var(--rc-hi) 38%, var(--rc-shell) 60%, var(--rc-lo));
}
/* The rear housing: only its top edge and its right side show past the case,
which is what gives the flat drawing its depth. Half the height it had at
the start, at the owner's word. */
.stage[data-office="officerefined"] .monitor .rHood{
display:block; position:absolute; left:10%; top:-3.5%; width:88%; height:98%;
border:3px solid #2a2721; border-radius:13% 15% 10% 10% / 18% 18% 12% 12%;
background:linear-gradient(180deg, var(--rc-shell) 0%, var(--rc-lo) 100%);
}
.stage[data-office="officerefined"] .monitor .rHood i{ position:absolute; top:.3%; height:1.8%; background:#2a2721; opacity:.8; transform:skewX(-24deg); border-radius:2px; }
.stage[data-office="officerefined"] .monitor .rHood i:nth-child(1){ left:20%; width:26%; }
.stage[data-office="officerefined"] .monitor .rHood i:nth-child(2){ left:54%; width:26%; }
/* The front: a rim that shades from a light cream in the middle to a warmer
one at the edge, then the navy well the glass sits in. */
.stage[data-office="officerefined"] .monitor .rFace{
display:block; position:absolute; inset:0; border:3px solid #2a2721;
border-radius:10% 10% 9% 9% / 12% 12% 11% 11%;
background:radial-gradient(ellipse 90% 85% at 42% 36%, var(--rc-hi) 0%, var(--rc-shell) 52%, var(--rc-edge) 100%);
box-shadow:inset 0 0 0 2px var(--rc-edge), inset 0 -4px 0 var(--rc-lo), inset 0 2px 0 rgba(255,255,255,.6);
}
.stage[data-office="officerefined"] .monitor .rWell{
display:block; position:absolute; inset:5% 5% 6% 5%; pointer-events:none;
border-radius:8% 8% 7% 7% / 10% 10% 9% 9%;
background:radial-gradient(circle at 50% 6%, var(--rc-dot) 1.6%, transparent 2.2%), radial-gradient(circle at 91% 87%, var(--rc-dot) 2.2%, transparent 3%), var(--rc-well);
box-shadow:inset 0 2px 0 rgba(0,0,0,.3);
}
.stage[data-office="officerefined"] .monitor .rKnob{
display:block; position:absolute; right:-6%; top:32%; width:8.5%; height:26%;
border:2px solid #2a2721; border-radius:42% / 30%;
background:linear-gradient(90deg, #4a505a, #0d1014 72%); box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
/* THE GLASS. A thick, rounded tube: a bright edge, a dark ring inside it, a
soft fall-off toward the corners, a highlight at the top left; over the
game, scan lines, a vignette, a faint wash of light and a little grain
(the owner: "very subtle, but just enough to sell an old tube TV"). The
game (game.js, refinementGridSvg) fills it edge to edge, so the rounded
corners are the game's corners. 10% brighter, and softened by a glow round
the numbers -- "it's too crisp". Sized as the owner set it: 58.125% x
70.47% of the case, 14.69% in from the left, 15.32% down. */
.stage[data-office="officerefined"] .monitor .screen{
left:14.6875%; top:15.315%; width:58.125%; height:70.47%; right:auto; bottom:auto;
border-radius:13% / 17%; background:#04100f;
box-shadow:
0 0 1.5cqw .2cqw rgba(127,208,220,.20),
0 0 0 .18cqw #0c1426,
0 0 0 .45cqw rgba(255,255,255,.10),
inset 0 0 0 .2cqw #d5dcde,
inset 0 0 0 .55cqw #0a1c22,
inset 0 0 1.6cqw rgba(0,0,0,.95),
inset .35cqw .5cqw .7cqw rgba(255,255,255,.14);
}
.stage[data-office="officerefined"] .monitor .screen svg{
position:absolute; inset:0; width:100%; height:100%;
/* Its own layer: the numbers move every frame, and without this the case, the
well and everything else in the monitor was redrawn with them (measured 29
September 2026: half the drawing work, and the stutter when dragging an item
across the base). */
will-change:transform;
filter:brightness(1.1) blur(.035cqw) drop-shadow(0 0 .12cqw rgba(127,208,220,.55)) drop-shadow(0 0 .5cqw rgba(127,208,220,.30));
}
.stage[data-office="officerefined"] .monitor .screen::before{
content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
background:
radial-gradient(ellipse 60% 34% at 30% 12%, rgba(255,255,255,.22), rgba(255,255,255,0) 100%),
radial-gradient(ellipse 72% 66% at 50% 50%, rgba(140,225,235,.08), rgba(140,225,235,0) 100%),
radial-gradient(ellipse 100% 100% at 50% 50%, rgba(0,0,0,0) 48%, rgba(0,0,0,.48) 100%),
repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, rgba(0,0,0,0) 1px 3px);
}
.stage[data-office="officerefined"] .monitor .screen::after{
content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 2.4cqw rgba(0,0,0,.6);
}
.stage[data-office="officerefined"] .monitor .screen .rGrain{
display:block; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:.11; mix-blend-mode:screen;
background-size:150px 150px;
background-image:url("data:image/svg+xml;utf8,");
}
/* The numbers move every frame, and a glow redrawn every frame is the one
costly thing here: on the phone layout the screen keeps its brightness and
drops the blur and the halos. */
body.phoneLayout .stage[data-office="officerefined"] .monitor .screen svg{ filter:brightness(1.1); }
/* On the phone layout the room is cropped to the middle of the desk, between
the paper stack and the TPS box, and there is only 134px there between the
keyboard and the edge. The monitor is drawn at 88% (the owner: 10% bigger than
the 80% it had) and turned back to 14 degrees instead of 29 ("too distorted"
on a phone). The slant of the top edge was still too much, so the perspective
is weakened until it is half what it was (2.6 degrees down to 1.3 on the glass's
top edge): 80% of the width, where the desktop's is 40%. Placed 3% of the
play area up from where it was in the second round of phone changes (2%,
2%, 1% and 2% back down, about 4.8px per 1% on a 390px-wide phone) and 2.5% to the right
(9.75px, in two moves), which puts the knob a few pixels past the edge of
the room (the owner asked for that, about half the knob) and the case 4px clear of
the keyboard's end. The turn's perspective is a share of the width, so it looks the same at any size. */
body.phoneLayout .stage[data-office="officerefined"] .monitor{ left:58.41%; bottom:38.3%; transform:perspective(80cqw) rotateY(-14deg) scale(.88); }
/* The console: navy all over and one unit -- the keyboard's slab reaches
left over the mouse's box (its ::before) with no seam -- with the raised
keys of keys-refined.svg in it and a small dark ball where the mouse was,
nothing round it. Neither box moves and both stay clickable;
.mouse::after, the hit-area extender, is untouched. */
.stage[data-office="officerefined"] .keyboard{
background:#253252; border-color:#2a2721; border-radius:4px; overflow:visible;
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.28), inset 0 2px 0 rgba(255,255,255,0.14);
}
.stage[data-office="officerefined"] .keyboard::before{
content:''; position:absolute; top:-2px; bottom:-2px; left:-31%; width:31%; background:#253252;
border:2px solid #2a2721; border-right:0; border-radius:4px 0 0 4px;
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.28), inset 0 2px 0 rgba(255,255,255,0.14);
}
.stage[data-office="officerefined"] .keyboard::after{
inset:12% 3%; background:url("/play/skins/keys-refined.svg") center/100% 100% no-repeat;
}
.stage[data-office="officerefined"] .mouse{ background:transparent; border:0; border-radius:0; box-shadow:none; }
.stage[data-office="officerefined"] .mouse::before{
content:''; position:absolute; left:20%; top:18%; width:60%; height:60%; border-radius:50%; box-sizing:border-box;
background:radial-gradient(circle at 36% 30%, #4a545e, #0b0f13 72%); border:1px solid #2a2721; box-shadow:0 1px 0 rgba(0,0,0,0.35);
}
/* The Refined clock. Three designs, cycled by a click (clockPressed):
blue hands, teal hands, and a light grey face with black hands. By day a
small soft shadow falls down and a little right ("roughly 5:15pm, so more
bottom than right" -- the owner). At night the two coloured designs keep
their face and let only the HANDS glow, in their own colour, inside the
dial; the grey design has no glow and dims like anything else. */
.stage[data-office="officerefined"] .clockwrap{ filter:drop-shadow(1px 3px 2px rgba(0,0,0,0.28));
/* Its own layer, and no shadow while it is in the hand: a drop-shadow filter on
something moved by left/top left grey streaks on the white cubicle walls on
iPhone Safari, which repaints the filter's old footprint late. */
will-change:transform; }
.stage[data-office="officerefined"] .clockwrap.freeDragging{ filter:none; }
.stage[data-office="officerefined"] .clockwrap .face{ fill:#1f1f1f; stroke:#f2f0ea; stroke-width:6; }
.stage[data-office="officerefined"] .clockwrap .hand{ stroke:#2f8fdc; }
.stage[data-office="officerefined"] .clockwrap #hourHand{ stroke-width:4; }
.stage[data-office="officerefined"] .clockwrap #minHand{ stroke-width:3; }
.stage[data-office="officerefined"] .clockwrap .cap{ fill:#2f8fdc; }
.stage[data-office="officerefined"] .clockwrap[data-clock-design="teal"] .hand{ stroke:#3fbfa8; }
.stage[data-office="officerefined"] .clockwrap[data-clock-design="teal"] .cap{ fill:#3fbfa8; }
.stage[data-office="officerefined"] .clockwrap[data-clock-design="grey"] .face{ fill:#d9d9d6; stroke:#f6f6f3; }
.stage[data-office="officerefined"] .clockwrap[data-clock-design="grey"] .hand{ stroke:#1f1f1f; }
.stage[data-office="officerefined"] .clockwrap[data-clock-design="grey"] .cap{ fill:#1f1f1f; }
.monitor .screen{ position:absolute; inset:14%; background:var(--monitor); overflow:hidden; container-type:size; }
/* The screensaver's word (play/game.js saverAnimate): laid over the glass and moved by the browser's own animation. Sized and placed in the glass's units (cqh/cqw). */
.saverWord{ position:absolute; left:0; top:0; z-index:2; pointer-events:none; white-space:nowrap; line-height:1; color:#8fe0a0; font-family:'Press Start 2P', monospace; will-change:transform; }
.monitor .screen svg{ width:100%; height:100%; }
/* The monitor's base. A child of .monitor, so it picks up the same
perspective/rotateY skew and stays put if the monitor ever moves. Sized by
what actually renders rather than by the raw numbers: the perspective
transform means the layout box and the painted box differ, and most of the
element sits hidden behind the monitor body. bottom:-14%/height:14% puts
1.89 points of it below the monitor at 5.12 wide -- the ~2%x5% asked for --
with its bottom edge at 61.6%, resting on the desk surface (top 59.5%).
.monitor paints after .deskSurface in the scene markup, without which the
surface buries the base. */
.monitor .stand{ position:absolute; left:50%; bottom:-14%; width:18.3%; height:14%; background:var(--ink); transform:translateX(-50%); }
/* The foot the stand rests on, twice the stand's width and ~1.5 points tall.
Also a child of .monitor, so it inherits the same skew. Like the stand,
these numbers are chosen by what renders, not by the arithmetic: at
width:36.8%/height:5.7% it paints 7.25 wide by 1.53 tall, against the
stand's 3.6. It overlaps the stand's bottom edge slightly so the two
read as one piece, and its own bottom lands at 62.3%, on the surface. */
.monitor .foot{ position:absolute; left:50%; bottom:-20%; width:36.8%; height:5.7%; background:var(--ink); transform:translateX(-50%); }
.mailBadge{ position:absolute; top:-9px; right:-9px; background:var(--danger); color:#fff; border:2px solid var(--ink); border-radius:50%; width:20px; height:20px; font-size:12px; display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace; font-weight:700; }
/* Matches .deskSurface exactly, so a desk toy can only ever be placed on the
desk's surface -- the same way .decorZone bounds wall decor to the cubicle
wall. Keep these four values in sync with .deskSurface. */
.toyZone{ position:absolute; left:16%; right:16%; bottom:27.7%; height:12.8%; pointer-events:none; }
.toyItem{ position:absolute; width:9%; aspect-ratio:1/1; cursor:grab; touch-action:none; user-select:none; pointer-events:auto; }
/* The Pen Holder is the one desk toy issued narrower than the standard 9%.
It ships equipped on every new career and has to share the strip of desk
left of the keyboard with the paper stack and the stapler, and at 9% there
is no gap on that strip wide enough to take it (3.27% left of the papers,
1.47% between the stapler and the mouse, against a 6.07%-of-stage box).
4.8% fits the left gap exactly, and a narrow pen cup is the right shape for
the object anyway -- the static pen holder element this replaced was
hand-sized at 4.5% of the stage for the same reason. Since raised from that
original 4.8% by a quarter, so it reads at desk scale rather than as a
thimble; it no longer fits the gap left of the paper stack, which is fine
now that it isn't placed on the desk by default. */
/* aspect-ratio matches the icon's 20x28 viewBox, so the cup FILLS its box
instead of letterboxing inside the default square one. That is what makes
it render 20% wider and 40% taller than the old 20x24-in-a-square version
at the same 4.8% width -- the extra width was already there as dead space. */
.toyItem[data-item-id="penholder"]{ width:6%; aspect-ratio:20/28; }
/* The Desk Calendar: a page-a-day block, drawn 44x50. */
.toyItem[data-item-id="deskcalendar"]{ width:5.4%; aspect-ratio:44/50; }
/* Sizes against the rest of the desk (the owner, 16 September 2026): the
Fidget Cube and the Rubber Duck read too big -- a tenth smaller, then the
cube 5% and the duck 10% smaller again; the Desk Plant a twentieth bigger,
and its Marketplace picture with it. */
.toyItem[data-item-id="fidget"]{ width:7.7%; }
.toyItem[data-item-id="duck"]{ width:7.29%; }
.toyItem[data-item-id="succulent"]{ width:9.45%; }
/* Red Stapler. The top presses in and the base lifts a fraction, so the thing
compresses like a real stapler without its resting silhouette moving at all.
transform-box:view-box means these px values are viewBox user units -- 24ths
of the icon -- which is why sub-pixel numbers are the right magnitude here. */
.staplerTop, .staplerBase{ transform-box:view-box; }
.toyItem.clacking .staplerTop{ animation:staplerTopClack 150ms cubic-bezier(.35,0,.25,1); }
.toyItem.clacking .staplerBase{ animation:staplerBaseClack 150ms cubic-bezier(.35,0,.25,1); }
@keyframes staplerTopClack{
0%{ transform:translateY(0); } 28%{ transform:translateY(.78px); }
48%{ transform:translateY(.78px); } 75%{ transform:translateY(-.10px); }
100%{ transform:translateY(0); }
}
@keyframes staplerBaseClack{
0%{ transform:translateY(0); } 28%{ transform:translateY(-.18px); }
48%{ transform:translateY(-.18px); } 75%{ transform:translateY(.04px); }
100%{ transform:translateY(0); }
}
/* Rubber Duck. The body takes most of the squeeze; the head compresses less
and settles toward the body, then both overshoot on release. fill-box so
each group scales about its own centre rather than the icon's origin. */
.duckBody, .duckHead{ transform-box:fill-box; transform-origin:center; }
.toyItem.squeezing .duckBody{ transform:scaleX(.90) scaleY(.82); }
.toyItem.squeezing .duckHead{ transform:translate(-.25px,1.05px) scaleX(.96) scaleY(.92); }
.toyItem.releasing .duckBody{ animation:duckBodyRelease .34s cubic-bezier(.2,.8,.25,1); }
.toyItem.releasing .duckHead{ animation:duckHeadRelease .34s cubic-bezier(.2,.8,.25,1); }
@keyframes duckBodyRelease{
0%{ transform:scaleX(.90) scaleY(.82); } 48%{ transform:scaleX(1.035) scaleY(1.055); }
72%{ transform:scaleX(.985) scaleY(.98); } 100%{ transform:scaleX(1) scaleY(1); }
}
@keyframes duckHeadRelease{
0%{ transform:translate(-.25px,1.05px) scaleX(.96) scaleY(.92); }
48%{ transform:translate(.1px,-.25px) scaleX(1.015) scaleY(1.025); }
72%{ transform:translate(0,.08px) scaleX(.995) scaleY(.995); }
100%{ transform:translate(0,0) scaleX(1) scaleY(1); }
}
/* Mini Zen Garden. The rake sweeps left-to-right across the tray; the jostle
is applied to the inner