/* Play & learn shared frame (website only). Paired with nav.js. Every rule is scoped to .kp-* so page styles stay untouched. */
@font-face{font-family:'KP Display';src:url('/learn/assets/bricolage-grotesque.woff2') format('woff2');font-weight:500 800;font-display:swap}
@font-face{font-family:'KP Sans';src:url('/learn/assets/plus-jakarta-sans.woff2') format('woff2');font-weight:400 800;font-display:swap}
:root{--kp-ink:#14110F;--kp-cream:#FFF4DC;--kp-paper:#FFFBF0;--kp-marigold:#F6A91B;--kp-green:#0B3D2E;--kp-focus:#2B2A7A;--kp-tabs-h:62px}

/* hidden until nav.js moves it into the bar (and gone for good if it never runs on the website) */
[data-kp-remove]{display:none!important}
/* kept in the DOM for the page's own script, shown only where nav.js is not loaded (the Android app) */
[data-kp-app-only]{display:none!important}

.kp-top{position:relative;z-index:40;box-sizing:border-box;width:100%;background:var(--kp-cream);border-bottom:3px solid var(--kp-ink);color:var(--kp-ink);font-family:'KP Sans',system-ui,sans-serif}
.kp-top *,.kp-chips *,.kp-tabs *,.kp-finish *{box-sizing:border-box}
.kp-top-in{display:flex;align-items:center;gap:8px;max-width:1180px;min-height:58px;margin:0 auto;padding:6px max(12px,env(safe-area-inset-left)) 6px max(12px,env(safe-area-inset-right))}
.kp-brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-right:6px;color:var(--kp-ink);text-decoration:none;font:800 19px/1 'KP Display',system-ui,sans-serif;letter-spacing:-.02em;white-space:nowrap}
.kp-brand img,.kp-mark img{width:30px;height:30px;object-fit:contain;flex:0 0 30px}
.kp-mark{display:inline-grid;place-items:center;width:40px;height:44px;flex:0 0 40px}
.kp-back{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 14px 0 8px;border:2.5px solid var(--kp-ink);border-radius:999px;background:var(--kp-paper);color:var(--kp-ink);text-decoration:none;font:800 15px/1 'KP Sans',system-ui,sans-serif;box-shadow:2px 3px 0 var(--kp-ink);white-space:nowrap;flex:0 0 auto}
.kp-back:active{transform:translate(2px,3px);box-shadow:0 0 0 var(--kp-ink)}
.kp-back svg,.kp-finish svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.kp-title{flex:1 1 auto;min-width:0;margin:0;text-align:center;font:800 18px/1.1 'KP Display',system-ui,sans-serif;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-sections{display:none;flex:1 1 auto;justify-content:center;gap:6px}
.kp-sections a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:2.5px solid transparent;border-radius:999px;color:var(--kp-ink);text-decoration:none;font:800 16px/1 'KP Sans',system-ui,sans-serif}
.kp-sections a:hover{border-color:var(--kp-ink)}
.kp-sections a[aria-current]{background:var(--kp-marigold);border-color:var(--kp-ink);box-shadow:2px 3px 0 var(--kp-ink)}
.kp-section .kp-actions{margin-left:auto}
.kp-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto;min-width:44px}
.kp-game .kp-actions:empty{visibility:hidden}
.kp-section .kp-actions:empty{min-width:0}
.kp-top .kp-actions>*{display:inline-grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:2.5px solid var(--kp-ink);border-radius:50%;background:var(--kp-paper);color:var(--kp-ink);box-shadow:2px 3px 0 var(--kp-ink);font:800 19px/1 'KP Display',system-ui,sans-serif;text-decoration:none;cursor:pointer;position:static}
.kp-top .kp-actions>[hidden]{display:none}
.kp-top .kp-actions>* svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kp-top .kp-actions>*:active{transform:translate(2px,3px);box-shadow:0 0 0 var(--kp-ink)}
.kp-top a:focus-visible,.kp-top button:focus-visible,.kp-chips a:focus-visible,.kp-chips button:focus-visible,.kp-tabs a:focus-visible,.kp-finish a:focus-visible{outline:3px solid var(--kp-focus);outline-offset:3px}

/* Learn chips */
.kp-chips{position:relative;z-index:39;background:var(--kp-cream);border-bottom:2px solid rgba(20,17,15,.14);font-family:'KP Sans',system-ui,sans-serif}
.kp-chips-in{display:flex;gap:6px;max-width:1180px;margin:0 auto;padding:8px 12px;overflow-x:auto;scrollbar-width:none}
.kp-chips-in::-webkit-scrollbar{display:none}
.kp-chips a,.kp-chips button{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;min-height:40px;margin:0;padding:0 12px;border:2px solid var(--kp-ink);border-radius:999px;background:var(--kp-paper);color:var(--kp-ink);font:700 14px/1 'KP Sans',system-ui,sans-serif;text-decoration:none;cursor:pointer;box-shadow:none}
.kp-chips [aria-current],.kp-chips [aria-pressed="true"]{background:var(--kp-ink);color:var(--kp-cream)}
.kp-chips i{font-style:normal;font-size:12px;min-width:20px;padding:2px 6px;border-radius:999px;background:var(--kp-marigold);color:var(--kp-ink);text-align:center}

/* Bottom bar: phones and small tablets */
.kp-tabs{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(3,1fr);height:calc(var(--kp-tabs-h) + env(safe-area-inset-bottom));padding:0 6px env(safe-area-inset-bottom);background:var(--kp-cream);border-top:3px solid var(--kp-ink);font-family:'KP Sans',system-ui,sans-serif}
.kp-tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;margin:6px 4px;border-radius:16px;color:var(--kp-ink);text-decoration:none;font:800 13px/1.1 'KP Sans',system-ui,sans-serif}
.kp-tabs svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.kp-tabs a[aria-current]{background:var(--kp-marigold);border:2.5px solid var(--kp-ink)}
body[data-kp-framed]{padding-bottom:calc(var(--kp-tabs-h) + env(safe-area-inset-bottom))!important}
/* while a match or the year game is on screen, the game's own toolbar owns the bottom edge */
body[data-kp-framed][data-view="game"],body[data-kp-framed]:has(#gameScreen:not([hidden])){padding-bottom:0!important}
body[data-view="game"] .kp-tabs,body:has(#gameScreen:not([hidden])) .kp-tabs{display:none}

@media (min-width:760px){
  .kp-sections{display:flex}
  .kp-tabs{display:none}
  body[data-kp-framed]{padding-bottom:0!important}
  .kp-chips-in{padding:10px 20px}
  .kp-top-in{padding-left:20px;padding-right:20px}
}
@media (max-width:359px){
  .kp-brand{font-size:17px}
  .kp-title{font-size:16px}
  .kp-back{padding-right:10px}
  .kp-chips-in{padding:8px 8px;gap:5px}.kp-chips a,.kp-chips button{padding:0 9px;font-size:13px}.kp-chips i{min-width:18px;padding:2px 4px}
}

/* Finish panels: Next + Back to section */
.kp-finish{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0;font-family:'KP Sans',system-ui,sans-serif}
.kp-finish a{display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:1 1 200px;min-height:48px;padding:0 16px;border:2.5px solid var(--kp-ink);border-radius:999px;color:var(--kp-ink);text-decoration:none;font:800 15px/1.2 'KP Sans',system-ui,sans-serif;box-shadow:2px 3px 0 var(--kp-ink);text-align:center}
.kp-finish .kp-finish-next{background:var(--kp-marigold)}
.kp-finish .kp-finish-back{background:var(--kp-paper)}

@media (prefers-reduced-motion:reduce){.kp-back:active,.kp-top .kp-actions>*:active{transform:none}}
@media print{.kp-top,.kp-chips,.kp-tabs,.kp-finish{display:none!important}}