@import url('data:text/css,');
:root{--ink:#121316;--paper:#f1eee7;--cream:#e8e2d7;--red:#e5583f;--muted:#7f7c75;--line:rgba(18,19,22,.16);--shadow:0 18px 60px rgba(18,19,22,.18);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible{outline:3px solid rgba(229,88,63,.35);outline-offset:3px}.hidden{display:none!important}.topbar{height:74px;position:fixed;z-index:30;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,58px);border-bottom:1px solid var(--line);background:rgba(241,238,231,.9);backdrop-filter:blur(18px)}.brand{border:0;background:none;display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.18em;font-weight:850;cursor:pointer}.brand-mark{width:27px;height:27px;display:grid;grid-template-columns:1fr 1fr;gap:1px;transform:rotate(3deg)}.brand-mark i{background:var(--ink);display:block}.brand-mark i:nth-child(1){border-radius:4px 1px 1px 1px}.brand-mark i:nth-child(2){border-radius:1px 4px 1px 1px}.brand-mark i:nth-child(3){border-radius:1px 1px 1px 4px}.brand-mark i:nth-child(4){border-radius:1px 1px 4px 1px;background:var(--red)}.top-actions{display:flex;align-items:center;gap:5px}.icon-btn{width:42px;height:42px;display:grid;place-items:center;border:0;background:transparent;border-radius:50%;cursor:pointer}.icon-btn:hover{background:rgba(18,19,22,.07)}.icon-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.view{position:absolute;inset:74px 0 0;display:none}.view.active{display:flex}.home-view{padding:clamp(28px,5vw,72px);align-items:center;justify-content:center;gap:clamp(35px,7vw,100px)}.home-copy{width:min(520px,45vw);position:relative;z-index:2}.eyebrow{font-size:11px;letter-spacing:.22em;font-weight:850;margin:0 0 20px;color:var(--red)}h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(46px,6.3vw,94px);line-height:.88;letter-spacing:-.055em;margin:0}h1 em{font-weight:400;color:var(--red)}.lede{font-family:Georgia,"Times New Roman",serif;font-size:18px;line-height:1.6;color:#595750;max-width:460px;margin:30px 0}.primary-btn{border:0;background:var(--ink);color:#fff;padding:17px 21px;font-size:11px;letter-spacing:.16em;font-weight:850;display:inline-flex;align-items:center;justify-content:space-between;gap:30px;cursor:pointer;box-shadow:5px 5px 0 var(--red);transition:.18s}.primary-btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--red)}.primary-btn:disabled{opacity:.38;cursor:not-allowed;transform:none}.text-btn{border:0;background:none;margin-left:22px;font-family:Georgia,serif;font-size:15px;cursor:pointer}.home-stats{display:flex;margin-top:58px;padding-top:20px;border-top:1px solid var(--line);gap:34px}.home-stats div{display:flex;flex-direction:column}.home-stats strong{font-family:Georgia,serif;font-size:24px;font-weight:400}.home-stats span{font-size:8px;letter-spacing:.17em;color:var(--muted);font-weight:800;margin-top:5px}.hero-art{width:min(550px,42vw)}.hero-frame{height:min(58vh,600px);position:relative;background:#b7c0b2;box-shadow:var(--shadow);transform:rotate(1.8deg);border:10px solid #fff;padding:0;overflow:visible}.hero-frame canvas{width:100%;height:100%;display:block}.hero-art>p{text-align:center;font-size:8px;letter-spacing:.16em;font-weight:800;color:var(--muted);margin:24px}.hero-art>p span{width:6px;height:6px;border-radius:50%;display:inline-block;background:#6d9472;margin-right:8px}.loose-piece{position:absolute;width:64px;height:64px;background:var(--red);filter:drop-shadow(4px 8px 8px rgba(0,0,0,.28));clip-path:polygon(0 0,38% 0,38% 15%,62% 15%,62% 0,100% 0,100% 40%,87% 40%,87% 63%,100% 63%,100% 100%,0 100%,0 62%,13% 62%,13% 39%,0 39%)}.piece-one{right:-37px;top:19%;transform:rotate(18deg)}.piece-two{left:-38px;bottom:16%;transform:rotate(-12deg);background:#e8b28a}.game-view{background:#c9c5bb;display:none;overflow:hidden;touch-action:auto}.game-view.active{display:block}.game-view:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(18,19,22,.16) .6px,transparent .6px);background-size:12px 12px;opacity:.35}.game-view canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.game-hud{position:absolute;left:clamp(14px,3vw,36px);top:clamp(14px,3vw,30px);display:flex;gap:10px;pointer-events:none}.progress-card,.timer-card{background:rgba(241,238,231,.92);box-shadow:0 5px 18px rgba(0,0,0,.12);backdrop-filter:blur(10px);height:58px;display:flex;align-items:center}.progress-card{padding:8px 17px 8px 9px;gap:10px}.progress-card>div,.timer-card{flex-direction:column;justify-content:center;align-items:flex-start}.progress-card small,.timer-card small{font-size:7px;letter-spacing:.16em;font-weight:850;color:var(--muted)}.progress-card strong,.timer-card strong{font-family:Georgia,serif;font-weight:400;font-size:14px}.progress-ring{width:42px;height:42px;border:3px solid var(--red);border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif}.progress-ring b{font-size:14px}.progress-ring small{position:absolute;margin:2px 0 0 23px;font-size:6px}.timer-card{padding:9px 18px;min-width:82px}.piece-dock{position:absolute;z-index:4;left:0;right:0;bottom:0;height:112px;padding:10px max(14px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-bottom));display:flex;gap:12px;align-items:stretch;background:rgba(241,238,231,.97);border-top:1px solid rgba(18,19,22,.2);box-shadow:0 -8px 28px rgba(18,19,22,.12);backdrop-filter:blur(14px)}.dock-label{width:72px;flex:0 0 72px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}.dock-label span{font-size:8px;letter-spacing:.16em;font-weight:850}.dock-label small{font-family:Georgia,serif;color:var(--red);font-size:11px;margin-top:5px}.dock-pieces{min-width:0;flex:1;display:flex;align-items:center;gap:9px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--red) transparent;padding:2px 6px 6px}.dock-piece{position:relative;flex:0 0 72px;width:72px;height:72px;border:0;padding:0;background:transparent;cursor:grab;touch-action:pan-x;-webkit-tap-highlight-color:transparent;transition:transform .16s,opacity .16s}.dock-piece canvas{display:block;width:72px;height:72px;overflow:visible;pointer-events:none;filter:drop-shadow(0 4px 3px rgba(18,19,22,.34))}.dock-piece:active{cursor:grabbing}.dock-piece.removing{opacity:0;transform:translateY(-20px)}.dock-empty{margin:auto;color:var(--muted);font-family:Georgia,serif;font-style:italic;font-size:13px}.board-tools{position:absolute;z-index:5;bottom:126px;left:50%;transform:translateX(-50%);display:flex;background:rgba(18,19,22,.93);color:#fff;box-shadow:0 7px 24px rgba(0,0,0,.28)}.board-tools button,.board-tools span{height:43px;min-width:44px;border:0;border-right:1px solid rgba(255,255,255,.14);background:none;color:#fff;display:grid;place-items:center}.board-tools button{font-size:18px;cursor:pointer}.board-tools button:hover{background:var(--red)}.board-tools span{font-size:9px;letter-spacing:.08em;padding:0 5px}.game-hint{position:absolute;right:25px;bottom:25px;font-size:9px;letter-spacing:.1em;font-weight:750;color:rgba(18,19,22,.55)}.modal{position:fixed;inset:0;z-index:60;display:none;place-items:center}.modal.open{display:grid}.modal-backdrop,.menu-backdrop{position:absolute;inset:0;background:rgba(15,16,18,.68);backdrop-filter:blur(4px)}.setup-panel{position:relative;background:var(--paper);width:min(980px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:clamp(28px,4vw,55px);box-shadow:var(--shadow)}.close-btn{position:absolute;right:20px;top:16px;border:0;background:none;font-family:Georgia;font-size:28px;cursor:pointer}.setup-head h2,.complete-card h2{font-family:Georgia,serif;font-size:clamp(34px,4vw,54px);font-weight:400;letter-spacing:-.035em;margin:0}.setup-head>p:last-child{font-family:Georgia,serif;color:var(--muted);margin:9px 0 30px}.setup-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:42px}.image-drop{position:relative;width:100%;aspect-ratio:4/3;border:1px dashed #99938a;background:#ddd8ce;cursor:pointer;overflow:hidden}.image-drop img{width:100%;height:100%;object-fit:cover;display:none}.image-drop.has-image img{display:block}.drop-empty{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}.has-image .drop-empty{display:none}.drop-empty svg{width:38px;fill:none;stroke:var(--red);stroke-width:1.4}.drop-empty strong{font-size:10px;letter-spacing:.16em}.drop-empty small{font-size:9px;color:var(--muted)}.change-photo{position:absolute;right:10px;bottom:10px;background:rgba(18,19,22,.86);color:#fff;font-size:8px;letter-spacing:.14em;padding:9px 10px;display:none}.has-image .change-photo{display:block}.sample-btn{border:0;background:none;color:var(--muted);font-family:Georgia,serif;text-decoration:underline;margin-top:10px;cursor:pointer}.options-column fieldset{border:0;padding:0;margin:0 0 24px}.options-column legend{font-size:9px;letter-spacing:.17em;font-weight:850;margin-bottom:10px}.difficulty-options{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.difficulty-options input{position:absolute;opacity:0}.difficulty-options span{height:76px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;background:rgba(255,255,255,.3)}.difficulty-options b{font-family:Georgia,serif;font-size:24px;font-weight:400}.difficulty-options small{font-size:7px;letter-spacing:.13em;color:var(--muted);margin-top:4px}.difficulty-options input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}.difficulty-options input:checked+span small{color:#c8c5bf}.option-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-top:1px solid var(--line)}.option-row>div{display:flex;flex-direction:column}.option-row strong{font-family:Georgia,serif;font-size:15px;font-weight:400}.option-row small{font-size:9px;color:var(--muted);margin-top:4px}.switch input{display:none}.switch span{width:38px;height:22px;border-radius:20px;background:#aaa59b;display:block;padding:3px;cursor:pointer;transition:.2s}.switch span:before{content:"";display:block;width:16px;height:16px;background:#fff;border-radius:50%;transition:.2s}.switch input:checked+span{background:var(--red)}.switch input:checked+span:before{transform:translateX(16px)}.setup-note{font-family:Georgia,serif;font-size:13px;line-height:1.5;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;margin:4px 0}.setup-note span{color:var(--red);font-family:system-ui;font-weight:900;margin-right:7px}.wide{width:100%;margin-top:23px}.side-menu{position:fixed;inset:0;z-index:70;visibility:hidden}.side-menu.open{visibility:visible}.menu-backdrop{opacity:0;transition:.25s}.side-menu.open .menu-backdrop{opacity:1}.menu-panel{position:absolute;right:0;top:0;bottom:0;width:min(390px,90vw);background:var(--paper);padding:25px 34px;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;transform:translateX(100%);transition:.3s ease}.side-menu.open .menu-panel{transform:none}.menu-header{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em;font-weight:850;padding-bottom:22px;border-bottom:1px solid var(--line)}.menu-header button{border:0;background:none;font-size:25px;cursor:pointer}.menu-panel nav{display:flex;flex-direction:column}.menu-panel nav button{background:none;border:0;border-bottom:1px solid var(--line);padding:21px 0;display:flex;justify-content:space-between;font-family:Georgia,serif;font-size:22px;cursor:pointer;text-align:left}.menu-panel nav button:hover span{color:var(--red)}.menu-settings{margin-top:28px}.menu-settings p{font-size:9px;letter-spacing:.18em;font-weight:850;color:var(--muted)}.menu-settings label{padding:10px 0;display:flex;justify-content:space-between;align-items:center;gap:15px;font-family:Georgia,serif}.menu-settings select{max-width:145px;border:1px solid var(--line);background:#fff;padding:7px 28px 7px 9px;color:var(--ink);font-family:inherit}.menu-panel footer{margin-top:auto;display:flex;flex-direction:column;gap:4px}.menu-panel footer strong{font-size:10px;letter-spacing:.15em}.menu-panel footer small{color:var(--muted);font-size:9px}.preview-overlay{position:fixed;z-index:80;inset:0;background:rgba(10,11,12,.94);display:none;place-items:center;padding:50px}.preview-overlay.open{display:grid}.preview-overlay img{max-width:90vw;max-height:80vh;box-shadow:0 20px 70px #000}.preview-overlay button{position:absolute;right:25px;top:20px;background:none;border:0;color:#fff;font-size:35px;cursor:pointer}.preview-overlay p{position:absolute;bottom:16px;color:#fff;font-size:9px;letter-spacing:.2em}.danger-menu{color:#a43c2b!important}.confirm-card{position:relative;width:min(460px,calc(100vw - 28px));background:var(--paper);padding:clamp(28px,5vw,48px);text-align:center;box-shadow:var(--shadow)}.warning-mark{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 14px;border:2px solid var(--red);border-radius:50%;font-family:Georgia,serif;font-size:27px;color:var(--red)}.confirm-card h2{font-family:Georgia,serif;font-size:clamp(30px,5vw,43px);font-weight:400;line-height:1.05;margin:0 0 14px}.confirm-card>p:not(.eyebrow){font-family:Georgia,serif;color:var(--muted);line-height:1.55}.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:25px}.secondary-btn,.danger-btn{border:1px solid var(--line);padding:14px 10px;background:transparent;font-size:9px;letter-spacing:.12em;font-weight:850;cursor:pointer}.danger-btn{border-color:var(--red);background:var(--red);color:#fff}.secondary-btn:hover{background:#fff}.danger-btn:hover{background:#c84631}.complete-card{position:relative;width:min(520px,calc(100vw - 28px));max-height:calc(100vh - 24px);overflow:auto;background:var(--paper);padding:34px;text-align:center;box-shadow:var(--shadow)}.complete-card h2{margin-bottom:20px}.complete-star{font-size:30px;color:var(--red)}.complete-card .eyebrow{margin:7px 0}.complete-card img{width:100%;max-height:34vh;object-fit:contain;background:#ddd8ce}.complete-stats{display:grid;grid-template-columns:1fr 1fr;margin:15px 0;border:1px solid var(--line)}.complete-stats div{display:flex;flex-direction:column;padding:12px}.complete-stats div+div{border-left:1px solid var(--line)}.complete-stats strong{font-family:Georgia,serif;font-size:20px;font-weight:400}.complete-stats small{font-size:7px;letter-spacing:.17em;color:var(--muted)}.complete-card .text-btn{margin:15px 0 0}.toast{position:fixed;z-index:100;left:50%;bottom:80px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:11px 18px;font-size:10px;letter-spacing:.08em;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
html[dir="rtl"] body{direction:rtl}html[dir="rtl"] .menu-panel{right:auto;left:0;transform:translateX(-100%)}html[dir="rtl"] .side-menu.open .menu-panel{transform:none}html[dir="rtl"] .menu-panel nav button,html[dir="rtl"] .setup-head,html[dir="rtl"] .home-copy{text-align:right}html[dir="rtl"] .close-btn{right:auto;left:20px}html[dir="rtl"] .change-photo{right:auto;left:10px}html[dir="rtl"] .game-hud{left:auto;right:clamp(14px,3vw,36px)}html[dir="rtl"] .primary-btn span,html[dir="rtl"] .text-btn span{transform:scaleX(-1)}
@media(hover:hover) and (pointer:fine){.dock-piece:hover{transform:translateY(-5px) scale(1.06)}}
@media(max-width:800px){.topbar{height:62px}.view{inset:62px 0 0}.home-view{padding:28px 22px;display:none;overflow:auto;overflow-x:hidden;justify-content:flex-start;align-items:flex-start}.home-view.active{display:flex}.home-copy{width:100%;padding-top:18px}.hero-art{position:absolute;width:50vw;right:-8vw;top:9vh;opacity:.23}.hero-frame{height:48vh}.lede{font-size:16px;max-width:75%;margin:22px 0}.home-stats{margin-top:35px;gap:22px}.setup-grid{grid-template-columns:1fr;gap:22px}.setup-panel{padding:28px 20px;width:calc(100vw - 20px);max-width:600px;overflow-x:hidden}.setup-head h2{font-size:clamp(31px,10vw,44px)}.setup-head>p:last-child{margin-bottom:18px}.image-drop{aspect-ratio:16/9}.game-hint{display:none}.board-tools{bottom:123px}.timer-card{display:none}.difficulty-options span{height:68px}.side-menu .menu-panel{width:min(82vw,340px);padding:18px 23px}.side-menu .menu-panel nav button{padding:15px 0;font-size:19px}.side-menu .menu-settings{margin-top:18px}.piece-dock{height:104px}.dock-label{width:58px;flex-basis:58px}.dock-piece{width:64px;height:64px;flex-basis:64px}.dock-piece canvas{width:64px;height:64px}}
@media(max-width:480px){h1{font-size:clamp(43px,14vw,53px);max-width:100%}.home-buttons{display:flex;align-items:flex-start;flex-direction:column;gap:14px}.text-btn{margin-left:0}.home-stats{justify-content:space-between}.home-stats strong{font-size:19px}.setup-panel{width:100%;height:100%;max-height:none}.difficulty-options{grid-template-columns:repeat(2,1fr)}.difficulty-options span{height:61px}.preview-overlay{padding:18px}.game-hud{top:10px;left:10px}.progress-card{height:48px}.progress-ring{width:34px;height:34px}.topbar{padding:0 14px}.brand{font-size:11px}.brand-mark{width:23px;height:23px}}
