@font-face{font-family:Nest;src:url('fredoka-medium.ttf') format('truetype');font-weight:400 500;font-display:swap}
@font-face{font-family:Nest;src:url('fredoka-semibold.ttf') format('truetype');font-weight:600 900;font-display:swap}
:root{--ink:#25213c;--cream:#fff8e9;--line:#e9c6a1;--teal:#189d96;--gold:#ffd454;--coral:#ff7768}
body{background:#ead5b8;color:var(--ink);font-family:Nest,ui-rounded,'Trebuchet MS',sans-serif;font-weight:500}
.app{max-width:620px;background-color:#fff6e6;background-image:radial-gradient(ellipse at 15% 10%,#fffdf3 0,transparent 55%),url('paper-grain.svg');padding:14px 14px 110px}
header{flex-wrap:nowrap;gap:8px;border-bottom:1px solid #e6c39a;padding-bottom:10px;margin-bottom:14px}header>div:first-child{min-width:0}header small{font-size:10px;letter-spacing:1.2px;color:#9c785b}h1{font-size:29px;color:var(--ink);text-shadow:none;white-space:nowrap;margin:2px 0}h1 span{color:#e8ad32}h2{color:var(--ink);font-weight:600;font-size:24px;letter-spacing:-.4px}p{color:#897058}
.coins{background:linear-gradient(#fffcef,#fff0cb);border:1.5px solid #e4be87;border-radius:22px;padding:8px 11px;box-shadow:inset 0 2px #fff,0 2px #d5af7b;color:var(--ink);font-size:17px}
.chip{background:linear-gradient(#fffcf3,#faead4);border:1.5px solid var(--line);border-radius:20px;color:var(--ink);box-shadow:inset 0 2px #fff,0 2px #dfc3a0;font-weight:500}.chip.active{background:linear-gradient(#37b8aa,#159f99);border-color:#178b83;color:white;box-shadow:inset 0 2px #9de0d1,0 3px #14776e;text-shadow:0 1px #137f77}
nav,.earning-screen nav{width:min(100%,620px);background:#fff6e8f5;border-top:1.5px solid #e3bf97;gap:9px;padding:9px 11px max(12px,env(safe-area-inset-bottom));backdrop-filter:blur(8px)}nav button,.earning-screen nav button{border-radius:20px;min-height:60px;padding:7px 3px;color:white;border:2px solid #128d85;background:linear-gradient(#40c5b6,#15a297);box-shadow:inset 0 3px #b0e7d3,0 4px #14776e;font-size:23px;text-shadow:0 1px #14776e}nav button[data-view=math]{background:linear-gradient(#ffe777,#ffcd42);border-color:#efa91f;box-shadow:inset 0 3px #fff6b4,0 4px #d9a12b;color:#573718;text-shadow:none}nav button[data-view=shop]{background:linear-gradient(#ff9b83,#ff6e65);border-color:#e85c50;box-shadow:inset 0 3px #ffd1b6,0 4px #cb5148}nav button.active{outline:2px solid #8d633f;outline-offset:3px;filter:saturate(1.08)}nav span{font-size:15px;font-weight:600;margin-top:3px}.earning-screen nav span{margin-top:3px}.primary,.product button{background:linear-gradient(#ffe778,#ffd14a);color:#503718;border:1.5px solid #efa821;box-shadow:inset 0 3px #fff6b7,0 3px #d5a135;border-radius:17px;font-weight:600}.secondary{background:linear-gradient(#41bfaf,#179d96);border-color:#188b82;color:white;box-shadow:inset 0 2px #a1e3ce,0 3px #14776e}
.room{background-image:url('room-v10.webp');border:2px solid #be986e;box-shadow:0 3px #c9a67e,0 8px 20px #8d5a2020}.room-label{display:none}.room-screen #main>.row{flex-direction:column;gap:7px;align-items:center}.room-screen #main>.row h2{font-size:23px;line-height:1.1}.room-screen #look{min-width:148px;padding:7px 14px;font-size:14px}.room-screen #main{gap:8px}.room-screen #room{border-radius:22px}.room-screen .hint{background:#fff8e8;border:1px solid #ead1ac;border-radius:16px;color:#72573f;padding:6px 9px;font-size:12px;line-height:1.2}.room-screen .app{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.card{background:linear-gradient(135deg,#fffdf3,#fff3de);border:1.5px solid #e9c9a6;border-radius:24px;box-shadow:inset 0 2px white,0 3px #e4c6a0}.earning-screen .puzzle{box-shadow:inset 0 2px white,0 3px #e4c6a0;padding:12px}.earning-screen #main>h2{font-size:20px;text-align:center}.earning-screen .settings{gap:7px}.earning-screen .settings .chip{font-size:clamp(12px,3.4vw,15px);padding:8px 3px}.earning-screen .puzzle>.row{justify-content:center;color:#7b5b38;font-size:14px}.earning-screen .puzzle>.row>b{display:none}.earning-screen .puzzle>.row>span:before{content:'🪙 ';}.earning-screen .equation{font-weight:600;color:var(--ink);font-size:clamp(34px,7dvh,52px);margin:9px 0;letter-spacing:1px}.earning-screen .answer{border:2px solid #e3b477;background:#fff6df;border-radius:17px;color:var(--ink);width:min(210px,75%);font-size:30px;padding:6px;box-shadow:inset 0 2px #fff}.earning-screen .feedback{color:#876849;font-size:15px;min-height:30px;margin-top:6px}.earning-screen .feedback.success-text{color:#287c39}.earning-screen .keypad{max-width:420px;gap:8px;margin:8px auto 10px}.earning-screen .keypad button{background:linear-gradient(#fffaf0,#fce7cf);border:1.5px solid #e7c3a0;border-radius:17px;box-shadow:inset 0 2px white,0 3px #cfa885;color:var(--ink);font-size:27px;font-weight:600}.earning-screen .keypad button[data-key='⌫']{background:linear-gradient(#ff9a81,#ff7769);border-color:#df6354;color:white;box-shadow:inset 0 2px #ffd0b9,0 3px #bd584d}.earning-screen .keypad button[data-key='✓']{background:linear-gradient(#80d977,#39af55);border-color:#3a9945;box-shadow:inset 0 2px #bceca0,0 3px #31823b;color:white;font-size:34px}.earning-screen #hint{font-size:14px;padding:6px 16px}.earning-screen .answer.wrong{border-color:#d4544c;background:#fff0ee;color:#a33832;box-shadow:0 0 0 2px #e37c7030}.earning-screen .feedback.wrong-feedback{color:#a33832}
#main>h2{text-align:center}#main>p{text-align:center;font-size:14px;margin:7px 0 12px}.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.product{background:linear-gradient(135deg,#fffdf3,#fff1dc);border:1.5px solid #e5c09a;border-radius:22px;box-shadow:inset 0 2px white,0 3px #e5c9a6;padding:10px}.product .icon{padding:5px 0}.product .item-art{width:clamp(95px,30vw,160px);height:clamp(95px,30vw,160px)}.product h3{color:var(--ink);font-size:17px;font-weight:500;margin:6px 0}.product small{color:#967451;font-size:11px;display:block;line-height:1.3}.product button{margin-top:9px;font-size:16px;padding:10px 4px}.product button:disabled{background:#f0e4d3;border-color:#d8c3a9;box-shadow:inset 0 2px #fff8,0 2px #dac6aa;color:#8d7d66}body:not(.earning-screen):not(.room-screen) .settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:10px 0 16px}body:not(.earning-screen):not(.room-screen) .settings .chip{padding:8px 3px;font-size:14px}
.preview-dialog{background:#fff7e7 url('paper-grain.svg');border:2px solid #cda578;color:var(--ink);padding:19px;border-radius:25px;box-shadow:0 20px 70px #5d381550}.preview-dialog::backdrop{background:#44302088}.close-preview{background:linear-gradient(#ffb29a,#ff7768);color:white;border:1px solid #da6553;box-shadow:0 2px #c35347}.preview-dialog .room{border-radius:20px}.preview-note{color:#866448}#toast{background:#72533d;color:#fff9e9;border:1px solid #caa06f;box-shadow:0 4px 15px #56301830}
button:focus-visible{outline:3px solid #1b817e;outline-offset:3px}button:active:not(:disabled){transform:translateY(2px) scale(.98)}
@media(max-height:650px){.room-screen #main>.row{flex-direction:row;justify-content:space-between}.room-screen #main>.row h2{font-size:19px}.room-screen #look{min-width:0;padding:6px 10px}.earning-screen .equation{font-size:34px;margin:5px 0}.earning-screen .answer{padding:4px;font-size:25px}.earning-screen .feedback{min-height:28px;margin-top:3px}.earning-screen .puzzle{padding:8px}.earning-screen .keypad{gap:6px;margin:5px auto 8px}.earning-screen .settings .chip{padding:6px 3px}.earning-screen .keypad button{font-size:23px}.earning-screen #main{gap:6px}}
@media(max-width:360px){h1{font-size:24px}.coins{font-size:15px;padding:7px 8px}header{gap:6px}header small{font-size:8px}nav span{font-size:13px}.room-screen #main>.row h2{font-size:20px}.earning-screen #main>h2{font-size:18px}}
@media(orientation:landscape) and (max-height:500px){.room-screen #main>.row{flex-direction:row}.room-screen #main>.row h2{font-size:17px}.room-screen #look{padding:4px 10px;min-width:0}.room-screen .app,.earning-screen .app{padding-bottom:calc(79px + env(safe-area-inset-bottom))}nav button,.earning-screen nav button{min-height:44px;padding:3px;font-size:18px}nav span{font-size:12px}.earning-screen .equation{margin:4px 0}.earning-screen .answer{font-size:24px;padding:3px}.earning-screen .feedback{font-size:12px;min-height:25px}.earning-screen .keypad{margin:3px 0;gap:6px}.earning-screen .puzzle{padding:7px}.earning-screen #hint{padding:4px 12px;font-size:12px}header{padding-bottom:5px}}
.nav-icon{display:block;width:27px;height:27px;margin:auto;filter:drop-shadow(0 2px 1px #693b2525)}@media(orientation:landscape) and (max-height:500px){.nav-icon{width:22px;height:22px}}
.game-menu{position:relative;flex-shrink:0;order:4}.game-menu summary{list-style:none;display:grid;place-items:center;width:32px;height:34px;cursor:pointer;color:#806445;background:linear-gradient(#fff9ed,#f6e8d0);border:1px solid #dec49e;border-radius:11px;box-shadow:inset 0 2px white,0 2px #d6b389}.game-menu summary::-webkit-details-marker{display:none}.game-menu summary svg{width:21px;height:21px}.game-menu summary:focus-visible{outline:3px solid #1b817e;outline-offset:3px}.game-menu[open] summary{background:#f2ddbd}.menu-dropdown{position:absolute;right:0;top:43px;z-index:50;min-width:165px;padding:7px;background:#fff7e7;border:1.5px solid #cda578;border-radius:15px;box-shadow:0 8px 22px #5d381530}.menu-dropdown button{width:100%;text-align:left;padding:12px 14px;border-radius:10px;background:#fff0e8;color:#a3463a;font-size:16px}header{gap:6px}.coins{order:2}@media(max-width:420px){h1,.earning-screen header h1,.room-screen h1{font-size:23px}header small,.earning-screen header small{font-size:8px;letter-spacing:.6px}.coins,.earning-screen header .coins,.room-screen .coins{font-size:15px;padding:7px 8px}.game-menu summary{width:29px;height:32px}}@media(orientation:landscape) and (max-height:500px){h1,.earning-screen header h1,.room-screen h1{font-size:20px}}
/* V14: option D, a compact, quiet bottom tab strip. */
nav,.earning-screen nav{height:calc(68px + env(safe-area-inset-bottom));padding:5px 10px calc(5px + env(safe-area-inset-bottom));gap:5px;background:#fff8eaf8;border-top:1px solid #e6c69f;border-radius:19px 19px 0 0;box-shadow:0 -3px 12px #6d451413;align-items:stretch}
nav button,nav button[data-view=math],nav button[data-view=shop],.earning-screen nav button{position:relative;min-height:0;min-width:44px;padding:5px 3px 9px;background:transparent;border:0;border-radius:15px;box-shadow:none;color:#63472f;text-shadow:none;font-size:20px;filter:none;outline:none}
nav button.active,nav button[data-view=math].active,nav button[data-view=shop].active{background:#e5f3e9;color:#078f85;border:0;outline:none;box-shadow:none;filter:none}
nav button.active:after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:32px;height:3px;border-radius:3px;background:#11988b}
nav button:active:not(:disabled){transform:translateY(1px);box-shadow:none;background:#f3e8d6}
nav button:focus-visible{outline:3px solid #1b817e;outline-offset:-3px}
nav span,.earning-screen nav span{font-size:14px;font-weight:500;margin-top:2px;line-height:1.15}
.nav-icon{width:25px;height:25px;filter:drop-shadow(0 1px 1px #6b432520)}
nav button[data-view=shop] .nav-icon{color:#f16c6a}nav button[data-view=shop].active .nav-icon{color:#078f85}
.app{padding-bottom:calc(84px + env(safe-area-inset-bottom))}.room-screen .app,.earning-screen .app{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
@media(orientation:landscape) and (max-height:500px){nav,.earning-screen nav{height:calc(52px + env(safe-area-inset-bottom));padding-top:3px;padding-bottom:calc(3px + env(safe-area-inset-bottom))}nav button,.earning-screen nav button{min-height:0;padding:2px 3px 6px}.nav-icon{width:21px;height:21px}nav span,.earning-screen nav span{font-size:12px;margin-top:1px}.room-screen .app,.earning-screen .app{padding-bottom:calc(59px + env(safe-area-inset-bottom))}}
/* V15: option A, raised buttons within a floating cream dock. */
nav,.earning-screen nav{bottom:calc(10px + env(safe-area-inset-bottom));width:min(calc(100% - 24px),596px);height:76px;padding:8px;gap:8px;border:1.5px solid #e2bb90;border-radius:25px;background:#fff7e8;box-shadow:inset 0 2px white,0 5px 16px #69432630;overflow:visible}
nav button,.earning-screen nav button{padding:5px 3px 7px;border:1.5px solid #128d85;border-radius:19px;background:linear-gradient(#40c5b6,#15a297);box-shadow:inset 0 2px #b0e7d3,0 3px #14776e;color:white;text-shadow:0 1px #14776e}
nav button[data-view=math]{background:linear-gradient(#ffe777,#ffcd42);border-color:#efa91f;box-shadow:inset 0 2px #fff6b4,0 3px #d9a12b;color:#573718;text-shadow:none}
nav button[data-view=shop]{background:linear-gradient(#ff9b83,#ff6e65);border-color:#e85c50;box-shadow:inset 0 2px #ffd1b6,0 3px #cb5148;color:white;text-shadow:0 1px #b95549}
nav button.active,nav button[data-view=math].active,nav button[data-view=shop].active{outline:2px solid #806141;outline-offset:2px;filter:saturate(1.1)}
nav button[data-view=home].active{background:linear-gradient(#40c5b6,#15a297);border:1.5px solid #128d85;box-shadow:inset 0 2px #b0e7d3,0 3px #14776e;color:white}
nav button[data-view=math].active{background:linear-gradient(#ffe777,#ffcd42);border:1.5px solid #efa91f;box-shadow:inset 0 2px #fff6b4,0 3px #d9a12b;color:#573718}
nav button[data-view=shop].active{background:linear-gradient(#ff9b83,#ff6e65);border:1.5px solid #e85c50;box-shadow:inset 0 2px #ffd1b6,0 3px #cb5148;color:white}
nav button.active:after{display:none}nav button[data-view=shop] .nav-icon,nav button[data-view=shop].active .nav-icon{color:white}nav button:active:not(:disabled){transform:translateY(2px) scale(.98)}nav span,.earning-screen nav span{font-weight:600;font-size:14px;margin-top:3px}.app{padding-bottom:calc(105px + env(safe-area-inset-bottom))}.room-screen .app,.earning-screen .app{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
@media(orientation:landscape) and (max-height:500px){nav,.earning-screen nav{height:57px;bottom:calc(5px + env(safe-area-inset-bottom));padding:5px 8px}nav button,.earning-screen nav button{padding:2px 3px 4px;border-radius:14px}nav span,.earning-screen nav span{font-size:12px;margin-top:1px}.room-screen .app,.earning-screen .app{padding-bottom:calc(70px + env(safe-area-inset-bottom))}}
/* V16: option A, minimal math header and compact difficulty switcher. */
h1 .brand-title{color:var(--ink)}.earn-title{display:none}
.earning-screen header{padding-bottom:8px;margin-bottom:10px;border-bottom:0;align-items:center}
.earning-screen header small,.earning-screen .brand-title,.earning-screen #main>h2{display:none}
.earning-screen .earn-title{display:inline;color:var(--ink);font-size:22px;font-weight:600}
.earning-screen header h1{margin:0;line-height:1.2}
.earning-screen .settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:2px;margin:0 0 3px;background:#fff0cf;border:1.5px solid #e3bc85;border-radius:18px;box-shadow:inset 0 2px #fffcf1,0 2px #e3c8a0}
.earning-screen .settings .chip{padding:7px 3px;font-size:15px;background:transparent;border:1px solid transparent;border-radius:14px;box-shadow:none}
.earning-screen .settings .chip.active{background:linear-gradient(#36b4a9,#159e96);border-color:#13857d;color:white;box-shadow:inset 0 2px #9de0d1,0 2px #17786e}
.earning-screen .puzzle>.row{justify-content:flex-end;font-size:14px;color:#a36924;font-weight:600}
.earning-screen .puzzle>.row>span:before{content:''}
@media(max-height:650px){.earning-screen header{margin-bottom:7px;padding-bottom:3px}.earning-screen .settings .chip{padding:5px 3px}.earning-screen .earn-title{font-size:20px}}
@media(orientation:landscape) and (max-height:500px){.earning-screen header{margin-bottom:4px;padding-bottom:0}.earning-screen .earn-title{font-size:18px}.earning-screen .settings .chip{padding:4px 3px;font-size:13px}}
/* V17: the same compact header on all three screens. */
header,.room-screen header,.earning-screen header{padding-bottom:8px;margin-bottom:10px;border-bottom:0;align-items:center}
header #screen-title,.room-screen header #screen-title,.earning-screen header #screen-title{font-size:22px;color:var(--ink);font-weight:600;margin:0;line-height:1.2;text-shadow:none}
#main>h2,#main>p,.room-screen #main>.row h2{display:none}
.room-screen #main>.row{flex-direction:row;justify-content:center;margin:0}
body:not(.earning-screen):not(.room-screen) .settings{margin-top:0}
@media(max-height:650px){header,.room-screen header,.earning-screen header{margin-bottom:7px;padding-bottom:3px}header #screen-title,.room-screen header #screen-title,.earning-screen header #screen-title{font-size:20px}}
@media(orientation:landscape) and (max-height:500px){header,.room-screen header,.earning-screen header{margin-bottom:4px;padding-bottom:0}header #screen-title,.room-screen header #screen-title,.earning-screen header #screen-title{font-size:18px}}
/* V17: the utility menu sits after the three footer destinations. */
nav .game-menu{order:4;align-self:stretch;display:flex;align-items:center;flex-shrink:0}
nav .game-menu summary{height:100%;width:40px;min-height:44px;border-radius:16px;border:1px solid #ddc19e;background:linear-gradient(#fffaf0,#f3e4ce);box-shadow:inset 0 2px white,0 2px #d1b694;color:#806445}
nav .game-menu summary svg{width:20px;height:20px}
nav .menu-dropdown{top:auto;bottom:calc(100% + 12px);right:0}
@media(max-width:360px){nav,.earning-screen nav{gap:6px;padding:7px}nav span,.earning-screen nav span{font-size:12px}nav .game-menu summary{width:34px}}
@media(orientation:landscape) and (max-height:500px){nav .game-menu summary{min-height:0;width:35px;border-radius:12px}}
nav .menu-dropdown button{display:block;flex:none;width:100%;min-height:44px;padding:12px 14px;border:0;border-radius:10px;background:#fff0e8;box-shadow:none;color:#a3463a;text-shadow:none;font-size:16px;text-align:left}
/* V18: difficulty is a quiet selection control, not a primary action. */
.earning-screen .settings{background:#f6eedf;border:1px solid #e4d7c3;box-shadow:none;border-radius:15px;padding:3px}
.earning-screen .settings .chip{background:transparent;border:1px solid transparent;box-shadow:none;border-radius:11px;color:#806f5b;text-shadow:none;font-weight:500}
.earning-screen .settings .chip.active{background:#dfeae2;border:1px solid #c7d8ce;color:#315f56;box-shadow:none;text-shadow:none;font-weight:600}
.earning-screen .settings .chip:active:not(:disabled){transform:none;background:#e7ece2}
/* V19: avatar control floats over the scene; the room gets the freed height. */
.room-screen #room #look{position:absolute;top:12px;right:12px;z-index:8;min-width:0;min-height:40px;padding:8px 12px;font-size:13px;background:#fff7e9ed;border:1px solid #d2b68f;box-shadow:inset 0 1px white,0 2px 6px #67432725;backdrop-filter:blur(4px);border-radius:16px;color:#70523b}
@media(orientation:landscape) and (max-height:500px){.room-screen #room #look{top:8px;right:8px;min-height:34px;padding:6px 10px;font-size:12px}}
/* V20: shop filters share the math selector's quiet treatment. */
body:not(.earning-screen):not(.room-screen) .settings{gap:4px;padding:3px;background:#f6eedf;border:1px solid #e4d7c3;border-radius:15px;box-shadow:none}
body:not(.earning-screen):not(.room-screen) .settings .chip{background:transparent;border:1px solid transparent;box-shadow:none;border-radius:11px;color:#806f5b;text-shadow:none;font-weight:500}
body:not(.earning-screen):not(.room-screen) .settings .chip.active{background:#dfeae2;border:1px solid #c7d8ce;color:#315f56;box-shadow:none;text-shadow:none;font-weight:600}
body:not(.earning-screen):not(.room-screen) .settings .chip:active:not(:disabled){transform:none;background:#e7ece2}
@media(max-width:360px){.room-screen header #screen-title{font-size:20px}}
/* V21: six characters and a shop-style chooser over the room. */
.character-art{background-image:url('avatars-v21.webp');background-size:300% 200%;background-position:calc(var(--col)*100%/2) calc(var(--row)*100%)}
.avatar-dialog{width:min(94vw,480px);max-height:88dvh;padding:17px;border:2px solid #cda578;border-radius:25px;background:#fff7e7 url('paper-grain.svg');color:var(--ink);box-shadow:0 20px 70px #5d381550;overflow:auto;overscroll-behavior:contain}
.avatar-dialog::backdrop{background:#44302088;backdrop-filter:blur(4px)}.avatar-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:13px}.avatar-dialog-header h2{font-size:22px;margin:0;line-height:1.15}.avatar-dialog-header p{font-size:13px;margin:6px 0 0}.close-avatar{flex-shrink:0;width:35px;height:35px;border:1px solid #dfb386;border-radius:50%;background:#fff0dc;color:#805f45;font-size:25px}.avatar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.avatar-card{position:relative;display:flex;flex-direction:column;align-items:center;padding:10px 7px 8px;background:linear-gradient(135deg,#fffdf3,#fff1dc);border:2px solid #e5c09a;border-radius:20px;box-shadow:inset 0 2px white,0 3px #e5c9a6;color:var(--ink);min-height:218px}.avatar-card.selected{border-color:#259e8e;background:#eaf4e8;box-shadow:inset 0 2px white,0 3px #87baa0}.avatar-thumbnail{position:relative;display:block;width:96px;height:165px}.avatar-name{font-size:17px;font-weight:600}.avatar-detail{font-size:11px;color:#8b7058;margin-top:3px}.avatar-selected{position:absolute;top:7px;right:7px;background:#d5e9d8;color:#28664e;border-radius:10px;padding:3px 6px;font-size:10px}.avatar-selected[hidden]{display:none}.avatar-picker-hint{text-align:center;margin:16px 0 0;font-size:13px}@media(min-width:600px){.avatar-dialog{width:570px}.avatar-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-height:650px){.avatar-thumbnail{height:135px;width:79px}.avatar-card{min-height:188px}}

/* V22: equal visible character height from each sprite’s opaque bounds. */






.room-screen .avatar{height:clamp(202.5px,40.5dvh,322.5px);width:clamp(118.5px,23.55dvh,187.5px);top:65%}
.room-screen .avatar .wear-hat,.room-screen .avatar .wear-hat .item-art{width:68.8%;height:auto;aspect-ratio:1}.room-screen .avatar .wear-shirt,.room-screen .avatar .wear-shirt .item-art{width:58.4%;height:auto;aspect-ratio:1}.room-screen .avatar .wear-accessory,.room-screen .avatar .wear-accessory .item-art{width:57.6%;height:auto;aspect-ratio:1}
.room-screen .avatar .wearable .item-art{width:100%;height:100%;aspect-ratio:auto}
@media(orientation:landscape) and (max-height:500px){.room-screen .avatar{height:150px;width:87px;top:60%}}

/* V23: isolated character images cannot display neighboring sprites. */
.character-art{width:100%;height:100%;object-fit:contain;background:none;pointer-events:none}

/* V25: individually isolated illustrated room decorations. */
.item-art.extra-art{background:none;object-fit:contain;pointer-events:none}