/* Grid Puzzle compact interface. */
:root{background:#f6f7fa;--blue:#365ce5}body{min-height:100svh}button{border-radius:12px}button svg{pointer-events:none}button:focus-visible{outline-offset:2px}.app{max-width:1020px;padding:0 20px;margin:auto}header{height:62px;border:0}.brand>span{font-size:15px;letter-spacing:2px}.brand small{display:none}.brand svg{width:24px;height:24px}.header-right{gap:5px}#home-button,#play-language-toggle{display:none!important}.header-right .icon{width:38px}.ui-nav{display:flex;justify-content:center;gap:4px;margin:0 auto 10px;padding:3px;max-width:290px;background:#e9edf5;border:1px solid #e0e6ef;border-radius:12px}.ui-nav button{flex:1;border:0;background:transparent;padding:7px 24px;min-height:40px;font-weight:700}.ui-nav button[aria-pressed=true]{background:var(--blue);color:white;box-shadow:0 2px 6px #365ce51a}#home-screen{display:none!important}.booting #play-surface{visibility:hidden}.booting .ui-nav button{pointer-events:none}.save-notice:has(#autosave-status[hidden]):has(#retry-save[hidden]):has(#save-conflict[hidden]),.load-notice:has(#load-status:empty):has(#retry-load[hidden]){display:none}#autosave-status{margin:0;font-size:11px}.save-notice{font-size:11px}#load-status:empty{display:none}
/* Same concise navigation across play and create. */
.steps{padding:9px 0 15px;gap:5px}.steps i{width:30px}.steps button{font-size:13px;padding:2px 7px;gap:5px}.steps button span{width:25px;height:25px}.workspace{border:0;background:transparent;box-shadow:none;min-height:500px;border-radius:14px;overflow:visible}.board-wrap{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}.board-caption{display:none!important}.workspace aside{border:0;background:transparent;padding:12px 0 12px 20px;overflow-y:auto}.panel-heading,#draw-panel>.muted,#draw-panel>.minor-actions,.order-callout,.tray-snap-note,#split-note,aside>.session-note{display:none!important}.board-tools #zoom-controls,.board-tools #origin{display:none!important}.board-tools{top:12px;right:12px;bottom:auto;left:auto!important;background:transparent;box-shadow:none;padding:0}.board-tools button{background:#ffffffed}.orientation-toggle{top:12px;left:12px}.canvas-clear{left:12px;bottom:12px;min-height:44px;padding:8px 12px;font-size:12px}#board-wrap.solved{background:#090c14}.solved #grid{opacity:0}.solved #target{opacity:0}.history{border:0;padding:0;gap:8px}.history button{font-size:12px;min-height:44px}.play-mode .history,#return-tray{display:none!important}#panel-heading{display:none!important}
/* Play fills the viewport while the tray stays entirely visible. */
#play-surface{position:relative}.play-heading{margin:0 0 8px;min-height:46px;gap:8px}.play-heading #play-back{min-height:40px;width:48px;padding:7px;font-size:12px;border:0;background:transparent}.play-heading .problem-title{text-align:center;margin:0;line-height:1.2}.stage-heading{display:block;font-size:15px;letter-spacing:1.8px;font-weight:800}.problem-title small{display:block;margin-top:5px;font-size:11px;font-weight:500;letter-spacing:2px}.play-heading .problem-rating{min-width:44px}.problem-rating .like-button{padding:8px;min-width:44px;border:0}.ui-playing #play-heading:after{content:'';width:40px;flex:none}.ui-playing #play-heading:has(.problem-rating:not([hidden])):after{display:none}.play-mode .rotation{bottom:12px;left:12px;right:12px}.play-mode .rotation button{border-radius:50%;min-width:52px;width:52px;height:52px;padding:4px;box-shadow:none;font-size:26px;background:#ffffffeb;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}.play-mode .rotation span{font-size:10px;line-height:1.5}.play-mode #restart{width:44px;padding:0;font-size:23px}.play-mode .tray-label{display:flex;justify-content:center;font-size:12px;margin-bottom:5px}.tray-label>span{display:none}.play-mode #tray{gap:6px;padding:3px 0 5px;touch-action:pan-y}.play-mode #tray .tray-card{flex:0 0 58px;width:58px;max-width:64px;height:60px;border-radius:9px;box-shadow:0 2px 0 #dce2ec;padding:6px}.play-mode #tray .tray-card.placed{background:#eef1f5}.play-mode .workspace{height:auto}.tutorial-top{display:flex;align-items:center;justify-content:center;position:absolute;z-index:3;top:57px;left:65px;right:12px;gap:8px;pointer-events:none}#tutorial-caption{font-size:12px;color:var(--muted);margin:0;background:#ffffffeb;padding:6px 8px;border-radius:6px}#ui-tutorial-skip{pointer-events:auto;font-size:11px;border:0;min-height:36px;padding:5px;background:#ffffffed;margin-left:auto}.tutorial-top:has(#tutorial-caption[hidden]):has(#ui-tutorial-skip[hidden]){display:none}
#complete,.compact-play #complete{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:8px;margin:0;padding:0;border:0;background:transparent}#complete .complete-social{display:contents}#complete button,.compact-play #complete button{margin:0;width:100%;min-height:48px;padding:10px;flex:none}#next-problem{grid-column:1;grid-row:2;letter-spacing:2px;font-size:18px}#challenge-open{grid-column:2;grid-row:2;background:#fff;border:1px solid var(--line)}#challenge-open svg{width:25px;height:25px;display:block;margin:auto}#create-reply{grid-column:2;grid-row:3;font-size:12px;border:0;background:transparent}#solver-home{grid-column:1;grid-row:3;font-size:12px;border:0;background:transparent;text-align:left}#basic-finished,#download-error{grid-column:1/-1;font-size:12px;text-align:center}#download-error:empty{display:none}#finish-puzzle,#edit-parts{grid-column:1/-1}#download-logo{font-size:12px;width:auto;min-width:150px;min-height:44px}.play-solved #complete:not(:has(#challenge-open:not([hidden]))) #next-problem{grid-column:1/-1}
/* Catalog: actual stages, followed by community rather than a fake level count. */
.catalog-screen{max-width:760px;margin:24px auto}.catalog-screen>.eyebrow,.catalog-screen>.session-note{display:none}.catalog-screen>h1{font-size:25px;margin:0 0 20px}.catalog-tabs{display:flex;min-height:0;gap:3px;margin:0 0 18px;padding:4px;background:#e9edf5;border-radius:12px;align-items:stretch}.catalog-tabs button,.catalog-tabs button[aria-selected=true]{flex:1;min-height:44px;border:0;border-radius:9px;font-size:13px;padding:7px}.catalog-tabs button[aria-selected=true]{background:var(--blue);color:white}.catalog-screen #problem-list{padding:0;background:transparent}.stage-card{padding:14px;border-radius:12px;box-shadow:none}.stage-card.stage-next{border:2px solid var(--blue);padding:13px;background:#f7f9ff;box-shadow:none}.stage-top .stage-number{font-size:16px;color:var(--ink);letter-spacing:0}.stage-check{background:#239a83;color:#fff;border-radius:50%;width:21px;height:21px;text-align:center;font-size:14px}.stage-check:empty{background:transparent}.stage-pieces{height:66px;margin:12px 0}.stage-title{font-size:16px;letter-spacing:1px;text-align:center;color:var(--ink);margin:0 0 5px}.stage-level{font-size:11px;text-align:center}.stage-progress{font-size:12px}.stage-progress strong{color:#239a83}.stage-progress progress{height:4px}.weekly-picks{padding:14px;margin:0 0 20px}.weekly-picks>p,.weekly-heading>.eyebrow{display:none}.weekly-heading h2{font-size:17px}.problem-grid{gap:12px}.problem-card.problem-community{min-height:100px;gap:8px}.problem-card.problem-community>b{font-size:20px}.author-feedback{padding:14px}.author-feedback h2{font-size:16px}.metrics-help{font-size:12px}
/* Creating and registering pieces retain all existing edit operations. */
.part-selection{display:flex;flex-wrap:wrap;gap:6px}.part-selection #selection-count{flex:1;align-self:center;font-size:12px}.part-selection #clear-selection{font-size:12px;border:0;background:transparent}#confirm-part{flex-basis:100%;margin-top:0}#tray-settings h2{font-size:13px;margin:15px 0 9px}#tray-settings>.muted{display:none}.progress-row{font-size:11px;margin:12px 0 3px}#assignment{height:3px}.author-tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-height:none;overflow:visible;width:100%;min-width:0}.author-piece{padding:7px;border-radius:10px;width:100%;min-width:0;max-width:100%;overflow:hidden}.author-piece-heading{font-size:11px}.author-piece-heading b{font-size:11px}.author-piece>svg{display:block;height:60px;width:100%;min-width:0;max-width:100%;margin:6px 0}.author-turn,.author-order{display:flex;gap:3px}.author-turn button,.author-order button{min-width:0;flex:1;font-size:10px;min-height:36px;padding:5px 0}.unregister-part{font-size:10px;min-height:34px;padding:5px;width:100%;margin-top:4px}.author-piece-heading span{font-size:10px}.ui-split #tray-settings{margin-top:8px}.ui-split .workspace{max-height:none;height:auto;align-items:stretch}#to-play{margin-top:10px}.ui-author #play-history{margin-top:9px}#draw-panel #to-split{margin:0}.ui-author:not(.ui-playing) #play-history{display:flex}
/* Completion title and sharing sheets. */
dialog{border:1px solid var(--line);border-radius:20px;padding:24px;width:min(440px,calc(100% - 24px));max-height:90dvh;overflow-y:auto}dialog::backdrop{background:#10183270;backdrop-filter:blur(2px)}dialog h2{font-size:23px;margin:6px 0 22px}dialog p{font-size:13px;line-height:1.6}#title-help{font-size:11px}#puzzle-title-input{min-height:50px;font-size:18px}#title-form>label:first-of-type{display:none}#title-dialog .download-permission{font-size:13px}#title-dialog .muted{font-size:11px}#title-dialog .dialog-actions{display:flex}#confirm-title{flex:1}#title-dialog #cancel-title{font-size:12px}#finished-dialog{display:grid;grid-template-columns:1fr 1fr;gap:12px}#finished-dialog:not([open]){display:none}#finished-dialog>*{grid-column:1/-1}#finished-dialog #saved-title{margin:5px 0;font-size:26px}#publication-status{font-size:12px;color:#187c69;margin:0 0 6px}#publish-challenge{grid-column:1;grid-row:5;margin:0;background:#fff;color:var(--blue);border:1px solid var(--line)}#issue-url{grid-column:2;grid-row:5;margin:0;background:#fff;color:var(--blue)}#publish-challenge svg,#issue-url svg{height:26px;width:26px;display:block;margin:auto}#submit-problem{grid-row:6;margin:0;background:#fff;color:var(--blue)}#shared-link{font-size:12px}#shared-link input{max-width:100%}#shared-link>p,#finished-dialog>p:not([id]),#finished-home{display:none}#finished-play{margin:0;border:0;background:transparent}#publish-error:empty{display:none}#challenge-dialog>p:last-child{font-size:11px;color:var(--muted)}#challenge-message:empty{display:none}#challenge-dialog label{font-size:12px}#challenge-url{font-size:12px}#challenge-dialog .eyebrow{display:none}.download-screen{padding:20px;margin:20px auto;border-radius:16px}.download-screen h2{margin:12px 0 20px}.download-screen .download-description{font-size:11px}#close-download{border:0;background:transparent}.download-colors label{font-size:13px}.download-screen .color-field{padding:7px}.transparent-option{font-size:12px}#help-menu{font-size:13px}#help-menu ul{padding-left:20px;line-height:1.8}
/* Guide overlays never consume a tap or drag. */
#tutorial-pointer{position:fixed;inset:0;pointer-events:none;z-index:20;overflow:hidden}#tutorial-path-svg{position:absolute;width:100%;height:100%;opacity:.7}#tutorial-hand{position:absolute;width:39px;height:48px;overflow:visible;filter:drop-shadow(0 3px 4px #1a224020);animation:guide-drag 2.6s ease-in-out infinite;transform-origin:10px 5px}.tap-hand{animation:guide-tap 1.3s ease-in-out infinite!important}@keyframes guide-drag{0%{transform:translate(-14px,-6px);opacity:1}85%{transform:translate(calc(var(--finger-dx) - 14px),calc(var(--finger-dy) - 6px));opacity:1}100%{transform:translate(calc(var(--finger-dx) - 14px),calc(var(--finger-dy) - 6px));opacity:0}}@keyframes guide-tap{0%,100%{transform:translate(-14px,-5px) scale(1)}50%{transform:translate(-14px,-5px) scale(.87)}}
@media(max-width:800px){.app{padding:0 12px}.site-shell.playing-mobile>.app{padding:0 12px}.playing-mobile>.app>header{display:flex;height:54px}.ui-nav{margin-bottom:8px;max-width:240px}.ui-nav button{min-height:36px;padding:6px 24px}.header-right{gap:3px}.brand>span{font-size:12px;letter-spacing:1.2px}.brand svg{width:20px}.header-right .language-toggle{min-width:34px;min-height:38px;padding:5px}.header-right #help{width:32px;min-height:34px}.brand{gap:6px}.workspace{display:flex;flex-direction:column;height:auto;min-height:0;max-height:none;gap:10px}.workspace .board-wrap{height:max(350px,calc(100svh - 290px));min-height:350px;max-height:none;margin:0}.workspace aside{padding:0;border:0;overflow:visible}.workspace.draw-mode .board-wrap{height:max(390px,calc(100svh - 260px))}.steps{padding:5px 0 10px}.ui-split .board-wrap{height:40svh;min-height:290px}.ui-split .author-tray{grid-template-columns:repeat(3,minmax(0,1fr))}.ui-split .author-piece>svg{height:54px}#play-surface.compact-play{display:flex;flex-direction:column;height:calc(100svh - 196px);min-height:450px;max-height:none;padding:0}.compact-play .play-heading{flex:none;min-height:46px;margin:0 0 7px;padding:0}.compact-play .workspace.play-mode{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(260px,1fr) auto;gap:8px;flex:1;min-height:0;height:auto;max-height:none;overflow:visible}.compact-play .play-mode .board-wrap{height:100%;min-height:260px;margin:0;max-height:none;border-radius:14px}.compact-play .play-mode aside{padding:0;overflow:visible;border:0;height:auto}.compact-play #play-panel{display:block}.compact-play #tray{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:2px 0 4px}.compact-play #tray .tray-card{flex:0 0 clamp(44px,13vw,60px);width:clamp(44px,13vw,60px);max-width:60px;height:54px;padding:5px}.compact-play #complete{display:grid;grid-template-columns:minmax(0,1fr) 52px;gap:6px}.compact-play #complete button{margin:0;width:100%;min-height:44px;font-size:13px;padding:8px}.compact-play #next-problem{font-size:18px;min-height:52px}.compact-play .rotation{bottom:10px;left:10px;right:10px}.compact-play .rotation button{min-height:50px;min-width:50px;width:50px;height:50px}.compact-play .play-mode .board-tools{right:10px;top:10px}.compact-play .tray-label{font-size:11px;line-height:16px;margin-bottom:3px}.compact-play .canvas-download{bottom:12px;font-size:12px;min-height:44px}.catalog-screen{margin:20px 0}.catalog-tabs button,.catalog-tabs button[aria-selected=true]{font-size:12px;min-height:42px}.stage-grid{gap:10px}.stage-card{min-height:158px}.catalog-screen #problem-list{padding:0}.stage-title{font-size:16px}.stage-pieces{height:62px}.download-screen{padding:16px;margin:16px 0}.download-screen h2{font-size:23px}#download-preview{aspect-ratio:1}.ui-playing .save-notice{display:none}.tutorial-top{top:57px;left:60px;right:9px}#tutorial-caption{font-size:11px}.ui-split #play-history{margin-top:10px}#finished-dialog{gap:10px}dialog{padding:22px}}
@media(min-width:801px){.ui-playing #play-surface{max-width:900px;margin:auto}.workspace.play-mode{height:calc(100svh - 245px);min-height:480px;max-height:850px;grid-template-columns:minmax(0,1fr) 220px}.play-mode aside{display:flex;flex-direction:column;justify-content:center}.tutorial-top{right:245px}.workspace:not(.play-mode){grid-template-columns:minmax(0,1fr) 270px;min-height:520px}.ui-split .board-wrap{height:650px}.ui-split .author-tray{grid-template-columns:repeat(2,minmax(0,1fr))}.ui-author .steps{margin-bottom:10px}}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){.ui-playing header{display:none!important}.ui-playing .ui-nav{position:absolute;right:14px;top:3px;width:170px;margin:0;z-index:4}.ui-playing .play-heading{padding-right:185px;min-height:44px}.ui-playing #play-surface.compact-play,.ui-playing #play-surface{height:auto;min-height:0}.ui-playing .workspace.play-mode{display:grid;grid-template-columns:minmax(0,1fr) 200px;grid-template-rows:1fr;height:calc(100svh - 60px);min-height:240px;max-height:none}.ui-playing .play-mode .board-wrap{height:100%;min-height:230px}.ui-playing .play-mode aside{height:auto;padding:10px;overflow-y:auto}.ui-playing .tutorial-top{right:225px;top:55px}.workspace.draw-mode .board-wrap{height:70svh}}
@media(prefers-reduced-motion:reduce){#tutorial-hand{animation:none!important;transform:translate(calc(var(--finger-dx) - 14px),calc(var(--finger-dy) - 6px))}.tap-hand{transform:translate(-14px,-6px)!important}}
[hidden]{display:none!important}

.publish-preview{background:#f6f7fa;border:1px solid var(--line);border-radius:12px;max-height:260px;overflow:hidden}.publish-preview>svg{display:block;width:100%;height:240px}.color-swatches{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px}.color-swatches button{position:relative;width:34px;height:44px;min-height:44px;padding:0;border:0;background:transparent}.color-swatches button:before{content:'';position:absolute;inset:8px 3px;border-radius:50%;background:var(--swatch);border:1px solid #ccd5e4}.color-swatches button[aria-pressed=true]:before{outline:2px solid var(--blue);outline-offset:2px}.download-colors{gap:15px}.download-colors>label{min-width:0}

#tutorial-spotlight{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#tutorial-hand{animation-timing-function:linear;animation-delay:0s;opacity:1;will-change:transform}#tutorial-hand.tap-hand{animation-timing-function:ease-in-out}.stage-pieces.unrevealed{height:104px;margin:5px 0}.stage-pieces.unrevealed .stage-frame{flex:1;width:100%;height:100%;color:#1a2240}.stage-card{min-height:170px;justify-content:space-between}

#publish-error[data-success=true]{color:#187c69}

/* Creator onboarding stays beside the real workflow and never captures canvas input. */
#creator-guide{display:flex;align-items:center;gap:8px;max-width:900px;margin:0 auto 12px;padding:10px 12px;border:1px solid #dce4f5;border-radius:12px;background:#eef3ff;min-height:62px}
#creator-guide>div{flex:1;min-width:0}#creator-guide-step{font-size:10px;letter-spacing:1.5px;color:#365ce5;font-weight:700}#creator-guide-text{margin:4px 0 0;font-size:13px;line-height:1.4;color:#1a2240}
#creator-guide button{border:0;min-height:44px;padding:6px 10px;background:transparent;font-size:12px;flex:none}#creator-guide-next{color:#365ce5;font-weight:700}#creator-guide-skip{color:#67748b}
@media(max-width:800px){#creator-guide{gap:2px;padding:8px 10px}#creator-guide-text{font-size:12px}#creator-guide button{padding:5px 7px;font-size:11px}.ui-author:has(#creator-guide:not([hidden])) .workspace.draw-mode .board-wrap{height:max(330px,calc(100svh - 335px));min-height:330px}}

/* Shared card language: title + preview, with management actions outside the play button. */
.community-card-wrap>.stage-card{width:100%;flex:1}.community-card-wrap .stage-number,.weekly-picks .stage-number{font-size:11px;font-weight:500;letter-spacing:0;color:var(--muted)}
.stage-title{overflow-wrap:anywhere;line-height:1.4}.stage-pieces{height:104px;margin:5px 0}.stage-card .puzzle-metrics{margin-top:8px;font-size:11px;text-align:center;color:var(--muted)}.stage-card .puzzle-metrics>span{display:block;margin-top:3px}.stage-frame{color:#1a2240}
#creator-guide-next{max-width:145px;white-space:normal;line-height:1.3}

/* Keep tab contrast on hover, including the legacy selected:hover rule. */
.catalog-tabs button[aria-selected=false]:hover{background:#dce5fb;color:#2346c0}
.catalog-tabs button[aria-selected=true]:hover,.catalog-tabs button[aria-selected=true]:focus-visible{background:#294dcc;color:#fff}
/* The finger and circular opening share one animation so they cannot drift apart.
   A CSS shadow shades the viewport; no SVG hidden property or mask dependency. */
#guide-motion{position:absolute;width:39px;height:48px;transform-origin:14px 6px;animation:guide-focus-move 2.6s linear infinite;will-change:transform;pointer-events:none}
#guide-motion.tap-hand{animation:guide-tap 1.3s ease-in-out infinite!important}
#tutorial-spotlight{position:absolute;inset:auto;left:-59px;top:-67px;width:146px;height:146px;border-radius:50%;background:transparent;box-shadow:0 0 0 200vmax rgb(0 0 0 / .45);pointer-events:none}
#tutorial-hand{left:0;top:0;animation:none!important;transform:none!important;opacity:1;will-change:auto}
@keyframes guide-focus-move{0%{transform:translate(-14px,-6px)}85%,100%{transform:translate(calc(var(--finger-dx) - 14px),calc(var(--finger-dy) - 6px))}}
@media(prefers-reduced-motion:reduce){#guide-motion{animation:none!important;transform:translate(calc(var(--finger-dx) - 14px),calc(var(--finger-dy) - 6px))}#guide-motion.tap-hand{animation:none!important;transform:translate(-14px,-6px)}}

/* Use the same container width for drawing and grouping. Rotated SVG artwork
   fits inside the fixed grid cells instead of determining their width. */
.ui-author:not(.ui-playing) .workspace>aside{min-width:0}
@media(max-width:800px){.ui-author:not(.ui-playing) .workspace>.board-wrap,.ui-author:not(.ui-playing) .workspace>aside{width:100%;min-width:0;align-self:stretch}}

/* Production ad placement: desktop sidebar; below the workspace on phones.
   One existing manual ad unit, no timer refresh and no ads under guide overlays. */
.site-shell>.app{max-width:1020px}.site-shell.has-ads{padding-right:200px}
.app>footer{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:28px 0 16px;font-size:12px}
@media(max-width:1100px){.site-shell.has-ads{padding-right:0}.site-shell.ad-after-workspace>.site-ad{margin:64px auto 24px}.site-shell:not(.ad-after-workspace)>.site-ad{margin:16px auto 40px}}

/* Keep sharing reachable before solving, without reducing canvas height. */
#play-share{flex:none;width:44px;min-width:44px;min-height:44px;padding:9px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:12px}
#play-share svg{display:block;width:23px;height:23px;pointer-events:none}
#play-share:hover{background:#eef3ff;color:var(--blue)}
.ui-playing #play-heading:has(#play-share:not([hidden])):after{display:none}
@media(max-width:420px){.compact-play .play-heading{gap:5px}.compact-play .play-heading .problem-title{min-width:0}.compact-play .problem-rating .like-button{gap:3px;padding:5px}}

/* One compact, URL-only share menu for playing and completed puzzles. */
#challenge-dialog.share-menu{box-sizing:border-box;width:min(380px,calc(100% - 32px));padding:24px;border-radius:20px}
#challenge-dialog.share-menu h2{margin:0 40px 20px 0;font-size:20px}
.share-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.share-options .share-option{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:92px;margin:0;padding:14px 8px;border:1px solid var(--line);border-radius:14px;background:#f5f7ff;color:var(--blue);font:inherit;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.share-options .share-option svg{display:block;width:26px;height:26px;flex:none}
.share-options .share-option:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.share-options .share-option:active{background:#e5ebff}
.share-options .share-option:disabled{opacity:.5;cursor:wait}
@media(hover:hover){.share-options .share-option:hover{background:#e5ebff;color:var(--blue)}}
#challenge-dialog #challenge-message{display:block;min-height:20px;margin:12px 0 0;font-size:12px;line-height:20px;color:var(--muted)}
#challenge-manual{margin-top:14px}#challenge-manual input{user-select:text;-webkit-user-select:text;touch-action:auto}
@media(max-width:600px){#challenge-dialog.share-menu{position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:480px;max-height:85dvh;border-radius:22px 22px 0 0;padding:24px 20px calc(20px + env(safe-area-inset-bottom,0px))}}

/* Catalog ads span both mobile cards. Reserve space before loading, including no-fill,
   so an arriving ad cannot move a puzzle under the user's finger. */
.catalog-ad{grid-column:1/-1;min-width:0;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;margin:14px 0;padding:10px 0;background:transparent;border:0;border-top:1px solid #dce2ee;border-bottom:1px solid #dce2ee;min-height:204px}
.catalog-ad-label{display:block;text-align:center;font-size:11px;line-height:14px;color:#67748b;letter-spacing:.04em}
.catalog-ad .catalog-ad-unit{display:block;width:100%;height:160px}
.catalog-ad-unavailable{visibility:hidden}

.catalog-ad-panel:not([hidden]){display:flex;flex-direction:column;gap:24px}
.catalog-card-batch{display:contents}

/* A quiet blue/mint highlight in the existing Grid Puzzle palette. */
.weekly-picks{background:linear-gradient(125deg,#edf2ff,#edfaf5);border:1px solid #b8c9ee;border-top:3px solid #365ce5;box-shadow:0 4px 16px #365ce50b;border-radius:16px;padding:16px;margin-bottom:22px}
.weekly-heading{gap:12px}.weekly-heading h2{color:#253e94;font-size:18px}.weekly-heading .eyebrow{color:#526bb0;letter-spacing:.12em;font-size:10px}
.weekly-heading>span{font-size:11px;flex-shrink:0;color:#47615f;background:#ffffffb3;border-radius:20px;padding:5px 9px}
.weekly-picks .stage-card{background:#fff;border-color:#cdd9ed}.weekly-picks .stage-card:hover{border-color:#365ce5;background:#f8faff}

/* The heading contains category, puzzle name and statistics. Never clamp the
   whole heading: the legacy mobile two-line clamp clips the name and metrics. */
.play-heading .problem-title{display:block;-webkit-line-clamp:unset;-webkit-box-orient:initial;overflow:visible;white-space:normal;min-width:0;overflow-wrap:anywhere}
.play-heading .problem-title small{line-height:1.4;letter-spacing:.04em;overflow-wrap:anywhere}
.problem-title .play-metrics{display:block;margin-top:4px;font-size:11px;line-height:1.4;font-weight:500;letter-spacing:0;color:#66738a;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* Game surfaces own pinching and long-press input, including overlay buttons.
   Keep the rest of the page, form fields and exported images native. */
.board-wrap,.board-wrap *,#tray [data-piece],#tray [data-piece] *{touch-action:none}
.board-wrap,.board-wrap *,#tray,#tray *,#author-tray,#author-tray *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#board,.play-solved #board{touch-action:none}
.stage-sort-bar{display:flex;justify-content:flex-end;margin:0 0 12px;min-width:0}
.stage-sort-bar .catalog-sort{max-width:100%;flex-wrap:wrap}
.stage-sort-bar select{min-width:0;max-width:100%}