:root{
  --roam-top:calc(58px + env(safe-area-inset-top));
  --roam-nav:calc(62px + env(safe-area-inset-bottom));
  --roam-actions:88px;
  --roam-stage-floor:calc(var(--roam-nav) + var(--roam-actions) + 12px);
}

html.roam-free-root,html.roam-free-root body{width:100%;height:100%;overflow:hidden}
body.roam-free{
  position:fixed;inset:0;display:block;padding:0;margin:0;max-width:none;
  background:#071417;color:var(--opal);overscroll-behavior:none;
}
body.roam-free .title,body.roam-free .subtitle,body.roam-free>.cog,
body.roam-free .kbdhint,body.roam-free>.moodline,body.roam-free>.stageline,
body.roam-free>.speech,body.roam-free .ledger-tab{display:none!important}

body.roam-free .egg-wrap{position:fixed;inset:0;width:100%;height:100%;margin:0;transform:none!important}
body.roam-free .device{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
body.roam-free .shell,body.roam-free .hit{display:none!important}
body.roam-free .egg{
  left:0!important;top:0!important;width:100%!important;height:100%!important;border-radius:0;box-shadow:none;
  padding:0;isolation:isolate;
}
body.roam-free #bg{border-radius:0}
body.roam-free #sprite{max-width:92%;max-height:68%;z-index:6}
body.roam-free .foxsprite{left:11%!important}
body.roam-free .heronsprite{right:9%!important}

.roam-topbar{
  position:fixed;z-index:44;left:0;right:0;top:0;min-height:var(--roam-top);
  box-sizing:border-box;padding:calc(8px + env(safe-area-inset-top)) 10px 8px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;
  color:var(--opal);background:linear-gradient(180deg,color-mix(in srgb,var(--lake) 94%,transparent) 0%,color-mix(in srgb,var(--abyss) 76%,transparent) 72%,transparent 100%);
  border-top:3px solid color-mix(in srgb,var(--glow) 72%,transparent);
  pointer-events:none;
}
.roam-identity{min-width:0;padding-left:4px;text-shadow:0 2px 8px rgba(0,0,0,.85)}
.roam-name{font:700 12px/1.2 var(--ink);letter-spacing:.19em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roam-state{margin-top:4px;font:italic calc(13px*var(--txtScale,1))/1.2 var(--font-spoken);color:var(--mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roam-tools{display:flex;gap:6px;pointer-events:auto}
.roam-tools button{
  width:42px;height:42px;border-radius:50%;border:1px solid color-mix(in srgb,var(--glow) 58%,transparent);
  background:linear-gradient(145deg,color-mix(in srgb,var(--shell) 90%,transparent),color-mix(in srgb,var(--lake) 82%,transparent));color:var(--opal);cursor:pointer;
  display:grid;place-items:center;font:700 16px/1 var(--ink);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--opal) 16%,transparent),0 4px 16px color-mix(in srgb,var(--abyss) 52%,transparent);
}
.roam-tools button svg{width:20px;height:20px;display:block}
.roam-tools button:focus-visible,.roam-action:focus-visible{outline:2px solid var(--glow);outline-offset:2px}

body.roam-free .companion-zoom{right:14px;top:calc(var(--roam-top) + 7px);z-index:43}
body.roam-free .speak{
  left:max(16px,6vw);right:max(16px,6vw);bottom:calc(var(--roam-stage-floor) + 32px);z-index:12;
  padding:10px 14px;border:1px solid color-mix(in srgb,var(--glow) 25%,transparent);
  border-radius:18px;font-size:calc(16px*(.5 + var(--txtScale,1)/2));line-height:1.45;
  background:color-mix(in srgb,var(--abyss) 70%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
body.roam-free .moodtag{bottom:calc(var(--roam-stage-floor) + 24px);font-size:calc(11px*var(--txtScale,1))}
body.roam-free .chirp-bub{top:calc(var(--roam-top) + 60px);font-size:calc(13px*var(--txtScale,1));padding:7px 12px}
body.roam-free .evoprompt{top:calc(var(--roam-top) + 54px)}

.roam-actions{
  position:fixed;z-index:43;left:0;right:0;bottom:var(--roam-nav);height:var(--roam-actions);
  box-sizing:border-box;padding:8px 10px 9px;display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain;
  background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--lake) 78%,transparent) 27%,color-mix(in srgb,var(--abyss) 96%,transparent) 100%);
}
.roam-actions::-webkit-scrollbar{display:none}
.roam-action{
  flex:0 0 68px;min-height:62px;scroll-snap-align:center;border:1px solid color-mix(in srgb,var(--glow) 46%,transparent);
  border-radius:16px;background:linear-gradient(155deg,color-mix(in srgb,var(--shell) 92%,transparent),color-mix(in srgb,var(--lake) 82%,transparent));color:color-mix(in srgb,var(--opal) 78%,var(--mist));cursor:pointer;
  padding:7px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  font:700 10px/1.15 var(--ink);letter-spacing:.08em;text-transform:uppercase;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);-webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--opal) 12%,transparent),0 5px 15px color-mix(in srgb,var(--abyss) 42%,transparent);
}
.roam-action .roam-glyph{font:400 18px/1 var(--font-spoken);color:var(--gold)}
.roam-action:active{transform:translateY(1px);color:var(--glow);border-color:var(--glow)}
.roam-actions[hidden]{display:none!important}
.roam-scroll-arrow{display:none}
.roam-mode-controls{
  position:fixed;z-index:47;left:0;right:0;bottom:0;height:var(--roam-nav);box-sizing:border-box;
  padding:7px 10px calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;
  background:color-mix(in srgb,var(--abyss) 94%,transparent);border-top:1px solid color-mix(in srgb,var(--glow) 24%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.roam-mode-controls[hidden]{display:none!important}
.roam-mode-controls button{
  min-height:46px;border:1px solid color-mix(in srgb,var(--glow) 28%,transparent);border-radius:14px;
  background:color-mix(in srgb,var(--lake) 78%,transparent);color:var(--opal);cursor:pointer;
  font:700 11px/1 var(--ink);letter-spacing:.1em;text-transform:uppercase;
}
.roam-mode-controls button:nth-child(2){color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.roam-mode-controls button:focus-visible{outline:2px solid var(--glow);outline-offset:2px}

body.roam-free .appnav{
  display:flex;z-index:46;height:var(--roam-nav);box-sizing:border-box;padding:5px 8px calc(6px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,color-mix(in srgb,var(--lake) 96%,transparent),color-mix(in srgb,var(--abyss) 98%,transparent));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top-color:color-mix(in srgb,var(--glow) 48%,transparent);
}
body.roam-free .appnav button{min-height:46px;font-size:10px;padding:4px 2px}
body.roam-free .appnav button:not(.on){color:color-mix(in srgb,var(--opal) 72%,var(--mist))}
body.roam-free .appnav button svg{width:19px;height:19px}
body.roam-free .settings-menu{position:fixed;z-index:70;top:calc(var(--roam-top) + 4px);right:10px;bottom:auto;max-height:calc(100dvh - var(--roam-top) - var(--roam-nav) - 20px);overflow:auto}
body.roam-free .ledger-drawer{z-index:65;height:100dvh}
body.roam-free #thememodal .theme-upload{display:none!important}

body.roam-free .egg.ring~*,body.roam-free .ring-ui{font-size:inherit}
body.roam-free .ring-ui{bottom:calc(var(--roam-nav) + 14px)}
body.roam-free .status-ui{
  left:50%;right:auto;top:calc(50% - (var(--roam-nav) / 2));bottom:auto;
  width:min(540px,calc(100% - 28px));max-height:calc(100dvh - var(--roam-top) - var(--roam-nav) - 40px);
  box-sizing:border-box;overflow:auto;transform:translate(-50%,-50%);z-index:15;
  padding:clamp(22px,5vw,38px);border-radius:26px;
  background:linear-gradient(155deg,color-mix(in srgb,var(--shell) 94%,transparent),color-mix(in srgb,var(--abyss) 92%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--glow) 46%,transparent),0 22px 65px rgba(0,0,0,.5);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
body.roam-free .status-ui .st-name{font-size:calc(18px*var(--txtScale,1));letter-spacing:.14em}
body.roam-free .status-ui .st-sub{font-size:calc(13px*var(--txtScale,1));margin:7px 0 20px}
body.roam-free .status-ui .st-row{gap:12px;margin:13px 0}
body.roam-free .status-ui .st-row span{width:92px;font-size:calc(11px*var(--txtScale,1));color:color-mix(in srgb,var(--opal) 75%,var(--mist))}
body.roam-free .status-ui .st-track{height:9px}
body.roam-free .status-ui .st-num{width:38px;font-size:calc(12px*var(--txtScale,1))}
body.roam-free .status-ui .st-hint{margin-top:20px;font-size:calc(10px*var(--txtScale,1));line-height:1.5}
body.roam-free .status-ui .lake-body{font-size:calc(16px*var(--txtScale,1));line-height:1.6}
body.roam-free .gamecanvas{border-radius:0}
body.roam-free .game-x{top:calc(10px + env(safe-area-inset-top));right:10px}
body.roam-free.roam-busy .roam-topbar,body.roam-free.roam-busy .roam-actions{display:none}
body.roam-free.roam-busy .appnav{transform:translateY(100%);pointer-events:none}

body.roam-free.lighttheme .roam-topbar{color:#14292a;background:linear-gradient(180deg,color-mix(in srgb,var(--lake) 72%,white),color-mix(in srgb,var(--abyss) 42%,transparent) 75%,transparent)}
body.roam-free.lighttheme .roam-state{color:rgba(20,41,42,.76)}
body.roam-free.lighttheme .roam-tools button,body.roam-free.lighttheme .roam-action{background:linear-gradient(145deg,color-mix(in srgb,var(--shell) 48%,white),color-mix(in srgb,var(--lake) 42%,white));color:#1d3635;border-color:color-mix(in srgb,var(--glow) 46%,#1d3635)}
body.roam-free.lighttheme .roam-actions{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--lake) 55%,white) 30%,color-mix(in srgb,var(--abyss) 68%,white))}

@media (min-width:900px) and (min-height:650px){
  :root{
    --roam-actions:94px;--roam-nav:68px;
    --roam-frame-w:min(560px,calc(100vw - 56px));
    --roam-frame-h:min(920px,calc(100dvh - 40px));
    --roam-frame-gap:calc((100dvh - var(--roam-frame-h))/2);
  }
  body.roam-free{
    background:
      radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--glow) 13%,transparent),transparent 34%),
      linear-gradient(145deg,color-mix(in srgb,var(--lake-deep) 86%,#020708),color-mix(in srgb,var(--abyss) 96%,#020708));
  }
  body.roam-free .egg-wrap{
    inset:auto;left:50%;top:50%;width:var(--roam-frame-w);height:var(--roam-frame-h);
    transform:translate(-50%,-50%)!important;border-radius:32px;overflow:hidden;
    border:1px solid color-mix(in srgb,var(--glow) 35%,transparent);
    box-shadow:0 30px 90px rgba(0,0,0,.58),0 0 0 10px color-mix(in srgb,var(--shell) 28%,transparent);
  }
  body.roam-free .egg,body.roam-free #bg{border-radius:31px}
  .roam-topbar{
    left:50%;right:auto;top:var(--roam-frame-gap);width:var(--roam-frame-w);transform:translateX(-50%);
    border-radius:31px 31px 0 0;padding-inline:20px;
  }
  body.roam-free .appnav{
    left:50%;right:auto;bottom:calc(var(--roam-frame-gap) + 14px);
    width:min(500px,calc(var(--roam-frame-w) - 32px));transform:translateX(-50%);
    border:1px solid color-mix(in srgb,var(--glow) 24%,transparent);border-radius:22px;padding:7px 12px;
  }
  .roam-actions{
    left:50%;right:auto;bottom:calc(var(--roam-frame-gap) + 96px);width:calc(var(--roam-frame-w) - 24px);
    transform:translateX(-50%);border-radius:24px;padding-inline:14px;justify-content:flex-start;
    background:color-mix(in srgb,var(--abyss) 76%,transparent);backdrop-filter:blur(14px);
  }
  .roam-mode-controls{
    left:50%;right:auto;bottom:calc(var(--roam-frame-gap) + 14px);width:min(460px,calc(var(--roam-frame-w) - 32px));
    transform:translateX(-50%);border:1px solid color-mix(in srgb,var(--glow) 24%,transparent);border-radius:20px;
  }
  .roam-action{flex-basis:66px}
  .roam-scroll-arrow{
    position:fixed;z-index:45;bottom:calc(var(--roam-frame-gap) + 123px);width:40px;height:40px;
    display:grid;place-items:center;border-radius:50%;border:1px solid color-mix(in srgb,var(--glow) 48%,transparent);
    background:linear-gradient(145deg,color-mix(in srgb,var(--shell) 94%,transparent),color-mix(in srgb,var(--lake) 88%,transparent));
    color:var(--opal);font:400 30px/1 var(--ink);cursor:pointer;
    box-shadow:inset 0 1px 0 color-mix(in srgb,var(--opal) 14%,transparent),0 8px 24px rgba(0,0,0,.42);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  }
  .roam-scroll-arrow span{display:block;transform:translateY(-1px)}
  .roam-scroll-prev{left:calc(50% - var(--roam-frame-w)/2 - 50px)}
  .roam-scroll-next{right:calc(50% - var(--roam-frame-w)/2 - 50px)}
  .roam-scroll-arrow:disabled{opacity:.24;cursor:default;box-shadow:none}
  .roam-scroll-arrow:not(:disabled):hover{border-color:var(--glow);color:var(--glow)}
  .roam-scroll-arrow:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
  .roam-scroll-arrow[hidden]{display:none!important}
  body.roam-free .speak{left:50%;right:auto;width:calc(100% - 42px);transform:translateX(-50%);box-sizing:border-box}
  body.roam-free .companion-zoom{
    right:calc((100vw - var(--roam-frame-w))/2 + 14px);
    top:calc(var(--roam-frame-gap) + var(--roam-top) + 7px);
  }
  body.roam-free .settings-menu{
    right:calc((100vw - var(--roam-frame-w))/2 + 10px);
    top:calc(var(--roam-frame-gap) + var(--roam-top) + 4px);
    max-height:calc(var(--roam-frame-h) - var(--roam-top) - var(--roam-nav) - 20px);
  }
  body.roam-free .status-ui{max-height:calc(var(--roam-frame-h) - var(--roam-top) - var(--roam-nav) - 40px)}
  body.roam-free .game-x{
    top:calc(var(--roam-frame-gap) + 10px);
    right:calc((100vw - var(--roam-frame-w))/2 + 10px);
  }
  body.roam-free.roam-busy .appnav{transform:translate(-50%,120%)}
}

@media (max-width:390px){
  :root{--roam-actions:82px}
  .roam-action{flex-basis:62px;min-height:58px;font-size:9px}
  .roam-action .roam-glyph{font-size:16px}
  body.roam-free .status-ui{padding:22px 18px;border-radius:22px}
  body.roam-free .status-ui .st-row span{width:76px}
}

@media (prefers-reduced-motion:reduce){
  .roam-action:active{transform:none}
}