/* ========================================================================= AANGAN · THE CHIT — every menu is the same piece of paper (2026-08-16) ------------------------------------------------------------------------- Owner 2026-08-16: "Make the other after game result and other similar menus match with the sign in menu." THE SIGN-IN MENU IS THE ONE THAT LOOKS RIGHT. It is a small cream chit pinned to the blue door — warm paper, a thin brown rule around it, a serif name, and two shadows: a tight contact shadow and a soft deep one, so it reads as paper resting ON something rather than a card floating in space. door.css builds it, and it was built for one screen. EVERY OTHER MENU WAS THE OTHER THING. `.panel` in styles.css is `linear-gradient(--surface-1,--surface-2)` — a dark app card with a flat gold pill and a grey outline pill. Side by side with the door, the result screen looked like a different product. SO THE CHIT BECOMES THE HOUSE STYLE. This file lifts door.css's treatment off `#authOv` and gives it to the nine modal menus, and — this is the part that is easy to get wrong — FLIPS EVERYTHING INSIDE THEM. The panels' text is pale chalk because the panel was dark; drop cream under it and change nothing else and you get the mistake the Wall's cork board already made in this project once: pale on pale, unreadable, and it does not throw. So every child that carried a pale colour gets an ink colour here, in one place, keyed off `.chit` rather than off nine overlay ids. NOT INCLUDED, on purpose: · #homeOv that is not a menu, it is the house. It keeps `.panel.page`. · #authOv already has this treatment, tuned smaller so the door shows behind it. Restyling it from here would fight door.css. · #rulesOv superseded by the chopadi (59-chopadi.js), which is a book and deliberately does not look like a chit. ========================================================================= */ #confirmOv > .panel, #lobbyOv > .panel, #serOv > .panel, #resultOv > .panel, #pauseOv > .panel, #welcomeOv > .panel, #langOv > .panel, #groupOv > .panel, #profileOv > .panel{ /* the paper, lifted from door.css so the two cannot drift apart */ background:linear-gradient(178deg,#fbf5e4,#efe4c8); border:1px solid rgba(120,86,40,.35); border-radius:10px; /* paper, not a floating app card: a close contact shadow plus one deeper */ box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 3px 9px rgba(60,36,10,.30), 0 14px 30px rgba(60,36,10,.22); color:#3b2a14; } /* ---- the type on the paper ---- `.chit.chit` — the class doubled — and that is not a tic. The colours these have to beat are set by single-class rules in styles.css (`.panel p`, `.slot`, `.langbig button span`), which tie with a plain `.chit x` on specificity, and a tie is decided by source order across twenty-five stylesheets. Doubling the class settles it at 0-2-1 instead of relying on this file staying last in the forever. These were not guessed at: a contrast pass over all nine chits (.claude/mp/chit.js) measured the survivors at 1.8:1 against the paper — the pale-on-pale failure the Wall's cork board already produced once in this project. */ .chit.chit h2{color:#5c2015} .chit.chit h3{color:#6b3f12} .chit.chit p, .chit.chit .muted, .chit.chit label, .chit.chit .slot, .chit.chit .lobbyhint, .chit.chit .pausewho, .chit.chit .welcomemsg, .chit.chit .langbig button span, .chit.chit .tally td, .chit.chit .tally th, .chit.chit .grouplist small{color:#7a5a2c} .chit.chit b, .chit.chit strong{color:#3b2a14} .chit.chit a{color:#8d3226} .chit.chit hr{border-color:rgba(120,86,40,.3)} /* The close cross must read on ANY ground behind the panel — on the player profile it sits over the dark striped showcase, where a 12%-alpha tint vanished (owner 2026-08-20: "close/exit button is not visible"). So it is a SOLID cream disc with a dark cross and a seated shadow — opaque, so the background it happens to sit on cannot wash it out. */ .chit.chit .ovclose{color:#5a2f10;background:#f2e6cc; border:1.5px solid #b08a4a;box-shadow:0 2px 5px rgba(30,18,6,.4); width:34px;height:34px;border-radius:50%;display:grid;place-items:center; font-size:19px;font-weight:800;line-height:1} .chit.chit .ovclose:hover{background:#fff4dd;border-color:#8a6636} /* ---- the buttons ---- The primary is the door's gold: a GRADIENT with a lip and a seated shadow, not the flat --gold fill the dark panels used. The secondary is the door's ghost chit — paper with a brown rule — not a grey outline. */ .chit .btn{ color:#3b2a14; background:linear-gradient(#fffaf0,#f2e7cd); border:1px solid rgba(120,86,40,.42); box-shadow:0 1px 0 rgba(255,255,255,.75) inset,0 1px 2px rgba(60,36,10,.18)} .chit .btn:hover{background:linear-gradient(#fffdf6,#f6eed9)} .chit .btn:active{box-shadow:0 1px 0 rgba(255,255,255,.5) inset} .chit .btn.primary, .chit .cta .btn.primary{ color:#3d2a0c;font-weight:600; background:linear-gradient(#f7d98d,#d9a840 62%,#c8952f); border:1px solid rgba(120,80,20,.55); box-shadow:0 1px 0 rgba(255,248,220,.85) inset,0 2px 0 rgba(120,80,20,.42), 0 4px 9px rgba(70,40,10,.24)} .chit .btn.primary:hover{background:linear-gradient(#fbe19b,#e0b04c 62%,#cf9c33)} .chit .btn:focus-visible, .chit .bigbtn:focus-visible{outline:3px solid #8d3226;outline-offset:2px} /* the big stacked buttons welcomeOv uses */ .chit .bigbtn{ color:#3b2a14; background:linear-gradient(#fffaf0,#f2e7cd); border:1px solid rgba(120,86,40,.42); box-shadow:0 1px 0 rgba(255,255,255,.75) inset,0 1px 2px rgba(60,36,10,.18)} .chit .bigbtn .bt{color:#3b2a14} .chit .bigbtn .bs{color:#7a5a2c} /* ---- inputs, the way the door writes them ---- */ .chit .authform input{ color:#3b2a14;background:rgba(255,253,246,.85); border:1px solid rgba(120,86,40,.34)} .chit .authform input::placeholder{color:rgba(122,90,44,.7)} /* ---- the lists these menus put on the paper ---- */ .chit .grouplist > *, .chit .tally > *, .chit .slot{ border-color:rgba(120,86,40,.26)} .chit .grouplist, .chit .tally{color:#3b2a14} /* the shuffle / "next hand" checkbox row */ .chit .shuffrow{color:#7a5a2c} /* the pause glyph was drawn in chalk for a dark card */ .chit .pauseglyph{color:#8d3226;opacity:.85} /* the language chooser's big buttons */ .chit .langbig button{ color:#3b2a14;background:linear-gradient(#fffaf0,#f2e7cd); border:1px solid rgba(120,86,40,.42)} .chit .langbig button.on{ color:#3d2a0c;font-weight:600; background:linear-gradient(#f7d98d,#d9a840 62%,#c8952f); border-color:rgba(120,80,20,.55)} /* the Ser (trump) chooser's four suit tiles already sit on cream — only the frame needs to agree with the paper */ .chit .sbtn{border-color:rgba(120,86,40,.45)} /* the ad slot inside Pause is somebody else's rectangle; give it a paper surround rather than letting it float on the chit */ .chit.chit .adslot{background:rgba(120,86,40,.07); border:1px dashed rgba(120,86,40,.35);border-radius:8px;color:#7a5a2c} /* the "AD" pill and its placeholder line were both chalk-on-dark; the placeholder measured 1.6:1 on the paper once the checker started compositing the slot's own 7% tint instead of treating it as opaque */ .chit.chit .adslot span, .chit.chit #pauseAdText{color:#7a5a2c} /* and the AD pill has to out-rank the line above it — `.chit.chit .adslot span` is 0-3-1 and a bare `.chit.chit .adtag` is 0-3-0, so the pill was getting the placeholder's brown ON its brown ground and measured 1.3:1. Two of my own rules, not somebody else's. */ .chit.chit .adslot .adtag{color:#fdf6e6;background:#8d6a2e} /* the error line stays red, but a red that reads on paper */ .chit .autherr{color:#a3271c} /* ---- the scrim behind a chit ---- A paper chit needs something to rest on. The dark panels used a heavy blur; on paper that reads as fog, so it is warmer and lighter here. */ #confirmOv, #lobbyOv, #serOv, #resultOv, #pauseOv, #welcomeOv, #langOv, #groupOv, #profileOv{ background:rgba(38,22,8,.62)} /* THE BUG TAB, AGAIN. It is position:fixed at left:0, top:50% and the render showed it lying across the left edge of every chit — the same defect the overlap scan found on the almirah and in the baithak. A chit is a modal: nothing behind it should be reachable, least of all something drawn on top of it. `:has` is already used this way in almirah.css. */ body:has(#confirmOv.show) #bugFab, body:has(#lobbyOv.show) #bugFab, body:has(#serOv.show) #bugFab, body:has(#resultOv.show) #bugFab, body:has(#pauseOv.show) #bugFab, body:has(#welcomeOv.show) #bugFab, body:has(#langOv.show) #bugFab, body:has(#groupOv.show) #bugFab, body:has(#profileOv.show) #bugFab, body:has(#authOv.show) #bugFab{display:none} @media (max-width:380px){ #confirmOv > .panel, #lobbyOv > .panel, #serOv > .panel, #resultOv > .panel, #pauseOv > .panel, #welcomeOv > .panel, #langOv > .panel, #groupOv > .panel, #profileOv > .panel{border-radius:8px} }