@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@600;700;800;900&display=swap";:root{--ink:#231f20;--paper:#fffaf0;--bubble:#27c2cb;--melon:#ff6f91;--banana:#ffef6a;--leaf:#8ad34a;--display:"Fredoka", "Cooper Black", "Rockwell Extra Bold", Georgia, serif;--body:"Nunito", "Trebuchet MS", "Gill Sans", Verdana, sans-serif;font-family:var(--body);color:var(--ink);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f7d35b}*{box-sizing:border-box}html{background:#f7d35b;min-width:320px}body{min-width:320px;min-height:100svh;margin:0}button,input{font:inherit}button:focus-visible,label:focus-within{outline-offset:4px;outline:4px solid #fffaf0}img{max-width:100%}.app-shell{min-height:100svh;color:var(--ink);background:radial-gradient(circle at 14% 12%,#ffda5b80,#0000 19rem),radial-gradient(circle at 92% 9%,#27c2cb61,#0000 18rem),linear-gradient(135deg,#ffffff9e 0 25%,#0000 25% 50%,#ffffff7a 50% 75%,#0000 75%) 0 0/34px 34px,#f7d35b;padding:24px}button,label{-webkit-tap-highlight-color:transparent}.game-header{grid-template-columns:minmax(230px,.7fr) minmax(320px,1.5fr) minmax(260px,.8fr);align-items:stretch;gap:18px;max-width:1520px;margin:0 auto 18px;display:grid}.brand-lockup,.control-deck,.score-panel,.tray-section,.ad-slot{border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink)}.brand-lockup{background:linear-gradient(120deg,#ffffffbd,#fff3),#ffefb0;border-radius:24px 10px;flex-direction:column;justify-content:space-between;min-height:156px;padding:20px;display:flex}.brand-chip{border:2px solid var(--ink);color:#fffef3;width:max-content;font-family:var(--display);text-transform:uppercase;background:#ff6f91;border-radius:999px;padding:6px 12px;font-size:.86rem}.brand-lockup h1{max-width:12ch;font-family:var(--display);letter-spacing:0;margin:0;font-size:clamp(2.2rem,5vw,4.9rem);line-height:.86}.photo-strip{border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);background:#fffaf0;border-radius:12px 28px;grid-template-columns:repeat(6,minmax(86px,1fr));gap:12px;padding:12px;display:grid}.photo-card,.upload-card,.library-card{border:3px solid var(--ink);color:#fffef3;cursor:pointer;isolation:isolate;border-radius:10px;align-content:end;min-height:132px;padding:8px;transition:transform .16s,box-shadow .16s;display:grid;position:relative;overflow:hidden;transform:translateY(0);box-shadow:0 6px #231f202e}.photo-card:hover,.upload-card:hover,.library-card:hover,.photo-card.is-active,.upload-card.is-active{box-shadow:0 10px 0 var(--photo-tone,#8ad34a);transform:translateY(-3px)rotate(-1deg)}.photo-card img{z-index:-2;object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.photo-card:after{content:"";z-index:-1;background:linear-gradient(#0000 32%,#000000b8);position:absolute;inset:0}.photo-card span,.upload-card span:last-child{font-family:var(--display);text-overflow:ellipsis;white-space:nowrap;font-size:1.08rem;overflow:hidden}.upload-card{--photo-tone:#8ad34a;text-align:center;background-color:#27c2cb;background-image:linear-gradient(45deg,#ffffff47 25%,#0000 25% 50%,#ffffff47 50% 75%,#0000 75%),none;background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:22px 22px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;align-content:center;place-items:center}.library-card{--photo-tone:#b986ff;text-align:center;background:radial-gradient(circle at 26% 22%,#ffffff80 0 16%,#0000 17%),linear-gradient(135deg,#b986ff 0 50%,#8d8ff5 50%);align-content:center;place-items:center}.library-mark{border:3px solid var(--ink);width:54px;height:54px;color:var(--ink);font-family:var(--display);background:#fffaf0;border-radius:18px 8px;place-items:center;font-size:1.28rem;line-height:1;display:grid}.upload-card input{opacity:0;pointer-events:none;block-size:1px;inline-size:1px;position:absolute}.upload-mark{border:3px solid var(--ink);width:48px;height:48px;color:var(--ink);font-family:var(--display);background:#fffaf0;border-radius:50%;place-items:center;font-size:2rem;line-height:1;display:grid}.library-modal-backdrop{z-index:60;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#231f206b;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.library-modal{border:3px solid var(--ink);width:min(1180px,100%);max-height:min(840px,100svh - 48px);box-shadow:10px 10px 0 var(--ink);background-color:#fffaf0;background-image:linear-gradient(135deg,#ffef6a47 0 25%,#0000 25% 50%,#27c2cb33 50% 75%,#0000 75%),none;background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:32px 32px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;border-radius:26px 12px;grid-template-rows:auto minmax(0,1fr);display:grid;overflow:hidden}.library-modal-header{border-bottom:3px solid var(--ink);background:#fffaf0e0;justify-content:space-between;align-items:center;gap:18px;padding:18px;display:flex}.library-modal-header h2{font-family:var(--display);margin:10px 0 0;font-size:clamp(2rem,5vw,4rem);line-height:.94}.modal-close{border:3px solid var(--ink);color:#fffef3;cursor:pointer;width:54px;height:54px;font-family:var(--display);box-shadow:0 6px 0 var(--ink);background:#ff6f91;border-radius:50%;font-size:1.5rem}.library-modal-body{grid-template-columns:minmax(180px,.28fr) minmax(0,1fr);gap:16px;min-height:0;padding:18px;display:grid}.folder-tabs{align-content:start;gap:10px;min-height:0;padding:2px 8px 2px 2px;display:grid;overflow:auto}.folder-tabs button{border:3px solid var(--ink);cursor:pointer;color:var(--ink);text-align:left;background:#fffaf0;border-radius:14px 8px;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;font-weight:950;display:flex;box-shadow:0 4px #231f2038}.folder-tabs button.is-active{background:var(--photo-tone,#8ad34a);box-shadow:0 6px 0 var(--ink)}.folder-tabs strong{border:2px solid var(--ink);min-width:32px;height:32px;font-family:var(--display);background:#fffaf0;border-radius:50%;place-items:center;display:grid}.library-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;min-height:0;padding:2px 8px 8px 2px;display:grid;overflow:auto}.library-photo{border:3px solid var(--ink);background:var(--photo-tone,#27c2cb);color:#fffef3;cursor:pointer;border-radius:12px;min-height:150px;transition:transform .16s,box-shadow .16s;position:relative;overflow:hidden;box-shadow:0 5px #231f203d}.library-photo:hover,.library-photo.is-active{box-shadow:0 8px 0 var(--ink);transform:translateY(-3px)}.library-photo-select{width:100%;color:inherit;cursor:pointer;text-align:left;background:0 0;border:0;padding:0;position:absolute;inset:0}.library-photo-select img{z-index:0;object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.library-photo-select:after{content:"";z-index:1;background:linear-gradient(#0000,#000000b8);position:absolute;inset:45% 0 0}.library-photo-select span{z-index:2;font-family:var(--display);text-overflow:ellipsis;white-space:nowrap;font-size:1.08rem;position:absolute;inset:auto 10px 10px;overflow:hidden}.admin-actions{z-index:4;gap:6px;display:grid;position:absolute;inset:auto 8px 38px}.admin-refresh{border:2px solid var(--ink);color:var(--ink);cursor:pointer;box-shadow:0 4px 0 var(--ink);text-align:center;background:#ffef6a;border-radius:10px;padding:7px 8px;font-size:.72rem;font-weight:950;line-height:1.05;text-decoration:none}.admin-refresh:disabled{cursor:wait;opacity:.75}.ad-slot{color:#231f208a;text-transform:uppercase;background:repeating-linear-gradient(-45deg,#231f200f 0 9px,#0000 9px 18px),#fffaf0c2;border-style:dashed;border-radius:12px;place-items:center;min-height:96px;display:grid}.ad-slot span{font-size:.75rem;font-weight:900}.ad-slot strong{font-family:var(--display);font-size:1.28rem}.control-deck{background:#fffaf0;border-radius:18px;grid-template-columns:auto minmax(260px,1fr) auto auto auto minmax(150px,.3fr);align-items:center;gap:16px;max-width:1520px;margin:0 auto 18px;padding:14px;display:grid}.dial,.score-panel div{border:3px solid var(--ink);background:#8ad34a;border-radius:14px 8px;place-items:center;min-width:92px;padding:10px 12px;display:grid}.dial span,.score-panel span,.difficulty-label span,.tray-header span{text-transform:uppercase;font-size:.74rem;font-weight:950}.dial strong,.score-panel strong,.difficulty-label output{font-family:var(--display);font-size:1.55rem;line-height:1}.difficulty-control{gap:8px;display:grid}.difficulty-label,.tray-header{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.difficulty-control input{accent-color:#ff6f91;cursor:pointer;width:100%}.difficulty-marks{justify-content:space-between;gap:6px;display:flex}.difficulty-marks button{color:#231f20b3;cursor:pointer;font-family:var(--body);background:0 0;border:0;padding:0;font-size:.76rem;font-weight:900}.action-button{border:3px solid var(--ink);color:#fffef3;cursor:pointer;min-height:54px;font-family:var(--display);box-shadow:0 6px 0 var(--ink);background:#ff6f91;border-radius:16px 8px;padding:0 20px;font-size:1.08rem;transition:transform .12s,box-shadow .12s}.action-button:hover{box-shadow:0 8px 0 var(--ink);transform:translateY(-2px)}.action-button:active{box-shadow:0 3px 0 var(--ink);transform:translateY(3px)}.ghost-button{background:#27c2cb}.guide-button{background:#b986ff}.guide-button.is-on{color:var(--ink);background:#ffef6a}.progress-meter{border:3px solid var(--ink);background:#ffe899;border-radius:999px;height:26px;overflow:hidden}.progress-meter span{border-right:3px solid var(--ink);background:repeating-linear-gradient(90deg,#ffffff5c 0 10px,#0000 10px 20px),#8ad34a;height:100%;transition:width .24s;display:block}.play-layout{grid-template-columns:minmax(0,clamp(0px,12vw,170px)) minmax(560px,1fr) minmax(300px,360px);grid-template-areas:"ad board rail";align-items:start;gap:18px;max-width:1520px;margin:0 auto;display:grid}.ad-slot-side{grid-area:ad;min-height:min(600px,72vh)}.board-wrap{border:3px solid var(--ink);min-width:0;box-shadow:10px 10px 0 var(--ink);background:#fffaf0;border-radius:28px 12px;grid-area:board;padding:14px}.puzzle-board{border:3px solid var(--ink);background:linear-gradient(#fffaf0c7,#fffaf0c7),#27c2cb;border-radius:16px;width:100%;position:relative;overflow:hidden}.reference-image{object-fit:fill;opacity:.1;filter:saturate(.7);width:100%;height:100%;position:absolute;inset:0}.board-grid{display:grid;position:absolute;inset:0}.board-grid span{border:1px solid #231f201f}.placed-piece{z-index:2;pointer-events:none;position:absolute}.placed-piece.is-hinted{z-index:5;animation:2.2s hint-pop}.win-banner{z-index:8;border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);font-family:var(--display);text-align:center;text-transform:uppercase;background:#8ad34a;border-radius:18px;padding:18px 24px;font-size:clamp(2rem,8vw,5rem);line-height:.9;position:absolute;inset:auto 24px 24px}.game-rail{grid-area:rail;gap:14px;min-width:0;max-height:calc(100svh - 36px);display:grid;position:sticky;top:18px}.score-panel{background:#fffaf0;border-radius:12px 24px;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px;display:grid}.score-panel div:nth-child(2){background:#ffef6a}.score-panel div:nth-child(3){background:#ff9d5c;grid-column:1/-1}.score-panel strong{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.tray-section{background:#fffaf0;border-radius:18px;min-height:0;margin:0;padding:14px}.tray-header{margin-bottom:12px}.tray-header h2{font-family:var(--display);margin:0;font-size:1.5rem}.piece-tray{overscroll-behavior:contain;border:3px solid var(--ink);background-color:#27c2cb;background-image:linear-gradient(90deg,#ffe8999e 50%,#0000 50%),none;background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:28px 28px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;border-radius:12px;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:12px;max-height:clamp(300px,100svh - 302px,620px);padding:10px;display:grid;overflow:auto}.tray-piece{aspect-ratio:1;cursor:grab;touch-action:none;background:0 0;border:0;place-items:center;min-width:0;padding:0;display:grid}.tray-piece:active{cursor:grabbing}.tray-piece.is-dragging{opacity:.18}.piece-svg{width:100%;height:100%;display:block;overflow:visible}.piece-edge{fill:#0000;stroke:#ffffffdb;stroke-linejoin:round;stroke-width:3px}.drag-layer{z-index:30;pointer-events:none;filter:saturate(1.08);transform-origin:50%;position:fixed;transform:scale(1.16)rotate(2deg)}.ad-slot-bottom{max-width:970px;min-height:160px;margin:18px auto 0}@keyframes hint-pop{0%,to{filter:none;transform:scale(1)}14%,62%{filter:drop-shadow(0 0 18px #ffef6a)drop-shadow(0 0 4px #231f20);transform:scale(1.08)rotate(-1deg)}}@media (width<=1180px){.game-header,.play-layout{grid-template-columns:1fr;grid-template-areas:"ad""board""rail"}.game-rail{max-height:none;position:static}.score-panel{grid-template-columns:repeat(3,minmax(0,1fr))}.score-panel div:nth-child(3){grid-column:auto}.ad-slot-side{min-height:110px}.control-deck{grid-template-columns:auto 1fr auto auto}.progress-meter{grid-column:1/-1}}@media (width<=760px){.app-shell{padding:12px}.game-header,.control-deck,.play-layout{gap:12px}.photo-strip{grid-template-columns:repeat(2,1fr)}.photo-card,.upload-card,.library-card{min-height:114px}.library-modal-backdrop{padding:10px}.library-modal-body{grid-template-columns:1fr}.folder-tabs{padding:2px 2px 10px;display:flex;overflow-x:auto}.folder-tabs button{min-width:142px}.library-grid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr))}.control-deck{grid-template-columns:1fr 1fr}.difficulty-control,.progress-meter{grid-column:1/-1}.board-wrap{border-radius:16px;padding:8px}.game-rail{flex-direction:column-reverse;display:flex}.score-panel{grid-template-columns:1fr}.tray-section{z-index:20;box-shadow:7px 7px 0 var(--ink), 0 -16px 28px #231f2029;position:sticky;bottom:12px}.piece-tray{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:10px;max-height:32svh}}