/* Pixel Bomb page: same layout as the Marble Sudoku page (styles.css + marble-lab.css),
   with the game's own colors (PixelBombVisualStyle) and a playable voxel board.
   Site accent blue #0793E6 (same as the landing page slide), coral #FF6D4D (game buttons), lavender voxel family #9B8EC7, flag #E61955, star #FFD43B,
   stage yellow #FFE870, stage panel #FFFDF6. */

body.pb-accent { --brand-gold:#0793E6; --brand-gold-dark:#0572B3; --brand-gold-glow:rgba(7,147,230,.4); }
.pb-page { --marble-accent:#2FA8F0; --marble-accent-soft:rgba(7,147,230,.12); }
.pb-page .marble-hero { background:radial-gradient(ellipse at 82% 42%,rgba(155,92,255,.16),transparent 34rem),radial-gradient(ellipse at 10% 0%,rgba(7,147,230,.14),transparent 30rem),linear-gradient(180deg,#121226 0%,#0b0d17 100%); }
.pb-page .mh-try-link { color:#9fd6fa; }
.pb-page .mh-try-link .ns-icon { background:rgba(7,147,230,.2); }
.pb-page .mh-feat__icon { background:rgba(155,142,199,.16); color:#CDC6EA; }
.pb-page .ns-store.is-mine, .pb-page .ns-stores > .ns-store:first-child { border-color:rgba(7,147,230,.7); background:linear-gradient(180deg,#0d1a2a,#0b0d14); }
.pb-page .marble-art-mark { color:#FFD43B; }
.pb-page .ns-promo { border-color:rgba(7,147,230,.35); background:radial-gradient(120% 120% at 100% 0%,rgba(7,147,230,.1),transparent 60%),var(--ns-card,#141826); }
.pb-page .marble-rule-card { min-height:0; }
.pb-page .marble-rule-card h3 { margin-top:1.1rem; }

/* ---------- Voxel cube (board, minis) ---------- */
.pb-c { --u:30px; --face:#9B8EC7; --ink:#1d1630; --r:calc(var(--u) * .08); position:relative; display:block; width:var(--u); height:var(--u); margin:0; padding:0; border:0; border-radius:var(--r); color:var(--ink); font:800 calc(var(--u) * .5)/1 var(--font-heading,'Outfit',sans-serif);
  background:radial-gradient(ellipse 70% 60% at 50% 42%,color-mix(in srgb,var(--face) 90%,#fff) 0%,var(--face) 72%) var(--face);
  box-shadow:inset 0 calc(var(--u) * .035) 0 color-mix(in srgb,var(--face) 72%,#fff), inset calc(var(--u) * .03) 0 0 color-mix(in srgb,var(--face) 88%,#fff), inset calc(var(--u) * -.035) 0 0 color-mix(in srgb,var(--face) 80%,#000), inset 0 calc(var(--u) * -.1) 0 color-mix(in srgb,var(--face) 82%,#000), 0 0 0 1px color-mix(in srgb,var(--face) 72%,#000);
  transition:filter .15s ease; -webkit-tap-highlight-color:transparent; }
.pb-c > b { position:absolute; inset:0 0 calc(var(--u) * .04); display:grid; place-items:center; color:var(--ink); font:inherit; pointer-events:none; text-shadow:0 1px 0 color-mix(in srgb,var(--face) 70%,#fff); }
.pb-c[data-s="hidden"] { --face:#9B8EC7; }
.pb-c[data-s="flag"] { --face:#E61955; }
.pb-c[data-s="flag"]::before, .pb-c[data-s="mine"]::before, .pb-c[data-s="hit"]::before { position:absolute; inset:20%; content:""; background:url("/assets/images/pixel-bomb/ui/flag.png") 58% 50% / contain no-repeat; pointer-events:none; }
.pb-c[data-s="mine"] { --face:#FF8B3D; }
.pb-c[data-s="hit"] { --face:#FF1F4E; z-index:2; }
.pb-c[data-s="mine"]::before, .pb-c[data-s="hit"]::before { inset:9%; background-image:url("/assets/images/pixel-bomb/ui/bomb.png"); background-position:center; }
.pb-c.is-wrong::before { display:none; }
.pb-c.is-wrong { background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23fff' stroke-opacity='.95' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 46% no-repeat, radial-gradient(ellipse 70% 60% at 50% 42%,color-mix(in srgb,var(--face) 90%,#fff) 0%,var(--face) 72%) var(--face); }
/* Bottom row shows the cube's front face, like the voxels in the game. */
.pb-c.is-bottom::after { position:absolute; z-index:-1; top:calc(100% - var(--r)); right:0; left:0; height:calc(var(--u) * .28 + var(--r)); border-radius:0 0 var(--r) var(--r); background:color-mix(in srgb,var(--face) 68%,#000); box-shadow:inset calc(var(--u) * -.035) 0 0 color-mix(in srgb,var(--face) 55%,#000), inset calc(var(--u) * .03) 0 0 color-mix(in srgb,var(--face) 76%,#000); content:""; }

/* Marks for the small explainer boards and the hint */
.pb-c.is-mark-c { z-index:3; outline:calc(var(--u) * .1) solid #FFD43B; outline-offset:calc(var(--u) * -.02); }
.pb-c.is-mark-s::before { position:absolute; inset:26%; border-radius:50%; background:#24D889 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; box-shadow:0 2px 0 #128a55; content:""; }
.pb-c.is-mark-m::before { position:absolute; inset:14%; content:""; background:url("/assets/images/pixel-bomb/ui/bomb.png") center / contain no-repeat; filter:drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.pb-c.is-mark-m { --face:#c9bfe9; }
.pb-c.is-target { z-index:4; animation:pb-target 1s ease-in-out infinite; }
.pb-c.is-clue { z-index:3; animation:pb-clue 1s ease-in-out infinite; }
.pb-c.is-assist { filter:saturate(1.1); }
@keyframes pb-target { 0%,100% { filter:brightness(1); transform:scale(1); } 50% { filter:brightness(1.18); transform:scale(1.08); box-shadow:0 0 0 calc(var(--u) * .08) rgba(255,255,255,.85), 0 4px 10px rgba(20,12,40,.3); } }
@keyframes pb-clue { 50% { transform:scale(1.08); filter:brightness(1.12); } }

/* ---------- Small explainer boards ---------- */
.pb-mini { --u:30px; isolation:isolate; display:grid; grid-template-columns:repeat(var(--cols,4),var(--u)); gap:0; width:max-content; margin:.2rem 0 0; padding:.55rem .55rem calc(.55rem + var(--u) * .3); border-radius:12px; background:#FFFDF6; box-shadow:inset 0 0 0 3px #d9f1f7, 0 8px 20px rgba(0,0,0,.25); }
.pb-mini .pb-c { --u:30px; cursor:default; }
.marble-rule-card .pb-mini { --u:24px; }
.marble-rule-card .pb-mini .pb-c { --u:24px; }

/* Tips grid */
.pb-tips { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.2rem; padding:0; list-style:none; }
.pb-tips li { position:relative; display:flex; flex-direction:column; gap:.9rem; padding:1.15rem; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); }
.pb-tips h3 { margin:0 0 .3rem; color:#f5f6f8; font-size:1rem; }
.pb-tips p { margin:0; color:#929bad; font-size:.85rem; line-height:1.55; }
.pb-tips .pb-mini { --u:24px; }
.pb-tips .pb-mini .pb-c { --u:24px; }
.pb-tips__legend { display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin:1rem 0 0; padding:0; list-style:none; color:#9da5b6; font-size:.8rem; }
.pb-tips__legend li { display:flex; align-items:center; gap:.45rem; }
.pb-tips__legend i { width:14px; height:14px; border-radius:4px; }
.pb-tips__legend .is-c { outline:3px solid #FFD43B; outline-offset:-3px; background:#F4F1EA; }
.pb-tips__legend .is-s { border-radius:50%; background:#24D889; }
.pb-tips__legend .is-m { background:url("/assets/images/pixel-bomb/ui/bomb.png") center / contain no-repeat; }
.pb-guide { padding-top:2.6rem; scroll-margin-top:90px; }
.pb-routine { margin-top:1.8rem; background:radial-gradient(ellipse at 10% 10%,rgba(7,147,230,.1),transparent 27rem),#111522; }
.pb-routine--pro { background:radial-gradient(ellipse at 10% 10%,rgba(155,142,199,.14),transparent 27rem),#111522; }
.pb-routine .marble-routine__intro h3 { margin-top:.65rem; color:#f8f8fa; font-family:var(--font-heading); font-size:clamp(1.45rem,2.4vw,1.9rem); letter-spacing:-.04em; line-height:1.1; }
.pb-routine .marble-routine__intro > p:last-child { margin-top:.6rem; color:#9da5b6; font-size:.9rem; line-height:1.7; }
.pb-routine .marble-routine__steps li > span { border-color:rgba(7,147,230,.4); }
.pb-routine--pro .marble-routine__steps li > span { border-color:rgba(155,142,199,.45); color:#CDC6EA; }
.pb-routine--pro .marble-eyebrow { color:#CDC6EA; }
.pb-guide__sub { margin:3rem 0 0; color:#f5f6f8; font-family:var(--font-heading); font-size:1.35rem; letter-spacing:-.03em; }
.pb-tag { position:absolute; top:1rem; right:1rem; padding:.2rem .55rem; border-radius:999px; font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.pb-tag--new { background:rgba(127,209,151,.14); color:#9fe0b2; }
.pb-tag--pro { background:rgba(155,142,199,.18); color:#CDC6EA; }

/* ---------- Try it: site-style panel (like Marble Sudoku), game voxels only ---------- */
.pb-page .ns-lab { --ns-good:#7fd197; background:radial-gradient(120% 90% at 0% 0%,rgba(7,147,230,.1),transparent 55%),var(--ns-card); }
.pb-page .ns-btn { border-color:rgba(7,147,230,.45); background:rgba(7,147,230,.12); color:#a9dcfb; display:inline-flex; align-items:center; gap:.45rem; }
.pb-page .ns-btn:hover { background:rgba(7,147,230,.22); border-color:#0793E6; }
.pb-page .ns-btn--ghost { background:transparent; }
.pb-page .ns-toggle[aria-pressed="true"] { border-color:rgba(7,147,230,.55); }
.pb-page .ns-meter span { background:linear-gradient(90deg,#9B8EC7,#2FA8F0,#7fd197); }
.pb-try { scroll-margin-top:90px; }
.pb-try .mh-try__grid { grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr); }
.pb-play { position:relative; display:grid; place-items:center; min-height:320px; padding:clamp(.8rem,2.5vw,1.6rem); border:1px solid rgba(255,255,255,.07); border-radius:18px; background:radial-gradient(80% 70% at 50% 40%,color-mix(in srgb,var(--bg2,#9B5CFF) 16%,transparent),transparent 70%),#0d101b; transition:background .6s ease; }
.pb-board-wrap { display:flex; justify-content:center; width:100%; min-width:0; }
.pb-board-box { position:relative; }
.pb-board { --u:30px; isolation:isolate; display:grid; grid-template-columns:repeat(var(--cols,10),var(--u)); gap:0; padding-bottom:calc(var(--u) * .3); touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; filter:drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.pb-board .pb-c { --u:inherit; width:var(--u); height:var(--u); cursor:pointer; }
.pb-board .pb-c[data-s="hidden"]:hover { filter:brightness(1.1); }
.pb-board .pb-c[data-s="open"], .pb-board .pb-c[data-s="art"] { cursor:default; }
.pb-board .pb-c[data-s="open"]:not(:empty) { cursor:pointer; }
.pb-board .pb-c:focus-visible { z-index:5; outline:3px solid #fff; outline-offset:-1px; }
[data-pb-game].is-lost .pb-board .pb-c, [data-pb-game].is-won .pb-board .pb-c { cursor:default; }
[data-pb-game].is-flagmode .pb-board .pb-c[data-s="hidden"] { cursor:crosshair; }
.pb-fx { position:absolute; inset:0; z-index:6; pointer-events:none; }
.pb-bit { position:absolute; display:block; border-radius:2px; box-shadow:inset 0 2px 0 rgba(255,255,255,.35); }

.pb-level-name { margin:0 0 .7rem; color:var(--marble-accent); font-size:.72rem; font-weight:800; letter-spacing:.14em; }
.pb-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; }
.pb-stat { display:flex; flex-direction:column; gap:.25rem; padding:.6rem .7rem; border:1px solid var(--ns-line); border-radius:12px; background:rgba(255,255,255,.03); }
.pb-stat span { display:flex; align-items:center; gap:.35rem; color:#8f97aa; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.pb-stat span img { width:14px; height:14px; object-fit:contain; opacity:.9; }
.pb-stat strong { color:var(--ns-ink); font-family:var(--font-heading); font-size:1.45rem; line-height:1; font-variant-numeric:tabular-nums; }
.pb-stat--time[data-pace="warm"] strong { color:#ffd27d; }
.pb-stat--time[data-pace="late"] strong { color:#a6adbf; }
.pb-stars-goal { margin:.55rem 0 0; color:#8f97aa; font-size:.78rem; }
.pb-stars-goal::before { content:"★★★ "; color:#FFD43B; letter-spacing:.05em; }
.pb-hint b { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:rgba(7,147,230,.35); color:#fff; font-size:.72rem; }
.pb-hint[disabled] { opacity:.5; cursor:default; }
[data-pb-game].has-end .pb-toast { display:none; }

/* Finished (or lost) board: card in the side column, the picture stays visible */
.pb-end { margin-top:1rem; padding:1.1rem 1.15rem; border:1px solid rgba(127,209,151,.45); border-radius:16px; background:radial-gradient(120% 100% at 0% 0%,rgba(127,209,151,.12),transparent 60%),rgba(8,10,18,.5); animation:pb-end .5s cubic-bezier(.2,1.2,.4,1) both; }
.pb-end[hidden] { display:none !important; }
.pb-end[data-result="lost"] { border-color:rgba(255,155,138,.45); background:radial-gradient(120% 100% at 0% 0%,rgba(255,155,138,.1),transparent 60%),rgba(8,10,18,.5); }
@keyframes pb-end { from { transform:translateY(10px); opacity:0; } }
.pb-end__title { margin:0; color:#f5f6f8; font-family:var(--font-heading); font-size:1.25rem; font-weight:800; letter-spacing:-.02em; }
.pb-end[data-result="lost"] .pb-end__title { color:#ffd3ca; }
.pb-end__name { margin:.15rem 0 0; color:var(--ns-good); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.pb-end[data-result="lost"] .pb-end__name { color:#ff9b8a; }
.pb-end__stars { display:flex; gap:.3rem; margin:.7rem 0 .1rem; }
.pb-end__stars[hidden] { display:none; }
.pb-end__stars img { width:38px; height:auto; filter:grayscale(1) brightness(.6) opacity(.5); }
.pb-end__stars img.is-on { filter:drop-shadow(0 2px 0 #a07a08); }
.pb-end__time { margin:.45rem 0 0; color:#a6adbf; font-size:.85rem; line-height:1.5; }
.pb-end__actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.85rem; }
.pb-end__promo { margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--ns-line); }
.pb-end__promo[hidden] { display:none; }
.pb-end__promo p { margin:0; color:#d7dbe4; font-size:.88rem; font-weight:600; }
.pb-end__promo .ns-stores { margin-top:.6rem; }

/* Level picker: silhouettes like the game's level select, in color once solved */
.pb-levels { margin-top:1.2rem; }
.pb-levels__label { margin:0 0 .55rem; color:#8f97aa; font-size:.68rem; font-weight:800; letter-spacing:.14em; }
.pb-levels__list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; }
.pb-levels__list button { position:relative; display:grid; place-items:center; aspect-ratio:1; padding:7px; border:1px solid var(--ns-line); border-radius:12px; background:#151a2b; cursor:pointer; transition:transform .15s ease, border-color .15s ease; }
.pb-levels__list button:hover { transform:translateY(-2px); border-color:rgba(7,147,230,.65); }
.pb-levels__list button[aria-current="true"] { border-color:#0793E6; box-shadow:0 0 0 3px rgba(7,147,230,.3); }
.pb-levels__list button:focus-visible { outline:3px solid #0793E6; outline-offset:2px; }
.pb-levels__list canvas { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; border-radius:4px; }
.pb-levels__num { position:absolute; top:-7px; left:-7px; display:grid; place-items:center; min-width:22px; height:22px; border-radius:7px; background:#0793E6; color:#fff; font:800 .72rem/1 var(--font-heading,'Outfit',sans-serif); }
.pb-levels__stars { position:absolute; right:0; bottom:-8px; left:0; color:#FFD43B; font-size:.72rem; text-align:center; text-shadow:0 1px 2px rgba(0,0,0,.7); }

/* Level wall */
.pb-wall-section { padding-top:5.2rem; }
.pb-wall { margin:1.8rem 0 0; }
.pb-wall img { display:block; width:100%; height:auto; image-rendering:pixelated; }
.pb-wall figcaption { margin-top:.8rem; color:#8f97aa; font-size:.82rem; }
.pb-wall figcaption span { display:inline-block; width:.75em; height:.75em; margin-right:.4rem; border:2px solid #2FA8F0; border-radius:3px; vertical-align:-.05em; }

/* ---------- Responsive ---------- */
@media (max-width:1100px) { .pb-tips { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:980px) { .pb-routine { grid-template-columns:1fr; gap:1.4rem; } }
@media (max-width:980px) {
  .pb-try .mh-try__grid { grid-template-columns:1fr; }
  .pb-try .mh-try__side { position:static; }
}
@media (max-width:700px) {
  .pb-page .marble-rule-card { display:block; padding:1.1rem; }
  .pb-page .marble-rule-card h3 { margin-top:.9rem; padding-right:0; }
  .pb-routine { padding:1.3rem; }
  .pb-routine .marble-routine__steps { grid-template-columns:1fr; gap:1rem; }
  .pb-play { padding:.6rem .3rem; min-height:0; border-radius:14px; }
  .pb-wall { overflow-x:auto; margin-inline:-1rem; padding:0 1rem; }
  .pb-wall img { width:760px; max-width:none; }
}
@media (max-width:640px) {
  .pb-tips { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .pb-c.is-target, .pb-c.is-clue, .pb-end { animation:none; }
}