/* Marketing Mayhem V2: visual layer; existing PHP API and data stay unchanged. */
:root{--ink:#2a2547;--muted:#756b7e;--paper:#fffcf1;--line:#efdba8}
html{scroll-behavior:smooth}body{background:radial-gradient(ellipse at 60% -20%,#ffe5a0 2%,#ffca77 47%,#f8a761 100%)}
.app{max-width:1540px;padding-bottom:132px}.app:before{background-image:radial-gradient(#fff9 1.5px,transparent 1.5px);background-size:32px 32px;opacity:.18}
.skip-link{position:absolute;z-index:99;top:-80px;left:16px;padding:12px;background:#fff;border-radius:12px}.skip-link:focus{top:12px}
.topbar{padding:8px 8px 12px}.logo{filter:drop-shadow(0 2px 0 #fff6a2)}.round-pill{box-shadow:0 5px 0 #c27c48;border:2px solid #fff;font-size:12px}.icon-btn{min-height:46px;min-width:46px}
.panel{border-color:#fffcf1;border-width:3px;box-shadow:0 7px 0 #c98b4a,0 14px 29px #a95f3028;background:linear-gradient(142deg,#fffaf0,#ffe9b6)}
.card{background:#fffdf8}.btn{transition:transform .17s ease,filter .17s ease,box-shadow .17s ease}.btn:hover:not(:disabled){filter:saturate(1.09) brightness(1.035);transform:translateY(-3px)}
.btn:focus-visible,.choice:focus-visible{outline:4px solid #2e6ed4;outline-offset:4px}.bottom-nav{z-index:22;max-width:890px;box-shadow:0 7px 0 #b77847a8,0 22px 50px #a6583050}.bottom-nav button{padding:13px 14px}
#screen{padding-bottom:46px}.hero-grid{grid-template-columns:minmax(250px,.93fr) minmax(330px,1.2fr) minmax(260px,.98fr)}.hero-mascot{min-height:550px;border:4px solid #fff9ed;box-shadow:0 9px 0 #d68f49,0 16px 44px #d6844548}.hero-mascot img{object-position:center center}
.v2-fizz-caption{position:absolute;bottom:16px;left:16px;right:16px;background:#fff9eefa;border:3px solid #fff;border-radius:24px;box-shadow:0 5px 0 #d3965a;padding:14px 17px;font-weight:900;text-align:center;line-height:1.35}
.v2-fizz-caption .label{display:inline-block;background:#ffb82e;border-radius:99px;padding:4px 10px;margin-bottom:5px;font-size:12px}
.v2-world-banner{min-height:190px;margin:17px auto 22px;border:4px solid #fffbea;border-radius:35px;box-shadow:0 8px 0 #ce9156;background-image:linear-gradient(90deg,#29234488,#29234400 70%),url('fizz-city-banner.webp');background-size:cover;background-position:center 43%;display:flex;align-items:end;padding:25px;overflow:hidden;position:relative}
.v2-world-banner h1{font-size:clamp(32px,5vw,58px);margin:0;color:#fff;text-shadow:0 4px 0 #60426d,0 9px 18px #20172d70}.v2-world-banner .eyebrow{color:#fff2b7;text-shadow:0 2px 4px #251b3b}
.v2-city-progress{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:8px 0 20px}.v2-chip{display:inline-block;border-radius:50px;background:#fff9e6;border:2px solid #fff;padding:9px 16px;font-weight:900;box-shadow:0 4px 0 #cb9259}
.v2-neighbourhoods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.v2-zone{position:relative;text-align:left;min-height:240px;padding:22px 23px;border:4px solid #fff5d8;border-radius:32px;box-shadow:0 8px 0 #c98b53,0 18px 30px #b76a3730;overflow:hidden;isolation:isolate;transition:transform .17s ease,box-shadow .17s ease;display:flex;flex-direction:column;justify-content:space-between;color:#252744}
.v2-zone:hover{transform:translateY(-4px);box-shadow:0 12px 0 #c98b53,0 23px 36px #b76a3735}.v2-zone:focus-visible{outline:4px solid #2f64c4;outline-offset:4px}.v2-zone .zone-emoji{font-size:66px;filter:drop-shadow(0 9px 5px #6b48262c)}.v2-zone h2{font-size:clamp(20px,2.5vw,28px);margin:4px 0}.v2-zone p{margin:0;font-size:14px}.v2-zone .zone-top{display:flex;justify-content:space-between;align-items:start;gap:12px}.v2-zone .zone-status{font-size:12px;background:#ffffffbb;padding:8px 10px;border-radius:40px;font-weight:900}.v2-zone .zone-building{position:absolute;right:-12px;bottom:-45px;font-size:135px;opacity:.18;transform:rotate(-9deg);z-index:-1}.v2-zone:after{content:'';position:absolute;inset:auto -40px -80px auto;width:240px;height:240px;background:#ffffff29;border-radius:50%;z-index:-1}
.v2-profile{display:grid;grid-template-columns:minmax(210px,.7fr) minmax(300px,1.3fr);gap:20px}.v2-persona-card{min-height:380px;border:3px solid #fff;background:linear-gradient(155deg,var(--persona-bg,#ffd68c),#fff0ca);border-radius:29px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;box-shadow:inset 0 -25px 45px #fff6bd66}.v2-persona-card .avatar{font-size:110px;animation:v2-bob 3.8s ease-in-out infinite;filter:drop-shadow(0 11px 2px #bd8b5e50)}.v2-persona-card h2{font-size:24px;margin:4px 0}.v2-dialogue{padding:22px;background:#fffdf5;border:2px solid #efdcb5;border-radius:24px;box-shadow:0 4px 0 #debf8d}.v2-dialogue p{font-size:17px;line-height:1.55}.v2-choice-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.v2-choice-actions button{border:2px solid #e8d5ab;border-radius:16px;background:#fffdf7;padding:13px;text-align:left;color:#342c47;font-weight:900;cursor:pointer}.v2-choice-actions button:hover{background:#e3f7cc}.v2-insight{margin:14px 0;padding:17px 19px;background:#e8f9dc;border:2px solid #abdc94;border-radius:19px;color:#28542c}.v2-learning-strip{background:#fff6db;border:2px solid #efdbb0;border-radius:17px;padding:14px 18px;margin:18px 0}.v2-learning-strip strong{color:#954d19}.v2-city-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.v2-achievement-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:22px}.v2-medal{padding:25px;text-align:center;min-height:270px;border:3px solid #fff;border-radius:29px;background:#fff8df;box-shadow:0 7px 0 #d4954f}.v2-medal .medal-icon{font-size:75px;margin:16px auto}.v2-medal.locked{filter:grayscale(.65);opacity:.74}.v2-medal h3{margin:8px}.v2-pill{display:inline-block;padding:8px 13px;background:#dff5cb;border-radius:80px;font-size:12px;font-weight:900}.v2-reward-hero{display:grid;grid-template-columns:.8fr 1.2fr;gap:22px;align-items:stretch}.v2-reward-art{position:relative;min-height:425px;border:3px solid #fff;border-radius:30px;background:linear-gradient(135deg,#ffd684,#ffb769);overflow:hidden}.v2-reward-art img{height:100%;width:100%;object-fit:cover}.v2-reward-stars{position:absolute;inset:8px;pointer-events:none;font-size:26px;display:flex;justify-content:space-between}.v2-burst{animation:v2-enter .65s cubic-bezier(.2,1.8,.3,1) both}.v2-panel-banner{border-radius:28px;background:linear-gradient(120deg,#fff6d8,#ffe0a5);padding:24px;border:3px solid #fff8e9;box-shadow:0 5px 0 #cf9657}
.v2-reward-tile{background:#fff1c9;padding:19px;border-radius:24px;border:2px solid #fff}.v2-reward-tile strong{font-size:42px}.v2-reward-tile p{margin:4px 0}.v2-progress-row{display:flex;align-items:center;gap:10px}.v2-progress-row .progress{flex:1}.v2-progress-badge{font-weight:900;color:#319a48}
.auth{box-shadow:0 10px 0 #c78d50,0 28px 65px #b8703f70}.auth .center:first-child{filter:drop-shadow(0 8px 4px #e9b561)}
@keyframes v2-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-11px) rotate(2deg)}}@keyframes v2-enter{0%{transform:scale(.8) rotate(-4deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
@media(max-width:1060px){.hero-grid{grid-template-columns:1fr 1fr}.hero-mascot{grid-column:2;grid-row:1/3;min-height:560px}.hero-right{grid-column:1/3}.v2-reward-hero{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.app{padding:12px 13px 110px}.topbar{flex-wrap:wrap}.topright{margin-left:auto}.round-pill{font-size:10px;padding:8px 10px}.logo{font-size:27px}.logo-mark{font-size:28px}.hero-grid,.v2-profile,.v2-reward-hero{grid-template-columns:1fr}.hero-mascot{grid-row:auto;grid-column:auto;min-height:430px}.hero-right{grid-column:auto}.v2-neighbourhoods{grid-template-columns:1fr}.v2-world-banner{min-height:155px;padding:18px}.v2-world-banner h1{font-size:36px}.v2-choice-actions{grid-template-columns:1fr}.v2-achievement-grid{grid-template-columns:1fr}.v2-persona-card{min-height:225px}.v2-persona-card .avatar{font-size:75px}.bottom-nav{width:calc(100% - 12px);bottom:6px;border-radius:20px;padding:5px}.bottom-nav button{font-size:11px;padding:8px 4px;flex:1;white-space:normal}.bottom-nav button span{display:block;font-size:10px}.hero-mascot img{object-position:center 34%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}