/* =========================================================================
   AANGAN · THE CHOPADI (ચોપડી) — the rules, as a notebook you flip through
   -------------------------------------------------------------------------
   Owner 2026-08-16: "rules should be in a notebook. With bookmarks for
   different rules fro differet games. Likegoing through books for rules" —
   and then the name: "Chopadi".

   WHAT IT REPLACES. A link at the bottom of the Games room reading "Written
   rules for all games →". Two things were wrong with it. It was the only
   thing under the almirah, and its 44px plus a 14px margin was the entire
   reason the Games room scrolled on a phone (604px needed against 576px on a
   360x640 screen — take the link out and it is 546px). And it was a web link
   in a house made of objects: every other way into anything in this app is a
   thing you touch — a cupboard, a shelf, a notice board.

   So the rules became a chopadi: the cloth-bound ledger that sits in every
   Indian house, and the fifteen games are its bookmarks.

   HOW IT IS BUILT, and why this way:

   · THE TABS ARE THE NAVIGATION, and they run down the RIGHT edge rather
     than across the top. Fifteen tabs across the top of a 360px screen is
     24px each, which is under the tap-target floor and unreadable in five
     scripts. Down the side each tab gets the full row height, and the stack
     is exactly the gesture of a real bookmarked ledger.
   · THE PAGE IS THE ONLY THING THAT SCROLLS. The book, its spine, its tabs
     and its head all hold still — .ch-page is the one element with overflow,
     which is the same rule the rooms follow.
   · PAPER, NOT A CARD. Ruled lines, a red margin rule down the left, a warm
     cream ground and a gutter shadow against the spine. The three-layer test
     from the card backs applies here too: ground (paper + rule lines), then
     the content, then the ink details (margin rule, gutter, tab stitching).
   · NO NEW STRINGS IN FOUR OF FIVE PLACES. The game names come from the
     i18n keys GAME_META already points at, and the rules body comes from
     RULES_TEXT, which is already five languages. Only the book's own title
     needed translating.
   ========================================================================= */

#chopOv{position:fixed;inset:0;z-index:1400;display:none;
  background:rgba(22,13,5,.82);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#chopOv.show{display:grid;place-items:center;padding:14px}
@media (max-width:400px){ #chopOv.show{padding:8px} }

/* THE BOOK. dvh AND vh both, in that order, because on iOS `100vh` is the
   LARGE viewport and does not guard against the address bar — the same trap
   .panel.page already carries a note about. */
.chop{width:min(560px,100%);max-height:92vh;max-height:92dvh;height:100%;
  display:flex;flex-direction:column;position:relative;
  border-radius:5px 9px 9px 5px;overflow:hidden;
  background:linear-gradient(#8d3226,#6d2419);
  box-shadow:0 18px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,200,170,.25)}

/* the cloth cover, showing as a border all the way round the paper */
.chop::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(90deg,transparent 0 3px,rgba(0,0,0,.16) 3px 4px),
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.12) 3px 4px)}

/* ---- the head: title, language, close ---- */
.chop-hd{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:9px 11px;
  position:relative;z-index:3;color:#ffeedd}
.chop-hd .ch-t{font-family:var(--serif);font-size:16px;flex:1;margin:0;line-height:1.2}
.chop-hd .ch-t small{display:block;font-family:var(--sans);font-size:10px;
  letter-spacing:.6px;opacity:.62;font-weight:400}
.chop-hd button{background:rgba(0,0,0,.22);border:1px solid rgba(255,220,190,.3);
  color:#ffeedd;border-radius:9px;min-width:44px;height:38px;font-size:17px;cursor:pointer;
  font-family:var(--sans);line-height:1}
.chop-hd button:active{background:rgba(0,0,0,.4)}

/* ---- the body: spine | paper | tabs ---- */
.chop-bd{flex:1;min-height:0;display:flex;position:relative;z-index:2;
  margin:0 7px 8px;border-radius:2px 4px 4px 2px;overflow:hidden;
  box-shadow:0 3px 10px rgba(0,0,0,.4)}

/* the stitched spine, so the paper reads as bound and not as a panel */
.ch-spine{flex:0 0 13px;background:linear-gradient(90deg,#4d180f,#7a2b1e 60%,#5c2015);
  position:relative}
.ch-spine::after{content:"";position:absolute;left:5px;top:14px;bottom:14px;width:3px;
  background:repeating-linear-gradient(0deg,rgba(255,225,190,.55) 0 7px,transparent 7px 15px)}

/* THE PAGE — the one element in the whole book that scrolls. */
.ch-page{flex:1;min-width:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;position:relative;
  padding:15px 14px 20px 26px;
  /* THE RULED LINES ARE GONE. Owner 2026-08-16: "since the book has lines and
     the text is crawlable, it looks weird. Instead, either make all the words
     properly on the line or make the background and the page blank without the
     lines."
     Both options were on the table and this is the honest one. Sitting every
     line of type exactly on a rule means one fixed line-height for headings,
     body and five scripts at once — and Gujarati, Hindi, Marathi and Punjabi
     all have taller ascender/descender stacks than Latin, so any pitch that
     fits Devanagari leaves Latin floating and any pitch that fits Latin clips
     the matras. Ruled paper that the text does not sit on looks like a bug,
     which is exactly what the owner saw. Plain paper does not make that claim.
     The paper itself stays — grain, gutter and the red margin rule are what
     make it a chopadi rather than a card. */
  background:linear-gradient(100deg,#fffaf0,#f7eeda 55%,#f2e6cd)}
/* the gutter shadow where the paper meets the spine, and the red margin rule */
.ch-page::before{content:"";position:absolute;left:0;top:0;bottom:0;width:16px;
  pointer-events:none;background:linear-gradient(90deg,rgba(90,55,20,.30),rgba(90,55,20,0))}
.ch-page::after{content:"";position:absolute;left:19px;top:0;bottom:0;width:1px;
  pointer-events:none;background:rgba(196,76,60,.5)}

/* the line-heights below were pinned to the 25px rule pitch. With the rules
   gone they are set for READING instead, which is looser for prose and tighter
   under a heading. */
.ch-page h3{font-family:var(--serif);font-size:19px;color:#5c2015;margin:0 0 2px;
  line-height:1.25;position:relative}
.ch-page .ch-sub{font-size:11px;color:#8a6a3a;margin:0 0 14px;line-height:1.4;
  letter-spacing:.4px}
.ch-page h4{font-family:var(--serif);font-size:13.5px;color:#2f4f77;margin:15px 0 3px;
  line-height:1.3;font-weight:600}
.ch-page p{font-size:13px;color:#3b2a12;line-height:1.55;margin:0}
.ch-page p b{color:#8d3226}
.ch-page ol{margin:0;padding:0;list-style:none;counter-reset:chp}
.ch-page li{position:relative;padding-left:0}

/* ---- the bookmarks ---- */
.ch-tabs{flex:0 0 auto;width:104px;display:flex;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:rgba(60,22,14,.55);padding:5px 0 5px 3px;gap:3px}
@media (max-width:400px){ .ch-tabs{width:92px} }
.ch-tabs button{flex:0 0 auto;min-height:38px;display:flex;align-items:center;gap:6px;
  padding:5px 6px 5px 8px;border:0;border-radius:9px 0 0 9px;cursor:pointer;
  font-family:var(--sans);font-size:10.5px;line-height:1.2;text-align:left;
  color:#3b2a12;background:linear-gradient(90deg,#e9d7ae,#d8c193);
  box-shadow:inset 0 1px 0 rgba(255,250,235,.7),0 1px 3px rgba(0,0,0,.3);
  position:relative}
/* the coloured stitch down the tab's outer edge — this is what makes a row of
   tabs read as bookmarks rather than as a list of buttons */
.ch-tabs button::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;
  border-radius:2px;background:var(--tabc,#8d3226)}
.ch-tabs button .ci{flex:0 0 auto;width:19px;text-align:center;font-size:13px;line-height:1}
/* THREE OF THE FIFTEEN ICONS ARE NOT ICONS. mindi/kodi/aapo and the rest are
   single emoji, but 2-3-5, 7-8 and Kaali Ni Teeri carry "2·3·5", "7·8" and
   "♠3" — text, in a 19px box, which rendered straight over the game's name.
   Measured, not guessed: the render at 3x showed "2·3·5" and "2-3-5" on top
   of each other. A short icon keeps the tidy fixed column; a long one is
   allowed to be a small label instead. */
.ch-tabs button .ci.long{width:auto;max-width:30px;font-size:9px;font-weight:700;
  letter-spacing:-.2px;color:#5c2015}

/* the bug tab is position:fixed and sits at left:0, top:50% — straight across
   the page of an open book. It has its own row in the Profile drawer, so it
   loses nothing by standing down while the chopadi is being read. */
body.chop-open #bugFab{display:none}
.ch-tabs button .cn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}
.ch-tabs button.on{background:linear-gradient(90deg,#fffaf0,#f6ecd6);
  font-weight:600;transform:translateX(-4px);
  box-shadow:inset 0 1px 0 #fff,-2px 2px 6px rgba(0,0,0,.35)}
.ch-tabs button:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

/* the foot of the page: previous / next, so the book can be READ through as
   well as jumped around — that is what "going through books" means */
.ch-foot{flex:0 0 auto;display:flex;gap:8px;align-items:center;
  padding:0 7px 9px;position:relative;z-index:3}
.ch-foot button{flex:1;height:42px;border-radius:9px;cursor:pointer;
  border:1px solid rgba(255,220,190,.28);background:rgba(0,0,0,.2);color:#ffeedd;
  font-family:var(--sans);font-size:12.5px}
.ch-foot button:disabled{opacity:.35;cursor:default}
.ch-foot .ch-of{flex:0 0 auto;font-size:11px;color:rgba(255,235,215,.66);
  min-width:52px;text-align:center;letter-spacing:.5px}

@media (prefers-reduced-motion: reduce){
  .ch-tabs button{transition:none}
}

/* ---- the chopadi ITSELF, standing in the games room ----
   It leans against the wall beside the almirah's crown. Absolutely positioned
   so it costs the pane NO height — which was the entire point of removing the
   link it replaces. */
#chopBook{position:absolute;z-index:6;right:10px;top:8px;
  width:56px;height:62px;border:0;padding:0;cursor:pointer;background:transparent;
  -webkit-tap-highlight-color:transparent}
#chopBook svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 4px 7px rgba(60,30,10,.45))}
#chopBook:active svg{transform:translateY(1px)}
#chopBook:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:5px}
/* the label under it, so nobody has to guess what the object is */
/* THE LABEL WAS BEING CUT BY THE ALMIRAH'S FRAME (owner 2026-08-16: "the
   choppy word is getting cut off by the frame"). It hung BELOW the book at
   top:100%, and the book sits at the very top of the pane with the cupboard
   starting right under it — so in Gujarati, where "ચોપડી" is taller and wider
   than "Chopadi", the descender ran into the case. It goes ABOVE the book
   instead, into the wall band, where there is nothing to collide with. */
#chopBook .cb-lbl{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);
  margin-bottom:3px;font-family:var(--sans);font-size:9.5px;letter-spacing:.4px;
  color:#5a3a12;white-space:nowrap;text-shadow:0 1px 0 rgba(255,240,215,.7)}
/* 360px phones: the crown band is the same height, but the room is narrower,
   so the book steps in to keep clear of the tassel at the centre. */
@media (max-width:380px){ #chopBook{width:50px;height:56px;right:7px} }