/* ========================================================================= AANGAN · THE NOTICE BOARD — the Wall room's papers finally get pinned up ------------------------------------------------------------------------- Owner 2026-08-27: "redesign profile, cups and achievements so they match the quality of shop and games." Achievements first (biggest deficit). WHAT WAS WRONG. The Wall room was always conceived as a limewashed village notice board with papers pasted up (45-rooms.js: boardHead + limewash). The BACKDROP was painted, but the CONTENT never became paper. tin.css turned `.achgame` into a haldi-paper plaque and stopped there — it never listed the two things the player actually looks at first: the CHALLENGE slips (`.chrow`) and the ACHIEVEMENT certificates (`.achcard`). Both kept their styles.css base of background:rgba(255,235,200,.05) — a 5%-opacity ghost — so on the dark wall they read as hairline outlines with light text floating on nothing. The room looked like a phone Settings list, not nani's board. WHAT THIS DOES. Nothing new is invented; the material is the same haldi paper (--hp-paper*) and the same ink tokens (--hp-ink*) the almirah plaques and the kirana tags are cut from — so a pinned slip here is the same HAND as a price tag in the shop, which is the whole point of "match the quality." · every challenge slip and every certificate becomes real paper, lit along the top edge, lifted off the wall by a shadow — a thing you could peel off and hold, the way a game box sits in the almirah's cubby. · a BRASS PUSH-PIN holds each paper up. Pin corner alternates odd/left even/right so the board reads hand-pinned, not machine-stamped — the one dimensional object per slip, the notice-board twin of the kirana's torn price tag. · a claimed challenge gets a green PAID ink-stamp, rotated like a real rubber stamp — earned things should look earned. A SKIN, loaded dead last (after uikit.css). No element, id or listener changes; delete this file and the flat list comes back exactly as it was. Verify: render at 390 AND 360, all five languages, contrast per string on the paper actually behind it (.claude/mp/contrast.js). ========================================================================= */ /* ---- 1. the papers: challenge slips + certificates become haldi paper ---- These two were simply missing from tin.css's plaque list. Same recipe as that file's `#paneWall .achgame` rule so the three paper types match. The token flip (--ck-chalk → --hp-ink) turns every label this control owns from cream to ink in one move, exactly as tin.css does inside a plaque. */ #homeOv #paneWall .chrow, #homeOv #paneWall .achcard{ position:relative; background:var(--hp-paper-sheet) !important; border:1.4px solid var(--hp-edge-soft) !important; border-radius:3px !important; box-shadow:var(--hp-lift) !important; --ck-chalk:var(--hp-ink); --ck-chalk-2:var(--hp-ink-2); --ck-chalk-3:var(--hp-ink-3); --ck-chalk-4:var(--hp-ink-4); --ck-shadow:var(--hp-ink-shadow); color:var(--hp-ink) !important; } /* the challenge slip's own labels use --ink / --muted (light, for the dark wall) straight from styles.css — on paper they must be ink. */ #homeOv #paneWall .chrow .chname{color:var(--hp-ink) !important;font-weight:600} #homeOv #paneWall .chlock{color:var(--hp-ink-3) !important} #homeOv #paneWall .achcard .achname{color:var(--hp-title) !important} #homeOv #paneWall .achcard .achdesc{color:var(--hp-ink-3) !important} /* the little icon chip on a slip: a bright emoji tile in a dark well reads as a hole punched in the paper. Recess it gently into the paper instead. */ #homeOv #paneWall .chrow .chicon:not(.art){ background:rgba(74,51,19,.10) !important; box-shadow:inset 0 1px 2px rgba(74,51,19,.22) !important; color:var(--hp-ink) !important;border-radius:7px} #homeOv #paneWall .achcard .achicon{ background:rgba(74,51,19,.10) !important; box-shadow:inset 0 1px 2px rgba(74,51,19,.22) !important} /* ---- 2. the brass push-pin ---- One dimensional object per paper: a domed brass tack with a hot highlight and a shadow it casts onto the paper. Corner alternates so the wall reads hand-pinned. Papers keep overflow visible (default), so the pin domes up past the torn top edge into the ~10px gap above — never over the slip above.*/ #homeOv #paneWall .chrow::before, #homeOv #paneWall .achcard::before, #homeOv #paneWall .achgame::before{ /* !important on content + geometry: tin.css kills `.achgame::before` with `content:none !important` to strip the old chalk outline, so the pin only survives on the game panels if it out-importants that. Harmless on the slip/certificate ::before, which nothing else claims. */ content:"" !important;position:absolute !important;top:-5px;z-index:4; width:12px;height:12px;border-radius:50%;border:0 !important; background: radial-gradient(circle at 38% 32%, #fff3c8 0 14%, #ecc775 34%, #b98a2b 70%, #7a5514 100%); /* the last shadow is the tack's own shadow CAST DOWN onto the paper, so it reads as sitting on the sheet, not floating in the gap above it. */ box-shadow: 0 0 0 .5px rgba(70,48,10,.5), inset 0 -1px 1px rgba(70,48,10,.45), 2px 4px 3px rgba(24,14,5,.4); } /* the challenge slips alternate corner odd-left / even-right — the hand-pinned look, no rotation (rotation on a stacked full-width slip is the no-overlap rule's enemy). Certificates ALWAYS carry a tier badge top-right and an icon top-left, so their only free spot is dead centre — pinning them there keeps the tack off the badge and its red ready-dot. */ #homeOv #paneWall .chrow:nth-child(odd)::before{left:14px} #homeOv #paneWall .chrow:nth-child(even)::before{right:14px;left:auto} #homeOv #paneWall .achcard::before, #homeOv #paneWall .achgame::before{left:50%;margin-left:-6px} /* the ready red-dot (uikit.css) rides the icon corner; keep it clear of a left-corner pin by nudging it — a pin and a flag never fight for a corner. */ #homeOv #paneWall .chrow.ready::before{opacity:.85} /* ---- 3. earned = stamped ---- A claimed challenge is done business — franked with a green PAID stamp, tilted the way a hand slams a rubber stamp. The slip stays fully legible; the stamp sits over the right end where the reward number was, next to the ✓. */ #homeOv #paneWall .chrow.done{opacity:1 !important} #homeOv #paneWall .chrow.done .chgot{ /* #285c2d, not a brighter green: measured 4.9:1 on haldi paper, clear of the 4.5 floor. A jollier green dropped under it (readability is measured here, not judged — the pale-on-pale rule). */ color:#285c2d !important;font-weight:800; border:2px solid rgba(40,92,45,.72);border-radius:5px; padding:2px 7px;transform:rotate(-7deg); text-shadow:0 1px 0 rgba(255,248,228,.6); box-shadow:0 1px 2px rgba(24,14,5,.18)} /* ---- 4. the board behind the papers ---- Give the pinned area a hair more depth than the bare wall: a soft inner shadow at the pane edge, so the papers sit INSIDE a board rather than on an endless wall. Cheap, and only on this room. */ #homeOv #paneWall #wallWrap{ padding:4px 2px 2px; } /* ========================================================================= THE LAKHOTI TIER-METER (owner 2026-08-27) — four marbles replace the four tier chips + the long progress bar in each achievement card. A filled glass marble per claimed tier, the next glowing "ready", the one after filling via a ring, the rest empty dimples on a string. Built from achTrackHTML's .lkmeter markup (22-achieve.js). Progress fills with the very thing you claim. ========================================================================= */ #homeOv #paneWall .lkmeter{display:flex;align-items:flex-start;justify-content:center;margin:15px 2px 6px;padding-bottom:13px} #homeOv #paneWall .lkslot{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto;width:52px} #homeOv #paneWall .lkthread{flex:1;height:2px;margin-top:14px;background:repeating-linear-gradient(90deg,rgba(120,85,30,.4) 0 4px,transparent 4px 7px)} #homeOv #paneWall .lkthread.lit{background:repeating-linear-gradient(90deg,rgba(230,189,92,.85) 0 4px,transparent 4px 7px)} #homeOv #paneWall .lkmeter .mb{position:relative;width:30px;height:30px;border-radius:50%} #homeOv #paneWall .lkmeter .mbg{position:absolute;top:15%;left:22%;width:36%;height:26%;border-radius:50%;background:rgba(255,255,255,.8)} #homeOv #paneWall .mb.d1{background:radial-gradient(circle at 38% 30%,#8fd6ea,#2f86a8 60%,#1c5a74)} #homeOv #paneWall .mb.d2{background:radial-gradient(circle at 38% 30%,#a6e2a0,#3c9a4a 60%,#1c6a2e)} #homeOv #paneWall .mb.d3{background:radial-gradient(circle at 38% 30%,#e6a3c6,#b23a72 60%,#7c214a)} #homeOv #paneWall .mb.d4{background:radial-gradient(circle at 38% 30%,#f0b06a,#c56f16 60%,#8a4a10)} #homeOv #paneWall .mb.ready{background:radial-gradient(circle at 38% 30%,#fff2c6,#e6bd5c 55%,#a8791f);box-shadow:0 0 0 3px rgba(230,189,92,.4),0 0 12px rgba(230,189,92,.7);animation:lkpulse 1.6s ease-in-out infinite} @keyframes lkpulse{50%{box-shadow:0 0 0 5px rgba(230,189,92,.25),0 0 16px rgba(230,189,92,.9)}} @media(prefers-reduced-motion:reduce){#homeOv #paneWall .mb.ready{animation:none}} /* NEXT = the marble you're filling: a dim glass FACE in its OWN tier colour, ringed by a conic progress track, with a focal glow so it clearly outranks the empty sockets after it. (owner 2026-08-27: the old cream face read as an empty socket while the LOCKED ones, keeping their highlight, looked solid — the earnable one looked less earned than the locked ones. Backwards.) */ #homeOv #paneWall .mb.next{background:transparent;box-shadow:0 0 7px rgba(232,145,42,.45)} #homeOv #paneWall .mb.next .mbring{position:absolute;inset:-3.5px;border-radius:50%;background:conic-gradient(#e8912a var(--p,0deg),rgba(120,85,30,.24) 0)} #homeOv #paneWall .mb.next .mbring::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:#d8c39a} #homeOv #paneWall .mb.next.d1 .mbring::after{background:radial-gradient(circle at 38% 30%,#a9e2f0,#4f97b4 68%)} #homeOv #paneWall .mb.next.d2 .mbring::after{background:radial-gradient(circle at 38% 30%,#bfeaba,#5aa866 68%)} #homeOv #paneWall .mb.next.d3 .mbring::after{background:radial-gradient(circle at 38% 30%,#f0bcd6,#c05f8a 68%)} #homeOv #paneWall .mb.next.d4 .mbring::after{background:radial-gradient(circle at 38% 30%,#f5c489,#cc8434 68%)} /* LOCK = an empty recessed socket: dimmer than NEXT, no shine, a ghost of the colour you'll win there so the string previews the whole set of lakhoti. */ #homeOv #paneWall .mb.lock{background:rgba(60,42,20,.28);box-shadow:inset 0 2px 5px rgba(0,0,0,.42),inset 0 0 0 1px rgba(120,85,30,.3)} #homeOv #paneWall .mb.lock .mbg{display:none} #homeOv #paneWall .mb.lock.d1{background:radial-gradient(circle at 50% 46%,rgba(79,151,180,.32),rgba(28,90,116,.22))} #homeOv #paneWall .mb.lock.d2{background:radial-gradient(circle at 50% 46%,rgba(90,168,102,.32),rgba(28,106,46,.22))} #homeOv #paneWall .mb.lock.d3{background:radial-gradient(circle at 50% 46%,rgba(192,95,138,.32),rgba(124,33,74,.22))} #homeOv #paneWall .mb.lock.d4{background:radial-gradient(circle at 50% 46%,rgba(204,132,52,.32),rgba(138,74,16,.22))} #homeOv #paneWall .mbtick{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;font-weight:800;font-style:normal;z-index:2} #homeOv #paneWall .mbv{font-family:var(--ck-disp);font-weight:800;font-size:11px;color:#6b4a1e;line-height:1} #homeOv #paneWall .lkslot.claimed .mbv{color:#4a3313} #homeOv #paneWall .lkslot.locked .mbv{color:rgba(74,51,19,.58)} #homeOv #paneWall .mbn{font-size:8px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:rgba(74,51,19,.62);text-align:center;line-height:1.05} #homeOv #paneWall .lkslot.ready .mbn{color:#c56f16} #homeOv #paneWall .achprog{margin:0} #homeOv #paneWall .achprog .achpx{text-align:center;font-weight:600} /* ========================================================================= STATS + BADGES sub-tabs get the treatment too (owner 2026-08-27: "not all tabs got the treatment"). Only Achievements became haldi paper; the Stats leaderboard sat as a 5%-ghost list and the badge rows as tin enamel. Give both the same warm paper as the achievement cards so all three sub-tabs are one board. Pins go on the individual stat/badge cards (.wallrow); the dense leaderboard (.lbrow) gets paper without a pin per row — a pin on every rank would read as clutter, not a hand-pinned notice. ========================================================================= */ #homeOv #paneWall .lbrow, #homeOv #paneWall .wallrow{ position:relative; background:var(--hp-paper-sheet) !important; border:1.4px solid var(--hp-edge-soft) !important; border-radius:3px !important; box-shadow:var(--hp-lift) !important; color:var(--hp-ink) !important; margin-bottom:9px; } #homeOv #paneWall .lbrow .lbn, #homeOv #paneWall .wallrow .wn{color:var(--hp-ink) !important} #homeOv #paneWall .wallrow .wl{color:var(--hp-ink-3) !important} #homeOv #paneWall .lbrow .rank{color:var(--hp-ink-2) !important} #homeOv #paneWall .lbrow .lbv{color:var(--hp-title) !important} #homeOv #paneWall .lbrow .muted{color:var(--hp-ink-3) !important} #homeOv #paneWall .lbrow.first{ box-shadow:var(--hp-lift),0 0 0 1.6px rgba(168,121,31,.55) !important} /* the stat/badge cards are individual notices → pinned, alternating corner */ #homeOv #paneWall .wallrow::before{ content:"";position:absolute;top:-5px;z-index:4;width:12px;height:12px;border-radius:50%;border:0; background:radial-gradient(circle at 38% 32%,#fff3c8 0 14%,#ecc775 34%,#b98a2b 70%,#7a5514 100%); box-shadow:0 0 0 .5px rgba(70,48,10,.5),inset 0 -1px 1px rgba(70,48,10,.45),2px 4px 3px rgba(24,14,5,.4); } #homeOv #paneWall .wallrow:nth-child(odd)::before{left:16px} #homeOv #paneWall .wallrow:nth-child(even)::before{right:16px;left:auto}