/* Mogi website: homepage, category and info pages. Built from mock-up v3 (v2 layout + v1 dark neon colours).
   Pages are written by tools/seo/site.py; this file is hand-edited. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700 800;font-display:swap;
  src:url("../shared/fonts/bricolage-grotesque.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500 700;font-display:swap;
  src:url("../shared/fonts/plus-jakarta-sans.woff2") format("woff2")}
:root{
  --bg:#f4f2fb; --surface:#ffffff; --surface-2:#ece8f8; --ink:#1b1530; --muted:#6c6684; --line:#e1dcf0;
  --brand:#6a3dff; --brand-2:#ff4f8b; --sun:#ffc23d; --mint:#16c7a4; --sky:#3d8bff;
  --display:"Bricolage Grotesque", system-ui, sans-serif; --text:"Plus Jakarta Sans", system-ui, sans-serif;
  --r-lg:22px; --r-md:16px; --shadow:0 1px 2px #1b153014, 0 8px 24px -12px #1b153033;
  --gutter:clamp(16px,3vw,32px); --side:56px; --side-open:236px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

/* top bar */
.top{position:sticky;top:0;z-index:10;background:#f4f2fbe6;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-inner{display:flex;align-items:center;gap:18px;height:70px;padding:0 var(--gutter)}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:grid;place-items:center;
  box-shadow:0 6px 16px -6px #6a3dff99}
.logo-mark canvas{width:28px;height:28px;image-rendering:pixelated}
.logo-word{font:800 28px/1 var(--display);letter-spacing:-.03em}
.logo-word i{font-style:normal;background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.search{flex:1;max-width:520px;margin:0 auto;position:relative}
.search input{width:100%;height:46px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  padding:0 18px 0 46px;font:500 15px var(--text);box-shadow:var(--shadow)}
.search input:focus{outline:3px solid #6a3dff40;border-color:var(--brand)}
.search svg{position:absolute;left:16px;top:13px;width:20px;height:20px;color:var(--muted)}
.top-actions{display:flex;gap:10px}
.chip-btn{height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:600 14px var(--text);
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;box-shadow:var(--shadow)}
.chip-btn.dark{background:var(--ink);color:#fff;border-color:var(--ink)}

/* layout */
.layout{display:grid;grid-template-columns:var(--side) 1fr;gap:28px;padding:22px var(--gutter) 40px;max-width:1440px;margin:0 auto}
.side{position:sticky;top:92px;align-self:start;display:flex;flex-direction:column;gap:4px}
.side a{display:flex;align-items:center;gap:12px;height:46px;padding:0 14px;border:0;border-radius:14px;background:none;
  font:600 15px var(--text);cursor:pointer;text-align:left}
.side a:hover{background:var(--surface-2)}
.side a[aria-current=page]{background:var(--surface);box-shadow:var(--shadow);color:var(--brand)}
.side .ico{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:16px;color:#fff}
.side hr{border:0;border-top:1px solid var(--line);margin:10px 4px}
.side .note{font-size:13px;color:var(--muted);padding:6px 14px;line-height:1.5}
main{min-width:0}

/* bento hero */
.bento{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:200px 200px;gap:16px}
.card{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 2px 4px #1b153014,0 18px 36px -14px #1b153055}
.card .art{position:absolute;inset:0}
.card .art svg,.card .art canvas{width:100%;height:100%;display:block}
.card .art canvas{image-rendering:pixelated;object-fit:cover}
.card .label{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:linear-gradient(transparent,#0b081acc);color:#fff}
.card .label h3{margin:0;font:700 17px var(--display);letter-spacing:-.01em}
.card .label p{margin:4px 0 0;font-size:13px;opacity:.85}
.tag{position:absolute;top:12px;left:12px;font:700 11px var(--text);padding:6px 10px;border-radius:999px;letter-spacing:.03em}
.tag.new{background:var(--mint);color:#04261f} .tag.soon{background:#ffffffe6;color:var(--ink)} .tag.daily{background:var(--sun);color:#3a2a00}
.feature{grid-row:span 2}
.feature .label{padding:24px 26px}
.feature .label h3{font-size:clamp(26px,3vw,40px);letter-spacing:-.03em}
.feature .label p{font-size:15px;max-width:30em}
.play{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:#fff;color:var(--ink);font:700 15px var(--text);
  padding:12px 20px;border-radius:999px;box-shadow:0 6px 18px -6px #0008}
.play:hover{background:var(--sun)}

/* rows */
.row{margin-top:34px}
.row-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.row-head h2{margin:0;font:800 clamp(20px,2.2vw,26px) var(--display);letter-spacing:-.02em}
.row-head span{color:var(--muted);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.tile{display:flex;flex-direction:column;border-radius:var(--r-md)}
.tile .thumb{position:relative;aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease}
.tile:hover .thumb{transform:translateY(-4px) scale(1.02);box-shadow:0 2px 4px #1b153014,0 16px 30px -14px #1b153066}
.tile .thumb svg,.tile .thumb canvas{width:100%;height:100%;display:block}
.tile .thumb canvas{image-rendering:pixelated}
.tile h3{margin:10px 2px 2px;font:700 15px var(--display)}
.tile p{margin:0 2px;color:var(--muted);font-size:13px;line-height:1.45}
.tile.soon{cursor:default}
.tile.soon .thumb::after{content:"";position:absolute;inset:0;background:#f4f2fb33}
.empty{color:var(--muted);display:none;padding:20px 0}

/* gang strip */
.gang{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;background:linear-gradient(120deg,#1b1530,#3b1d7a);
  color:#fff;border-radius:var(--r-lg);padding:26px 30px;margin-top:38px}
.gang-sprites{display:flex;gap:14px}
.gang-sprites canvas{width:72px;height:72px;image-rendering:pixelated;background:#ffffff12;border-radius:16px;padding:8px}
.gang h2{margin:0 0 8px;font:800 24px var(--display);letter-spacing:-.02em}
.gang p{margin:0;opacity:.85;line-height:1.6;max-width:44em}

/* promise + seo + footer */
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.promise div{background:var(--surface);border-radius:var(--r-md);padding:20px;box-shadow:var(--shadow)}
.promise b{display:block;font:700 16px var(--display);margin-bottom:6px}
.promise span{color:var(--muted);font-size:14px;line-height:1.55}
.about{margin-top:34px;color:var(--muted);line-height:1.7;max-width:60em}
.about h2{color:var(--ink);font:800 20px var(--display);margin:0 0 8px}
footer{border-top:1px solid var(--line);padding:24px var(--gutter) 40px;color:var(--muted);font-size:14px;max-width:1440px;margin:0 auto}
footer nav{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:10px}
footer a:hover{color:var(--ink)}

@media (max-width:1100px){.bento{grid-template-columns:1.4fr 1fr;grid-template-rows:200px 200px 200px}.feature{grid-row:span 2}}
@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  .side{position:static;flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:4px}
  .side a{flex:none;height:40px;background:var(--surface);box-shadow:var(--shadow)}
  .side hr,.side .note{display:none}
  .top-actions{display:none}
  .bento{grid-template-columns:1fr 1fr;grid-template-rows:300px 170px 170px}
  .feature .art canvas{object-position:center 20%}
  .feature{grid-column:span 2;grid-row:auto}
  .promise{grid-template-columns:1fr}
  .gang{grid-template-columns:1fr}
}
@media (max-width:520px){
  .logo-word{font-size:24px}
  .top-inner{gap:12px}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .tile p{display:none}
  .gang-sprites canvas{width:56px;height:56px}
  .card .label p{display:none}
  .feature .label h3{font-size:26px}
  .feature .label{padding:16px 18px}
}
@media (prefers-reduced-motion:reduce){.card,.tile .thumb{transition:none}}

/* ---------- dark neon colours (mock-up v3) ---------- */

:root{
  --bg:#0b0a10; --surface:#15121f; --surface-2:#1c1830; --ink:#ece6f7; --muted:#9a93a6; --line:#2c2640;
  --pink:#FF2E63; --mogi:#FFD60A; --lime:#A6FF00; --cyan:#00F0FF;
  --brand:var(--cyan); --brand-2:var(--lime);
  --shadow:0 1px 0 #ffffff08 inset, 0 10px 28px -16px #000;
}


/* header */
.top{background:#0b0a10e6;border-bottom-color:var(--line)}
.logo-mark{background:var(--surface);border:1px solid var(--line);box-shadow:0 0 0 1px #a6ff0022, 0 8px 22px -10px #a6ff0066}
.logo-word i{background:linear-gradient(90deg,var(--lime),var(--cyan));-webkit-background-clip:text;background-clip:text}
.search input{background:var(--surface);border-color:var(--line);color:var(--ink)}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline-color:#00f0ff55;border-color:var(--cyan)}
.chip-btn{background:var(--surface);border-color:var(--line);color:var(--ink)}
.chip-btn.dark{background:var(--mogi);color:var(--bg);border-color:var(--mogi)}

/* sidebar */
.side a:hover{background:var(--surface-2)}
.side a[aria-current=page]{background:var(--surface);color:var(--cyan);box-shadow:inset 3px 0 0 var(--cyan)}
.side hr{border-top-color:var(--line)}

/* cards and tiles */
.card{background:var(--surface);border:1px solid var(--line)}
.card:hover,.tile:hover .thumb{box-shadow:0 0 0 1px var(--cyan), 0 18px 40px -18px #00f0ff55}
.tile .thumb{border:1px solid var(--line)}
.tile.soon .thumb::after{background:#0b0a1040}
.card .label{background:linear-gradient(transparent,#0b0a10ee)}
.tag.new{background:var(--lime);color:var(--bg)}
.tag.soon{background:#0b0a10cc;color:var(--ink);border:1px solid var(--line)}
.tag.daily{background:var(--mogi);color:var(--bg)}
.play{background:var(--mogi);color:var(--bg);box-shadow:0 5px 0 #a88a00}
.play:hover{background:#fff}

/* lower sections */
.gang{background:linear-gradient(120deg,#15121f,#241a45);border:1px solid var(--line)}
.gang-sprites canvas{background:#ffffff0d}
.promise div{background:var(--surface);border:1px solid var(--line);box-shadow:none}
.promise div:nth-child(1){border-top:3px solid var(--pink)}
.promise div:nth-child(2){border-top:3px solid var(--mogi)}
.promise div:nth-child(3){border-top:3px solid var(--lime)}
footer{border-top-color:var(--line)}

@media (max-width:860px){
  .side a{background:var(--surface);border:1px solid var(--line);box-shadow:none}
  .side a[aria-current=page]{box-shadow:inset 0 -3px 0 var(--cyan)}
}

/* ---------- real-site additions ---------- */
.skip{position:absolute;left:-999px;top:8px;z-index:20;background:var(--mogi);color:var(--bg);padding:10px 14px;border-radius:10px;font-weight:700}
.skip:focus{left:8px}
.page-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.page-head h1{margin:0;font:800 clamp(24px,2.8vw,34px) var(--display);letter-spacing:-.02em}
.page-head span{color:var(--muted);font-size:14px}
.crumbs{font-size:13px;color:var(--muted);margin:0 0 10px}
.crumbs a{color:var(--cyan)} .crumbs a:hover{text-decoration:underline}
.intro{color:var(--muted);line-height:1.7;max-width:60em;margin:0 0 22px;font-size:16px}
.intro b{color:var(--ink)}
.more-cats{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.more-cats a{padding:10px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:14px}
.more-cats a:hover{border-color:var(--cyan);color:var(--cyan)}
.about h3{color:var(--ink);font:700 16px var(--display);margin:22px 0 6px}
.about p{margin:0 0 12px}
.about a{color:var(--cyan)}
.text-page{max-width:46em;line-height:1.75;color:#cfc9da;font-size:16px}
.text-page h1{color:var(--ink);font:800 clamp(26px,3vw,36px) var(--display);letter-spacing:-.02em;margin:0 0 14px}
.text-page h2{color:var(--ink);font:800 20px var(--display);margin:30px 0 8px}
.text-page a{color:var(--cyan)}
.lost{padding:40px 0}
.side a:focus-visible,.tile:focus-visible,.card:focus-visible,.chip-btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

/* Today's 6: the daily challenges row, its progress bar, streak and per-game ticks (site.js) */
.grid.six{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1100px){.grid.six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.grid.six{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile[data-daily] .thumb{position:relative}
.tile .todo,.tile .tick{position:absolute;left:8px;top:8px;z-index:1;font:800 11px/1 "Plus Jakarta Sans",system-ui,sans-serif;padding:5px 8px;border-radius:99px}
.tile .todo{background:#0b0a10cc;color:#ffd60a;border:1px solid #ffd60a88}
.tile .tick{background:#a6ff00;color:#0b0a10}
.tile.done{opacity:.72}
.today .streak{color:#ffd60a;font-weight:800}
.today-bar{height:8px;border-radius:99px;background:#2c2640;margin:-4px 0 14px;overflow:hidden}
.today-bar div{height:100%;width:0;background:linear-gradient(90deg,#ffd60a,#a6ff00);transition:width .4s}
.today-note{color:#8e86a8;font-size:14px;margin:12px 0 0}
@media (prefers-reduced-motion:reduce){.today-bar div{transition:none}}

/* Logo: the pixel Mogi on its own, bigger, no box behind it (3 Oct 2026) */
.logo .logo-mark,.logo-mark{width:auto;height:auto;border:0;border-radius:0;background:none;box-shadow:none}
.logo-mark canvas{width:52px;height:auto;image-rendering:pixelated;display:block}

/* Slim sidebar: icons only; the ☰ button opens the full menu over the page */
.side{position:sticky;top:92px;width:var(--side);z-index:20}
.side .label,.side .note,.side hr{display:none}
.side a{justify-content:center;padding:0;width:var(--side);height:48px}
.side-toggle{width:var(--side);height:44px;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;border-radius:14px;margin-bottom:6px}
.side-toggle span{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.side-toggle:hover{background:var(--surface-2)}
.side-toggle:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.side.open{width:var(--side-open);background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:8px;
  box-shadow:0 18px 40px -12px #000a;margin:-9px}
.side.open .label{display:inline}
.side.open .note,.side.open hr{display:block}
.side.open a{justify-content:flex-start;padding:0 14px;width:auto}
.side.open .side-toggle{width:44px}
.side.open .side-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.side.open .side-toggle span:nth-child(2){opacity:0}
.side.open .side-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.layout{grid-template-columns:var(--side) 1fr}
@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  .side,.side.open{position:static;width:auto;background:none;border:0;padding:0 0 4px;margin:0;box-shadow:none}
  .side .label{display:inline}
  .side a,.side.open a{width:auto;padding:0 14px;justify-content:flex-start}
  .side-toggle{display:none}
  .side hr,.side .note,.side.open hr,.side.open .note{display:none}
}
@media (prefers-reduced-motion:reduce){.side-toggle span{transition:none}}

/* Recently played: small square thumbnails under the hero, from this browser's own history */
.recent-strip{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.recent-item{flex:none;width:92px;text-align:center;font-size:12px;font-weight:700;color:var(--ink)}
.recent-item img{display:block;width:92px;height:92px;object-fit:cover;border-radius:16px;border:2px solid var(--line);
  background:var(--surface);transition:border-color .15s,transform .15s}
.recent-item:hover img,.recent-item:focus-visible img{border-color:var(--cyan);transform:translateY(-2px)}
.recent-item span{display:block;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-pic{position:relative}
.recent-badge{position:absolute;left:5px;right:5px;bottom:5px;background:#0b0a10e6;border-radius:99px;padding:3px 4px;
  font-size:10px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-badge em{font-style:normal;color:var(--mogi)}
.recent-bar{display:block;height:5px;border-radius:99px;background:var(--line);margin:6px 4px 0;overflow:hidden}
.recent-bar::before{content:"";display:block;height:100%;width:var(--fill,0%);background:linear-gradient(90deg,var(--mogi),var(--lime,#A6FF00))}
.recent-item.done img{border-color:var(--lime,#A6FF00)}
@media (prefers-reduced-motion:reduce){.recent-item img{transition:none}}