/* Original illustrated town and character studio theme. */
body{background:#e8f0ee;background-image:radial-gradient(#cddfdc 1px,transparent 1px);background-size:20px 20px}
.app-shell{background:#f9f5e9;min-height:100vh;box-shadow:0 0 0 1px #c5d7d7,0 18px 70px #37546224}
.topbar{background:linear-gradient(115deg,#286785,#72aeb3);margin:0 -30px;padding:0 30px;border-bottom:5px solid #244d6d}
.brand h1{color:#fff8df;text-shadow:1px 2px #1d516b}
.brand .eyebrow{color:#cde6e4}
.brand-mark{background:#f8dc89;color:#457950;box-shadow:0 3px 0 #254f67}
.status-person{color:#fff9e8}
.mini-avatar{border-color:#f7e4af}
.nav-tabs{background:#d7e7ed;border:2px solid #b5d1dc;border-radius:0 0 15px 15px;padding:4px 6px 0}
.nav-tab{color:#426b7b;border-radius:10px 10px 0 0}
.nav-tab:hover{background:#ecf5ef;color:#22536e}
.nav-tab.active{background:#fbf6e9;color:#265c77;border-bottom-color:#f1b854}
.section-heading h2{color:#275a72}
.day-chip{background:#fff9df;border-color:#e3d0a1}

/* Character creation */
.create-screen{grid-template-columns:.95fr 1.05fr;margin-top:32px;min-height:640px;border:5px solid #477b96;border-radius:19px;box-shadow:0 8px 0 #adc4c4,0 20px 42px #2c526b2a}
.create-art{background:#b8d8e5;min-height:640px;padding:20px 25px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;border-right:5px solid #477b96}
.studio-banner{position:relative;z-index:2;background:#285f82;color:#fff4d7;font:900 18px Nunito,system-ui,sans-serif;letter-spacing:2px;text-align:center;width:100%;padding:12px;border:3px solid #eac27e;border-radius:10px;box-shadow:0 5px 0 #2e6982}
.studio-scene{position:relative;width:100%;height:425px;background:linear-gradient(#a8d9eb 0 66%,#83b875 66% 100%);border:5px solid #f9f0d4;border-radius:19px;overflow:hidden;box-shadow:inset 0 0 0 3px #85b9c9,0 5px 0 #739eae}
.studio-scene:before{content:'';position:absolute;left:-15%;bottom:-60px;width:130%;height:170px;background:#b7d489;border-radius:50%;box-shadow:0 -18px 0 #9ec77e}
.studio-scene:after{content:'✿   ✿          ✿       ✿';position:absolute;bottom:11px;left:25px;color:#f6e8a9;font-size:25px;letter-spacing:8px;white-space:nowrap}
.studio-cloud{position:absolute;width:85px;height:23px;background:#eff8f1;border-radius:50%;top:32px;left:38px;box-shadow:18px -8px 0 3px #eff8f1,40px 0 #eff8f1}
.studio-cloud.cloud-two{left:auto;right:40px;top:65px;transform:scale(.7)}
.studio-trees{position:absolute;bottom:110px;width:100%;text-align:center;color:#5d9e63;font-size:82px;letter-spacing:205px;white-space:nowrap;transform:translateX(15px);text-shadow:3px 4px #3e7a50}

.preview-plaque{position:relative;z-index:2;width:84%;text-align:center;background:#fff6dc;border:3px solid #557e8d;border-radius:12px;padding:9px 12px;color:#315d71;box-shadow:0 4px 0 #8cabb3}
.preview-plaque span{display:block;font:900 21px Nunito,system-ui,sans-serif}
.preview-plaque small{font-size:11px;color:#8a957c}
.create-content{padding:34px 39px 28px;overflow:auto}
.create-content h2{font-size:34px;margin-bottom:5px;color:#275b76}
.create-content p{margin-bottom:20px;font-size:14px}
.create-content input:not([type]){padding:11px 14px;border:2px solid #b9cfd1}
.create-content fieldset{margin:17px 0 0}
.create-content legend,.create-content label[for=character-name]{font-size:13px;margin-bottom:8px;color:#2d6073}
.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.swatches{gap:11px}
.swatch{width:33px;height:33px;border:3px solid #fff8e6}
.swatch.skin-light{background:#f2cfaa}.swatch.skin-warm{background:#cb9674}.swatch.skin-deep{background:#8b5d48}
.swatch.hair-chestnut{background:#694f3e}.swatch.hair-black{background:#2d343d}.swatch.hair-blond{background:#d6af69}.swatch.hair-auburn{background:#aa684b}
.style-options{display:flex;gap:8px;flex-wrap:wrap}
.style-options label{position:relative;margin:0;cursor:pointer}
.style-options input{position:absolute;opacity:0}
.style-options span{display:block;border:2px solid #b8d0d6;background:#f4f5e8;color:#4c6e7c;border-radius:8px;padding:7px 11px;font-size:12px;font-weight:800}
.style-options input:checked+span,.style-options input:focus-visible+span{background:#377391;border-color:#245c7c;color:white}
.create-actions{display:flex;gap:12px;align-items:center;margin-top:22px}
.create-actions .button{background:#307b5c;box-shadow:0 4px 0 #236144}
.create-actions .text-button{background:#e6edf0}

/* City map. The SVG is a new illustration made for this game. */
.town-map{height:auto;aspect-ratio:12/7;min-height:520px;background:#a7d180;border:7px solid #ecf4d5;border-radius:18px;box-shadow:0 0 0 4px #426f88,0 11px 0 #8eabae,0 23px 28px #4264533b;isolation:isolate}
.town-map:before,.town-map:after{content:none}
.map-art{position:absolute;inset:0;background:url('town.svg') center / 100% 100% no-repeat;z-index:0}
.map-banner{position:absolute;z-index:3;top:9px;left:50%;transform:translateX(-50%);border:3px solid #244f74;background:#316a8c;border-radius:7px;padding:6px 17px;color:#fff3cd;box-shadow:0 4px 0 #214f67;font:900 13px Nunito,system-ui,sans-serif;letter-spacing:1.4px;white-space:nowrap}
.map-banner span{color:#f9cf60}
.place-card{width:205px;min-height:67px;padding:7px 10px;background:#fff9e3;border:3px solid #2e6180;border-radius:10px;box-shadow:0 4px 0 #1f4d68,0 8px 15px #2a54447a;transform:rotate(-2deg)}
.place-card:hover{transform:translateY(-5px) rotate(0);box-shadow:0 8px 0 #1f4d68,0 15px 22px #2a54447a}
.place-card strong{font-size:16px;color:#23536b;line-height:1.15}
.place-card small{color:#6c7765;font-size:11px;margin-top:3px}
.place-orchard{left:6%;top:31%}
.place-library{right:5%;top:36%;transform:rotate(2deg)}
.place-shop{left:auto;right:12%;bottom:4%;transform:rotate(2deg)}
.place-home{left:9%;right:auto;bottom:4%}
.welcome-note{border:2px solid #b8d0bd;background:#eef4e8}
.welcome-note strong{color:#2b6170}

.portrait-card .edit-character{margin-top:17px;border:2px solid #b9d6d9;color:#2e677a;background:#eaf3ee}

@media(max-width:900px){.create-screen{grid-template-columns:.8fr 1.2fr}.create-content{padding:27px 24px}.create-art{min-height:640px;padding:15px}.studio-trees{letter-spacing:115px}.town-map{min-height:450px}.place-card{width:180px;min-height:60px}.place-card strong{font-size:14px}.place-card small{font-size:10px}}
@media(max-width:650px){.topbar{margin:0 -15px;padding:0 15px}.create-screen{display:flex;flex-direction:column;margin:20px auto;min-height:0}.create-art{width:100%;min-height:355px;height:355px;border-right:0;border-bottom:5px solid #477b96;padding:9px}.studio-banner{font-size:12px;padding:5px}.studio-scene{height:268px}.studio-trees{bottom:60px;font-size:50px;letter-spacing:100px}.preview-plaque{padding:3px}.preview-plaque span{font-size:16px}.preview-plaque small{font-size:9px}.create-content{padding:22px 20px}.create-content h2{font-size:28px}.option-grid{gap:6px}.swatches{gap:7px}.swatch{width:30px;height:30px}.town-map{min-height:0;height:660px;aspect-ratio:auto}.map-art{background-size:auto 100%;background-position:center}.map-banner{font-size:9px;letter-spacing:.4px;top:6px;padding:5px}.place-card{width:42%;min-height:67px;padding:5px}.place-card strong{font-size:12px}.place-card small{font-size:9px}.place-orchard{left:3%;top:26%}.place-library{right:3%;top:37%}.place-shop{right:4%;bottom:4%}.place-home{left:4%;bottom:4%}}
@media(max-width:650px){.town-map{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:0 9px 12px}.map-art{position:relative;grid-column:1/-1;display:block;width:calc(100% + 18px);margin:0 -9px;aspect-ratio:12/7;background-size:100% 100%}.map-banner{top:5px;font-size:8px}.place-card,.place-orchard,.place-library,.place-shop,.place-home{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;min-height:69px;transform:none}.place-card:hover{transform:translateY(-3px)}}