/* The app-wide message banner, the maintenance screen and the offline bar (reels/app-notice.js, docs/app/APP_NOTICE.md). */
.hobbi-notice{position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:2147483100;max-width:520px;margin:0 auto;
 display:flex;align-items:center;gap:10px;padding:10px 8px 10px 14px;border-radius:16px;color:#fff;
 background:rgba(14,18,24,.94);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
 border:1px solid rgba(91,141,255,.75);box-shadow:0 10px 28px rgba(0,0,0,.45);font:600 14px/1.35 -apple-system,system-ui,sans-serif;
 animation:hobbi-notice-in .24s ease-out}
.hobbi-notice.warn{border-color:rgba(255,184,77,.9);background:rgba(36,26,10,.95)}
.hobbi-notice-text{flex:1;margin:0;min-width:0;overflow-wrap:anywhere}
.hobbi-notice-link{flex:none;color:#06130d;background:#3FE0A6;border-radius:999px;padding:7px 12px;font-weight:700;text-decoration:none;min-height:20px}
.hobbi-notice.warn .hobbi-notice-link{background:#FFB84D;color:#1d1300}
.hobbi-notice-x{flex:none;width:36px;height:36px;border:0;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font:400 22px/1 system-ui,sans-serif;cursor:pointer}
.hobbi-notice[hidden],.hobbi-net-bar[hidden],.hobbi-maint-extra[hidden]{display:none}

.hobbi-net-bar{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 60px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2147483200;
 max-width:calc(100vw - 24px);box-sizing:border-box;padding:8px 14px;border-radius:999px;font:600 13px/1.3 -apple-system,system-ui,sans-serif;color:#fff;text-align:center;
 background:rgba(40,44,54,.96);border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 22px rgba(0,0,0,.4);animation:hobbi-notice-in .2s ease-out}
.hobbi-net-bar.offline::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#FF6B5F;margin-right:8px;vertical-align:1px}
.hobbi-net-bar.back{background:rgba(10,40,30,.96);border-color:rgba(63,224,166,.8)}
.hobbi-net-bar.back::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#3FE0A6;margin-right:8px;vertical-align:1px}
/* The offline bar sits under the top buttons (menu, wallet), clear of them; the banner keeps the very top. */
.hobbi-has-notice .hobbi-net-bar{top:calc(env(safe-area-inset-top,0px) + 76px)}
/* Offline with no round in play: the game frames take no taps (no Slide to play) and dim a little. */
.hobbi-offline-locked iframe.game-frame{pointer-events:none!important;opacity:.55;transition:opacity .2s}
/* This bar replaces the feed's offline "Reconnecting…" overlay; maintenance replaces any "Reconnecting…". */
#reconnecting.offline,.hobbi-maintenance #reconnecting{display:none!important}

.hobbi-maint{position:fixed;inset:0;z-index:2147483600;margin:0;border:0;width:100%;height:100%;max-width:none;max-height:none;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;gap:12px;
 padding:calc(env(safe-area-inset-top,0px) + 24px) 28px calc(env(safe-area-inset-bottom,0px) + 32px);text-align:center;color:#fff;
 background:radial-gradient(120% 70% at 50% 30%,#16213a 0%,#0a0c12 70%);font:500 16px/1.4 -apple-system,system-ui,sans-serif}
.hobbi-maint[open]{display:flex}
.hobbi-maint::backdrop{background:#0a0c12}
.hobbi-maint-mark{width:72px;height:72px;margin-bottom:8px}
.hobbi-maint h1{margin:0;font:800 26px/1.15 -apple-system,system-ui,sans-serif;letter-spacing:-.01em;max-width:320px}
.hobbi-maint-line{margin:0;color:rgba(255,255,255,.75)}
.hobbi-maint-extra{margin:4px 0 0;max-width:320px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.9);font-size:14px;overflow-wrap:anywhere}
.hobbi-maint-retry{margin-top:18px;min-width:180px;min-height:52px;padding:0 28px;border:0;border-radius:999px;background:#3FE0A6;color:#06130d;font:800 17px system-ui,sans-serif;cursor:pointer}
.hobbi-maint-retry:disabled{opacity:.6}
.hobbi-maint-status{margin:0;min-height:20px;font-size:13px;color:rgba(255,255,255,.6)}
.hobbi-maintenance body{overflow:hidden}

@keyframes hobbi-notice-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.hobbi-net-bar{animation-name:hobbi-bar-in}
@keyframes hobbi-bar-in{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.hobbi-notice,.hobbi-net-bar{animation:none}}