:root{color-scheme:light;--ink:#17313c;--muted:#5c747c;--mint:#d7e9df;--yellow:#ffc666;--red:#e75b47}
*{box-sizing:border-box}
html{background:#edf2ee}
body{margin:0;color:var(--ink);font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(ellipse at 80% 0,#d5e8dd,transparent 50%),#edf2ee;min-height:100vh}
button{font:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid #e46726;outline-offset:4px}
.machine{width:min(1080px,calc(100% - 40px));margin:auto;padding:32px 0 40px}
.masthead{display:flex;align-items:center;gap:18px;padding:0 4px 23px}
.masthead img{flex:none;width:64px;height:64px;filter:drop-shadow(0 4px 5px #17313c18)}
.eyebrow,.stat-label,.console-label{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#456a62}
.eyebrow{margin:0 0 6px}h1,h2{line-height:1.05;letter-spacing:-.055em}h1{font-size:clamp(2rem,4.6vw,3.7rem);margin:0;font-weight:850}h1 span{color:#528575}
.masthead p:last-child{margin:8px 0 0;color:var(--muted);font-size:.93rem}
.game-panel{position:relative;overflow:hidden;border:1px solid #c5d4d0;border-radius:24px;background:#fff;box-shadow:0 18px 55px #14352e14;padding:20px}
.status-bar{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding:2px 6px 15px;border-bottom:1px solid #e5ebe7}
.status-bar>div{display:flex;align-items:baseline;gap:8px}.status-bar strong{font-size:1.8rem;font-variant-numeric:tabular-nums;letter-spacing:-.04em}.stat-unit{font-size:.7rem;color:var(--muted)}
#soundButton{margin-left:auto;min-height:42px;padding:7px 14px;border:1px solid #d2ded7;border-radius:10px;background:#f0f5f1;color:var(--ink);font-size:.8rem;font-weight:700}
.pressure-heading{display:flex;justify-content:space-between;margin:14px 2px 6px;font-size:.65rem;letter-spacing:.13em;font-weight:800}
#pressureDisplay{color:#b74e24}progress{appearance:none;display:block;width:100%;height:9px;accent-color:#dd7041;border:0;border-radius:10px;overflow:hidden;background:#e7eeeb}progress::-webkit-progress-bar{background:#e7eeeb}progress::-webkit-progress-value{background:linear-gradient(90deg,#eab35a,#e45948);border-radius:10px}progress::-moz-progress-bar{background:#dd7041}
.instruction{margin:13px 0;text-align:center;color:var(--muted);font-size:.84rem}kbd{padding:1px 5px;border:1px solid #d4dfd9;border-bottom-width:2px;border-radius:4px;background:#f4f7f5;font:700 .85em system-ui}
.bathroom{position:relative;border:1px solid #bccfc8;border-radius:14px;overflow:hidden;background:repeating-linear-gradient(0deg,transparent 0 33px,#b4d0c355 34px 35px),repeating-linear-gradient(90deg,#dbece3 0 64px,#b4d0c355 65px 66px);box-shadow:inset 0 12px 25px #73948715}
.room-sign{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:20px 24px 13px;font-size:.58rem;letter-spacing:.15em;font-weight:800;color:#597769}.room-sign>span:first-child{background:#274a45;color:#fff;padding:6px 12px;border-radius:3px;font-size:.7rem;box-shadow:0 3px 0 #102d2c22}
.stall-row{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:88%;max-width:850px;margin:0 auto}
.stall{position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:0;border:0;background:transparent;color:var(--ink);text-align:center;-webkit-tap-highlight-color:transparent}
.stall:disabled{cursor:default;opacity:1}.stall-number{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;background:#284743;color:#e4f2e8;border-radius:5px 5px 0 0;font-size:.68rem;letter-spacing:.14em;font-weight:800}
.occupancy-light{width:7px;height:7px;background:#8ed8b0;border-radius:50%;box-shadow:0 0 7px #8ed8b055}.stall[data-phase="occupied"] .occupancy-light{background:#ef966c}.stall.clogged .occupancy-light{background:#ffb03a;box-shadow:0 0 12px #ffb03a}
.cubicle{position:relative;display:block;width:100%;aspect-ratio:220/300;isolation:isolate;perspective:700px;background:linear-gradient(90deg,#adc8c344,#fff8 50%,#70968d55),repeating-linear-gradient(0deg,transparent 0 28px,#a3bbb7 29px 30px),repeating-linear-gradient(90deg,#cbdcd7 0 42px,#a3bbb7 43px 44px);box-shadow:inset 0 12px 20px #2445432b}
.fixtures{position:absolute;inset:0;width:100%;height:100%}.bowl-bubbles{opacity:0;transform-origin:110px 173px}.stall.clogged .bowl-bubbles{opacity:1;animation:bubbles .7s infinite alternate}.stall.clogged .bowl-water{fill:#bddc69}
.partition-post{position:absolute;top:0;bottom:0;width:5.5%;z-index:5;background:linear-gradient(90deg,#416e68,#719a91 50%,#426e65);box-shadow:2px 0 4px #254d4933}.post-left{left:0}.post-right{right:0}.partition-post:after{content:"";position:absolute;bottom:0;left:25%;width:50%;height:9%;background:linear-gradient(90deg,#8b9d9f,#d8e3e6,#869a9d)}
.partition-door{position:absolute;inset:4% 6% 13%;z-index:4;background:linear-gradient(100deg,#6e9f91,#8bb5a4 50%,#6d9c8e);border:2px solid #436e63;border-radius:2px;box-shadow:inset 0 0 0 5px #ffffff12,4px 8px 14px #193b3430;transform-origin:left center;transform:rotateY(-78deg);transition:transform .45s ease,filter .45s;filter:brightness(.85);backface-visibility:hidden}
.stall[data-phase="occupied"] .partition-door{transform:rotateY(0);filter:brightness(1)}
.door-handle{position:absolute;right:8%;top:49%;height:15%;width:5%;border-radius:4px;background:linear-gradient(90deg,#d9e1e3,#8ea3ac);box-shadow:2px 3px 2px #284b4b55}.door-lock{position:absolute;right:6%;top:38%;width:9%;aspect-ratio:1;border-radius:50%;background:#e1e6e4;box-shadow:0 1px 3px #234}.door-lock:after{content:"";position:absolute;inset:30%;border-radius:50%;background:#c0644e}.door-vent{position:absolute;bottom:12%;left:23%;right:23%;height:13%;background:repeating-linear-gradient(0deg,#365e5344 0 2px,transparent 3px 6px)}.door-sign{position:absolute;top:20%;left:24%;right:24%;border:1px solid #426c5f88;border-radius:3px;padding:4px 0;font-size:clamp(.45rem,1vw,.67rem);letter-spacing:.1em;color:#254c40;font-weight:700}
.patron{position:absolute;z-index:3;width:48%;height:64%;left:26%;bottom:1%;opacity:0;pointer-events:none;--skin:#d7a279;--shirt:#cc776a;--hair:#433029}.patron svg{height:100%;width:100%;overflow:visible}.patron-1{--skin:#985f43;--shirt:#5d82b0;--hair:#282728}.patron-2{--skin:#edbf98;--shirt:#c39742;--hair:#8e6142}.person-face{fill:var(--skin)}.person-skin{stroke:var(--skin)}.person-shirt{fill:var(--shirt)}.person-hair{fill:var(--hair)}
.stall[data-phase="arriving"] .patron{animation:arrive .7s ease-out both}.stall[data-phase="occupied"] .patron{opacity:1;transform:translateY(-11%) scale(.78)}.stall[data-phase="leaving"] .patron{z-index:6;animation:leave .7s ease-in both}.stall[data-phase="arriving"] .person-leg,.stall[data-phase="leaving"] .person-leg{transform-origin:50px 116px;animation:walk .18s infinite alternate}.stall .leg-right{animation-delay:-.18s!important}
.stall-condition{position:relative;z-index:7;min-height:36px;margin-top:8px;padding:6px 3px;border-radius:7px;background:#f5faf6;color:#516d66;font-size:clamp(.65rem,1.5vw,.83rem);font-weight:750;box-shadow:0 2px 5px #234b3910}.stall.clogged .stall-condition{background:#ffc566;color:#4a320d}.stall-key{position:absolute;z-index:8;right:9%;bottom:65px;display:grid;place-items:center;width:23px;height:23px;background:#fff;border-radius:6px;font-size:.7rem;font-weight:800;box-shadow:0 2px 8px #183a3930}
.warning{position:absolute;right:12%;top:12%;z-index:7;display:none;place-items:center;width:30px;height:30px;border-radius:50%;background:#ffbf59;color:#543016;font-size:1.3rem;font-weight:900;box-shadow:0 4px 10px #a45b1533}.stall.clogged .warning{display:grid;animation:alertPulse .65s infinite alternate}
.room-floor{position:relative;height:66px;margin-top:-8px;background:linear-gradient(180deg,#b8cac4,#d9e1dc);border-top:2px solid #9fb7b0}.floor-note{position:absolute;right:20px;bottom:17px;font-size:.55rem;letter-spacing:.13em;color:#526c64;font-weight:800}.wet-floor{position:absolute;left:8%;bottom:10px;text-align:center;background:#f6bd57;border:2px solid #c79132;color:#513e1e;padding:1px 6px 5px;transform:rotate(-5deg);clip-path:polygon(15% 0,85% 0,100% 100%,0 100%);font-size:19px;line-height:1}.wet-floor small{display:block;font-size:6px;line-height:1.3;font-weight:900;margin-top:2px}
.plunge-tool{position:absolute;left:57%;top:32%;height:37%;width:5%;background:linear-gradient(90deg,#b17640,#e4b272);border-radius:3px;z-index:7;opacity:0;transform:rotate(22deg);transform-origin:bottom}.plunge-tool:after{content:"";position:absolute;left:-135%;bottom:-5%;width:370%;height:25%;border-radius:50% 50% 15% 15%;background:#d95345;box-shadow:0 3px 0 #8b322e}.stall[data-phase="cleared"] .plunge-tool{animation:plunge .5s ease-out}.splash{position:absolute;left:35%;right:30%;top:50%;height:19%;z-index:6;border:4px dotted #6bbfce;border-radius:50%;opacity:0}.stall[data-phase="cleared"] .splash{animation:splash .5s ease-out}
.fuse{height:5px;margin:13px 0 0;overflow:hidden;border-radius:5px;background:#edf1ee}.fuse span{display:block;height:100%;width:0;background:#df9544;border-radius:5px}
.console{min-height:83px;margin:12px 0 0;padding:13px 17px;border-radius:12px;background:#1e3b37;color:#dfefdf}.console-label{margin:0;color:#94c5b1;font-size:.57rem}.dispatch{margin:5px 0 0;font-size:clamp(.8rem,1.7vw,.95rem);line-height:1.45;font-weight:500}
.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;overflow:auto;padding:16px;background:#173b32b8;backdrop-filter:blur(5px)}.overlay[hidden]{display:none}.overlay-card{width:min(590px,100%);max-height:100%;overflow:auto;padding:20px 24px;border-radius:14px;background:#f1f5ef;border:1px solid #d6e3d7}.overlay-card h2{font-size:clamp(1.6rem,3vw,2.25rem);margin:6px 0 10px}.overlay-card p{max-width:75ch;margin:8px 0;color:#526c60;font-size:.9rem}.overlay-card .eyebrow{font-size:.62rem}.play-button{min-height:48px;padding:10px 24px;margin-top:7px;border:0;border-radius:10px;background:#275c48;color:white;font-weight:750;box-shadow:0 3px 0 #153f30}.play-button:hover{background:#326e56}.play-button:active{transform:translateY(2px);box-shadow:0 1px 0 #153f30}.overlay-card .overlay-footnote{font-size:.72rem;margin-top:13px;color:#687e70}
.fine-print{margin-top:22px;padding:0 8px}.fine-print h2{margin:0 0 8px;font-size:1.1rem;letter-spacing:-.02em}.fine-print p{margin:0 0 12px;color:var(--muted);font-size:.83rem;max-width:95ch}.fine-print nav{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:.8rem}.embedded .fine-print nav{display:none}a{color:#2d6954}
@keyframes arrive{from{opacity:0;transform:translate(-48%,30%) scale(1.12)}20%{opacity:1}to{opacity:1;transform:translateY(-11%) scale(.78)}}
@keyframes leave{from{opacity:1;transform:translateY(-11%) scale(.78)}60%{opacity:1}to{opacity:0;transform:translate(60%,30%) scale(1.12)}}
@keyframes walk{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
@keyframes bubbles{from{transform:translateY(0) scale(1)}to{transform:translateY(-7px) scale(1.03)}}
@keyframes alertPulse{to{transform:translateY(-3px)}}
@keyframes plunge{0%,100%{opacity:0;transform:rotate(22deg) translateY(-15%)}20%,70%{opacity:1;transform:rotate(22deg) translateY(10%)}}
@keyframes splash{25%{opacity:.8}to{opacity:0;transform:scale(1.8)}}
@media(max-width:600px){.machine{width:calc(100% - 16px);padding:15px 0 24px}.masthead{gap:10px;padding:0 5px 16px}.masthead img{width:42px;height:42px}.masthead .eyebrow{font-size:.49rem;letter-spacing:.09em}h1{font-size:clamp(1.6rem,6.6vw,2.3rem)}.masthead p:last-child{font-size:.75rem}.game-panel{padding:10px;border-radius:16px}.status-bar{gap:12px;padding:2px 2px 10px}.status-bar>div{gap:4px}.status-bar strong{font-size:1.35rem}.stat-label{font-size:.55rem;letter-spacing:.06em}.stat-unit{display:none}#soundButton{min-height:36px;font-size:.65rem;padding:6px 8px}.instruction{font-size:.73rem}.room-sign{padding:14px 10px 10px}.room-sign>span:first-child{font-size:.55rem;padding:5px 8px}.room-sign>span:last-child{font-size:.43rem;max-width:110px;text-align:right}.stall-row{width:96%;gap:5px}.stall-number{font-size:.5rem;padding:6px;letter-spacing:.09em}.occupancy-light{width:5px;height:5px}.stall-condition{font-size:.61rem;min-height:38px;margin-top:5px}.stall-key{width:18px;height:18px;font-size:.6rem;bottom:51px;right:9%;border-radius:4px}.warning{width:23px;height:23px;font-size:1rem}.room-floor{height:56px}.floor-note{font-size:.45rem;right:9px}.console{padding:11px 13px;min-height:83px}.overlay-card{padding:15px}.overlay-card p{font-size:.8rem}.play-button{width:100%;font-size:.85rem}.fine-print{padding:0 5px}.door-sign{font-size:.35rem;padding:2px 0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.stall[data-phase="arriving"] .patron,.stall[data-phase="leaving"] .patron{opacity:1;transform:none}.stall[data-phase="cleared"] .plunge-tool{opacity:1}}