*{box-sizing:border-box}:root{color-scheme:dark;font-family:"Yu Gothic",Arial,sans-serif;color:#e9edf8;background:#090d17}html,body{margin:0;width:100%;height:100%}body{display:flex;justify-content:center;background:radial-gradient(ellipse at 50% 43%,#202344 0,#11172b 38%,#080c17 76%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}button:focus-visible,a:focus-visible{outline:3px solid #91eadf;outline-offset:5px}button:disabled{cursor:default}button:active:not(:disabled){transform:scale(.96)}
.app{--rail:58px;--board:min(344px,calc(100vw - 32px),calc(100svh - 328px));width:100%;max-width:460px;height:100svh;height:100dvh;min-height:0;padding:env(safe-area-inset-top,0px) 16px env(safe-area-inset-bottom,0px);position:relative;display:grid;grid-template-rows:88px minmax(0,1fr) 48px}
.topbar{display:flex;align-items:center;padding:0 8px}.brand{font-size:42px;font-weight:800;letter-spacing:.16em;color:#e9f2fb;text-decoration:none}.skills{position:absolute;right:20px;top:calc(18px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:12px;z-index:2}.skill{position:relative;display:grid;place-items:center;width:var(--rail);height:var(--rail);flex-shrink:0;border:0;border-radius:9px;background:linear-gradient(145deg,#30374f,#212940);box-shadow:0 6px 18px #0002;overflow:hidden;padding:0;color:#cad5ec;user-select:none}.skill.active{background:linear-gradient(145deg,#19464b,#193139);color:#91e8df}.symbol{width:54px;height:54px;pointer-events:none}.lock{position:absolute;width:32px;height:40px;left:calc(50% - 16px);top:calc(50% - 20px);filter:drop-shadow(0 2px 4px #101426);pointer-events:none}.lock path,.lock rect{fill:#38445f;stroke:#d4daed;stroke-width:1.5}.lock circle{fill:#131d31}.secret{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 3px;font-size:18px;color:#b8c1d9}
.workspace{width:100%;min-height:0;display:grid;grid-template-rows:56px var(--board) 142px;gap:12px;align-content:center;justify-items:center;padding-top:12px}.task{display:grid;place-items:center;width:100%;padding:0 70px}.task h1{margin:0;font-size:29px;font-weight:500;letter-spacing:.12em;white-space:nowrap}.board{width:var(--board);height:var(--board);position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;grid-template-rows:48px minmax(0,1fr) 48px;gap:4px}.picture{grid-area:2/2;align-self:stretch;justify-self:stretch;width:100%;height:100%;aspect-ratio:1;padding:0;border:0;border-radius:7px;background:#afc8da;box-shadow:0 20px 65px #5266b01c,0 5px 18px #0004,inset 0 2px 2px #fff5;transition:filter .15s,transform .15s}.picture:hover:not(:disabled){filter:brightness(1.08)}.picture:active:not(:disabled){background:#afc8da;transform:scale(.975)}.picture:disabled{opacity:.65}.arrow{width:48px;height:48px;display:grid;place-items:center;align-self:center;justify-self:center;border:0;background:transparent;color:#add0df;border-radius:12px;padding:0}.arrow svg{width:46px;height:46px;pointer-events:none}.arrow:hover{background:#ffffff09;color:#c2fff1}.left{grid-area:2/1}.right{grid-area:2/3}.up{grid-area:1/2}.down{grid-area:3/2}
.input-panel{width:min(100%,312px);height:142px}.input-panel form{margin:0}#sequence{height:44px;display:flex;align-items:center;justify-content:safe center;gap:8px;overflow-x:auto;overflow-y:hidden;padding:4px 0;scrollbar-width:thin}.token{display:block;flex:0 0 32px;width:32px;height:32px;background:linear-gradient(140deg,#d5d6f5,#83c6d0);border:0;border-radius:4px;box-shadow:inset 0 1px 0 #ffffff33;animation:token-in .15s ease;user-select:none}.input-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.input-actions button{height:50px;border:0;border-radius:7px;background:#25304a;color:#d3dcee;font-size:14px}.input-actions #submit{background:linear-gradient(110deg,#8be5dc,#9bbfe8);color:#102e35;font-weight:700}.input-actions button:hover:not(:disabled){filter:brightness(1.1)}.input-actions button:disabled{background:#182237;color:#52617c;opacity:1}#message{height:18px;margin:10px 0 0;text-align:center;font-size:11px;line-height:18px;color:#a7b6ca}
.app>footer{display:flex;justify-content:center;align-items:center;gap:24px}.app>footer button{border:0;background:none;color:#8191af;padding:10px;font-size:11px}dialog{background:#19243b;color:#e9edf8;border:0;border-radius:20px;padding:28px;width:min(400px,calc(100% - 40px));box-shadow:0 30px 100px #0007}dialog::backdrop{background:#060a14c9;backdrop-filter:blur(8px)}dialog h2{font-size:23px;font-weight:500}dialog p{font-size:13px;line-height:1.8;color:#a9b7cf}dialog button{border:0;background:#30435b;color:#e6eff7;border-radius:9px;padding:12px 18px;margin:5px 8px 0 0}@keyframes token-in{from{opacity:.3;transform:scale(.75)}to{opacity:1;transform:none}}[hidden]{display:none!important}
@media(max-height:720px){.app{--rail:52px;--board:min(320px,calc(100vw - 32px),calc(100svh - 310px));grid-template-rows:76px minmax(0,1fr) 40px}.workspace{gap:12px;padding-top:8px}.skills{gap:10px;top:14px}.symbol{width:49px;height:49px}.brand{font-size:32px}}
@media(max-width:350px){.app{padding-left:12px;padding-right:12px;--rail:50px}.skills{right:14px}.brand{font-size:31px}.task h1{font-size:26px}.secret{font-size:16px;padding:0 2px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media(max-height:600px){.app{--board:min(300px,calc(100vw - 24px),calc(100svh - 306px));grid-template-rows:64px minmax(0,1fr) 44px}.workspace{grid-template-rows:40px var(--board) 132px;gap:8px;padding-top:0}.input-panel{height:132px}.input-actions{margin-top:8px}.task h1{font-size:25px}.brand{font-size:30px}.skills{top:10px;gap:8px}}
@media(max-height:480px){body{overflow-y:auto}.app{height:480px;min-height:480px;--board:186px}}

/* Three visible slots; only unlocked skills are switches. */
.skill.dormant .symbol,.skill.dormant .secret{visibility:hidden}.skill:disabled{opacity:1}.skill.unlocked:not(.active){background:#242b3a;color:#718093;box-shadow:none}.skill.unlocked .secret{color:inherit}.secret{font-size:16px;padding:0 3px;gap:0;user-select:none}.brand{cursor:default;user-select:none}.picture{width:calc(100% - 24px);height:calc(100% - 24px);align-self:center;justify-self:center;box-shadow:0 12px 35px #0003;transition:transform .15s}.picture:hover:not(:disabled){filter:none}.token{background:#afc8da;box-shadow:none}

/* Lift the prompt and board together; keep the input controls anchored. */
.task,.board{position:relative;top:-18px}
.picture{background:#afc8da;box-shadow:0 0 20px #afdbef24,0 0 52px #8ed8e61c,0 10px 30px #0002}
.picture:hover:not(:disabled){box-shadow:0 0 24px #afdbef30,0 0 58px #8ed8e625,0 10px 30px #0002}
@media(max-height:600px){.task,.board{top:-10px}}

/* Future slots show their existence; only the next skill carries a lock. */
.skill.dormant{background:transparent;box-shadow:none;border:1px solid #344056;opacity:.65}
.skill.pending{background:linear-gradient(145deg,#30374f,#212940);border:1px solid #718099;box-shadow:none}#fold-skill.revealed .secret{display:none}
/* Wide screens use their space while sharing the mobile centre axis. */
@media(min-width:800px) and (min-height:481px){
 .app{max-width:1120px;padding-left:48px;padding-right:48px;--rail:72px;--board:min(460px,calc(100dvh - 350px));grid-template-rows:100px minmax(0,1fr) 48px}
 .topbar{padding:0}.brand{font-size:46px}.skills{right:48px;top:28px;gap:16px}.symbol{width:58px;height:58px}.lock{width:38px;height:48px;left:calc(50% - 19px);top:calc(50% - 24px)}.secret{font-size:20px;padding:0 5px}
 .workspace{grid-template-rows:60px var(--board) 142px;gap:16px;padding-top:0}.task h1{font-size:34px}.board{grid-template-columns:68px minmax(0,1fr) 68px;grid-template-rows:68px minmax(0,1fr) 68px;gap:8px}.arrow{width:68px;height:68px}.arrow svg{width:58px;height:58px}.input-panel{width:360px;height:142px}.input-actions button{font-size:15px}.task,.board{top:-14px}
}
@media(min-width:800px) and (max-height:650px) and (min-height:481px){.app{--board:calc(100dvh - 290px);grid-template-rows:72px minmax(0,1fr) 40px;--rail:60px}.brand{font-size:36px}.workspace{grid-template-rows:40px var(--board) 132px;gap:4px}.input-panel{height:132px}.skills{top:16px;gap:12px}.symbol{width:50px;height:50px}.task h1{font-size:28px}}

#clear{position:fixed;width:min(420px,calc(100% - 40px));padding:48px 30px 30px;text-align:center}#clear h2{margin:8px 0 30px;line-height:1.5}#clear-message{margin:-12px 0 28px;white-space:pre-line}.clear-actions{display:grid;gap:12px}.clear-actions a,.clear-actions button{display:grid;place-items:center;min-height:48px;margin:0;text-decoration:none;font-size:15px;border-radius:8px}.clear-actions #share{background:#8fe2d6;color:#102e35;font-weight:700}.clear-actions #back{background:#2a3852;color:#dbe7f6}.clear-links{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 22px;margin-top:28px}.clear-links a{font-size:12px;color:#aebed5;text-underline-offset:4px}#clear .dialog-close{position:absolute;top:12px;right:12px;width:40px;height:40px;padding:10px;margin:0;background:transparent}.dialog-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;pointer-events:none}

/* Clip traveling tiles to the board; arrows remain above them. */
.board{overflow:hidden}.arrow{position:relative;z-index:1}.picture:disabled{opacity:1}

#prompt{padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit}#prompt:disabled{cursor:default}.skill.selected{box-shadow:0 0 0 2px #95d9d3;background:#35465e}.skill-name{font-size:14px;letter-spacing:0;white-space:nowrap}.picture{font-family:Arial,sans-serif;font-size:clamp(48px,15vw,86px);font-weight:500;color:#162b3e}.picture.red-face,.picture.red-face:active{background:#ed666e;box-shadow:0 0 22px #ec637132,0 0 50px #ec637116}.skill.pending .skill-name{color:#acb8cb}
@media(max-width:799px){.app{--rail:44px}.skills{right:12px;gap:7px;top:14px}.symbol{width:42px;height:42px}.lock{width:28px;height:35px;left:calc(50% - 14px);top:calc(50% - 17.5px)}.secret{font-size:14px;padding:0 1px}.skill-name{font-size:12px}}
@media(max-width:799px) and (max-height:720px){.app{--board:min(300px,calc(100vw - 100px),calc(100svh - 310px))}.board{grid-template-columns:44px minmax(0,1fr) 44px;grid-template-rows:44px minmax(0,1fr) 44px;gap:4px}.arrow{width:44px;height:44px}.arrow svg{width:38px;height:38px}.picture{width:calc(100% - 12px);height:calc(100% - 12px)}}

.feature-icon{width:72%;height:72%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.feature-icon circle{fill:currentColor;stroke:none}

/* White outline belongs to the tile, not the page background. */
.picture{border:3px solid transparent;box-shadow:0 0 20px #afdbef24,0 0 52px #8ed8e61c,0 10px 30px #0002}
.picture.red-face,.picture.red-face:active{background:#dc3c48;color:#fff;border-color:#f3f5f8;box-shadow:0 0 24px #dc3c4826}
.picture.black-face,.picture.black-face:active{background:#202329;color:#fff;border-color:#f3f5f8;box-shadow:0 0 24px #afdbef18}



.color-icon{width:90%;height:90%;pointer-events:none}#color-skill .color-icon{visibility:visible}

.number-icon{width:80%;height:80%;stroke-width:1.8}


.square-symbol{width:90%;height:90%;fill:none;stroke:currentColor;stroke-width:1.8;pointer-events:none}


/* Locked state uses the same flat surfaces as the app's controls. */
.lock{filter:none}
.lock path,.lock rect{fill:#7faeb8;stroke:none}
.lock circle{fill:#293249}
.lock path:last-child{fill:none;stroke:#293249;stroke-width:1.6;stroke-linecap:round}
.skill.pending{background:#28324b;border:0;box-shadow:none}
.skill.pending.selected{box-shadow:0 0 0 2px #95d9d3}


.fold-icon{width:78%;height:78%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;pointer-events:none}

.secret-icon{width:90%;height:90%;pointer-events:none}

/* Fixed input slots follow the selected question. */
.token{animation:none;border:1.5px solid #afc8da}.token.empty{background:transparent;border-color:#657991}

.input-actions #submit:disabled{background:#1c2638;color:#647189;box-shadow:none;cursor:default}