.city-studio{--city-ink:#293b44;--city-paper:#fffcf4;--city-coral:#e98773;color:var(--city-ink);font-family:inherit;max-width:1050px;margin:auto;padding:10px;background:var(--city-paper);border-radius:26px}.city-studio *{box-sizing:border-box}.city-studio button{font:inherit;color:inherit;cursor:pointer;min-height:44px;min-width:44px;border:2px solid #d5d9ca;border-radius:13px;background:#fffdf7;font-weight:800;padding:8px 12px;-webkit-tap-highlight-color:transparent}.city-studio button:disabled{opacity:.42;cursor:default}.city-studio button:focus-visible,.city-board:focus-visible{outline:4px solid #276d7d;outline-offset:3px}.city-studio button[aria-pressed=true]{border-color:#364c53;background:#fff0c9;box-shadow:0 3px 0 #364c53}.city-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 5px 14px}.city-heading h2{font-size:clamp(23px,3vw,34px);margin:0;letter-spacing:.025em}.city-kicker{font-size:11px;letter-spacing:.16em;font-weight:850;margin:0 0 7px;color:#64716c}.city-clock{display:flex;gap:6px;flex-shrink:0}.city-clock button{font-size:12px;padding:8px;min-height:44px}.city-coach{display:flex;align-items:center;min-height:72px;gap:10px;padding:4px 15px;margin-bottom:12px;border-radius:17px;background:#f2eede}.city-coach p{margin:0;font-size:clamp(13px,2vw,16px);font-weight:750;line-height:1.6}.city-coach-face{display:block;flex:0 0 65px;width:65px;height:65px;overflow:hidden}.city-friend{display:block;width:100%;height:100%;overflow:hidden}.city-friend img{display:block;width:200%;height:100%;object-fit:contain;max-width:none;pointer-events:none;user-select:none}.city-scene{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:1.62;border:3px solid #627c6d;border-radius:24px;background:#cce8ee;transition:background 700ms ease;box-shadow:inset 0 0 0 5px #ffffff50}.city-sky{position:absolute;inset:0 0 37%;background:linear-gradient(#ceeaf0,#f3f5dc);pointer-events:none;transition:filter 700ms ease}.city-sun{position:absolute;left:13%;top:12%;width:10%;aspect-ratio:1;border-radius:50%;background:#ffe39a;box-shadow:0 0 0 10px #ffe39a35}.city-cloud{position:absolute;width:15%;height:12%;border-radius:50px;background:#fffaf1b5}.city-cloud:before,.city-cloud:after{content:"";position:absolute;width:48%;height:170%;bottom:0;border-radius:50%;background:inherit}.city-cloud:before{left:12%}.city-cloud:after{right:12%;height:140%}.city-cloud-a{left:37%;top:20%;animation:city-cloud-drift 12s ease-in-out infinite alternate}.city-cloud-b{right:8%;top:35%;width:12%;animation:city-cloud-drift 17s ease-in-out infinite alternate-reverse}.city-hills{position:absolute;inset:30% -10% 15%;border-radius:45% 55% 0 0;background:#c4d9ad;transform:rotate(-5deg)}.city-ground{position:absolute;inset:45% -10% -10%;border-radius:47% 35% 0 0;background:#e0e7b5;background-image:radial-gradient(#9fb17b77 1px,transparent 1px);background-size:28px 28px;transform:rotate(3deg);transition:background-color 700ms ease}.city-scene[data-time=evening]{background:#edb9aa}.city-scene[data-time=evening] .city-sky{background:linear-gradient(#b2b9d5,#f5bf9e)}.city-scene[data-time=evening] .city-sun{top:34%;background:#f9d6a0;box-shadow:0 0 0 14px #f7cca035}.city-scene[data-time=evening] .city-hills{background:#b0bb98}.city-scene[data-time=evening] .city-ground{background-color:#cdd0a0}.city-board{position:absolute;inset:0;touch-action:none;z-index:2}.city-piece{position:absolute;display:block!important;transform:translate(-50%,-50%) rotate(var(--rotation,0deg));width:11%;aspect-ratio:1;min-width:44px!important;min-height:44px!important;height:auto!important;padding:0!important;border:0!important;border-radius:18%!important;background:transparent!important;box-shadow:none!important;touch-action:none;filter:drop-shadow(0 4px 1px #43533524);transition:filter 150ms,background 150ms;user-select:none}.city-piece:disabled{opacity:1}.city-piece svg{display:block;width:100%;height:100%;pointer-events:none;overflow:visible}.city-piece[aria-pressed=true]{outline:3px dashed #527476;outline-offset:3px;background:#fffefa60!important}.city-piece.is-moving{filter:drop-shadow(0 10px 4px #43533544);z-index:70!important}.city-piece.is-moving[aria-pressed=true]{outline-style:solid}.city-ghost{opacity:.65;pointer-events:none;z-index:80}.city-ghost[hidden]{display:none!important}.city-place-hint{position:absolute;top:54%;left:50%;transform:translate(-50%,-50%);border:2px dashed #8eaa80;padding:16px 22px;border-radius:30px;color:#657658;font-size:clamp(14px,2vw,20px);font-weight:800;pointer-events:none}.city-place-hint[hidden]{display:none}.city-town-sign{position:absolute;right:3%;bottom:3%;padding:5px 12px;border-radius:7px;background:#fffbebd9;border:1px solid #b8bb98;font-size:10px;letter-spacing:.1em;pointer-events:none}.city-selection{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:65px;padding:12px 0}.city-selection>span{font-size:12px;font-weight:800;min-width:125px;margin-right:auto}.city-selection>button{font-size:12px;padding:7px 10px}.city-colors{display:flex;gap:5px;flex-wrap:wrap}.city-colors button{background:var(--swatch)!important;border:2px solid #b6bcae;min-width:35px;min-height:35px;width:35px;height:35px;padding:0;border-radius:50%;box-shadow:inset 0 0 0 4px #ffffff80!important;position:relative}.city-colors button[aria-pressed=true]:after{content:"";position:absolute;inset:8px;border:2px solid #293b44;border-radius:50%}.city-palette{border:2px solid #e2dfcf;border-radius:19px;background:#f6f2e5;overflow:hidden}.city-categories{display:flex;gap:5px;padding:9px;border-bottom:1px solid #e2dfcf;background:#ebe8d8}.city-categories button{flex:1;min-width:0;min-height:44px;padding:8px 3px;border:0;font-size:13px}.city-categories button[aria-pressed=true]{box-shadow:0 3px 0 #364c53}.city-parts{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:12px;min-height:111px}.city-parts .city-part{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;min-height:100px;padding:7px 3px 8px;border:1px solid #dedccc;background:#fffaf0;touch-action:none;font-size:11px;box-shadow:0 3px 0 #e3dccb}.city-part svg,.city-part>.city-friend{display:block;width:68px;height:68px;max-width:100%;pointer-events:none}.city-part svg{overflow:visible}.city-part span{pointer-events:none}.city-footer{display:flex;align-items:center;gap:14px;padding:15px 0 5px}.city-history{display:flex;gap:6px}.city-history button{font-size:12px}.city-count{font-size:11px;white-space:nowrap;color:#66736c;margin-left:auto}.city-studio .city-done{background:#e98773;border:2px solid #bb695d;color:#293b44;box-shadow:0 4px 0 #bb695d;font-size:17px;padding:10px 23px}.city-parent-note{font-size:11px;line-height:1.7;color:#65716b;margin:14px 3px 0}.city-exhibition{max-width:760px;width:calc(100vw - 30px);padding:25px;border:3px solid #647d6e;border-radius:25px;background:#fffcf4;color:#293b44;text-align:center;max-height:90vh;overflow:auto}.city-exhibition::backdrop{background:#19313799;backdrop-filter:blur(3px)}.city-exhibition h2{font-size:clamp(22px,4vw,34px);margin:5px 0 18px}.city-postcard{padding:9px 9px 23px;background:white;box-shadow:0 5px 15px #293b4420;transform:rotate(-1deg)}.city-postcard .city-scene{border-radius:12px;pointer-events:none}.city-postcard .city-piece[aria-pressed=true]{outline:0}.city-exhibition>p:not(.city-kicker){font-size:14px}.city-exhibition-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.city-exhibition-actions button{flex:1;font-size:14px}.city-postcard .city-town-sign{display:none}@keyframes city-cloud-drift{from{transform:translateX(-8px)}to{transform:translateX(12px)}}@media(max-width:600px){.city-studio{padding:7px;border-radius:18px}.city-heading{align-items:flex-start;gap:5px}.city-heading h2{font-size:23px;line-height:1.35;max-width:200px}.city-kicker{font-size:9px}.city-clock{flex-direction:column;gap:4px}.city-clock button{min-height:44px;min-width:65px;font-size:11px;padding:5px}.city-scene{aspect-ratio:1.14;border-radius:18px}.city-piece{width:15%}.city-selection{gap:7px}.city-selection>span{flex-basis:100%;font-size:12px}.city-colors{gap:7px}.city-colors button{width:44px;height:44px;min-width:44px;min-height:44px}.city-selection>button{flex:1;min-width:68px}.city-parts{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:9px}.city-parts .city-part{min-height:85px;font-size:10px}.city-part svg,.city-part>.city-friend{width:57px;height:57px}.city-categories button{font-size:11px}.city-footer{gap:8px;flex-wrap:wrap}.city-history{gap:5px}.city-history button{padding:8px 9px;font-size:11px}.city-studio .city-done{padding:10px 17px;font-size:15px}.city-coach{padding:4px 9px;gap:5px}.city-coach-face{flex-basis:55px;width:55px;height:60px}.city-exhibition{padding:15px}.city-postcard .city-scene{aspect-ratio:1.14}}@media(prefers-reduced-motion:reduce){.city-studio *{animation:none!important;transition:none!important}}
@media(max-width:600px){.city-colors{max-width:100%;flex-wrap:nowrap;overflow-x:auto;padding:3px}.city-colors button{flex:0 0 44px}.city-place-hint{white-space:nowrap}.city-categories button{white-space:nowrap;font-size:10px}.city-heading{align-items:center}.city-heading h2{font-size:20px}.city-coach{min-height:58px}.city-coach p{font-size:12px}.city-clock{flex-direction:row}.city-clock button{min-width:44px;font-size:10px}.city-kicker{font-size:8px}}