/* ══════════════════════════════════════════════════════════════
   Istanbulite — frames + shadows design layer
   - Body sits on the lightest tone in light mode, the darkest in
     dark mode. Every major panel (top bar, side columns, main,
     döviz, mobile nav) becomes its own rounded "frame" with a
     drop shadow, so each component reads as a discrete card
     floating on the page canvas.
   - Loaded AFTER each page's inline <style>, so its selectors
     win the cascade where specificity ties.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Page canvas — a warm light beige, brighter than --paper but
     still firmly in the earth/brown family (not a desaturated
     near-white). Sits behind the framed panels. */
  --page-bg: #f1dfc6;

  /* Frame fill — a touch darker than the existing --paper so the
     panels read as discrete surfaces against the brighter canvas. */
  --frame-bg: #e3cdbe;

  /* Frame visuals — punchier shadow so the panels visibly lift
     off the canvas despite their square corners. */
  --frame-gap: 10px;
  --frame-pad: 10px;
  --frame-shadow:
    0 12px 28px -6px rgba(76, 56, 42, 0.42),
    0 4px 10px -2px rgba(76, 56, 42, 0.28),
    0 1px 2px rgba(76, 56, 42, 0.18);
  --frame-shadow-strong:
    0 18px 38px -8px rgba(76, 56, 42, 0.50),
    0 6px 14px -2px rgba(76, 56, 42, 0.34),
    0 1px 2px rgba(76, 56, 42, 0.20);
}

/* Mono (siyah-beyaz) palette — same specificity trick as palette.css:
   :root[data-palette="mono"] (0,2,0) beats the plain :root above (0,1,0)
   regardless of source order, and also beats the prefers-color-scheme
   block below since that also only targets plain :root. */
:root[data-palette="mono"] {
  --page-bg: #f0f0f0;
  --frame-bg: #eaeaea;
  --frame-shadow:
    0 12px 28px -6px rgba(0, 0, 0, 0.32),
    0 4px 10px -2px rgba(0, 0, 0, 0.20),
    0 1px 2px rgba(0, 0, 0, 0.14);
  --frame-shadow-strong:
    0 18px 38px -8px rgba(0, 0, 0, 0.40),
    0 6px 14px -2px rgba(0, 0, 0, 0.26),
    0 1px 2px rgba(0, 0, 0, 0.16);
}

/* Dark mode — flip the base palette so frames stay readable, and
   make the canvas the darkest tone with a stronger shadow. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:          #f1e6d9;
    --ink-deep:     #f7eee2;
    --paper:        #2a1f17;
    --paper-warm:   #2a1f17;
    --paper-card:   #3a2c20;
    --paper-banner: #4a382a;
    --paper-navbar: #1c130b;
    --paper-dark:   #251910;
    --hover:        #3a2c20;
    --field-bg:     #251a13;
    --accent:       #d6bda3;
    --accent-2:     #b8997f;
    --muted:        #9c8268;
    --rule:         #4a382a;
    --hairline:     #3a2c20;
    --whisper:      #2f2218;
    --ink-red:      #e07a72;
    --brown-1:      #a88a72;
    --brown-2:      #b89580;
    --brown-3:      #c9aa90;
    --brown-4:      #d4bba0;

    /* Darkest tone — page canvas in dark mode (deeper than --paper so
       the panels still read as raised surfaces). */
    --page-bg: #040200;
    /* Frame fill — slightly lighter than --paper for separation. */
    --frame-bg: #352720;
    --frame-shadow:
      0 14px 32px rgba(0, 0, 0, 0.72),
      0 4px 10px rgba(0, 0, 0, 0.55),
      0 1px 2px rgba(0, 0, 0, 0.40);
    --frame-shadow-strong:
      0 20px 44px rgba(0, 0, 0, 0.80),
      0 6px 14px rgba(0, 0, 0, 0.65),
      0 1px 2px rgba(0, 0, 0, 0.40);
  }
}

/* ── PAGE CANVAS ─────────────────────────────────────────────── */
html,
body {
  background: var(--page-bg) !important;
}

/* ── OUTER FRAME PADDING + GAP ───────────────────────────────── */
/* Pages where body IS the grid (kahvehane, kutuphane, sozcel,
   tumcel, bulmaca) → put the outer ring + gap on body. We set
   sides individually so the inline mobile padding-bottom (used
   to reserve space for the fixed bottom tab bar) survives. */
body {
  padding-top: var(--frame-pad);
  padding-left: var(--frame-pad);
  padding-right: var(--frame-pad);
  gap: var(--frame-gap);
}

/* On anahane, body is a flex column wrapping #main-site (the
   real grid). To avoid double-ringing, strip body padding when
   it has a #main-site child — the inner #main-site rule below
   provides the ring instead. */
body:has(> #main-site) {
  padding: 0 !important;
}

/* anahane's grid container. Height drops from 100vh to 100% so
   the grid fits inside the body box. Sides individually so
   inline mobile padding-bottom (56px for the fixed nav) survives. */
#main-site {
  padding-top: var(--frame-pad);
  padding-left: var(--frame-pad);
  padding-right: var(--frame-pad);
  gap: var(--frame-gap);
  height: 100% !important;
}

/* Desktop: add the missing bottom ring (mobile already reserves
   bottom space for the fixed nav, so don't override there). */
@media (min-width: 769px) {
  body { padding-bottom: var(--frame-pad); }
  #main-site { padding-bottom: var(--frame-pad); }
}

/* ── FRAME COMPONENTS ────────────────────────────────────────── */
/* Each major panel becomes a flat (square-cornered) card sitting
   a touch darker than the canvas, with a drop shadow. Outer
   borders that previously connected panels are dropped — the
   shadow + gap now do the separating. */
.section-rule,
.col-left,
.col-right,
main,
#doviz-panel {
  border: none !important;
  box-shadow: var(--frame-shadow);
  background: var(--frame-bg) !important;
  overflow: hidden;
}

/* Side columns sit above any full-viewport bottom-sheet backdrop (the
   game overlay on Kahvehane, the article reader on Kütüphane — both
   z-index 500) so content swapped into them while the sheet is open
   (the scoreboard/game blurb, the chapter nav) stays fully visible and
   clickable instead of being dimmed away like the map/main behind it.
   No explicit `position` here on purpose: on all three pages these
   columns are grid items, and z-index already applies to grid items at
   their default position: static — forcing `position: relative` here
   once collided with a page whose columns were still `position: fixed`
   floating cards and silently downgraded them to `relative`, collapsing
   their layout.
   Desktop-only: on mobile both sheets fall back to full-bleed (covering
   the columns entirely by design), so lifting the columns above them
   there would wrongly poke their content through the sheet itself. */
@media (min-width: 769px) {
  .col-left,
  .col-right {
    z-index: 501;
  }
}

/* ── BOTTOM SHEETS (game overlay / article reader / news+event detail / profile) ──
   The site's "chapter-box" card border — same 2px ink border used by
   .article, .event-item, .game-link, .shelf-btn, .path-node — instead
   of the flat shadow-only treatment above, so these sheets read as the
   same kind of card, just bigger. No box-shadow: like the rest of the
   chapter-box family, the border alone carries the weight. Kept as its
   own rule since these sheets manage their own overflow/scroll already.
   No bottom border: these sheets sit flush against the true viewport
   bottom (bottom: 0 in each page's own rule, desktop and mobile alike),
   so leaving it off makes the sheet read as continuing past the screen
   instead of visibly stopping. */
.game-overlay-sheet,
.reader-overlay-sheet,
.detail-overlay-sheet,
.profile-overlay-sheet {
  background: var(--frame-bg) !important;
  border: 2px solid var(--ink) !important;
  border-bottom-width: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Mobile profile card mount → frame the card inside it too. */
#ist-pc-mount > * {
  box-shadow: var(--frame-shadow);
  overflow: hidden;
}

/* ── DESKTOP HEADER (nav bar inside section-rule, no extra frame) */

/* ── MOBILE FIXED BOTTOM NAV ─────────────────────────────────── */
/* On mobile, .section-rule > header is repositioned to a fixed
   bottom tab bar (anahane/kahvehane/kutuphane/sozcel/tumcel/
   bulmaca). Scoped to .section-rule > header so admin.html's top
   header is untouched. */
@media (max-width: 768px) {
  .section-rule > header {
    border: none !important;
    box-shadow: none !important;
  }
}

/* ── LOGIN / SIGNUP BOX ──────────────────────────────────────── */
/* These boxes have a ::before pseudo-element for an inner double
   border at inset: 4px. Adding a rounded outer radius would
   clash with the sharp pseudo-border, so we leave the shape
   alone and just float each box with a stronger shadow. */
.login-box,
.admin-login-box {
  box-shadow: var(--frame-shadow-strong);
}

/* ── GAME / ARTICLE PANELS ───────────────────────────────────── */
/* Game pages render their boards inside <main>. Inner sub-panels
   (e.g. the daily-game cards on kahvehane) keep their existing
   look; only the top-level frames change. */