/* ========================================================================= AANGAN · FOUR MORE ROOMS — Cups · Profile · Group · Wall (skin) ------------------------------------------------------------------------- Paired with js/45-rooms.js, which paints each room. This file is the shell and, more importantly, THE LIGHT — the one thing that has to be identical in every room or the house stops reading as one house. Every plate here gets the same warm wash from the same upper-left source, laid on top rather than drawn in, exactly as the house kit intends. Loads after almirah.css so it can sit alongside the two rooms that already exist (the games almirah and the kirana) without either of them changing. A SKIN. Every control keeps its element, its id and its wiring; the room is one layer behind them. Delete this file and the old panes come back. ========================================================================= */ /* The pane has to be a positioning context and has to reach the bottom of the scroller — a room that stops where its content stops is a picture hanging in mid-air, which is exactly what the games pane did before it was given a min-height. */ #homeOv #paneTour, #homeOv #paneSettings, #homeOv #paneGroup, #homeOv #paneWall{position:relative;z-index:1;min-height:100%;box-sizing:border-box} /* AND THE ROOM GETS ITS OWN SPACE. Each pane is pushed down past its head band, exactly as the games pane is pushed down past the almirah. Without this the first controls land on top of the room's one identifying object: the profile card sat across the mirror in pale chalk on pale glass and could not be read, the group code covered the calendar completely, and the notice board's cream field showed round the achievement tabs as a big empty rectangle that looked like a rendering fault. All three were invisible in the markup and obvious in one screenshot. */ #homeOv #paneTour {padding-top:222px} #homeOv #paneSettings{padding-top:262px} #homeOv #paneGroup {padding-top:202px;padding-bottom:142px} #homeOv #paneWall {padding-top:212px} /* the room itself: bled sideways, because the pane is inset from the screen and `inset:0` leaves a strip of the old background down both edges */ #homeOv .pane > .hr{position:absolute;top:0;bottom:0;left:-40px;right:-40px; z-index:0;pointer-events:none;overflow:hidden} #homeOv .pane > .hr > i{position:absolute;left:0;right:0;display:block} #homeOv .pane > .hr .hr-lit, #homeOv .pane > .hr .hr-vig{top:0;bottom:0} /* THE HEAD BAND: pinned to the top, fixed height, and it is the only part of a room with an edge. Everything below it is a surface, so nothing the room draws can ever land across a control — see the block comment in 45-rooms.js for the render that made this necessary. */ #homeOv .pane > .hr .hr-head{top:0;background-repeat:no-repeat; background-position:0 0;background-size:100% 100%} #homeOv #paneTour > .hr .hr-head{height:210px} #homeOv #paneSettings > .hr .hr-head{height:250px} #homeOv #paneGroup > .hr .hr-head{height:190px} #homeOv #paneWall > .hr .hr-head{height:200px} /* THE BODY: no top edge, no bottom edge. A gradient plus a tiling texture, which is correct at 700px and at 6,800 — the Wall pane really is that tall — and costs nothing to redraw when a list grows. */ #homeOv .pane > .hr .hr-body{top:0;bottom:0} /* THE SURFACE, over the body's gradient and under the head band. A SEPARATE LAYER rather than a second background-image on .hr-body, for one practical reason: the gradients below are written as the `background` shorthand, and setting backgroundImage from JS on that same element would drop them. Its own layer also lets the material carry its own opacity without dragging the gradient with it. Repeat-only — no background-size — so the tile keeps its drawn scale at any pane height instead of stretching, which is what turns a texture into a smear on the 6,800px Wall. */ #homeOv .pane > .hr .hr-tex{top:0;bottom:0;background-repeat:repeat; background-position:0 0} /* THE FOOT: only the baithak has something down there. */ #homeOv .pane > .hr .hr-foot{bottom:0;height:130px; background-repeat:no-repeat;background-position:0 100%;background-size:100% 100%} /* ---- Cups: the inside of the showcase ---- Dark, because that is what makes silver read, and because pale chalk controls need a dark ground. One faint sheen of glass falls across it. */ #homeOv #paneTour > .hr .hr-body{ background: linear-gradient(104deg, rgba(255,255,255,.055) 0 26%, rgba(255,255,255,0) 26.5% 52%, rgba(255,255,255,.03) 52.5% 60%, rgba(255,255,255,0) 60.5%), linear-gradient(180deg,#3a281a 0, #2b1d12 180px, #241a10 100%)} /* ---- Profile: under the dressing table ---- Sagwan going into shadow, with the grain of the apron continuing down. */ #homeOv #paneSettings > .hr .hr-body{ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='90'%3E%3Cg fill='none' stroke='%23472a13' stroke-opacity='.16'%3E%3Cpath d='M0 14q35 -7 70 0t70 0' stroke-width='1.2'/%3E%3Cpath d='M0 47q35 6 70 0t70 0' stroke-width='.9'/%3E%3Cpath d='M0 74q35 -5 70 0t70 0' stroke-width='1.4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23a4703c' stroke-opacity='.14'%3E%3Cpath d='M0 30q35 5 70 0t70 0' stroke-width='1'/%3E%3Cpath d='M0 61q35 -6 70 0t70 0' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(180deg,#6d4c2c 0, #4a331c 150px, #2c1d0f 100%)} /* ---- Group: the dado, and the wall's own sheen on oil paint ---- */ #homeOv #paneGroup > .hr .hr-body{ background: linear-gradient(100deg, rgba(255,255,255,.07) 0 18%, rgba(255,255,255,0) 40%), linear-gradient(180deg,#5b6a49 0, #4a5a3b 240px, #33402a 100%)} /* ---- Wall: limewash going into the eave's shadow ---- The grain tile is 29x23 with the marks scattered: a small tile with a few dots in it is polka dots at any zoom, which is the loudest generated tell there is. */ #homeOv #paneWall > .hr .hr-body{ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='23'%3E%3Cg fill='%238d7d5c' fill-opacity='.22'%3E%3Ccircle cx='3.1' cy='4.2' r='.5'/%3E%3Ccircle cx='19.4' cy='2.6' r='.34'/%3E%3Ccircle cx='24.8' cy='9.1' r='.44'/%3E%3Ccircle cx='11.2' cy='12.8' r='.3'/%3E%3Ccircle cx='5.4' cy='19.6' r='.42'/%3E%3C/g%3E%3Cg fill='%23fffaeb' fill-opacity='.26'%3E%3Ccircle cx='8.3' cy='7.6' r='.3'/%3E%3Ccircle cx='15.9' cy='19.2' r='.34'/%3E%3Ccircle cx='26.2' cy='21.1' r='.26'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(180deg,#7c6d50 0, #5c4f37 200px, #3f3423 560px, #2b2216 100%)} /* ---------------- THE LIGHT ---------------- ONE lamp, upper left, every room, always. Two layers, because a single radial reads as a spotlight: a broad warm bloom that says which way the window is, and a tighter hot core that says how far away it is. This is the single biggest thing holding the house together, and it is why it is laid on OVER the plates rather than painted into any one of them. */ #homeOv .pane > .hr .hr-lit{ background: radial-gradient(58% 30% at 14% 4%, rgba(255,246,224,.34), rgba(255,246,224,0) 70%), radial-gradient(130% 60% at 20% 0%, rgba(255,230,174,.18), rgba(255,230,174,0) 64%); mix-blend-mode:soft-light} /* and the corners fall away, so the room has a depth no plate has to draw */ #homeOv .pane > .hr .hr-vig{ background:radial-gradient(120% 60% at 34% 14%, rgba(20,11,4,0) 46%, rgba(20,11,4,.26) 80%, rgba(20,11,4,.44) 100%)} /* ---------------- the tab's own accent ---------------- Rule 3 of the house: the palette leads and a room may add ONE accent. These four take brass, rose, bottle-green and indigo, and the only thing the accent is allowed to touch is a section heading's rule, so it reads as the room's colour without repainting any control. */ #homeOv #paneTour { --hr-accent:#c8963f } #homeOv #paneSettings{ --hr-accent:#d9628a } #homeOv #paneGroup { --hr-accent:#7fa06a } #homeOv #paneWall { --hr-accent:#5f9bd8 } /* NO ACCENT RULE UNDER THE HEADINGS. There was a 52px bar drawn under every pane's

in that pane's accent colour, and on Profile the accent is rose — so it came out as a short pink line floating under SHOWING OFF with nothing to explain it (owner 2026-08-01: "there's a random pink line"). It was decoration with no job: the room already says which room it is, far better than a coloured dash can. The accent variables stay, because they are the room's colour and other things may want them later; nothing paints with them now. */ #homeOv #paneTour > h3, #homeOv #paneTour .sthdr, #homeOv #paneSettings > h3, #homeOv #paneSettings .sthdr, #homeOv #paneGroup > h3, #homeOv #paneGroup .sthdr, #homeOv #paneWall > h3, #homeOv #paneWall .sthdr{ position:relative;z-index:1} /* everything the pane already contains rides above the room */ #homeOv #paneTour > *:not(.hr), #homeOv #paneSettings > *:not(.hr), #homeOv #paneGroup > *:not(.hr), #homeOv #paneWall > *:not(.hr){position:relative;z-index:1} /* the identity row is a SIBLING of the pane; without this the room paints over the avatar and the marble count, the same way the almirah's wall did */ #homeOv:has(#paneTour.on) .homehead, #homeOv:has(#paneSettings.on) .homehead, #homeOv:has(#paneGroup.on) .homehead, #homeOv:has(#paneWall.on) .homehead{z-index:2} /* THE COURTYARD MUST NOT SHOW THROUGH AT THE TOP. Same measured cause as the games room: a pane is its own containing block, so nothing inside it can reach above its box, and the header sits above that box. The lawn is taken out of the picture while one of these rooms is open — which also stops a few dozen grass tufts and a bee animating where nobody can see them — and #homeOv carries the room's own wall colour behind the header. */ #homeOv:has(#paneTour.on) > .ck-floor, #homeOv:has(#paneSettings.on) > .ck-floor, #homeOv:has(#paneGroup.on) > .ck-floor, #homeOv:has(#paneWall.on) > .ck-floor{display:none} #homeOv:has(#paneTour.on), #homeOv:has(#paneSettings.on), #homeOv:has(#paneGroup.on), #homeOv:has(#paneWall.on){background:#d9c9a6} @media (prefers-reduced-motion: reduce){ #homeOv .pane > .hr{transition:none} } /* ========================================================================= THE IDENTITY ROW HAS TO SURVIVE THE ROOM IT IS OVER (2026-08-12) ------------------------------------------------------------------------- MEASURED, not guessed: `.claude/mp/header-ink.js` hides the player's name and the marble count, photographs the pixel where each one WAS — so the ground is whatever actually painted it, with nothing to infer — and compares that against the element's own computed colour. It found 10 of 14 readings failing WCAG AA, including the player's own name at 1.3:1 on the almirah's pink and 1.5:1 in the group, wall and dressing rooms. THE CAUSE IS THE ONE THIS FILE ALREADY WARNS ABOUT, twenty lines up: "the identity row is a SIBLING of the pane". The rooms below it each paint their own wall — #d9c9a6 here, the almirah's pink there — and the header did not follow. Its text is chalk-white because the courtyard it was designed on is a dark lawn. Put paper behind it and the player's own name goes to a ghost. almirah.css hit this exact shape once before and its comment is the warning label: "everything that is not a plaque ... was pale chalk on pale paper and effectively invisible." This is that same flip, moved up to the header, and it reuses the room's OWN --hp-ink tokens rather than inventing a colour, so there is one definition of "ink on paper" in this app and not two. Two grounds, two answers, because arithmetic decides it and not taste: PAPER rooms — flip the chalk tokens to ink. Measured after: 4.5:1+. THE COURTYARD — the lawn is rgb(130,145,95), luminance .258. At that value NOTHING passes AA: white lands at 3.4:1 and the brown ink at 3.5:1. The only text that clears 4.5 on it is near-black, which is not what chalk is. So the ground moves instead of the ink — a shade under the eave, dark enough that white clears the bar (a .15 black wash takes the lawn to luminance .181 and white to 4.55:1; .20 is used for margin) and soft enough to read as shade rather than a panel. ========================================================================= */ #homeOv:has(#paneGames.on) .homehead, #homeOv:has(#paneGroup.on) .homehead, #homeOv:has(#paneWall.on) .homehead, #homeOv:has(#paneTour.on) .homehead, #homeOv:has(#paneSettings.on) .homehead{ --ck-chalk:var(--hp-ink); --ck-chalk-2:var(--hp-ink-2); --ck-chalk-3:var(--hp-ink-3); /* the chalk shadow is a DARK halo meant to lift white off a dark lawn; keep it under ink on paper and every letter grows a bruise */ --ck-shadow:none; } /* the shade under the eave — courtyard only, and behind the row's own children (z-index:-1 inside a positioned .homehead), so it darkens the lawn without tinting the avatar, the marble or the language pills */ #homeOv:has(#panePlay.on) .homehead::before{ content:"";position:absolute;inset:-8px -12px -4px;z-index:-1;pointer-events:none; /* .34 measured out at exactly 4.5:1 — ON the bar, which is not over it, and one antialiased pixel either way flips the verdict. .44 measures 5.4:1. */ background:linear-gradient(180deg, rgba(20,28,12,.44) 0%, rgba(20,28,12,.26) 62%, rgba(20,28,12,0) 100%); }