/* =========================================================================
   AANGAN · CHALK HOME                                       (rebuild phase 2)
   -------------------------------------------------------------------------
   Dresses the real home overlay (#homeOv) as chalk on the verandah floor.
   Every rule is scoped to #homeOv, so the game table can never be touched.

   Nothing here replaces the app's markup — the live elements keep their ids
   and all their existing wiring; they are only re-dressed. Navigation is the
   langdi grid (js/33-chalk-home.js); the tab bar is retired.

   Load order: styles.css → chalk.css → chalk-home.css
   ========================================================================= */

/* ---------- the floor fills the whole overlay ---------- */
/* the scrim and the panel card both step aside: the floor IS the background */
#homeOv{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
  padding:0;align-items:stretch;justify-content:stretch}
#homeOv .panel.page{background:none;border:0;box-shadow:none;border-radius:0;position:relative;
  width:100%;max-width:none;height:100%;max-height:none;overflow:hidden}
#homeOv .ck-floor{z-index:0}
#homeOv .homehead,#homeOv .homebody{position:relative;z-index:1;background:transparent}
#homeOv .homebody{padding:0 16px}
/* the panes carried their own wooden surfaces — the floor is the surface now */
#homeOv .pane{background:none !important;border:0 !important;box-shadow:none !important;
  border-radius:0;padding:0}
#homeOv .pane::before{display:none !important}
#homeOv #almDoors,#homeOv #almCrown,#homeOv .gali-lights{display:none !important}

/* ---------- identity row ---------- */
#homeOv .homehead{display:flex;align-items:center;gap:12px;padding:14px 16px 6px;
  background:transparent;border:0;border-bottom:0}
/* the app's DOM order puts the marbles before the identity — put it back */
#homeOv .homehead .hh-back{order:0}
#homeOv .hh-me{order:1}
#homeOv .lakchip{order:2;margin-left:auto}
/* the per-tab title and the language switcher step aside; language lives in Profile */
#homeOv .hh-title,#homeOv #langHome{display:none !important}
/* the back arrow is chalked in the corner — the app already shows/hides it */
/* 44, not 40: the platform floor for a touch target is 44pt on iOS and 48dp
   on Android, and this is the control a player uses to get OUT of a room.
   The arrow inside is drawn by an SVG at width:100%, so it grows with the box
   — which is fine, it was a small mark in a small box. */
#homeOv .homehead .hh-back{display:none;width:44px;height:44px;padding:0;font-size:0;color:transparent;
  background:none;border:0;cursor:pointer;flex:0 0 auto;
  transition:transform var(--ck-fast) var(--ck-spring)}
#homeOv .homehead .hh-back.show{display:grid;place-items:center}
#homeOv .homehead .hh-back:active{transform:translateX(-3px) scale(.94)}
#homeOv .homehead .hh-back svg{width:100%;height:100%;display:block}
#homeOv .homehead .hh-back path{fill:none;stroke:var(--ck-chalk-2);stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round;filter:url(#ckRoughFine)}
#homeOv .homehead .hh-back:active path{stroke:var(--ck-chalk)}
/* photo in a chalk ring */
#homeOv .hh-me{display:flex;align-items:center;gap:11px;flex:1;min-width:0;margin:0;cursor:pointer;
  background:none;border:0;padding:0}
#homeOv .hh-av{position:relative;width:44px;height:44px;flex:0 0 auto;border-radius:50%;overflow:visible;
  display:grid;place-items:center;font-family:var(--ck-disp);font-size:20px;font-weight:600;
  color:var(--ck-chalk);background:none;border:0;box-shadow:none;text-shadow:var(--ck-shadow)}
#homeOv .hh-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
#homeOv .hh-av .ck-ring{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);
  pointer-events:none}
#homeOv .hh-av .ck-ring circle{fill:none;stroke:var(--ck-chalk-2);stroke-width:2.4;filter:url(#ckRoughFine)}
#homeOv .hh-id{display:flex;flex-direction:column;min-width:0}
#homeOv .hh-nm{font-family:var(--ck-disp);font-weight:600;font-size:18px;color:var(--ck-chalk);
  line-height:1.1;text-shadow:var(--ck-shadow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#homeOv .hh-grp{font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--ck-chalk-3);margin-top:3px;text-shadow:var(--ck-shadow);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#homeOv .hh-grp:empty{display:none}
/* the app hides the name on narrow screens — here it is the whole greeting */
@media (max-width:420px){ #homeOv .hh-me .hh-nm{display:block} }
/* the marble keeps its own material */
#homeOv .lakchip{background:none;border:0;padding:0;gap:7px;flex:0 0 auto;box-shadow:none}
#homeOv .lakchip .lakicon{width:26px;height:26px;filter:drop-shadow(0 3px 4px rgba(50,18,12,.6))}
#homeOv .lakchip b{font-family:var(--ck-ui);font-weight:800;font-size:16px;color:var(--ck-chalk);
  text-shadow:var(--ck-shadow)}

/* ---------- the tab bar is retired; the langdi is the navigation ---------- */
#homeOv .tabbar{display:none !important}
#homeOv .homebody{padding-bottom:26px}

/* ---------- the langdi grid ----------
   The grid is close to square, so on a phone held sideways an unbounded
   width made one square fill the screen. It is capped against the viewport
   HEIGHT as well, so a landscape phone gets a compact grid it can take in at
   a glance rather than a wall of chalk. Portrait is unaffected. */
/* The wrapper stays full-bleed — the grid is chalked on the floor, not inside
   a column — and the drawing itself is what gets capped and centred. */
#homeOv .ckLangdi{margin:4px -16px 2px;position:relative}
#homeOv .ckLangdi svg{width:100%;max-width:66vh;margin:0 auto;display:block;overflow:visible}
@media (orientation:landscape) and (max-height:520px){
  #homeOv .ckLangdi svg{max-width:58vh}
}
#homeOv .ckLangdi .cell{cursor:pointer}
#homeOv .ckLangdi .hit{fill:transparent}
#homeOv .ckLangdi .lbl,#homeOv .ckLangdi .num{pointer-events:none}
#homeOv .ckLangdi .lbl{font-family:var(--ck-ui);font-weight:800;letter-spacing:2.2px}
/* matches nothing today: 33-chalk-home.js stopped drawing the hopscotch
   numerals on 2026-07-30 (they could not sit in the corner of a half-width
   square at phone widths without touching the label). Kept with the `n` data
   that feeds it, for when the squares are wide enough to carry a number. */
#homeOv .ckLangdi .num{font-family:var(--ck-disp);font-weight:700}
#homeOv .ckLangdi .bloom{opacity:0;transition:opacity .4s ease}
#homeOv .ckLangdi .cell.lit .bloom{opacity:.34}

/* ---------- leftovers from the earlier attempt, retired ---------- */
#homeOv .brandLogo,#homeOv .homeChips,
#homeOv .sthdr,#homeOv .homeShelf{display:none !important}
/* .lastgame — the "Play Again" bar this rule used to spare on the Games pane
   — was removed for good, DOM and all, owner 2026-08-19: it pinned itself
   position:fixed across the foot of the games room (almirah.css) and
   permanently covered the last row of the game grid underneath it, with no
   way to scroll past it to see those names. Nothing left to hide. */

/* ---------- section headings ---------- */
#homeOv .homebody h3{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:22px 2px 11px;background:none;border:0;padding:0}
#homeOv .homebody h3::before,#homeOv .homebody h3::after{display:none}

/* ---------- every panel becomes a chalk box ---------- */
#homeOv .selgame,#homeOv .bigbtn,#homeOv .galipill,#homeOv .shoptile,
#homeOv .feeditem,#homeOv .onlinerow,#homeOv .grouprow,#homeOv .setrow > .bigbtn{
  background:none !important;border:0 !important;box-shadow:none !important;position:relative}
#homeOv .selgame::before,#homeOv .bigbtn::before,#homeOv .galipill::before,
#homeOv .grouprow::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}
/* ---- what you actually came here to do ----
   These sit under the langdi, and the langdi is drawn in bold coloured chalk.
   Left thin and grey they read as small print below a headline, so they are
   drawn with the same hand: thicker strokes, the langdi's own colours, and
   type big enough to be the point of the screen rather than a footnote. */
#homeOv .bigbtn,#homeOv .selgame{padding:16px 17px;margin-bottom:12px;color:var(--ck-chalk);
  transition:transform var(--ck-fast) var(--ck-spring)}
#homeOv .bigbtn:active,#homeOv .selgame:active{transform:scale(.97)}
#homeOv .bigbtn::before,#homeOv .selgame::before{border-width:3.2px}
#homeOv .bigbtn:active::before{border-color:var(--ck-chalk)}
#homeOv .bigbtn .bt{font-family:var(--ck-ui);font-weight:800;font-size:13px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--ck-chalk);text-shadow:var(--ck-shadow)}
#homeOv .bigbtn .bs{font-size:11.5px;color:var(--ck-chalk-2);text-shadow:var(--ck-shadow);
  margin-top:2px;display:inline-block}
#homeOv .bigbtn .bi{font-size:22px}
/* the chosen game is the square you just came from — pink, like GAMES */
#homeOv #panePlay .selgame::before{border-color:var(--ck-pink)}
#homeOv #panePlay .selgame .sgt span{color:var(--ck-pink)}
/* opening a real table is the one action that leads */
#homeOv .bigbtn.primary::before{border-color:var(--ck-yellow)}
#homeOv .bigbtn.primary .bt{color:var(--ck-yellow)}
#homeOv .bigbtn.primary .bi svg{stroke:var(--ck-yellow)}
/* playing alone is the quiet one beside it, but still drawn in colour */
#homeOv #panePlay .bigbtn:not(.primary)::before{border-color:var(--ck-green)}
#homeOv #panePlay .bigbtn:not(.primary) .bi svg{stroke:var(--ck-green)}
/* chosen game */
#homeOv .selgame{gap:14px}
#homeOv .selgame .sgt b{font-family:var(--ck-disp);font-weight:600;font-size:20px;color:var(--ck-chalk);
  text-shadow:var(--ck-shadow);line-height:1.2}
/* 11px floor. This caption carries "Group code" and the game's own subtitle —
   the line a player reads to check they are in the right room. */
#homeOv .selgame .sgt span{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--ck-chalk-2);text-shadow:var(--ck-shadow)}
#homeOv .selgame .sgc{background:none;border:0;font-size:11px;font-weight:800;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--ck-chalk-2);text-shadow:var(--ck-shadow);cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ck-chalk-4);
  min-height:36px;padding:0 4px;display:inline-flex;align-items:center;flex:0 0 auto}
#homeOv .selgame .sgi{width:46px;height:46px;flex:0 0 46px;
  filter:drop-shadow(0 3px 6px rgba(40,18,6,.6))}

/* ---------- who's online ---------- */
#homeOv #onlineWrap{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 8px;margin:0 -2px;
  scrollbar-width:none}
#homeOv #onlineWrap::-webkit-scrollbar{display:none}
#homeOv #onlineWrap .onlinerow{position:relative;flex:0 0 auto;flex-direction:column;
  align-items:center;width:66px;gap:7px;padding:0;text-align:center}
/* The row is a COLUMN here, so the app's `flex:0 0 24px` would land on the
   photo's height and letterbox it. The basis has to be restated. */
#homeOv #onlineWrap .onlinerow .oav{position:relative;flex:0 0 46px;
  width:46px;height:46px;min-height:46px;border-radius:50%;
  display:grid;place-items:center;overflow:visible;
  font-family:var(--ck-ui);font-weight:800;font-size:16px;
  color:var(--ck-chalk);background:none;border:0;text-shadow:var(--ck-shadow)}
#homeOv #onlineWrap .onlinerow .oav img{width:46px;height:46px;border-radius:50%;
  object-fit:cover;display:block}
/* the chalk ring is drawn OUTSIDE the photo, so the photo is never clipped by it */
#homeOv #onlineWrap .onlinerow .oav::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2.2px solid var(--ck-chalk-2);filter:url(#ckRoughFine);pointer-events:none}
/* the green light sits on the rim of the photo, measured from the row's centre */
#homeOv #onlineWrap .onlinerow .dotp{position:absolute;left:50%;top:31px;
  margin-left:12px;width:10px;height:10px;
  border-radius:50%;background:#9fe0a6;box-shadow:0 0 7px rgba(159,224,166,.85);z-index:2}
#homeOv #onlineWrap .onlinerow:not(.on) .dotp{background:var(--ck-chalk-4);box-shadow:none}
#homeOv #onlineWrap .onlinerow .ogrp,#homeOv #onlineWrap .onlinerow .pfchev{display:none}
#homeOv #onlineWrap .onlinerow > span:not(.dotp):not(.oav){font-size:10px;font-weight:700;
  color:var(--ck-chalk-2);max-width:60px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:var(--ck-shadow)}
#homeOv #onlineWrap .muted{font-size:11px;color:var(--ck-chalk-3);text-shadow:var(--ck-shadow);padding:2px}

/* ---------- recent results, written out by hand ---------- */
#homeOv #feedWrap{display:flex;flex-direction:column;gap:12px;padding:0 4px}
#homeOv .feeditem{display:block;padding:0;font-size:12px;line-height:1.45;color:var(--ck-chalk-2);
  text-shadow:var(--ck-shadow)}
#homeOv .feeditem b{color:var(--ck-chalk);font-weight:800}
#homeOv .feeditem .ago{color:var(--ck-chalk-3)}
#homeOv #feedWrap .muted{font-size:11px;color:var(--ck-chalk-3);text-shadow:var(--ck-shadow)}

/* ---------- everything else keeps working; just made legible on the floor -- */
#homeOv .muted{color:var(--ck-chalk-3);text-shadow:var(--ck-shadow)}
#homeOv .homebody{color:var(--ck-chalk-2)}
#homeOv .subtabs button{background:none;border:0;position:relative;color:var(--ck-chalk-3);
  font-family:var(--ck-ui);font-weight:800;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  text-shadow:var(--ck-shadow);padding:10px 4px;cursor:pointer}
#homeOv .subtabs button::before{content:"";position:absolute;inset:0;border:2.2px solid var(--ck-chalk-4);
  border-radius:var(--ck-r-sm);filter:url(#ckRoughFine)}
/* the chosen sub-tab is the same line gone over twice, not a filled pill */
#homeOv .subtabs button.on{background:none !important;color:var(--ck-yellow)}
#homeOv .subtabs button.on::before{border-color:var(--ck-yellow);border-width:2.8px}