/* The frame and screen use the same original canvas as the Friends phone. */
#floatingGamePhone {
 position:absolute;
 z-index:50;
 width:min(635px,97%,calc((100dvh - 20px) * .7337));
 aspect-ratio:1127/1536;
 pointer-events:none;
 isolation:isolate;
}
.menu-phone-case {
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 z-index:2;
 pointer-events:none;
 user-select:none;
}
.menu-phone-grip {
 position:absolute;
 left:12%;
 top:10%;
 width:41%;
 height:6.4%;
 z-index:3;
 pointer-events:auto;
}
.menu-phone-grip,.menu-phone-header {
 cursor:grab;
 touch-action:none;
 user-select:none;
}
.menu-phone-grip:active,.menu-phone-header:active {cursor:grabbing}
.menu-phone-screen {
 position:absolute;
 left:10.74%;
 top:15.69%;
 width:43.74%;
 height:70.44%;
 display:flex;
 flex-direction:column;
 overflow:hidden;
 border-radius:15% / 6.8%;
 background:#fff4df;
 color:#421138;
 pointer-events:auto;
 container-type:inline-size;
}
.menu-phone-header {
 flex:none;
 background:#ffd9ed;
 box-shadow:0 1px #e777af;
 z-index:1;
}
.menu-phone-status {
 position:relative;
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:8px 12% 0;
 font-size:8px;
 font-weight:900;
 letter-spacing:.07em;
}
.menu-phone-status i {
 position:absolute;
 left:34%;
 width:32%;
 height:10px;
 border-radius:999px;
 background:#461139;
}
.menu-phone-title {
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:0 7% 0 9%;
}
.menu-phone-title strong,#gameMenu :is(h2,#menuActions button) {
 font-family:Impact,'Avenir Next Condensed','Arial Black',sans-serif;
 font-weight:900;
 text-transform:uppercase;
}
.menu-phone-title strong {
 font-size:clamp(13px,13cqw,32px);
 line-height:1;
 letter-spacing:-.035em;
 transform:skew(-7deg);
 text-shadow:1px 2px #ff79bb;
 white-space:nowrap;
}
#closeMenu {
 width:44px;
 height:44px;
 flex:0 0 44px;
 border-radius:50%;
 padding:0;
 background:radial-gradient(circle,#fff7fc 48%,transparent 50%);
 color:#651042;
 font-size:25px;
 line-height:1;
}
#closeMenu:focus-visible {outline-offset:-3px}
#gameMenu {
 position:relative;
 min-height:0;
 flex:1;
 padding:8px 7% 6px;
 overflow:auto;
 overscroll-behavior:contain;
 touch-action:pan-y;
 scrollbar-width:thin;
 scrollbar-color:#ea5ba5 transparent;
}
.menu-phone-home {
 flex:0 0 11px;
 background:linear-gradient(#721448,#721448) center / 32% 3px no-repeat,#fff4df;
}
#gameMenu #menuActions,#gameMenu #menuRooms {
 gap:5px;
 margin-bottom:8px;
}
#gameMenu #menuActions button {
 background:#ffe2ef;
 border:1px solid #c84c91;
 box-shadow:inset 0 2px #fff9;
 color:#491137;
 border-radius:12px;
 padding:4px;
 height:auto;
 min-height:44px;
 font-size:clamp(9px,6.5cqw,16px);
 line-height:1.1;
 overflow-wrap:anywhere;
 letter-spacing:.02em;
}
#gameMenu #menuActions #back {background:#bdf4d2}
#gameMenu #menuActions #chooseCharacter {background:#e7d3ff}
#gameMenu #menuActions #chooseCharacter img {display:none}
#gameMenu #menuActions [aria-controls=boutiqueStudio] {background:#ffe99e}
#gameMenu #menuActions #decorate {background:#ffb7dc}
#gameMenu #menuActions #decorate[aria-pressed=true] {background:#ad1e67;color:white}
#gameMenu #menuActions [aria-controls=accountStudio] {background:#c1edff}
#gameMenu #menuActions button:active {filter:brightness(.94)}
#gameMenu #menuRooms button,#gameMenu #clearRoomFurniture {font-size:11px;padding:5px}
#gameMenu #furnitureSection {margin-top:8px;border-color:#f4a4d0}
#gameMenu #furnitureSection h2 {margin:7px 0 4px;font-size:20px;line-height:1}
#gameMenu #furnitureSection h2 small {font:11px/1.25 system-ui;text-transform:none}
#gameMenu #furnitureSection p {font-size:11px}
#gameMenu .search-label {margin:6px 0;font-size:11px}
#gameMenu .search-label :is(input,select) {padding:5px;margin-top:3px;border-color:#e5a4c8}
#gameMenu #furnitureGrid {grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:8px}
#gameMenu #furnitureGrid .catalog-item {padding:5px 3px;gap:3px;font:600 10px/1.2 system-ui;overflow-wrap:anywhere}
#gameMenu .catalog-item :is(img,svg) {width:100%;height:54px;object-fit:contain;pointer-events:none}
#gameMenu #selectedFurniture {padding:5px}
#gameMenu #selectedFurniture label {display:block;margin:5px 0;font-size:12px}
#gameMenu #furnitureSize {display:block;width:100%;margin:4px 0}
#gameMenu .character-options {display:flex;flex-wrap:wrap}
@container (max-width:165px) {
 #gameMenu #furnitureSection p {display:none}
 #gameMenu #selectedFurniture button {font-size:11px;padding:4px}
}
@container (max-width:135px) {
 #gameMenu #menuActions {grid-template-columns:1fr}
}
