body.phaser-overlay-manager-open { overflow: hidden !important; }
#phaserOverlayManagerRoot, #phaserOverlayManagerRoot * { box-sizing: border-box; }
.phaser-overlay-manager-root {
    position: fixed; inset: 0; z-index: 20000; display: none;
    background: rgba(17,17,17,.64); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    font-family: "Oxanium-SemiBold", Arial, sans-serif;
}
.phaser-overlay-manager-root.is-open { display: block; }
.phaser-overlay-stage { position: absolute; inset: 0; overflow: hidden; }
.phaser-overlay-window { position: absolute; inset: clamp(8px,2vw,18px); display: none; overflow: hidden;
    border-radius: 26px; background: #f3f4f6; border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 28px 90px rgba(0,0,0,.38); }
.phaser-overlay-window.is-active { display: block; }
.phaser-overlay-frame { width:100%; height:100%; border:0; display:block; background:#f3f4f6; }
.phaser-overlay-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:#4b4b4b; font-size:13px; font-weight:800; background:#f3f4f6; z-index:1; pointer-events:none; }
.phaser-overlay-window.is-loaded .phaser-overlay-loading { display:none; }
.phaser-overlay-close-active { position:absolute; top:max(14px,env(safe-area-inset-top,0px)); left:max(14px,env(safe-area-inset-left,0px));
    z-index:5; width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.28);
    background:rgba(17,17,17,.76); color:#fff; font:inherit; font-size:21px; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.phaser-overlay-organizer-toggle { position:absolute; left:50%; bottom:max(16px,env(safe-area-inset-bottom,0px)); transform:translateX(-50%);
    z-index:8; min-width:68px; height:46px; padding:0 17px; border-radius:999px; border:1px solid rgba(255,255,255,.28);
    background:rgba(17,17,17,.82); color:#fff; font:inherit; font-size:14px; font-weight:900; cursor:pointer;
    display:none; align-items:center; justify-content:center; gap:8px; box-shadow:0 14px 34px rgba(0,0,0,.28); }
.phaser-overlay-manager-root.is-open .phaser-overlay-organizer-toggle { display:inline-flex; }
.phaser-overlay-organizer { position:absolute; inset:0; z-index:7; display:none; padding:76px 22px 92px;
    background:rgba(17,17,17,.88); overflow:auto; }
.phaser-overlay-manager-root.is-organizer .phaser-overlay-organizer { display:block; }
.phaser-overlay-manager-root.is-organizer .phaser-overlay-stage { pointer-events:none; opacity:0; }
.phaser-overlay-organizer-head { max-width:1280px; margin:0 auto 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; color:#fff; }
.phaser-overlay-organizer-title { font-size:22px; font-weight:900; }
.phaser-overlay-close-all { min-height:40px; padding:0 15px; border-radius:999px; border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.1); color:#fff; font:inherit; font-size:12px; font-weight:900; cursor:pointer; }
.phaser-overlay-grid { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; }
.phaser-overlay-card { position:relative; min-height:210px; border-radius:22px; overflow:hidden; cursor:pointer;
    border:1px solid rgba(255,255,255,.18); background:#f3f4f6; box-shadow:0 18px 45px rgba(0,0,0,.28); }
.phaser-overlay-card.is-current { outline:3px solid rgba(215,25,32,.92); outline-offset:2px; }
.phaser-overlay-card-preview { position:absolute; inset:0; background:linear-gradient(145deg,#fff,#e9ebee); display:flex; align-items:center; justify-content:center; padding:22px; }
.phaser-overlay-card-icon { font-size:46px; opacity:.18; }
.phaser-overlay-card-bar { position:absolute; left:0; right:0; bottom:0; min-height:64px; padding:12px 52px 12px 14px;
    background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.58)); color:#fff; }
.phaser-overlay-card-title { font-size:13px; font-weight:900; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.phaser-overlay-card-meta { margin-top:4px; font-size:10px; opacity:.76; text-transform:uppercase; }
.phaser-overlay-card-close { position:absolute; top:12px; right:12px; z-index:3; width:36px; height:36px; border-radius:999px;
    border:1px solid rgba(255,255,255,.3); background:rgba(17,17,17,.78); color:#fff; font:inherit; font-size:17px; cursor:pointer; }
.phaser-overlay-empty { color:rgba(255,255,255,.7); text-align:center; padding:50px 20px; }
@media(max-width:640px){
 .phaser-overlay-window{inset:0;border-radius:0;border:0}.phaser-overlay-close-active{top:max(10px,env(safe-area-inset-top,0px));left:max(10px,env(safe-area-inset-left,0px));width:42px;height:42px}
 .phaser-overlay-organizer{padding:68px 12px 84px}.phaser-overlay-grid{grid-template-columns:1fr 1fr;gap:12px}.phaser-overlay-card{min-height:170px}.phaser-overlay-organizer-title{font-size:18px}
}


/* =================================
   SAFE HOME — single global control
================================= */
.phaser-safe-home {
    position: fixed;
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 2147483646;
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.30);
    background: rgba(17,17,17,.86);
    color: #fff;
    box-shadow: 0 14px 34px rgba(0,0,0,.30);
    font: 900 12px/1 "Oxanium-SemiBold", Arial, sans-serif;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* When the Android-style window viewer is present, Safe Home sits directly
   beside it instead of overlapping it. */
.phaser-safe-home.has-manager-tabs {
    transform: translateX(52px);
}

.phaser-safe-home.is-visible { display: inline-flex; }
.phaser-safe-home-icon { font-size: 20px; line-height: 1; }
.phaser-safe-home-label { display: none; }
.phaser-safe-home:hover { background: #111; }
.phaser-safe-home:active {
    transform: translateX(-50%) scale(.96);
}
.phaser-safe-home.has-manager-tabs:active {
    transform: translateX(52px) scale(.96);
}

@media(max-width:640px){
    .phaser-safe-home {
        bottom: max(16px, env(safe-area-inset-bottom, 0px));
        width: 46px;
        min-width: 46px;
        height: 46px;
    }
}
