/* Raster art stays inside a measured content box. No control scales its image beyond its own bounds. */
.square,.rail,.bottom-nav button,.floating-invite,.close,.carousel-arrow{overflow:hidden;display:grid;place-items:center;isolation:isolate}
.square>.ui-icon,.rail>.ui-icon,.bottom-nav button>.ui-icon,.floating-invite>.ui-icon{width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;object-position:50% 50%;filter:none;transform:none}
.square,.rail,.bottom-nav button{padding:2px;background:linear-gradient(145deg,#fffafa,#f3dce9);border:1px solid #dab4cd;box-shadow:inset 0 1px #fff,0 2px 5px #5c36572b;border-radius:12px}
.skill-panel .skill-icon{width:100%;height:6cqh;display:grid;place-items:center;overflow:hidden}
.skill-panel .skill-icon .ui-icon{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;object-position:center;margin:0;transform:none}
.currency>.ui-icon{width:1.35em;height:1.35em;max-width:1.35em;max-height:1.35em}
.item-icon{overflow:hidden;display:grid;place-items:center}.item-icon .ui-icon{width:100%;height:100%;max-width:100%;max-height:100%}
.premium>.ui-icon{position:static;width:5cqw;height:5cqw;max-height:100%;object-fit:contain;transform:none;flex-shrink:0}
.premium{display:flex;align-items:center;justify-content:center;gap:1cqw;padding:0 5cqw 0 1cqw;overflow:visible}
.premium b{display:grid;place-items:center;overflow:hidden}.premium b>.ui-icon{max-width:100%;max-height:100%}
.stream-brand{top:1.2%;left:22%;right:22%;height:3.4%;padding:2px 5px;gap:4px;border-radius:30px;background:#382a405e;text-shadow:none;justify-content:flex-start;letter-spacing:0;font-size:2.4cqw;color:white;overflow:hidden}
.live-avatar{width:6cqw;height:6cqw;flex:0 0 6cqw;border-radius:50%;background:#f6d6e7;overflow:hidden;border:1px solid #fff7}.live-avatar img{width:100%;height:220%;object-fit:cover;object-position:center top}
.stream-host{display:flex;flex-direction:column;min-width:0;flex:1}.stream-brand b{font-size:2.4cqw;letter-spacing:0}.stream-brand small{position:static;font-size:1.6cqw;letter-spacing:0;overflow:hidden;text-overflow:ellipsis}
.live-tag{background:#ee477d;padding:2px 3px;border-radius:3px;font-size:1.8cqw;font-weight:800}.live-viewers{font-size:2cqw;white-space:nowrap}
.stream-chat{left:5%;right:auto;top:auto;bottom:17.7%;width:67%;height:12.6%;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;overflow:hidden;z-index:5;mask-image:linear-gradient(transparent,#000 12%);pointer-events:none}
.stream-chat p{display:flex;gap:5px;align-items:center;flex-shrink:0;margin:0;padding:2px 5px 2px 2px;border:0;border-radius:0;background:linear-gradient(90deg,#251c344a,#251c341a 70%,transparent);color:#fff;font-size:clamp(9px,2.65cqw,13px);line-height:1.25;text-shadow:0 1px 3px #241c38,0 0 2px #241c38;box-shadow:none;animation:comment-enter .25s ease-out both;transition:opacity .6s}
.stream-chat b{display:inline;color:#ffe2f4;font-size:inherit;font-weight:800;margin-right:3px}.stream-chat p.leaving{opacity:0}
.comment-avatar{display:grid;place-items:center;width:5.5cqw;height:5.5cqw;flex:0 0 5.5cqw;border-radius:50%;background:#bb88ac;color:white;font-size:2.4cqw;text-shadow:none}.avatar-1{background:#7895bb}.avatar-2{background:#bb9176}.avatar-3{background:#809f8b}
.stream-reactions{top:auto;bottom:18%;right:7%;width:10%;height:19%;overflow:hidden;z-index:5}
.stream-reaction{left:10%;width:7cqw;height:7cqw;animation:live-heart 2.4s ease-out both;pointer-events:none}
@keyframes comment-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes live-heart{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:.95}85%{opacity:.7}100%{opacity:0;transform:translate(var(--drift),-17cqh) rotate(var(--sway)) scale(1.1)}}
.reduce-motion .live-comment{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.live-comment{animation:none;transition:none}}
.wardrobe-preview .outfit-ensemble{width:100%;height:100%;margin:0;object-fit:contain;object-position:center bottom;filter:none}
.outfit-tabs button{width:20%;overflow:hidden}.outfit-tabs span{font-size:2.3cqw}.outfit-tabs img{height:6cqh;object-fit:contain}
.outfit-reference{text-align:center;font-size:2.5cqw;line-height:1.3;margin:.5cqh 0;color:#87677f}

.art-fit{container-type:size;position:relative;display:inline-block;overflow:hidden;vertical-align:middle}
.art-fit>.art-fit-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(var(--art-fill,100)*1cqw),calc(var(--art-fill,100)*1cqh*var(--art-ratio,1)));height:min(calc(var(--art-fill,100)*1cqh),calc(var(--art-fill,100)*1cqw/var(--art-ratio,1)));overflow:hidden}
.art-fit>.art-fit-box>img{position:absolute;max-width:none!important;max-height:none!important;object-fit:fill!important;margin:0!important;padding:0!important;filter:none!important;transform:none!important;animation:none!important}
.art-fit>img{width:100%;height:100%;object-fit:contain}
.idol>.art-fit,.partner>.art-fit{display:block;width:100%;height:100%}
.idol .art-fit-box,.partner .art-fit-box{top:auto;bottom:0;transform:translateX(-50%)}
.wardrobe-preview>.art-fit{width:100%;height:100%}.outfit-tabs .art-fit{display:block;width:100%;height:6cqh}

.rail{width:13cqw;min-width:13cqw}
.square,.rail,.bottom-nav button,.floating-invite,.close{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.art-fit>.art-fit-box{display:block}
.floating-invite>.ui-icon{display:block;position:relative;top:auto;left:auto;bottom:auto}
.idol{left:13%;width:66%}
.stream-brand{font-size:2.7cqw}.stream-brand b{font-size:2.7cqw}.stream-brand small{font-size:2cqw}.live-viewers{font-size:2.4cqw}.live-tag{font-size:2.1cqw}
.room-prop .art-fit>.art-fit-box{top:auto;bottom:0;transform:translateX(-50%)}
.premium>.ui-icon{position:relative;left:auto;top:auto}
.strings-mini{background-image:url('assets/final/fretboard.png')}
.location-screen>header{top:13%}
/* Minimum readable sizes at the 256px game width of a 320x568 viewport. */
.skill-panel .skill-title{font-size:max(11px,3.1cqw);line-height:1.1;color:#fff;background:linear-gradient(90deg,#965795,#ad6499);padding:2px 3px}
.skill-panel .skill-bonus{font-size:max(9px,2.9cqw)!important;color:#694c73!important}
.skill-level{font-size:max(9px,2.6cqw);color:#74557e}
.skill-panel .skill-info .buy{font-size:max(9px,2.8cqw)}
.skill-panel .skill-info .buy:disabled{color:#775e80}
.skill-panel .buy small{font-size:max(9px,2.3cqw);color:#74557e}
.skill-panel .modes button{font-size:max(10px,3cqw)}
.outfit-tabs span{font-size:max(8px,2.3cqw);line-height:1.15;min-height:2.3em;display:flex;align-items:center;justify-content:center;white-space:normal;overflow-wrap:normal;color:#714a7b}
.outfit-reference{font-size:max(9px,2.5cqw)}
.outfit-purchase button{font-size:max(10px,3.7cqw)}
.skill-panel .skill-row{padding-top:max(11px,1.2cqh)}
.panel-head small{font-size:max(9px,2.5cqw)}
/* Keep LIVE messages below the character's feet and between utility controls. */
.stream-chat{left:23%;width:54%;bottom:8.8%;height:9.5%}
.stream-chat p>span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
