/* Shared panel styles and town tokens. Application layout lives in town-shell.css. */
/* One set of town UI tokens. Feature styles are scoped to their own panels. */
:root{font-family:Verdana,Arial,sans-serif;color:#5f5277;background:#e7eff8;font-synthesis:none;--ink:#5d5073;--muted:#8a809b;--lilac:#af95cf;--border:#b8a8d0;--paper:#fffbf5;--cream:#fff1c7;--blue:#adcce9;--shadow:#657da322}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 25% 0,#f7edfb,transparent 48%),linear-gradient(#dfeef7,#ecdef6);color:var(--ink)}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button,a,input,select{touch-action:manipulation}button{border:0}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ba8d48;outline-offset:3px}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}svg.town-icon{flex:none;vertical-align:middle}button[data-direction]{user-select:none;-webkit-user-select:none}
#panel{width:min(820px,calc(100vw - 28px));max-width:calc(100vw - 28px);max-height:calc(100dvh - 28px);padding:30px;border:2px solid #b29acb;border-radius:21px;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 4px #ffffffd9,0 24px 100px #3c2b6266;overflow:auto;overscroll-behavior:contain;scrollbar-color:#d1bfe0 #fff8f2;scrollbar-width:thin}#panel::backdrop{background:#55516f77;backdrop-filter:blur(4px)}#panel .close{position:sticky;float:right;right:0;top:0;z-index:20;width:32px;height:32px;display:grid;place-items:center;margin:-16px -17px -16px 10px;background:#f5edf9;border:1px solid #d5c5e2;border-radius:50%;color:#937aa9;font-size:23px;line-height:1}.panel-label{display:block;font-size:8px;font-weight:700;letter-spacing:1.7px;color:#b096ab;margin-top:4px}#panel h2{font-size:27px;font-weight:700;color:#80628f;letter-spacing:-.8px;line-height:1.2;margin:9px 28px 11px 0}#panel h3{font-size:15px;line-height:1.4;letter-spacing:-.25px;margin:0 0 8px;color:#816a8c}#panel p{font-size:12px;line-height:1.75;color:#796c86;margin:9px 0 16px}#panel small{line-height:1.5}#panel canvas{display:block;max-width:100%;height:auto;min-height:0;image-rendering:pixelated}#panel .primary{display:block;width:100%;min-height:45px;padding:12px 17px;margin:15px 0 8px;border:1px solid #9472b0;border-bottom:3px solid #87679f;border-radius:10px;background:linear-gradient(#8e68a9,#7b5597);color:#fffdfb;font-size:12px;font-weight:700;box-shadow:inset 0 2px #dfc9ee;text-align:center}#panel .primary:hover{filter:brightness(1.035)}.choice{display:inline-flex;justify-content:center;align-items:center;gap:5px;min-height:35px;font-size:10px;padding:8px 11px;border:1px solid #d3c1df;border-radius:8px;background:#f2eaf8;color:#8e719f}.choice[aria-pressed=true]{background:#dcccdf;border-color:#ad8fbd;color:#755383}.menu-item{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px;width:100%;padding:13px 14px;border:1px solid #e4d6ba;border-radius:10px;background:#fcf2dc;color:#9c7b7f;font-size:11px;text-align:left;margin:8px 0}.menu-item:hover{background:#f7e8c6}.field{display:block;font-size:11px;margin:17px 0;color:#8c7a99}.field input{display:block;margin-top:7px;width:100%;border:1px solid #ccbada;background:white;border-radius:9px;padding:11px 12px;color:#735d83;min-height:43px}.small-note,#panel .small-note{font-size:9px;line-height:1.65;color:#a99aaf}.reward-pill{display:inline-block;margin:8px 0 12px;padding:10px 15px;background:#fff0b8;border:1px solid #dec384;border-radius:30px;color:#a2844a;font-size:11px}.discovery-reveal{text-align:center;padding:20px 28px 10px}.discovery-reveal>.town-icon{color:#d4b15b;margin:6px auto 20px}.discovery-reveal .panel-label{margin-top:8px}#panel .discovery-reveal h2{margin-right:0}
.journal-tabs{display:flex;gap:5px;flex-wrap:wrap;border-bottom:1px solid #e5d9e9;padding-bottom:12px;margin:22px 0}.journal-tabs button{padding:9px 13px;min-height:37px;border-radius:8px;background:#f1e9f5;color:#a08baa;font-size:11px}.journal-tabs button[aria-selected=true]{background:#b198ca;color:#fffafc}.journal-profile{display:flex;align-items:center;gap:14px;margin:15px 0}.profile-medallion{display:grid;place-items:center;background:#faf0d4;width:64px;height:64px;border-radius:50%;color:#c5a463;border:1px solid #e1cea1}.journal-profile>div{flex:1}.journal-profile h3{font-size:19px!important;margin:0!important}.journal-profile p{margin:3px 0!important}.journal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:23px 0}.journal-stats>div{border:1px solid #e0d1e8;border-radius:12px;padding:17px 10px;text-align:center;background:#f7f0fb}.journal-stats b{display:block;font-size:25px;color:#9a7bae;font-weight:500}.journal-stats span{display:block;font-size:9px;color:#ad97b8;margin-top:7px}.journal-paths{display:grid;gap:9px;margin:16px 0}.journal-paths button{display:flex;align-items:center;gap:14px;text-align:left;background:#fcf5eb;border:1px solid #e7d9c6;border-radius:11px;padding:15px;color:#af91b7}.journal-paths button>span{flex:1}.journal-paths b{display:block;font-size:12px;color:#8a718d}.journal-paths small{display:block;font-size:10px;color:#b39baa;margin-top:5px}.festival-banner{width:100%;display:flex;gap:15px;align-items:center;padding:17px;background:linear-gradient(110deg,#fcf0d7,#fae9e1);border:1px solid #e2caa6;border-radius:12px;text-align:left;color:#c79757}.festival-banner span{flex:1}.festival-banner b{font-size:13px;display:block;color:#a97d69}.festival-banner small{display:block;font-size:10px;margin-top:5px;color:#bb9a7e}
.collection-card{border:1px solid #dfd0e8;border-radius:15px;padding:19px;margin:16px 0;background:#fcf8fd}.collection-heading{display:flex;align-items:center;gap:13px}.collection-heading>.town-icon{color:#b895c8}.collection-heading>div{flex:1}.collection-heading h3{margin:0!important}.collection-heading p{font-size:10px!important;margin:5px 0!important}.collection-heading>b{font-size:21px;color:#b097c2}.collection-card progress{display:block;margin:17px 0;width:100%;height:7px;border:0;border-radius:20px;overflow:hidden;accent-color:#bca0d4}.collection-card progress::-webkit-progress-bar{background:#eee3f3}.collection-card progress::-webkit-progress-value{background:#bba0d1}.collection-pieces{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:8px}.collection-piece{display:flex;align-items:center;flex-direction:column;gap:9px;padding:14px 8px;border:1px dashed #d9cadf;border-radius:9px;background:#f3edf7;color:#c0b0cb}.collection-piece.found{background:#fff4d5;border-style:solid;border-color:#e5d195;color:#bf9b50}.collection-piece span{font-size:10px;color:#8e7d9b}.collection-piece small{font-size:8px;color:#b5a3be}.collection-reward{display:flex;gap:8px;align-items:center;color:#af9583!important;font-size:10px!important;margin:15px 0 0!important}.badge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.badge-card{display:flex;flex-direction:column;align-items:center;gap:11px;padding:18px 12px;text-align:center;border:1px dashed #dacde1;border-radius:12px;background:#f4f0f8;color:#c3b4ce}.badge-card:disabled{opacity:.8}.badge-card b{font-size:11px;color:#9c8fa9}.badge-card span{font-size:9px;line-height:1.6;color:#b1a3bc}.badge-card small{font-size:9px;color:#b49ec2}.badge-card.earned{background:#fff4d9;border:1px solid #e6d297;color:#c6a65c}.badge-card.earned b{color:#a08364}.badge-card[aria-pressed=true]{box-shadow:inset 0 0 0 2px #bb9c79}.record-list{display:grid;gap:9px}.record-row{display:flex;align-items:center;gap:14px;padding:15px;border-radius:10px;border:1px solid #ddd1e7;background:#f9f3fc;text-align:left;color:#b69ac7}.record-row>span{flex:1}.record-row b{display:block;font-size:12px;color:#947a9f}.record-row small{font-size:9px;display:block;color:#b7a0c3;margin-top:5px}.record-row strong{font-size:20px;font-weight:500;color:#aa8cbc}
.district-strip{display:flex;gap:6px;overflow:auto;padding:7px 0 14px;margin:13px 0}.district-chip{display:flex;align-items:center;gap:7px;white-space:nowrap;padding:10px 11px;border:1px solid #ded1e7;border-radius:9px;background:#f9f4fc;color:#a38eb2;font-size:10px}.district-chip>span{font-size:8px;color:#bca9c5}.district-chip[aria-pressed=true]{background:#ad95c5;border-color:#9d82b7;color:#fffaf8}.district-chip[aria-pressed=true]>span{color:#ded0e9}.district-preview{position:relative;height:210px;border:1px solid #bdaacd;border-radius:13px;overflow:hidden;background:#ded1e8}.district-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%;image-rendering:auto}.district-preview>span{position:absolute;bottom:13px;left:13px;border:1px solid #dfd1ba;background:#fff5e4ed;border-radius:20px;padding:8px 12px;font-size:9px;color:#a48789}.district-title{display:flex;align-items:center;gap:14px;margin:21px 0 0;color:#b098c3}.district-title h3{font-size:20px!important;margin:0!important}.district-title p{margin:5px 0!important;font-size:11px!important}.district-places{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}.district-places small{display:block;font-size:9px;margin-top:6px;color:#b49c9d}
.postcard{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border:1px solid #dcccaf;border-radius:5px;background:#fff8e7;box-shadow:0 6px 20px #ad959c18;margin:22px 0;transform:rotate(-.5deg)}.postcard>img{width:100%;height:250px;object-fit:cover;object-position:center}.postcard-copy{padding:28px 22px;position:relative}.postcard-copy>span{font-size:7px;letter-spacing:2px;color:#b9a081}.postcard-copy h3{margin:19px 0 10px!important;font-family:Georgia,serif;font-size:24px!important;font-weight:400}.postcard-copy p{font-family:Georgia,serif;font-style:italic;font-size:17px!important;color:#aa8e79!important;line-height:1.65!important}.postcard-copy small{font-size:8px;color:#b39b83}.postcard-options{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0}.telescope #nightSky{width:100%;border:2px solid #8e81a9;border-radius:13px;touch-action:none;image-rendering:auto}.star-buttons{display:flex;gap:7px;flex-wrap:wrap;margin:13px 0}.star-buttons button{min-width:39px}.riddle-stones{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:28px 0}.riddle-stones button{padding:22px 12px;border:1px solid #bad0ba;border-bottom:4px solid #adbdac;border-radius:50% 50% 15px 15px;background:linear-gradient(#e8f1df,#d1e0cb);color:#8ba78c;min-height:126px}.riddle-stones span{display:block;font-size:11px;margin-top:14px;color:#8ca082}.riddle-answer{min-height:56px;display:flex;gap:18px;justify-content:center;align-items:center;background:#edf2e6;border-radius:12px;font-size:12px;color:#a4b397}.festival-art{height:150px;display:flex;flex-direction:column;gap:15px;align-items:center;justify-content:center;background:radial-gradient(ellipse,#f9dfa4,#f8e7d1);color:#c9a15c;border-radius:15px;margin-bottom:23px}.festival-art span{font-size:7px;letter-spacing:2.5px;color:#bf9f77}.festival-checklist{display:grid;gap:9px;margin:22px 0}.festival-checklist>div{display:flex;gap:12px;align-items:center;background:#fbf2df;border:1px solid #e7d9ba;border-radius:10px;padding:14px;color:#c5a369}.festival-checklist span{flex:1;font-size:12px;color:#a68c87}.festival-checklist b{font-size:10px;font-weight:500}.npc-card{display:grid;grid-template-columns:170px 1fr;align-items:center;gap:25px}.npc-card canvas{width:150px!important}.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:25px 0}.help-grid section{border:1px solid #e2d6e9;background:#fbf6fd;border-radius:12px;padding:18px}.help-grid .town-icon{color:#b395c5;margin-bottom:14px}.help-grid p{font-size:11px!important;margin:0!important}
.friend-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #ebdfed}.friend-avatar{display:grid;place-items:center;border:1px solid #d7c1e1;border-radius:50%;width:45px;height:45px;background:#f1e8f7;color:#b299c5}.friend-row>span:nth-child(2){flex:1}.friend-row b{font-size:12px;color:#8b739a}.friend-row small{display:block;font-size:9px;color:#b29dc0;margin-top:4px}.town-empty{text-align:center;padding:30px 25px;color:#c2abd3}.town-empty h3{margin-top:17px!important}.town-empty p{font-size:11px!important}.neighbour-profile{text-align:center;max-width:520px;margin:auto}.neighbour-stage{height:280px;display:flex;justify-content:center;background:radial-gradient(ellipse at center bottom,#ded0e6,transparent 40%),linear-gradient(#efe4f7,#fff7e3);border-radius:17px;margin-bottom:25px}.neighbour-stage canvas{height:280px!important;width:auto!important}.neighbour-profile h2{margin-right:0!important}.profile-badges{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:15px 0}.profile-badges span{display:flex;gap:5px;align-items:center;padding:8px 9px;border-radius:20px;background:#fbf0cd;border:1px solid #e5d39d;font-size:9px;color:#ae925b}.profile-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}.profile-actions .primary,.profile-actions .menu-item{margin:0}.party-current{display:flex;gap:17px;align-items:center;padding:21px;background:#f2eaf7;border:1px solid #e0cee9;border-radius:13px;color:#ae91c3;margin:24px 0}.party-current b{display:block;font-size:13px;color:#9376a2}.party-current small{display:block;margin-top:6px;font-size:10px}.leaderboard-filters{display:flex;gap:7px;flex-wrap:wrap;margin:22px 0}.leaderboard-filters select{flex:1;padding:9px 12px;background:#f5ecfa;border:1px solid #d6c1e3;border-radius:9px;color:#92749f;min-width:180px}.leaderboard-rows{list-style:none;padding:0;margin:0}.leaderboard-rows li{display:flex;gap:14px;align-items:center;padding:15px 12px;border-bottom:1px solid #e9ddec}.rank-number{font-size:16px;color:#bb9ccd;width:27px;font-weight:500}.leaderboard-rows li>span{flex:1;font-size:12px;color:#93799d}.leaderboard-rows strong{font-size:16px;font-weight:500;color:#ac8fbe}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 0;border-bottom:1px solid #e8ddeb}.setting-row b{display:block;font-size:12px;color:#8e749c}.setting-row small{display:block;font-size:10px;margin-top:6px;color:#b19bbc}.setting-row input[type=range]{width:135px;accent-color:#b495c9}.save-settings{margin:30px 0 0;padding-top:24px;border-top:1px solid #e3d4e9}.save-buttons{display:flex;gap:8px;flex-wrap:wrap}.file-choice{cursor:pointer}.file-choice input{position:absolute;opacity:0;width:1px;height:1px}.save-conflict,.backup-preview{background:#fff2d3;border:1px solid #dfc691;border-radius:12px;padding:18px;margin-top:20px}.town-settings #settingsNotice{min-height:10px}.runway-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.runway-entry{text-align:center;border:1px solid #d8c4e2;border-radius:12px;background:linear-gradient(#efe5f7,#fff4df);padding:14px 9px}.runway-entry canvas{width:150px;max-width:100%;margin:auto}.runway-entry h3{font-size:12px!important}.runway-entry small{display:block;color:#ad8cac;font-size:10px}.runway-clock{display:flex;justify-content:space-between;align-items:center;margin:15px 0;padding:12px 15px;background:#f8e9ed;border:1px solid #e2c7d2;border-radius:10px;color:#b38197;font-size:11px}.runway-invite{font-size:10px;line-height:1.6}
@media(max-width:700px){#panel{width:calc(100vw - 20px);max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:24px 18px;border-radius:17px}#panel h2{font-size:24px}#panel p{font-size:11px}#panel .close{margin:-12px -7px -12px 8px}.panel-label{font-size:7px}.journal-tabs{gap:4px;margin:18px 0;padding-bottom:11px}.journal-tabs button{font-size:9px;padding:8px 10px}.journal-stats{gap:6px}.journal-stats>div{padding:14px 4px}.journal-stats b{font-size:21px}.journal-stats span{font-size:8px}.journal-paths button{padding:13px 12px;gap:10px}.journal-paths b{font-size:11px}.journal-paths small{font-size:9px}.journal-profile .choice{font-size:9px}.profile-medallion{width:49px;height:49px}.badge-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.badge-card{padding:15px 9px}.collection-card{padding:15px 12px}.collection-pieces{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-heading h3{font-size:14px!important}.collection-heading p{font-size:9px!important}.collection-heading>.town-icon{width:26px}.collection-heading>b{font-size:18px}.district-preview{height:190px}.district-title h3{font-size:18px!important}.district-places{grid-template-columns:1fr}.postcard{grid-template-columns:1fr}.postcard>img{height:170px}.postcard-copy{padding:18px 20px}.postcard-copy h3{margin-top:10px!important}.postcard-copy p{font-size:17px!important}.postcard-copy small{display:block;margin-top:10px}.riddle-stones{gap:9px}.riddle-stones button{padding:19px 8px;min-height:115px}.npc-card{grid-template-columns:95px 1fr;gap:13px}.npc-card canvas{width:95px!important}.npc-card h2{font-size:23px!important}.help-grid{grid-template-columns:1fr;gap:11px}.help-grid section{padding:15px}.help-grid .town-icon{margin-bottom:9px}.setting-row{gap:10px}.setting-row input[type=range]{width:104px}.setting-row b{font-size:11px}.setting-row small{font-size:9px}.runway-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.discovery-reveal{padding:12px 5px}.neighbour-stage{height:250px}.neighbour-stage canvas{height:250px!important}.dressing-room{grid-template-columns:110px minmax(0,1fr);gap:12px}.outfit-preview{margin-top:10px}.outfit-preview canvas{width:110px!important;height:165px!important}.wardrobe-group{padding:8px 6px;gap:5px}.wardrobe-group .choice{font-size:9px;padding:7px 8px;min-height:32px}.wardrobe-actions{bottom:-24px}.wardrobe-actions .choice{min-width:0}.shop-filters{gap:4px}.shop-item{gap:7px}.look-card span{font-size:10px}.look-card small{font-size:8px}}
@media(max-width:360px){.badge-grid{grid-template-columns:1fr 1fr}.dressing-room{grid-template-columns:90px minmax(0,1fr)}.outfit-preview canvas{width:90px!important;height:135px!important}.wardrobe-group .choice{font-size:8px;padding:6px}.look-card{gap:5px}.look-card img{width:28px}}
@media(max-height:560px) and (orientation:landscape){#panel{max-height:calc(100dvh - 14px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Keep form entry readable without mobile browser zoom. */
@media(max-width:700px){#panel input:not([type=range]):not([type=checkbox]):not([type=file]),#panel select{font-size:16px}#panel p{font-size:12px}}