body.tiko-game { background:#f4fbf8; color:#3c596b; }
body.tiko-game .site-header,body.tiko-game > footer { display:none; }
body.tiko-game #app { width:min(1100px,calc(100% - 28px)); max-width:1100px; margin:0 auto; padding:0; }
.tk-shell { min-height:100dvh; padding:8px 0 20px; }
.tk-shell * { box-sizing:border-box; letter-spacing:0; }
.tk-shell h1,.tk-shell h2,.tk-shell h3,.tk-shell p { margin-top:0; }.tk-shell h2:focus { outline:none; }
.tk-shell button,.tk-shell .button,.tk-shell summary { min-width:48px; min-height:48px; font:inherit; line-height:1.3; border-radius:6px; }.tk-shell button { cursor:pointer; }.tk-shell button:disabled { cursor:default; }
.tk-shell button:focus-visible,.tk-shell a:focus-visible,.tk-shell input:focus-visible,.tk-shell summary:focus-visible { outline:4px solid #d392b3; outline-offset:3px; }
.tk-shell .tk-primary { padding:11px 18px; font-size:18px; font-weight:750; color:#fff; background:#358c96; border:2px solid #307080; box-shadow:0 3px 0 #35616f; }.tk-shell .tk-primary:hover { background:#267c89; }
.tk-shell .tk-secondary { padding:9px 14px; font-size:16px; color:#5f6e85; background:#fffdf2; border:2px solid #bfcfd4; }
.tk-toolbar { display:grid; grid-template-columns:auto 1fr auto 48px auto; gap:10px; align-items:center; min-height:66px; padding-bottom:8px; }.tk-toolbar h1 { font-family:inherit; font-size:18px; line-height:1.25; margin:0 0 4px; }.tk-toolbar span { font-size:13px; color:#728d94; }
.tk-toolbar .tk-back { color:#79384b; font-size:14px; padding:8px; white-space:nowrap; }.tk-toolbar .tk-sound { width:48px; padding:0; }.tk-motion { display:flex; align-items:center; gap:5px; font-size:13px; }.tk-motion input { width:22px; height:22px; accent-color:#358c96; }
.tk-cover { text-align:center; }.tk-cover > span { display:block; color:#a4844d; font-size:15px; font-weight:700; margin:12px 0 8px; }.tk-cover h2 { font-size:32px; color:#328491; margin:0 0 12px; }.tk-cover p { max-width:850px; margin:0 auto 17px; font-size:19px; line-height:1.45; }
.tk-cover-image { display:block; width:100%; height:auto; }.tk-cover > .tk-cover-image { max-height:440px; object-fit:contain; margin:20px auto 12px; }.card-art .tk-cover-image { width:100%; height:100%; object-fit:contain; background:#edf6ef; }.tk-cover .tk-cover-note { font-size:15px; }
.tk-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:4px 0; }.tk-heading > span { font-size:16px; font-weight:700; color:#a27e43; }.tk-heading h2 { font-family:inherit; font-size:23px; line-height:1.25; margin:0; color:#4f8d98; }.tk-instruction { font-family:inherit; font-size:19px; line-height:1.3; margin:7px 0 9px; min-height:25px; }
.tk-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:16px; align-items:stretch; }.tk-current-room { min-width:0; }
.tk-panel { position:relative; display:grid; grid-template-columns:1fr 1fr 1.35fr; align-items:center; gap:12px; padding:10px 14px; min-height:116px; border:2px solid #bed7cf; background:#fffef4; border-radius:6px; }
.tk-expression,.tk-given,.tk-numeric { text-align:center; min-width:0; }.tk-panel span { display:block; font-size:12px; color:#809594; font-weight:650; margin-bottom:7px; }.tk-expression strong { display:block; font-size:31px; color:#3c7e8e; line-height:1.2; white-space:nowrap; }.tk-given > div { display:flex; align-items:center; justify-content:center; gap:9px; font-size:25px; font-weight:750; color:#847147; }
.tk-shell .tk-value { width:64px; height:60px; font-size:31px; font-weight:800; padding:0; background:#fff0b7; color:#87713d; border:3px solid #d5b45e; box-shadow:0 2px 0 #d6c28d; }.tk-shell .tk-value:disabled { opacity:1; }.tk-numeric strong { display:block; font-size:27px; line-height:1.2; min-height:34px; color:#abb9b6; white-space:nowrap; }.tk-substituted strong { color:#4a8394; }.phase-substitute .tk-value { animation:tk-card-bounce .4s ease-in-out both; }
.tk-room { position:relative; height:265px; margin-top:10px; border:2px solid #b4d1da; border-radius:6px; isolation:isolate; --first:28%; --second:56%; --third:84%; }.tk-room-art { position:absolute; inset:0; width:100%; height:100%; border-radius:5px; z-index:0; }
.tk-portals { position:absolute; z-index:1; inset:12px 23px auto 110px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.tk-shell .tk-portal { position:relative; min-width:0; width:100%; height:190px; padding:14px 5px 8px; border:8px solid var(--portal-edge); border-radius:75px 75px 7px 7px; background:var(--portal-fill); box-shadow:0 4px 0 #aac7ce; opacity:1; }
.portal-0 { --portal-edge:#e1b674; --portal-fill:#fff5d3; --portal-door:#f0d8a1; }.portal-1 { --portal-edge:#79b8ce; --portal-fill:#e7f6f7; --portal-door:#b5dde7; }.portal-2 { --portal-edge:#b59bd0; --portal-fill:#f2e9f7; --portal-door:#d2bde5; }
.tk-portal::before { content:''; position:absolute; inset:53px 8px 6px; border:2px solid var(--portal-edge); border-radius:40px 40px 3px 3px; background:var(--portal-door); transform-origin:center; }
.tk-portal strong { position:relative; z-index:2; display:grid; place-items:center; width:74px; max-width:100%; height:52px; margin:-1px auto 0; background:#fffef4; color:#52687b; border:2px solid var(--portal-edge); border-radius:5px; font-size:32px; font-weight:800; }
.tk-portal-light { position:absolute; top:39px; left:calc(50% - 15px); width:30px; height:5px; background:#fffdf2; z-index:3; }.tk-portal-floor { position:absolute; bottom:-10px; left:-10%; width:120%; height:11px; background:var(--portal-edge); border-radius:5px; opacity:.6; }
.tk-portal-locked strong { color:#8d9eaa; }.tk-shell .tk-portal-correct { border-color:#8cb68c; background:#f0f9d9; }.tk-portal-correct::before { background:#d8edaf; border-color:#a6c68c; transform:scaleX(.14); }.tk-portal-correct .tk-portal-light { background:#c3e895; box-shadow:0 0 8px #c6e8a7; }.tk-shell .tk-portal-tried { outline:3px solid #d3a2b9; outline-offset:2px; }
.tk-scene-robot { position:absolute; z-index:2; bottom:4px; left:10px; width:105px; height:130px; pointer-events:none; }.tk-robot { display:block; width:100%; height:100%; }.tk-flying-module { position:absolute; z-index:4; left:35px; bottom:90px; width:32px; height:40px; animation:tk-module-fly .65s ease-in-out both; pointer-events:none; }.tk-flying-module .tk-module-art { display:block; width:100%; height:100%; }
.phase-walk .tk-scene-robot { animation:tk-room-walk 1s ease-in-out both; }.tk-map-walk { animation:tk-map-walk 1s linear both; }
.tk-sidebar { min-width:0; padding:7px 0 0; }.tk-sidebar h3 { font-family:inherit; margin:0 0 8px; text-align:center; font-size:15px; color:#77939e; }.tk-map { display:block; width:100%; height:auto; background:#edf5f4; border:2px solid #bfd2d6; border-radius:6px; }
.tk-zones { display:flex; flex-direction:column; gap:4px; margin:9px 0 12px; }.tk-zones > span { font-size:11px; padding:5px 7px; border-left:4px solid #d0e1e1; color:#9aadb0; }.tk-zones .tk-zone-current { border-color:#d7b66e; color:#778a82; background:#fff8d9; font-weight:700; }
.tk-energy { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:3px; }.tk-energy > span { display:grid; place-items:center; height:37px; min-width:0; border:1px solid #c7d5d2; background:#f0f5eb; border-radius:4px; font-size:11px; color:#a8b7ad; }.tk-energy .tk-energy-full { background:#fff2bf; border-color:#d9c276; }.tk-energy .tk-module-art { width:22px; height:30px; }.tk-sidebar > p { margin:11px 0 0; font-size:13px; line-height:1.5; color:#869e9f; }
.tk-feedback { min-height:96px; margin:10px 0; padding:8px 12px; display:flex; flex-direction:column; justify-content:center; font-size:18px; line-height:1.4; background:#fffdf2; border:1px solid #d6d9bf; border-left:5px solid #e6c768; border-radius:5px; }.tk-feedback strong { font-size:14px; color:#aa83ab; }.tk-controls { display:flex; align-items:center; justify-content:flex-end; min-height:53px; gap:12px; }.tk-controls > .tk-primary { margin-right:auto; }.tk-help-actions { display:flex; flex-wrap:wrap; gap:8px; }.tk-help-actions button { font-size:16px!important; }.tk-wait { display:flex; align-items:center; min-height:53px; font-size:18px; color:#7e9d92; margin-right:auto; }
.tk-finish { text-align:center; }.tk-finish h2 { font-size:30px; color:#328593; margin:12px 0; }.tk-finish > p { font-size:19px; line-height:1.45; max-width:900px; margin:0 auto 12px; }.tk-final-machine { width:min(780px,100%); margin:0 auto 8px; }.tk-machine { display:block; width:100%; height:auto; }.tk-installed-module { opacity:0; }.tk-module-installed { opacity:1; }.phase-power .tk-module-installed { animation:tk-install .36s ease-out both; animation-delay:var(--module-delay); }.tk-machine-on .tk-machine-pattern { animation:tk-pattern 3s ease-in-out infinite alternate; }.tk-machine-on .tk-gears { animation:tk-gear 12s linear infinite; transform-box:fill-box; transform-origin:center; }
.tk-finish .tk-final-rule { font-size:18px; font-weight:650; color:#897c91; }.tk-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0; }.tk-stats > div { display:flex; gap:12px; align-items:center; background:#fffdf3; border:1px solid #c4d7d5; border-radius:6px; padding:12px; text-align:left; }.tk-stats strong { font-size:33px; color:#388a95; }.tk-stats span { font-size:15px; line-height:1.4; }.tk-finish-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:17px 0; }.tk-finish details { max-width:850px; margin:14px auto; font-size:18px; line-height:1.5; text-align:left; }.tk-finish summary { padding:10px; cursor:pointer; }.tk-finish details p { padding:0 10px; }
.tk-help { width:min(610px,calc(100% - 24px)); max-height:calc(100dvh - 24px); overflow-y:auto; padding:24px; background:#fffdf3; color:#3c596b; border:2px solid #b0cbd2; border-radius:8px; font-size:18px; line-height:1.5; }.tk-help h2 { font-size:25px; }.tk-help::backdrop { background:#44647788; }
@keyframes tk-card-bounce { 50% { transform:translateY(-9px); box-shadow:0 0 0 5px #eed57e44; } }
@keyframes tk-module-fly { from { transform:translate(0,0) scale(.7); opacity:0; } 40% { opacity:1; } to { transform:translate(80px,-80px) scale(.6); opacity:0; } }
@keyframes tk-map-walk { to { transform:translate(var(--dx),var(--dy)); } }
@keyframes tk-room-walk { to { left:var(--gate-left); transform:translate(-50%,-65px) scale(.55); opacity:.7; } }
@keyframes tk-install { from { opacity:0; transform:translateY(-18px); } to { opacity:1; transform:translateY(0); } }
@keyframes tk-pattern { to { stroke:#c7a1d0; } }
@keyframes tk-gear { to { transform:rotate(360deg); } }
.tk-paused * { animation:none!important; transition:none!important; }
@media (min-width:901px) and (max-height:760px) { .tk-shell { padding-top:4px; }.tk-toolbar { min-height:60px; }.tk-panel { min-height:106px; padding:7px 12px; }.tk-room { height:244px; margin-top:8px; }.tk-shell .tk-portal { height:178px; }.tk-scene-robot { height:120px; width:98px; }.tk-feedback { min-height:88px; margin:8px 0; } }
@media (max-width:1050px) { .tk-toolbar { grid-template-columns:auto 1fr auto 48px; }.tk-motion { grid-column:1/-1; justify-self:end; }.tk-layout { grid-template-columns:minmax(0,1fr) 220px; gap:12px; }.tk-panel { gap:6px; padding:9px; }.tk-expression strong { font-size:27px; }.tk-numeric strong { font-size:23px; }.tk-portals { left:65px; right:14px; gap:9px; }.tk-shell .tk-portal { border-width:6px; }.tk-portal strong { font-size:29px; width:62px; }.tk-scene-robot { width:86px; height:110px; }.tk-energy { grid-template-columns:repeat(9,minmax(0,1fr)); gap:2px; }.tk-energy .tk-module-art { width:18px; height:26px; }.tk-sidebar > p { font-size:12px; } }
@media (max-width:800px) { .tk-layout { display:flex; flex-direction:column; }.tk-current-room { order:0; }.tk-sidebar { order:1; display:grid; grid-template-columns:1fr 1fr; gap:7px 14px; padding:0; }.tk-sidebar h3 { grid-column:1; margin:0; }.tk-map { grid-column:1; grid-row:2/5; }.tk-zones { grid-column:2; grid-row:1/3; margin:0; }.tk-energy { grid-column:2; grid-row:3; }.tk-sidebar > p { grid-column:2; grid-row:4; margin:0; }.tk-panel { grid-template-columns:1fr 1fr 1.25fr; }.tk-portals { left:110px; right:30px; gap:15px; }.tk-room { height:245px; }.tk-shell .tk-portal { height:175px; border-width:8px; }.tk-scene-robot { width:102px; height:125px; }.tk-feedback { min-height:110px; } }
@media (max-width:600px) { body.tiko-game #app { width:calc(100% - 14px); }.tk-toolbar { grid-template-columns:1fr auto 48px; gap:7px; }.tk-toolbar > div { grid-column:1/-1; grid-row:1; }.tk-toolbar h1 { font-size:18px; }.tk-toolbar .tk-back { grid-row:2; }.tk-toolbar [data-tk-action="help"] { grid-column:2; grid-row:2; }.tk-toolbar .tk-sound { grid-column:3; grid-row:2; }.tk-motion { grid-column:1/-1; justify-self:start; margin:2px 0 5px; }.tk-heading { flex-direction:column; align-items:start; gap:5px; }.tk-heading h2 { font-size:23px; }.tk-heading > span { font-size:14px; }.tk-instruction { font-size:18px; min-height:46px; }.tk-layout { display:contents; }.tk-play { display:flex; flex-direction:column; }.tk-heading { order:0; }.tk-instruction { order:1; }.tk-current-room { order:2; }.tk-feedback { order:3; }.tk-controls { order:4; }.tk-sidebar { order:5; margin-top:16px; grid-template-columns:1fr; gap:7px; }.tk-sidebar h3 { grid-column:1; }.tk-map { grid-column:1; grid-row:auto; max-width:310px; margin:auto; }.tk-zones { grid-column:1; grid-row:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }.tk-zones > span { padding:4px; font-size:10px; }.tk-energy { grid-column:1; grid-row:auto; }.tk-sidebar > p { grid-column:1; grid-row:auto; font-size:12px; text-align:center; }.tk-panel { grid-template-columns:1fr 1fr; gap:7px 10px; padding:8px 10px; }.tk-expression strong { font-size:30px; }.tk-given > div { font-size:23px; }.tk-shell .tk-value { width:60px; height:56px; font-size:29px; }.tk-numeric { grid-column:1/-1; padding-top:6px; border-top:1px dashed #d3e1d6; }.tk-panel span { margin-bottom:4px; font-size:11px; }.tk-numeric strong { font-size:26px; }.tk-numeric > span { display:none; }.tk-room { height:240px; margin-top:8px; --first:18%; --second:50%; --third:82%; }.tk-portals { inset:13px 13px auto; gap:12px; }.tk-shell .tk-portal { height:151px; border-width:6px; padding:12px 2px 6px; border-top-left-radius:55px; border-top-right-radius:55px; }.tk-portal strong { font-size:27px; width:58px; height:49px; }.tk-portal::before { inset:50px 3px 4px; }.tk-portal-light { top:37px; }.tk-scene-robot { width:79px; height:97px; left:10px; bottom:1px; }.tk-feedback { min-height:132px; font-size:17px; }.tk-controls { justify-content:start; flex-wrap:wrap; }.tk-controls > .tk-primary { width:100%; }.tk-help-actions button { font-size:16px!important; }.tk-cover h2 { font-size:28px; }.tk-cover p { font-size:17px; }.tk-cover .tk-cover-note { font-size:14px; }.tk-finish h2 { font-size:27px; }.tk-finish > p { font-size:17px; }.tk-stats { grid-template-columns:1fr; gap:7px; }.tk-finish-actions { flex-direction:column; }.tk-finish-actions > * { width:100%; }.tk-finish details { font-size:17px; } }
@media (prefers-reduced-motion:reduce) { .tk-shell * { animation:none!important; transition:none!important; } }
.tk-panel .tk-substitution-chip { position:absolute; top:40%; left:50%; margin:0; width:48px; height:48px; display:grid; place-items:center; background:#fff0b7; border:2px solid #d5b45e; border-radius:5px; color:#87713d; font-size:27px; font-weight:800; pointer-events:none; z-index:4; animation:tk-substitute .4s ease-in-out both; }
@keyframes tk-substitute { from { left:50%; opacity:.8; } to { left:14%; opacity:0; } }
.tk-numeric { position:relative; }
.tk-substituted::before { content:'→'; position:absolute; left:-9px; top:37px; color:#b4a674; font-size:25px; line-height:1; }
@media (max-width:600px) { .tk-substituted::before { left:9px; top:9px; } }