/* Inherit each site's palette and typography. No logos, badges or extra controls. */
#jcorp-footer { box-sizing: border-box; position: relative; margin: 2rem auto 0; padding: .6rem max(12px, env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left)); width: 100%; max-width: 1100px; border: 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); background: transparent; color: inherit; font-family: inherit; font-size: 12px; font-weight: 400; line-height: 1.5; }
#jcorp-footer nav { touch-action: pan-x; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .15rem 1.15rem; padding: 0; margin: 0; border: 0; background: transparent; }
#jcorp-footer a { display: inline-block; padding: .25rem 0; color: inherit; opacity: .75; text-decoration: none; white-space: nowrap; line-height: 1.5; font: inherit; touch-action: manipulation; }
#jcorp-footer a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
#jcorp-footer a:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 3px; }
body[data-jcorp-site="portfolio"] #jcorp-footer { margin-bottom: 5rem; font-family: 'Raleway', sans-serif; }
/* Full-screen canvases keep the footer outside their input and rendering area. */
body[data-jcorp-site] { --jcorp-footer-height: calc(38px + env(safe-area-inset-bottom, 0px)); }
body[data-jcorp-site]:has(> #stage, > .shell, > .app, > .stage) #jcorp-footer {
  position: fixed; bottom: 0; left: 0; right: 0; max-width: none; margin: 0; height: var(--jcorp-footer-height); padding-top: 5px; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--bg, #0e1119); z-index: 10;
}
body[data-jcorp-site]:has(> #stage, > .shell, > .app, > .stage) #jcorp-footer nav { flex-wrap: nowrap; overflow-x: auto; justify-content: safe center; gap: 14px; }
body[data-jcorp-site] > :is(#stage, .shell, .stage) { bottom: var(--jcorp-footer-height); }
body[data-jcorp-site] > .app { height: calc(100dvh - var(--jcorp-footer-height)); }
body[data-jcorp-site="tetris"] #jcorp-footer, body[data-jcorp-site="snake"] #jcorp-footer, body[data-jcorp-site="mines"] #jcorp-footer { color: #aab3c5; font-family: system-ui, sans-serif; }
body[data-jcorp-site="taks"] #jcorp-footer { margin-bottom: calc(var(--nav-height) + 1rem); }
/* Keep sparse, ordinary pages tall enough to put navigation below their content. */
body[data-jcorp-site="store"] > #app { min-height: calc(100dvh - 90px); }
/* Install button: touch devices in a browser tab, on pages that link a web app manifest. */
#jcorp-install { box-sizing: border-box; margin: 0; padding: .1rem .65rem; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 999px; background: transparent; color: inherit; font: inherit; line-height: 1.5; white-space: nowrap; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#jcorp-install:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* !important outranks the sites' own `[hidden] { display: none !important }` resets. */
@media (hover: none) and (pointer: coarse) and (display-mode: browser) { html:has(link[rel~="manifest"]) #jcorp-footer #jcorp-install { display: inline-block !important; } }
#jcorp-install-help { box-sizing: border-box; position: fixed; inset: auto max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left)); width: auto; max-width: 360px; height: auto; margin: 0 auto; padding: 14px 16px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 12px; color: inherit; font: inherit; font-size: 15px; line-height: 1.45; text-align: left; box-shadow: 0 10px 32px rgb(0 0 0 / .35); }
#jcorp-install-help::backdrop { background: rgb(0 0 0 / .25); }
#jcorp-install-help p { margin: 0 0 12px; }
#jcorp-install-help button { display: block; margin-left: auto; padding: .3rem 1rem; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
/* Feedback buttons: icons in the footer row. The label is the accessible name; it is clipped
   until hover or keyboard focus, then shows above the footer, right-aligned to its icon. The
   footer is its containing block, so a scrolling footer row (fixed game footers) does not clip it. */
#jcorp-footer nav { position: static; }
#jcorp-footer .jcorp-feedback { position: static; display: inline-block; box-sizing: content-box; width: 15px; height: 15px; margin: 0; padding: .25rem .1rem; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; line-height: 0; text-align: left; vertical-align: middle; opacity: .75; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#jcorp-footer .jcorp-feedback svg { display: block; width: 15px; height: 15px; margin: 0; pointer-events: none; }
#jcorp-footer .jcorp-feedback:hover, #jcorp-footer .jcorp-feedback:focus-visible { opacity: 1; }
#jcorp-footer .jcorp-feedback:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
#jcorp-footer .jcorp-feedback span { position: absolute; bottom: calc(100% + 4px); width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
#jcorp-footer .jcorp-feedback:focus-visible span { width: auto; height: auto; overflow: visible; clip-path: none; padding: 2px 8px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 6px; background: var(--jcorp-footer-bg, transparent); font-size: 12px; line-height: 1.5; transform: translateX(calc(-100% + 15px + .1rem)); }
@media (hover: hover) { #jcorp-footer .jcorp-feedback:hover span { width: auto; height: auto; overflow: visible; clip-path: none; padding: 2px 8px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 6px; background: var(--jcorp-footer-bg, transparent); font-size: 12px; line-height: 1.5; transform: translateX(calc(-100% + 15px + .1rem)); } }
/* The form opened by a feedback button (feedback.js). Its background is sampled like the install help. */
#jcorp-footer .jcorp-feedback-dialog { box-sizing: border-box; position: fixed; width: min(440px, calc(100vw - 24px)); max-width: none; height: fit-content; max-height: calc(100dvh - 24px); margin: auto; padding: 14px 16px; overflow: auto; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 12px; color: inherit; font: inherit; font-size: 15px; font-weight: 400; line-height: 1.45; text-align: left; box-shadow: 0 10px 32px rgb(0 0 0 / .35); }
#jcorp-footer .jcorp-feedback-dialog::backdrop { background: rgb(0 0 0 / .25); }
@media (pointer: coarse) { #jcorp-footer .jcorp-feedback-dialog { inset: max(12px, env(safe-area-inset-top)) 0 auto; } }
#jcorp-footer .jcorp-feedback-dialog form { display: block; margin: 0; padding: 0; border: 0; background: transparent; }
#jcorp-footer .jcorp-feedback-dialog label { display: block; margin: 0 0 8px; padding: 0; color: inherit; font: inherit; font-weight: 600; }
#jcorp-footer .jcorp-feedback-dialog textarea { box-sizing: border-box; display: block; width: 100%; min-height: 8.5em; margin: 0; padding: 8px 10px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 16px; line-height: 1.4; resize: vertical; box-shadow: none; }
#jcorp-footer .jcorp-feedback-dialog textarea:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
#jcorp-footer .jcorp-feedback-dialog p { margin: 8px 0 0; padding: 0; font: inherit; font-size: 13px; opacity: .8; }
#jcorp-footer .jcorp-feedback-dialog .jcorp-feedback-status { opacity: 1; font-size: 14px; }
#jcorp-footer .jcorp-feedback-dialog .jcorp-feedback-status:empty { display: none; }
#jcorp-footer .jcorp-feedback-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 12px 0 0; padding: 0; }
#jcorp-footer .jcorp-feedback-actions button { display: inline-block; width: auto; height: auto; margin: 0; padding: .3rem 1rem; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 14px; line-height: 1.5; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; }
#jcorp-footer .jcorp-feedback-actions button[type="submit"] { border-color: currentColor; font-weight: 600; }
#jcorp-footer .jcorp-feedback-actions button:disabled { opacity: .5; cursor: progress; }
#jcorp-footer .jcorp-feedback-actions button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 420px) { #jcorp-footer nav { column-gap: 12px; } #jcorp-footer { font-size: 11px; } }
@media print { #jcorp-footer { display: none; } }
body[data-jcorp-site="arcade"][data-jcorp-path^="/sundown/"] #jcorp-footer { position: fixed; inset: auto 0 0; max-width: none; height: var(--jcorp-footer-height); margin: 0; padding-block: 5px env(safe-area-inset-bottom, 0px); z-index: 90; background: #0c091d; color: #b9b0d8; font-family: system-ui, sans-serif; }
body[data-jcorp-site="arcade"][data-jcorp-path^="/sundown/"] #jcorp-footer nav { flex-wrap: nowrap; overflow-x: auto; justify-content: safe center; }
body[data-jcorp-site="arcade"][data-jcorp-path^="/sundown/"] :is(#game, .sr-ui) { bottom: var(--jcorp-footer-height) !important; height: calc(100% - var(--jcorp-footer-height)) !important; }