/* Illustrated wardrobe: portraits are renders of the actual game models. */
#profile-dialog{width:min(780px,calc(100vw - 24px));max-width:780px;max-height:calc(100dvh - 32px);overflow:auto;background:#fff7e5;border:2px solid #cba67c;border-radius:24px;color:#4b5147}
#profile-dialog h2{color:#455e57}
.animal-picker{border:0;margin:20px 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.animal-picker legend{font-weight:800;margin-bottom:12px}
.animal-picker label{position:relative;display:flex!important;align-items:center;flex-direction:column;margin:0;padding:5px 4px 12px;border:2px solid #e5d8bc;border-radius:17px;background:#f1ecda;cursor:pointer;transition:background .15s,border-color .15s}
.animal-picker label:has(input:checked){border-color:#578e7c;background:#e0eddb;box-shadow:0 3px 0 #578e7c}
.animal-picker label:has(input:focus-visible){outline:3px solid #b07a29;outline-offset:3px}
.animal-picker input{position:absolute!important;left:8px;top:8px;width:16px!important;height:16px;accent-color:#508572;margin:0!important}
.animal-picker strong{font-size:13px;line-height:1.4}
.animal-portrait{display:grid;place-items:center;width:100%;aspect-ratio:1;font-size:44px}
.animal-portrait img{width:100%;height:100%;object-fit:contain}
@media(max-width:650px){.animal-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}#profile-dialog{padding:26px 18px}.animal-picker strong{font-size:12px}}

/* Warm paper, ink and enamel unify the controls with the modelled town. */
:root{--ink:#404e48;--green:#477763;--line:#e4d8bd;--shadow:0 8px 0 #6c72500c,0 12px 28px #405a4820;color:var(--ink)}
.brand,.status,.button.light,.view-tools button,.map-card,.third-person .map-card,.archery-controls,.third-person .movement-hint,#market-chat{background:#fff8e8f2;border:1px solid #d8c6a5;box-shadow:var(--shadow)}
.brand{border:2px solid #e9d9b8;border-radius:20px}
.button,.archery-controls button{border:1px solid #3d6656;border-bottom-width:3px;background:#4b806a;border-radius:12px;letter-spacing:.02em}
.button.light{color:#4d6054;border-color:#d8c6a5}
.button:hover,.archery-controls button:hover{filter:brightness(1.04)}
.avatar-button{background:#eed79d;border:2px solid #fff1cf;box-shadow:0 3px 0 #b89861;color:#596856}
.status{color:#526f5c}
.map-card{border-radius:18px;padding:16px}
.map-title{color:#59634c;border-color:#e5d5b6;font-size:14px}
.map-title .tiny{color:#a28b66}
nav button{color:#536353;min-height:42px}
nav button:hover{background:#eadfc5}
nav .dot{box-shadow:inset 0 -2px 0 #4b563320;border-radius:50%;color:#fffdf2}
.map-card>p{color:#97886a}
.view-tools button{border-bottom:3px solid #bca985;color:#5c6c58;border-radius:12px}
.view-tools button:last-child{font-size:20px}
.interaction-dock>span{background:#fff7e5ed;border:1px solid #dbc7a1;color:#667055}
.interaction-dock .button:disabled{background:#e9e7d5;color:#808572;border:1px solid #cfc7ad}
.archery-controls{border-radius:18px}
#archery-score{background:#f4dfaa;color:#886537;border:1px solid #e4cc92}
.archery-controls>span{color:#7b7c63}
kbd,.movement-hint kbd{background:#fffaec;color:#64765d;border-color:#d4caaf}
#market-chat{border-radius:18px;color:#53634f}
#chat-messages li{border-color:#e8ddc5}
#chat-input,input{background:#fffdf5;border-color:#dcd0b7;color:#4c6053}
#chat-status{color:#8d8065}
dialog{background:#fff8e8;border:2px solid #d8bf92;color:#4c5b4d;box-shadow:0 24px 80px #25473750}
dialog::backdrop{background:#233f485e;backdrop-filter:blur(4px)}
dialog h2{color:#50694f}dialog p{color:#74806a}
.close,#content-dialog>.close{background:#f6ead0;border:1px solid #d9c298;color:#5a6953;width:44px;height:44px;box-shadow:0 3px 0 #bca78430}
.card{background:#f4efdc;border:1px solid #dfd3b7;border-radius:17px}
.card h3{color:#526b56}.card p{color:#78806b}.step>span,.booth-badge{background:#e7edda;color:#587e64;border:1px solid #d2ddc1}
.loading{background:#fff8e8;border:2px solid #ddc9a2}.loading p{color:#8a8169}
.room-tag{background:#fff6df;border-color:#dac7a3;color:#7b805f}
.intro h1{color:#4f6957;font-size:36px;letter-spacing:-1px}.intro h1 span{color:#c99c51}.intro>p:not(.eyebrow){color:#7a8062}
.bottom-bar,.movement-hint small{color:#5c735b}.help-button{color:#4d6756}
#toast{background:#4c735e;border:1px solid #e0cca0;box-shadow:0 5px 20px #25473730}
#profile-dialog{padding:0;overflow:hidden;max-height:calc(100dvh - 32px)}
.profile-body{padding:32px;max-height:calc(100dvh - 36px);overflow:auto;overscroll-behavior:contain}
#profile-dialog>.close{z-index:2;right:12px;top:12px}
#profile-dialog h2{padding-right:28px;font-size:25px;margin-bottom:8px}
#profile-dialog .eyebrow{margin-top:0}
#profile-dialog #profile-form>label{margin:12px 0}
#profile-dialog #random-name{padding:9px 14px;min-height:44px}
#profile-dialog .muted{margin:8px 0}
#profile-dialog .animal-picker{margin:15px 0}
#profile-form>button[type=submit]{position:sticky;bottom:0;box-shadow:0 0 0 5px #fff8e8;width:100%;z-index:1}
@media(min-width:651px){.intro{max-width:220px;top:150px}.intro h1{font-size:32px}.intro>p:not(.eyebrow){display:none}.intro .room-tag{font-size:10px}.movement-hint{left:32px;max-width:180px}.movement-hint small{text-align:center}.archery-controls{bottom:205px}.topbar{padding-top:20px}}
@media(max-width:650px){.profile-body{padding:26px 18px}#profile-dialog{padding:0}.brand{border-radius:13px}.intro{display:none}.archery-controls{box-shadow:0 4px 14px #405a4820}.map-card.expanded{background:#fff8e8fa}.top-actions .avatar-button{width:40px;height:40px}.interaction-dock>span{font-size:10px}.button{letter-spacing:0}.bottom-bar .help-button{background:#fff8e8e8;border:1px solid #deceac}}
@media(min-width:651px){.movement-hint>span{display:none}.movement-hint small{margin-top:2px;line-height:1.5}.movement-hint{padding:10px!important}}
@media(min-width:651px){.intro .room-tag{display:none}}