/* =====================================================================
   Murphy Games -- mobile-first dark theme.
   Breakpoint: phone is the default, >=800px gets the desktop layout.
   ===================================================================== */

/* Palette is the Murphy brand guide verbatim -- see brand-guide.md.
   Do not invent shades here; add a named token if something is missing. */
:root{
  --mg-bg:        #081226;   /* Midnight       - app background        */
  --mg-bg-2:      #0c1a36;   /* Heraldic Navy  - inputs, shield field  */
  --mg-surface:   #0c1a36;   /* Heraldic Navy  - cards, surfaces       */
  --mg-surface-2: #12244a;   /* between navy and royal - active rows   */
  --mg-surface-hi:#1b3159;   /* Royal          - elevated surfaces     */
  --mg-border:    #1b3159;   /* Royal          - borders               */
  --mg-border-hi: #2b4a80;

  --mg-text:      #f5ead0;   /* Parchment  - body text on navy         */
  --mg-text-dim:  #7fa0d8;   /* Steel Blue - secondary text, dividers  */
  --mg-text-mute: #5b7099;

  --mg-gold:      #e2b54e;   /* Gold       - brand, primary actions    */
  --mg-gold-hi:   #f3d98b;   /* Gold Light - active states             */
  --mg-gold-deep: #a97d2b;   /* Gold Deep  - pressed, strokes          */
  --mg-red:       #8f1d2c;   /* Crimson    - badges and alerts ONLY    */
  --mg-blue:      #7fa0d8;

  /* TWO NAMES THAT WERE ALREADY IN USE AND NEVER DEFINED.
     Five templates asked for --mg-crimson and three for --mg-navy, and
     an undefined custom property with no fallback is not ignored -- the
     whole declaration becomes invalid at computed-value time and the
     property falls back to its inherited or initial value. On the
     hangman gallows that meant `stroke: var(--mg-crimson)` computing to
     stroke:none, so every wrong guess turned the figure fully opaque
     and completely invisible: the drawing never appeared to change.
     Aliases rather than edits to five files, because the names read
     fine and the colours were always meant to be these. */
  --mg-crimson:   var(--mg-red);
  --mg-navy:      var(--mg-bg);

  /* Gold gradient: logo strokes, primary buttons, premium badges. */
  --mg-grad-gold: linear-gradient(180deg, #f3d98b 0%, #dcb254 45%, #a97d2b 100%);
  /* Bright gold: the chief bar and anything that must out-shout it.  */
  --mg-grad-gold-hi: linear-gradient(180deg, #f9e7ae 0%, #c9962f 100%);

  --mg-r-sm: 8px;
  --mg-r:    12px;
  --mg-r-lg: 20px;

  /* Typography is deliberately the SAME as the Stillwell ERP, not the
     Cinzel in brand-guide.md -- Ben's call. Keep these three stacks and
     the Google Fonts link in the headers identical to the ERP's, so both
     apps render the same on any given device. */
  --mg-font:    'Inter', 'Open Sans', Arial, sans-serif;
  --mg-display: 'Bebas Neue', Impact, sans-serif;
  --mg-mono:    'DM Mono', 'Courier New', monospace;

  --mg-tabh: 62px;
  --mg-toph: 56px;
}
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--mg-bg);
  color:var(--mg-text);
  font-family:var(--mg-font);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
input,select,textarea{ font:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:650; letter-spacing:-0.01em; }

/* ---------- app frame ---------- */
/* The fixed header's height is toph PLUS the safe-area inset, so the body
   padding has to include that inset too. Leaving it out is what tucked the
   top of every page underneath the menu on a phone with a notch. */
.mg-app{
  min-height:100vh;
  padding-top:calc(var(--mg-toph) + env(safe-area-inset-top, 0px));
  padding-bottom:calc(var(--mg-tabh) + env(safe-area-inset-bottom, 0px));
}
.mg-page{
  max-width:920px;
  margin:0 auto;
  padding:16px 16px 32px;
}
/* Study uses the width (reader columns, deck grid). Set by nt_header. */
.mg-page.wide{ max-width:1400px; }
/* Phones: a long URL or token in a note wraps instead of widening its
   card. */
.mg-page{ min-width:0; overflow-wrap:anywhere; }
/* Scrolling is the window's, exactly as on games. An app-shell layout
   (html overflow:hidden, .mg-app scrolling) was tried on 2026-10-08 and
   reverted: iOS 18 reports a window 47px shorter than it paints, and the
   shell pinned the tab bar to the short window. */
/* A sticky reader column measures from the scrollport top, under the
   fixed header -- keep it clear of the header. */
.sd-side{ top:calc(var(--mg-toph) + 12px) !important; }
/* Phones: filter pills wrap into rows instead of scrolling off the right
   edge (the games scroll-row reads as "cut off" on a Notes list page). */
@media (max-width:700px){
  .mg-page .mg-pills{ flex-wrap:wrap; overflow:visible; row-gap:8px; }
  .mg-page .mg-pill{ padding:6px 12px; }
}
/* Keyboard up (nt.js sets nt-kb on body while a field has focus): the tab
   bar is under the keyboard and, on iOS, would float up and scroll with
   the page. Keep the page's bottom padding so nothing jumps. */
body.nt-kb .mg-tabs{ display:none; }

/* ---------- immersive (a board is on screen) ----------
   No tab bar, and the page is pinned to the viewport so a solve cannot be
   scrolled around under your thumb. Uses dvh, which excludes the mobile
   browser chrome -- with vh the board sits partly under the URL bar. */
.mg-app.immersive{
  padding-bottom:0;
  height:100dvh;
  overflow:hidden;
}
.mg-app.immersive .mg-page{
  height:100%;
  padding:10px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; min-height:0;
}
@supports not (height: 100dvh){
  .mg-app.immersive{ height:100vh; }
}
/* Anything the game marks as flexible shares the leftover height. */
.mg-app.immersive .mg-fit{ flex:1; min-height:0; display:flex;
  flex-direction:column; justify-content:center; }

/* ---------- top bar ---------- */
.mg-top{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:calc(var(--mg-toph) + env(safe-area-inset-top, 0px));
  padding-top:env(safe-area-inset-top, 0px);
  display:flex; align-items:center; gap:12px;
  padding-left:16px; padding-right:12px;
  background:rgba(8,18,38,.88);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--mg-border);
}
.mg-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.mg-brand img{ display:block; width:auto; height:34px; flex:none; }
/* Wordmark is live text, not baked art -- stays crisp at any density and
   keeps the header readable to screen readers. */
.mg-brand-txt{
  font-family:var(--mg-display);
  font-weight:400; font-size:22px; line-height:1;
  letter-spacing:.08em; white-space:nowrap;
  color:var(--mg-gold);
}
.mg-brand-txt span{ color:var(--mg-text-dim); }
.mg-top-sp{ flex:1; }

.mg-iconbtn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  background:transparent; border:0; cursor:pointer;
  color:var(--mg-text-dim);
}
.mg-iconbtn:active{ background:var(--mg-surface); }

.mg-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  font-size:13px; font-weight:700; color:#0c1a36; flex:none;
  background:var(--mg-gold);
}
.mg-avatar.lg{ width:56px; height:56px; font-size:20px; }
.mg-avatar.sm{ width:26px; height:26px; font-size:11px; }

/* An icon avatar instead of initials. Tagged by MG.scanAvatars in mg.js,
   because the value lives in the same field as the initials and the 23
   places that draw an avatar do not know which they were handed.
   Initials are navy and bold to stay readable on a light tint; an emoji
   carries its own colour and just needs the room. */
.mg-avatar.emoji{ font-size:19px; font-weight:400; line-height:1; }
.mg-avatar.lg.emoji{ font-size:32px; }
.mg-avatar.sm.emoji{ font-size:15px; }

.mg-dot{
  position:absolute; top:5px; right:5px;
  min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--mg-red); color:#fff;
  font-size:10px; font-weight:700; line-height:17px; text-align:center;
  border:2px solid var(--mg-bg);
}

/* ---------- bottom tab bar ---------- */
.mg-tabs{
  position:fixed; bottom:0; left:0; right:0; z-index:50;
  display:flex;
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:rgba(8,18,38,.94);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-top:1px solid var(--mg-border);
}
.mg-tab{
  flex:1; height:var(--mg-tabh);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--mg-text-mute); font-size:10.5px; font-weight:600; letter-spacing:.02em;
  position:relative; -webkit-tap-highlight-color:transparent;
}
.mg-tab.on{ color:var(--mg-gold); }
.mg-tab .mg-dot{ top:8px; right:calc(50% - 20px); }

/* ---------- headings ---------- */
/* Eyebrow uses the BODY font at 700 -- same treatment as the ERP's
   .sw-page-eyebrow. Bebas has a single weight and would lose the contrast. */
.mg-eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mg-gold-deep); margin-bottom:6px;
}
/* Bebas Neue is condensed and caps-only at weight 400, so display text
   needs a larger size and open tracking to breathe. */
.mg-h1{
  font-family:var(--mg-display);
  font-size:34px; font-weight:400; line-height:1.05;
  letter-spacing:.04em; text-transform:uppercase;
  margin-bottom:4px;
}
.mg-sub{ color:var(--mg-text-dim); font-size:14px; }
.mg-sec{ margin:26px 0 10px; display:flex; align-items:baseline; justify-content:space-between; }
.mg-sec h2{
  font-family:var(--mg-display);
  font-size:19px; font-weight:400; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mg-text);
}
.mg-sec a{ font-size:13px; color:var(--mg-gold); font-weight:600; }

/* ---------- cards ---------- */
.mg-card{
  background:var(--mg-surface);
  border:1px solid var(--mg-border);
  border-radius:var(--mg-r);
  padding:16px;
}
.mg-card + .mg-card{ margin-top:12px; }

/* ---------- game tiles ---------- */
.mg-games{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mg-game{
  position:relative; overflow:hidden;
  border-radius:var(--mg-r);
  border:1px solid var(--mg-border);
  background:var(--mg-surface);
  padding:16px 14px 14px;
  min-height:132px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .12s ease, border-color .12s ease;
}
.mg-game:active{ transform:scale(.98); }
.mg-game::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--acc, var(--mg-gold));
}
.mg-game::after{
  content:""; position:absolute; right:-30px; bottom:-40px;
  width:120px; height:120px; border-radius:50%;
  background:var(--acc, var(--mg-gold)); opacity:.09;
}
.mg-game-nm{
  font-family:var(--mg-display);
  font-size:23px; font-weight:400; line-height:1.05;
  letter-spacing:.05em; text-transform:uppercase;
}
.mg-game-tg{ font-size:12px; color:var(--mg-text-dim); margin-top:2px; }
.mg-game-ft{ font-size:11.5px; font-weight:650; color:var(--acc, var(--mg-gold)); letter-spacing:.02em; position:relative; }
.mg-game.soon{ opacity:.55; }
.mg-game.soon .mg-game-ft{ color:var(--mg-text-mute); }

/* ---------- list rows ---------- */
.mg-list{ border:1px solid var(--mg-border); border-radius:var(--mg-r); overflow:hidden; background:var(--mg-surface); }
.mg-li{
  display:flex; align-items:center; gap:12px;
  padding:13px 14px;
  border-bottom:1px solid var(--mg-border);
}
.mg-li:last-child{ border-bottom:0; }
.mg-li.unread{ background:var(--mg-surface-2); }
.mg-li-main{ flex:1; min-width:0; }
.mg-li-t{ font-size:14.5px; font-weight:600; }
.mg-li-s{ font-size:12.5px; color:var(--mg-text-dim); margin-top:1px; }
.mg-li-r{ font-size:13px; color:var(--mg-text-dim); font-family:var(--mg-mono); flex:none; }
.mg-rank{
  width:26px; text-align:center; flex:none;
  font-family:var(--mg-mono); font-size:13px; font-weight:700; color:var(--mg-text-mute);
}
/* Podium in heraldic metals: gold, silver, bronze. */
.mg-rank.g1{ color:var(--mg-gold); }
.mg-rank.g2{ color:#c9d3e4; }
.mg-rank.g3{ color:var(--mg-gold-deep); }

/* ---------- pills / chips ---------- */
.mg-pills{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 8px; -ms-overflow-style:none; scrollbar-width:none; }
.mg-pills::-webkit-scrollbar{ display:none; }
.mg-pill{
  flex:none; padding:7px 14px; border-radius:999px;
  border:1px solid var(--mg-border); background:var(--mg-surface);
  color:var(--mg-text-dim); font-size:13px; font-weight:600;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.mg-pill.on{ background:var(--mg-grad-gold); border-color:var(--mg-gold-deep); color:#0c1a36; }

/* Crimson is reserved for badges and alerts (brand guide). */
.mg-badge{
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.03em;
  background:var(--mg-surface-hi); color:var(--mg-text-dim);
}
.mg-badge.win{ background:var(--mg-grad-gold); color:#0c1a36; }
.mg-badge.lose{ background:var(--mg-red); color:var(--mg-text); }
.mg-badge.wait{ background:var(--mg-red); color:var(--mg-text); }

/* ---------- buttons (brand guide: 52px tall, radius 12) ---------- */
.mg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:0 22px;
  border-radius:12px; border:1.5px solid transparent;
  background:var(--mg-grad-gold); color:#0c1a36;
  font-size:15px; font-weight:700; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mg-btn:active{ filter:brightness(.92); }
.mg-btn.block{ width:100%; }
/* Secondary: transparent, gold hairline, gold text. */
.mg-btn.ghost{ background:none; border-color:var(--mg-gold); color:var(--mg-gold); }
.mg-btn.quiet{ background:var(--mg-surface-hi); border-color:var(--mg-border-hi); color:var(--mg-text); }
.mg-btn.danger{ background:var(--mg-red); color:var(--mg-text); }
.mg-btn.sm{ min-height:38px; padding:0 15px; font-size:13px; border-radius:10px; }
.mg-btn[disabled]{ opacity:.45; pointer-events:none; }

/* ---------- forms ---------- */
.mg-field{ margin-bottom:14px; }
.mg-label{ display:block; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mg-text-mute); margin-bottom:6px; }
.mg-input,.mg-select,.mg-textarea{
  width:100%; padding:13px 14px;
  background:var(--mg-bg-2); color:var(--mg-text);
  border:1px solid var(--mg-border); border-radius:12px;
  outline:none;
}
.mg-input:focus,.mg-select:focus,.mg-textarea:focus{ border-color:var(--mg-gold); }
.mg-select{ appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--mg-text-mute) 50%),
                   linear-gradient(135deg,var(--mg-text-mute) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.mg-hint{ font-size:12px; color:var(--mg-text-mute); margin-top:6px; }
.mg-err{ background:rgba(217,83,74,.14); border:1px solid rgba(217,83,74,.4);
  color:#f3a09a; padding:11px 13px; border-radius:12px; font-size:13.5px; margin-bottom:14px; }
.mg-ok{ background:rgba(63,169,107,.14); border:1px solid rgba(63,169,107,.4);
  color:#7ddba6; padding:11px 13px; border-radius:12px; font-size:13.5px; margin-bottom:14px; }

/* ---------- stats ---------- */
.mg-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mg-stat{ background:var(--mg-surface); border:1px solid var(--mg-border);
  border-radius:var(--mg-r-sm); padding:12px 10px; text-align:center; }
.mg-stat-v{ font-family:var(--mg-mono); font-size:20px; font-weight:700; }
.mg-stat-l{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mg-text-mute); margin-top:2px; }

/* ---------- empty state ---------- */
.mg-empty{ text-align:center; padding:38px 20px; color:var(--mg-text-mute); }
.mg-empty svg{ opacity:.4; margin-bottom:10px; }
.mg-empty p{ margin:0; font-size:14px; }

/* ---------- modal ---------- */
.mg-modal{
  position:fixed; inset:0; z-index:200;
  background:rgba(4,9,20,.74);
  display:none; align-items:flex-end; justify-content:center;
}
.mg-modal.open{ display:flex; }
.mg-modal-box{
  width:100%; max-width:520px;
  background:var(--mg-surface); border:1px solid var(--mg-border);
  border-radius:var(--mg-r-lg) var(--mg-r-lg) 0 0;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  max-height:88vh; overflow-y:auto;
}
.mg-modal-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.mg-modal-h h3{ font-size:17px; }

/* ---------- toast ---------- */
.mg-toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--mg-tabh) + 18px + env(safe-area-inset-bottom, 0px));
  z-index:300; max-width:88vw;
  background:var(--mg-surface-hi); border:1px solid var(--mg-border-hi);
  color:var(--mg-text); padding:11px 18px; border-radius:999px;
  font-size:13.5px; font-weight:600;
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.mg-toast.show{ opacity:1; }

/* ---------- login ---------- */
.mg-login{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(120% 80% at 50% -10%, #1b3159 0%, var(--mg-bg) 62%);
}
.mg-login-box{ width:100%; max-width:360px; }
.mg-login-logo{ text-align:center; margin-bottom:26px; }
/* The crest already carries the MURPHY chief, so no wordmark under it. */
.mg-login-logo img{ width:150px; height:auto; display:block; margin:0 auto; }
.mg-login-logo p{
  margin:16px 0 0; font-size:11.5px; font-weight:700; color:var(--mg-text-dim);
  letter-spacing:.22em; text-transform:uppercase;
}

/* ---------- desktop ---------- */
@media (min-width:800px){
  .mg-app{ padding-bottom:40px; }
  .mg-tabs{ display:none; }
  .mg-top{ padding-left:24px; padding-right:24px; }
  .mg-topnav{ display:flex !important; gap:4px; margin-left:18px; }
  .mg-topnav a{
    padding:8px 14px; border-radius:10px; font-size:14px; font-weight:600;
    color:var(--mg-text-dim); position:relative;
  }
  .mg-topnav a.on{ background:var(--mg-surface); color:var(--mg-gold); }
  .mg-topnav a:hover{ color:var(--mg-text); }
  .mg-games{ grid-template-columns:repeat(4,1fr); }
  .mg-page{ padding:26px 24px 60px; }
  .mg-h1{ font-size:31px; }
  .mg-modal{ align-items:center; }
  .mg-modal-box{ border-radius:var(--mg-r-lg); padding-bottom:20px; }
  .mg-toast{ bottom:26px; }
  .mg-game:hover{ border-color:var(--mg-border-hi); }
}
.mg-topnav{ display:none; }

/* ---------- launch splash ----------
   Hidden by default and switched on by the inline head script, so it can
   never flash on an ordinary page navigation. */
.mg-splash{ display:none; }
html.mg-first .mg-splash, html.mg-refreshing .mg-splash{
  display:flex; position:fixed; inset:0; z-index:9000;
  align-items:center; justify-content:center;
  background:radial-gradient(120% 80% at 50% 15%, #1b3159 0%, #081226 65%);
  animation:mgSplashIn .3s ease;
}
html.mg-first .mg-splash.done, html.mg-refreshing .mg-splash.done{
  opacity:0; pointer-events:none; transition:opacity .45s ease;
}
.mg-splash-in{ text-align:center; }
/* Sized off the viewport so it FILLS the screen on a phone rather than
   floating as a small badge in the middle of a lot of navy. */
.mg-splash-in img{
  width:min(58vw, 42vh); height:auto;
  animation:mgSplashPop .8s cubic-bezier(.2,.9,.3,1.3);
}
.mg-splash-word{
  font-family:var(--mg-display); font-size:clamp(26px, 8vw, 44px);
  letter-spacing:.16em; color:var(--mg-gold); margin-top:24px;
}
.mg-splash-word span{ color:var(--mg-text-dim); }
@keyframes mgSplashIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes mgSplashPop{
  0%{ transform:scale(.72); opacity:0; }
  60%{ transform:scale(1.04); opacity:1; }
  100%{ transform:scale(1); }
}

/* ---------- logo loader ----------
   The one loading indicator in the app. Anything that waits shows the crest
   rather than a bare word. */
.mg-loader{
  position:fixed; inset:0; z-index:8000; display:none;
  align-items:center; justify-content:center;
  background:rgba(8,18,38,.72);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.mg-loader.on{ display:flex; }
.mg-loader img{ animation:mgPulse 1.1s ease-in-out infinite; }
@keyframes mgPulse{
  0%,100%{ transform:scale(.9); opacity:.55; }
  50%    { transform:scale(1.06); opacity:1; }
}
/* Inline variant for a panel that is still filling in. */
.mg-loading{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:34px 16px; color:var(--mg-text-mute); font-size:13.5px;
}
.mg-loading img{ width:40px; height:auto; animation:mgPulse 1.1s ease-in-out infinite; }

/* ---------- utility ---------- */
.mg-mono{ font-family:var(--mg-mono); }
.mg-dim{ color:var(--mg-text-dim); }
.mg-mute{ color:var(--mg-text-mute); }
.mg-center{ text-align:center; }
.mg-row{ display:flex; align-items:center; gap:10px; }
.mg-gap{ height:14px; }
.mg-hide{ display:none !important; }

/* =====================================================================
   MURPHY NOTES -- the light working surface. Everything above this line
   is games murphy.css verbatim (keep it that way; re-copy on a games
   change and re-append this block). The header and the tab bar stay
   navy: the brand marks only ever sit on navy.
   Page tokens are the Stillwell ERP's light palette (stillwell-theme.css:
   neutral gray page, white cards, hairline borders, soft card shadow) --
   Ben's call 2026-10-08 after the Study paper tone read as cream.
   Accents stay Murphy: gold-deep eyebrows, royal links, crimson alerts.
   ===================================================================== */
body.nt-light{
  --nt-bg:#f1f3f6; --nt-surface:#ffffff; --nt-surface-2:#f7f8fa;
  --nt-border:#e4e6ec; --nt-border-hi:#cfd3dc;
  --nt-text:#333333; --nt-dim:#5b6878; --nt-mute:#8a9aaa; --nt-hint:#b0bac8;
  --nt-accent:#a97d2b; --nt-link:#1b3159; --nt-navy:#081226;
  --nt-shadow:0 2px 10px rgba(0,0,0,.07);
  --nt-green:#2a7a52; --nt-green-bg:#d5eddf; --nt-red:#c0392b; --nt-red-bg:#fdecea;
  background:var(--nt-bg); color:var(--nt-text);
}
/* Inside the PAGE (not the header or tab bar), the games tokens themselves
   point at the light values, so ported games markup -- the Study area --
   renders light without a rewrite. Gold becomes gold-deep for text
   contrast on white; the gradient buttons are untouched. */
body.nt-light .mg-page{
  --mg-bg:var(--nt-bg); --mg-bg-2:var(--nt-surface);
  --mg-surface:var(--nt-surface); --mg-surface-2:var(--nt-surface-2); --mg-surface-hi:var(--nt-surface-2);
  --mg-border:var(--nt-border); --mg-border-hi:var(--nt-border-hi);
  --mg-text:var(--nt-text); --mg-text-dim:var(--nt-dim); --mg-text-mute:var(--nt-mute);
  --mg-gold:#a97d2b; --mg-gold-hi:#c8991e; --mg-navy:#081226;
}
/* Dark: the games palette as-is; the --nt-* names the Notes pages use
   point back at it. */
body.nt-dark{
  --nt-bg:var(--mg-bg); --nt-surface:var(--mg-surface); --nt-surface-2:var(--mg-surface-2);
  --nt-border:var(--mg-border); --nt-border-hi:var(--mg-border-hi);
  --nt-text:var(--mg-text); --nt-dim:var(--mg-text-dim); --nt-mute:var(--mg-text-mute); --nt-hint:var(--mg-text-mute);
  --nt-accent:var(--mg-gold); --nt-link:var(--mg-gold); --nt-shadow:none; --nt-navy:var(--mg-bg);
  --nt-green:#6fb08c; --nt-green-bg:rgba(63,169,107,.14); --nt-red:#f3a09a; --nt-red-bg:rgba(217,83,74,.14);
}
body.nt-dark .mg-badge.hot{ background:var(--mg-red); color:var(--mg-text); }
body.nt-light .mg-card, body.nt-light .mg-list{
  background:var(--nt-surface); border-color:var(--nt-border); box-shadow:var(--nt-shadow);
}
body.nt-light .mg-li{ border-color:var(--nt-border); }
body.nt-light .mg-li.unread{ background:var(--nt-surface-2); }
body.nt-light .mg-li-s, body.nt-light .mg-li-r, body.nt-light .mg-sub{ color:var(--nt-dim); }
body.nt-light .mg-h1, body.nt-light .mg-sec h2{ color:var(--nt-navy); }
body.nt-light .mg-eyebrow, body.nt-light .mg-eyebrow a{ color:var(--nt-accent); }
body.nt-light .mg-sec a, body.nt-light .mg-hint a{ color:var(--nt-link); }
body.nt-light .mg-hint, body.nt-light .mg-mute, body.nt-light .mg-empty{ color:var(--nt-mute); }
body.nt-light .mg-dim{ color:var(--nt-dim); }
body.nt-light .mg-pill{ background:var(--nt-surface); border-color:var(--nt-border-hi); color:var(--nt-dim); }
body.nt-light .mg-pill.on{ background:var(--nt-navy); color:#fff; border-color:var(--nt-navy); }
body.nt-light .mg-btn.ghost{ color:var(--nt-navy); border-color:var(--nt-border-hi); background:var(--nt-surface); }
body.nt-light .mg-btn.quiet{ background:var(--nt-surface-2); border-color:var(--nt-border); color:var(--nt-text); }
body.nt-light .mg-btn.danger{ background:var(--nt-red); color:#fff; }
body.nt-light .mg-input, body.nt-light .mg-select, body.nt-light .mg-textarea{
  background:var(--nt-surface); color:var(--nt-text); border-color:var(--nt-border-hi);
}
body.nt-light .mg-input:focus, body.nt-light .mg-select:focus, body.nt-light .mg-textarea:focus{ border-color:var(--nt-navy); }
body.nt-light .mg-input::placeholder, body.nt-light .mg-textarea::placeholder{ color:var(--nt-hint); }
body.nt-light .mg-label{ color:var(--nt-mute); }
body.nt-light .mg-badge{ background:var(--nt-surface-2); color:var(--nt-dim); border:1px solid var(--nt-border); }
body.nt-light .mg-badge.hot{ background:var(--nt-red-bg); color:var(--nt-red); border-color:transparent; }
body.nt-light .mg-stat{ background:var(--nt-surface); border-color:var(--nt-border); box-shadow:var(--nt-shadow); }
body.nt-light .mg-stat-l{ color:var(--nt-mute); }
body.nt-light .mg-modal{ background:rgba(26,43,69,.45); }
body.nt-light .mg-modal-box{ background:var(--nt-surface); border-color:var(--nt-border); color:var(--nt-text); }
body.nt-light .mg-modal .mg-iconbtn{ color:var(--nt-dim); }
body.nt-light .mg-toast{ background:var(--nt-navy); color:#f5ead0; border-color:var(--nt-navy); }
body.nt-light .mg-err{ background:var(--nt-red-bg); border-color:transparent; color:var(--nt-red); }
body.nt-light .mg-ok{ background:var(--nt-green-bg); border-color:transparent; color:var(--nt-green); }
body.nt-light .mg-loading{ color:var(--nt-mute); }
body.nt-light .mg-page{
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
}