/* ========================================================================= AANGAN · CHALK SECTIONS (rebuild phase 3) ------------------------------------------------------------------------- The six rooms off the langdi — Games, Group, Wall, Cups, Shop, Profile — drawn in chalk on the same verandah floor. Two materials, and only two: · CHALK — every frame, rule, label and number. Drawn with the roughening filter so no edge is ever mechanically straight. · REAL — card backs, table felts, bangles, game icons, the player's photo, the lakhoti marble. These are objects lying on the floor, not drawings of objects, so they keep their own artwork and get a chalk frame drawn around them instead. Every rule is scoped to #homeOv. The game table is never touched. Load order: styles.css → chalk.css → chalk-home.css → chalk-sections.css ========================================================================= */ /* ===================================================================== 1 · THE CHALK BOX One frame for every card in every section. The border is a ::before so the roughening filter can distort it without smearing the contents. ===================================================================== */ #homeOv .gcard, #homeOv .shoptile, #homeOv .wallrow, #homeOv .achgame, #homeOv .tourcard, #homeOv .subcard, #homeOv .cbtn, #homeOv .pftile, #homeOv .memberrow, #homeOv .tourpick > *, #homeOv .tourcall, #homeOv .thf-row{ background:none !important; border:0 !important; box-shadow:none !important; position:relative; color:var(--ck-chalk-2); } #homeOv .gcard::before, #homeOv .shoptile::before, #homeOv .wallrow::before, #homeOv .achgame::before, #homeOv .tourcard::before, #homeOv .subcard::before, #homeOv .cbtn::before, #homeOv .pftile::before, #homeOv .memberrow::before, #homeOv .tourcall::before{ content:"";position:absolute;inset:0; border:2.4px solid var(--ck-chalk-4); border-radius:var(--ck-r); filter:url(#ckRoughFine); pointer-events:none; transition:border-color var(--ck-fast) var(--ck-out); } /* chosen / owned / live — the chalk is gone over a second time, pressed harder */ #homeOv .gcard.sel::before, #homeOv .shoptile.on::before, #homeOv .cbtn.sel::before, #homeOv .tourcard.live::before, #homeOv .subcard.on::before{ border-color:var(--ck-yellow);border-width:3px } #homeOv .shoptile.champ::before{ border-color:var(--ck-yellow) } #homeOv .shoptile.premium::before{ border-color:var(--ck-peach) } /* pressing a card presses the chalk */ #homeOv .gcard,#homeOv .shoptile,#homeOv .cbtn,#homeOv .subcard,#homeOv .memberrow{ transition:transform var(--ck-fast) var(--ck-spring)} #homeOv .gcard:active,#homeOv .shoptile:active,#homeOv .cbtn:active, #homeOv .subcard:active,#homeOv .memberrow:active{ transform:scale(.975) } #homeOv .gcard:active::before,#homeOv .shoptile:active::before, #homeOv .cbtn:active::before{ border-color:var(--ck-chalk) } /* ===================================================================== 2 · REAL OBJECTS LYING ON THE FLOOR Card backs, felts, bangles and game icons are artwork, and every one of them already carries its own edge. They are left completely alone — no chalk frame, no recolouring — and given only the shadow of something resting on stone, so they read as objects, not as drawings. ===================================================================== */ #homeOv .gcard .gi img, #homeOv .shoptile .sti, #homeOv .shoptile .sfelt, #homeOv .shoptile .stbangle{ filter:drop-shadow(0 4px 7px rgba(48,18,12,.62))} #homeOv .shoptile.locked .sti,#homeOv .shoptile.locked .sfelt{ filter:saturate(.45) brightness(.75) drop-shadow(0 3px 6px rgba(48,18,12,.55))} #homeOv .gcard .gi img{border-radius:11px} /* chalk line icons, drawn where the app used to print an emoji */ #homeOv [data-ck-ico]{display:inline-grid;place-items:center; width:24px;height:24px;flex:0 0 24px;font-size:0;background:none;vertical-align:-6px} #homeOv [data-ck-ico] svg{width:100%;height:100%;display:block;overflow:visible; fill:none;stroke:var(--ck-chalk-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; filter:url(#ckRoughFine) drop-shadow(0 1px 2px rgba(50,20,14,.8))} /* the marble is glass, not chalk — it keeps its own fills */ #homeOv [data-ck-ico="marble"] svg{stroke:none;filter:drop-shadow(0 2px 3px rgba(40,16,10,.6))} #homeOv .ck-inline-ico{width:16px;height:16px;flex:0 0 16px;vertical-align:-3px;margin:0 2px 0 1px} #homeOv .sub-h .ck-inline-ico,#homeOv .tc-h .ck-inline-ico,#homeOv .achhdr .ck-inline-ico{ width:19px;height:19px;flex:0 0 19px;vertical-align:-4px} #homeOv .tourhero-ic[data-ck-ico]{width:46px;height:46px;flex:0 0 46px;margin:0 auto} #homeOv .tourhero-ic[data-ck-ico] svg{stroke:var(--ck-yellow);stroke-width:1.5} #homeOv .cbtn .big[data-ck-ico]{width:30px;height:30px;flex:0 0 30px;margin:0 auto 3px} #homeOv .cbtn.sel .big[data-ck-ico] svg{stroke:var(--ck-yellow)} #homeOv .tourrewards [data-ck-ico]{flex:0 0 22px;width:22px;height:22px;margin-top:1px} #homeOv .bigbtn.primary .bi[data-ck-ico] svg{stroke:var(--ck-yellow)} #homeOv .bigbtn:active .bi[data-ck-ico] svg{stroke:var(--ck-chalk)} #homeOv .tourcard.live .tc-h [data-ck-ico] svg{stroke:var(--ck-yellow)} /* Whatever emoji is left over is bleached down so it never reads as a sticker. A slot holding real artwork is NOT an emoji — the game icons keep their colour, and only get the shadow of something lying on the floor. */ #homeOv .bi:not([data-ck-ico]):not(:has(img)):not(:has(svg)), #homeOv .sgi:not([data-ck-ico]):not(:has(img)):not(:has(svg)){ font-size:20px;filter:grayscale(1) brightness(2.2) opacity(.8);text-shadow:var(--ck-shadow)} #homeOv .sgi:has(img),#homeOv .bi:has(img){ filter:drop-shadow(0 3px 6px rgba(48,18,12,.6))} #homeOv .sgi img,#homeOv .bi img{width:100%;height:100%;object-fit:contain;display:block} #homeOv .gcard .gi.num{font-family:var(--ck-ui);font-weight:800;font-size:12px; color:var(--ck-chalk);text-shadow:var(--ck-shadow)} /* ===================================================================== 3 · TYPE INSIDE THE ROOMS ===================================================================== */ #homeOv .gcard .gt, #homeOv .shoptile .stt, #homeOv .wallrow .wn, #homeOv .tourcard .tc-h, #homeOv .subcard .sub-h, #homeOv .achgame .ag-n, #homeOv .tourhero-t{ font-family:var(--ck-disp);font-weight:600;font-size:15.5px;color:var(--ck-chalk); text-shadow:var(--ck-shadow);letter-spacing:.1px} #homeOv .gcard .gd, #homeOv .shoptile .sts, #homeOv .wallrow .wl, #homeOv .tourcard .tc-sub, #homeOv .subcard .sub-sub, #homeOv .tourhero-s{ font-size:11.5px;color:var(--ck-chalk-3);text-shadow:var(--ck-shadow);line-height:1.5} #homeOv .tourcard .tc-b{font-size:13.5px;color:var(--ck-chalk-2);text-shadow:var(--ck-shadow)} #homeOv .cbtn .big{font-family:var(--ck-disp);font-weight:600;color:var(--ck-chalk); text-shadow:var(--ck-shadow)} /* 11px floor — this is the "Best of 3 / Best of 5" caption a player reads to choose the length of a tournament */ /* the seat-count stepper's sub-label sits on a GOLD chip when selected, where a translucent ink measured 3.16:1 — solid ink instead */ #homeOv .cbtn .sm{font-size:11px;color:var(--ck-chalk-3);text-shadow:var(--ck-shadow)} #homeOv .cbtn.sel .sm{color:#4a3313} #homeOv .cbtn.sel .big{color:var(--ck-yellow)} #homeOv .pftile b{font-family:var(--ck-disp);font-weight:600;color:var(--ck-chalk); text-shadow:var(--ck-shadow)} #homeOv .pftile span{font-size:9.5px;color:var(--ck-chalk-3);text-shadow:var(--ck-shadow)} /* the premium mark is chalk too, not gold leaf */ #homeOv .shoptile.premium .stt::after{color:var(--ck-peach);text-shadow:var(--ck-shadow)} /* ===================================================================== 4 · THE SHELF HEADINGS (Games) A hand-drawn caption with a chalk rule ruled out to either side. ===================================================================== */ #homeOv .almshelf-h{ position:relative;display:flex;align-items:center;gap:12px; margin:26px 2px 12px;padding:0;background:none;border:0; font-family:var(--ck-ui);font-weight:800;font-size:11.5px;letter-spacing:2.6px; text-transform:uppercase;color:var(--ck-chalk-2);text-shadow:var(--ck-shadow); white-space:nowrap} #homeOv .almshelf-h::before,#homeOv .almshelf-h::after{ content:"";height:2.2px;flex:1 1 0;min-width:10px; background:var(--ck-chalk-4);filter:url(#ckRoughFine)} #homeOv .almshelf-h:first-child{margin-top:8px} /* ===================================================================== 5 · BUTTONS ===================================================================== */ #homeOv .btn, #homeOv .galipill, #homeOv .achclaim, #homeOv .achshare{ background:none !important;border:0 !important;box-shadow:none !important; position:relative;color:var(--ck-chalk-2); font-family:var(--ck-ui);font-weight:800;font-size:12px;letter-spacing:1.5px; text-transform:uppercase;text-shadow:var(--ck-shadow); padding:12px 20px;cursor:pointer; transition:transform var(--ck-fast) var(--ck-spring)} #homeOv .btn::before, #homeOv .galipill::before, #homeOv .achclaim::before, #homeOv .achshare::before{ content:"";position:absolute;inset:0; border:2.6px solid var(--ck-chalk-3);border-radius:999px; filter:url(#ckRoughFine);pointer-events:none; transition:border-color var(--ck-fast) var(--ck-out)} #homeOv .btn:active,#homeOv .galipill:active,#homeOv .achclaim:active{transform:scale(.96)} /* the one action that leads is chalked in yellow */ #homeOv .btn.primary,#homeOv .achclaim{color:var(--ck-yellow)} #homeOv .btn.primary::before,#homeOv .achclaim::before{border-color:var(--ck-yellow)} #homeOv .btn:disabled,#homeOv .btn.disabled{opacity:.42;pointer-events:none} #homeOv .cta{display:flex;gap:11px;margin-top:16px} #homeOv .cta .btn{flex:1} /* ===================================================================== 6 · WRITING SPACE (inputs) Not boxes — a chalk line ruled under the words, the way you write on a floor: the line comes first, the writing sits on it. ===================================================================== */ #homeOv input[type="text"], #homeOv input[type="email"], #homeOv input[type="password"], #homeOv input[type="number"], #homeOv textarea, #homeOv select{ background:none !important;border:0 !important;box-shadow:none !important; border-radius:0; border-bottom:2.4px solid var(--ck-chalk-4) !important; font-family:var(--ck-ui);font-size:15px;color:var(--ck-chalk); text-shadow:var(--ck-shadow);padding:9px 2px; transition:border-color var(--ck-fast) var(--ck-out)} #homeOv input:focus,#homeOv textarea:focus,#homeOv select:focus{ outline:0;border-bottom-color:var(--ck-yellow) !important} #homeOv input::placeholder,#homeOv textarea::placeholder{color:var(--ck-chalk-4)} #homeOv .authform{display:flex;flex-direction:column;gap:14px;margin-bottom:6px} #homeOv .autherr{color:var(--ck-pink);font-size:12px;text-shadow:var(--ck-shadow)} /* ===================================================================== 7 · GROUP ===================================================================== */ /* the group code is the one thing worth copying down — chalked in a box */ #homeOv .codechip{ position:relative;background:none !important;border:0 !important;color:var(--ck-yellow) !important; font-family:var(--ck-ui);font-weight:800;font-size:14px;letter-spacing:3px; text-shadow:var(--ck-shadow);padding:7px 13px;flex:0 0 auto} #homeOv .codechip::before{content:"";position:absolute;inset:0; border:2.2px dashed var(--ck-yellow);opacity:.55;border-radius:var(--ck-r-sm); filter:url(#ckRoughFine)} #homeOv .galipill{display:block;margin:4px auto 14px;color:var(--ck-chalk-2)} /* "+ New or join a group" matches Leave Group (owner, live trial 2026-09-08: "do the same fonts which is used for Leave Group"). Leave Group's .bt renders Fraunces 700/15.5px, no uppercase, near-zero tracking (measured via ?mp); the galipill default was Plus Jakarta 800/12px UPPERCASE +1.5px — visibly a different hand. Scoped to #newGroupPill so other galipills keep their look. */ #homeOv #newGroupPill{font-family:var(--ck-disp);font-weight:700;font-size:15.5px; letter-spacing:.3px;text-transform:none} #homeOv #memberWrap,#homeOv #myGroupsList{display:flex;flex-direction:column;gap:10px} #homeOv .memberrow{display:flex;align-items:center;gap:12px;padding:11px 13px; border-radius:var(--ck-r);cursor:pointer;text-align:left} #homeOv .memberrow .mrn{font-family:var(--ck-disp);font-weight:600;font-size:15px; color:var(--ck-chalk);text-shadow:var(--ck-shadow)} #homeOv .memberrow .mrs{font-size:11px;color:var(--ck-chalk-3);text-shadow:var(--ck-shadow)} /* The Group tab renders members as .onlinerow (12-home.js renderGroupPane), not .memberrow, so the name span above never got --ck-disp and rendered in a plain sans — different from every heading and from the Leave/Delete buttons. Owner, live trial 2026-09-08: "fonts are way different ... follow the fonts of Leave Group only." Give the member name the same display face + weight. Scoped to #memberWrap so the Play-tab #onlineWrap column (tiny 10px labels) is untouched. */ #homeOv #memberWrap .onlinerow > span:not(.dotp):not(.oav):not(.pfchev):not(.admbadge):not(.crown){ font-family:var(--ck-disp);font-weight:600;font-size:15px;color:var(--ck-chalk);text-shadow:var(--ck-shadow)} /* WhatsApp keeps its own green — it is somebody else's mark, not our chalk */ #homeOv .waicon svg,#homeOv #waShareIco svg{filter:drop-shadow(0 2px 3px rgba(40,16,10,.6))} /* ===================================================================== 8 · WALL ===================================================================== */ #homeOv #wallWrap{display:flex;flex-direction:column;gap:11px;margin-top:16px} #homeOv .wallrow{padding:13px 15px;border-radius:var(--ck-r);text-align:left} #homeOv .wallrow .wn{margin-bottom:5px} #homeOv .wallrow .wb{margin-top:8px;font-size:18px;display:flex;gap:8px; filter:drop-shadow(0 2px 4px rgba(40,16,10,.55))} #homeOv .walllegend{font-size:11px;color:var(--ck-chalk-3);text-shadow:var(--ck-shadow); margin-top:8px;line-height:1.55} /* achievements: the tier pips are chalk ticks, the badge art stays real */ #homeOv .achhdr{font-family:var(--ck-disp);font-weight:600;font-size:17px;color:var(--ck-chalk); text-shadow:var(--ck-shadow);margin:22px 2px 4px} #homeOv .achhint,#homeOv .achintro{font-size:11.5px;color:var(--ck-chalk-3); text-shadow:var(--ck-shadow);margin:0 2px 12px;line-height:1.5} /* .achgame is a PANEL — a game's name with its three tracks stacked under it — not a row. Laying it out as a flex row threw every track off the screen. */ #homeOv .achgame{display:block;padding:13px 14px;border-radius:var(--ck-r);margin-bottom:10px} #homeOv .achgame.isready::before{border-color:var(--ck-yellow)} #homeOv .aghead{display:flex;align-items:center;gap:9px;margin-bottom:9px} #homeOv .agicon{background:none;min-width:28px;width:28px;height:28px;padding:0; border-radius:8px;overflow:hidden;flex:0 0 28px; filter:drop-shadow(0 2px 4px rgba(48,18,12,.55))} #homeOv .agname{font-family:var(--ck-disp);font-weight:600;font-size:15px;color:var(--ck-chalk); text-shadow:var(--ck-shadow)} /* one track: icon, name over its four tier marks, then the reward */ #homeOv .amrow{display:flex;align-items:center;gap:10px;padding:9px 0; border-top:1px solid var(--ck-chalk-4);background:none} #homeOv .amrow.isready{background:none;border-radius:var(--ck-r-sm);border-top-color:transparent; padding:9px 8px;margin:0 -8px} #homeOv .amrow:first-of-type{border-top:0} #homeOv .amicon{flex:0 0 24px;width:24px;height:24px;font-size:17px;line-height:1; display:grid;place-items:center} #homeOv .ammeta{flex:1 1 auto;min-width:0} #homeOv .amname{font-size:13px;font-weight:700;color:var(--ck-chalk);text-shadow:var(--ck-shadow); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* NOWRAP. Four tier chips are a scale — 25 · 100 · 400 · 1000 — and a scale that folds onto a second line stops being one and doubles the row's height with it. They wrapped because the claim button was taking the whole row (owner 2026-08-05); that is fixed at its cause, and this makes sure the symptom cannot come back by some other route. `flex-wrap:wrap` here also outranked the `.amrow .amchips` rule in styles.css — id+class beats class+class — so it had to be said in this file or not at all. */ #homeOv .amchips{display:flex;gap:5px;margin-top:4px;flex-wrap:nowrap} #homeOv .amc{font-family:var(--ck-ui);font-weight:700;font-size:10px;padding:2px 6px; border-radius:999px;background:none;border:1.6px solid var(--ck-chalk-4); color:var(--ck-chalk-3);text-shadow:var(--ck-shadow)} #homeOv .amc.done{border-color:var(--ck-green);color:var(--ck-green)} #homeOv .amc.ready,#homeOv .amc.active{border-color:var(--ck-yellow);color:var(--ck-yellow)} #homeOv .ampx,#homeOv .amdone{flex:0 0 auto;font-family:var(--ck-ui);font-weight:700;font-size:11px; color:var(--ck-chalk-3);text-shadow:var(--ck-shadow);white-space:nowrap} #homeOv .amdone{color:var(--ck-yellow);font-size:15px} #homeOv .achclaim{padding:9px 14px;font-size:11px;flex:0 0 auto} /* …EXCEPT THE COMPACT ONE, WHICH MUST GIVE WAY (owner 2026-08-05: the claim button "disturbing the screen" on a per-game row). `#homeOv .achclaim` is id+class, so it outranks the `.achclaim.sm` rule in styles.css and would quietly put `flex:0 0 auto` back — the button would go on refusing to shrink and the fix would look applied while changing nothing. That is why this restatement exists: same specificity, same file, right after. The full-width card claim keeps 0 0 auto; only the row variant flexes. */ #homeOv .achclaim.sm{flex:0 1 auto;min-width:0;max-width:52%; padding:7px 11px;font-size:11px} /* the share button is a real control — it needs a thumb-sized box */ #homeOv .achshare{flex:0 0 auto;min-width:34px;min-height:34px;padding:6px; display:grid;place-items:center;font-size:15px} /* ===================================================================== 9 · CUPS (tournaments) ===================================================================== */ #homeOv .tourhero{text-align:center;padding:10px 0 4px} #homeOv .tourhero-ic{font-size:38px;filter:drop-shadow(0 4px 8px rgba(40,16,10,.6))} #homeOv .tourhero-t{font-size:25px;margin-top:8px} #homeOv .tourhero-s{max-width:31ch;margin:7px auto 0} #homeOv .tourcard{padding:15px;margin:14px 0;border-radius:var(--ck-r)} /* #8a5f12 on these tan cards measured 3.63-3.66:1 — readable but under AA, and these are the HEADINGS. A darker sign-painter's brown clears 4.5 without changing the hue the room is painted in. Owner 2026-08-16: "color crisp everywhere". */ #homeOv .tourcard .tc-h{margin-bottom:10px;color:#6a4708} #homeOv .tourpick{display:grid;grid-template-columns:1fr 1fr;gap:10px} #homeOv .tourpick > *{padding:12px;border-radius:var(--ck-r-sm);cursor:pointer; display:flex;align-items:center;gap:10px;position:relative; min-height:60px;height:auto;overflow:visible;text-align:left} #homeOv .tourpick > *::before{content:"";position:absolute;inset:0; border:2.2px solid var(--ck-chalk-4);border-radius:var(--ck-r-sm); filter:url(#ckRoughFine);pointer-events:none} #homeOv .tourpick > *.sel::before{border-color:var(--ck-yellow)} /* A game name wraps rather than gets cut — "Kachuful · Judgement" has to fit on a 320px phone in every language. The app clamps this to two lines; here the button is free to grow instead, so the third line is never lost. */ #homeOv .tg-n{font-size:12.5px;font-weight:700;color:var(--ck-chalk);text-shadow:var(--ck-shadow); min-width:0;overflow-wrap:anywhere;line-height:1.3;text-align:left; display:block;-webkit-line-clamp:none;overflow:visible} #homeOv .tg-ic img,#homeOv .tg-ic{filter:drop-shadow(0 3px 5px rgba(40,16,10,.55))} #homeOv .tourfmt{display:flex;gap:10px;margin-top:10px} #homeOv .tourfmt .cbtn{flex:1;padding:12px 8px} /* 41px measured. Scoped to this room's CTA rather than raised on .btn itself: .btn is the whole app's button, including the deliberately compact ones in the header tools row, and a global min-height would have grown those too. */ #homeOv #paneTour .cta .btn{min-height:44px} #homeOv .tourcall{display:flex;align-items:center;gap:11px;padding:12px 13px; border-radius:var(--ck-r-sm);margin-top:10px;cursor:pointer} #homeOv .tcall-chk{position:relative;width:22px;height:22px;flex:0 0 22px; background:none;border:0;margin-left:auto} #homeOv .tcall-chk::before{content:"";position:absolute;inset:0; border:2.4px solid var(--ck-chalk-3);border-radius:6px;filter:url(#ckRoughFine)} #homeOv .tourcall.on .tcall-chk::after{content:"";position:absolute;left:5px;top:2px; width:8px;height:14px;border:3px solid var(--ck-yellow);border-top:0;border-left:0; transform:rotate(42deg);filter:url(#ckRoughFine)} #homeOv .tourrewards{display:flex;flex-direction:column;gap:11px;margin-top:4px} #homeOv .tourrewards > div{display:flex;gap:11px;align-items:flex-start;font-size:13px; color:var(--ck-chalk-2);text-shadow:var(--ck-shadow);line-height:1.5} #homeOv .tourhall-empty{font-size:12px;color:var(--ck-chalk-3);text-shadow:var(--ck-shadow)} #homeOv .thf-row{display:flex;align-items:center;gap:10px;padding:9px 2px;font-size:13px; color:var(--ck-chalk-2);text-shadow:var(--ck-shadow)} #homeOv .tm-cup,#homeOv .tm-cupic{filter:drop-shadow(0 3px 5px rgba(40,16,10,.55))} /* ===================================================================== 10 · SHOP ===================================================================== */ #homeOv .shoptile{display:flex;align-items:center;gap:13px;padding:12px 13px; border-radius:var(--ck-r);margin-bottom:10px;cursor:pointer} #homeOv .shoptile .stt{margin-bottom:2px} /* price / owned mark, right-aligned, always chalk */ #homeOv .stbadge{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px; font-family:var(--ck-ui);font-weight:800;font-size:12.5px;letter-spacing:.4px; color:var(--ck-chalk-2);text-shadow:var(--ck-shadow);white-space:nowrap} #homeOv .stbadge .lakicon,#homeOv .stbadge .ck-marble{width:19px;height:19px;flex:0 0 19px; filter:drop-shadow(0 2px 3px rgba(40,16,10,.6))} #homeOv .shoptile.on .stbadge{color:var(--ck-yellow)} #homeOv #shopSubP{font-size:11.5px;color:var(--ck-chalk-3);text-shadow:var(--ck-shadow); margin:12px 2px 0;line-height:1.5} /* the showcase star is a real control — it keeps its corner, and the price badge is pulled clear of it so the two can never sit on top of each other */ #homeOv .pfstar{position:absolute;top:2px;right:4px;z-index:2; background:none;border:0;line-height:1;cursor:pointer; min-width:34px;min-height:34px;padding:0;display:grid;place-items:center; font-size:16px;color:var(--ck-chalk-4);text-shadow:var(--ck-shadow); transition:transform var(--ck-fast) var(--ck-spring)} #homeOv .pfstar.on{color:var(--ck-yellow)} #homeOv .pfstar:active{transform:scale(1.25) rotate(-12deg)} #homeOv .shoptile:has(.pfstar) .stbadge{margin-right:24px} /* ===================================================================== 11 · PROFILE ===================================================================== */ /* the showcase editor: pick what the group sees */ #homeOv .se-sec{margin:0 0 16px} #homeOv .se-h{font-family:var(--ck-ui);font-weight:800;font-size:11px;letter-spacing:2.4px; text-transform:uppercase;color:var(--ck-chalk-3);text-shadow:var(--ck-shadow);margin:0 2px 9px} #homeOv .se-row{display:flex;gap:11px;flex-wrap:wrap} #homeOv .se-t{position:relative;padding:0;border:0 !important; box-shadow:none !important;border-radius:var(--ck-r-sm);cursor:pointer; transition:transform var(--ck-fast) var(--ck-spring)} /* a mat swatch IS its background — only the empty tiles lose theirs */ #homeOv .se-deck,#homeOv .se-bng{background:none !important} #homeOv .se-mat{filter:drop-shadow(0 3px 5px rgba(48,18,12,.6))} #homeOv .se-t::before{content:"";position:absolute;inset:-4px;border:2.2px solid var(--ck-chalk-4); border-radius:calc(var(--ck-r-sm) + 2px);filter:url(#ckRoughFine);pointer-events:none} #homeOv .se-t.sel::before{border-color:var(--ck-yellow);border-width:2.8px} #homeOv .se-t:active{transform:scale(.94)} /* the star marks the choice — chalked INSIDE the tile so it can never cross the frame (no-overlap rule) */ #homeOv .se-t i{position:absolute;right:3px;top:2px;font-style:normal;font-size:12px; line-height:1;color:var(--ck-yellow);text-shadow:0 1px 3px rgba(50,20,14,.95)} #homeOv .se-hint{font-size:11px;color:var(--ck-chalk-3);text-shadow:var(--ck-shadow); line-height:1.5;margin-top:4px} #homeOv .pfsect{margin:18px 0 6px} #homeOv .pftile{padding:10px 6px;border-radius:var(--ck-r-sm);text-align:center;min-width:0} #homeOv .subcard{padding:15px;border-radius:var(--ck-r);text-align:left} #homeOv .subcard .sub-h{color:#6a4708} #homeOv .subcard.on .sub-h{color:var(--ck-green)} #homeOv .subcard.on::before{border-color:var(--ck-green)} #homeOv .subtiers{display:flex;gap:11px;margin-top:12px} #homeOv .subtier{flex:1;min-width:0;position:relative;padding:13px 9px;text-align:center; border-radius:var(--ck-r-sm);cursor:pointer; background:none !important;border:0 !important;box-shadow:none !important; transition:transform var(--ck-fast) var(--ck-spring)} #homeOv .subtier:active{transform:scale(.97)} #homeOv .subtier::before{content:"";position:absolute;inset:0;border:2.4px solid var(--ck-chalk-4); border-radius:var(--ck-r-sm);filter:url(#ckRoughFine);pointer-events:none} #homeOv .subtier.best::before{border-color:var(--ck-yellow)} #homeOv .st-n{font-size:13px;font-weight:700;color:var(--ck-chalk);text-shadow:var(--ck-shadow)} #homeOv .st-p{font-family:var(--ck-disp);font-weight:600;font-size:23px;color:var(--ck-yellow); text-shadow:var(--ck-shadow);margin:4px 0 3px} #homeOv .st-d{font-size:10.5px;color:var(--ck-chalk-3);text-shadow:var(--ck-shadow);line-height:1.45} /* the "best value" mark is written INSIDE the box — a chalk frame that gets cut open by a badge reads as a broken line, not as a label (no-overlap rule) */ #homeOv .subtier{padding-top:26px} #homeOv .st-tag{position:absolute;top:8px;left:50%;transform:translateX(-50%); font-family:var(--ck-ui);font-weight:800;font-size:11px;letter-spacing:1.4px; text-transform:uppercase;color:var(--ck-yellow);background:none;padding:0; white-space:nowrap;text-shadow:var(--ck-shadow)} #homeOv .sub-note{font-size:10.5px;color:var(--ck-chalk-3);text-shadow:var(--ck-shadow); line-height:1.45;margin-top:11px} #homeOv .sub-perk{font-size:12px;font-weight:700;color:var(--ck-yellow);text-shadow:var(--ck-shadow); margin-top:8px;display:flex;align-items:center;gap:6px} /* settings rows */ #homeOv .setrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0} #homeOv .setrow label{font-family:var(--ck-ui);font-weight:800;font-size:11px;letter-spacing:1.5px; text-transform:uppercase;color:var(--ck-chalk-3);text-shadow:var(--ck-shadow)} #homeOv .setrow .inline{display:flex;gap:9px;align-items:center;flex:1;min-width:150px} #homeOv .lang button,#homeOv .langsel button{ position:relative;background:none !important;border:0 !important;box-shadow:none !important; color:var(--ck-chalk-3);font-family:var(--ck-ui);font-weight:800;font-size:12px; text-shadow:var(--ck-shadow);padding:8px 11px;cursor:pointer} #homeOv .lang button::before,#homeOv .langsel button::before{content:"";position:absolute;inset:0; border:2.2px solid var(--ck-chalk-4);border-radius:var(--ck-r-sm);filter:url(#ckRoughFine)} #homeOv .lang button.on,#homeOv .langsel button.on{color:var(--ck-chalk)} #homeOv .lang button.on::before,#homeOv .langsel button.on::before{border-color:var(--ck-yellow)} #homeOv .chev{margin-left:auto;color:var(--ck-chalk-3);font-size:13px; transition:transform var(--ck-fast) var(--ck-out)} #homeOv .bigbtn.open .chev{transform:rotate(180deg)} /* the footer is written small at the bottom of the floor */ #homeOv .homefoot,#homeOv .homebody > p:last-child{font-size:11px;color:var(--ck-chalk-3); text-shadow:var(--ck-shadow);text-align:center;line-height:1.7;margin-top:22px} #homeOv a{color:var(--ck-chalk-2);text-decoration-color:var(--ck-chalk-4); text-underline-offset:3px;text-shadow:var(--ck-shadow)} #homeOv a:active{color:var(--ck-chalk)} /* the showcase star: what the group sees, marked in chalk */ #homeOv .shoptile.pfflash::before{border-color:var(--ck-chalk);border-width:3.2px} /* ===================================================================== 12 · THE ROOM DRAWS ITSELF IN Opening a section is not a swap — the chalk is laid down, top to bottom, the way you would draw it. Cheap: transform + opacity only. ===================================================================== */ @keyframes ckRoomIn{ from{opacity:0;transform:translateY(13px) scale(.985)} to {opacity:1;transform:none} } #homeOv .pane.on > *, #homeOv .pane.on #wallWrap > *, #homeOv .pane.on #gamewrap > *, #homeOv .pane.on #memberWrap > *, #homeOv .pane.on #tourBody > *{ animation:ckRoomIn .34s both var(--ck-out)} #homeOv .pane.on > *:nth-child(2), #homeOv .pane.on #gamewrap > *:nth-child(2), #homeOv .pane.on #wallWrap > *:nth-child(2){animation-delay:.035s} #homeOv .pane.on > *:nth-child(3), #homeOv .pane.on #gamewrap > *:nth-child(3), #homeOv .pane.on #wallWrap > *:nth-child(3){animation-delay:.07s} #homeOv .pane.on > *:nth-child(4), #homeOv .pane.on #gamewrap > *:nth-child(4), #homeOv .pane.on #wallWrap > *:nth-child(4){animation-delay:.105s} #homeOv .pane.on > *:nth-child(5), #homeOv .pane.on #gamewrap > *:nth-child(5), #homeOv .pane.on #wallWrap > *:nth-child(5){animation-delay:.14s} #homeOv .pane.on > *:nth-child(n+6), #homeOv .pane.on #gamewrap > *:nth-child(n+6), #homeOv .pane.on #wallWrap > *:nth-child(n+6){animation-delay:.175s} /* the langdi draws itself, so it must not also slide in */ #homeOv .pane.on > .ckLangdi{animation:none} @media (prefers-reduced-motion:reduce){ #homeOv .pane.on > *, #homeOv .pane.on #wallWrap > *, #homeOv .pane.on #gamewrap > *, #homeOv .pane.on #memberWrap > *, #homeOv .pane.on #tourBody > *{animation:none} #homeOv .gcard:active,#homeOv .shoptile:active,#homeOv .cbtn:active, #homeOv .subcard:active,#homeOv .memberrow:active,#homeOv .btn:active{transform:none} } /* ===================================================================== 13 · LEFTOVERS FROM THE WOODEN SHELL The almirah doors, the gali lights and the old wooden pane surfaces have no place on a chalk floor. ===================================================================== */ #homeOv .subchoose{display:flex;gap:11px;margin-top:16px;justify-content:center} #homeOv .cbtn{flex:1 1 0;min-width:0;padding:13px 10px;border-radius:var(--ck-r-sm);cursor:pointer} #homeOv .gamewrap{display:flex;flex-direction:column;gap:10px;margin:10px 0 4px} #homeOv .gcard{display:flex;align-items:center;gap:13px;padding:12px 14px; border-radius:var(--ck-r);cursor:pointer;text-align:left} #homeOv .gcard > div:last-child{min-width:0} #homeOv .gcard .gi{flex:0 0 42px;width:42px;height:42px;border-radius:11px; display:flex;align-items:center;justify-content:center} /* ===================================================================== 14 · KEYBOARD This layer takes the borders off nearly every control and draws them back as a ::before, which leaves someone tabbing through with nothing to look at. Every focusable thing gets the chalk gone over twice — only on :focus-visible, so a thumb never sees it. ===================================================================== */ #homeOv button:focus-visible, #homeOv a:focus-visible, #homeOv [role="button"]:focus-visible, #homeOv .gcard:focus-visible, #homeOv .shoptile:focus-visible, #homeOv .memberrow:focus-visible, #homeOv .onlinerow:focus-visible{ outline:3px solid var(--ck-yellow); outline-offset:3px; border-radius:var(--ck-r-sm)} #homeOv .ckLangdi .cell:focus-visible{outline:none} #homeOv .ckLangdi .cell:focus-visible .ck-draw{stroke:var(--ck-chalk)} #homeOv .ckLangdi .cell:focus-visible .bloom{opacity:.22} /* …EXCEPT THE PAINTED SLABS, which share the .cell class and nothing else. The three rules above trade the outline for a brighter chalk drawing, which is the right call for a cell that IS a drawing: .ck-draw goes chalk-white and the bloom lifts. A .slabcell has no .ck-draw and no .bloom — it is a painted image — so those two selectors match nothing on it and the outline:none is all that lands. slabs.css:22 already rings it, but this rule is an id plus two classes and beats it, so the courtyard's OWN navigation — GROUP, SHOP, CUPS and the rest, the six slabs a keyboard user walks first — was the one place in the house with no focus indicator at all. Measured with a real Tab walk, not read: outline came back 0px on every one of them. Chalk white rather than the yellow above, to match slabs.css and because the slabs sit on the dark courtyard where the warm yellow reads as part of the painting. Same id, one more class, so it wins by specificity rather than by being moved. */ #homeOv .ckLangdi .cell.slabcell:focus-visible{ outline:3px solid #fdf8ec; outline-offset:3px} /* the langdi is a real navigation list; a screen reader should hear it as one */ #homeOv .ckLangdi svg{outline:none} /* ===================================================================== 15 · THE TIER BAND (Wall · Achievements) Four tiers with a bar under them. Same two materials: chalk boxes, chalk numbers, and — for the small per-achievement icons the app draws as emoji and there is no drawing for — a bleach to monochrome so they read as chalk rather than as stickers left on the floor. ===================================================================== */ #homeOv .achtiers,#homeOv .achrow{display:flex;gap:8px;align-items:center} #homeOv .acht{flex:1;min-width:0;position:relative;text-align:center;padding:8px 3px; border-radius:var(--ck-r-sm);background:none !important;border:0 !important} /* No roughening on the tier chips or the bar. There are four chips per track and a dozen tracks per screen, and at this size the displacement is smaller than a pixel — all cost, no drawing. Wall was the one screen where it showed up in a scroll (~18fps on a throttled phone). */ #homeOv .acht::before{content:"";position:absolute;inset:0;border:2.2px solid var(--ck-chalk-4); border-radius:var(--ck-r-sm);pointer-events:none} #homeOv .acht-n{display:block;font-size:9.5px;font-weight:700;letter-spacing:.4px; color:var(--ck-chalk-3);text-shadow:var(--ck-shadow); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #homeOv .acht-v{display:block;font-family:var(--ck-disp);font-weight:600;font-size:15px; color:var(--ck-chalk);text-shadow:var(--ck-shadow);margin-top:2px} #homeOv .acht.done::before{border-color:var(--ck-green)} #homeOv .acht.done .acht-v,#homeOv .acht.done .acht-n::after{color:var(--ck-green)} #homeOv .acht.ready::before{border-color:var(--ck-yellow);border-width:2.8px} #homeOv .acht.ready .acht-v{color:var(--ck-yellow)} #homeOv .acht.active::before{border-color:var(--ck-chalk-2)} #homeOv .acht.lock{opacity:.45} /* the progress bar, ruled rather than moulded */ #homeOv .achbar{flex:1;height:6px;border-radius:999px;background:none;position:relative;overflow:visible} #homeOv .achbar::before{content:"";position:absolute;inset:0;border:2px solid var(--ck-chalk-4); border-radius:999px} #homeOv .achbar > *{height:100%;border-radius:999px;background:var(--ck-yellow);opacity:.85} #homeOv .achreadypill{font-family:var(--ck-ui);font-weight:800;font-size:10px;letter-spacing:1.2px; text-transform:uppercase;color:var(--ck-yellow);background:none;border:0; text-shadow:var(--ck-shadow);padding:0 0 0 8px} /* the small per-achievement marks: no drawing exists for each of thirty, so they are bleached to chalk instead of left as colour stickers */ #homeOv .amicon:not([data-ck-ico]), #homeOv .chicon:not([data-ck-ico]), #homeOv .agicon:not(.art):not([data-ck-ico]){ filter:grayscale(1) brightness(2.1) opacity(.82);text-shadow:var(--ck-shadow)}