:root{
  --bg:#ffffff;
  --panel:#f7f8fa;
  --panel2:#eef0f4;
  --line:#e0e3e8;
  --accent:#2f6fed;
  --accent-dim:#e8effd;
  --text:#1c2230;
  --muted:#6b7686;
  --good:#1f9d55;
  --bad:#e5484d;
  --warn:#b98900;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height:100vh;
}
.wrap{max-width:960px;margin:0 auto;padding:0 16px 60px;}

/* header */
.site-header{
  border-bottom:1px solid var(--line);padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;
  position:sticky;top:0;background:var(--bg);z-index:20;
}
.site-header .brand{display:flex;align-items:center;text-decoration:none;}
.brand-logo{height:72px;width:auto;display:block;}
.header-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.account-dropdown{position:relative;}
.account-name-btn{
  background:none;border:1px solid var(--line);color:var(--text);
  padding:8px 14px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:5px;
}
.account-name-btn:hover{border-color:var(--accent);color:var(--accent);}
.account-caret{font-size:10px;color:var(--muted);}
.account-dropdown-menu{
  display:none;position:absolute;top:calc(100% + 6px);right:0;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.12);min-width:160px;overflow:hidden;z-index:30;
}
.account-dropdown-menu.open{display:block;}
.account-dropdown-menu button,
.account-dropdown-menu a{
  display:block;width:100%;text-align:left;background:none;border:none;
  padding:10px 14px;font-size:13px;color:var(--text);cursor:pointer;
  text-decoration:none;box-sizing:border-box;
}
.account-dropdown-menu button:hover,
.account-dropdown-menu a:hover{background:var(--panel2);color:var(--accent);}
.account-dropdown-menu button+button,
.account-dropdown-menu a+button,
.account-dropdown-menu button+a{border-top:1px solid var(--line);}
.header-promo{
  display:flex;align-items:center;gap:5px;
  background:linear-gradient(135deg,var(--accent),#8b5cf6);
  color:#fff;font-size:13px;font-weight:600;
  padding:8px 16px;border-radius:20px;text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:transform .15s ease,box-shadow .15s ease;
}
.header-promo strong{font-weight:800;}
.header-promo:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.18);}
@media (max-width:700px){
  .header-promo{order:3;flex-basis:100%;justify-content:center;}
}
@media (max-width:480px){
  .header-promo{font-size:11px;padding:6px 12px;}
}
@media (max-width:480px){
  .brand-logo{height:40px;}
  .site-header{padding:8px 12px;}
  .header-right{gap:8px;}
  .nav-btn{padding:6px 10px;font-size:12px;}
}
.nav-btn{background:none;border:1px solid var(--line);color:var(--text);padding:8px 14px;border-radius:6px;cursor:pointer;font-size:13px;}
.nav-btn:hover{border-color:var(--accent);color:var(--accent);}
a.nav-btn{text-decoration:none;display:inline-block;}
#cartNavBtn{position:relative;}
.cart-badge{
  position:absolute;top:-7px;right:-7px;background:var(--accent);color:#fff;
  font-size:10px;font-weight:800;min-width:16px;height:16px;line-height:16px;
  text-align:center;border-radius:9px;padding:0 4px;
}
.account-name{font-size:13px;color:var(--muted);margin-right:6px;}
.mock-plan-toggle{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:4px;margin-right:10px;padding-right:10px;border-right:1px solid var(--line);}
.mock-plan-toggle .btn.small{padding:3px 8px;font-size:10px;}

/* hub hero (top of the home page only — game pages use .game-page-hero) */
.hub-hero{
  display:flex;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;gap:24px;margin:32px 0 28px;text-align:left;
}
.hub-hero-left h1{font-size:38px;font-weight:800;margin:0 0 4px;line-height:1.1;color:var(--text);}
.hub-hero-right{flex:1 1 320px;max-width:440px;}
.hub-hero-tagline{font-size:16px;font-weight:500;margin:2px 0 10px;line-height:1.4;color:var(--text);}
.hub-hero-signin{font-size:13.5px;}
.daily-streak{
  display:inline-flex;align-items:center;gap:7px;background:#fff4e5;border:1px solid #ffd8a8;
  border-radius:20px;padding:6px 16px;font-weight:800;font-size:14px;color:#c2571a;margin:6px 0;
}
.daily-streak .streak-flame{font-size:18px;line-height:1;}
.hub-hero-signin a{text-decoration:underline;font-weight:600;}
@media (max-width:480px){
  .hub-hero-left h1{font-size:30px;}
  .hub-hero-tagline{font-size:15px;}
}

/* date-nav — shared by the home page and every individual game page */
.date-nav{display:inline-flex;align-items:center;gap:8px;margin-top:2px;}
.date-nav-btn{
  width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);
  color:var(--text);font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.date-nav-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.date-nav-btn:disabled{opacity:.35;cursor:default;}
.date-nav-label{font-size:19px;color:var(--text);}
.date-nav-picker{
  border:1px solid var(--line);border-radius:6px;background:var(--panel2);color:var(--muted);
  font-size:12px;padding:3px 6px;
}
.date-nav-message{font-size:12.5px;color:var(--muted);margin-top:6px;}
.date-nav-message .btn{margin-left:6px;}
@media (max-width:480px){
  .date-nav-label{font-size:16px;}
  .date-nav-picker{display:none;}
}

/* hub grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;}
.category-nav{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px;}
.category-nav-btn{
  display:inline-block;padding:10px 22px;border-radius:24px;
  border:1.5px solid var(--accent);color:var(--accent);
  font-weight:700;font-size:14px;text-decoration:none;
  background:transparent;transition:background .15s ease,color .15s ease;
}
.category-nav-btn:hover{background:var(--accent);color:#fff;}
.hub-section{margin-bottom:34px;}
.hub-section-title{font-size:20px;font-weight:800;margin:0 0 14px;color:var(--text);}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  padding:0;
  cursor:pointer;
  position:relative;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 4px 14px rgba(47,111,237,.12);}
.card-top{
  position:relative;
  height:118px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--card-bg, var(--accent-dim));
}
.card-top .card-icon-lg{font-size:50px;line-height:1;}
.card-top .card-cat{
  position:absolute;top:10px;left:12px;
  font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--card-accent, var(--accent));
}
.card-top .card-badge{
  position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.18);color:var(--good);font-size:13px;font-weight:800;
}
.card-freebie-tag{
  position:absolute;bottom:8px;left:10px;right:10px;text-align:center;
  background:rgba(255,255,255,.9);color:var(--card-accent, var(--accent));
  font-size:10px;font-weight:800;letter-spacing:.3px;
  padding:3px 6px;border-radius:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
}
.card-bottom{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column;}
.card-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px;}
.card-title-row h3{margin:0;font-size:16px;color:var(--text);}
.fav-heart{background:none;border:none;cursor:pointer;font-size:20px;line-height:1;color:var(--line);padding:0;flex-shrink:0;}
.fav-heart:hover{color:#e0455f;}
.fav-heart.active{color:#e0455f;}
.card-bottom p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.4;}
.card-bottom-row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px;}
.card-bottom .play-hint{font-size:11px;color:var(--accent);letter-spacing:1px;}
.card-tiers{display:flex;gap:4px;}
.tier-chip{
  width:19px;height:19px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;color:var(--muted);
  border:1px solid var(--line);background:var(--panel2);
}
.tier-chip.done{background:var(--good);border-color:var(--good);color:#fff;}

/* store */
/* Store cards never hover-highlight (they're not clickable, unlike game
   cards), so they need a border that reads as a boundary on its own,
   at rest -- the shared --line color (used all over the site for
   subtle dividers) is too light for that job here, where several
   cards sit edge to edge with a lot of visually-busy content inside. */
.store-promo-banner{
  background:#fff;text-align:center;
  padding:8px 0;margin-top:14px;line-height:1.4;
}
/* Category tabs (managed at /admin.html's "Store Categories" section) --
   only shown by js/store.js when there's more than one category's worth
   of products in play. "All" is always first and stacks every category
   as its own heading+grid section; clicking another tab flips to just
   that one category, flat, no heading needed. */
.store-category-tabs{
  display:flex;gap:8px;flex-wrap:wrap;
  margin:18px 0 10px;padding:0 0 12px;
  border-bottom:2px solid var(--line);
}
.store-tab-btn{
  background:none;border:none;cursor:pointer;
  font:inherit;font-weight:600;color:var(--muted);
  padding:8px 4px;border-bottom:3px solid transparent;
  margin-bottom:-14px;
}
.store-tab-btn:hover{color:var(--text);}
.store-tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);}
.store-section-heading{
  margin:28px 0 14px;font-size:19px;
}
.store-section-heading:first-child{margin-top:6px;}

/* Sitewide Banner (admin.html) -- rendered by js/main.js on every page,
   not just the Store. Same plain-white-background-plus-your-own-HTML
   look as .store-promo-banner above (the admin explicitly preferred
   that over a colored/button-like bar), just pinned to the screen edge
   and dismissible. */
.site-banner{
  position:relative;display:flex;align-items:center;
  background:#fff;padding:10px 44px;text-align:center;line-height:1.4;
}
.site-banner-top{border-bottom:1px solid var(--line);}
.site-banner-bottom{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  border-top:1px solid var(--line);
  box-shadow:0 -2px 10px rgba(0,0,0,.08);
}
/* flex:1 (not a max-width) is what actually hands the admin's own HTML
   the full width to work with -- a plain block element in here, or
   min-width:100% on something inside it, now reaches edge to edge
   instead of being capped by a fixed-width wrapper. */
.site-banner-content{flex:1;min-width:0;}
.site-banner-close{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:none;font-size:22px;line-height:1;
  color:var(--muted);cursor:pointer;padding:4px 8px;
}
.site-banner-close:hover{color:var(--text);}
.site-banner-preview{
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:10px;text-align:center;line-height:1.4;
}
.store-card{cursor:default;border-color:#b9c0cc;}
.store-card:hover{transform:none;box-shadow:none;border-color:#b9c0cc;}
.store-card .card-bottom p{margin-bottom:10px;}
.store-card-desc{margin:0 0 10px;color:var(--muted);font-size:12.5px;line-height:1.4;}
.store-card-desc p{margin:0 0 6px;}
.store-card-desc p:last-child{margin-bottom:0;}
/* The card itself opens the product detail popup on click (everywhere
   except its buy buttons) -- unlike other cards on the site, no
   hover transform/shadow (see note above: it'd fight with the buttons
   already inside), just a cursor + subtle border darken as the
   click affordance. */
.store-card-clickable{cursor:pointer;}
.store-card-clickable:hover{border-color:var(--accent);}
.store-format-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-top:1px solid var(--line);
}
.store-format-info{display:flex;flex-direction:column;font-size:12.5px;flex:1;min-width:0;}
.store-format-info strong{font-size:13px;color:var(--text);}
.store-format-info span{color:var(--muted);}
.store-add-cart-btn{flex-shrink:0;white-space:nowrap;}
.store-status{margin:8px 0 0;font-size:12px;color:var(--muted);min-height:14px;}
.store-status.err{color:var(--bad);}
.store-status.ok{color:var(--good);}

/* store product detail popup (lightbox) */
.store-detail-overlay{
  display:none;position:fixed;inset:0;background:rgba(20,24,32,.55);
  align-items:center;justify-content:center;z-index:60;padding:24px;
}
.store-detail-box{
  background:#fff;border-radius:12px;padding:24px;width:520px;max-width:92vw;
  max-height:88vh;overflow-y:auto;position:relative;text-align:left;
}
.store-detail-close{position:absolute;top:10px;right:14px;background:none;border:none;font-size:22px;cursor:pointer;color:var(--muted);}
.store-detail-main-img{width:100%;height:260px;border-radius:10px;overflow:hidden;background:var(--panel2);display:flex;align-items:center;justify-content:center;}
.store-detail-img{max-width:100%;max-height:100%;object-fit:contain;display:block;cursor:zoom-in;}
.store-detail-thumbs{display:flex;gap:8px;margin-top:10px;}
.store-detail-thumb{
  width:56px;height:56px;object-fit:cover;border-radius:6px;cursor:pointer;
  border:2px solid var(--line);opacity:.7;
}
.store-detail-thumb:hover{opacity:1;}
.store-detail-thumb.active{border-color:var(--accent);opacity:1;}
.store-detail-title{margin:16px 0 6px;font-size:19px;}
.store-detail-desc{color:var(--muted);font-size:13.5px;line-height:1.5;}
.store-detail-desc p{margin:0 0 8px;}
.store-detail-desc p:last-child{margin-bottom:0;}
.store-detail-offers{margin-top:10px;}
@media (max-width:480px){
  .store-detail-main-img{height:180px;}
}

/* store product detail image zoom (lightbox-on-lightbox) -- clicking the
   main image in the product detail popup opens it at full size, since
   object-fit:contain in the 260px-tall box above can crop out detail on
   a tall or busy image (e.g. a sample puzzle page). Sits above
   .store-detail-overlay (z-index 60). */
.store-img-zoom-overlay{
  display:none;position:fixed;inset:0;background:rgba(10,12,16,.82);
  align-items:center;justify-content:center;z-index:70;padding:24px;cursor:zoom-out;
}
.store-img-zoom-img{max-width:92vw;max-height:92vh;object-fit:contain;display:block;border-radius:6px;}
.store-img-zoom-close{position:absolute;top:18px;right:22px;background:none;border:none;font-size:30px;line-height:1;cursor:pointer;color:#fff;}

/* shopping cart popup (reuses .store-detail-overlay/.store-detail-box's
   backdrop + close button; .cart-box just widens it slightly) */
.cart-box{width:460px;}
.cart-line{
  display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);
}
.cart-line-info{display:flex;flex-direction:column;flex:1;min-width:0;font-size:12.5px;}
.cart-line-info strong{font-size:13px;color:var(--text);}
.cart-line-qty{display:flex;align-items:center;gap:8px;font-weight:700;flex-shrink:0;}
.cart-line-qty button{padding:4px 10px;}

/* ad cards (hub row-filler) */
.ad-card{
  display:block;height:100%;min-height:180px;border-radius:12px;overflow:hidden;
  position:relative;border:1px solid var(--line);background:var(--panel);
}
.ad-card img{width:100%;height:100%;object-fit:cover;display:block;}
.ad-card-tag{
  position:absolute;top:8px;left:8px;background:rgba(0,0,0,.55);color:#fff;
  font-size:9px;font-weight:800;letter-spacing:1px;padding:2px 7px;border-radius:4px;
}
.ad-card-clickable{cursor:zoom-in;}
/* Quote filler card (js/app.js's buildAdCardEl) -- same pool/slot as
   the funny filler images, just a short line of text on a solid color
   (one of four sampled from the logo, see AD_QUOTE_COLORS in
   js/api.js) instead of an uploaded image. background/color are set
   inline per-card since they're admin/pool data, not fixed styling. */
.ad-card-quote{display:flex;align-items:center;justify-content:center;text-align:center;padding:22px;}
.ad-card-quote-text{font-size:15px;font-weight:700;font-style:italic;line-height:1.45;}
.ad-card-quote-text::before{content:"\201C";}
.ad-card-quote-text::after{content:"\201D";}

/* image lightbox (enlarges a clicked funny/filler ad image) */
.lightbox-overlay{
  display:none;position:fixed;inset:0;background:rgba(10,12,18,.85);
  align-items:center;justify-content:center;z-index:60;padding:32px;cursor:zoom-out;
}
.lightbox-img{max-width:90vw;max-height:88vh;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.5);}
.lightbox-close{
  position:absolute;top:16px;right:20px;background:none;border:none;color:#fff;
  font-size:32px;line-height:1;cursor:pointer;opacity:.8;
}
.lightbox-close:hover{opacity:1;}

/* admin: ad cards management */
.ad-card-form input[type="file"]{padding:6px 0;}
.ad-pool-mode-toggle{display:flex;gap:18px;font-size:13px;margin-bottom:10px;}
.ad-card-row{
  display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);
}
.ad-card-thumb{width:64px;height:44px;object-fit:cover;border-radius:6px;border:1px solid var(--line);flex-shrink:0;}
.ad-card-thumb-quote{display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;font-style:italic;}
.ad-card-row-info{display:flex;flex-direction:column;flex:1;font-size:12.5px;min-width:0;gap:4px;}
.ad-card-row-info span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ap-pager{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);flex-wrap:wrap;}
.ap-pager button:disabled{opacity:.35;cursor:not-allowed;}
.ap-pager .hint{margin:0;}

/* admin: ad slots (12 fixed positions) */
.ad-slot-row{padding:12px 0;border-top:1px solid var(--line);}
.ad-slot-num{font-weight:800;font-size:13px;color:var(--text);margin-bottom:6px;}
.ad-slot-type{display:flex;gap:18px;font-size:13px;margin-bottom:8px;}
.ad-slot-type label{display:inline-flex;align-items:center;gap:6px;font-weight:600;margin:0;color:var(--text);}
.ad-slot-ad-fields{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ad-slot-ad-fields input[type="file"]{padding:4px 0;}
.ad-slot-ad-fields input[type="url"]{width:auto;max-width:220px;}

/* game shell */
.game-shell{
  background:var(--panel);
  border:1px solid var(--line);
  padding:22px;
  border-radius:10px;
}
.game-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-bottom:16px;}
.game-head>*:first-child{justify-self:start;}
.game-head>*:last-child{justify-self:end;}
.back-btn{background:none;border:1px solid var(--line);color:var(--muted);padding:7px 14px;font-size:12px;cursor:pointer;letter-spacing:1px;border-radius:6px;}
.back-btn:hover{color:var(--accent);border-color:var(--accent);}
/* The ALL GAMES link needs to stand out: logo-green outline, dark green text (6:1 contrast), light tint. */
a.back-btn{color:#4c6b3c;border:2px solid #6c8c5c;background:rgba(108,140,92,.12);font-weight:700;text-decoration:none;padding:6px 14px;}
a.back-btn:hover{background:#6c8c5c;color:#fff;border-color:#6c8c5c;}
.game-title{font-size:18px;font-weight:700;}
.status-line{min-height:22px;color:var(--bad);font-size:16px;font-weight:600;margin:10px 0;text-align:center;}
.status-line.win{color:var(--good);}
.status-line:empty{min-height:0;margin:0;}
.save-status{min-height:20px;color:var(--muted);font-size:12px;text-align:center;margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:8px;}
.save-status:empty{min-height:0;margin:0;display:none;}
.diff-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px;}
.diff-done-check{color:var(--good);font-weight:800;}
.diff-btn.ghost.diff-btn-done{border-color:var(--good);color:var(--good);}
.diff-btn-done .diff-done-check{color:inherit;}
.tier-badge{font-size:10px;background:var(--accent-dim);color:var(--accent);padding:2px 8px;border-radius:10px;margin-left:8px;vertical-align:middle;letter-spacing:1px;}

.btn{background:var(--accent);color:#fff;border:none;font-weight:700;padding:9px 18px;cursor:pointer;font-size:13px;letter-spacing:.5px;border-radius:6px;}
.btn:hover{filter:brightness(1.08);}
.btn.ghost{background:transparent;border:1px solid var(--accent);color:var(--accent);}
.btn.small{padding:6px 12px;font-size:12px;}
.btn:disabled{opacity:.4;cursor:not-allowed;}

label{display:block;font-size:13px;font-weight:700;margin:10px 0 4px;}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url]{
  background:#fff;border:1px solid var(--line);color:var(--text);
  padding:10px 12px;font-size:15px;letter-spacing:1px;
  width:100%;max-width:280px;border-radius:6px;
}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=url]:focus{outline:none;border-color:var(--accent);}

.password-field{position:relative;max-width:280px;}
.password-field input[type=password],.password-field input[type=text]{max-width:none;padding-right:40px;}
.password-toggle{
  position:absolute;right:0;top:0;bottom:0;width:36px;
  background:none;border:none;cursor:pointer;font-size:16px;
  color:var(--muted);opacity:.6;padding:0;
}
.password-toggle:hover{opacity:1;}
.password-toggle.active{opacity:1;color:var(--accent);}

/* wordle-style grid */
.wl-board{display:flex;flex-direction:column;gap:6px;align-items:center;margin-bottom:16px;}
.wl-row{display:flex;gap:6px;}
.wl-cell{width:42px;height:42px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;text-transform:uppercase;border-radius:4px;}
.wl-cell.correct{background:var(--good);border-color:var(--good);color:#fff;}
.wl-cell.present{background:#e8b93b;border-color:#e8b93b;color:#402d00;}
.wl-cell.absent{background:var(--panel2);border-color:var(--line);color:var(--muted);}
.wl-cell.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;}
.keyboard{display:flex;flex-direction:column;gap:6px;align-items:center;max-width:100%;}
.krow{display:flex;gap:5px;max-width:100%;justify-content:center;}
.key{background:var(--panel2);border:1px solid var(--line);color:var(--text);padding:9px 6px;min-width:30px;flex:0 1 30px;text-align:center;font-size:12px;border-radius:4px;cursor:pointer;}
.key.wide{min-width:52px;flex-basis:52px;font-size:10px;}
.key.correct{background:var(--good);color:#fff;}
.key.present{background:#e8b93b;color:#402d00;}
.key.absent{background:#d7dbe2;color:var(--muted);}
/* On very narrow phones, 10 keys at the base min-width (30px) plus
   gaps/borders add up to wider than the available content area inside
   .wrap's 16px side padding, so the row overflowed past the screen
   edge instead of shrinking to fit (reported on Hangman, but this row
   is shared by every letter-keyboard game). Letting keys shrink below
   their old fixed min-width, with tighter padding/gap, keeps the whole
   row inside the viewport on phones as narrow as ~320px. */
@media (max-width:380px){
  .krow{gap:3px;}
  .key{min-width:22px;flex-basis:22px;padding:8px 2px;font-size:11px;}
  .key.wide{min-width:38px;flex-basis:38px;font-size:9px;}
}

.center{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.bignum{font-size:34px;font-weight:800;letter-spacing:2px;font-family:monospace;}
.hint{color:var(--muted);font-size:16px;}
.hint a{color:var(--accent);cursor:pointer;}
.game-message{color:var(--muted);font-size:16px;line-height:1.5;max-width:480px;margin:0 auto;}
.premium-message{color:var(--accent);font-size:19px;font-weight:700;line-height:1.4;max-width:480px;margin:0 auto;}
.share-score{margin-top:16px;text-align:center;}
.share-preview{
  display:inline-block;text-align:left;background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;padding:12px 14px;font-family:monospace;font-size:13px;line-height:1.6;
  white-space:pre-wrap;max-width:320px;margin:0 auto 10px;
}
.price-callout{color:var(--good);}

.mem-grid{display:grid;grid-template-columns:repeat(var(--mem-cols,4),var(--mem-tile-size,64px));gap:8px;justify-content:center;max-width:100%;overflow-x:auto;padding-bottom:4px;}
.mem-tile{width:var(--mem-tile-size,64px);height:var(--mem-tile-size,64px);background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:calc(var(--mem-tile-size,64px) * 0.4);cursor:pointer;border-radius:6px;}
.mem-tile.flipped,.mem-tile.matched{background:var(--accent-dim);}
.mem-tile.matched{opacity:.5;cursor:default;}

/* Odd Word Out */
.owo-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:520px;margin:0 auto;}
.owo-word{padding:14px 20px;font-size:15px;font-weight:700;border-radius:8px;border:1px solid var(--line);background:var(--panel2);cursor:pointer;color:var(--text);}
.owo-word:hover:not(:disabled){border-color:var(--accent);}
.owo-word.correct{background:var(--good);color:#fff;border-color:var(--good);}
.owo-word.wrong{background:#f3d9d9;color:#a83f3f;border-color:#a83f3f;opacity:.7;}

/* Prime Hunt */
.ph-progress{color:var(--muted);font-size:13px;margin-bottom:6px;}
.ph-number{font-size:56px;font-weight:800;margin:14px 0;color:var(--text);}
.ph-buttons{display:flex;gap:12px;justify-content:center;}

/* Magic Square */
.magic-grid{display:grid;grid-template-columns:repeat(3,60px);gap:6px;justify-content:center;margin:16px 0;}
.magic-cell{width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;border-radius:6px;border:1px solid var(--line);}
.magic-cell.given{background:var(--panel2);color:var(--muted);}
input.magic-cell{background:#fff;color:var(--text);text-align:center;padding:0;}

/* Pattern Recall */
.pr-round{font-weight:700;margin-bottom:10px;}
.pr-pads{display:grid;grid-template-columns:repeat(2,80px);gap:10px;justify-content:center;margin-bottom:16px;}
.pr-pad{width:80px;height:80px;border-radius:10px;background:var(--pad-color);opacity:.55;cursor:pointer;transition:opacity .1s;}
.pr-pad.lit{opacity:1;box-shadow:0 0 0 4px rgba(0,0,0,.08);}

/* Mastermind Digits */
.mm-picker{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:12px;}
.mm-peg-btn{width:36px;height:36px;border-radius:50%;background:var(--peg-color);color:#fff;font-weight:800;border:2px solid transparent;cursor:pointer;}
.mm-peg-btn:hover{border-color:var(--text);}
.mm-current{display:flex;gap:8px;justify-content:center;margin-bottom:10px;}
.mm-peg{width:36px;height:36px;border-radius:50%;background:var(--peg-color);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;}
.mm-peg.empty{background:var(--panel2);border:1px dashed var(--line);}
.mm-peg.small{width:26px;height:26px;font-size:12px;}
.mm-rows{margin-top:16px;display:flex;flex-direction:column;gap:6px;max-width:320px;margin-left:auto;margin-right:auto;}
.mm-row{display:flex;justify-content:space-between;align-items:center;background:var(--panel2);padding:6px 10px;border-radius:6px;}
.mm-row-pegs{display:flex;gap:4px;}
.mm-row-fb{font-size:14px;letter-spacing:2px;color:var(--muted);}

/* Balance Scale */
.balance-clues{max-width:480px;margin:0 auto 18px;color:var(--muted);font-size:19px;line-height:1.5;}
.balance-clue{padding:6px 0;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;}
.balance-clue-icon{font-size:30px;line-height:1;}
.balance-pool{display:flex;gap:10px;justify-content:center;margin-bottom:14px;}
.balance-item{font-size:32px;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 12px;cursor:pointer;}
.balance-item:hover{border-color:var(--accent);}
.balance-answer{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:14px;min-height:32px;}
.balance-slot{background:var(--panel2);padding:6px 10px;border-radius:6px;font-size:14px;}

/* Countdown Calc */
.cd-target{font-size:16px;margin-bottom:14px;}
.cd-pool{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:12px;}
.cd-num{font-size:18px;font-weight:700;padding:10px 16px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);cursor:pointer;}
.cd-num.selected{background:var(--accent);color:#fff;border-color:var(--accent);}
#cdOps{display:flex;gap:8px;justify-content:center;margin-bottom:16px;}

/* Digit Sudoku Mini */
/* width:min(100%, <ideal size>) is what keeps this (and the other
   fixed-cell game grids below -- mathgrid, merge-grid, slide-grid,
   gp-grid, sd-grid) from overflowing .game-shell on a narrow phone:
   at the old fixed per-cell px width, a 6-wide hard-mode grid simply
   ran past the edge of the grey box with no way to shrink. Capping the
   grid at its own ideal pixel width but letting it shrink to 100% of
   the available space when that's narrower, combined with 1fr columns
   and aspect-ratio:1 cells instead of fixed cell px, keeps every cell
   square and proportionally sized at any screen width while still
   rendering at the original size on anything wide enough for it. */
.sudoku-grid{display:inline-grid;grid-template-columns:repeat(var(--side),1fr);width:min(100%,calc(var(--side)*40px + (var(--side) - 1)*1px + 4px));gap:1px;background:var(--line);border:2px solid var(--text);margin:16px auto;}
.sudoku-cell{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;background:#fff;}
.sudoku-cell.given{background:var(--panel2);color:var(--muted);}
.sudoku-cell.box-edge-r{border-right:2px solid var(--text);}
.sudoku-cell.box-edge-b{border-bottom:2px solid var(--text);}
input.sudoku-cell{text-align:center;padding:0;border:none;color:var(--text);}

/* Math Grid (KenKen-lite) */
.mathgrid{display:inline-grid;grid-template-columns:repeat(var(--side),1fr);width:min(100%,calc(var(--side)*56px + (var(--side) - 1)*1px + 4px));gap:1px;background:var(--line);border:2px solid var(--text);margin:16px auto;}
.mathgrid-cell{position:relative;width:100%;aspect-ratio:1;background:#fff;}
.mathgrid-cell.cage-edge-r{border-right:2px solid var(--text);}
.mathgrid-cell.cage-edge-b{border-bottom:2px solid var(--text);}
.mathgrid-cell input{width:100%;height:100%;border:none;text-align:center;font-size:18px;font-weight:700;background:transparent;}
.cage-label{position:absolute;top:2px;left:3px;font-size:10px;color:var(--accent);font-weight:800;}

/* Number Merge (2048-style) */
.merge-grid{display:grid;grid-template-columns:repeat(4,1fr);width:min(100%,calc(4*64px + 3*6px + 16px));gap:6px;justify-content:center;background:var(--panel2);padding:8px;border-radius:8px;margin:16px auto;}
.merge-tile{width:100%;aspect-ratio:1;border-radius:6px;background:#e4e0d8;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:var(--text);}
.merge-tile.v2{background:#eee4da;} .merge-tile.v4{background:#ede0c8;}
.merge-tile.v8{background:#f2b179;color:#fff;} .merge-tile.v16{background:#f59563;color:#fff;}
.merge-tile.v32{background:#f67c5f;color:#fff;} .merge-tile.v64{background:#f65e3b;color:#fff;}
.merge-tile.v128{background:#edcf72;color:#fff;} .merge-tile.v256{background:#edcc61;color:#fff;}
.merge-controls{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:8px;}
.merge-controls > div{display:flex;gap:40px;}

/* Sliding Puzzle */
.slide-grid{display:grid;grid-template-columns:repeat(var(--side),1fr);width:min(100%,calc(var(--side)*64px + (var(--side) - 1)*4px + 12px));gap:4px;justify-content:center;margin:16px auto;background:var(--panel2);padding:6px;border-radius:8px;}
.slide-tile{width:100%;aspect-ratio:1;background:var(--accent);color:#fff;font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;}
.slide-tile.blank{background:transparent;cursor:default;}
.slide-moves{color:var(--muted);font-size:13px;}

/* Grid Paths */
.gp-grid{display:grid;grid-template-columns:repeat(var(--side),1fr);width:min(100%,calc(var(--side)*52px + (var(--side) - 1)*3px + 12px));gap:3px;justify-content:center;margin:16px auto;background:var(--panel2);padding:6px;border-radius:8px;}
.gp-cell{width:100%;aspect-ratio:1;background:#fff;border-radius:4px;cursor:pointer;border:1px solid var(--line);}
.gp-cell.filled{background:var(--gp-color);opacity:.6;}
.gp-cell.endpoint{opacity:1;box-shadow:inset 0 0 0 3px rgba(0,0,0,.25);}
.gp-cell.active{outline:3px solid var(--gp-color);outline-offset:2px;}

/* Tile Merge Runner */
.tm-progress{color:var(--muted);font-size:13px;margin-bottom:8px;}
.tm-grid{display:grid;grid-template-columns:repeat(3,72px);gap:6px;justify-content:center;margin-bottom:14px;}
.tm-tile{width:72px;height:72px;background:var(--panel2);border-radius:8px;border:1px solid var(--line);}
.tm-tile.lit{background:var(--accent);}

/* Spot the Difference */
.sd-progress{color:var(--muted);font-size:13px;margin-bottom:10px;}
.sd-boards{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.sd-grid{display:grid;grid-template-columns:repeat(var(--side),1fr);width:min(100%,calc(var(--side)*44px + (var(--side) - 1)*2px + 8px));gap:2px;background:var(--panel2);padding:4px;border-radius:6px;}
.sd-cell{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:20px;background:#fff;border-radius:3px;cursor:pointer;}
.sd-cell.found{background:var(--good);opacity:.4;}

/* Trivia */
.triv-progress{color:var(--muted);font-size:13px;margin-bottom:10px;}
.triv-question{font-size:18px;font-weight:700;margin-bottom:18px;max-width:520px;margin-left:auto;margin-right:auto;}
.triv-choices{display:flex;flex-direction:column;gap:8px;max-width:420px;margin:0 auto;}
.triv-choice{padding:12px 16px;font-size:14px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);cursor:pointer;text-align:left;color:var(--text);}
.triv-choice:hover:not(:disabled){border-color:var(--accent);}
.triv-choice.correct{background:var(--good);color:#fff;border-color:var(--good);}
.triv-choice.wrong{background:#f3d9d9;color:#a83f3f;border-color:#a83f3f;}

/* Timeline */
.tl-pool{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:560px;margin:0 auto 14px;}
.tl-item{padding:10px 14px;font-size:13px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);cursor:pointer;color:var(--text);}
.tl-item:hover{border-color:var(--accent);}
.tl-answer{display:flex;flex-direction:column;gap:6px;max-width:520px;margin:0 auto 14px;min-height:40px;}
.tl-slot{background:var(--panel2);padding:8px 12px;border-radius:6px;font-size:13px;text-align:left;}
.tl-slot.solved{background:var(--accent-dim);}
.tl-year{color:var(--muted);font-weight:700;}

/* Kriss Kross */
.kk-layout{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;align-items:flex-start;margin:16px 0;}
.kk-grid{display:inline-grid;grid-template-columns:repeat(var(--cols),minmax(0,32px));grid-template-rows:repeat(var(--rows),32px);gap:0;max-width:100%;overflow:auto;}
.kk-cell{width:32px;height:32px;text-align:center;font-size:14px;font-weight:700;color:var(--text);padding:0;text-transform:uppercase;box-sizing:border-box;
  background:#fff;border:1px solid var(--line);}
.kk-cell.black{background:transparent;border:none;}
@media (min-width:700px){
  .kk-grid{grid-template-columns:repeat(var(--cols),minmax(0,38px));grid-template-rows:repeat(var(--rows),38px);}
  .kk-cell{width:38px;height:38px;font-size:16px;}
}
.kk-bank{max-width:260px;text-align:left;}
.kk-bank-group{margin-bottom:10px;}
.kk-bank-len{font-size:11px;color:var(--muted);font-weight:800;letter-spacing:.5px;margin-bottom:4px;}
.kk-word{display:inline-block;background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:3px 8px;margin:2px 4px 2px 0;font-size:13px;font-weight:600;}
.kk-word.solved{background:var(--good);color:#fff;border-color:var(--good);text-decoration:line-through;opacity:.7;}

.ws-category{text-align:center;color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:10px;}
.ws-grid{display:grid;gap:2px;justify-content:center;margin-bottom:14px;user-select:none;touch-action:none;max-width:100%;overflow-x:auto;}
.ws-cell{width:26px;height:26px;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;cursor:pointer;touch-action:none;}
.ws-cell.sel{background:#bdf0d1;border-color:var(--good);}
.ws-cell.found{background:var(--good);color:#fff;}
.ws-words{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:18px;}
.ws-word{font-size:11px;padding:4px 8px;border:1px solid var(--line);color:var(--muted);border-radius:4px;}
.ws-word.found{color:var(--good);border-color:var(--good);text-decoration:line-through;}

.cg-line{display:flex;flex-wrap:wrap;gap:32px;justify-content:center;margin-bottom:18px;}
.cg-word{display:flex;gap:6px;}
.cg-pair{display:flex;flex-direction:column;align-items:center;}
.cg-pair input{width:28px;height:28px;text-align:center;padding:0;font-size:14px;text-transform:uppercase;}
.cg-pair input.cg-hinted{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);font-weight:700;}
.cg-cipher{font-size:12px;color:var(--muted);margin-top:3px;}

.hm-ghosts{font-size:22px;letter-spacing:6px;min-height:30px;}
/* white-space:pre-wrap (not plain pre) matters here: the rendered
   string already uses runs of spaces to space out letters within a
   word and gap between words, and pre-wrap keeps those runs intact
   while still allowing a line break at a space when a long phrase is
   wider than .game-shell -- plain "pre" never breaks, so a long phrase
   on a narrow phone just ran the blanks straight past the grey box's
   edge instead of wrapping. */
.hm-word{font-size:26px;letter-spacing:4px;font-family:monospace;font-weight:700;white-space:pre-wrap;max-width:100%;text-align:center;}
@media (max-width:480px){
  .hm-word{font-size:20px;letter-spacing:3px;}
}

.conn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:420px;margin:0 auto;}
.conn-tile{background:var(--panel2);border:1px solid var(--line);padding:14px 6px;text-align:center;font-size:12px;font-weight:700;cursor:pointer;border-radius:6px;}
.conn-tile.selected{background:var(--accent-dim);border-color:var(--accent);}
.conn-solved{max-width:420px;margin:0 auto 8px;}
.conn-solved-row{display:flex;flex-direction:column;align-items:center;padding:10px;margin-bottom:6px;border-radius:6px;font-size:12px;}
.conn-solved-row strong{margin-bottom:3px;letter-spacing:1px;}
.conn-lvl-1{background:#fdf3d0;color:#8a6d00;}
.conn-lvl-2{background:#dcf3e3;color:#1f7a41;}
.conn-lvl-3{background:#dbe9fb;color:#22579e;}
.conn-lvl-4{background:#eee0f6;color:#7c3fa3;}

.chain-list{display:flex;flex-direction:column;gap:6px;align-items:center;font-family:monospace;font-size:15px;margin-bottom:14px;}
.chain-item{padding:6px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);letter-spacing:1px;}
.chain-item.solved{border-color:var(--good);color:var(--good);}
.chain-item.next{border-color:var(--accent);color:var(--text);}

.wl-ladder{display:flex;flex-direction:column;gap:4px;align-items:center;font-family:monospace;font-size:16px;letter-spacing:2px;margin-bottom:14px;}
.ladder-row{padding:4px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);}
.ladder-changed{color:var(--accent);font-weight:800;}

/* leaderboard */
.lb-controls{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.lb-controls select{padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:13px;}

.stats-box{width:440px;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px;}
.stat-chip{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:12px 6px;text-align:center;}
.stat-num{font-size:22px;font-weight:800;color:var(--accent);line-height:1.1;}
.stat-label{font-size:10.5px;color:var(--muted);margin-top:4px;line-height:1.3;}
.stats-recent-label{font-size:12px;color:var(--muted);margin-bottom:6px;text-align:center;}
.stats-recent-strip{display:grid;grid-template-columns:repeat(7,18px);gap:4px;justify-content:center;}
.stats-day{width:18px;height:18px;border-radius:4px;background:var(--panel2);border:1px solid var(--line);}
.stats-day.played{background:var(--good);border-color:var(--good);}
@media (max-width:480px){
  .stats-box{width:100%;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
}

/* auth modal */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(20,24,32,.4);align-items:center;justify-content:center;z-index:50;}
.modal-box{background:#fff;border-radius:10px;padding:24px;width:320px;max-width:90vw;position:relative;}
.modal-box.how-to-box{width:480px;max-width:92vw;max-height:80vh;overflow-y:auto;text-align:left;}
.how-to-box p{margin:10px 0;font-size:14px;line-height:1.5;}
.how-to-box ul{margin:6px 0 14px;padding-left:20px;}
.how-to-box li{font-size:13.5px;line-height:1.6;margin-bottom:4px;}
.modal-close{position:absolute;top:10px;right:14px;background:none;border:none;font-size:18px;cursor:pointer;color:var(--muted);}
.modal-error{color:var(--bad);font-size:12px;margin-top:8px;min-height:16px;}
.modal-status{color:var(--good);font-size:12px;margin-top:8px;min-height:16px;}
.checkbox-label{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--muted);cursor:pointer;text-align:left;line-height:1.4;}
.checkbox-label input[type=checkbox]{margin-top:2px;flex-shrink:0;width:auto;}

.site-footer{text-align:center;color:var(--muted);font-size:11px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);}
.footer-nav{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:10px;}
.footer-nav a{color:var(--muted);text-decoration:none;font-size:12px;}
.footer-nav a:hover{color:var(--accent);text-decoration:underline;}
.footer-copy{color:var(--muted);}

.content-page{max-width:680px;margin:0 auto;text-align:left;line-height:1.6;}
.content-page h1{font-size:28px;margin-bottom:6px;}
.content-page h2{font-size:19px;margin:28px 0 8px;}
.content-page p{margin:0 0 14px;color:var(--text);}
/* :not(.btn) matters here: without it, this rule's higher specificity
   (class + type selector) beats .btn's own color:#fff on any button-
   styled <a> inside a .content-page (e.g. download.html's DOWNLOAD
   button) -- text render in the same accent blue as the button's
   background, making it unreadable until selected. */
.content-page a:not(.btn){color:var(--accent);}
.content-updated{color:var(--muted);font-size:13px;font-style:italic;}

.contact-form{display:flex;flex-direction:column;gap:6px;max-width:480px;margin-top:20px;}
.contact-form label{font-size:13px;font-weight:700;margin-top:10px;}
.contact-form input,.contact-form select,.contact-form textarea{
  background:#fff;border:1px solid var(--line);color:var(--text);
  padding:10px 12px;font-size:15px;border-radius:6px;width:100%;max-width:none;
  font-family:inherit;
}
.contact-form textarea{resize:vertical;}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent);}
.contact-form button{margin-top:16px;align-self:flex-start;}
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

.premium-hero{text-align:center;max-width:600px;margin:0 auto 40px;padding:20px 0;}
.premium-hero h1{font-size:32px;margin-bottom:16px;}
.premium-price{margin:0;line-height:1;font-size:22px;font-weight:700;color:var(--accent);}
.premium-price-big{font-size:56px;font-weight:800;color:var(--accent);}
.premium-price-sub{color:var(--muted);font-size:15px;margin:8px 0 24px;}

/* Admin-managed sale price (admin.html "Premium Pricing"), rendered by
   js/app.js's formatPremiumPriceCompact/formatPremiumPriceHero into any
   .premium-price-slot element (header-promo pill, premium.html hero and
   comparison table). The [data-style="hero"] rules below scale it up
   for the big headline price; everywhere else it stays inline-sized to
   match its surrounding text. */
.premium-price-was{opacity:.6;font-weight:400;text-decoration-color:currentColor;margin-right:4px;}
.premium-price-now{font-weight:800;color:var(--accent);}
.premium-price-unit{font-size:0.5em;font-weight:600;color:var(--muted);margin-left:2px;}
.premium-price-badge{display:inline-block;background:var(--good);color:#fff;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;vertical-align:middle;}
.premium-price-slot[data-style="hero"]{display:inline-block;line-height:1;}
.premium-price-slot[data-style="hero"] .premium-price-now{font-size:56px;}
.premium-price-slot[data-style="hero"] .premium-price-was{font-size:22px;display:block;margin-bottom:2px;}
.premium-price-slot[data-style="hero"] .premium-price-unit{font-size:18px;}
.premium-price-slot[data-style="hero"] .premium-price-badge{display:block;margin:0 auto 8px;width:fit-content;}

/* The header-promo pill has a solid purple/blue gradient background
   (not the white page background .premium-price-now/-was assume above),
   so the accent-colored "now" price and the opacity-dimmed "was" price
   both read as low-contrast there -- override both to solid whites. */
.header-promo .premium-price-now{color:#fff;}
.header-promo .premium-price-was{opacity:1;color:rgba(255,255,255,.75);}
/* Same low-contrast problem as the header-promo pill above, on the solid
   START PREMIUM / UPGRADE TO PREMIUM PLUS buttons (js/premium.js): a
   .btn's background is var(--accent), same blue the "now" price text
   uses by default, so on sale (the only time .premium-price-now actually
   renders -- otherwise it's plain text) it was going blue-on-blue.
   .ghost buttons are unaffected -- transparent background, so the
   default accent-colored text still reads fine there. */
.btn:not(.ghost) .premium-price-now{color:#fff;}
.btn:not(.ghost) .premium-price-was{opacity:1;color:rgba(255,255,255,.75);}
.premium-cta{min-height:70px;}
.premium-active{color:var(--good);font-weight:700;font-size:16px;}

.compare-table{width:100%;border-collapse:collapse;margin:20px 0 30px;font-size:14px;table-layout:fixed;}
.compare-table th,.compare-table td{padding:12px 14px;text-align:center;border-bottom:1px solid var(--line);word-wrap:break-word;}
.compare-table td:first-child{text-align:left;color:var(--muted);}
.compare-table th{font-size:13px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;}
.compare-table th:nth-child(3),.compare-table th:nth-child(4){color:var(--accent);}
.compare-table tbody tr:last-child td{border-bottom:none;}
/* Explicit widths (table-layout:fixed) so the Premium and Premium Plus
   columns match -- left to auto-sizing, Premium's longer cell text
   ("30+ games — 40+ puzzles a day") was pulling its column wider than
   Premium Plus's shorter one. */
.compare-table th:first-child,.compare-table td:first-child{width:26%;}
.compare-table th:nth-child(2),.compare-table td:nth-child(2){width:18%;}
.compare-table th:nth-child(3),.compare-table td:nth-child(3),
.compare-table th:nth-child(4),.compare-table td:nth-child(4){width:28%;}

/* SEO / content pages */
.game-page-hero{text-align:center;margin:24px 0 20px;}
.game-page-hero h1{font-size:28px;margin:0 0 6px;}
.game-page-hero .tagline{max-width:600px;margin:0 auto;color:var(--muted);font-size:14px;line-height:1.5;}
.seo-content,.more-puzzles{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:22px 24px;margin-top:24px;text-align:left;
}
.seo-content h2,.more-puzzles h2{font-size:16px;margin-top:0;}
.seo-content p{margin:10px 0;font-size:14px;line-height:1.55;color:var(--text);}
.seo-content ul,.more-puzzles ul{margin:6px 0 14px;padding-left:20px;}
.seo-content li,.more-puzzles li{font-size:13.5px;line-height:1.6;margin-bottom:4px;color:var(--text);}
.more-puzzles a{color:var(--accent);text-decoration:none;font-weight:600;}
.more-puzzles a:hover{text-decoration:underline;}
.clue-green{color:var(--good);font-weight:700;}
.clue-yellow{color:#b98900;font-weight:700;}
.clue-gray{color:var(--muted);font-weight:700;}