/* Aangan — THE UI KIT PASS (owner 2026-08-21, "build all", from the three
   reference kits). What was taken is the kits' VOCABULARY — crafted actions,
   ribbon tags, a real progress trough, tiered rewards, one icon hand — never
   their cartoon style. Two things this file deliberately does NOT touch,
   found the hard way while building it:
     · SUBTABS. tin.css is the owner's 2026-08-01 ruling ("get rid of the
       chalk based thing in any menu") that made every menu control a painted
       ENAMEL PLAQUE, drawn from the almirah plaques and the kirana signs.
       The cream tabs are that decision, not stock UI — they stay.
     · THE GREEN "yours" CARD in the kirana. "What is already yours reads
       green, so a shelf sorts itself before you read it." The ribbon below
       keeps the green for exactly that reason; only the shape changes.
   Gameplay surfaces (mat, board, seats, hand) are untouched — chrome only. */

/* ---- 1 · primary actions on the Play pane: teak body, brass primary ---- */
#panePlay .bigbtn{
  background:linear-gradient(180deg,#8a5a2c,#5f3c1b) !important;
  border:1px solid #3c2410 !important;
  color:#f2e2c2;
  text-shadow:0 -1px 0 rgba(20,10,4,.5);
  box-shadow:inset 0 1.5px 0 rgba(236,207,134,.4), inset 0 -3px 5px rgba(20,10,4,.4), 0 2px 5px rgba(8,4,1,.35);
}
#panePlay .bigbtn.primary{
  background:linear-gradient(180deg,#eccf86,#c9a44a 52%,#a5822f) !important;
  border-color:#7a5a24 !important;
  color:#33270a;
  text-shadow:0 1px 0 rgba(255,240,200,.6);
}

/* ---- 2 · progress is a carved trough with a marigold fill ----
   (the reference kits pour green into their troughs; marigold is this
   house's colour for "growing toward something") */
.achbar, #homeOv .achbar{
  height:10px;border-radius:6px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#241606,#3a2410 70%,#4a2c14) !important;
  border:1px solid #6b4d26;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.55), inset 0 -1px 0 rgba(236,207,134,.18);
}
#homeOv .achbar::before{content:none}                 /* retire the chalk outline */
.achbar > span, .achbar > *, #homeOv .achbar > *{
  height:100%;border-radius:5px;opacity:1;
  background:linear-gradient(180deg,#f7c95e,#e8912a 60%,#c96f1a) !important;
  box-shadow:inset 0 1px 0 rgba(255,236,180,.75);
}

/* ---- 3 · achievement tiers: wood, then brass-ready, then gold-done ----
   (the kit's wooden-star ladder, in the house's own metals; the chalk
   outline was the courtyard era's and retires with the rest of it) */
.acht, #homeOv .acht{border-radius:8px;border:1px solid #3c2410;
  background:linear-gradient(180deg,#4a2c14,#38200c);
  box-shadow:inset 0 1px 0 rgba(236,207,134,.18)}
#homeOv .acht::before{content:none}
.acht .acht-n, #homeOv .acht .acht-n{color:#c9a76a}
.acht .acht-v, #homeOv .acht .acht-v{color:#e8d5ac}
.acht.lock, #homeOv .acht.lock{opacity:.55}
.acht.ready, #homeOv .acht.ready{border-color:#eccf86;
  background:linear-gradient(180deg,#8a6220,#5c3f10);
  box-shadow:inset 0 1px 0 rgba(255,240,200,.5), 0 0 10px rgba(236,207,134,.35)}
.acht.done, #homeOv .acht.done{border-color:#7a5a24;
  background:linear-gradient(180deg,#eccf86,#c9a44a 55%,#a5822f)}
.acht.done .acht-n,.acht.done .acht-v,
#homeOv .acht.done .acht-n,#homeOv .acht.done .acht-v{
  color:#33270a;text-shadow:0 1px 0 rgba(255,240,200,.5)}
.acht.done .acht-v::after{content:" ★"}
/* A CLAIMED TIER IS A GOLD CHIP, and this rule is load-bearing (owner 2026-08-26:
   "after claiming, the texts are very blurred or invisible"). Three eras of CSS
   fight over .acht.done — the chalk `.acht::before` border, styles.css's faint-
   green fill, and this kit's gold fill + dark text. The measured result was the
   WORST mix: the dark kit text (#33270a, meant for gold) landed on a TRANSPARENT
   background with a pale chalk border, i.e. dark ink on the dark board. Pin the
   whole claimed chip here, high-specificity + !important, so the gold ground and
   its dark ink always travel together and the earned tier reads as earned. */
#homeOv .achcard .acht.done{
  background:linear-gradient(180deg,#eccf86,#c9a44a 55%,#a5822f) !important;
  border:1px solid #7a5a24 !important;box-shadow:inset 0 1px 0 rgba(255,244,214,.7) !important}
#homeOv .achcard .acht.done .acht-n,
#homeOv .achcard .acht.done .acht-v,
#homeOv .achcard .acht.done .acht-n::after,
#homeOv .achcard .acht.done .acht-v::after{
  color:#33270a !important;text-shadow:0 1px 0 rgba(255,240,200,.5)}

/* THE RED DOT FOLLOWS THE CLAIM (owner 2026-08-26: "the red dot ... should follow
   to the specific achievement ... should be there until I claim"). The Wall tab
   and the Achievements sub-tab already carry a dot for "something to claim"; now
   the claimable ROW carries one too, so the eye lands on the exact tier/challenge
   to claim. It rides the .isready / .ready state the renderer already sets, so it
   appears the instant a tier is earned and vanishes the instant it is claimed —
   no new state to track. */
#homeOv .achcard.isready .achtier-badge{position:relative;overflow:visible}
#homeOv .achcard.isready .achtier-badge::after,
#homeOv .chrow.ready > .chicon::after{content:"";position:absolute;top:-4px;right:-4px;
  width:11px;height:11px;border-radius:50%;background:#e0362c;
  border:2px solid #241606;box-shadow:0 1px 3px rgba(8,4,1,.5);z-index:3}
#homeOv .chrow.ready > .chicon{position:relative;overflow:visible}
.achtier-badge, #homeOv .achtier-badge{
  background:linear-gradient(180deg,#eccf86,#c9a44a 55%,#a5822f);
  color:#33270a;border:1px solid #7a5a24;border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,244,214,.8), 0 1px 3px rgba(8,4,1,.4);
  text-shadow:0 1px 0 rgba(255,240,200,.5)}

/* ---- 4 · "yours" is a RIBBON now, still green ---- */
#paneShop.kir .shoptile.on .stbadge{
  border-radius:0;padding:2px 9px 3px 13px;
  clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 50%);   /* the fishtail */
  background:linear-gradient(178deg,#dff0cf,#b4d39c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 2px 4px rgba(8,4,1,.5)}
#homeOv .pane:not(#paneShop) .shoptile.on .stbadge{
  background:linear-gradient(178deg,#dff0cf,#b4d39c);color:#2f5220;
  padding:2px 9px 2px 13px;border-radius:0;
  clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 50%);
  font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}

/* ---- 5 · challenge icons: the chalk bleach stays for marks that are still
   emoji (that is what it was FOR), but a drawn game tile gets its paint back,
   set on a teak plinth instead of grey glass ---- */
#homeOv .chicon.art{filter:none}
.chicon, #homeOv .chicon{background:linear-gradient(180deg,#5f3c1b,#3c2410) !important;
  border:1px solid #2a1808;color:#f0dcb2;
  box-shadow:inset 0 1px 0 rgba(236,207,134,.3)}

/* ---- 6 · variant toggles carry DRAWN icons, one stroke family with the
   kirana rail's signs — the two mindi toggles were the only emoji left in
   the drawer and the glyph font is a stranger's hand ---- */
.cbtn .vico{display:block;height:24px}
.cbtn .vico svg{width:22px;height:22px;display:block;margin:0 auto;color:#e8d5ac}
.cbtn.sel .vico svg{color:#33270a}

/* the track-head marks too: .achicon was never in the chalk bleach list, so
   three of the four tracks happened to read as quiet line-glyphs and the diya
   arrived as a full-colour sticker beside them (seen 2026-08-21) */
#homeOv .achicon:not([data-ck-ico]){filter:grayscale(1) brightness(2.1) opacity(.82)}

/* =========================================================================
   VARIANT INFO — the (i) on an option chip + its explanation popover
   (owner 2026-08-28). See addVarInfo/openVarInfo in 10-wiring.js. The chip
   itself stays the toggle; the (i) is a separate button that stops the tap
   from reaching the chip and raises a small themed card with the rule.
   Scoped to #pchoose so it covers BOTH the setup screen and the almirah
   drawer (the drawer moves the real #pchoose node, id and all).
   ========================================================================= */
#pchoose .cbtn{position:relative}
/* 20px, not 17 (owner 2026-08-29, UX sweep F2): the "what this means" dot was
   too small to land a finger on. Slightly larger ink + a real 44px hit area. */
#pchoose .cbInfo{position:absolute;top:4px;right:4px;width:20px;height:20px;padding:0;
  border:0;border-radius:50%;cursor:pointer;z-index:3;
  font-family:var(--ck-disp);font-style:italic;font-weight:700;
  font-size:12px;line-height:20px;text-align:center;
  color:#f7ecd0;background:radial-gradient(circle at 38% 32%,#7c5a2c,#5a3d18 70%,#432a10);
  box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,232,180,.35)}
/* a generous invisible tap target so the dot clears the 44px a thumb wants */
#pchoose .cbInfo::after{content:"";position:absolute;inset:-13px}
#pchoose .cbInfo:active{transform:scale(.9)}
/* on a selected (gold) chip the dark dot still reads — keep it */
#pchoose .cbtn.sel .cbInfo{background:radial-gradient(circle at 38% 32%,#5a3d18,#3a2610 72%);color:#ffedc4}

/* the explanation popover */
#varInfoOv{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(30,18,8,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#varInfoOv.show{display:flex}
#varInfoOv .viCard{width:100%;max-width:300px;border-radius:12px;padding:18px 18px 16px;
  background:linear-gradient(180deg,#faf3e1,#f0e4c6);color:#4a3313;
  box-shadow:inset 0 0 0 2px #caa040,inset 0 0 0 4px #5a3717,0 14px 30px rgba(0,0,0,.5);
  animation:viPop .18s ease-out}
@keyframes viPop{from{transform:translateY(10px) scale(.97);opacity:0}to{transform:none;opacity:1}}
#varInfoOv .viT{margin:0 0 8px;font-family:'Fraunces','Baloo 2',Georgia,serif;font-weight:700;
  font-size:17px;color:#8a3f1e}
#varInfoOv .viB{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:#5a3f1c}
#varInfoOv .viB b{color:#8a3f1e}
/* the popover lives OUTSIDE #homeOv, so tin.css's .btn.primary gold plaque
   never reaches it (that rule is scoped to #homeOv panes) — style the button
   here or it renders as pale text on pale paper. (owner pale-on-pale rule) */
#varInfoOv .viX{width:100%;border:0;cursor:pointer;padding:11px 14px;border-radius:9px;
  font-family:'Baloo 2','Trebuchet MS',sans-serif;font-weight:700;font-size:15px;
  color:#4a2b0c;background:linear-gradient(180deg,#f3cd74,#dca63c 60%,#c78f27);
  box-shadow:inset 0 1px 0 rgba(255,246,214,.7),0 2px 5px rgba(0,0,0,.3)}
#varInfoOv .viX:active{transform:translateY(1px)}
@media(prefers-reduced-motion:reduce){#varInfoOv .viCard{animation:none}}