/* PIXEL SKIN — per-screen touches (home, path, box, test, me, teacher, tools). Loaded after pixel-ui.css. */

/* ---- page end: grass ledge + soil band holding the footer. Painted on <body> (bottom layers) so it is full-bleed with no overflow ---- */
html[data-skin=pixel] { --px-ground: 136px; }
html[data-skin=pixel] body { padding-bottom: 0; background:
  var(--px-grass) 0 calc(100% - var(--px-ground) + 24px) / 48px 24px repeat-x,
  repeating-linear-gradient(180deg, #8A4526 0 24px, #7A3D22 24px 48px) 0 100% / 100% calc(var(--px-ground) - 24px) no-repeat,
  var(--px-sky) fixed; }
html[data-skin=pixel] .foot { box-sizing: border-box; min-height: var(--px-ground); margin-top: 48px; padding: 52px 0 24px; color: #F6E7D6; }
html[data-skin=pixel] .foot::before { content: none; }
html[data-skin=pixel] .foot i { color: #FFFFFF; }
@media (max-width: 820px) { html[data-skin=pixel] body.has-shell { --px-ground: 248px; } html[data-skin=pixel] body.has-shell .foot { padding-bottom: 112px; } }

/* ---- decoration cubes become voxel blocks (sit lower, never over text) ---- */
html[data-skin=pixel] .cube { background-size: 80%; background-position: center bottom; }
html[data-skin=pixel] .head-cube { top: 88px; }

/* ---- top bar extras ---- */
html[data-skin=pixel] .app-nav .btn { background: #FFFFFF; color: #10233F; box-shadow: inset 0 0 0 3px var(--px-bar-edge), inset 0 -6px 0 0 #D6E6F8; }
html[data-skin=pixel] .app-nav .brand-mark { box-shadow: inset 0 0 0 3px var(--px-bar-edge), inset 0 6px 0 0 #6FB6FF; }

/* ---- home ---- */
html[data-skin=pixel] .pl-name { font: 600 28px/1.1 var(--px-font); -webkit-font-smoothing: none; }
html[data-skin=pixel] .qh { font-size: 24px; }
html[data-skin=pixel] .chart svg path:first-of-type { shape-rendering: crispEdges; }
html[data-skin=pixel] .card.continue .eyebrow { color: var(--bp-tint-ink); }
html[data-skin=pixel] .chest { border-width: 3px; }
html[data-skin=pixel] .chest.ready { border-color: #8F5A00; }

/* ---- path / island ---- */
html[data-skin=pixel] .isl-head { margin: 19px 3px 11px; }
html[data-skin=pixel] .pcard .pt { font-weight: 650; }
html[data-skin=pixel] .pnode a.pnode-link:focus-visible { outline: 3px solid var(--bp-focus); outline-offset: 2px; }

/* ---- box page: mission panel; study column stays paper ---- */
html[data-skin=pixel] .boxgrid .side { top: 100px; }
html[data-skin=pixel] .sol, html[data-skin=pixel] .hint { box-shadow: inset 3px 0 0 0 currentColor; clip-path: none; }
html[data-skin=pixel] .sol { box-shadow: inset 3px 0 0 0 var(--px-line-2); }
html[data-skin=pixel] .keypad button { clip-path: var(--px-notch); box-shadow: inset 0 0 0 2px var(--px-line-2), inset 0 -5px 0 0 var(--px-lo); }
html[data-skin=pixel] .keypad button:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--px-line-2), inset 0 -2px 0 0 var(--px-lo); }
html[data-skin=pixel] .tool-btn { border: 0; clip-path: var(--px-notch); box-shadow: inset 0 0 0 2px var(--px-line-2), inset 0 -5px 0 0 var(--px-lo); background: var(--bp-paper); }
html[data-skin=pixel] .tool-btn[aria-pressed="true"], html[data-skin=pixel] .tool-btn[aria-expanded="true"] { background: var(--bp-tint-soft); box-shadow: inset 0 0 0 2px var(--bp-tint), inset 0 -5px 0 0 color-mix(in srgb, var(--bp-tint) 30%, var(--bp-tint-soft)); }
html[data-skin=pixel] .tool-btn:focus-visible { clip-path: none; outline: 3px solid var(--bp-focus); outline-offset: 2px; }
html[data-skin=pixel] .tool-host { overflow: visible; }
html[data-skin=pixel] .tool-head { background: var(--bp-paper-2); border-bottom: 3px solid var(--px-line); }
html[data-skin=pixel] .sym-key { border: 0; box-shadow: inset 0 0 0 2px var(--px-line-2), inset 0 -4px 0 0 var(--px-lo); clip-path: var(--px-notch-2); }
html[data-skin=pixel] .kp-dock { --pf: var(--px-line); }

/* ---- test: info bar is a HUD strip; timer chip in pixel numbers ---- */
html[data-skin=pixel] .infobar { padding: 6px 8px 6px 14px; margin: 9px 3px 13px; }
html[data-skin=pixel] .infobar .pill { font-size: 16px; }

/* ---- me / customiser ---- */
html[data-skin=pixel] .me-stage { margin: 3px; }
html[data-skin=pixel] .me-tabs { gap: 4px; }

/* ---- teacher ---- */
html[data-skin=pixel] .stat-strip > div { background: var(--bp-paper-2); clip-path: var(--px-notch); box-shadow: inset 0 -3px 0 0 var(--px-lo); padding: 10px 12px; }
html[data-skin=pixel] .page-head .title .badge3d { flex: none; }

/* ---- dialogs ---- */
html[data-skin=pixel] .settings-sheet > h2, html[data-skin=pixel] dialog.sheet > h2 { font: 600 24px/1.2 var(--px-font); -webkit-font-smoothing: none; }

html[data-skin=pixel] .pnode.is-locked .pcard { --pf: var(--px-line-2); box-shadow: 0 -3px 0 0 var(--pf), 0 3px 0 0 var(--pf), -3px 0 0 0 var(--pf), 3px 0 0 0 var(--pf); }
/* short pages: push the ground (and footer) to the bottom of the viewport */
html[data-skin=pixel] main { min-height: calc(100vh - 80px - 48px - var(--px-ground)); }