:root{--ink:#eef4ff;--muted:#94a5bd;--panel:#111d31;--line:#273750;--accent:#ffb247;--accent2:#ff7954;--bg:#07101e}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}body{background-image:radial-gradient(circle at 10% 5%,#143054 0,transparent 30%),radial-gradient(circle at 90% 35%,#251a39 0,transparent 25%)}button,label{font:inherit}.app{min-height:100vh}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,64px);border-bottom:1px solid rgba(255,255,255,.08);background:rgba(7,16,30,.8);backdrop-filter:blur(16px);position:sticky;top:0;z-index:9}.brand{display:flex;align-items:center;gap:11px;font-weight:800;color:white;background:none;border:0;cursor:pointer}.mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent);color:#172031;font-size:21px}.stats{display:none;gap:10px;color:var(--muted);font-size:.9rem}.game-on .stats{display:flex}.stats span{padding:8px 12px;border:1px solid var(--line);border-radius:99px}.stats b{color:var(--accent)}
.catalog{width:min(1240px,calc(100% - 36px));margin:auto;padding:58px 0 80px}.catalog-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;margin-bottom:35px}.eyebrow{color:var(--accent);letter-spacing:.18em;font-size:.75rem;font-weight:850}.catalog h1{font:500 clamp(3.3rem,7vw,6.2rem)/.92 Georgia,serif;letter-spacing:-.055em;margin:.18em 0 0}.quick-settings{background:rgba(17,29,49,.9);border:1px solid var(--line);border-radius:16px;padding:14px}.quick-settings>span{display:block;font-size:.72rem;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.1em;margin:0 0 9px}.piece-options{display:grid;grid-template-columns:repeat(4,54px);gap:6px}.piece-btn{background:#0a1424;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:8px 3px;cursor:pointer}.piece-btn:hover{color:white}.piece-btn.active{background:var(--accent);border-color:var(--accent);color:#142033;font-weight:850}
.upload-card{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 20px;margin-bottom:30px;border:1px dashed #536780;border-radius:16px;background:rgba(12,24,42,.72);transition:.2s}.upload-card.drag{border-color:var(--accent);background:#17253a;transform:scale(1.005)}.upload-card>div{display:flex;align-items:center;gap:14px}.upload-card strong,.upload-card small{display:block}.upload-card small{color:var(--muted);margin-top:3px}.upload-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--accent);color:#132033;font-size:23px}.upload-action{position:relative;background:white;color:#102038;border-radius:9px;padding:10px 15px;font-weight:800;cursor:pointer}.upload-action input{position:absolute;opacity:0;pointer-events:none}.filters{display:flex;gap:8px;overflow-x:auto;padding:2px 0 18px;scrollbar-width:none}.filter{white-space:nowrap;border:1px solid var(--line);background:#101b2c;color:#aebbd0;padding:9px 13px;border-radius:99px;cursor:pointer}.filter.active{background:#eef4ff;color:#0b1627;border-color:#eef4ff;font-weight:800}.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{position:relative;display:block;color:white;text-decoration:none;background:#101b2c;border:1px solid var(--line);border-radius:15px;overflow:hidden;transition:.22s}.card:hover{transform:translateY(-4px);border-color:#64758c;box-shadow:0 16px 35px rgba(0,0,0,.3)}.thumb{aspect-ratio:6/5;background-repeat:no-repeat;background-size:cover;background-position:center;background-color:#1a2940}.card-copy{display:flex;justify-content:space-between;align-items:center;padding:12px 13px}.card-copy span{font-weight:750}.card-copy small{color:var(--accent);font-weight:800}.card-num{position:absolute;top:9px;left:9px;background:rgba(6,14,25,.75);backdrop-filter:blur(8px);padding:5px 8px;border-radius:99px;font-size:.7rem}
.hidden{display:none!important}.game{height:calc(100vh - 72px);display:flex;flex-direction:column;padding:16px clamp(8px,3vw,40px) 24px}.gamebar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:12px;gap:10px}.gamebar>strong{text-align:center}.game-actions{display:flex;justify-content:flex-end;gap:7px}.ghost{border:1px solid var(--line);color:#c5d0df;background:#101b2c;border-radius:9px;padding:9px 13px;cursor:pointer}.ghost:hover{border-color:#667b96;color:white}.board-wrap{position:relative;flex:1;min-height:0;background:#050b14;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:inset 0 0 60px rgba(0,0,0,.45)}#board{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#board.dragging{cursor:grabbing}.help{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:rgba(9,17,31,.84);border:1px solid var(--line);color:var(--muted);padding:8px 13px;border-radius:99px;font-size:.82rem;pointer-events:none;transition:.5s}.help.fade{opacity:0}
dialog{border:1px solid var(--line);border-radius:22px;background:#101b2d;color:white;text-align:center;padding:36px;width:min(430px,calc(100% - 32px));box-shadow:0 30px 100px #000}dialog::backdrop{background:rgba(2,7,13,.45)}dialog h2{font:500 3.5rem Georgia,serif;margin:7px}dialog p{color:var(--muted)}dialog b{color:white}.confetti{font-size:2.5rem;color:var(--accent)}.win-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:22px}.primary{border:0;border-radius:10px;padding:11px 14px;background:linear-gradient(120deg,var(--accent),var(--accent2));color:#152033;font-weight:850;cursor:pointer}
@media(max-width:980px){.gallery{grid-template-columns:repeat(3,1fr)}}@media(max-width:720px){.topbar{height:62px}.catalog{padding-top:35px}.catalog-head{grid-template-columns:1fr;gap:24px}.quick-settings{width:100%}.piece-options{grid-template-columns:repeat(8,1fr)}.gallery{grid-template-columns:repeat(2,1fr);gap:11px}.game{height:calc(100vh - 62px)}.gamebar{grid-template-columns:1fr 1fr}.gamebar>strong{display:none}.ghost{font-size:.8rem;padding:8px}.upload-card{align-items:flex-start}.upload-card>div{align-items:flex-start}}@media(max-width:460px){.catalog{width:calc(100% - 24px)}.catalog h1{font-size:3.25rem}.piece-options{grid-template-columns:repeat(4,1fr)}.gallery{grid-template-columns:1fr}.upload-card{display:grid}.upload-action{text-align:center}.stats span:first-child{display:none}}
.topbar{height:auto;min-height:82px;padding-top:7px;padding-bottom:7px}.brand-stack{display:grid;gap:3px}.brand{padding:0}.language-control{margin-left:45px}.language-control select{appearance:none;border:0;background:transparent;color:var(--muted);font:700 .76rem/1.3 Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer;padding:1px 20px 1px 0;background-image:linear-gradient(45deg,transparent 50%,#94a5bd 50%),linear-gradient(135deg,#94a5bd 50%,transparent 50%);background-position:calc(100% - 7px) 55%,calc(100% - 3px) 55%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}.language-control select:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}.language-control option{background:#101b2c;color:white}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.stats>span{padding:8px 12px;border:1px solid var(--line);border-radius:99px}.stats>span #total,.stats>span #placed,.stats>span #placedLabel{padding:0;border:0}
@media(max-width:720px){.topbar{min-height:72px}.game{height:calc(100vh - 72px)}}@media(max-width:460px){.topbar{padding-inline:12px}.brand{font-size:.9rem}.mark{width:30px;height:30px}.language-control{margin-left:41px}.stats>span:first-child{display:none}}
.catalog-head{grid-template-columns:minmax(0,1fr) minmax(430px,.82fr);align-items:stretch}.upload-card-hero{height:100%;min-height:180px;margin:0;align-self:stretch}.upload-card-hero>div{align-self:center}.upload-card-hero .upload-action{align-self:center}.quick-settings-wide{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:0 0 22px;padding:14px 18px}.quick-settings-wide>span{margin:0;white-space:nowrap}.quick-settings-wide .piece-options{display:grid;grid-template-columns:repeat(8,minmax(54px,1fr));width:min(760px,100%)}.filters{display:flex;flex-wrap:wrap;overflow:visible;gap:8px;padding-bottom:18px}.filter{flex:0 0 auto}.card[hidden]{display:none!important}
@media(max-width:900px){.catalog-head{grid-template-columns:1fr}.upload-card-hero{min-height:0}.quick-settings-wide{align-items:flex-start;flex-direction:column}.quick-settings-wide .piece-options{width:100%}}@media(max-width:720px){.quick-settings-wide .piece-options{grid-template-columns:repeat(4,1fr)}}@media(max-width:460px){.upload-card-hero{display:grid}}
/* Playful navy layout */
:root{--ink:#f8fbff;--muted:#9eb2c8;--panel:#203c58;--line:#31536f;--accent:#ffbe50;--accent2:#ff8066;--bg:#163b58}
html,body{background:#163b58;font-family:ui-rounded,"Arial Rounded MT Bold",Nunito,Inter,system-ui,sans-serif}body{background-image:none;overflow-x:hidden}body:before{content:"";position:absolute;z-index:0;left:-115px;top:-115px;width:335px;height:335px;border-radius:50%;background:#5c581c;filter:blur(2px);opacity:.72;pointer-events:none}.app{position:relative;z-index:1}
.topbar{position:relative;top:auto;width:min(1240px,calc(100% - 36px));min-height:88px;margin:auto;padding:14px 0;border:0;background:transparent;backdrop-filter:none}.brand-stack{display:block}.brand{font-size:1.26rem;font-weight:900;text-shadow:0 2px 0 #0c253a}.mark{width:52px;height:52px;border-radius:15px 20px 14px 19px;background:#ffba35;font-size:27px;box-shadow:0 6px 0 #ad7418;transform:rotate(-4deg)}.language-control{position:absolute;right:0;top:15px;margin:0}.language-control select{min-height:48px;padding:0 42px 0 16px;border:2px solid #42627c;border-radius:15px;background-color:#183a56;color:#fff;font-size:.82rem;background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%}
.catalog{width:min(1240px,calc(100% - 36px));padding:5px 0 80px}.catalog-head{grid-template-columns:1.1fr .9fr;min-height:185px;gap:42px;margin-bottom:20px}.catalog-head .eyebrow{display:none}.catalog h1{font:900 clamp(3.4rem,6.4vw,6rem)/.91 ui-rounded,"Arial Rounded MT Bold",Nunito,system-ui,sans-serif;letter-spacing:-.055em;margin:.15em 0 0;max-width:720px}.catalog h1::first-line{color:#fff}.upload-card-hero{min-height:170px;border:3px dashed #61e7a1;border-radius:26px;background:#1a405e;box-shadow:12px 12px 0 #102e46;padding:22px;justify-content:center;text-align:center;transform:rotate(.5deg)}.upload-card-hero>div{display:grid;justify-items:center}.upload-card-hero .upload-icon{width:36px;height:36px;background:transparent;color:#b8cce0}.upload-card-hero strong{font-size:1.22rem}.upload-card-hero small{color:#9eb2c8}.upload-card-hero .upload-action{background:#ffbe50;margin-left:12px}
.quick-settings-wide{border:0;border-radius:23px;background:#28445f;box-shadow:0 8px 0 #0e293f;padding:18px;margin-bottom:25px;display:block}.quick-settings-wide>span{font-size:.82rem;color:#fff;margin:0 0 14px}.quick-settings-wide .piece-options{width:100%;grid-template-columns:repeat(4,1fr);gap:8px}.piece-btn{min-height:48px;border:0;border-radius:14px;background:#102e47;color:#fff;font-weight:900;box-shadow:0 4px 0 #071d2e}.piece-btn:hover{background:#173b59}.piece-btn.active{background:#ffbc4d;color:#14324b;box-shadow:0 4px 0 #b8771d}
.filters{gap:8px 9px;margin-bottom:2px}.filter{border:0;background:#1e4663;color:#fff;padding:10px 15px;font-weight:850}.filter.active{background:#68d1ff;color:#0d3048}.gallery{grid-template-columns:repeat(3,1fr);gap:18px}.card{border:0;border-radius:12px;background:#0d2a43;box-shadow:0 5px 0 #081e30}.card:hover{border:0;box-shadow:0 9px 0 #081e30;transform:translateY(-4px)}.thumb{border-radius:10px 10px 0 0}.card-copy{padding:13px}.card-copy span{font-weight:900}.card-copy small{color:#ffbd4a}.card-num{background:#17354c;color:#fff}
@media(max-width:900px){.catalog-head{grid-template-columns:1.05fr .95fr;gap:24px}.catalog h1{font-size:clamp(3.2rem,7vw,4.8rem)}.upload-card-hero{min-height:165px}.gallery{grid-template-columns:repeat(3,1fr)}}@media(max-width:720px){body:before{width:240px;height:240px}.catalog-head{grid-template-columns:1fr}.catalog h1{font-size:3.6rem}.upload-card-hero{min-height:145px}.quick-settings-wide .piece-options{grid-template-columns:repeat(4,1fr)}.gallery{grid-template-columns:repeat(2,1fr)}}@media(max-width:460px){.topbar,.catalog{width:calc(100% - 24px)}.brand{font-size:1rem}.mark{width:43px;height:43px}.language-control select{max-width:135px}.catalog h1{font-size:3.15rem}.gallery{grid-template-columns:1fr}}
.catalog h1 em{font-style:normal;color:#ff8066}.upload-card-hero{position:relative}.upload-card-hero:focus-within{outline:3px solid #ffbe50;outline-offset:4px}.upload-card-hero>div{pointer-events:none}.upload-card-hero .upload-action{position:absolute;inset:0;margin:0;padding:0;opacity:0}
/* Brushed silver controls */
.catalog-head>div:first-child{display:flex;align-items:center;transform:translateY(-7px)}.quick-settings-wide>span{display:block;text-align:center;font-size:1.08rem;line-height:1.1;margin:0 0 12px;color:#f8fbff}
.piece-btn,.filter,.ghost,.primary,.language-control select{background-color:#cbd2d8;background-image:linear-gradient(118deg,#f8fafb 0%,#a7b0b9 18%,#eef2f4 34%,#8d98a3 52%,#e8ecef 70%,#aab3bc 86%,#f5f7f8 100%);background-size:220% 100%;color:#102d46;border:1px solid #f7f9fa;font-weight:900;text-shadow:0 1px 0 #ffffffaa;box-shadow:inset 0 1px 0 #fff,0 4px 0 #65717c;transition:background-position .3s ease,transform .16s ease,box-shadow .16s ease}.piece-btn:hover,.filter:hover,.ghost:hover,.primary:hover,.language-control select:hover{background-position:100% 0;color:#102d46;transform:translateY(-1px)}.piece-btn.active{background-image:linear-gradient(118deg,#fff 0%,#c4ccd3 20%,#f7f9fa 43%,#9ea8b1 65%,#eef1f3 100%);color:#102d46;border-color:#ffc052;box-shadow:inset 0 0 0 3px #ffc052,inset 0 1px 0 #fff,0 4px 0 #99681c}.filter.active{background-image:linear-gradient(118deg,#f9fdff 0%,#b5c6d2 23%,#eefaff 48%,#92afc1 70%,#f5fbff 100%);color:#102d46;border-color:#68d1ff;box-shadow:inset 0 0 0 3px #68d1ff,inset 0 1px 0 #fff,0 4px 0 #396f8a}.language-control select{border-color:#edf2f5;background-color:#cbd2d8;color:#102d46}.ghost,.primary{border-radius:10px}
@media(prefers-reduced-motion:reduce){.piece-btn,.filter,.ghost,.primary,.language-control select{transition:none}}
.language-control select{appearance:auto;padding-right:12px}
/* Calm hover: keep the metallic finish fixed and only lift the control. */
.piece-btn,.filter,.ghost,.primary,.language-control select{transition:transform .16s ease,box-shadow .16s ease}
.piece-btn:hover,.filter:hover,.ghost:hover,.primary:hover,.language-control select:hover{background-color:#cbd2d8;background-image:linear-gradient(118deg,#f8fafb 0%,#a7b0b9 18%,#eef2f4 34%,#8d98a3 52%,#e8ecef 70%,#aab3bc 86%,#f5f7f8 100%);background-position:0 0;color:#102d46;transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 6px 0 #65717c}
.piece-btn.active:hover{background-image:linear-gradient(118deg,#fff 0%,#c4ccd3 20%,#f7f9fa 43%,#9ea8b1 65%,#eef1f3 100%);border-color:#ffc052;box-shadow:inset 0 0 0 3px #ffc052,inset 0 1px 0 #fff,0 6px 0 #99681c}
.filter.active:hover{background-image:linear-gradient(118deg,#f9fdff 0%,#b5c6d2 23%,#eefaff 48%,#92afc1 70%,#f5fbff 100%);border-color:#68d1ff;box-shadow:inset 0 0 0 3px #68d1ff,inset 0 1px 0 #fff,0 6px 0 #396f8a}
/* Fixed silver surface and stronger puzzle controls. */
.quick-settings-wide>span{font-size:1.28rem;font-weight:950;letter-spacing:.035em}
.piece-btn,.piece-btn:hover{background-size:100% 100%;background-position:center!important;font-size:1.1rem;font-weight:950}
.mark{background:#0b2b47;box-shadow:0 6px 0 #061b2d}
/* Fine woven silver, inspired by the supplied metallic mesh reference. */
:root{--silver-mesh:repeating-linear-gradient(28deg,rgba(255,255,255,.34) 0 1px,rgba(88,96,104,.16) 1px 2px,transparent 2px 4px),repeating-linear-gradient(118deg,rgba(58,66,74,.2) 0 1px,rgba(255,255,255,.28) 1px 2px,transparent 2px 4px),linear-gradient(145deg,#eef1f3 0%,#9aa2aa 28%,#d8dde0 52%,#858e97 76%,#e7eaec 100%)}
.piece-btn,.filter,.ghost,.primary,.language-control select,.piece-btn:hover,.filter:hover,.ghost:hover,.primary:hover,.language-control select:hover,.piece-btn.active,.piece-btn.active:hover,.filter.active,.filter.active:hover{background-color:#b7bec4;background-image:var(--silver-mesh)!important;background-size:4px 4px,4px 4px,100% 100%;background-position:0 0!important}
/* Cookie-dough controls */
:root{--cookie-dough:radial-gradient(ellipse at 14% 25%,#4a2416 0 2px,transparent 2.5px),radial-gradient(ellipse at 72% 28%,#60331f 0 2.5px,transparent 3px),radial-gradient(ellipse at 43% 72%,#3d2117 0 2px,transparent 2.6px),radial-gradient(ellipse at 88% 76%,#704129 0 1.8px,transparent 2.4px),radial-gradient(circle at 28% 58%,#9a6437 0 1.4px,transparent 2px),linear-gradient(145deg,#f5ce8b 0%,#d99a53 42%,#efbd73 72%,#c9823e 100%)}
.piece-btn,.filter,.ghost,.primary,.language-control select,.piece-btn:hover,.filter:hover,.ghost:hover,.primary:hover,.language-control select:hover,.piece-btn.active,.piece-btn.active:hover,.filter.active,.filter.active:hover{background-color:#dfa45e;background-image:var(--cookie-dough)!important;background-size:38px 30px,43px 34px,36px 31px,47px 35px,32px 28px,100% 100%;background-position:0 0,8px 3px,17px 7px,3px 11px,12px 15px,0 0!important;color:#3b2118;border:2px solid #f5cf8d;text-shadow:0 1px 0 #ffe5b7;box-shadow:inset 0 2px 0 #ffe0a8,inset 0 -2px 0 #b96c32,0 4px 0 #75401f}
.piece-btn:hover,.filter:hover,.ghost:hover,.primary:hover,.language-control select:hover{transform:translateY(-2px);box-shadow:inset 0 2px 0 #ffe0a8,inset 0 -2px 0 #b96c32,0 6px 0 #75401f}
.piece-btn.active,.piece-btn.active:hover{border-color:#ffd95c;box-shadow:inset 0 0 0 3px #ffd95c,inset 0 2px 0 #fff0bf,0 5px 0 #8b561c}
.filter.active,.filter.active:hover{border-color:#79dcff;box-shadow:inset 0 0 0 3px #79dcff,inset 0 2px 0 #fff0bf,0 5px 0 #356d82}
/* Calm blue-grey controls */
.piece-btn,.filter,.ghost,.primary,.language-control select,.piece-btn:hover,.filter:hover,.ghost:hover,.primary:hover,.language-control select:hover{background:#d7e1e9!important;background-image:linear-gradient(180deg,#edf3f7 0%,#c5d2dc 100%)!important;background-size:100% 100%;background-position:0 0!important;color:#15344d;border:1px solid #f6f9fb;text-shadow:0 1px 0 #fff;box-shadow:inset 0 1px 0 #fff,0 4px 0 #71889a}
.piece-btn:hover,.filter:hover,.ghost:hover,.primary:hover,.language-control select:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 6px 0 #71889a}
.piece-btn.active,.piece-btn.active:hover{background:#ffc15a!important;background-image:linear-gradient(180deg,#ffd783 0%,#f1a93e 100%)!important;color:#17344a;border-color:#ffe3a6;box-shadow:inset 0 1px 0 #fff0c8,0 5px 0 #a66b20}
.filter.active,.filter.active:hover{background:#70d4f7!important;background-image:linear-gradient(180deg,#9be4ff 0%,#55bde7 100%)!important;color:#11354d;border-color:#c8f1ff;box-shadow:inset 0 1px 0 #e8faff,0 5px 0 #347b9a}
/* Nordic Playroom demo palette */
.mark{background:#ff8066;box-shadow:0 6px 0 #a64035;transform:rotate(-7deg);border:2px solid #ffb19f}
.brand{letter-spacing:-.02em}.brand #brandName{color:#fff;text-shadow:2px 2px 0 #12334a}.brand #brandName::first-letter{color:#ffc857}
.piece-btn,.piece-btn:hover{background:#8fddf4!important;background-image:linear-gradient(180deg,#b8ecfa 0%,#77cce8 100%)!important;color:#12334a;border:2px solid #d9f6ff;box-shadow:inset 0 2px 0 #e8faff,0 5px 0 #3c89a4}
.piece-btn:hover{transform:translateY(-2px);box-shadow:inset 0 2px 0 #e8faff,0 7px 0 #3c89a4}
.filter,.filter:hover{background:#8edbb5!important;background-image:linear-gradient(180deg,#afe9ca 0%,#75cda1 100%)!important;color:#123b34;border:2px solid #d5f5e4;box-shadow:inset 0 2px 0 #effcf5,0 4px 0 #347d60}
.filter:hover{transform:translateY(-2px);box-shadow:inset 0 2px 0 #effcf5,0 6px 0 #347d60}
.piece-btn.active,.piece-btn.active:hover,.filter.active,.filter.active:hover{background:#ffc857!important;background-image:linear-gradient(180deg,#ffdb7b 0%,#f3ae35 100%)!important;color:#12334a;border-color:#fff0bd;box-shadow:inset 0 2px 0 #fff5d8,0 5px 0 #a76b19}
.ghost,.primary,.ghost:hover,.primary:hover{background:#ff8066!important;background-image:linear-gradient(180deg,#ff9d89 0%,#f36d55 100%)!important;color:#fff;border:2px solid #ffc1b4;text-shadow:0 1px 0 #9f3f32;box-shadow:inset 0 2px 0 #ffd2c9,0 4px 0 #9f3f32}
.ghost:hover,.primary:hover{transform:translateY(-2px);box-shadow:inset 0 2px 0 #ffd2c9,0 6px 0 #9f3f32}
.language-control select,.language-control select:hover{background:#e8f4fa!important;background-image:linear-gradient(180deg,#fff 0%,#cee3ee 100%)!important;color:#12334a;border:2px solid #fff;box-shadow:0 4px 0 #6e96aa;text-shadow:none}
.quick-settings-wide{background:#294d69}.upload-card-hero{background:#1d4966;border-color:#8edbb5}
/* Three-colour edition: navy, sky blue and sunshine yellow. */
:root{--navy:#163b58;--sky:#8fddf4;--sun:#ffc857;--bg:var(--navy);--panel:var(--navy);--accent:var(--sun);--accent2:var(--sun)}
html,body{background:var(--navy)}body:before{background:#12334a}.catalog h1 em{color:var(--sun)}
.mark{background:var(--sun);border-color:#ffe39a;box-shadow:0 6px 0 #a76b19}.brand #brandName::first-letter{color:inherit}
.quick-settings-wide{background:#214966}.upload-card-hero{background:#214966;border-color:var(--sky)}
.piece-btn,.piece-btn:hover{background:var(--sky)!important;background-image:linear-gradient(180deg,#b9edfa 0%,var(--sky) 100%)!important;color:var(--navy);border-color:#dff7fd;box-shadow:inset 0 2px 0 #eafaff,0 5px 0 #3c89a4}
.filter,.filter:hover{background:var(--navy)!important;background-image:linear-gradient(180deg,#214966 0%,var(--navy) 100%)!important;color:#fff;border-color:var(--sky);box-shadow:inset 0 1px 0 #8fddf455,0 4px 0 #0c293f}
.piece-btn.active,.piece-btn.active:hover,.filter.active,.filter.active:hover{background:var(--sun)!important;background-image:linear-gradient(180deg,#ffdc82 0%,var(--sun) 100%)!important;color:var(--navy);border-color:#ffe9ad;box-shadow:inset 0 2px 0 #fff4d3,0 5px 0 #a76b19}
.ghost,.primary,.ghost:hover,.primary:hover{background:var(--sun)!important;background-image:linear-gradient(180deg,#ffdc82 0%,var(--sun) 100%)!important;color:var(--navy);border-color:#ffe9ad;text-shadow:none;box-shadow:inset 0 2px 0 #fff4d3,0 4px 0 #a76b19}
.language-control select,.language-control select:hover{background:var(--sky)!important;background-image:linear-gradient(180deg,#b9edfa 0%,var(--sky) 100%)!important;color:var(--navy);border-color:#dff7fd;box-shadow:0 4px 0 #3c89a4}
.catalog h1>span{display:block;white-space:nowrap}
@media(max-width:460px){html[lang="id"] .catalog h1{font-size:2.65rem}}
/* Plum edition: one background family, one accent and white. */
:root{--plum:#35264f;--plum-light:#4a3768;--sun:#ffc857;--ink:#fff;--muted:rgba(255,255,255,.72);--panel:var(--plum-light);--line:rgba(255,255,255,.24);--accent:var(--sun);--accent2:var(--sun);--bg:var(--plum)}
html,body{background:var(--plum);color:#fff}body:before{background:var(--plum-light);opacity:.56}
.mark{background:var(--sun);border-color:#ffe5a0;box-shadow:0 6px 0 #9a681d}.catalog h1 em{color:var(--sun)}
.quick-settings-wide,.upload-card-hero{background:var(--plum-light)}.upload-card-hero{border-color:var(--sun);box-shadow:12px 12px 0 #281b3d}.upload-card-hero .upload-icon,.upload-card small{color:#fff}
.piece-btn,.piece-btn:hover,.filter,.filter:hover,.language-control select,.language-control select:hover{background:var(--plum-light)!important;background-image:linear-gradient(180deg,#584376 0%,var(--plum-light) 100%)!important;color:#fff;border:2px solid rgba(255,255,255,.78);text-shadow:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 0 #281b3d}
.piece-btn:hover,.filter:hover,.language-control select:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 0 #281b3d}
.piece-btn.active,.piece-btn.active:hover,.filter.active,.filter.active:hover,.ghost,.primary,.ghost:hover,.primary:hover{background:var(--sun)!important;background-image:linear-gradient(180deg,#ffdb7d 0%,var(--sun) 100%)!important;color:var(--plum);border-color:#ffe9b0;text-shadow:none;box-shadow:inset 0 2px 0 #fff1c9,0 5px 0 #9a681d}
.card{background:#2d2043;box-shadow:0 5px 0 #241936}.card:hover{box-shadow:0 9px 0 #241936}.card-num,.help{background:rgba(53,38,79,.9)}.thumb{background-color:var(--plum-light)}
.card-copy small,.stats b,.confetti{color:var(--sun)}dialog{background:var(--plum-light)}.board-wrap{background:#281b3d}
/* Dark plum + unified orange buttons. Active state uses weight, outline and glow. */
:root{--plum:#281b3d;--plum-light:#3a2955;--orange:#f59a3f;--orange-light:#ffc06f;--bg:var(--plum);--panel:var(--plum-light);--accent:var(--orange);--accent2:var(--orange)}
html,body{background:var(--plum)}body:before{background:var(--plum-light)}.quick-settings-wide,.upload-card-hero,dialog{background:var(--plum-light)}.card{background:#221733}.board-wrap{background:#1e142d}
.mark{background:var(--orange);border-color:var(--orange-light);box-shadow:0 6px 0 #9a551d}.catalog h1 em,.card-copy small,.stats b,.confetti{color:var(--orange)}.upload-card-hero{border-color:var(--orange)}
.piece-btn,.filter,.ghost,.primary,.language-control select,.piece-btn:hover,.filter:hover,.ghost:hover,.primary:hover,.language-control select:hover{background:var(--orange)!important;background-image:linear-gradient(180deg,var(--orange-light) 0%,var(--orange) 100%)!important;color:var(--plum);border:1px solid var(--orange-light);font-weight:700;text-shadow:none;box-shadow:inset 0 1px 0 #ffe0b3,0 4px 0 #914b19}
.piece-btn:hover,.filter:hover,.ghost:hover,.primary:hover,.language-control select:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffe0b3,0 6px 0 #914b19}
.piece-btn.active,.piece-btn.active:hover,.filter.active,.filter.active:hover{background:var(--orange)!important;background-image:linear-gradient(180deg,var(--orange-light) 0%,var(--orange) 100%)!important;color:var(--plum);border:3px solid #ffd59a;font-weight:950;box-shadow:inset 0 0 0 2px #fff0d7,0 0 14px rgba(245,154,63,.52),0 5px 0 #914b19}
/* Match the highlighted puzzle verb to an active button. */
.catalog h1 em{display:inline-block;font-family:"Arial Rounded MT Bold","Trebuchet MS",ui-rounded,system-ui,sans-serif;font-style:normal;color:var(--orange);font-size:1.07em;font-weight:900;letter-spacing:.018em;margin-right:.015em;-webkit-text-stroke:4px #ffd59a;paint-order:stroke fill;text-shadow:0 3px 0 #a94f1c,0 0 12px rgba(245,154,63,.42)}
.catalog h1 .edge-p,.catalog h1 .open-e{display:inline;font:inherit;letter-spacing:inherit;margin:0;transform:none;-webkit-text-stroke:inherit;paint-order:inherit}
@media(max-width:460px){.catalog h1 em{font-size:1.04em;letter-spacing:.01em;margin-right:0;-webkit-text-stroke:2.5px #ffd59a;text-shadow:0 2px 0 #a94f1c,0 0 8px rgba(245,154,63,.38)}}

/* Keep the upload area focused on its message. */
.upload-card-hero .upload-icon{display:none}
.upload-card-hero strong{font-size:1.75rem;line-height:1.12;text-align:center}
.upload-card-hero small{font-size:1.125rem;line-height:1.3;text-align:center;margin-top:.65rem}
@media(max-width:460px){.upload-card-hero strong{font-size:1.4rem}.upload-card-hero small{font-size:1rem;margin-top:.45rem}}
/* Darker inactive orange; active choices stay bright orange. */
:root{--orange-dark:#a94f1c;--orange-dark-top:#c56526}
.piece-btn,.filter,.language-control select,.piece-btn:hover,.filter:hover,.language-control select:hover{background:var(--orange-dark)!important;background-image:linear-gradient(180deg,var(--orange-dark-top) 0%,var(--orange-dark) 100%)!important;color:#fff;border:1px solid #d77a3c;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 0 #652b13}
.piece-btn:hover,.filter:hover,.language-control select:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 0 #652b13}
.piece-btn.active,.piece-btn.active:hover,.filter.active,.filter.active:hover{background:var(--orange)!important;background-image:linear-gradient(180deg,var(--orange-light) 0%,var(--orange) 100%)!important;color:var(--plum);border:3px solid #ffd59a;font-weight:950;box-shadow:inset 0 0 0 2px #fff0d7,0 0 14px rgba(245,154,63,.52),0 5px 0 #914b19}

/* Stronger separation between the plum surfaces. */
.quick-settings-wide{background:#302244;box-shadow:0 8px 0 #171020}
.card{background:#160d22;border:2px solid #100918;box-shadow:0 6px 0 #100918}
.card:hover{border-color:#100918;box-shadow:0 10px 0 #100918}
.card-copy{background:#160d22;border-top:2px solid #100918}

/* Quiet passive controls; orange is reserved for selections and primary actions. */
.piece-btn,.filter,.ghost,.language-control select,.piece-btn:hover,.filter:hover,.ghost:hover,.language-control select:hover{background:#3a2850!important;background-image:linear-gradient(180deg,#46315e 0%,#342346 100%)!important;color:#fff;border:1px solid #665078;font-weight:750;text-shadow:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 0 #171020}
.piece-btn:hover,.filter:hover,.ghost:hover,.language-control select:hover{transform:translateY(-2px);background:#44305b!important;background-image:linear-gradient(180deg,#503968 0%,#3b294f 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 5px 0 #171020}
.piece-btn.active,.piece-btn.active:hover,.filter.active,.filter.active:hover,.primary,.primary:hover{background:var(--orange)!important;background-image:linear-gradient(180deg,var(--orange-light) 0%,var(--orange) 100%)!important;color:var(--plum);border:3px solid #ffd59a;font-weight:950;box-shadow:inset 0 0 0 2px #fff0d7,0 0 14px rgba(245,154,63,.52),0 5px 0 #914b19}

/* Calm water-and-rainbow page atmosphere with a plum readability veil. */
html{background:#1b1230}
body{background-color:#1b1230;background-image:url("assets/dreamy-water-background.webp");background-size:cover;background-position:center top;background-repeat:no-repeat;background-attachment:fixed}
body:before{display:none}
.topbar{background:transparent;border-radius:0}
.quick-settings-wide{background:rgba(48,34,68,.92);backdrop-filter:blur(8px)}
.upload-card-hero{background:rgba(58,41,85,.9);backdrop-filter:blur(8px)}
@media(max-width:720px){body{background-attachment:scroll;background-position:center top}}

/* Wider desktop category controls. */
.mobile-category-select{display:none}
@media(min-width:721px){.filters{justify-content:space-between;column-gap:12px;row-gap:12px}.filter{padding:12px 18px;font-size:1.08rem}}

/* Two compact category controls on phones. */
@media(max-width:720px){.filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-bottom:18px}.filters .filter[data-cat-index]{display:none}.filters>.filter[data-cat="alle"]{width:100%;padding:11px 8px}.mobile-category-select{display:block;width:100%;min-width:0;padding:11px 34px 11px 12px;border:1px solid #665078;border-radius:999px;background:#3a2850;color:#fff;font:750 .95rem/1.2 ui-rounded,"Arial Rounded MT Bold",Nunito,system-ui,sans-serif;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 0 #171020}.mobile-category-select.active{background:var(--orange);color:var(--plum);border:3px solid #ffd59a;font-weight:950;box-shadow:inset 0 0 0 2px #fff0d7,0 0 14px rgba(245,154,63,.52),0 5px 0 #914b19}.mobile-category-select option{background:#302244;color:#fff}}

/* Exactly two balanced category rows on desktop: 9 + 8. */
@media(min-width:900px){.filters{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-auto-rows:minmax(56px,auto);gap:12px}.filter{display:grid;place-items:center;width:100%;min-width:0;min-height:56px;padding:8px 5px;font-size:clamp(.78rem,1vw,1rem);line-height:1.12;text-align:center;white-space:normal;overflow-wrap:break-word;hyphens:auto}}

/* PDF download and watermark controls. */
.watermark-note{position:absolute;right:14px;bottom:14px;padding:7px 11px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(22,13,34,.78);color:rgba(255,255,255,.82);font-size:.72rem;font-weight:800;pointer-events:none;backdrop-filter:blur(8px)}
.watermark-note.logo-free{background:rgba(21,95,64,.82);color:#fff;border-color:rgba(126,239,181,.55)}
.download-dialog{position:relative;width:min(560px,calc(100% - 28px));padding:34px;border:1px solid rgba(255,255,255,.24);background:rgba(48,34,68,.98);text-align:left}
.download-dialog h2{font:900 clamp(2rem,7vw,3.1rem)/1 ui-rounded,"Arial Rounded MT Bold",Nunito,system-ui,sans-serif;margin:8px 0 14px}
.download-dialog>p{color:rgba(255,255,255,.78)}
.dialog-close{position:absolute;right:14px;top:12px;width:38px;height:38px;border:0;border-radius:50%;background:#20152f;color:#fff;font-size:1.6rem;cursor:pointer}
.format-label{display:block;margin:22px 0 8px;color:#fff;font-weight:900}
#pdfFormat{width:100%;min-height:50px;padding:0 14px;border:1px solid #665078;border-radius:12px;background:#21162f;color:#fff;font:900 1rem ui-rounded,"Arial Rounded MT Bold",Nunito,system-ui,sans-serif}
.download-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.download-actions button{min-height:58px;padding:10px 14px;cursor:pointer}
.print-note{font-size:.86rem;line-height:1.45;margin:18px 0 0}.payment-status{min-height:1.4em;margin:12px 0 0!important;color:#ffd59a!important;font-weight:800}
@media(max-width:720px){.game-actions{flex-wrap:wrap}.game-actions #downloadBtn{order:-1}.download-actions{grid-template-columns:1fr}.download-dialog{padding:28px 20px}.watermark-note{font-size:.64rem;right:8px;bottom:8px}}

img.thumb{display:block;width:100%;height:auto;aspect-ratio:6/5;object-fit:cover}

/* 2026-10-06: restored hard-mode motif toggle and compact game navigation. */
.game-on .topbar{align-items:flex-start;padding-top:7px}
.game-on .brand-stack{justify-items:start}
.game-on .brand{align-self:start;justify-self:start}
.game-on .game{padding-left:clamp(20px,4vw,64px)}
.game-on .gamebar{align-items:start}
#backBtn{justify-self:start;width:max-content!important;max-width:100%;padding-inline:10px!important;white-space:nowrap}
#hideMotifBtn[aria-pressed="true"]{background:var(--orange)!important;background-image:linear-gradient(180deg,var(--orange-light) 0%,var(--orange) 100%)!important;color:var(--plum);border-color:#ffd59a;font-weight:950;box-shadow:inset 0 0 0 2px #fff0d7,0 0 14px rgba(245,154,63,.52),0 5px 0 #914b19}
@media(max-width:720px){
  .game-on .game{padding-left:12px;padding-right:12px}
  .gamebar{grid-template-columns:auto minmax(0,1fr)}
  #backBtn{font-size:.72rem;padding:7px 8px!important}
  .game-actions{justify-content:flex-end}
}

/* 2026-10-06: structured desktop game header from the marked layout. */
@media(min-width:721px){
  .game-on .topbar{
    width:100%;
    max-width:none;
    min-height:92px;
    margin:0;
    padding:12px clamp(18px,2.4vw,48px) 10px;
    align-items:flex-start;
  }
  .game-on .brand-stack{display:block}
  .game-on .brand{
    min-width:236px;
    min-height:64px;
    justify-content:flex-start;
    gap:14px;
    padding:4px 8px;
    font-size:clamp(1.32rem,1.45vw,1.65rem);
    line-height:1;
  }
  .game-on .mark{
    width:58px;
    height:58px;
    border-radius:17px 21px 16px 20px;
    font-size:31px;
  }
  .game-on .language-control{
    top:16px;
    right:clamp(18px,2.4vw,48px);
  }
  .game-on .language-control select{
    min-width:190px;
    min-height:54px;
    padding-inline:18px;
    font-size:1rem;
    font-weight:850;
  }
  .game-on .stats{
    position:absolute;
    top:20px;
    right:calc(clamp(18px,2.4vw,48px) + 214px);
  }
  .game-on .game{
    height:calc(100vh - 92px);
    padding:0 clamp(18px,2.4vw,48px) 24px;
  }
  .game-on .gamebar{
    grid-template-columns:236px minmax(280px,1fr) minmax(520px,1fr);
    align-items:center;
    gap:clamp(18px,2.2vw,44px);
    min-height:78px;
    margin:0 0 12px;
  }
  .game-on #backBtn{
    width:236px!important;
    min-height:54px;
    padding:10px 16px!important;
    justify-self:start;
    font-size:1rem;
    font-weight:850;
    text-align:center;
  }
  .game-on .gamebar>strong{
    display:block;
    justify-self:center;
    width:min(100%,520px);
    padding:11px 22px 13px;
    border:1px solid rgba(255,192,111,.72);
    border-radius:18px;
    background:linear-gradient(180deg,rgba(58,40,80,.9),rgba(31,20,46,.94));
    color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 7px 0 rgba(23,16,32,.8),0 0 24px rgba(245,154,63,.2);
    font-size:clamp(1.75rem,2.2vw,2.65rem);
    font-weight:950;
    line-height:1.05;
    letter-spacing:-.025em;
    text-align:center;
    text-shadow:0 2px 0 #171020,0 0 12px rgba(245,154,63,.34);
  }
  .game-on .game-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:9px;
    min-width:0;
  }
  .game-on .game-actions .ghost{
    min-height:48px;
    padding:9px 14px;
    font-size:.93rem;
    white-space:nowrap;
  }
  .game-on #hideMotifBtn{order:1}
  .game-on #peekBtn{order:2}
  .game-on #shuffleBtn{order:3}
  .game-on #downloadBtn{order:4;min-width:190px}
}

@media(min-width:721px) and (max-width:1180px){
  .game-on .stats{display:none}
  .game-on .gamebar{grid-template-columns:205px minmax(220px,.8fr) minmax(430px,1.4fr);gap:14px}
  .game-on .brand,.game-on #backBtn{min-width:205px;width:205px!important}
  .game-on .game-actions{gap:6px}
  .game-on .game-actions .ghost{padding-inline:10px;font-size:.82rem}
  .game-on #downloadBtn{min-width:150px}
}

@media(max-width:720px){
  .game-on .language-control{right:12px;top:12px}
  .game-on .language-control select{min-height:44px;font-size:.82rem}
  .game-on .brand{font-size:1rem}
  .game-on .gamebar>strong{display:block;grid-column:1/-1;grid-row:1;padding:7px 12px;color:#fff;font-size:clamp(1.25rem,6vw,1.75rem);font-weight:950;text-align:center;text-shadow:0 2px 0 #171020}
  .game-on #backBtn{grid-column:1;grid-row:2;width:150px!important;min-height:42px}
  .game-on .game-actions{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:7px}
  .game-on .game-actions .ghost{width:100%;min-height:42px}
  .game-on #downloadBtn{order:4}
}

/* Three-choice outline control shared by the game pieces and generated PDF. */
.line-thickness-field{display:grid;gap:7px;margin-top:14px}
.line-thickness-field label{color:#f4eafa;font-size:.88rem;font-weight:850}
.line-thickness-field select{width:100%;min-height:46px;padding:8px 12px;border:1px solid #ffffff38;border-radius:10px;background:#251735;color:#fff;font:750 1rem ui-rounded,"Arial Rounded MT Bold",Nunito,system-ui,sans-serif}