.forest-clothing{--clothes-ink:#665d46;--clothes-mint:#cfe5cf;color:var(--clothes-ink);width:100%;min-width:0;margin:12px 0 0;font-family:inherit}
.forest-clothing button{font:inherit;color:inherit;touch-action:manipulation}
.forest-clothing button:focus-visible{outline:3px solid #6b9a81;outline-offset:3px}
.clothing-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:4px;background:#efe8d3;border-radius:18px}
.clothing-slots button{min-height:35px;border:0;border-radius:13px;background:transparent;font-size:12px;color:#96886a;transition:background .15s,box-shadow .15s}
.clothing-slots button[aria-pressed="true"]{background:#fffcef;color:#64876d;font-weight:700;box-shadow:0 2px 0 #d9d1b7}
.clothing-showcase{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:center;gap:14px;margin:11px 0}
.clothing-preview{position:relative;min-width:0;isolation:isolate;border:1px solid #dce7d1;border-radius:48% 48% 22px 22px;background:radial-gradient(ellipse at 50% 45%,#f7fae9 10%,#e9f0d9 65%,#e3ebd1 100%);overflow:hidden}
.clothing-preview::before,.clothing-preview::after{position:absolute;z-index:-1;font-size:14px;color:#a7bd8d;content:'✧';top:35%;left:12%}
.clothing-preview::after{left:auto;right:11%;top:52%;font-size:10px}
.clothing-preview-stage{position:relative;height:202px;width:100%}
.clothing-avatar-canvas{display:block;width:100%;height:100%;outline:none;touch-action:pan-y}
.clothing-preview-label{position:absolute;z-index:1;top:9px;left:50%;transform:translateX(-50%);padding:3px 8px;border-radius:12px;background:#fff9e7bf;font-size:9px;color:#85916f;white-space:nowrap;pointer-events:none}
.clothing-turn{display:flex;align-items:center;justify-content:center;gap:12px;height:31px;margin:-5px 0 5px}
.clothing-turn button{width:32px;height:30px;border:1px solid #d8dfc7;border-radius:50%;background:#fffcef;color:#83976f;font-size:20px;line-height:1;padding:0;box-shadow:0 2px 0 #dce3cc}
.clothing-turn button:active{transform:translateY(1px);box-shadow:none}
.clothing-turn span{font-size:9px;color:#98a080;white-space:nowrap}
.clothing-selection{position:relative;min-width:0;padding:8px 0 6px}
.clothing-selection-flower{display:block;color:#e7b18c;font-size:28px;line-height:1;margin:0 0 13px;transform:rotate(-12deg);transform-origin:left}
.clothing-selection>small{display:block;color:#9eac86;font-size:9px;line-height:1.5;margin-bottom:6px}
.clothing-selection h3{font-size:17px;line-height:1.5;letter-spacing:-.5px;margin:0 0 8px;font-weight:700;word-break:keep-all;overflow-wrap:anywhere}
.clothing-selection p{font-size:11px;line-height:1.8;color:#a19373;margin:0 0 14px;word-break:keep-all;overflow-wrap:anywhere}
.clothing-balance{display:inline-block;border-top:1px dashed #e4dac1;padding-top:8px;font-size:10px;color:#ac8c54;white-space:nowrap}
.clothing-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.clothing-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0;border:2px solid #e8dec2;border-radius:16px;background:#fffbee;padding:6px 5px 8px;text-align:center;transition:border-color .15s,background .15s;overflow:hidden}
.clothing-card:hover{background:#fffdf5;border-color:#d6cfab}
.clothing-card.is-selected{border-color:#95b391;background:#edf3de;box-shadow:0 2px 0 #c9d9b9}
.clothing-card-art{height:44px;display:grid;place-items:center;margin-bottom:3px}
.clothing-card-art svg{width:43px;height:43px;display:block;filter:drop-shadow(0 2px 0 #958b6812)}
.clothing-card strong{font-size:11px;font-weight:700;line-height:1.5;letter-spacing:-.3px;word-break:keep-all;overflow-wrap:anywhere;margin:auto 0 3px}
.clothing-card small{font-size:10px;color:#b28e54;line-height:1.4}
.clothing-card small.is-owned{color:#8fa079}
.clothing-action{display:block;width:100%;min-height:43px;padding:10px 12px;margin-top:12px;background:#87ad88;border:2px solid #7c9f7a;border-radius:16px;color:#fffdec!important;font-size:14px!important;font-weight:700!important;box-shadow:0 3px 0 #65865f;line-height:1.3}
.clothing-action:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #65865f}
.clothing-action:disabled{background:#e1e7d0;border-color:#d8dec7;color:#99a384!important;box-shadow:0 2px 0 #d1d9bf}
.forest-clothing .clothing-note{font-size:10px;line-height:1.5;color:#ad9f7d;text-align:center;margin:9px 0 0;word-break:keep-all}
.clothing-preview-fallback{position:absolute;inset:35px 18px 15px;display:grid;place-items:center;font-size:11px;line-height:1.8;text-align:center;color:#92997d;margin:0}
#closet-dialog{width:min(510px,calc(100% - 22px));padding:22px 20px}
@media(max-width:430px){
  .forest-clothing{margin-top:9px}
  .clothing-slots button{min-height:32px;font-size:11px}
  .clothing-showcase{gap:10px;margin:9px 0}
  .clothing-preview-stage{height:169px}
  .clothing-turn{gap:8px;height:28px;margin-bottom:5px}
  .clothing-turn button{width:29px;height:28px;font-size:19px}
  .clothing-turn span{font-size:8px}
  .clothing-selection-flower{font-size:23px;margin-bottom:8px}
  .clothing-selection h3{font-size:15px;line-height:1.4;margin-bottom:7px}
  .clothing-selection p{font-size:10px;line-height:1.7;margin-bottom:9px}
  .clothing-selection>small{font-size:8px;margin-bottom:5px}
  .clothing-balance{font-size:9px;padding-top:6px}
  .clothing-cards{gap:6px}
  .clothing-card{padding:5px 4px 7px;border-radius:13px}
  .clothing-card-art{height:37px;margin-bottom:2px}
  .clothing-card-art svg{width:36px;height:36px}
  .clothing-card strong{font-size:10px;letter-spacing:-.4px}
  .clothing-card small{font-size:9px}
  .clothing-action{min-height:40px;margin-top:10px;font-size:13px!important}
  .forest-clothing .clothing-note{font-size:9px;margin-top:8px}
  #closet-dialog{padding:20px 16px}
}
@media(max-width:350px){
  .clothing-showcase{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:8px}
  .clothing-preview-stage{height:147px}
  .clothing-preview-label{font-size:8px;padding:2px 6px}
  .clothing-selection h3{font-size:13px}
  .clothing-selection-flower{font-size:20px;margin-bottom:6px}
  .clothing-selection p{font-size:9px}
  .clothing-card strong{font-size:9px}
  .clothing-card-art{height:32px}
  .clothing-card-art svg{width:31px;height:31px}
  .clothing-turn{gap:5px}
  .clothing-turn span{font-size:8px}
}
@media(max-height:600px){
  .clothing-preview-stage{height:135px}
  .clothing-selection-flower{display:none}
  .clothing-card-art{height:30px}
  .clothing-card-art svg{width:30px;height:30px}
  .clothing-showcase{margin:7px 0}
  .clothing-card{padding-top:3px;padding-bottom:5px}
}
@media(prefers-reduced-motion:reduce){.forest-clothing button{transition:none}}