:root{--phone:min(100vw,560px)}
body{background:radial-gradient(ellipse at 50% 35%,#563067,#16091f 70%)}
#phone{height:100dvh;max-height:100dvh}.ui{isolation:isolate}.sprite{display:block}.preview{position:relative}
button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #ffe088;outline-offset:3px}
.hud{height:62px;padding-top:max(5px,env(safe-area-inset-top))}.topbtn{flex-shrink:0}.res{font-size:12px;padding:4px 6px}.res .plus{width:28px;height:28px}
.view{min-height:0;flex:1}.logo{height:63px}.logo-badge{font-size:28px}.game{padding:0 8px 80px;gap:6px}.orders-strip{margin:0 0 2px;height:108px;gap:6px}.order{padding:7px}.order .head{font-size:10px;gap:3px}.order .face{width:25px;height:25px;font-size:9px}.order .reward{font-size:10px}.order .need{margin-top:4px}.mini{width:27px;height:27px}.mini .lvl{display:none}.mini b{font-size:8px}.order button{height:27px;font-size:11px}.order .client{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:70px}.order:not(.ready){opacity:.92}.order.ready{border-color:#71bd4f}.order .reward{position:absolute;right:7px;top:34px;background:#fff2cf;border-radius:5px}.order .need{justify-content:flex-start}
.stage{align-items:center;min-height:170px;margin:0;flex:1}.board-shell{align-self:center;width:min(calc(100% - 96px),calc((100dvh - 364px) * .7778));max-width:none;padding:5px;border-width:3px;border-radius:15px}.board{gap:3px}.cell{border-radius:7px;min-width:0}.cell .lvl{width:13px;height:13px;font-size:8px}.cell.hint{animation:hint 1s ease-in-out infinite alternate}.cell.pop{animation:pop .3s ease-out}.cell.drop{outline:3px solid #56cd68}.rail{width:42px;justify-content:center;gap:15px}.rail button{min-height:53px;font-size:9px}.rail small{font-size:8px}.rail.right{gap:8px}.polar{width:53px;height:53px;right:0;bottom:-12px;border-width:2px;display:none}.detail{height:65px;margin:0;gap:8px;position:relative}.detail .copy strong{font-size:13px}.detail .copy span{font-size:11px}.detail .preview{width:46px;height:46px}.action{min-width:65px;font-size:11px}.action:disabled{opacity:.5}.nav{height:72px}.nav button{font-size:11px}.nav button .ni{font-size:23px}.toolbar{display:flex;gap:6px;justify-content:center;flex-shrink:0}.toolbar button{background:#5a2488;color:#fff0cb;border:1px solid #bc86d7;border-radius:9px;padding:5px 11px;min-height:30px;font-size:11px}.progress-track{height:5px;background:#35124c;border-radius:99px;overflow:hidden}.progress-track span{display:block;height:100%;background:linear-gradient(90deg,#f0ab3e,#ffe69a);transition:width .3s}.workshop-status{position:absolute;left:18%;right:18%;top:5%;z-index:7;background:#fff4dedf;backdrop-filter:blur(5px);border:2px solid #e5b364;border-radius:12px;padding:7px;text-align:center;font-size:11px;box-shadow:0 4px 12px #34104455}.workshop-status strong{display:block;color:#5d2d7d;margin-bottom:4px}.workshop-cta{position:absolute;bottom:20px;left:20%;right:20%;z-index:8;border:2px solid #ffd778;background:linear-gradient(#a355da,#6528a0);color:#fff3cc;border-radius:16px;padding:12px 7px;font-weight:900;box-shadow:0 4px 0 #4b196f}.approved-workshop-art{height:calc(100% + 100px);min-height:0;object-fit:cover;top:-45px}.approved-polar-card{left:58%;top:74%;width:95px;height:105px}.workshop-hotspot{background:linear-gradient(#8841cddd,#632891ef);border:2px solid #e6b253;color:#fff4cd;font-weight:800;font-size:10px;box-shadow:0 3px 0 #763e26;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:17%;height:11%;border-radius:15px}.workshop-hotspot:before{font-size:23px}.workshop-missions:before{content:'📋'}.workshop-events:before{content:'🎁'}.workshop-polar:before{content:'🐾'}.workshop-shop:before{content:'🛍️'}.workshop-missions{top:14%}.workshop-events{top:36%}.workshop-polar{top:40%}.workshop-shop{top:14%}
.modal{position:fixed;z-index:100;padding:15px}.modalbox{max-width:460px;max-height:90dvh;overflow:auto;padding:19px;position:relative}.modalbox h2{font-size:25px}.modalbox p{font-size:14px}.modalbox button{min-height:44px;height:auto;padding:10px;font-size:13px}.modalbox button:disabled{opacity:.5}.modalbox .secondary{background:#6b348e;border-color:#b18aca}.modalbox .small-note{font-size:11px;color:#83657c}.modalbox .close-x{position:absolute;right:8px;top:6px;width:34px;min-height:34px;height:34px;margin:0;padding:0;background:#714091;border:0;font-size:22px}.modal-content{text-align:left}.modal-content .card{box-shadow:none;background:#fff9ed;margin:10px 0}.modal-content .card h3{font-size:15px}.modal-content .card p{font-size:13px}.modal-content progress{width:100%;height:9px;accent-color:#8651b0}.modal-content .family-list{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.modal-content .family-list button{font-size:12px;margin:0;background:#7945a0;border-color:#be93dc}.dialogue-line{padding:10px 0;border-bottom:1px solid #e5cba0;line-height:1.6;font-size:14px}.dialogue-line strong{color:#763a9b}.story-stage{width:100%;aspect-ratio:1.6;background-image:url('assets/workshop-stages.webp');background-size:300% 200%;border-radius:12px;border:2px solid #dfb276}.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.shop-grid .card{margin:0}.collection-item{min-width:0}.collection-item .preview{width:55px;height:55px}.collection-item.locked .sprite{filter:grayscale(1);opacity:.35}.other-title{font-size:23px}.stats{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}.stats span{background:#fff9eb;border:1px solid #dfbb86;border-radius:12px;padding:8px;font-size:12px}.card .order-pieces{display:flex;gap:8px;margin:10px 0}.order-piece{position:relative;width:55px;height:55px;border-radius:10px;border:1px solid #ddba86;background:#fff1d9}.order-piece.have{border:2px solid #78b557}.toast{position:fixed;bottom:85px;max-width:400px;width:max-content;font-size:13px}.save-alert{position:fixed;top:0;left:0;right:0;background:#fff0bf;color:#7a3522;padding:8px;text-align:center;z-index:120;font-size:12px}.burst{position:absolute;inset:0;pointer-events:none;z-index:90;overflow:hidden}.burst i{position:absolute;left:50%;top:45%;width:8px;height:13px;background:var(--c);border-radius:2px;animation:confetti 900ms ease-out forwards;transform:rotate(var(--r))}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes pop{50%{transform:scale(1.13);filter:brightness(1.25)}}@keyframes hint{to{box-shadow:inset 0 0 0 3px #6dbe58,0 0 8px #8edf71}}@keyframes confetti{to{translate:var(--x) var(--y);rotate:var(--r);opacity:0}}
@media(max-width:380px){.res{gap:2px;padding:3px;font-size:11px}.avatar{width:42px;height:42px;flex-basis:42px}.res .ico{font-size:15px}.orders-strip{height:106px}.order .face{display:none}.order .client{max-width:90px}.collection-grid{grid-template-columns:1fr}.detail .copy span{font-size:10px}}
@media(max-height:720px){.hud{height:53px}.logo{height:45px}.logo-badge{font-size:22px}.logo-badge::before{display:none}.orders-strip{height:96px}.game{gap:3px;padding-bottom:73px}.detail{height:54px}.detail .preview{width:37px;height:37px}.board-shell{width:min(calc(100% - 90px),calc((100dvh - 307px) * .7778))}.rail{gap:5px}.rail button{min-height:43px}.rail .ri{width:23px;height:23px;font-size:16px}.nav{height:65px}.toolbar button{min-height:27px;padding:3px 9px}.approved-polar-card{width:80px;height:90px}}
@media(max-height:510px){body{overflow:auto}#phone{height:700px;max-height:none}.board-shell{width:290px}.modalbox{max-height:95dvh}.stage{min-height:0}.game{padding-bottom:73px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.screen-intro{color:#fff0d1;font-size:13px;line-height:1.6;padding:0 7px}.history-link{display:block;color:#71308f;font-weight:700;padding:15px 0;text-align:center}.collection-grid{padding-bottom:14px}
.approved-workshop-art{inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}.approved-polar-card{display:none}.workshop-logo{position:absolute;z-index:6;top:22px;left:20%;right:20%;display:flex;justify-content:center}.workshop-logo .logo-badge{font-size:35px;padding:9px 25px}.workshop-logo .logo-badge small{font-size:11px}.workshop-status{top:108px;left:20%;right:20%;font-size:10px}.workshop-hotspot{width:16%;max-width:77px;height:70px}.workshop-missions{left:2%;top:18%}.workshop-events{left:2%;top:36%}.workshop-family{left:2%;top:54%}.workshop-family:before{content:'💜'}.workshop-shop{right:2%;top:18%}.workshop-polar{right:2%;top:36%}.workshop-rewards{right:2%;top:54%}.workshop-rewards:before{content:'🏆'}.workshop-cta{bottom:18px;left:16%;right:16%;font-size:16px;min-height:53px}.polar-touch{position:absolute;z-index:5;left:42%;top:65%;width:21%;height:21%;background:none;border:0;border-radius:35px}.approved-workshop:after{box-shadow:inset 0 0 0 2px #e4aa4f,inset 0 90px 65px -50px #321347b0,inset 0 -90px 55px -50px #321347bb}.workshop-hotspot:hover{filter:brightness(1.1);transform:translateY(-2px)}.workshop-cta:hover{filter:brightness(1.12)}
@media(max-height:720px){.workshop-logo{top:15px}.workshop-logo .logo-badge{font-size:28px}.workshop-status{top:83px}.workshop-hotspot{height:59px;font-size:9px}.workshop-hotspot:before{font-size:20px}.workshop-cta{bottom:12px}}