@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&display=swap');

:root{font-family:'Baloo 2',system-ui,sans-serif;color:#fff;--ink:#382718;--cream:#fff8dc;--green:#8ed13f;--orange:#ff9e21}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#8ed7ff}body{touch-action:none;user-select:none}
#game-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;outline:0}
#ui{position:fixed;inset:0;pointer-events:none}.screen{position:absolute;inset:0;display:none;opacity:0;transition:opacity .28s ease}.screen.active{display:flex;opacity:1}.screen button,.screen .map-card,.overlay button{pointer-events:auto}
.hero{margin:auto;text-align:center;transform:translateY(-2vh)}h1{margin:0 0 25px;font-size:clamp(58px,12vw,142px);font-weight:800;line-height:.68;letter-spacing:-.07em;filter:drop-shadow(0 8px 0 #6e281b) drop-shadow(0 13px 9px #19304455);transform:rotate(-3deg)}h1 span{display:block;-webkit-text-stroke:clamp(2px,.35vw,6px) var(--cream)}h1 span:first-child{color:#ffb420}h1 span:last-child{color:#ff6f83;letter-spacing:.01em}
button{font:800 18px/1 'Baloo 2',sans-serif;border:0;cursor:pointer;color:var(--ink);transition:transform .13s,filter .13s,box-shadow .13s}button:hover{transform:translateY(-3px);filter:brightness(1.06)}button:active{transform:translateY(2px) scale(.96)}.button{min-width:190px;min-height:62px;border-radius:20px;padding:15px 28px;box-shadow:0 8px 0 #9a5411,0 13px 20px #16364d55}.button-primary{font-size:26px;background:linear-gradient(#ffd847,#ff9d1e);border:4px solid #fff3b0}
#map-screen{display:none;overflow:auto;pointer-events:auto;padding:clamp(16px,3vw,35px);background:linear-gradient(150deg,#1b476bbb,#18314ddd)}#map-screen.active{display:block}.map-header{max-width:1050px;margin:0 auto 18px;display:flex;align-items:center;justify-content:space-between;text-align:center}.map-header h2{font-size:clamp(33px,5vw,58px);line-height:1;margin:0;text-shadow:0 5px 0 #1f3854}.map-header p{font-size:21px;margin:5px 0 0;color:#ffe36d}.icon-button,.hud-button{width:51px;height:51px;border-radius:15px;background:#fff1c8;box-shadow:0 5px 0 #9f6942;font-size:28px}.header-spacer{width:51px}
.map-grid{max-width:1050px;margin:auto;display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:18px;padding-bottom:25px}.map-card{position:relative;min-height:205px;overflow:hidden;border:3px solid #ffffffaa;border-radius:25px;padding:18px;background:linear-gradient(140deg,var(--card-a),var(--card-b));box-shadow:0 9px 0 #10283f88,0 15px 24px #071b2c55;transition:transform .18s,filter .18s;text-align:left}.map-card:not(.locked):hover{transform:translateY(-6px) rotate(-.3deg);filter:saturate(1.12)}.map-card h3{position:relative;margin:0;font-size:27px;line-height:1.05;text-shadow:0 3px 1px #0006}.map-card h3 span{display:block;font-size:16px;color:#fff5bc}.map-card .thumbnail{position:absolute;inset:0;opacity:.45;background:radial-gradient(circle at 80% 24%,#fff8 0 9%,transparent 10%),linear-gradient(12deg,transparent 45%,#38271866 46% 49%,transparent 50%)}.map-info{position:absolute;bottom:14px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:end}.best{font-size:14px}.best strong{display:block;font-size:23px}.stars{font-size:25px;letter-spacing:2px}.stars .off{color:#23303d88;text-shadow:0 1px 0 #fff4}.stars .on{color:#ffd23e;text-shadow:0 2px 0 #a85a12}.map-card.locked{filter:grayscale(.75) brightness(.48);cursor:not-allowed}.lock{position:absolute;right:22px;top:19px;font-size:35px}
.game-screen{pointer-events:none}.hud{position:absolute;top:0;left:0;right:0;padding:12px;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:10px}.panel{background:#172636bb;border:2px solid #ffffff66;box-shadow:0 5px 13px #0004;border-radius:17px;backdrop-filter:blur(5px)}.hud-left{justify-self:start;display:flex;align-items:center;gap:8px;padding:8px 12px}.hud-left .hud-button{width:43px;height:43px;font-size:23px;border-radius:12px}.hud small{display:block;font-size:13px;color:#ffdd65;line-height:1}.hud strong{display:block;font-size:18px;line-height:1.15}.score-box{text-align:center;min-width:150px;padding:8px 24px}.score-box strong{font-size:29px}.pigs-box{justify-self:end;display:flex;gap:12px;align-items:center;padding:9px 14px;text-align:right}.pigs-box strong{font-size:24px}.pig-dot{display:inline-block;width:20px;height:20px;margin-left:3px;border-radius:50%;background:#ff8298;border:2px solid #ffe4e8;box-shadow:inset -3px -3px 0 #d84e6c}.drag-hint{position:absolute;left:18%;bottom:13%;padding:7px 15px;border-radius:10px;background:#111a;color:#fff9b3;font-weight:800;animation:bob 1.4s ease-in-out infinite}.drag-hint.hidden{display:none}@keyframes bob{50%{transform:translateY(-7px)}}
.overlay{position:absolute;inset:0;display:flex;background:#0a1018bb;backdrop-filter:blur(3px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s}.overlay.show{opacity:1;visibility:visible;pointer-events:auto}.result-card{width:min(520px,calc(100% - 28px));margin:auto;padding:clamp(22px,4vw,38px);text-align:center;background:linear-gradient(155deg,#fff8df,#ffd99b);color:var(--ink);border:5px solid #fff;border-radius:31px;box-shadow:0 13px 0 #8e4e28,0 30px 60px #0008;transform:scale(.85);transition:transform .35s cubic-bezier(.2,1.4,.4,1)}.overlay.show .result-card{transform:scale(1)}.result-card h2{margin:0;font-size:clamp(35px,7vw,60px);line-height:.95;color:#ed5c3c;text-shadow:0 3px 0 #fff}.result-stars{min-height:65px;margin:12px 0;font-size:55px;letter-spacing:5px}.result-star{display:inline-block;color:#bba98d;transform:scale(.2);opacity:0}.result-star.earned{color:#ffc928;text-shadow:0 4px 0 #c56a17;animation:starIn .5s cubic-bezier(.2,1.7,.3,1) forwards}.result-star.empty{transform:scale(1);opacity:.4}@keyframes starIn{to{transform:scale(1) rotate(360deg);opacity:1}}.result-summary{font-size:19px;margin:10px 0 20px}.result-summary strong{font-size:25px}.result-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.result-buttons button{min-height:48px;padding:10px 18px;border-radius:14px;background:#ffb72f;box-shadow:0 5px 0 #a75b18}.game-over .result-card{background:linear-gradient(155deg,#35233d,#171728);color:#fff;border-color:#ff9a45}.game-over .result-card h2{font-size:clamp(48px,10vw,82px);color:#ff704b;text-shadow:0 4px 0 #771d24}
#rotate-note{display:none;position:absolute;bottom:7px;left:50%;transform:translateX(-50%);font-size:12px;background:#111b;padding:4px 10px;border-radius:8px}
@media(max-width:650px){.map-grid{grid-template-columns:1fr}.map-card{min-height:180px}.hud{grid-template-columns:1fr auto;gap:5px;padding:6px}.hud-left{padding:6px;grid-column:1}.hud-left div:last-child{display:none}.score-box{grid-column:2;grid-row:1;min-width:100px;padding:8px 12px}.pigs-box{grid-column:1/3;justify-self:center;padding:5px 10px}.pigs-box div:first-child{display:flex;gap:6px}.pigs-box strong{font-size:16px}.drag-hint{left:10px;font-size:12px}.result-card{padding:20px 12px}.result-buttons button{font-size:15px;padding:9px 12px}}
@media(orientation:portrait) and (max-width:650px){#rotate-note{display:block}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}