/* =====================================================================
   theme-dark.css: the NIGHT theme's foundation, "Yoru". Loaded by every
   page after its own stylesheet (site.css / app.css + eval.css /
   journal.css) and BEFORE style-montsuki.css and layout-side.css.

   Its first look was Japanese lacquerware (urushi with maki-e gold). The
   montsuki look (style-montsuki.css) now paints over most of it: the night
   palette (page, panels, indigo, gold, red) is in that file's section 2,
   and anything it restyles in both themes was removed from here. What is
   still this file's own:

     - the text colors at night (--charcoal, --ink, …) and the moon;
     - the moon and stars over the homepage;
     - gold hairlines and soft gold glows around buttons, game rows,
       inputs, the upload popup and the Evaluation page's charts;
     - the stone bowls' polish, so the black one shows on the dark mat.

   The goban and the stones never change: they are real objects.
   Everything here applies only while js/theme.js has put
   data-theme="dark" on <html> (the Settings page: System / Light / Dark).
   ===================================================================== */

/* ---------- 1. Palette ---------------------------------------------- */
/* Colors set here and ALSO in style-montsuki.css section 2 (--lacquer,
   --gold-leaf, --indigo-deep, --forest, --vermilion, --bar, …) are left
   out: the montsuki values are the ones shown. */
:root[data-theme="dark"]{
  color-scheme:dark;

  /* The first night theme's gold leaf (#c9a96b) as an "R,G,B" triplet,
     used for the faint gold lines and glows below:
     rgba(var(--night-gold-rgb), .35). (The montsuki look changed
     --gold-leaf itself to silk, #ece6da; these lines kept the old gold.) */
  --night-gold-rgb:201,169,107;
  --moon:#efe6d2;

  /* The shared tokens from base.css, re-pointed. */
  --page:var(--lacquer);
  --grain-page:var(--grain-dark);
  --ivory:var(--lacquer-raised);
  --raised-hover:var(--lacquer-high);
  --charcoal:#ddd4c2;                /* body text: moonlit parchment */
  --ink:#f0e4c8;                     /* headings: parchment touched with gold */
  --indigo-muted:#bcae90;
  --vermilion-wash:rgba(192,87,62,.14);
  --muted-on-light:#aaa294;          /* 5:1 on the panels */
  --text-on-dark:var(--moon);
  --muted-on-dark:#a39b8c;
  --error:#e6907a;
  --brand-ink:var(--ink);            /* "HayaGo" in parchment, not black */

  scrollbar-color:rgba(var(--night-gold-rgb),.35) transparent;
}
[data-theme="dark"] ::selection{background:rgba(var(--night-gold-rgb),.35);color:#fff;}

/* ---------- 2. Top of every page ------------------------------------ */
[data-theme="dark"] .brand-mark,
[data-theme="dark"] .on-dark .brand-mark{filter:invert(1) sepia(.35) brightness(.97);}
[data-theme="dark"] .profile-avatar{border-color:rgba(var(--night-gold-rgb),.45);}
[data-theme="dark"] .profile-menu{border-color:var(--gold-line);box-shadow:0 14px 34px rgba(0,0,0,.65);}
[data-theme="dark"] .profile-menu button:hover,
[data-theme="dark"] .profile-menu a:hover,
[data-theme="dark"] .profile-menu :focus-visible{background:rgba(var(--night-gold-rgb),.10);color:var(--gold-leaf);}

/* ---------- 3. Panels: gold edges ------------------------------------ */
[data-theme="dark"] .surface-cream{box-shadow:inset 0 0 0 1px var(--gold-line);}

/* Gold rules fade out at their right end, like a brush stroke of gold. */
[data-theme="dark"] .rule-gold{background:linear-gradient(90deg, var(--gold-leaf), rgba(var(--night-gold-rgb),.12));opacity:1;}

/* ---------- 4. Buttons and links ------------------------------------ */
/* The main button is a block of gold-leaf (silk in the montsuki look) with
   lacquer-dark words; on hover it turns warm gold. Secondary (.btn-quiet)
   and buttons on colored panels stay a gold outline. */
[data-theme="dark"] .btn{background:var(--gold-leaf);color:var(--on-ink);border-color:var(--gold-leaf);}
[data-theme="dark"] .btn.btn-quiet,
[data-theme="dark"] .on-dark .btn,
[data-theme="dark"] .surface-indigo .btn,
[data-theme="dark"] .surface-forest .btn,
[data-theme="dark"] .surface-kaki .btn{background:transparent;color:var(--gold-leaf);border-color:rgba(var(--night-gold-rgb),.7);}
[data-theme="dark"] .btn.btn-quiet{border-color:rgba(var(--night-gold-rgb),.35);}
[data-theme="dark"] .btn::after{display:none;}
[data-theme="dark"] .btn:hover,
[data-theme="dark"] .btn.btn-quiet:hover,
[data-theme="dark"] .on-dark .btn:hover,
[data-theme="dark"] .surface-indigo .btn:hover,
[data-theme="dark"] .surface-forest .btn:hover,
[data-theme="dark"] .surface-kaki .btn:hover{
  background:#d8bd85;color:var(--on-ink);border-color:#d8bd85;
}
[data-theme="dark"] .btn:disabled:hover{background:var(--gold-leaf);color:var(--on-ink);}
[data-theme="dark"] .btn.btn-quiet:disabled:hover{background:transparent;color:var(--gold-leaf);}
[data-theme="dark"] .link-arrow{border-bottom-color:var(--gold-line);}
[data-theme="dark"] .link-arrow:hover{border-bottom-color:var(--gold-leaf);color:var(--gold-leaf);}

/* Text boxes and drop-downs. */
[data-theme="dark"] select,
[data-theme="dark"] .picker-btn,
[data-theme="dark"] .picker-list,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] .login-field input{background:var(--field);border-color:var(--gold-line);}
[data-theme="dark"] select:focus-visible,
[data-theme="dark"] input:focus-visible{outline-color:var(--gold-leaf);border-color:var(--gold-leaf);}

/* Two-way and three-way switches (Monthly / Yearly, System / Light / Dark). */
[data-theme="dark"] .plans-interval,
[data-theme="dark"] .settings-choice{border-color:rgba(var(--night-gold-rgb),.6);}
[data-theme="dark"] .plans-interval button,
[data-theme="dark"] .settings-choice button{color:var(--charcoal);}
/* NOTE: this rule's first two selectors (the chosen switch button) lost
   their own declarations long ago and ended up sharing the homepage's
   .hero-grid rule below. Kept exactly as it renders today. */
[data-theme="dark"] .plans-interval button[aria-pressed="true"],
[data-theme="dark"] .settings-choice button[aria-pressed="true"],

/* ---------- 5. Homepage: a moonlit night ---------------------------- */
[data-theme="dark"] .hero-grid{position:relative;z-index:1;}
/* The moon, rising behind the board. */
[data-theme="dark"] .hero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:150px;height:150px;border-radius:50%;
  top:130px;right:max(28px, calc(50% - 560px));
  background:radial-gradient(circle at 38% 34%, #fdf8ea, #eadfc4 55%, #cbbb94);
  box-shadow:0 0 60px 16px rgba(239,226,190,.16), 0 0 240px 90px rgba(var(--night-gold-rgb),.09);
}
/* A scatter of faint stars. */
[data-theme="dark"] .hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 22%, #fff, transparent),
    radial-gradient(1px 1px at 18% 64%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 27% 12%, #f3e6c4, transparent),
    radial-gradient(1px 1px at 41% 30%, #fff, transparent),
    radial-gradient(1px 1px at 47% 78%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 58% 16%, #fff, transparent),
    radial-gradient(1px 1px at 64% 52%, #f3e6c4, transparent),
    radial-gradient(1px 1px at 73% 8%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 91% 44%, #fff, transparent),
    radial-gradient(1px 1px at 96% 12%, #fff, transparent),
    linear-gradient(180deg, transparent 70%, rgba(70,90,150,.07));
}
@media (max-width:980px){
  [data-theme="dark"] .hero::before{width:96px;height:96px;top:110px;right:24px;}
}

/* ---------- 6. Sign-in page ----------------------------------------- */
[data-theme="dark"] .login-dev{border-color:var(--gold-line);}

/* ---------- 7. The app ---------------------------------------------- */
/* Game rows. */
[data-theme="dark"] .lib-item{border-color:var(--gold-line);border-left-color:var(--gold-muted);}
[data-theme="dark"] .lib-item.lib-won{border-left-color:var(--forest-light);}
[data-theme="dark"] .lib-item.lib-lost{border-left-color:var(--vermilion);}
[data-theme="dark"] .lib-item:hover{border-color:rgba(var(--night-gold-rgb),.55);}
[data-theme="dark"] .lib-won .lib-outcome{background:rgba(143,191,159,.12);color:#8fbf9f;}
[data-theme="dark"] .lib-progress-done{color:#8fbf9f;}
[data-theme="dark"] .lib-progress-done::before{background:#8fbf9f;}
[data-theme="dark"] .block-head{border-bottom-color:var(--gold-line);}

/* The black bowl (black prisoners) would vanish into the dark mat: still a
   black stone, but polished with a brighter sheen. (Both bowls' thin light
   rim is in style-montsuki.css section 9.) */
[data-theme="dark"] .bowl-black{
  background:radial-gradient(circle at 34% 28%, #6a6a70 0, #2c2c30 38%, #141416 72%);
}
[data-theme="dark"] .step-btn{color:var(--gold-leaf);border-color:rgba(var(--night-gold-rgb),.45);}
[data-theme="dark"] .step-btn:hover:not(:disabled){background:rgba(var(--night-gold-rgb),.10);}
[data-theme="dark"] #sidePanel{box-shadow:inset 1px 0 0 var(--gold-line);}
[data-theme="dark"] .graph-block canvas{box-shadow:0 0 0 1px var(--gold-line);}

/* Upload popup and drag-and-drop. */
[data-theme="dark"] #uploadModal{background:rgba(10,10,14,.62);backdrop-filter:blur(3px);}
[data-theme="dark"] #dropOverlay{background:rgba(14,14,19,.84);}
[data-theme="dark"] .dropzone{border-color:rgba(var(--night-gold-rgb),.4);}
[data-theme="dark"] .dropzone:hover,
[data-theme="dark"] .dropzone.drag-over{border-color:var(--gold-leaf);background:rgba(var(--night-gold-rgb),.05);}
[data-theme="dark"] .modal-close:hover{border-color:var(--gold-line);color:var(--gold-leaf);}
[data-theme="dark"] .actions{border-top-color:var(--gold-line);}
[data-theme="dark"] .upload-or::before,
[data-theme="dark"] .upload-or::after{background:var(--gold-line);}

/* Evaluation (eval.css). */
[data-theme="dark"] #evaluationView{--eval-line:#8fb0e6;}  /* moonlit blue */
[data-theme="dark"] .eval-tabs{border-bottom-color:var(--gold-line);}
[data-theme="dark"] .eval-tab::after{background:var(--gold-leaf);}
[data-theme="dark"] .eval-tab:hover,
[data-theme="dark"] .eval-tab[aria-selected="true"]{color:var(--gold-leaf);}
[data-theme="dark"] .eval-diag-focus{box-shadow:inset 2px 0 0 var(--gold-leaf), inset 0 0 0 1px var(--gold-line);}
[data-theme="dark"] .eval-diag-list li{border-color:var(--gold-line);}
[data-theme="dark"] .eval-diag-list.is-helps li{border-left-color:var(--eval-better);}
[data-theme="dark"] .eval-diag-list.is-hurts li{border-left-color:var(--eval-worse);}
[data-theme="dark"] .eval-bar-track::before{background:rgba(239,230,210,.3);}
[data-theme="dark"] .eval-radar-grid,
[data-theme="dark"] .eval-radar-spoke,
[data-theme="dark"] .eval-grid{stroke:rgba(var(--night-gold-rgb),.16);}
[data-theme="dark"] .eval-baseline,
[data-theme="dark"] .eval-tick{stroke:rgba(var(--night-gold-rgb),.35);}
[data-theme="dark"] .eval-crosshair{stroke:var(--gold-leaf);}
[data-theme="dark"] .eval-stem{opacity:.45;}
[data-theme="dark"] .eval-radar-base{fill:rgba(var(--night-gold-rgb),.06);}
[data-theme="dark"] .eval-radar-you{filter:drop-shadow(0 0 6px rgba(143,176,230,.45));}
[data-theme="dark"] .eval-line{filter:drop-shadow(0 0 4px rgba(143,176,230,.5));}
[data-theme="dark"] .eval-tooltip{border-color:var(--gold-line);box-shadow:0 8px 24px rgba(0,0,0,.6);}
[data-theme="dark"] .eval-jt-move{border-color:var(--gold-line);}
[data-theme="dark"] .eval-jt-final{border-color:var(--gold-line);}
[data-theme="dark"] .eval-jt-mode{border-color:var(--gold-line);}
[data-theme="dark"] .eval-jt-mode[aria-pressed="true"]{background:var(--gold-leaf);border-color:var(--gold-leaf);color:#15110a;}
[data-theme="dark"] .eval-jt-board svg{box-shadow:0 0 0 1px var(--wood-dark), 0 18px 44px -14px rgba(0,0,0,.8), 0 0 60px rgba(255,190,110,.10);}

/* Plans, Profile, Settings: cards with gold edges. */
[data-theme="dark"] .plan-card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .plans-current,
[data-theme="dark"] .eval-empty,
[data-theme="dark"] .eval-locked{border:1px solid var(--gold-line);}
[data-theme="dark"] .plan-card.is-current,
[data-theme="dark"] .profile-card.is-paid{border-color:rgba(var(--night-gold-rgb),.6);box-shadow:inset 0 3px 0 var(--gold-leaf), 0 0 30px -14px rgba(var(--night-gold-rgb),.5);}
[data-theme="dark"] .plan-amount,
[data-theme="dark"] .profile-plan{color:var(--gold-leaf);}
[data-theme="dark"] .plans-code{border-top-color:var(--gold-line);}
[data-theme="dark"] .profile-avatar.large{border-color:var(--gold-leaf);color:var(--gold-leaf);}