/* ================================================================
   Shumi Mosaic — colourful bento-grid bilingual mini-game hub
   EN default · BM under /bm/ · Sections: Play Tips Codes Codex Picks
   ================================================================ */

:root {
  --sm-bg: #17141f;
  --sm-bg2: #1f1b2e;
  --sm-panel: #241f33;
  --sm-panel2: #2c2540;
  --sm-ink: #f6f3ff;
  --sm-dim: #b7b0d4;
  --sm-line: #37304d;

  --violet: #8b5cf6; --violet-bg: #3d2a73;
  --teal: #2dd4bf;   --teal-bg: #0f4a44;
  --rose: #fb7185;   --rose-bg: #5c1e30;
  --amber: #fbbf24;  --amber-bg: #58400f;
  --sky: #38bdf8;    --sky-bg: #0c3d5e;
  --lime: #a3e635;   --lime-bg: #37500f;
  --fuchsia: #e879f9; --fuchsia-bg: #581d5c;
  --orange: #fb923c; --orange-bg: #5c320d;

  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 11px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(139, 92, 246, .16), transparent 60%),
    radial-gradient(900px 480px at -10% 20%, rgba(45, 212, 191, .12), transparent 55%),
    var(--sm-bg);
  color: var(--sm-ink);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.sm-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.sm-skip { position: absolute; left: -999px; }
.sm-skip:focus { left: 8px; top: 8px; background: var(--violet); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 99; }

/* ---------------- header ---------------- */
.sm-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(23, 20, 31, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sm-line);
}
.sm-header-in { display: flex; align-items: center; gap: 14px; min-height: 62px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
.sm-logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px; letter-spacing: .3px; }
.sm-logo-chips { display: inline-flex; }
.sm-logo-chips i { width: 13px; height: 13px; border-radius: 4px; display: inline-block; margin-right: 2.5px; }
.sm-logo-chips i:nth-child(1) { background: var(--violet); }
.sm-logo-chips i:nth-child(2) { background: var(--teal); }
.sm-logo-chips i:nth-child(3) { background: var(--rose); }
.sm-logo-chips i:nth-child(4) { background: var(--amber); }
.sm-burger { display: none; background: var(--sm-panel); border: 1px solid var(--sm-line); color: var(--sm-ink); border-radius: 10px; padding: 7px 11px; font-size: 16px; cursor: pointer; }
.sm-nav-list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.sm-nav-list a { display: block; padding: 8px 13px; border-radius: 999px; color: var(--sm-dim); font-weight: 600; font-size: 14px; transition: .15s; }
.sm-nav-list a:hover { color: #fff; background: var(--sm-panel2); }
.sm-search { display: flex; flex: 1; min-width: 170px; max-width: 330px; margin-left: auto; background: var(--sm-panel); border: 1px solid var(--sm-line); border-radius: 999px; overflow: hidden; }
.sm-search input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--sm-ink); padding: 9px 15px; font: inherit; font-size: 14px; outline: none; }
.sm-search button { background: linear-gradient(135deg, var(--violet), var(--fuchsia)); border: 0; color: #fff; padding: 0 15px; cursor: pointer; font-size: 15px; }
.sm-lang { display: flex; border: 1px solid var(--sm-line); border-radius: 999px; overflow: hidden; }
.sm-lang a { padding: 7px 13px; font-size: 13px; font-weight: 700; color: var(--sm-dim); }
.sm-lang a.is-on { background: linear-gradient(135deg, var(--teal), var(--sky)); color: #06202b; }

/* new ticker */
.sm-ticker { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--sm-line); background: var(--sm-bg2); overflow: hidden; }
.sm-ticker-tag { background: linear-gradient(135deg, var(--rose), var(--fuchsia)); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .8px; padding: 3px 10px; border-radius: 999px; flex: none; }
.sm-ticker-links { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; }
.sm-ticker-links::-webkit-scrollbar { display: none; }
.sm-ticker-links a { color: var(--sm-dim); font-size: 13.5px; white-space: nowrap; }
.sm-ticker-links a:hover { color: #fff; }

/* ---------------- hero ---------------- */
.sm-hero { padding: 34px 0 8px; }
.sm-hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; }
.sm-hero-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 320px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px; box-shadow: var(--shadow);
  background: linear-gradient(135deg, var(--violet-bg), var(--fuchsia-bg));
}
.sm-hero-card.sm-alt { background: linear-gradient(135deg, var(--sky-bg), var(--teal-bg)); }
.sm-hero-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.sm-hero-inner { position: relative; }
.sm-hero-kicker { display: inline-block; background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .25); padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .6px; margin-bottom: 12px; }
.sm-hero-title { margin: 0 0 8px; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.15; font-weight: 800; }
.sm-hero-sub { margin: 0 0 16px; color: #e9e4ff; font-size: 15px; max-width: 52ch; }
.sm-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; font-weight: 700; font-size: 15px; transition: .15s; }
.sm-btn-cta { background: #fff; color: #2a1a4a; }
.sm-btn-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
.sm-btn-ghost { border: 1.5px solid rgba(255, 255, 255, .5); color: #fff; }
.sm-btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.sm-hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
.sm-hero-mini { position: relative; border-radius: var(--r-lg); padding: 20px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; }
.sm-hero-mini.sm-m1 { background: linear-gradient(135deg, var(--rose-bg), var(--orange-bg)); }
.sm-hero-mini.sm-m2 { background: linear-gradient(135deg, var(--lime-bg), var(--teal-bg)); }
.sm-hero-mini h3 { margin: 6px 0 4px; font-size: 19px; }
.sm-hero-mini p { margin: 0; color: #f3ecff; font-size: 13.5px; opacity: .92; }
.sm-hero-mini .sm-kicker { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; opacity: .8; }

/* section headers */
.sm-sec-head { display: flex; align-items: baseline; gap: 14px; margin: 38px 0 16px; flex-wrap: wrap; }
.sm-sec-head h2 { margin: 0; font-size: 23px; font-weight: 800; }
.sm-sec-head .sm-sec-line { flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--violet), transparent); }
.sm-sec-head a { color: var(--sm-dim); font-size: 14px; font-weight: 600; }
.sm-sec-head a:hover { color: #fff; }

/* ---------------- mosaic tiles ---------------- */
.sm-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sm-tile {
  border-radius: var(--r-md); overflow: hidden; background: var(--sm-panel);
  border: 1px solid var(--sm-line); display: flex; flex-direction: column;
  transition: transform .16s, box-shadow .16s; position: relative;
}
.sm-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.sm-tile-media { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--sm-bg2); }
.sm-tile-img { width: 100%; height: 100%; object-fit: cover; }
.sm-tile-body { padding: 13px 15px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.sm-tag { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .4px; padding: 3px 10px; border-radius: 999px; }
.sm-tag-soft { opacity: .75; }
.sm-hue-violet .sm-tag { background: var(--violet); color: #fff; }
.sm-hue-teal .sm-tag { background: var(--teal); color: #06322c; }
.sm-hue-rose .sm-tag { background: var(--rose); color: #fff; }
.sm-hue-amber .sm-tag { background: var(--amber); color: #3a2a05; }
.sm-hue-sky .sm-tag { background: var(--sky); color: #06202b; }
.sm-hue-lime .sm-tag { background: var(--lime); color: #1d2b06; }
.sm-hue-fuchsia .sm-tag { background: var(--fuchsia); color: #fff; }
.sm-hue-orange .sm-tag { background: var(--orange); color: #fff; }
.sm-tile-title { margin: 0; font-size: 16.5px; line-height: 1.3; }
.sm-tile-title a:hover { text-decoration: underline; }
.sm-tile-ex { margin: 0; color: var(--sm-dim); font-size: 13.5px; flex: 1; }
.sm-tile-foot { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--sm-dim); }
.sm-star { color: var(--amber); font-weight: 700; }
.sm-mini-btn { margin-left: auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--fuchsia)); color: #fff; font-size: 13px; }
.sm-rank-badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: rgba(0, 0, 0, .72); border: 1px solid rgba(255, 255, 255, .3); color: #ffd76a; font-weight: 800; font-size: 13px; padding: 3px 10px; border-radius: 999px; }

/* mosaic big tiles for featured rows */
.sm-tile.wide { grid-column: span 2; }
@media (max-width: 960px) { .sm-mosaic { grid-template-columns: repeat(2, 1fr); } .sm-hero-grid { grid-template-columns: 1fr; } .sm-hero-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sm-mosaic { grid-template-columns: 1fr; } .sm-hero-side { grid-template-columns: 1fr; } }

/* chips row */
.sm-chip-row { display: flex; gap: 9px; flex-wrap: wrap; margin: 18px 0 6px; }
.sm-chip { padding: 8px 16px; border-radius: 999px; background: var(--sm-panel); border: 1px solid var(--sm-line); font-size: 13.5px; font-weight: 600; color: var(--sm-dim); transition: .15s; }
.sm-chip:hover { color: #fff; border-color: var(--violet); }

/* ---------------- article pages ---------------- */
.sm-page { padding: 26px 0 50px; }
.sm-crumbs { color: var(--sm-dim); font-size: 13px; margin-bottom: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.sm-crumbs a:hover { color: #fff; }
.sm-article { max-width: 860px; }
.sm-h1 { margin: 6px 0 10px; font-size: clamp(26px, 4vw, 38px); line-height: 1.12; font-weight: 800; }
.sm-lede { color: var(--sm-dim); font-size: 17px; margin: 0 0 14px; }
.sm-byline { color: var(--sm-dim); font-size: 13px; margin: 0 0 20px; }
.sm-byline b { color: var(--sm-ink); }
.sm-article-media { border-radius: var(--r-lg); overflow: hidden; margin-bottom: 24px; border: 1px solid var(--sm-line); }
.sm-content { font-size: 16px; color: #e8e3f6; }
.sm-content p { margin: 0 0 16px; }
.sm-content h2 { margin: 30px 0 12px; font-size: 22px; font-weight: 800; }
.sm-content h3 { margin: 24px 0 10px; font-size: 18px; font-weight: 700; }
.sm-content ul, .sm-content ol { margin: 0 0 16px 22px; }
.sm-content li { margin-bottom: 6px; }
.sm-content a { color: var(--teal); text-decoration: underline; }
.sm-content table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; }
.sm-content th, .sm-content td { border: 1px solid var(--sm-line); padding: 9px 12px; text-align: left; }
.sm-content th { background: var(--sm-panel2); }
.sm-content code { background: var(--sm-panel2); padding: 2px 7px; border-radius: 6px; font-size: .92em; }

/* game page */
.sm-single-head { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; align-items: start; margin-bottom: 22px; }
.sm-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.sm-stat { background: var(--sm-panel); border: 1px solid var(--sm-line); border-radius: var(--r-sm); padding: 7px 13px; font-size: 13px; color: var(--sm-dim); }
.sm-stat b { color: var(--sm-ink); font-size: 14.5px; }
.sm-cta { display: flex; gap: 11px; flex-wrap: wrap; margin: 16px 0; }
.sm-btn-play { background: linear-gradient(135deg, var(--violet), var(--fuchsia)); color: #fff; padding: 13px 30px; font-size: 16px; }
.sm-btn-play:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(139, 92, 246, .4); }
.sm-btn-sec { background: var(--sm-panel); border: 1px solid var(--sm-line); color: var(--sm-ink); padding: 12px 22px; }
.sm-embed { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--sm-line); background: #000; box-shadow: var(--shadow); }
.sm-embed iframe, .sm-frame { width: 100%; height: var(--h, 560px); border: 0; display: block; }
.sm-two-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; margin-top: 28px; }
.sm-block { margin-bottom: 30px; }
.sm-block h2 { font-size: 21px; font-weight: 800; margin: 0 0 13px; }
.sm-steps { margin: 0 0 16px 20px; padding: 0; }
.sm-steps li { margin-bottom: 9px; color: #e8e3f6; }
.sm-faq details { background: var(--sm-panel); border: 1px solid var(--sm-line); border-radius: var(--r-sm); margin-bottom: 9px; }
.sm-faq summary { cursor: pointer; padding: 12px 15px; font-weight: 700; font-size: 14.5px; list-style: none; }
.sm-faq summary::before { content: "+ "; color: var(--teal); font-weight: 800; }
.sm-faq details[open] summary::before { content: "− "; }
.sm-faq p { margin: 0; padding: 0 15px 13px; color: var(--sm-dim); font-size: 14px; }
.sm-side-card { background: var(--sm-panel); border: 1px solid var(--sm-line); border-radius: var(--r-md); padding: 17px 18px; margin-bottom: 16px; }
.sm-side-card h3 { margin: 0 0 10px; font-size: 15.5px; }
.sm-side-card ul { list-style: none; margin: 0; padding: 0; }
.sm-side-card li { margin-bottom: 8px; font-size: 14px; color: var(--sm-dim); }
.sm-side-card li a:hover { color: #fff; }
.sm-mini-list { display: grid; gap: 10px; }
.sm-mini-list a { display: flex; gap: 10px; align-items: center; color: var(--sm-dim); font-size: 13.5px; }
.sm-mini-list a:hover { color: #fff; }
.sm-mini-list img { width: 66px; height: 40px; object-fit: cover; border-radius: 8px; flex: none; }

/* code sheets */
.sm-code-box { background: #12101a; border: 1px dashed var(--violet); border-radius: var(--r-md); padding: 16px 18px; margin: 14px 0; font-family: Consolas, monospace; }
.sm-code-box .code-line { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px dashed var(--sm-line); font-size: 14.5px; }
.sm-code-box .code-line:last-child { border-bottom: 0; }
.sm-code-box .code-val { color: var(--lime); font-weight: 700; letter-spacing: 1px; }
.sm-code-box .code-note { color: var(--sm-dim); font-size: 12.5px; }

/* picks ranked list */
.sm-rank-list { list-style: none; margin: 0; padding: 0; counter-reset: rk; }
.sm-rank-list li { display: grid; grid-template-columns: 54px 130px 1fr; gap: 15px; align-items: center; background: var(--sm-panel); border: 1px solid var(--sm-line); border-radius: var(--r-md); padding: 12px 15px; margin-bottom: 11px; }
.sm-rank-num { font-size: 26px; font-weight: 900; color: transparent; background: linear-gradient(135deg, var(--violet), var(--fuchsia)); -webkit-background-clip: text; background-clip: text; }
.sm-rank-list img { width: 130px; height: 74px; object-fit: cover; border-radius: 10px; }
.sm-rank-list h3 { margin: 0 0 4px; font-size: 16px; }
.sm-rank-list p { margin: 0; color: var(--sm-dim); font-size: 13.5px; }

/* archive head */
.sm-archive-head { padding: 30px 0 6px; max-width: 760px; }
.sm-hue-grad-1 { background: linear-gradient(135deg, var(--violet), var(--fuchsia)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* pager */
.sm-pager { display: flex; gap: 8px; margin: 30px 0; flex-wrap: wrap; }
.sm-pager .page-numbers { padding: 9px 15px; border-radius: 10px; background: var(--sm-panel); border: 1px solid var(--sm-line); font-size: 14px; color: var(--sm-dim); }
.sm-pager .page-numbers.current { background: linear-gradient(135deg, var(--violet), var(--fuchsia)); color: #fff; border: 0; }

/* wide player */
body.sm-wide-mode { background: #000; }
.sm-player { position: fixed; inset: 0; display: flex; flex-direction: column; background: #000; z-index: 100; }
.sm-player-bar { display: flex; align-items: center; gap: 14px; padding: 9px 16px; background: var(--sm-bg2); border-bottom: 1px solid var(--sm-line); }
.sm-player-bar a, .sm-player-bar strong { color: var(--sm-ink); font-size: 14px; }
.sm-player-bar .sm-sp { flex: 1; }
.sm-frame-full { flex: 1; width: 100%; border: 0; }

/* ---------------- footer ---------------- */
.sm-footer { margin-top: 60px; background: var(--sm-bg2); border-top: 1px solid var(--sm-line); }
.sm-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding: 40px 20px 30px; }
.sm-footer h4 { margin: 0 0 12px; font-size: 15px; }
.sm-footer ul { list-style: none; margin: 0; padding: 0; }
.sm-footer li { margin-bottom: 9px; }
.sm-footer a { color: var(--sm-dim); font-size: 14px; }
.sm-footer a:hover { color: #fff; }
.sm-footer p { color: var(--sm-dim); font-size: 13.5px; }
.sm-footer-base { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px 22px; border-top: 1px solid var(--sm-line); color: var(--sm-dim); font-size: 13px; }
@media (max-width: 900px) { .sm-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .sm-footer-grid { grid-template-columns: 1fr; }
  .sm-single-head, .sm-two-col { grid-template-columns: 1fr; }
  .sm-burger { display: block; }
  .sm-nav-list { display: none; width: 100%; flex-direction: column; }
  .sm-nav-list.is-open { display: flex; }
  .sm-search { max-width: none; }
}