/* =========================================
   GREEN CITY — CITY BUILDER GAME INTERFACE
   ========================================= */
:root{--ink:#153b45;--muted:#58727c;--deep:#0c4b51;--teal:#0e9d8b;--leaf:#44b95a;--lime:#a6dd52;--sky:#dff7fb;--paper:#f8fffc;--line:#c7e5df;--gold:#f5b940;--danger:#d86565}*{box-sizing:border-box}html{background:#d9f4ef}body{min-width:320px;margin:0;color:var(--ink);background:linear-gradient(155deg,#d9f6fb,#e8f7df 55%,#caece0);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Noto Sans Thai",sans-serif}button,a{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #133f68;outline-offset:3px}.app-shell{width:min(1280px,100%);min-height:100vh;margin:auto;padding:18px clamp(12px,3vw,34px) 32px}.game-header{display:grid;grid-template-columns:minmax(100px,1fr) auto minmax(100px,1fr) auto;align-items:center;gap:15px;margin-bottom:17px}.back-link{display:inline-flex;gap:6px;width:max-content;color:#23656c;text-decoration:none;font-size:.85rem;font-weight:800}.back-link:hover{color:#0b313a}.brand{display:flex;align-items:center;gap:9px}.brand>span{display:grid;width:43px;height:43px;place-items:center;border:1px solid #a6d9ab;border-radius:13px;background:#effbe9;font-size:1.45rem;box-shadow:0 5px 12px #a9d5ae}.brand h1{margin:0;font-family:Georgia,"Noto Serif Thai",serif;font-size:clamp(1.2rem,2.2vw,1.52rem)}.brand p{margin:1px 0 0;color:var(--muted);font-size:.7rem}.top-stats{display:flex;justify-content:flex-end;gap:6px}.top-stats>div{min-width:61px;padding:5px 7px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.72);text-align:center}.top-stats span{display:block;color:#6d858a;font-size:.56rem;font-weight:800}.top-stats strong{color:#145c61;font-size:.9rem;font-variant-numeric:tabular-nums}.sound-button{display:grid;width:38px;height:38px;place-items:center;padding:0;border:1px solid var(--line);border-radius:10px;background:#fff;color:#15545a}
/* City map */.game-layout{display:grid;grid-template-columns:minmax(0,1.48fr) minmax(310px,.74fr);gap:17px}.city-panel,.mission-panel,.construction-panel{border:1px solid rgba(103,178,167,.38);border-radius:20px;background:rgba(255,255,255,.78);box-shadow:0 12px 28px rgba(45,100,94,.12),inset 0 1px rgba(255,255,255,.7)}.city-panel{padding:18px}.panel-heading,.mission-header,.construction-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.eyebrow{margin:0 0 3px;color:#249b7e;font-size:.62rem;font-weight:900;letter-spacing:.12em}.city-panel h2,.mission-panel h2,.construction-panel h2{margin:0;font-family:Georgia,"Noto Serif Thai",serif;font-size:1.22rem}.weather{padding:6px 9px;border-radius:99px;color:#556f75;background:#eaf1f2;font-size:.68rem;font-weight:700}.city-world{position:relative;min-height:372px;margin:14px 0;border:1px solid #b5ded8;border-radius:15px;overflow:hidden;background:linear-gradient(#9fd8df 0 25%,#9ddaa1 25% 77%,#4eb2ce 77%);isolation:isolate}.city-world::after{position:absolute;z-index:-1;right:-8%;bottom:15%;left:-8%;height:34%;border-radius:50% 50% 0 0;content:"";background:linear-gradient(175deg,#79c774,#508e69)}.sun{position:absolute;z-index:-1;top:25px;right:36px;width:49px;height:49px;border-radius:50%;background:#fff3a5;box-shadow:0 0 30px #ffe483;animation:sun-pulse 3s ease-in-out infinite}.cloud{position:absolute;z-index:-1;width:70px;height:18px;border-radius:99px;background:rgba(255,255,255,.69);filter:blur(1px)}.cloud::before,.cloud::after{position:absolute;bottom:4px;border-radius:50%;content:"";background:inherit}.cloud::before{left:14px;width:30px;height:30px}.cloud::after{right:10px;width:22px;height:22px}.cloud-one{top:73px;left:-80px;animation:cloud-move 22s linear infinite}.cloud-two{top:128px;left:-140px;transform:scale(.72);animation:cloud-move 30s 5s linear infinite}.city-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:560px;margin:42px auto 28px;padding:0 13px}.city-cell{position:relative;aspect-ratio:1.08;border:1px solid rgba(25,99,83,.27);border-radius:10px;color:#17463d;background:rgba(198,237,175,.75);font-size:clamp(1.4rem,3.1vw,2.25rem);box-shadow:inset 0 1px rgba(255,255,255,.67);transition:transform .18s,filter .4s,background .4s}.city-cell:hover:not(:disabled){transform:translateY(-3px);filter:brightness(1.08)}.city-cell.is-polluted{background:linear-gradient(145deg,#aeb99d,#8b957e);filter:saturate(.58)}.city-cell.is-built{background:linear-gradient(145deg,#bdeca8,#75c989);animation:build-pop .48s ease}.city-cell.is-empty::after{position:absolute;inset:6px;border:1px dashed rgba(31,102,77,.35);border-radius:7px;content:""}.city-cell .building-label{position:absolute;right:2px;bottom:2px;left:2px;overflow:hidden;color:#164238;font-size:.43rem;font-weight:900;text-overflow:ellipsis;white-space:nowrap}.river{position:absolute;z-index:0;right:0;bottom:0;left:0;height:70px;overflow:hidden;color:rgba(230,255,255,.75);background:linear-gradient(#4bb2cf,#168aa8);font-size:2rem;letter-spacing:20px;white-space:nowrap}.river span{display:inline-block;animation:water-flow 2.8s linear infinite}.river span:nth-child(2){animation-delay:-.9s}.river span:nth-child(3){animation-delay:-1.7s}.city-message{position:absolute;z-index:3;right:12px;bottom:11px;left:12px;margin:0;padding:7px 10px;border-radius:8px;color:#f3fffb;background:rgba(8,67,68,.76);text-align:center;font-size:.7rem;font-weight:700}.indicators{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.indicator{display:grid;grid-template-columns:94px 1fr 24px;align-items:center;gap:6px;color:#577278;font-size:.66rem;font-weight:700}.indicator>div{height:7px;overflow:hidden;border-radius:99px;background:#d9eeea}.indicator i{display:block;width:0;height:100%;border-radius:99px;background:linear-gradient(90deg,#4ecb85,#18a9a2);transition:width .5s ease}.indicator b{text-align:right;color:#236b68;font-size:.66rem}
/* Mission panel */.mission-panel{padding:18px}.mission-header h2 span{color:#139878}.progress-badge{padding:5px 8px;border-radius:99px;color:#168166;background:#e1f5e5;font-size:.68rem;font-weight:800}.event-banner{margin:11px 0;padding:9px 11px;border:1px solid #f0c46b;border-radius:10px;color:#744700;background:#fff4d9;font-size:.72rem;font-weight:700}.question-card{margin-top:13px;padding:16px;border:1px solid #cceae4;border-radius:14px;background:linear-gradient(140deg,#fafff9,#e9f9f3)}.topic{margin:0;color:#328b74;font-size:.65rem;font-weight:900}.question-card h3{min-height:67px;margin:7px 0 12px;font-size:1rem;line-height:1.55}.answer-list{display:grid;gap:7px}.answer-button{display:flex;align-items:center;gap:8px;width:100%;padding:9px;border:1px solid #b8ddd5;border-radius:9px;color:#28535a;background:#fff;text-align:left;font-size:.78rem;font-weight:700;transition:.16s}.answer-button:hover:not(:disabled){border-color:#32aa91;background:#f2fff7;transform:translateX(3px)}.answer-button b{display:grid;width:19px;height:19px;flex:0 0 auto;place-items:center;border-radius:50%;color:#fff;background:#3caa8c;font-size:.6rem}.answer-button:disabled{cursor:not-allowed}.answer-button.correct{border-color:#36b56e;background:#dff9e7}.answer-button.wrong{border-color:#dc7770;background:#ffe8e5}.answer-feedback{min-height:38px;margin:11px 0 0;color:#466870;font-size:.72rem;line-height:1.45}.achievement-box{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-top:14px;padding-top:13px;border-top:1px solid #d9ebe7}.achievement-box h3{margin:0;font-size:.86rem}.achievement-list{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.achievement{padding:4px 6px;border:1px solid #c7e4d5;border-radius:7px;color:#7d958b;background:#eef5f0;font-size:.58rem;filter:grayscale(1);opacity:.58}.achievement.unlocked{border-color:#e0bd58;color:#72571d;background:#fff5cd;filter:none;opacity:1;animation:badge-pop .42s ease}.stats-toggle{margin-top:13px;padding:0;border:0;color:#237e75;background:transparent;text-decoration:underline;font-size:.71rem}.stats-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:10px}.stat{padding:6px;border-radius:7px;background:#edf7f4}.stat span{display:block;color:#6d8686;font-size:.52rem}.stat strong{color:#176663;font-size:.72rem}
/* Construction */.construction-panel{margin-top:17px;padding:18px}.construction-heading>p{max-width:270px;margin:3px 0 0;color:var(--muted);font-size:.7rem;text-align:right}.building-list{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-top:13px}.building-button{position:relative;min-height:104px;padding:9px;border:1px solid #c4e2d9;border-radius:13px;color:#245759;background:linear-gradient(150deg,#fff,#effbf3);text-align:left;transition:.18s}.building-button:hover:not(:disabled),.building-button.selected{border-color:#28a882;box-shadow:0 7px 13px rgba(37,155,113,.16);transform:translateY(-3px)}.building-button:disabled{cursor:not-allowed;filter:grayscale(.6);opacity:.56}.building-icon{display:block;font-size:1.5rem}.building-button b{display:block;margin-top:3px;font-size:.74rem}.building-button small{display:block;margin-top:2px;color:#6d8182;font-size:.58rem}.building-cost{position:absolute;right:7px;bottom:7px;padding:3px 5px;border-radius:5px;color:#197365;background:#e2f6ec;font-size:.57rem;font-weight:800}.building-button.selected .building-cost{color:#fff;background:#189178}.overlay{position:fixed;z-index:10;inset:0;display:grid;place-items:center;padding:20px;background:rgba(4,50,52,.56);backdrop-filter:blur(7px)}.overlay.hidden{display:none}.welcome-card{width:min(440px,100%);padding:28px;border:1px solid #cceadb;border-radius:21px;background:linear-gradient(145deg,#fbffed,#d9f5e5);box-shadow:0 23px 60px rgba(0,35,38,.31);text-align:center}.welcome-icon{font-size:3rem;animation:earth-float 3s ease-in-out infinite}.welcome-card h2{margin:5px 0 9px;font-family:Georgia,"Noto Serif Thai",serif;font-size:1.57rem}.welcome-card>p:not(.eyebrow){margin:0;color:#49706d;line-height:1.65;font-size:.88rem}.welcome-card button{margin-top:20px;padding:11px 18px;border:1px solid #278f70;border-radius:10px;color:#fff;background:linear-gradient(135deg,#17a882,#277b65);font-weight:800;box-shadow:0 5px 12px rgba(26,139,103,.26)}
@keyframes cloud-move{to{transform:translateX(calc(100vw + 200px))}}@keyframes sun-pulse{50%{box-shadow:0 0 42px #ffe483}}@keyframes water-flow{to{transform:translateX(58px)}}@keyframes build-pop{50%{transform:scale(1.16)}}@keyframes badge-pop{50%{transform:scale(1.15)}}@keyframes earth-float{50%{transform:translateY(-7px) rotate(5deg)}}@media(max-width:940px){.game-header{grid-template-columns:1fr auto;gap:9px}.brand{order:-1}.top-stats{grid-column:1/-1;grid-row:2;justify-content:center}.sound-button{grid-column:2;grid-row:1}.game-layout{grid-template-columns:1fr}.building-list{grid-template-columns:repeat(3,1fr)}}@media(max-width:560px){.app-shell{padding:11px 9px 23px}.back-link span{display:none}.top-stats>div{min-width:51px;padding:4px}.top-stats span{font-size:.49rem}.top-stats strong{font-size:.77rem}.city-panel,.mission-panel,.construction-panel{padding:13px;border-radius:15px}.city-world{min-height:302px}.city-grid{gap:4px;margin-top:36px;padding:0 7px}.river{height:53px}.indicators{grid-template-columns:1fr}.indicator{grid-template-columns:100px 1fr 24px}.construction-heading{display:block}.construction-heading>p{margin-top:6px;text-align:left}.building-list{grid-template-columns:repeat(2,1fr)}.building-button{min-height:87px}.question-card h3{min-height:0}.weather{font-size:.59rem}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}