@charset "UTF-8";
/* Keep scrolling and pinch zoom, but suppress double-tap zoom across the app. */
html,button{touch-action:manipulation}
.stage-page-control{margin:0 0 14px;color:#506583;font-size:11px}
.stage-page-control label{display:flex;align-items:center;justify-content:space-between;font-weight:700}
.stage-page-control input{display:block;width:100%;min-height:44px;margin:0;accent-color:#436394;touch-action:pan-y pinch-zoom}
.stage-page-ends{display:flex;justify-content:space-between;font-size:10px}
/* Home: cats resting on a single clear crystal board, with quiet navigation. */
.home-screen{padding:26px 8px 6px;text-align:center;max-width:400px;margin:auto}.home-title h1{font:900 clamp(27px,7vw,34px) var(--font-app);letter-spacing:.05em;margin:0}.home-title p{font-size:12px;color:#506583;margin:13px 0 0}.home-scene{height:252px;position:relative;display:flex;justify-content:center;align-items:center;margin:10px 0 0}.home-crystal{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;width:216px;aspect-ratio:1;transform:rotate(-9deg);padding:7px;border:1px solid #ffffffe0;border-radius:16px;background:#ffffff40;box-shadow:0 7px 0 #aac8db50,0 22px 35px #54719825}.home-tile{display:flex;align-items:center;justify-content:center;border:1px solid #ffffffcf;border-radius:5px;background:linear-gradient(140deg,#ffffffa8,transparent 40%,#ffffff60 41%,transparent 43%),color-mix(in srgb,var(--region) 48%,transparent);box-shadow:inset 1px 1px 0 white}.home-tile svg{width:94%;height:94%;transform:rotate(9deg)}.scene-spark{position:absolute;font-size:35px;color:#607cad}.spark-one{top:25px;right:12px}.spark-two{bottom:17px;left:15px;font-size:25px}.home-invitation{font-size:14px;line-height:1.9;margin:4px 0 20px}.home-actions{max-width:310px;margin:auto}.home-play{margin:0;min-height:70px;font-size:18px;box-shadow:0 4px 0 #304e77}.home-play span{display:block;font-size:11px;font-weight:400;margin-top:6px;opacity:.9}.home-actions .secondary{margin-top:15px;min-height:52px;background:#ffffff50}.home-actions .text-btn{margin-top:6px}.home-record{display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left;gap:10px;max-width:310px;margin:22px auto 0;padding-top:17px;border-top:1px solid #b8cadc;font-size:12px}.home-record strong{font-size:22px}.home-record small{font-size:11px;font-weight:400;color:#506583}.home-record progress{grid-column:1/-1;width:100%;height:5px;border:0;border-radius:4px;overflow:hidden;background:#cddcec;accent-color:#436394}.home-record progress::-webkit-progress-bar{background:#cddcec}.home-record progress::-webkit-progress-value{background:#436394}.home-footer{font-size:10px;line-height:1.9;color:#506583;margin-top:22px}.home-return{text-align:center;margin-top:7px}@media(max-width:360px){.home-screen{padding-top:20px}.home-scene{height:225px}.home-crystal{width:190px}.home-invitation{font-size:13px}}@media(max-height:500px){.home-screen{padding-top:12px}.home-scene{height:195px}.home-crystal{width:165px}}
:root{--font-app:'M PLUS 1p','Yu Gothic','Hiragino Kaku Gothic ProN',sans-serif;font-family:var(--font-app);color:#263955;background:#e7eff8;font-synthesis:none;--ink:#263955;--paper:#f8fbff;--accent:#436394}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #385687;outline-offset:3px}button svg{pointer-events:none}#app{max-width:480px;margin:auto;min-height:100svh;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));background:radial-gradient(ellipse at 0 0,#e0def5,transparent 50%),radial-gradient(ellipse at 100% 20%,#d3ebf3,transparent 60%),#e9f0f8}.top{display:flex;align-items:center;justify-content:space-between;gap:8px}.brand{font:900 24px var(--font-app);letter-spacing:.04em;margin:0}.brand small{display:block;font:10px var(--font-app);letter-spacing:.06em;margin-top:6px}.header-buttons{display:flex;gap:6px}.icon-btn{width:42px;height:44px;border:1px solid #adc2db;background:#f5f9ff8c;border-radius:14px;font-size:20px}.music-btn{font-size:19px;line-height:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.music-btn span{font-size:9px}.music-btn[aria-pressed=true]{background:#d7e5f5;border-color:#7089b3}.intro{display:flex;align-items:center;justify-content:space-between;gap:7px;margin:18px 0 14px}.intro h2{font-size:17px;margin:6px 0;line-height:1.5}.intro p{font-size:11px;margin:0;color:#506583}.intro .chapter{font-size:11px;color:#5c6592}.mascot{width:60px;height:60px;flex-shrink:0;transform:rotate(-6deg)}.mood-copy{display:block;margin-top:3px}.stage-line{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:11px}.stage-button{background:none;border:0;padding:0;font-weight:800;font-size:15px;min-height:32px}.stage-button span{font-size:10px;margin-left:5px;color:#506583;font-weight:500}.difficulty{border-left:1px solid #aebcd2;padding-left:10px;font-size:10px}.cleared-count{margin-left:auto;font-size:10px;color:#506583}.status{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:12px}.tag{padding:4px 9px;background:#d9e3f3;border:1px solid #c3d2e9;border-radius:5px}.progress{font-weight:800;font-size:15px}.progress span{font-weight:500;font-size:11px;margin-left:5px}.board-wrap{padding:6px;border-radius:15px;border:1px solid #aabeda;background:linear-gradient(135deg,#ffffffef,#cfdef190 45%,#fff 46%,#e4ebf8);box-shadow:0 5px 0 #bacbe0,0 12px 24px #385a8820}.board-scroll{overflow:auto;overscroll-behavior:contain;border-radius:8px}.board{display:grid;grid-template-columns:repeat(var(--size),minmax(0,1fr));grid-template-rows:repeat(var(--size),minmax(0,1fr));gap:1px;aspect-ratio:1;width:100%;background:#edf4ff}.cell{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:0;overflow:hidden;border-style:solid;border-color:#57729199;border-radius:3px;background:linear-gradient(135deg,#ffffffb8 0%,#ffffff35 21%,transparent 22%,#ffffff28 50%,#ffffff70 51%,transparent 52%,#40548718 100%),var(--region);box-shadow:inset 1px 1px 0 #ffffffad,inset -1px -1px 0 #617cad45;touch-action:manipulation}.cell::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(35deg,transparent 57%,#ffffff66 58%,transparent 60%);opacity:.5}.cell svg{width:95%;height:95%;position:relative;z-index:1;filter:drop-shadow(0 1px 1px #27365730)}.cell.mark::after{content:'×';font:500 24px var(--font-app);color:#364b6b;position:relative;z-index:1}.cell.error{outline:2px solid #a0325c;outline-offset:-2px}.cell.error::after{content:'!';position:absolute;right:1px;top:0;font-size:10px;font-weight:900;color:#8d1745;z-index:2}.cell.selected{box-shadow:inset 0 0 0 2px #263955,inset 1px 1px 0 white}.region-number{position:absolute;top:1px;left:2px;font-size:8px;line-height:1.2;font-weight:800;background:#ffffffc9;border-radius:2px;padding:0 1px;color:#263955;z-index:3;pointer-events:none}.board-help{min-height:39px;padding:12px 0 6px;font-size:11px;text-align:center;line-height:1.6;color:#506583}.modes{display:flex;gap:6px;background:#d6e0f0;padding:5px;border-radius:12px;margin:4px 0 10px}.mode{flex:1;min-height:46px;border:1px solid transparent;background:transparent;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:700}.mode.active{border-color:#bdcce3;background:#f9fcff;box-shadow:0 2px 4px #273f6412}.mode svg{width:27px;height:27px}.mark-symbol{font:26px var(--font-app)}.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.tool{border:1px solid #aebfda;background:#f6faff4d;border-radius:10px;min-height:55px;font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.tool b{font-size:20px;font-weight:400}.rules-mini{display:flex;justify-content:space-between;gap:6px;font-size:10px;border-top:1px solid #bfcee3;margin-top:12px;padding-top:10px}.rules-mini i{display:inline-block;width:8px;height:8px;background:#81c8c6;transform:rotate(45deg);margin-right:3px}.access-options{display:flex;justify-content:center;gap:15px}.text-btn{border:0;background:none;text-decoration:underline;text-underline-offset:4px;font-size:11px;min-height:38px}.footer{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#506583;margin-top:4px}.modal-backdrop{position:fixed;inset:0;z-index:10;background:#20345d73;display:flex;align-items:center;justify-content:center;padding:18px}.modal{background:#f8fbff;border:1px solid #e3ecfa;width:100%;max-width:420px;max-height:88svh;overflow:auto;padding:25px;border-radius:23px;box-shadow:0 25px 70px #20365b45}.modal h2{font:800 24px var(--font-app);margin:4px 0 16px}.modal p,.modal li{font-size:13px;line-height:1.8}.modal ol{padding-left:20px}.modal .mascot{display:block;width:90px;height:90px;margin:0 auto 18px}.primary,.secondary{border-radius:11px;width:100%;min-height:46px;padding:8px;font-size:13px;font-weight:700}.primary{border:0;background:#436394;color:white;margin-top:12px}.secondary{border:1px solid #b4c6df;background:transparent;margin-top:9px}.stage-pages{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:11px;white-space:nowrap}.stage-pages button{font-size:11px;margin:0;flex:1}.stage-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.stage-grid button{position:relative;border:1px solid #b8c9e2;background:#edf2fa;border-radius:6px;min-height:44px;font-size:12px}.stage-grid button.current{border:2px solid #436394}.stage-grid button.cleared{background:#d6e8df}.stage-grid button span{position:absolute;right:2px;top:0;font-size:9px}#stage-jump{margin-top:18px;font-size:12px}#stage-jump div{display:flex;gap:8px;margin-top:8px}#stage-jump input{min-width:0;width:50%;border:1px solid #b4c6df;border-radius:8px;background:white;padding:8px}#stage-jump button{margin:0;width:50%}.volume-control{font-size:12px;display:flex;align-items:center;gap:15px;margin-top:20px}.volume-control input{min-width:0;flex:1;accent-color:#436394}.key-help{color:#506583;font-size:11px!important}.loading{padding:60px 15px;text-align:center}.loading h1{font-family:var(--font-app);font-size:25px}.loading p{font-size:13px}@media(min-width:700px){body{background:#dce5f3}#app{min-height:0;margin:20px auto;border-radius:26px;box-shadow:0 20px 60px #273f641c}}@media(max-width:360px){#app{padding-left:12px;padding-right:12px}.brand{font-size:21px}.brand small{font-size:9px}.intro h2{font-size:15px}.intro .mascot{width:48px;height:48px}.icon-btn{width:36px}.stage-line{gap:6px}.rules-mini{font-size:9px}.cell.mark::after{font-size:20px}.modal{padding:20px}.stage-grid{gap:4px}}@media(prefers-reduced-motion:no-preference){.cell svg{animation:arrive .16s ease-out}@keyframes arrive{from{transform:scale(.8)}to{transform:scale(1)}}}
.icon-btn{min-width:44px;width:44px}.stage-button,.text-btn{min-height:44px}

/* Saturated tufted rugs: opaque color, fine pile and soft stitched edges. */
.board-wrap{background:#d6dfeb;border-color:#9aaec7;box-shadow:0 4px 0 #9aaec7,0 10px 22px #385a881a;backdrop-filter:none}
.board{background:#8295ae}
.cell,.home-tile{background:var(--region);border-color:color-mix(in srgb,var(--region) 62%,#263955);box-shadow:inset 0 2px 3px #ffffff45,inset 0 -2px 3px #26395530}
.cell::before,.home-tile::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.65;background:repeating-linear-gradient(78deg,#ffffff30 0 .7px,transparent .7px 3px),repeating-linear-gradient(163deg,#2639551c 0 .6px,transparent .6px 4px);background-size:5px 7px,7px 5px}
.cell.selected{box-shadow:inset 0 0 0 2px #263955,inset 0 0 0 4px #ffffffd9}
.cell.mark::after{color:#182942;text-shadow:0 1px 1px #ffffff; font-weight:800}
.cell.error{outline:3px solid #86133d;outline-offset:-3px}
.cell.error::after{color:white;background:#86133d;border-radius:3px;padding:0 3px;text-shadow:none}
.home-crystal{background:#d6dfeb;border-color:#9aaec7;box-shadow:0 5px 0 #9aaec7,0 18px 30px #54719825}
.home-tile{position:relative;overflow:hidden;border-radius:7px}
.home-tile svg{position:relative;z-index:1}
.mark-mode .cell{touch-action:none}.pause-btn{border:1px solid #adc2db;background:#ffffff80;border-radius:8px;min-height:44px;padding:0 9px;font-size:11px}.paused .board-scroll{visibility:hidden}.paused{background:#e5eff7}

/* Crystal utility controls */
.pause-btn,.utility-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid #a8bdd5;border-radius:13px;background:linear-gradient(145deg,#ffffffd9,#e0ebf6b3);box-shadow:inset 0 1px 0 #fff,0 3px 0 #b6c9dd70;color:#354f74;font-size:11px;font-weight:700;text-decoration:none;padding:0 12px}
.mark-around-btn{margin:0 0 12px}.mark-around-btn .mark-symbol{font-size:23px;line-height:1}
.pause-btn svg,.utility-btn svg{width:19px;height:19px;flex-shrink:0}.pause-btn{border-radius:12px;padding:0 11px}.pause-btn svg{width:15px;height:15px}
.access-options{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:9px;margin:17px 0 10px}.utility-btn{width:100%;padding:0 8px;gap:6px}.toggle-indicator{width:8px;height:8px;border-radius:50%;background:#abbdd2;box-shadow:inset 0 1px 2px #61789830}.regions-btn[aria-pressed=true]{background:linear-gradient(145deg,#e3f3f0,#cfe5e5);border-color:#7ba9ae;color:#285f67}.regions-btn[aria-pressed=true] .toggle-indicator{background:#357f83;box-shadow:0 0 0 3px #357f8318}
@media(hover:hover){.utility-btn:hover,.pause-btn:not(:disabled):hover{border-color:#6f8eaf;background:#f5faff}}.utility-btn:active,.pause-btn:not(:disabled):active{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff}.utility-btn:focus-visible,.pause-btn:focus-visible{outline:3px solid #385687;outline-offset:3px}

/* Readable reasoning comments below the board. */
.board-help{font-size:12px;line-height:1.8;text-align:left;padding:8px 4px;} 

.board-help{white-space:pre-line;} 

.hint-followup{margin:3px 0 12px}
.modal:has(.trial-board){padding:16px;max-width:460px}
.modal:has(.trial-board) h2{font-size:21px;margin-bottom:8px}
.trial-scroll{overflow:auto;border-radius:8px;border:2px solid #9aaec7}
.trial-manual{min-width:var(--trial-width)}
.trial-scroll:has(.trial-manual){max-height:38svh}
.trial-board .trial-cat{outline:2px dashed #263955;outline-offset:-4px}
.trial-board .trial-focus{box-shadow:inset 0 0 0 3px #263955,inset 0 0 0 5px #fff}
.trial-board .trial-affected{outline:3px solid #86133d;outline-offset:-3px}
.trial-note,.trial-legend{font-size:11px!important;margin:8px 0}
.trial-copy{white-space:pre-line;margin:12px 0;min-height:72px}
.trial-navigation{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.trial-navigation button{margin:0;min-height:44px}
.trial-navigation span{font-size:12px}
.trial-board .cell.mark::after{font-size:clamp(12px,4vw,23px)}
.trial-board .cell svg{animation:none}