/* THE ATTIC'S SKIN: the dollhouse (her pick, 2026-10-24, night). The pie (index.html) and the chart room (chart.html) wear it.
   ONE STRUCTURE, MANY SKINS: pie.css and chart.css are the structure (the table, the tilt, the pie and its sky, the paper
   slips, the doors) and never change for a look. A skin is a file like this one, loaded after them on a page whose <html>
   carries data-skin, that only recolours and decorates.
   This skin: everything is a miniature seen close. The wallpaper is a real scrap, a night print of moons and stars far too
   big for the room, torn off short of the right wall where the bare plywood shows and the paste squeezed out. The floor is
   plywood with grain the size of your hand and a bead of glue along the baseboard. The table is a dollhouse table: boards
   too wide for it, glue shining in every joint. A coin the size of a plate lies beside the pie. The lamp is a thimble over
   a matchstick. The rug under the doors is a scrap of felt. The paper slips are glued down at the corners. One giant pin
   holds the wallpaper, so you know how small the room is.
   The sister file for Madame Gidget's cabinet is lots/paradox/site/skin-dollhouse.css; keep the shared parts the same. */

[data-skin="dollhouse"] { --ply: #d8b887; --ply-dark: #a9793f; --paste: #fff3d2; --felt: #86a082; --pewter: #9c9ca8; }

/* THE WALLPAPER: night blue ground, printed with moons the size of saucers and stars the size of a hand, offset row by
   row, a seam every two tiles. The body goes clear so the paper shows through everything in front of it. */
[data-skin="dollhouse"] { background-color: #1b1740;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 638px, #00000030 638px 640px),
    radial-gradient(circle at 118px 102px, #1b1740 0 52px, transparent 53px),
    radial-gradient(circle at 150px 120px, #d9cfa3cc 0 62px, #a99d7acc 63px 68px, transparent 69px),
    radial-gradient(ellipse 46px 7px at 262px 250px, #d9cfa3cc 0 96%, transparent 100%),
    radial-gradient(ellipse 7px 46px at 262px 250px, #d9cfa3cc 0 96%, transparent 100%),
    radial-gradient(ellipse 26px 5px at 58px 280px, #cfc6e6a6 0 96%, transparent 100%),
    radial-gradient(ellipse 5px 26px at 58px 280px, #cfc6e6a6 0 96%, transparent 100%),
    radial-gradient(ellipse 26px 5px at 300px 40px, #cfc6e6a6 0 96%, transparent 100%),
    radial-gradient(ellipse 5px 26px at 300px 40px, #cfc6e6a6 0 96%, transparent 100%),
    radial-gradient(ellipse 26px 5px at 0 40px, #cfc6e6a6 0 96%, transparent 100%),
    radial-gradient(ellipse 5px 26px at 0 40px, #cfc6e6a6 0 96%, transparent 100%),
    repeating-linear-gradient(0deg, transparent 0 3px, #ffffff06 3px 4px);
  background-size: 100% 100%, 320px 320px, 320px 320px, 320px 320px, 320px 320px, 320px 320px, 320px 320px, 320px 320px, 320px 320px, 320px 320px, 320px 320px, 100% 100%;
  background-attachment: fixed; }
[data-skin="dollhouse"] body { background: transparent; }

/* THE FLOOR: plywood boards a hand wide, the grain drawn in arcs the size of a saucer, a painted baseboard where it
   meets the wall and the glue that squeezed out when the baseboard went on. It stays at the foot of the view, so the
   room is always stood in, and it lies behind everything in the room. */
[data-skin="dollhouse"] body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 78px; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, #f3e6cf 0, #efe0c4 9px, #cdb68f 12px, #5a3a1c 13px, #fff3d2c4 14px, #fff3d2c4 17px, #fff3d24d 19px, #0000 21px, #00000040 21px, transparent 30px),
    repeating-radial-gradient(ellipse 760px 130px at 34% 130%, transparent 0 24px, #00000016 24px 30px),
    repeating-radial-gradient(ellipse 520px 100px at 82% -50%, transparent 0 19px, #0000001c 19px 24px),
    repeating-linear-gradient(90deg, #c08a52 0 150px, #7a4e26 150px 155px, #fff3d266 155px 157px, #b27b45 157px 312px, #7a4e26 312px 318px, #fff3d266 318px 320px);
  box-shadow: 0 -6px 18px #00000055; }

/* THE TORN EDGE: the wallpaper scrap stops short of the right wall. Bare plywood shows, with the paste smeared along
   the edge and one drip that ran before it dried. */
[data-skin="dollhouse"]::after { content: ""; position: fixed; top: 0; right: 0; bottom: 0; width: 56px; z-index: -1; pointer-events: none;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 6px 94%, 16px 86%, 3px 74%, 15px 61%, 7px 50%, 18px 38%, 4px 27%, 13px 16%, 5px 7%);
  background:
    radial-gradient(ellipse 9px 22px at 15px 44%, #fff3d2c4 0 60%, transparent 62%),
    linear-gradient(90deg, #fff3d2b8 0 12px, #fff3d255 20px, transparent 30px),
    repeating-linear-gradient(0deg, transparent 0 34px, #00000012 34px 40px),
    linear-gradient(90deg, #cfae7c, #ddbf8f 50%, #c6a271); }

/* THE PIN: one giant pin through the paper near its torn edge, a teal glass head, a steel shaft, leaning in. It is the
   thing that says how small the room is. It stands on the wall, behind whatever is in the room. */
[data-skin="dollhouse"]::before { content: ""; position: fixed; top: 54px; right: 26px; width: 46px; height: 250px; z-index: -1; pointer-events: none;
  transform: rotate(16deg); transform-origin: 23px 23px;
  clip-path: polygon(0 0, 100% 0, 100% 232px, 26px 232px, 23px 250px, 20px 232px, 0 232px);
  background:
    radial-gradient(circle at 15px 15px, #ffffffd9 0 4px, #ffffff00 9px),
    radial-gradient(circle at 23px 23px, #b8f0e8 0 7px, #4fb3a9 8px 18px, #1f6b64 19px 22px, transparent 23px),
    linear-gradient(90deg, transparent 0 20px, #f2f2f6 20px 22px, #a9a9b6 22px 25px, #5b5b66 25px 26px, transparent 26px);
  background-size: 46px 46px, 46px 46px, 46px 100%; background-repeat: no-repeat; background-position: 0 0, 0 0, 0 40px;
  filter: drop-shadow(5px 8px 5px #00000099); }

/* THE LAMP: a thimble for a shade, dimpled pewter, over a matchstick whose head is the bulb. It stands on the floor in
   the left corner (the right one is the purse's), in front of the paper slips, and throws its light up the wall. On a
   phone the slips fill the room, so the lamp is put away. */
[data-skin="dollhouse"] body::before { content: ""; position: fixed; left: 14px; bottom: 132px; width: 60px; height: 64px; pointer-events: none; z-index: 1;
  border-radius: 30px 30px 7px 7px;
  background:
    radial-gradient(circle at 3px 3px, #00000038 0 1.2px, #ffffff40 1.7px 2.3px, transparent 2.8px) 0 0 / 7px 7px,
    linear-gradient(90deg, #5e5e68, #d7d7df 38%, #8f8f9c 72%, #4e4e58);
  box-shadow: inset 0 -9px 0 #b8b8c2, inset 0 -11px 0 #55555f, 0 0 70px 26px #ffc96a3d, 0 0 22px 6px #ffc96a66;
  animation: dollhouse-lamp 4.2s ease-in-out infinite alternate; }
[data-skin="dollhouse"] main::before { content: ""; position: fixed; left: 38px; bottom: 76px; width: 12px; height: 70px; pointer-events: none; z-index: 1;
  border-radius: 6px 6px 1px 1px;
  background:
    radial-gradient(ellipse 7px 10px at 50% 9px, #ff9a4a 0 40%, #b2302f 60% 98%, transparent 100%),
    linear-gradient(180deg, transparent 0 17px, #e9d3a4 17px, #c7a56f 100%),
    linear-gradient(90deg, #fff3d2 0 30%, #e9d3a4 30% 70%, #b58f5b 70%);
  box-shadow: 0 0 14px 4px #ffb25a77; }
@keyframes dollhouse-lamp { 0% { filter: brightness(.96); } 100% { filter: brightness(1.08); } }

/* THE RUG: a scrap of felt under the doors, cut with scissors, a blanket stitch round the edge, the fuzz showing. */
[data-skin="dollhouse"] .doors { position: relative; }
[data-skin="dollhouse"] .doors::before { content: ""; position: absolute; left: -44px; right: -44px; top: -16px; bottom: -14px; z-index: -1; pointer-events: none;
  border-radius: 46% 54% 48% 52% / 58% 42% 58% 42%; border: 3px dashed #f6e3dacc;
  background:
    repeating-linear-gradient(47deg, transparent 0 2px, #ffffff0d 2px 3px),
    repeating-linear-gradient(-43deg, transparent 0 3px, #0000000d 3px 4px),
    var(--felt);
  box-shadow: 0 0 0 3px #86a08288, 0 0 0 5px #86a08233, 0 6px 10px #00000066; }

/* THE DOORS: dollhouse doors, balsa with grain too coarse for their size, a dark frame, a glass bead for a knob, and the
   glue that squeezed out at both hinges and never got wiped. The bead curtain stays a bead curtain, strung on thread. */
[data-skin="dollhouse"] .door { border-color: #6b4423;
  background: repeating-linear-gradient(180deg, transparent 0 7px, #00000012 7px 9px), repeating-radial-gradient(ellipse 90px 26px at 20% 30%, transparent 0 7px, #0000000f 7px 9px), linear-gradient(90deg, #c69a5c, #e6c48c 42%, #b8884d);
  box-shadow: inset 0 0 0 2px #fff3d255, 0 3px 0 #6b4423, 0 6px 8px #00000066; }
[data-skin="dollhouse"] .door.other { background: repeating-linear-gradient(180deg, transparent 0 7px, #00000014 7px 9px), repeating-radial-gradient(ellipse 90px 26px at 70% 60%, transparent 0 7px, #00000012 7px 9px), linear-gradient(90deg, #8a5a3a, #a9774f 45%, #7a4a2e); }
[data-skin="dollhouse"] .door.cloth { background: repeating-linear-gradient(180deg, transparent 0 7px, #00000014 7px 9px), linear-gradient(90deg, #5a3a2a, #7a5240 45%, #4e3224); }
[data-skin="dollhouse"] .door.shop { background: repeating-linear-gradient(90deg, #4fb3a9 0 3px, #d8508f 3px 4px, #c9a24b 4px 6px, #2a5280 6px 9px); }
[data-skin="dollhouse"] .door:hover, [data-skin="dollhouse"] .door:focus-visible { box-shadow: inset 0 0 0 2px #fff3d255, 0 3px 0 #6b4423, 0 0 28px #ffc96a88; }
[data-skin="dollhouse"] .door .knob { background: radial-gradient(circle at 35% 30%, #fff 0 15%, #4fb3a9 40%, #1f6b64 100%); box-shadow: 0 0 0 1px #0006; }
[data-skin="dollhouse"] .door::before, [data-skin="dollhouse"] .door::after { content: ""; position: absolute; left: -7px; width: 10px; height: 13px; pointer-events: none;
  border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
  background: radial-gradient(circle at 35% 28%, #ffffff 0 2px, #fff3d2d9 3px, #e9d59ab3 100%); box-shadow: 0 1px 2px #0005; }
[data-skin="dollhouse"] .door::before { top: 17%; }
[data-skin="dollhouse"] .door::after { bottom: 15%; height: 17px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; }

/* THE TABLE: a dollhouse table. The boards are far too wide for it, the grain runs in arcs a saucer across, and the
   glue shines in every joint between the boards. The near edge has its own bead of glue where the top went on. */
[data-skin="dollhouse"] .tabletop {
  background:
    repeating-radial-gradient(ellipse 900px 170px at 22% 28%, transparent 0 26px, #00000018 26px 33px),
    repeating-radial-gradient(ellipse 700px 140px at 78% 72%, transparent 0 22px, #00000014 22px 28px),
    repeating-linear-gradient(90deg, #6a4527 0 150px, #3f2512 150px 155px, #fff3d27a 155px 157px, #5e3b20 157px 312px, #3f2512 312px 318px, #fff3d27a 318px 320px);
  box-shadow: inset 0 0 120px #000a; }
[data-skin="dollhouse"] .edge { border-top-color: #b98a5a;
  background: repeating-linear-gradient(90deg, transparent 0 150px, #0000004d 150px 156px, #fff3d255 156px 158px), linear-gradient(180deg, #8a5e36, #3f2512);
  box-shadow: inset 0 3px 0 #fff3d2a6, inset 0 5px 0 #fff3d240; }
/* THE COIN: a quarter the size of a plate, lying flat on the table beside the pie, its reeded rim catching the light. */
[data-skin="dollhouse"] .tabletop::after { content: ""; position: absolute; left: 64%; top: 40%; width: 15%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 58%, #0000001a 58% 62%, transparent 63%),
    radial-gradient(circle at 50% 50%, transparent 0 70%, #ffffff33 70% 73%, transparent 74%),
    radial-gradient(circle at 36% 30%, #ffffff 0, #d9d9e0 40%, #a9a9b4 84%, transparent 86%),
    repeating-conic-gradient(from 0deg, #8a8a96 0 2deg, #ececf1 2deg 4deg),
    radial-gradient(circle at 36% 30%, #ffffff, #cfcfd7 50%, #8d8d98 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-clip: border-box;
  box-shadow: inset 0 0 0 7px #d5d5dd, inset 0 0 0 9px #7f7f8a, inset 0 0 0 12px #e9e9ef, 0 4px 0 #5c5c66, 0 14px 22px #00000080; }

/* THE PAPER SLIPS: the song, the flock, the key and every slip in the chart room are glued down at the corners, and the
   glue came through. The sign over the chart room is burnt into a plank of balsa. */
[data-skin="dollhouse"] .paper, [data-skin="dollhouse"] .song.sung { position: relative; }
[data-skin="dollhouse"] .paper::before, [data-skin="dollhouse"] .paper::after, [data-skin="dollhouse"] .song.sung::before, [data-skin="dollhouse"] .song.sung::after {
  content: ""; position: absolute; top: -7px; width: 20px; height: 16px; pointer-events: none;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 28%, #ffffff 0 2px, #fff3d2d9 3px, #e9d59ab3 100%); box-shadow: 0 1px 2px #0005; }
[data-skin="dollhouse"] .paper::before, [data-skin="dollhouse"] .song.sung::before { left: 14px; transform: rotate(-12deg); }
[data-skin="dollhouse"] .paper::after, [data-skin="dollhouse"] .song.sung::after { right: 18px; width: 16px; height: 20px; transform: rotate(9deg); }
[data-skin="dollhouse"] .paper[hidden]::before, [data-skin="dollhouse"] .paper[hidden]::after { display: none; }
[data-skin="dollhouse"] .room-head h1 { color: #2a0a14; text-shadow: 0 1px 0 #fff3d2aa;
  background: repeating-linear-gradient(180deg, transparent 0 11px, #00000010 11px 14px), repeating-radial-gradient(ellipse 500px 90px at 30% 40%, transparent 0 16px, #0000000f 16px 20px), linear-gradient(90deg, #c69a5c, #e6c48c 45%, #b8884d);
  box-shadow: 0 0 0 10px #c69a5c, 0 0 0 12px #6b4423, 0 10px 0 2px #6b4423, 0 16px 18px #00000080; }
[data-skin="dollhouse"] .aside { color: #f6ecd6; text-shadow: 0 0 8px #1b1740, 0 0 4px #1b1740, 0 1px 2px #000; }
[data-skin="dollhouse"] .credits { color: #e6dff3; text-shadow: 0 0 8px #1b1740, 0 0 4px #1b1740, 0 1px 2px #000; }
[data-skin="dollhouse"] .credits a { color: #ffe9a8; }

/* phones: the torn edge and the pin pull in; the lamp is put away; the rug keeps inside the page; the sign's plank is thinner */
@media (max-width: 600px) {
  [data-skin="dollhouse"]::after { width: 26px; clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 3px 94%, 9px 86%, 1px 74%, 8px 61%, 4px 50%, 10px 38%, 2px 27%, 7px 16%, 3px 7%); }
  [data-skin="dollhouse"]::before { top: 40px; right: 6px; transform: rotate(16deg) scale(.7); }
  [data-skin="dollhouse"] body::before, [data-skin="dollhouse"] main::before { display: none; }
  [data-skin="dollhouse"] .doors::before { left: -14px; right: -14px; }
  [data-skin="dollhouse"] .room-head h1 { box-shadow: 0 0 0 6px #c69a5c, 0 0 0 8px #6b4423, 0 8px 0 0 #6b4423, 0 14px 16px #00000080; }
}
@media (prefers-reduced-motion: reduce) { [data-skin="dollhouse"] body::before { animation: none; } }