:root{font-family:Inter,"Helvetica Neue",Arial,"Noto Sans JP",sans-serif;color:#1a2240;background:#f2f4f8;font-synthesis:none;--ink:#1a2240;--blue:#365ce5;--line:#dce2ee;--muted:#66738a}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;font-size:14px;cursor:pointer;border:1px solid var(--line);background:white;color:var(--ink);border-radius:9px;min-height:44px;padding:10px 14px;transition:background .15s,box-shadow .15s}button:hover{background:#edf1ff}button:focus-visible,a:focus-visible{outline:3px solid #4365e4;outline-offset:3px}button:disabled{opacity:.4;cursor:default}button.active,button[aria-pressed=true]{color:var(--blue);background:#e9eeff;border-color:#a6b6f5}button.primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}button.primary:hover{background:#254bd0}button.secondary{background:#f4f6fb}button.wide{width:100%;margin-top:12px;min-height:48px}.app{max-width:1440px;margin:auto;padding:0 32px}header{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}.brand svg{width:32px;height:32px;color:var(--blue)}.brand>span{font-size:19px;letter-spacing:1.1px}.brand b{font-weight:800}.brand small{font-size:11px;margin-left:8px;letter-spacing:2px;color:var(--muted)}.header-right{display:flex;gap:20px;align-items:center}.version{font-size:11px;letter-spacing:1.4px;color:var(--muted)}.icon{border-radius:50%;width:38px;min-height:38px;padding:0}.steps{display:flex;align-items:center;justify-content:center;padding:22px 0;gap:18px}.steps button{border:0;background:transparent;color:#677287;font-weight:700;display:flex;gap:10px;align-items:center;padding:4px 12px}.steps button span{font-size:12px;border:1px solid #ccd4e4;border-radius:50%;width:28px;height:28px;display:grid;place-items:center}.steps button.current{color:var(--blue)}.steps button.current span{background:var(--blue);color:#fff;border-color:var(--blue)}.steps i{width:70px;height:1px;background:#cdd6e7}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;min-height:660px;height:calc(100dvh - 228px);max-height:1000px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:white;box-shadow:0 10px 40px #15274a06}.board-wrap{position:relative;background:#fbfcff;min-height:450px;overflow:hidden}.board-caption{position:absolute;top:23px;left:24px;right:24px;display:flex;justify-content:space-between;pointer-events:none;z-index:1;font-size:11px;letter-spacing:1.5px;color:#64738d}.board-caption #count{letter-spacing:0;font-size:12px}#board{width:100%;height:100%;display:block;touch-action:none;outline-offset:-4px}.board-tools{position:absolute;bottom:20px;left:20px;right:20px;display:flex;justify-content:space-between;gap:10px;pointer-events:none}.board-tools>*{pointer-events:auto}.board-tools button{box-shadow:0 4px 18px #1a22400a}.zoom-tools{display:flex;align-items:center;border:1px solid var(--line);background:white;border-radius:9px;overflow:hidden}.zoom-tools button{border:0;border-radius:0;box-shadow:none;padding:10px;min-width:40px}.zoom-tools span{font-size:12px;min-width:44px;text-align:center;color:var(--muted)}aside{border-left:1px solid var(--line);padding:28px 23px 14px;overflow:auto}.panel-heading>span,.eyebrow{font-size:10px;letter-spacing:1.6px;color:var(--blue);font-weight:700}h1{font-size:21px;line-height:1.55;margin:12px 0 8px;letter-spacing:-.7px}p{font-size:14px;line-height:1.8}#instruction{color:var(--muted);margin:0 0 22px}.segmented{display:flex;padding:4px;border:1px solid var(--line);border-radius:10px;background:#f4f6fa}.segmented button{width:50%;border:0;background:transparent;min-height:38px}.segmented button.active{background:#fff;color:var(--blue);box-shadow:0 2px 7px #24345710;font-weight:700}.stat{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:24px 0 13px;font-size:14px}.stat strong{font-size:24px;font-weight:500}.muted{color:var(--muted);font-size:13px;line-height:1.8}.minor-actions{display:flex;justify-content:space-between;gap:4px;margin-top:14px}.minor-actions button{background:transparent;border:0;padding:8px 2px;font-size:12px;color:var(--muted)}.history{display:flex;gap:8px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}.history button{flex:1;min-height:40px;font-size:13px}.session-note{font-size:11px;line-height:1.7;color:#7c879b;margin-bottom:0}.legend{display:flex;gap:10px;margin-bottom:18px;font-size:11px;color:var(--muted)}.legend span{display:flex;align-items:center;gap:4px}.legend i{width:9px;height:9px;border-radius:2px}.unassigned{background:#1a2240}.selected{background:#365ce5}.assigned{background:#ccd3df}.selection-stat{display:flex;align-items:baseline;gap:6px;padding-top:16px}.selection-stat strong{font-size:30px}.selection-stat span{font-size:12px;color:var(--muted)}.selection-stat button{margin-left:auto;font-size:12px;border:0;padding:6px}.part-list{display:grid;gap:7px;margin-top:18px;max-height:185px;overflow:auto}.part-row{display:flex;align-items:center;gap:8px;background:#f6f8fc;border-radius:8px;padding:7px 10px;font-size:13px}.part-dot{width:10px;height:10px;border-radius:3px;display:inline-block}.part-row button{margin-left:auto;font-size:12px;min-height:32px;padding:4px 10px}.progress-row{display:flex;justify-content:space-between;font-size:12px;margin-top:18px;color:var(--muted)}progress{height:4px;appearance:none;width:100%;border:0;margin:9px 0}progress::-webkit-progress-bar{background:#e9edf5;border-radius:10px}progress::-webkit-progress-value{background:var(--blue);border-radius:10px}.play-status{display:flex;align-items:center;justify-content:space-between;padding:0 0 18px;font-size:14px;border-bottom:1px solid var(--line)}.play-status strong{font-size:22px;font-weight:500}.tray-label{display:flex;justify-content:space-between;font-size:12px;margin:18px 0 12px}.tray-label span{font-size:10px;color:var(--muted)}.tray{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:230px;overflow:auto}.tray-card{position:relative;height:97px;padding:8px;border:1px solid var(--line);border-radius:9px;touch-action:none;overflow:hidden}.tray-card svg{width:100%;height:60px;display:block}.tray-card span{font-size:10px;display:block;text-align:left}.tray-card.placed{background:#f6f8fb}.tray-card.placed svg{opacity:.25}.tray-card.active{border:2px solid var(--blue);background:#eff3ff;padding:7px}.rotation{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:6px}.rotation button{font-size:25px;padding:4px 9px;white-space:nowrap}.rotation button span{font-size:11px}.rotation>span{font-size:12px;color:var(--muted)}.complete{padding:16px;margin-top:20px;background:#dcf6ee;border-radius:12px;color:#175e4c}.complete>span{font-size:10px;letter-spacing:2px}.complete h2{font-size:22px;margin:8px 0}.complete p{font-size:12px}.complete button{font-size:12px}footer{display:flex;justify-content:space-between;align-items:center;color:#8490a4;font-size:12px;padding:10px 0}footer button{font-size:12px;min-height:30px;background:none;border:0;color:#64738d}#toast{position:absolute;bottom:83px;left:50%;transform:translateX(-50%) translateY(8px);background:#1a2240;color:white;font-size:13px;padding:12px 17px;border-radius:10px;max-width:90%;width:max-content;pointer-events:none;opacity:0;transition:.2s;box-shadow:0 8px 24px #13203f24}#toast.show{opacity:1;transform:translateX(-50%)}dialog{max-width:500px;width:calc(100% - 32px);border:0;border-radius:18px;padding:30px;color:var(--ink);max-height:90dvh;overflow:auto;box-shadow:0 30px 100px #12244333}dialog::backdrop{background:#1a224077;backdrop-filter:blur(3px)}dialog h2{font-size:23px;line-height:1.5}dialog p{font-size:14px;color:var(--muted)}dialog li{padding:6px 0}dialog li p{margin:5px 0}dialog ol{padding-left:22px}.dialog-close{float:right;border:0;font-size:24px;margin:-15px -15px 0 0}.rule-box{background:#f3f5fb;padding:18px;border-radius:10px;font-size:14px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px}[hidden]{display:none!important}@media(min-width:1500px){.app{padding-top:20px}}@media(max-width:800px){.app{padding:0 12px}header{height:65px}.brand>span{font-size:16px}.brand svg{width:26px}.version{display:none}.steps{padding:12px 0;gap:4px}.steps button{font-size:13px;gap:7px}.steps i{width:28px}.workspace{display:flex;flex-direction:column;height:auto;max-height:none;min-height:0;border-radius:13px}.board-wrap{height:48dvh;min-height:310px;max-height:600px}aside{border-left:0;border-top:1px solid var(--line);padding:20px;overflow:visible}.panel-heading>span{display:none}h1{font-size:19px;margin:0 0 5px}#instruction{font-size:13px;margin-bottom:16px}.stat{padding-top:14px}.board-caption{top:17px;left:16px;right:16px}.board-tools{bottom:13px;left:13px;right:13px}.part-list{grid-template-columns:repeat(2,1fr);max-height:180px}.tray{grid-template-columns:repeat(3,1fr);max-height:240px}.tray-card{height:98px}.rotation{max-width:360px;margin:16px auto 0}.history{margin-top:16px}.session-note{margin-top:12px}.panel-heading{min-height:0}footer{font-size:10px}footer>span{max-width:70%}.tray-label span{font-size:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Author-set tray orientation, separate from the 60-degree play grid. */
#tray-settings{border-top:1px solid var(--line);margin-top:18px;padding-top:8px}#tray-settings h2{font-size:15px;margin:12px 0 4px}.author-tray{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.author-piece{border:1px solid var(--line);border-radius:10px;padding:9px;background:#fbfcff}.author-piece-heading{display:flex;justify-content:space-between;gap:4px;font-size:12px}.author-piece-heading span{color:var(--muted)}.author-piece svg{display:block;width:100%;height:120px;margin:10px 0}.author-turn,.author-order{display:flex;gap:4px}.author-turn button,.author-order button{flex:1;padding:5px 1px;font-size:12px;min-width:0;min-height:40px}.author-order{margin-top:4px}.author-order button{border:0;background:transparent;color:var(--muted)}.tray-snap-note{font-size:12px;color:var(--muted);line-height:1.7}.tray{grid-template-columns:repeat(var(--tray-columns,3),minmax(0,1fr))}.overlap-note{color:#936224;background:#fff3db;border-radius:8px;padding:10px 12px;font-size:12px;margin:12px 0}.part-row{gap:5px}.part-row button{margin-left:0}.part-row button[data-edit]{margin-left:auto}.part-row button[data-delete]{min-width:30px;padding:4px}#edit-tray{font-size:12px}

.order-callout{border:1px solid #dce4f5;background:#f2f5ff;border-radius:10px;padding:14px;font-size:14px}.order-callout p{font-size:12px;margin:7px 0 0;color:var(--muted)}.unregister-part{width:100%;font-size:12px;background:transparent;border:0;color:var(--muted);min-height:36px}.minor-actions{flex-wrap:wrap}.minor-actions button{min-height:40px}

/* Notices live on the canvas, outside the control layout. */
.overlap-note{position:absolute;z-index:2;top:50px;left:16px;right:16px;width:fit-content;max-width:calc(100% - 32px);margin:0;pointer-events:none;box-shadow:0 3px 12px #1a224012}.play-status{min-height:48px}.home-screen{padding:60px 0 40px;max-width:900px;margin:auto}.home-screen>h1{font-size:clamp(32px,5vw,54px);letter-spacing:-1.5px;line-height:1.35}.home-screen>p{color:var(--muted)}.home-choices{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:32px 0}.home-choices article{border:1px solid var(--line);border-radius:18px;background:white;padding:28px}.home-choices article>span{font-size:11px;color:var(--blue);letter-spacing:1.5px}.home-choices h2{font-size:20px;line-height:1.5}.home-choices p{color:var(--muted);font-size:13px}.home-choices button{font-size:15px}#home-button{font-size:12px;min-height:36px;padding:5px 10px}
@media(max-width:800px){.home-screen{padding:36px 6px}.home-choices{grid-template-columns:1fr;gap:14px;margin:24px 0}.home-choices article{padding:22px}.home-choices h2{margin:10px 0}.header-right{gap:10px}.board-tools{left:8px;right:8px;gap:4px}.board-tools button{padding:8px;min-width:34px}.zoom-tools span{min-width:38px}}

/* Play controls stay on the canvas, with the tray directly alongside it. */
.board-tools{justify-content:flex-end;align-items:center}.rotation{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);margin:0;max-width:none;width:min(300px,calc(100% - 24px));padding:6px;background:#fffef8f5;border:1px solid #dce2ee;border-radius:16px;box-shadow:0 8px 30px #1a224018;z-index:3}.rotation button{min-width:66px;min-height:54px;font-size:29px;border-radius:11px;touch-action:manipulation}.rotation>span{text-align:center;font-size:12px}.play-mode .board-tools{top:12px;bottom:auto;left:auto;right:12px;z-index:3}.play-mode .board-caption{right:85px}.play-mode .board-caption #count{display:none}.play-mode aside{padding-top:16px}.play-mode .tray-label{margin:0 0 8px;align-items:center}.play-mode .tray-label strong{font-weight:500;font-size:12px;color:var(--muted)}.play-mode .tray-card{height:104px}.play-mode .tray-card svg{height:68px}.play-mode .history{margin-top:12px}.play-mode .session-note{display:none}.play-mode .complete{padding:0;margin-top:10px;background:none}.completion-label{position:absolute;bottom:30px;left:0;right:0;text-align:center;color:white;font-size:28px;letter-spacing:.3em;pointer-events:none}.board-wrap.solved{background:#000;transition:background .25s}.solved #grid,.solved #target,.solved #markers,.solved .board-caption{visibility:hidden}.solved #shapes path{transition:fill .25s,stroke .25s}.solved .board-tools button{background:#171717;border-color:#444;color:#fff}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.catalog-screen{max-width:960px;margin:40px auto}.catalog-screen>p{color:var(--muted)}.problem-list{display:grid;gap:32px;margin:28px 0}.problem-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.catalog-group{min-width:0}.catalog-group-heading{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px}.catalog-group-heading h2{font-size:20px;margin:0}.catalog-group-heading>span{font-size:14px;color:var(--muted)}.catalog-empty{margin:0;padding:20px;border:1px dashed #cbd4e5;border-radius:12px;color:var(--muted);font-size:14px}.problem-card{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:22px;min-height:200px;padding:24px;border-radius:16px;background:#fff}.problem-card:hover{border-color:#365ce5}.problem-card>b{font-size:42px;letter-spacing:3px;color:var(--blue)}.problem-card>span:last-child{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}.problem-level{font-size:14px;color:var(--muted)}.problem-card.problem-community>b{color:#187c69}.problem-card.problem-community:hover{border-color:#187c69}.problem-card.problem-own>b{color:var(--ink)}
@media(max-width:800px){.play-mode .board-wrap{height:58dvh;min-height:340px;max-height:640px}.play-mode aside{padding:10px 12px 14px}.play-mode .tray-card{height:92px}.play-mode .tray-card svg{height:56px}.play-mode .rotation{margin:0;bottom:12px}.play-mode .board-caption{left:14px;top:22px}.catalog-screen{margin:28px 6px}.problem-grid{gap:10px}.problem-card{padding:16px;min-height:170px;gap:18px}.problem-card>b{font-size:30px}.play-mode .tray-label{font-size:11px;margin-bottom:6px}}
@media(prefers-reduced-motion:reduce){.board-wrap.solved,.solved #shapes path{transition:none}}

/* Grid orientation changes the lattice, never the viewport dimensions. */
.orientation-toggle{position:absolute;top:50px;left:14px;z-index:2;font-size:14px;min-height:44px;padding:8px 14px;color:var(--blue);background:#f2f5ff;border-color:#c8d3f7}
.part-selection{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0;font-size:14px}
.part-selection #clear-selection{margin-left:auto;font-size:13px}
.part-selection .wide{margin-top:0}

/* Titles stay compact above the board and wrap without separating the tray. */
.problem-title{font-size:18px;line-height:1.5;letter-spacing:0;margin:14px 2px;overflow-wrap:anywhere}
.problem-card{min-width:0}.problem-card>b{overflow-wrap:anywhere}
.problem-card.own-problem>b{font-size:24px;line-height:1.4;letter-spacing:0}
#title-form label{display:block;font-size:16px;margin-bottom:8px}
#puzzle-title-input{display:block;width:100%;min-height:48px;padding:12px;border:1px solid var(--line);border-radius:9px;color:var(--ink);background:#fff;font:inherit;font-size:16px}
#puzzle-title-input:focus-visible{outline:3px solid #4365e4;outline-offset:2px}
#puzzle-title-input[aria-invalid=true]{border-color:#ad3546}
#title-help{font-size:14px;margin:8px 0}
#title-form .form-error{min-height:1.8em;color:#ad3546;margin:8px 0}
#title-form .dialog-actions{flex-wrap:wrap}
.confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
#title-form .download-permission{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.6;margin:18px 0 8px;cursor:pointer}
.download-permission input{width:20px;height:20px;flex:0 0 20px;margin:2px 0;accent-color:var(--blue)}
#download-error{color:#ad3546;font-size:14px;overflow-wrap:anywhere}
#download-error:empty{display:none}
.download-preview{height:240px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:conic-gradient(#e1e5ec 25%,#fff 0 50%,#e1e5ec 0 75%,#fff 0);background-size:20px 20px}
.download-preview svg{display:block;width:100%;height:100%;max-height:240px}
.download-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.download-colors label{font-size:15px;line-height:1.5}.color-field{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:13px}
.color-field input{width:56px;height:44px;padding:3px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}.color-field input:disabled{opacity:.35;cursor:default}
.color-field input:focus-visible{outline:3px solid #4365e4;outline-offset:2px}
.transparent-option{display:flex;align-items:center;gap:8px;margin:18px 0;font-size:15px;cursor:pointer}.transparent-option input{width:20px;height:20px;margin:0;accent-color:var(--blue)}
#download-dialog .download-description{font-size:14px}#download-options-error:empty{display:none}
@media(max-width:420px){#download-dialog{padding:22px}.download-preview{height:200px}.download-preview svg{max-height:200px}.color-field{flex-wrap:wrap}.download-colors{gap:12px}}
.canvas-clear{position:absolute;bottom:20px;left:20px;z-index:3;background:#fff;box-shadow:0 4px 18px #1a22400a}
.load-notice:has(#load-status:empty){display:none}.load-notice{display:flex;gap:12px;align-items:center}.load-notice p{font-size:14px;color:var(--muted)}
.own-problem-wrap{display:grid;gap:8px;align-content:start}.own-problem-wrap .problem-card{width:100%}
#saved-title{overflow-wrap:anywhere}#shared-link{margin-top:18px}#shared-link label{display:block;font-size:14px;margin-bottom:8px}#share-url{width:100%;font:inherit;font-size:16px;padding:12px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink)}.form-error{color:#ad3546;min-height:1.8em}
.draw-mode .board-tools{left:120px}
@media(max-width:800px){.draw-mode .board-wrap{height:72svh;min-height:420px;max-height:900px}.draw-mode aside{padding:12px 16px}.draw-mode .muted{margin:0;font-size:14px}.canvas-clear{bottom:13px;left:10px;padding:8px;font-size:13px}.draw-mode .board-tools{left:108px;gap:4px}.draw-mode .board-tools button{padding:7px;min-width:32px}.draw-mode .zoom-tools span{min-width:32px}}

.canvas-download{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:min(320px,calc(100% - 24px));z-index:4;min-height:58px;box-shadow:0 8px 28px #0003}.download-preview{width:min(100%,280px);height:auto!important;aspect-ratio:1;margin:0 auto}.download-preview svg,.download-preview img{width:100%;height:100%;max-height:none!important;object-fit:contain}.play-mode .board-caption{right:190px}

.site-shell{max-width:1640px;margin:auto;position:relative}.site-ad{width:160px;position:absolute;right:20px;top:85px;padding:0;border:0;background:#fff;text-align:center}.site-ad>span{display:block;font-size:12px;color:#788394;margin-bottom:8px}.puzzle-ad{width:160px;height:600px}.has-ads{padding-right:330px}.has-ads>.app{max-width:none}.site-shell:not(.has-ads)>.app{max-width:1280px}footer a{color:#64738d;font-size:12px}@media(max-width:1100px){.has-ads{padding-right:0}.site-ad{position:static;width:100%;height:74px;margin:12px auto 150px;min-height:74px}.puzzle-ad{width:320px;height:50px}}@media(max-width:339px){.puzzle-ad{width:250px;height:50px}}

.save-notice{font-size:13px;color:var(--muted);min-height:36px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.save-notice #save-conflict{flex-basis:100%}.save-notice p{margin:8px 0}.save-notice button{margin:4px 6px 4px 0}.clear-badge{font-style:normal;font-size:12px;color:#187c69;font-weight:700}.problem-card>span:last-child{gap:6px;flex-wrap:wrap}.quick-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0}.quick-guide svg{width:100%;height:75px}.quick-guide b{font-size:16px}.quick-guide p{font-size:14px;color:var(--muted);line-height:1.6}.quick-guide-rule{padding:14px;background:#eef2ff;border-radius:12px;font-size:14px;line-height:1.6}#play-guide{width:min(720px,calc(100% - 24px));max-height:90dvh;overflow:auto}#play-guide details{font-size:14px;margin:18px 0;line-height:1.6}#play-guide summary{cursor:pointer;min-height:30px}#basic-finished{color:#187c69;font-weight:700}#new-draft{margin-top:10px}@media(max-width:600px){.quick-guide{grid-template-columns:1fr;gap:12px;margin:16px 0}.quick-guide article{display:grid;grid-template-columns:78px 1fr;column-gap:12px;align-items:center}.quick-guide svg{grid-row:1/3;width:78px;height:60px}.quick-guide p{margin:5px 0}.quick-guide b{font-size:15px}#play-guide{padding:24px 18px}#play-guide h2{font-size:22px;padding-right:22px}}

/* Compact stage selection; user submissions retain their separate list. */
.catalog-screen>h1{font-size:clamp(26px,4vw,34px);margin:8px 0 22px}.catalog-screen .problem-list{margin-top:0;gap:36px}.source-tag{padding:4px 10px;border-radius:6px;background:#e7edff;color:#365ce5!important;font-weight:600}.stage-progress{display:grid;grid-template-columns:1fr auto;gap:10px 16px;margin:0 0 18px;color:var(--muted);font-size:14px}.stage-progress strong{color:var(--ink);font-weight:600}.stage-progress progress{grid-column:1/-1;width:100%;height:7px;display:block;border:0;border-radius:8px;overflow:hidden;background:#dfe5f0;appearance:none}.stage-progress progress::-webkit-progress-bar{background:#dfe5f0;border-radius:8px}.stage-progress progress::-webkit-progress-value{background:#365ce5;border-radius:8px}.stage-progress progress::-moz-progress-bar{background:#365ce5;border-radius:8px}.stage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.stage-card{min-width:0;display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:20px;border:1px solid #dce2ee;border-radius:18px;background:#fff;box-shadow:0 3px 0 #dce2ee;transition:background .15s,border-color .15s,box-shadow .15s}.stage-card:hover{background:#f8faff;border-color:#98acee}.stage-card:active{box-shadow:none}.stage-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.stage-number{font-size:25px;font-weight:750;letter-spacing:-1px;font-variant-numeric:tabular-nums;color:#365ce5}.stage-level{font-size:14px;color:var(--muted)}.stage-pieces{display:flex;align-items:center;justify-content:center;gap:8px;height:88px;margin:16px 0 12px;padding:8px 0}.stage-pieces svg{flex:1 1 0;min-width:0;width:0;height:100%;overflow:visible}.stage-title{font-size:24px;line-height:1.2;letter-spacing:2px;color:#365ce5}.stage-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:13px;color:var(--muted)}.stage-state{display:inline-flex;align-items:center;gap:3px;font-weight:600}.stage-state svg{width:16px;height:16px;flex-shrink:0}.stage-next{border:2px solid #c58124;padding:19px;background:#fffaf0;box-shadow:0 3px 0 #eddbbc}.stage-next:hover{border-color:#a56a1a;background:#fff4df}.stage-next .stage-state{color:#885711}.stage-cleared .stage-state{color:#187c69}.stage-cleared{border-color:#c9ddd7;box-shadow:0 3px 0 #dce8e3}.problem-card.problem-community>b{font-size:24px;line-height:1.4;letter-spacing:0}.problem-card.problem-community{min-height:150px;gap:16px}
@media(max-width:800px){.catalog-screen{margin:20px 4px}.catalog-screen>h1{margin-bottom:20px}.stage-grid{gap:12px}.stage-card{padding:14px;border-radius:15px}.stage-next{padding:13px}.stage-number{font-size:23px}.stage-pieces{height:65px;margin:12px 0 10px;gap:4px;padding:4px 0}.stage-title{font-size:21px;letter-spacing:1px}.stage-bottom{font-size:12px;margin-top:10px;gap:6px}.stage-progress{gap:9px;font-size:13px}.stage-progress>span{font-size:13px}.stage-state{font-size:12px}.stage-level{font-size:14px}}
@media(prefers-reduced-motion:reduce){.stage-card{transition:none}}
/* Limit gesture suppression to interaction surfaces; keep pinch zoom and image saving. */
button,a,summary{touch-action:manipulation}
#board,#tray,#author-tray,#rotation,.board-tools,.canvas-clear,.steps,.history,#problem-list{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#board,#tray{touch-action:none}
#board svg,#tray svg,#author-tray svg{pointer-events:none}
#download-preview,#download-preview img,#share-url,input,textarea{-webkit-touch-callout:default;user-select:auto;-webkit-user-select:auto}
.community-card-wrap{display:flex;flex-direction:column;min-width:0;gap:8px}.community-card-wrap>.problem-card{width:100%;flex:1}.problem-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.like-button{display:inline-flex;align-items:center;gap:7px;min-width:62px;min-height:44px;color:#526376;background:#fff}.like-button svg{width:22px;height:22px;pointer-events:none}.like-button.liked{color:#187c69;background:#e6f5ef;border-color:#91c5b5}.like-button.liked svg path{fill:#187c6922}.community-sort{display:flex;gap:6px;margin-left:auto}.community-sort button{min-height:44px;font-size:14px}.community-sort button[aria-pressed=true]{background:#e6f5ef;color:#176852;border-color:#96cbb9}.delete-problem{color:#9b3e3e;background:none;margin-left:auto}.danger-button{background:#a43131;color:white;border-color:#a43131}.problem-rating{margin:0 0 10px}.download-screen{max-width:600px;margin:24px auto 40px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:18px}.download-screen h2{font-size:24px;margin:22px 0}.download-screen #close-download{margin-bottom:8px}.download-screen p{font-size:14px;color:var(--muted);line-height:1.6}.download-screen #download-preview{max-width:100%;margin-bottom:20px}.download-screen #save-file{margin-top:10px}#delete-title{overflow-wrap:anywhere}#delete-error,#social-message{color:#a43131;font-size:14px}#social-message:empty{display:none}
/* Landscape keeps the tray beside the board instead of requiring vertical reaches. */
@media(orientation:landscape) and (max-height:600px) and (min-width:560px) and (max-width:1100px){
 .workspace.play-mode{display:grid;grid-template-columns:minmax(0,1fr) 230px;height:auto;min-height:300px;max-height:none;align-items:stretch}
 .play-mode .board-wrap{height:max(300px,calc(100svh - 85px));min-height:300px;max-height:none}
 .play-mode aside{border-top:0;border-left:1px solid var(--line);padding:10px;height:max(300px,calc(100svh - 85px));overflow-y:auto}
 .play-mode .tray{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;overflow:visible;gap:6px}
 .play-mode .tray-card{height:78px}.play-mode .tray-card svg{height:48px}
 .play-mode .minor-actions{gap:6px}.play-mode .minor-actions button{font-size:12px}.play-mode .history{gap:6px}
 .play-mode .rotation{bottom:10px;width:280px;padding:4px}.play-mode .rotation button{min-height:44px;font-size:24px}
 .play-mode .canvas-download{min-height:46px;bottom:10px;font-size:14px}
}

/* Play controls sit at the canvas corners, leaving the artwork unobstructed. */
.play-heading{display:flex;align-items:center;gap:10px;margin:12px 0;touch-action:pan-y}
.play-heading .problem-title{flex:1;min-width:0;margin:0;font-size:18px;line-height:1.35}
.play-heading .problem-rating{flex:none;margin:0 0 0 auto}
.play-heading #play-back{flex:none;font-size:14px;padding:8px 10px}
.play-mode .rotation{left:14px;right:14px;bottom:14px;transform:none;width:auto;max-width:none;border:0;border-radius:0;background:none;box-shadow:none;padding:0;pointer-events:none}
.play-mode .rotation button{pointer-events:auto;min-width:72px;min-height:48px;background:#fff;box-shadow:0 3px 14px #1a224020}
.play-mode .rotation button:last-child{margin-left:auto}
.play-solved #board{touch-action:pan-y pinch-zoom}
.play-solved #return-tray,.play-solved #play-panel>.minor-actions,.play-solved .tray-label,.play-solved #tray{display:none}
@media(max-width:800px) and (orientation:portrait){
 #play-surface.compact-play{height:100svh;height:100dvh;min-height:480px;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);scroll-margin-top:0}
 .compact-play .play-heading{flex:none;min-height:52px;margin:0;padding:4px 8px;gap:8px}
 .compact-play .problem-title{font-size:17px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .compact-play .workspace.play-mode{flex:1;min-height:0;max-height:none;height:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(200px,1fr) auto;overflow:visible;border-radius:12px}
 .compact-play .play-mode .board-wrap{height:auto;min-height:200px;max-height:none;margin:0 14px;border-radius:12px;overflow:hidden}
 .compact-play .play-mode aside{min-width:0;padding:7px 12px 8px;overflow:visible;border-left:0;border-top:1px solid var(--line);height:auto}
 .compact-play #play-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 8px}
 .compact-play .tray-label{grid-column:1/-1;margin:0;font-size:13px}
 .compact-play #tray{grid-column:1/-1;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;max-height:none;min-width:0;padding:2px 2px 6px;touch-action:pan-x;scrollbar-width:thin;scrollbar-color:#a5b3cc transparent}
 .compact-play #tray .tray-card{flex:0 0 78px;width:78px;height:84px;padding:6px;touch-action:pan-x}
 .compact-play #tray .tray-card svg{height:52px}
 .compact-play #return-tray{min-height:44px;margin:0;padding:7px 4px;font-size:13px;align-self:stretch}
 .compact-play #play-panel>.minor-actions{margin:0;gap:4px;align-items:stretch}
 .compact-play #play-panel>.minor-actions button{flex:1;min-height:44px;font-size:13px;padding:6px 2px;white-space:nowrap}
 .compact-play .history{margin-top:6px;padding-top:0;border-top:0;gap:8px}
 .compact-play .history button{min-height:44px;padding:6px}
 .compact-play #complete{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin:0}
 .compact-play #complete button{flex:1 1 130px;width:auto;margin:0;min-height:44px;padding:8px}
 .compact-play #complete p{flex-basis:100%;margin:0;font-size:13px}
 .compact-play .play-mode .board-tools{top:8px;right:8px;gap:6px}
 .compact-play .play-mode .rotation{left:8px;right:8px;bottom:8px}
 .compact-play .play-mode .rotation button{min-height:48px;font-size:25px}
 .compact-play .canvas-download{font-size:14px;min-height:48px;bottom:12px}
}

/* The completion screen keeps only the finished artwork and next actions. */
#play-surface.play-solved #tray,#play-surface.play-solved .tray-label,#play-surface.play-solved #return-tray,#play-surface.play-solved #play-panel>.minor-actions{display:none}

/* A compact keyboard of shapes: every key stays visible, in the author's order. */
.play-mode #tray{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:6px;max-height:none;overflow:visible;padding:4px 2px 6px;touch-action:pan-y}
.play-mode #tray .tray-card{flex:0 0 50px;width:50px;height:58px;min-height:44px;padding:5px;border-radius:7px;background:#fff;box-shadow:0 2px 0 #c5cdda;touch-action:none}
.play-mode #tray .tray-card svg{width:100%;height:100%;display:block}
.play-mode #tray .tray-card.active{padding:4px;border-color:#365ce5;background:#edf1ff;box-shadow:0 2px 0 #365ce5}
.play-mode #tray .tray-card.placed{background:#e9edf3;box-shadow:0 1px 0 #c5cdda}
.play-mode #tray .tray-card.placed svg{opacity:.45}
.catalog-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:0 0 24px;padding:4px;background:#e7ebf2;border-radius:12px}
.catalog-tabs button{min-width:0;min-height:48px;padding:9px 6px;border:0;background:transparent;font-size:14px;line-height:1.5;color:#56647a}
.catalog-tabs button[aria-selected=true]{background:#fff;color:#2346c0;font-weight:700;box-shadow:0 2px 6px #1a224012}
.catalog-pages{display:flex;align-items:center;justify-content:center;gap:20px;margin:6px 0;font-size:14px;color:var(--muted)}
.catalog-pages button{min-width:76px}
#finished-dialog #saved-title{padding-right:24px}
#close-finished{width:44px;min-height:44px;padding:0;margin:-12px -12px 0 0}
@media(max-width:800px) and (orientation:portrait){
 .compact-play #tray{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;overflow:visible;max-height:none;padding:4px 2px 6px;touch-action:pan-y}
 .compact-play #tray .tray-card{flex:0 0 44px;width:44px;height:54px;padding:4px;touch-action:none}
 .compact-play #tray .tray-card.active{padding:3px}
 .compact-play #tray .tray-card svg{height:100%}
}

/* Folder tabs join the selected white tab directly to its content sheet. */
.catalog-tabs{gap:5px;margin:0;padding:6px 0 0;border-radius:0;background:transparent;align-items:end;min-height:66px}
.catalog-tabs button{min-height:56px;padding:12px 8px;background:#e7ebf2;color:var(--muted);border:0;border-top:4px solid transparent;border-radius:9px 9px 0 0;font-size:16px;font-weight:700;box-shadow:none;line-height:1.4}
.catalog-tabs button[aria-selected=true]{min-height:62px;background:#fff;color:var(--blue);border-top-color:var(--blue);box-shadow:none}
.catalog-tabs button:hover{background:#e9eeff}
.catalog-tabs button[aria-selected=true]:hover{background:#fff}
.catalog-screen #problem-list{gap:24px;margin:0 0 24px;padding:24px;background:#fff;border-radius:0 0 12px 12px}
@media(max-width:800px){
 .catalog-tabs button{font-size:14px;padding:10px 4px;min-height:60px}
 .catalog-tabs button[aria-selected=true]{min-height:66px}
 .catalog-screen #problem-list{padding:16px 10px}
}

/* Portrait play is its own working screen; 26 pieces occupy 9 + 9 + 8 keys. */
@media(max-width:800px) and (orientation:portrait){
 .site-shell.playing-mobile>.app{padding:0 8px}
 .playing-mobile>.app>header,.playing-mobile>.app>footer{display:none}
 .playing-mobile .save-notice:has(#autosave-status[hidden]):has(#retry-save[hidden]):has(#save-conflict[hidden]){display:none}
 #play-surface.compact-play{height:var(--play-height,100dvh);min-height:440px;padding:0 0 env(safe-area-inset-bottom)}
 .compact-play .play-heading{min-height:48px;padding:2px 6px}
 .compact-play .workspace.play-mode{grid-template-rows:minmax(220px,1fr) auto}
 .compact-play .play-mode .board-wrap{min-height:220px;margin:0 6px}
 .compact-play .play-mode aside{padding:5px 8px 6px}
 .compact-play #play-panel{gap:4px 6px}
 .compact-play .tray-label{font-size:12px;line-height:18px}
 .compact-play #tray{gap:4px;padding:2px 0 4px}
 .compact-play #tray .tray-card{flex:0 0 calc((100% - 32px)/9);width:calc((100% - 32px)/9);max-width:40px;height:44px;min-height:44px;padding:3px;border-radius:6px}
 .compact-play #tray .tray-card.active{padding:2px}
 .compact-play #return-tray,.compact-play #play-panel>.minor-actions button,.compact-play .history button{min-height:44px}
 .compact-play .history{margin-top:4px}
}

.puzzle-metrics{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;font-size:13px;line-height:1.5;color:var(--muted);letter-spacing:0;margin-top:8px;font-weight:400}
.catalog-sort{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto;font-size:14px;color:var(--muted)}
.catalog-sort select{font:inherit;font-size:16px;min-height:44px;max-width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#fff}
.metrics-help{font-size:14px;margin:16px 0;color:var(--muted)}.metrics-help summary{min-height:44px;cursor:pointer;padding:10px 0}.metrics-help p{margin:0 0 12px}
.delete-public-warning{font-weight:700;color:#a43131;font-size:18px;background:#fff0ee;padding:12px;border-radius:8px}
.delete-stats{display:flex;flex-wrap:wrap;gap:12px;padding:14px;background:#f3f5fa;border-radius:10px;font-size:14px}
.delete-stats strong{font-size:20px;color:var(--ink)}.delete-ack{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.7;margin:16px 0}.delete-ack input{width:22px;height:22px;flex:none;margin:2px 0;accent-color:var(--blue)}
@media(max-width:500px){.catalog-sort{width:100%;margin-left:0}.catalog-sort select{flex:1;min-width:0}.puzzle-metrics{font-size:12px}}

/* On small screens, keep ads below creation, play and image export controls. */
@media(max-width:1100px){
 .site-shell.ad-after-workspace{display:flex;flex-direction:column}
 .site-shell.ad-after-workspace>.app{order:1;width:100%;min-width:0}
 .site-shell.ad-after-workspace>.site-ad{order:2;flex:none;margin:150px auto 24px}
}

/* Language controls remain available in the compact play header. */
.language-toggle{flex:none;min-width:46px;min-height:44px;padding:7px 9px;font-size:12px;font-weight:700;white-space:nowrap;touch-action:manipulation}
html[lang="en"] .home-screen h1{letter-spacing:-1px;line-height:1.15}
html[lang="en"] .stage-bottom{flex-wrap:wrap;row-gap:5px}
html[lang="en"] .catalog-sort{flex-wrap:wrap;row-gap:5px}
html[lang="en"] .catalog-sort select{max-width:100%}
html[lang="en"] .board-caption{letter-spacing:0}
html[lang="en"] #toast{max-width:calc(100% - 24px);white-space:normal;text-align:center}
html[lang="en"] .dialog-actions{flex-wrap:wrap}
@media(max-width:480px){
 .brand small{display:none}.brand>span{font-size:14px}.brand svg{width:22px}.brand{gap:7px}
 .header-right{gap:5px}.header-right #home-button{padding:7px 8px;font-size:12px}
 .language-toggle{min-width:42px;padding:7px;font-size:11px}
 html[lang="en"] .draw-mode .board-tools button{padding:5px;font-size:11px}
 html[lang="en"] .draw-mode .zoom-tools button{min-width:26px}
 html[lang="en"] .draw-mode .zoom-tools span{min-width:29px;font-size:11px}
 html[lang="en"] .draw-mode .board-tools{left:86px}
 html[lang="en"] .canvas-clear{font-size:12px}
 html[lang="en"] .stage-progress{flex-wrap:wrap}
 html[lang="en"] .catalog-tabs button{padding:10px 6px;font-size:12px}
 html[lang="en"] .play-heading #play-back{font-size:12px;padding:8px}
}

html[lang="en"] footer{gap:12px;align-items:center;flex-wrap:wrap}
html[lang="en"] footer>span{flex:1;min-width:110px;line-height:1.5}

/* Growth features live outside the active puzzle canvas. */
.weekly-picks{margin:28px 0;padding:22px;background:#fff;border:1px solid var(--line);border-radius:16px;text-align:left}
.weekly-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.weekly-heading h2{margin:5px 0;font-size:20px}.weekly-heading>span{font-size:12px;color:var(--muted)}.weekly-picks>p{color:var(--muted);margin:4px 0 16px;font-size:13px}
.weekly-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.weekly-card{display:flex;flex-direction:column;gap:9px;text-align:left;min-width:0;padding:12px;background:#f8faff}.weekly-card b{font-size:16px;overflow-wrap:anywhere}.weekly-card>span:last-child{font-size:12px;color:var(--muted)}.weekly-pieces{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;min-height:50px;width:100%}.weekly-pieces svg{width:28px;height:40px}
.author-feedback{padding:18px;background:#eef8f5;border-radius:12px;margin-bottom:20px}.author-feedback h2{margin:0 0 16px;font-size:18px}.feedback-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.feedback-stats>div{display:flex;flex-direction:column;gap:6px}.feedback-stats strong{font-size:26px;color:#175e4c}.feedback-stats span{font-size:12px}.author-feedback p{font-size:12px;color:var(--muted);margin:14px 0 0}.author-feedback .featured-thanks{color:#175e4c;font-weight:700;overflow-wrap:anywhere}
.complete-social{display:flex;gap:8px;margin-top:8px}.complete-social button{flex:1;min-height:44px}.challenge-preview{display:flex;justify-content:center;background:#f2f4f8;border-radius:12px;padding:6px;margin:12px 0}.challenge-preview>svg,.challenge-preview>img{display:block;max-height:35dvh;width:100%;object-fit:contain}#challenge-title{overflow-wrap:anywhere}#challenge-url{display:block;width:100%;padding:10px;font:inherit;font-size:16px;border:1px solid var(--line);border-radius:8px;margin-top:6px}#challenge-message{min-height:1.8em}
@media(max-width:500px){.weekly-picks{padding:14px}.weekly-grid{gap:6px}.weekly-card{padding:8px}.weekly-card b{font-size:14px}.weekly-pieces svg{width:20px;height:30px}.weekly-heading{align-items:start}.feedback-stats strong{font-size:22px}.feedback-stats span{font-size:11px}#challenge-dialog{padding:22px}}

.uncleared-filter{display:flex;align-items:center;gap:8px;margin:16px 0;min-height:44px;font-weight:650}.uncleared-filter input{width:20px;height:20px;accent-color:#365ce5}.insight-badge{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;background:#edf3ff;color:#294eac;border:1px solid #c8d8f6;border-radius:20px;padding:4px 8px;font-size:11px;font-weight:700;line-height:1.4}