/* SciSim Math Games — shared interactive layer (served as /play/_shared.css). Kit 2026-11-08.
   Only interactive chrome lives here: toolbar buttons, light theme, full-screen mode, demo hand, share menu.
   Page text, titles and schema are always in each game's own HTML (RULES §1e SEO-15). */
html[data-theme="light"]{--bg:#f4f6fb;--bg-soft:#ffffff;--bg-card:#ffffff;--line:#d6dbef;--txt:#141a33;--txt-mute:#4d5675;--acc:#8a5f00;--acc-fill:#c48a00;--blue:#0369a1;--green:#15803d;--red:#b91c1c;--purple:#7e22ce;--orange:#c2410c;--cell:#eef1fb;--cell-txt:#2b3358;--ok-bg:#bbf7d0;--ok-txt:#064e3b;--warn-bg:#fde68a;--warn-txt:#5a3d00;--bad-bg:#fecaca;--bad-txt:#6b0f0f}
html[data-theme="light"] .btn2,html[data-theme="light"] .keys button,html[data-theme="light"] .cbtn button{background:#eef1fb;border-color:#c9cfe8;color:#141a33}
html[data-theme="light"] .btn2.go,html[data-theme="light"] .keys button.ok{background:#15803d;color:#fff;border-color:#15803d}
html[data-theme="light"] .seg button[aria-pressed="true"]{background:#141a33;color:#fff}
html[data-theme="light"] .tabs button[aria-pressed="true"],html[data-theme="light"] .tabs button[aria-selected="true"]{background:#fff7d6;border-color:#c48a00}
html[data-theme="light"] .tabs button,html[data-theme="light"] .panel,html[data-theme="light"] .qcard,html[data-theme="light"] .boardwrap,html[data-theme="light"] .stage,html[data-theme="light"] .tile,html[data-theme="light"] .col{box-shadow:0 1px 2px rgba(20,26,51,.06)}
html[data-theme="light"] .btn2.right{background:#bbf7d0;border-color:#15803d;color:#064e3b}
html[data-theme="light"] .btn2.wrong{background:#fecaca;border-color:#b91c1c;color:#6b0f0f}
html[data-theme="light"] .skip b{background:#8a5f00;color:#fff}
html[data-theme="light"] .fact .ans{color:#8a5f00;border-color:#c48a00}
html[data-theme="light"] #msg.ok,html[data-theme="light"] .fb.ok{color:#15803d}
html[data-theme="light"] #msg.bad,html[data-theme="light"] .fb.bad{color:#c2410c}
html[data-theme="light"] #msg.info,html[data-theme="light"] .fb.info{color:#0369a1}
/* toolbar buttons appended to .bar */
.pk-btn{background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-weight:700;font-size:14px;min-height:40px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--txt)}
.pk-btn[aria-pressed="true"]{border-color:var(--acc);color:var(--acc)}
.pk-btn .pk-l{display:inline}
@media (max-width:640px){.pk-btn .pk-l{display:none}.pk-btn{padding:7px 10px;min-width:44px;justify-content:center}}
/* full-screen / focus mode */
html.pk-fs #scisim-breadcrumb-bar,html.pk-fs .hero,html.pk-fs .learn,html.pk-fs footer,html.pk-fs .play-kit{display:none!important}
html.pk-fs .wrap{max-width:none;padding:0 12px}
html.pk-fs .boardwrap{max-height:calc(100vh - 150px)}
html.pk-fs body{overflow:hidden}
/* demo hand + bubble */
.pk-hand{position:fixed;left:50%;top:50%;z-index:9999;font-size:36px;line-height:1;pointer-events:none;transform:translate(-30%,-10%);transition:left .55s ease,top .55s ease;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.pk-hand.pk-tap{animation:pkTap .35s}
@keyframes pkTap{0%{transform:translate(-30%,-10%) scale(1)}50%{transform:translate(-30%,-10%) scale(.78)}100%{transform:translate(-30%,-10%) scale(1)}}
.pk-bubble{position:fixed;z-index:9999;background:var(--acc);color:#1a1a2e;font-weight:800;border-radius:999px;padding:8px 16px;font-size:16px;box-shadow:0 6px 18px rgba(0,0,0,.35);pointer-events:none;animation:pkPop .3s}
@keyframes pkPop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.pk-skip{position:fixed;right:14px;bottom:14px;z-index:9999;background:var(--bg-card);color:var(--txt);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:700;cursor:pointer;min-height:40px}
.pk-dim{outline:3px solid var(--acc);outline-offset:2px;border-radius:10px}
/* share menu */
.pk-wrap{position:relative;display:inline-block}
.pk-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:100;background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:10px;min-width:240px;box-shadow:0 12px 30px rgba(0,0,0,.4);display:none;text-align:left}
.pk-pop[data-open="1"]{display:block}
.pk-pop a,.pk-pop button{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;border-radius:10px;padding:10px;font-weight:600;color:var(--txt);text-decoration:none;min-height:44px;text-align:left;cursor:pointer;font-size:14px}
.pk-pop a:hover,.pk-pop button:hover{background:var(--bg-soft)}
.pk-pop img{display:block;width:150px;height:150px;margin:6px auto;border-radius:8px;background:#fff;padding:6px}
.pk-pop .pk-done{color:var(--green)}
.pk-gc{width:18px;height:18px;flex:none}
@media (prefers-reduced-motion:reduce){.pk-hand,.pk-bubble{transition:none;animation:none}}
/* text block injected by inject.py (SEO/AEO content lives in the HTML; this is only its look) */
.play-kit .qa{background:var(--bg-card);border:1px solid var(--line);border-left:5px solid var(--acc);border-radius:14px;padding:12px 16px;margin:0 0 14px}
.play-kit .qa h2{margin:0 0 6px;font-size:20px}
.play-kit .qa .answer{font-size:17px;color:var(--txt);margin:0 0 8px}
.play-kit .qa ul{margin:4px 0 8px 18px;padding:0}
.play-kit .qa li{color:var(--txt)}
.play-kit .modes a{color:var(--blue);font-weight:600;text-decoration:none}
.play-kit .modes a:hover{text-decoration:underline}
.play-kit figure.shot{margin:0 0 16px;background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:8px}
.play-kit figure.shot img{display:block;width:100%;height:auto;border-radius:8px}
.play-kit figcaption{font-size:13px;color:var(--txt-mute);padding:6px 4px 0}
.play-kit .kfact{background:var(--bg-soft);border:1px dashed var(--line);border-radius:10px;padding:8px 12px;color:var(--txt)}
.play-kit .kfact .src{color:var(--txt-mute);font-size:13px}
.play-kit .kfact a{color:var(--blue)}
.play-kit .ex{color:var(--txt)}
.play-kit a.try{display:inline-block;background:var(--bg-card);border:2px solid var(--line);border-radius:999px;padding:6px 14px;color:var(--acc);font-weight:700;text-decoration:none;min-height:40px;line-height:26px}
.play-kit a.try:hover{border-color:var(--acc)}
.play-kit ol.steps li{color:var(--txt);margin:4px 0}
.play-kit details.teachers{border-left:5px solid var(--green)}
.play-kit .standards code{background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:13px}
.play-kit .related a,.play-kit .science a{color:var(--blue);font-weight:600}
.play-kit .dates{font-size:13px;color:var(--txt-mute)}
.play-kit .dates a{color:var(--txt-mute)}