dialog.item-use-dialog{width:min(420px,calc(100vw - 32px));box-sizing:border-box;max-height:calc(100dvh - 28px);overflow:auto;padding:22px;background:#f5f3df;color:#263c3c;border:4px solid #426f66;border-radius:12px;box-shadow:0 0 0 3px #d0dfb4,0 18px 70px #0008;font:15px/1.5 EmeraldPixel,monospace}dialog.item-use-dialog::backdrop{background:#031820aa}.item-use-dialog h2{text-align:center;font-size:21px;margin:0 0 14px}.item-use-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px;border-radius:7px;background:linear-gradient(#d4eac7,#e9efcd)}.item-use-stage canvas{width:112px;height:112px;image-rendering:pixelated}.item-use-stage>img{position:absolute;top:16px;right:32px;width:32px;height:32px;image-rendering:pixelated}.item-use-health{height:7px;width:180px;overflow:hidden;background:#718879;border:2px solid #f7ffef;border-radius:8px}.item-use-health-fill{height:100%;background:#37af68;transform-origin:left;transition:transform .85s linear}.item-use-stage>span{font:13px monospace}.item-use-message{padding:12px 0}.item-use-message p{margin:5px 0}.item-use-stats{padding:10px 16px}.item-use-stats h3{font-size:16px;margin:4px 0 12px}.item-use-stats>div{display:flex;justify-content:space-between;gap:20px;padding:3px 0}.item-use-dialog>button{display:block;margin:8px 0 0;width:100%;padding:11px;border:2px solid #355f55;border-radius:6px;background:#285a4a;color:#fff;font:inherit;cursor:pointer}.item-use-dialog[data-play=true][data-effect=level] canvas{animation:item-level-glow .9s ease-out}.item-use-dialog[data-play=true][data-effect=heal] canvas{animation:item-heal .9s ease-out}@keyframes item-level-glow{50%{filter:drop-shadow(0 0 12px #fff8a5);transform:translateY(-5px)}}@keyframes item-heal{50%{filter:drop-shadow(0 0 8px #4ecf74)}}.item-use-dialog[data-reduced=true] *{animation:none!important;transition:none!important}@media(max-height:500px){dialog.item-use-dialog{padding:12px;width:min(570px,calc(100vw - 28px));display:grid;grid-template-columns:150px 1fr;gap:8px 16px}.item-use-dialog h2,.item-use-dialog>button{grid-column:1/-1}.item-use-dialog h2{font-size:17px;margin:0}.item-use-stage canvas{width:70px;height:70px}.item-use-health{width:120px}.item-use-stage>img{right:5px;top:5px;width:24px;height:24px}.item-use-stats,.item-use-message{padding:2px}.item-use-stats>div{padding:0}.item-use-dialog [hidden]{display:none!important}}
/* Compact composition for the installed app. Original sprite and health
   animation data are reused; desktop keeps its existing presentation. */
html[data-native-client=true] body dialog.native-item-dialog{--app-window-height:auto;--app-window-width:min(460px,calc(var(--app-viewport-width,100vw) - 32px));font:15px/1.4 system-ui!important;}
html[data-native-client=true] body dialog.native-item-dialog .native-item-content{min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px;display:grid;gap:14px;}
html[data-native-client=true] body dialog.native-item-dialog .native-item-content [hidden]{display:none!important;}
html[data-native-client=true] body dialog.native-item-dialog .item-use-stage{padding:12px;background:radial-gradient(circle at 50% 30%,#fffdf7,#ece7d8)!important;border:1px solid #d0cbbd;border-radius:14px;gap:6px;}
html[data-native-client=true] body dialog.native-item-dialog .item-use-stage>strong{color:#283d43!important;font:650 17px/1.4 system-ui!important;text-align:center;}
html[data-native-client=true] body dialog.native-item-dialog .item-use-stage>span{color:#40515a!important;font:14px/1.4 system-ui!important;font-variant-numeric:tabular-nums;}
html[data-native-client=true] body dialog.native-item-dialog .item-use-stage>img{top:12px;right:12px;}
html[data-native-client=true] body dialog.native-item-dialog .item-use-health{--hp-color:#237c5f;height:8px;border:0;width:min(180px,100%);background:#d5d7c9;}
html[data-native-client=true] body dialog.native-item-dialog .item-use-health[data-health=low]{--hp-color:#bc3446;}
html[data-native-client=true] body dialog.native-item-dialog .item-use-health[data-health=medium]{--hp-color:#ac741d;}
html[data-native-client=true] body dialog.native-item-dialog .item-use-health-fill{background:var(--hp-color);}
html[data-native-client=true] body dialog.native-item-dialog .item-use-message{padding:0;color:#283d43!important;}
html[data-native-client=true] body dialog.native-item-dialog .item-use-message p{font:500 16px/1.5 system-ui!important;margin:0;color:#283d43!important;text-align:center;overflow-wrap:anywhere;}
html[data-native-client=true] body dialog.native-item-dialog .item-use-stats{padding:0;color:#283d43!important;font:15px/1.4 system-ui!important;}
html[data-native-client=true] body dialog.native-item-dialog .item-use-stats h3{color:#283d43!important;font:700 17px/1.4 system-ui!important;}
html[data-native-client=true] body dialog.native-item-dialog .item-use-stats>div{padding:7px 0;border-bottom:1px solid #d3d0c1;}
html[data-native-client=true] body dialog.native-item-dialog .item-use-stats :is(span,strong){font:inherit!important;color:#283d43!important;}
html[data-native-client=true] body dialog.native-item-dialog .native-item-actions{padding:12px 16px;border-top:1px solid #d3d0c1;flex:none;}
html[data-native-client=true] body dialog.native-item-dialog .native-item-actions button{display:block;width:100%;min-height:48px;border:1px solid #b73340!important;border-radius:12px!important;background:#c93d46!important;color:white!important;padding:10px!important;font:600 15px/1.3 system-ui!important;}
@media(orientation:landscape) and (max-height:600px){
 html[data-native-client=true] body dialog.native-item-dialog{--app-window-width:min(620px,calc(var(--app-viewport-width,100vw) - 32px));}
 html[data-native-client=true] body dialog.native-item-dialog .native-item-content{grid-template-columns:144px minmax(0,1fr);align-items:center;padding:12px;}
 html[data-native-client=true] body dialog.native-item-dialog .item-use-stage{grid-column:1;grid-row:1/3;}
 html[data-native-client=true] body dialog.native-item-dialog .item-use-stage canvas{width:80px;height:80px;}
 html[data-native-client=true] body dialog.native-item-dialog .item-use-message,html[data-native-client=true] body dialog.native-item-dialog .item-use-stats{grid-column:2;}
}