/* v226 (Lou, 3.11) - the chrome rules of every full screen, in one place (loaded last).
   1. Nothing is ever seen under the status bar (clock, battery): an opaque band in the page's own colour sits above
      every full page and above the tab shell. The rules page had its purple hero under the clock after a scroll.
   2. Every full screen keeps its title row and back button pinned at the top while the content scrolls. A page that
      opens on a hero instead of a title row gets a compact bar (back + title) once the hero scrolls away (js/chrome.js).
   3. The page's primary action is always whole on screen and tappable without scrolling: its foot is pinned at the
      bottom, over the home indicator, on the page's colour - the content scrolls under it and ends above it.
   test/ws/chrome.js checks all three on every page, iPhone SE / 13 / Pro Max, 6 languages, day and night. */
:root{--kd-band:#F6F0E6}
html.pv-night{--kd-band:#1C1814}

/* 1. the status-bar band - full pages (the back of a page is fixed, the band is drawn over the page that scrolls in it) */
.modal-back.kd-page-back::after{content:"";position:absolute;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:var(--kd-band);z-index:60;pointer-events:none}
/* ... and the tab shell (play, friends, rating, a room) - under the table and under any pop-up, never on the welcome screen.
   Fixed, not in #app: on an iPhone the document itself can still be dragged (rubber band / a scroll that chains past
   #view), and an absolute band would go up with it and let the page show under the clock (live v225, iPhone 15) */
#app:has(>#view)::after{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:var(--kd-band);z-index:30;pointer-events:none}
body[data-route=home] #app::after,#app:has(>#view.kd-welcome-v)::after,#app:has(.boot-splash)::after{display:none}

/* 2. the title row: the page's first row, pinned under the band. v223 pinned it only on two kinds of pages and took
   the top padding away from every one of them, so a page that starts with a hero began under the clock - the padding
   stays, the pinned row pulls itself up over it instead */
.kd-page-modal .kd>[class*="-in"]{padding-top:calc(6px + env(safe-area-inset-top,0px))!important}
.kd-page-modal .kd>[class*="-in"]>:is(.top,.kd-go-top):first-child{position:sticky;top:0;z-index:30;margin:calc(-6px - env(safe-area-inset-top,0px)) -18px 0;
  padding:calc(6px + env(safe-area-inset-top,0px)) 18px 8px;height:auto;min-height:48px;background:var(--kd-band);box-shadow:0 1px 0 var(--line)}
/* the compact bar of a page that opens on a hero (js/chrome.js): back + the page's title, shown once the hero is gone */
.kd-pin-bar{position:absolute;top:0;left:0;right:0;max-width:520px;margin:0 auto;z-index:55;display:flex;align-items:center;gap:10px;box-sizing:border-box;
  padding:calc(6px + env(safe-area-inset-top,0px)) 18px 8px;min-height:calc(54px + env(safe-area-inset-top,0px));background:var(--kd-band);box-shadow:0 1px 0 rgba(70,50,25,.12);
  color:var(--text,#2B2118);transform:translateY(-100%);visibility:hidden;transition:transform .18s ease,visibility 0s linear .18s}
html.pv-night .kd-pin-bar{box-shadow:0 1px 0 rgba(255,236,210,.08);color:#F4EBDD}
.kd-pin-bar.on{transform:none;visibility:visible;transition:transform .18s ease,visibility 0s}
.kd-pin-bar .kd-pin-t{flex:1;min-width:0;margin:0;font-family:"Frank Ruhl Libre",Rubik,serif;font-weight:900;font-size:20px;line-height:1.15;white-space:nowrap;overflow:hidden}
.kd-pin-bar .ibtn{flex:none}

/* 3. the primary action: the page's foot is pinned at the bottom (BotSetup "התחילו משחק" was below the fold on
   iPhone). The feet that hold a page's main action; a page's own tab row or "my row" (profile, leaderboard) keeps its
   own pinning */
.kd-page-modal .kd>[class*="-in"]>:is(.kd-bs-foot,.kd-se-foot,.kd-pg-foot:not(.kdc-tabs):not(.kdb-minew)),
.kd-page-modal .kd>.kd-go-in>.btn-row:last-child{position:sticky;bottom:0;z-index:25;margin:auto -18px 0;padding:14px 18px calc(12px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,var(--kd-band) calc(100% - 14px),rgba(246,240,230,0))}
html.pv-night .kd-page-modal .kd>[class*="-in"]>:is(.kd-bs-foot,.kd-se-foot,.kd-pg-foot:not(.kdc-tabs):not(.kdb-minew)),
html.pv-night .kd-page-modal .kd>.kd-go-in>.btn-row:last-child{background:linear-gradient(to top,var(--kd-band) calc(100% - 14px),rgba(28,24,20,0))}
/* the page ends at the foot: the foot carries the bottom inset itself */
.kd-page-modal .kd>[class*="-in"]:has(>:is(.kd-bs-foot,.kd-se-foot,.kd-pg-foot:not(.kdc-tabs):not(.kdb-minew)):last-child),
.kd-page-modal .kd>.kd-go-in:has(>.btn-row:last-child){padding-bottom:0!important}
/* the game-over buttons: one row, the main one wider */
.kd-page-modal .kd>.kd-go-in>.btn-row:last-child{margin-top:auto;display:flex;flex-wrap:nowrap;gap:10px;align-self:stretch;width:auto}
/* the onboarding page (a view, not a pop-up): the same pinned title row (back, the three steps) */
#view.kd-onb-v .kd-onb-in>.top:first-child{position:sticky;top:0;z-index:20;margin:calc(-6px - env(safe-area-inset-top,0px)) -18px 0;
  padding:calc(6px + env(safe-area-inset-top,0px)) 18px 8px;height:auto;min-height:48px;background:var(--kd-band)}
/* 4. no dead space (Lou, live v225 home: ~350pt of nothing under "משחק של חבר?"): the tab bar is in the shell's flow
   (#app is a column: top bar, #view, #tabbar), not over the page, so the room the boards kept for a floating tab bar
   (110-118px + the home indicator) was empty. The tab pages end at their last card plus the normal gap; the tab bar
   carries the home indicator itself (.k-tabbar padding-bottom). test/ws/chrome.js measures it (at most 32px). */
#view.content:has(>.kd-main){padding-bottom:16px!important}
#view .kdb-pg{padding-bottom:16px}
/* 5. the frozen top bar of the tab shell (Lou, live v225 home: the half-cut "כל החפיסות" title right under the logo and
   coins). The content is clipped at the top of #view, so a scrolled-off row showed as sliced text under the bar. Once
   the page is scrolled (js/chrome.js sets .kd-scrolled), the bar gets the page colour and its hairline, and the first
   24px of the page fade into it - what scrolls up disappears cleanly under the bar. */
#view.content::before{content:"";display:block;flex:none;position:sticky;top:0;z-index:6;height:24px;margin-bottom:-24px;
  margin-inline:-16px;background:linear-gradient(to bottom,var(--kd-band),rgba(246,240,230,0));pointer-events:none;opacity:0;transition:opacity .15s}
html.pv-night #view.content::before{background:linear-gradient(to bottom,var(--kd-band),rgba(28,24,20,0))}
#view.content:has(>.kd-main)::before{margin-inline:0}
#view.content.kd-scrolled::before{opacity:1}
#app:has(>#view.kd-scrolled)>.topbar.kd-top{background:var(--kd-band);box-shadow:0 1px 0 var(--line);position:relative;z-index:21}
/* the tab pages with no top bar (friends, rating, a room): the page fades under the status-bar band instead */
#view.content:is(.kdb-v,.kd-rl-v)::before{top:env(safe-area-inset-top,0px)}
/* friends and rating (no top bar): their title row stays at the top like every page's (chrome.css 2.) */
#view .kdb-pg>.top:first-child{position:sticky;top:0;z-index:20;margin:calc(-10px - env(safe-area-inset-top,0px)) -18px 0;
  padding:calc(10px + env(safe-area-inset-top,0px)) 18px 8px;height:auto;min-height:48px;background:var(--kd-band)}
#view.kd-scrolled .kdb-pg>.top:first-child{box-shadow:0 1px 0 var(--line)}
/* the waiting room (and the matchmaking room) the same: its title row - the way out of the room, the table's name and
   the host's gear - stays at the top while the felt, the players and the chat scroll under it (Lou, live v225: every
   page keeps its way back while scrolling) */
#view .kd-rl-in>.top:first-child{position:sticky;top:0;z-index:20;margin:calc(-6px - env(safe-area-inset-top,0px)) -18px 0;
  padding:calc(6px + env(safe-area-inset-top,0px)) 18px 8px;height:auto;min-height:48px;background:var(--kd-band)}
#view.kd-scrolled .kd-rl-in>.top:first-child{box-shadow:0 1px 0 var(--line)}
/* 6. the room's "start" foot (Lou, live v225 with friends at the table: "no way to start the game"). The foot is sticky in
   .kd-rl-in, but the board in #view (a scrolling flex column) had min-height:100% and the default flex-shrink, so an
   engine may shrink it to the screen's height with the content overflowing it - a sticky foot can't leave its parent's
   box, so it stayed at the end of the long page (felt, players, rules, chat, alerts). Boards in #view keep their height. */
#view.content>.kd{flex-shrink:0}
/* the start button and the line that says what it waits for stay together in the pinned foot */
.kd-rl-foot .kd-rl-need,.kd-rl-foot .kd-rl-wait{margin:0 0 8px}
/* 7. the table chat sheet (Lou, live v225 with the keyboard open: a full-width red "שלח" and a sliver of an input): the
   input takes the row, the send button is a compact button at its end; while the keyboard is up the sheet sits on it
   (js/chrome.js sets --kd-kb from visualViewport) */
.kd .kd-rcs-row{display:flex;align-items:stretch;gap:8px}
.kd .kd-rcs-row .kd-in{flex:1 1 auto;min-width:0;min-height:46px}
.kd .kd-rcs-row .btn{flex:none;width:auto;min-width:72px;height:auto;min-height:46px;padding:0 12px;font-size:15px}
html.kd-kb .modal-back.open:has(.kd-rcs-modal){padding-bottom:var(--kd-kb,0px)!important}
/* v227 (Lou: with the mint or sky look the status-bar band, the tab bar and the pages stayed cream): they take the look's colour */
html.pv-mint{--kd-band:#eef5ef} html.pv-sky{--kd-band:#edf5fa}
html.pv-mint .kd .k-tabbar{background:rgba(238,245,239,.78)} html.pv-sky .kd .k-tabbar{background:rgba(237,245,250,.78)}
html.paper.pv-mint .modal.kd-page-modal>.kd:first-child,html.pv-mint .kd-page-modal>.kd{background:radial-gradient(120% 60% at 80% 0%,#F7FBF7 0%,rgba(247,251,247,0) 60%),linear-gradient(180deg,#F3F8F3 0%,#EEF5EF 45%,#E4EEE5 100%)}
html.paper.pv-sky .modal.kd-page-modal>.kd:first-child,html.pv-sky .kd-page-modal>.kd{background:radial-gradient(120% 60% at 80% 0%,#F6FAFD 0%,rgba(246,250,253,0) 60%),linear-gradient(180deg,#F2F8FC 0%,#EDF5FA 45%,#E1ECF4 100%)}