/* ========================================================================= AANGAN · CHALK DESIGN SYSTEM (rebuild phase 1) ------------------------------------------------------------------------- The menus are chalk drawn on the verandah floor. Only real objects — the player's photo, the lakhoti marble, skin artwork — keep their own material. The game table is NOT part of this system and is never touched by it. Everything is namespaced `ck-` so it can live beside the existing app CSS without collisions while the shell is rebuilt screen by screen. Requires: js/00-chalk.js (injects the roughening SVG filters). ========================================================================= */ :root{ /* ---- chalk ---- */ --ck-chalk:#fdf8ec; /* SECONDARY CHALK WAS TOO THIN (owner 2026-08-16: "I want readability to be improved and color crisp everywhere"). These two tokens carry almost every secondary string in the house — the achievement descriptions, the shelf labels, the room hints, "Win each game once…", "★ marks what your group sees…" — and at .74 / .46 they measured 3.7-4.4:1 against their own dark grounds, i.e. below AA everywhere at once. .86 / .64 puts the same strings at roughly 6:1 and 5:1 without touching a single hue, which is what "crisp" has to mean in a warm, earthy house: more ink, not a brighter accent. One constant, not the same number in twenty-six selectors — the gate is .claude/mp/contrast.js. */ --ck-chalk-2:rgba(253,248,236,.86); --ck-chalk-3:rgba(253,248,236,.64); --ck-chalk-4:rgba(253,248,236,.30); /* the six chalks in the box — used for the langdi squares and accents */ --ck-pink:#f6bfd1; --ck-blue:#b4d3ef; --ck-yellow:#f8e4a0; --ck-green:#c2e2b9; --ck-peach:#f8ccae; --ck-lilac:#d8c6ec; /* ---- HALDI PAPER (owner 2026-08-04) ---------------------------------- The two sheets that open over a game — the almirah drawer you get after picking a game, and the in-game ⋯ menu — were plaque after plaque of a near-white cream (#fbf5e6) on a dark ground. The owner, choosing between three directions: "I need to go with my current game theme. The only off is the White Color." So this is the same warm theme with the white taken out of it: the paper is a deeper haldi tint, the ink is the brown it always was, and the brass accent is unchanged. Every value lives HERE and nowhere else, because before this it was written separately in tin.css, gamemenu.css and almirah.css and the three had already drifted apart by a shade. Change the paper once and both sheets move together. */ --hp-paper:linear-gradient(180deg,#e3d0a1 0,#dbc48d 62%,#cfb478 100%); --hp-paper-sheet:linear-gradient(178deg,#f2e2be,#e8d3a5 62%,#dcc38d); --hp-edge:rgba(132,92,38,.46); --hp-edge-soft:rgba(132,92,38,.3); --hp-lift:inset 0 1px 0 rgba(255,248,228,.75), inset 0 -1px 0 rgba(120,88,40,.2), 0 2px 5px rgba(60,40,14,.26); /* the same correction on the light side. --hp-ink-3 at .58 measured 2.7-2.9:1 on the gold and tan surfaces it is used on — "Best of 5", "Play with no banner ads.", "Predict you'll win…" — which is under 3:1 and therefore not being read at all. */ --hp-ink:#4a3313; --hp-ink-2:rgba(74,51,19,.94); --hp-ink-3:rgba(74,51,19,.80); --hp-ink-4:rgba(74,51,19,.34); --hp-ink-shadow:0 1px 0 rgba(255,248,228,.6); --hp-title:#8a3f1e; /* the sign-painter's lettering, warm not cobalt */ --hp-dim:#8a6a3c; --hp-red:#a8402f; /* hearts and diamonds on paper */ /* the dot field, so no plaque ever sits on flat colour */ --hp-field:radial-gradient(circle at 7px 7px, rgba(150,105,45,.085) 0 1.1px, transparent 1.8px); --hp-field-size:20px 20px; /* ---- the floor ---- */ --ck-floor:#8a4038; --ck-floor-dk:#5e2a24; --ck-grout:#3f1d18; --ck-tile:min(43.7vw,192px); /* one tile == one langdi square */ /* ---- type ---- */ --ck-disp:"Fraunces",Georgia,"Iowan Old Style",serif; --ck-ui:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto, "Noto Sans Gujarati","Noto Sans Devanagari","Noto Sans Gurmukhi",sans-serif; --ck-t-xs:9.5px; --ck-t-sm:10.5px; --ck-t-md:12px; --ck-t-lg:13px; --ck-t-xl:15px; --ck-t-2xl:19px; --ck-t-3xl:26px; /* chalk always carries a little shadow, the way it sits in the stone */ --ck-shadow:0 1px 3px rgba(62,24,18,.9), 0 0 10px rgba(62,24,18,.5); /* ---- shape + motion ---- */ --ck-r:16px; --ck-r-sm:12px; --ck-spring:cubic-bezier(.2,1.6,.4,1); --ck-out:cubic-bezier(.2,.8,.25,1); --ck-fast:.2s; --ck-mid:.42s; --ck-slow:.85s; } /* ===================== THE FLOOR ===================== */ /*
*/ .ck-floor{position:absolute;inset:0;z-index:0;background:var(--ck-floor);overflow:hidden} .ck-floor > i{position:absolute;inset:0;display:block;pointer-events:none} .ck-tiles{background-image:var(--ck-tileimg);background-size:var(--ck-tile) var(--ck-tile); background-position:26px 20px;background-repeat:repeat} /* the floor is the ground, never the subject — this wash lets the chalk lead */ .ck-wash{background:rgba(120,50,43,.62)} .ck-light{background: radial-gradient(78% 46% at 34% 6%, rgba(255,246,220,.30), rgba(255,246,220,0) 62%), radial-gradient(120% 70% at 50% 96%, rgba(46,20,14,.44), rgba(46,20,14,0) 58%)} .ck-dust{opacity:.05;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")} .ck-edge{background:radial-gradient(128% 82% at 50% 40%, rgba(0,0,0,0) 56%, rgba(44,18,12,.46) 100%)} /* ===================== TYPE ===================== */ .ck-title{font-family:var(--ck-disp);font-weight:600;font-size:var(--ck-t-3xl);color:var(--ck-chalk); line-height:1.1;text-shadow:var(--ck-shadow)} .ck-name{font-family:var(--ck-disp);font-weight:600;font-size:var(--ck-t-2xl);color:var(--ck-chalk); line-height:1.15;text-shadow:var(--ck-shadow)} /* small caps, widely tracked — the quiet labels */ .ck-eyebrow{font-family:var(--ck-ui);font-size:var(--ck-t-xs);font-weight:800;letter-spacing:2.2px; text-transform:uppercase;color:var(--ck-chalk-3);text-shadow:var(--ck-shadow)} .ck-sec{font-family:var(--ck-ui);font-weight:800;font-size:12.5px;letter-spacing:2.6px; text-transform:uppercase;color:var(--ck-chalk-2);text-shadow:var(--ck-shadow);margin:0 2px 11px} .ck-body{font-family:var(--ck-ui);font-size:var(--ck-t-md);line-height:1.45;color:var(--ck-chalk-2); text-shadow:var(--ck-shadow)} .ck-body b{color:var(--ck-chalk);font-weight:800} .ck-body em{font-style:normal;color:var(--ck-chalk-3)} .ck-num{font-family:var(--ck-ui);font-weight:800;font-variant-numeric:tabular-nums; color:var(--ck-chalk);text-shadow:var(--ck-shadow)} /* ===================== PRIMITIVES ===================== */ /* a box drawn in chalk: the border is roughened, the content stays crisp */ .ck-box{position:relative;padding:13px 15px} .ck-box::before{content:"";position:absolute;inset:0;border:2.6px solid var(--ck-chalk-2); border-radius:var(--ck-r);filter:url(#ckRoughFine);pointer-events:none} .ck-box--tap{cursor:pointer;transition:transform var(--ck-fast) var(--ck-spring)} .ck-box--tap:active{transform:scale(.97)} .ck-box--tap:active::before{border-color:var(--ck-chalk)} .ck-box--accent::before{border-color:var(--ck-accent,var(--ck-yellow))} /* hand-drawn divider */ .ck-rule{display:block;width:100%;height:12px;margin:16px 0;overflow:visible} .ck-rule path{fill:none;stroke:var(--ck-chalk-3);stroke-width:2.2;stroke-linecap:round; filter:url(#ckRoughFine)} /* back arrow — chalked in the corner, never a bar */ .ck-back{width:44px;height:44px;flex:0 0 auto;cursor:pointer;display:grid;place-items:center; transition:transform var(--ck-fast) var(--ck-spring);background:none;border:0;padding:0} .ck-back:active{transform:translateX(-3px) scale(.94)} .ck-back svg{width:100%;height:100%;display:block} .ck-back path{fill:none;stroke:var(--ck-chalk-2);stroke-width:3.4;stroke-linecap:round; stroke-linejoin:round;filter:url(#ckRoughFine)} .ck-back:active path{stroke:var(--ck-chalk)} /* a chalk ring around something real — a photo, an initial */ .ck-face{position:relative;width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center; font-size:23px;font-weight:800;color:var(--ck-chalk);text-shadow:var(--ck-shadow)} .ck-face > svg{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px)} .ck-face circle{fill:none;stroke:var(--ck-ring,var(--ck-chalk-2));stroke-width:2.4; filter:url(#ckRoughFine)} .ck-face img{width:100%;height:100%;border-radius:50%;object-fit:cover} .ck-face .ck-online{position:absolute;right:0;bottom:1px;width:9px;height:9px;border-radius:50%; background:#9fe0a6;box-shadow:0 0 6px rgba(159,224,166,.8)} /* chalk line icons */ .ck-ico{width:26px;height:26px;display:block} .ck-ico svg{width:100%;height:100%;display:block} .ck-ico path,.ck-ico circle,.ck-ico rect,.ck-ico line{fill:none;stroke:var(--ck-chalk-2); stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:url(#ckRoughFine)} /* a stat, a row — the two shapes every section needs */ .ck-stat{padding:14px 6px;text-align:center} .ck-stat b{display:block;font-family:var(--ck-disp);font-weight:700;font-size:24px; color:var(--ck-chalk);text-shadow:var(--ck-shadow);line-height:1} .ck-stat span{display:block;font-size:9px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase; color:var(--ck-chalk-3);margin-top:6px;text-shadow:var(--ck-shadow)} .ck-row{display:flex;align-items:center;gap:12px;padding:12px 14px} .ck-row .ck-row-t{flex:1;min-width:0;font-size:var(--ck-t-lg);font-weight:700;color:var(--ck-chalk); text-shadow:var(--ck-shadow)} .ck-row .ck-row-v{font-size:12.5px;font-weight:800;color:var(--ck-chalk-2);text-shadow:var(--ck-shadow); font-variant-numeric:tabular-nums} /* real artwork shown inside a chalk frame — decks, mats, bangles */ .ck-frame{position:relative;border-radius:var(--ck-r-sm);overflow:hidden;display:grid;place-items:center} .ck-frame::after{content:"";position:absolute;inset:0;border:2.4px solid var(--ck-chalk-2); border-radius:var(--ck-r-sm);filter:url(#ckRoughFine);pointer-events:none} .ck-frame--on::after{border-color:var(--ck-green)} /* the lakhoti marble — a real object resting on the chalk */ .ck-marble{display:block;filter:drop-shadow(0 3px 4px rgba(50,18,12,.6))} /* the gitti — the thrown stone, a different object from the currency entirely (owner 2026-07-29). Only the hopscotch throw uses it. */ .ck-gitti{display:block;filter:drop-shadow(0 3px 4px rgba(50,18,12,.6))} /* ===================== MOTION ===================== */ @keyframes ck-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .ck-en{opacity:0;animation:ck-rise .6s var(--ck-out) forwards} /* chalk that draws itself in — set pathLength="100" on the path */ @keyframes ck-draw{to{stroke-dashoffset:0}} .ck-draw{stroke-dasharray:100;stroke-dashoffset:100; animation:ck-draw var(--ck-slow) cubic-bezier(.3,.8,.3,1) forwards} /* chalk dust kicked up where the marble lands */ @keyframes ck-puff{from{transform:translate(-50%,-50%) scale(.2);opacity:.9} to{transform:translate(-50%,-50%) scale(2.6);opacity:0}} .ck-puff{position:fixed;z-index:39;pointer-events:none;border-radius:50%;width:54px;height:54px; background:radial-gradient(circle,rgba(255,250,238,.85),rgba(255,250,238,0) 70%); animation:ck-puff .6s ease-out forwards} /* the thrown marble lives above everything */ .ck-thrown{position:fixed;left:0;top:0;width:30px;height:30px;z-index:40;pointer-events:none; opacity:0;will-change:transform} .ck-thrown svg{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 5px rgba(40,14,10,.65))} @media (prefers-reduced-motion:reduce){ .ck-en{opacity:1;animation:none} .ck-draw{stroke-dashoffset:0;animation:none} .ck-box--tap:active{transform:none} }