:root{
  --bg:#050806;
  --panel:#0a0e0b;
  --panel-2:#0f1511;
  --line:#2a332c;
  --line-soft:#1b231d;
  --paper:#f2efe6;
  --muted:#7d877e;
  --lime:#d7ff38;
  --lime-soft:#b7f34a;
  --orange:#ff7425;
  --cyan:#67b8cc;
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body,#misfits-root{width:100%;min-height:100%;margin:0;background:var(--bg);color:var(--paper)}
html{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}
body{overflow-x:hidden}
button,input{font:inherit}
button{color:inherit}
.misfits-app{min-height:100dvh;background:radial-gradient(circle at 30% -10%,rgba(215,255,56,.04),transparent 25%),#050806}

.top-bar{height:64px;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:stretch;border-bottom:1px solid var(--line);background:#070a08;position:relative;z-index:80;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.misfits-logo{display:flex;align-items:center;padding:0 22px;border-right:1px solid var(--line);font-size:24px;font-weight:950;letter-spacing:.02em}.misfits-logo span{color:var(--lime)}
.district-title{display:flex;align-items:center;padding:0 18px;font-size:11px;letter-spacing:.095em;color:#d5dbd2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.district-title b{color:var(--lime);margin:0 8px}
.live-chip{min-width:118px;display:grid;grid-template-columns:8px auto;grid-template-rows:1fr auto;column-gap:8px;align-content:center;justify-content:center;border-left:1px solid var(--line);border-right:1px solid var(--line);font-size:10px;font-weight:900;letter-spacing:.12em;color:#869087}.live-chip i{grid-row:1/3;align-self:center;width:8px;height:8px;border-radius:50%;background:#59615b}.live-chip small{font-size:7px;letter-spacing:.08em;color:#59615b}.live-chip.is-live{color:var(--lime)}.live-chip.is-live i{background:var(--lime);box-shadow:0 0 16px rgba(215,255,56,.5)}.live-chip.is-live small{color:#8ea166}
.status-strip{display:grid;grid-template-columns:repeat(4,minmax(70px,1fr));min-width:340px}.status-strip>div{padding:8px 12px;border-left:1px solid var(--line-soft);display:flex;flex-direction:column;justify-content:center}.status-strip small{font-size:7px;letter-spacing:.11em;color:#69736b}.status-strip strong{font-size:13px;margin-top:3px}.status-strip>div:first-child strong{color:var(--lime)}

.game-stage{display:grid;grid-template-columns:minmax(0,1fr) 360px;min-height:calc(100dvh - 64px - 108px);max-height:860px;border-bottom:1px solid var(--line);position:relative;background:#050806}.world-panel{position:relative;overflow:hidden;min-width:0;background:#08100d;border-right:1px solid var(--line)}
.phaser-root{position:absolute;inset:0;overflow:hidden;background:#08100d}.phaser-root canvas{display:block;width:100%!important;height:100%!important;image-rendering:pixelated;image-rendering:crisp-edges}
.world-panel:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(2,5,3,.28),transparent 22%,transparent 72%,rgba(2,5,3,.25)),radial-gradient(circle at 50% 42%,transparent 40%,rgba(0,0,0,.22) 100%);z-index:20}
.world-overlay-title{position:absolute;left:18px;top:18px;z-index:30;display:grid;gap:3px;text-shadow:0 2px 8px #000}.world-overlay-title small{font-size:7px;letter-spacing:.14em;color:#818d83}.world-overlay-title strong{font-family:ui-sans-serif,system-ui,sans-serif;font-size:24px;letter-spacing:-.035em}
.world-tagline{position:absolute;left:18px;bottom:58px;z-index:30;padding:7px 10px;background:rgba(5,8,6,.82);border-left:2px solid var(--orange);font-size:8px;letter-spacing:.08em;color:#d9ddd5}
.truth-line{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:10px;padding:6px 10px;background:rgba(5,8,6,.78);border:1px solid rgba(255,255,255,.07);font-size:7px;letter-spacing:.11em;color:#909a91;white-space:nowrap}.truth-line i{width:6px;height:6px;border-radius:50%;background:var(--lime)}
.notice-line{position:absolute;right:14px;bottom:16px;z-index:30;max-width:360px;text-align:right;font-size:7px;line-height:1.4;color:#738076;text-shadow:0 1px 4px #000}

.phone-panel{background:#080b09;border-left:1px solid #121713;overflow:auto;position:relative;z-index:45;box-shadow:-24px 0 60px rgba(0,0,0,.25)}
.phone-panel::-webkit-scrollbar{width:6px}.phone-panel::-webkit-scrollbar-thumb{background:#2b342d}
.phone-status{display:grid;grid-template-columns:repeat(3,1fr) auto;border-bottom:1px solid var(--line);background:#070a08;position:sticky;top:0;z-index:4}.phone-status>div{min-height:50px;padding:8px 9px;border-right:1px solid var(--line-soft);display:flex;flex-direction:column;justify-content:center}.phone-status small{font-size:6px;letter-spacing:.1em;color:#6d766f}.phone-status strong{font-size:11px;margin-top:3px}.phone-icons{flex-direction:row!important;align-items:center!important;gap:5px;padding:7px!important;border-right:0!important}.ui-icon{display:grid;place-items:center;min-width:24px;height:24px;border:1px solid #283129;background:#0d120e;font-size:11px;color:#9ba49d}
.phone-head{height:42px;display:flex;align-items:center;padding:0 12px;border-bottom:1px solid var(--line);font-size:9px;letter-spacing:.08em}.phone-head strong{font-size:10px}.phone-head span{margin-left:auto;color:#707a72}.phone-head button{margin-left:8px;border:0;background:transparent;color:#666;font-size:18px;cursor:pointer}
.phone-section{padding:13px 13px 14px;border-bottom:1px solid var(--line-soft)}.phone-section>small,.section-title small{font-size:7px;letter-spacing:.12em;color:#747f76}.quest-section h2{font-family:ui-sans-serif,system-ui,sans-serif;font-size:20px;letter-spacing:-.04em;margin:7px 0 10px}.quest-money{display:flex;align-items:baseline;gap:7px}.quest-money strong{font-size:24px;color:var(--lime);font-weight:700}.quest-money span{font-size:14px}.quest-money em{font-style:normal;margin-left:auto;font-size:8px;color:var(--orange)}.quest-progress{height:8px;border:1px solid #483222;background:#0a0d0b;margin-top:7px;padding:1px}.quest-progress i{display:block;height:100%;background:var(--orange)}
.moves-section>small{display:block;margin-bottom:7px}.move-list{display:grid;gap:5px}.move-list button{height:44px;border:1px solid #2d352e;background:#111612;display:flex;align-items:center;text-align:left;padding:0 10px;cursor:pointer;transition:.15s}.move-list button:hover{border-color:#526154;transform:translateX(1px)}.move-list button.active{background:var(--orange);border-color:#ff8f51;color:#0b0d0b}.move-list button span{display:grid;gap:2px}.move-list strong{font-size:9px;letter-spacing:.06em}.move-list em{font-size:6px;font-style:normal;color:#727d74}.move-list button.active em{color:#3d2418}.move-list b{margin-left:auto;font-size:17px}
.guide-kicker{font-size:7px;letter-spacing:.1em;color:var(--lime);margin-bottom:8px}.guide-card{display:grid;grid-template-columns:94px minmax(0,1fr);gap:10px;border:1px solid #2e382f;background:linear-gradient(135deg,#111712,#090c0a);padding:9px}.robot-portrait{height:116px;background:radial-gradient(circle at 50% 35%,rgba(215,255,56,.07),transparent 45%),#080b09;border:1px solid #2c352d;display:grid;place-items:center;position:relative}.robot-head{position:absolute;top:18px;width:54px;height:40px;border:3px solid #5f6d61;background:#101511;box-shadow:0 0 20px rgba(183,243,74,.05)}.robot-head:before{content:"";position:absolute;left:50%;top:-16px;width:2px;height:14px;background:#6d796f}.robot-head:after{content:"";position:absolute;left:calc(50% - 3px);top:-19px;width:7px;height:7px;border-radius:50%;background:var(--lime)}.robot-head i{position:absolute;top:13px;width:6px;height:13px;background:var(--lime);box-shadow:0 0 9px rgba(215,255,56,.38)}.robot-head i:first-child{left:13px}.robot-head i:last-child{right:13px}.robot-body{position:absolute;top:63px;width:62px;height:35px;background:#191f1a;border:3px solid #505b52}.guide-copy{display:flex;flex-direction:column}.guide-copy>strong{font-size:10px;color:var(--paper)}.guide-copy>span{font-size:7px;margin-top:3px;color:#879189}.guide-copy p{font-family:ui-sans-serif,system-ui,sans-serif;font-size:10px;line-height:1.4;color:#929a93;margin:9px 0}.guide-copy button,.guide-action{margin-top:auto;height:31px;border:1px solid #6b8838;background:#111711;color:var(--lime);font-size:8px;letter-spacing:.08em;cursor:pointer}.guide-copy button:hover,.guide-action:hover{background:#172015}
.capacity-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;margin-top:8px;font-size:7px;color:#727b73}.capacity-row>div{display:flex;gap:5px}.capacity-row i{width:9px;height:9px;border-radius:50%;background:#313932}.capacity-row i.on{background:var(--orange);box-shadow:0 0 8px rgba(255,116,37,.3)}.capacity-row strong{color:#a9b0aa;font-size:8px}
.section-title{display:flex;align-items:center}.section-title button{margin-left:auto;width:25px;height:25px;border:1px solid #4d5d3f;background:#111711;color:var(--lime);cursor:pointer}.section-title span{margin-left:auto;font-size:6px;color:#657067}.empty-stack{font-family:ui-sans-serif,system-ui,sans-serif;font-size:10px;color:#737d75;margin:9px 0 0}.stack-list{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.stack-list span{font-size:7px;border:1px solid #394439;padding:5px 7px;color:#cbd2cc;background:#0c110d}
.chat-feed{display:grid;gap:5px}.chat-feed p{margin:0;font-family:ui-sans-serif,system-ui,sans-serif;font-size:10px;line-height:1.35;color:#848e86}.chat-feed strong{font-family:ui-monospace,monospace;font-size:7px;letter-spacing:.03em;color:#b8c0b9}.chat-feed .chat-system strong{color:var(--lime)}.chat-feed .chat-ai strong{color:#a7d9df}.chat-feed.compact{max-height:78px;overflow:hidden;margin-top:8px}.open-chat{margin-top:9px;width:100%;height:31px;border:1px solid #303a32;background:#0e130f;color:#aab2ab;font-size:7px;letter-spacing:.08em;cursor:pointer}

.device-preview{display:none;background:#050806;align-items:center;justify-content:center;border-left:1px solid var(--line);padding:18px;position:relative;z-index:44}.device-shell{width:205px;height:430px;border:7px solid #292d2a;border-radius:30px;background:#060806;box-shadow:0 25px 60px rgba(0,0,0,.55);padding:6px;position:relative}.device-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:74px;height:15px;border-radius:0 0 11px 11px;background:#0b0d0c;z-index:5}.device-screen{height:100%;border-radius:20px;overflow:hidden;background:#080b09;border:1px solid #151a16;display:flex;flex-direction:column}.device-top{height:36px;display:flex;align-items:end;padding:0 8px 7px;border-bottom:1px solid #1d241e;font-size:7px}.device-top span{margin-left:auto;color:var(--lime);font-size:6px}.device-world{height:132px;background:url('/assets/world/founding-district-world.svg') center/cover no-repeat;border-bottom:1px solid #1d241e}.device-quest{padding:8px;display:grid;gap:4px;border-bottom:1px solid #1d241e}.device-quest small,.device-actions>strong{font-size:5px;color:#767f77}.device-quest>b{font-size:7px}.device-quest div{font-size:8px}.device-quest div strong{color:var(--lime)}.device-quest i{height:3px;border:1px solid #53321f}.device-actions{display:grid;gap:3px;padding:7px}.device-actions span{height:19px;border:1px solid #29312b;display:grid;place-items:center;font-size:5px}.device-actions span.orange{background:var(--orange);color:#111;border-color:var(--orange)}.device-guide{display:flex;gap:6px;margin:0 7px;padding:6px;border:1px solid #35412f}.tiny-bot{width:28px;height:28px;border:1px solid #596355;display:grid;place-items:center;color:var(--lime);background:#111}.device-guide>div:last-child{display:grid;gap:3px}.device-guide strong{font-size:5px;color:var(--lime)}.device-guide small{font-size:5px}.device-nav{margin-top:auto;height:32px;border-top:1px solid #1d241e;display:grid;grid-template-columns:repeat(5,1fr);place-items:center;font-size:8px;color:#657067}.device-nav span:first-child{color:var(--lime)}

.bottom-bar{min-height:108px;display:grid;grid-template-columns:190px 310px minmax(260px,1fr) auto auto;align-items:stretch;border-top:1px solid #101510;background:#060907;position:relative;z-index:70}.coords{padding:16px 18px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}.coords span{font-size:8px;color:var(--lime);letter-spacing:.08em}.coords strong{font-size:10px;margin-top:5px;color:#88928a}.bottom-actions{display:grid;grid-template-columns:repeat(4,1fr);border-right:1px solid var(--line)}.bottom-actions button{border:0;border-right:1px solid var(--line-soft);background:transparent;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;color:#8c968e;cursor:pointer}.bottom-actions button:hover{background:#0d120e;color:var(--lime)}.bottom-actions .ui-icon{border:0;background:transparent;height:20px;font-size:16px}.bottom-actions span:last-child{font-size:7px}.bottom-chat{padding:10px 12px;display:grid;grid-template-rows:1fr auto;gap:5px;border-right:1px solid var(--line)}.bottom-chat .chat-feed{max-height:45px;overflow:hidden}.bottom-chat>div:last-child{display:flex}.bottom-chat input{flex:1;min-width:0;height:29px;border:1px solid #2a342c;background:#0b100c;color:var(--paper);padding:0 8px;font-size:9px;outline:none}.bottom-chat button{width:58px;border:1px solid #6d3c20;background:var(--orange);color:#10130f;font-size:7px;font-weight:900}.bottom-open-chat{align-self:center;height:36px;margin:0 12px;border:1px solid #48534a;background:#111612;color:#d5d9d3;padding:0 14px;font-size:8px;cursor:pointer}.bottom-shortcuts{display:flex;align-items:center;gap:4px;padding-right:12px}.bottom-shortcuts button{width:29px;height:29px;border:1px solid #2e3730;background:#0d120e;color:#707a72}

.welcome-card{position:fixed;z-index:110;left:22px;bottom:128px;width:360px;padding:16px;background:rgba(8,12,9,.97);border:1px solid #485147;box-shadow:0 24px 70px rgba(0,0,0,.62),0 0 0 1px rgba(215,255,56,.02) inset;backdrop-filter:blur(14px)}.welcome-kicker{display:flex;align-items:center;gap:9px}.welcome-kicker span{display:grid;place-items:center;width:38px;height:28px;border:1px solid #7ca13e;color:var(--lime);font-size:10px;font-weight:900}.welcome-kicker b{font-size:8px;color:var(--lime);letter-spacing:.08em}.welcome-card h2{font-family:ui-sans-serif,system-ui,sans-serif;font-size:28px;letter-spacing:-.05em;margin:12px 0 7px}.welcome-card>p{font-family:ui-sans-serif,system-ui,sans-serif;font-size:10px;line-height:1.45;color:#858f87;margin:0 0 12px}.welcome-name{display:grid;gap:4px;margin:10px 0}.welcome-name span{font-size:6px;color:#69736b;letter-spacing:.1em}.welcome-name input,.city-request input{height:36px;border:1px solid #323c34;background:#0c110d;color:var(--paper);padding:0 9px;outline:none}.welcome-check{display:flex;gap:8px;align-items:center;padding:6px 0;font-size:8px;color:#aab1ab}.welcome-check input{accent-color:var(--lime)}.enter-world{width:100%;height:39px;margin-top:8px;border:1px solid #9ac54b;background:var(--lime);color:#0d100e;font-weight:950;font-size:9px;letter-spacing:.08em;cursor:pointer}.enter-world:disabled{background:#252d26;border-color:#394039;color:#687168;cursor:not-allowed}.city-hook{width:100%;border:0;background:transparent;padding:10px 0 2px;text-align:left;color:#aab6a6;font-size:7px;cursor:pointer}.city-hook:hover{color:var(--lime)}.city-request{display:grid;grid-template-columns:1fr 1.25fr auto;gap:4px;margin-top:7px}.city-request input{height:31px;font-size:8px}.city-request button{border:1px solid #4e6531;background:#111711;color:var(--lime);font-size:6px;padding:0 7px}.city-request small{grid-column:1/-1;color:#7d8c78;font-size:6px;margin-top:3px}

.inspect-panel{position:fixed;z-index:105;right:382px;top:82px;width:280px;padding:16px;background:rgba(8,12,9,.97);border:1px solid #3c473e;box-shadow:0 18px 55px rgba(0,0,0,.55);backdrop-filter:blur(12px)}.inspect-close{position:absolute;right:8px;top:8px;border:0;background:transparent;color:#7b857d;font-size:18px;cursor:pointer}.inspect-panel>small{font-size:7px;color:var(--lime);letter-spacing:.1em}.inspect-panel h3{font-family:ui-sans-serif,system-ui,sans-serif;font-size:23px;margin:8px 0 13px;letter-spacing:-.04em}.inspect-panel p{font-family:ui-sans-serif,system-ui,sans-serif;font-size:10px;line-height:1.45;color:#8d968f}.inspect-stack{display:flex;align-items:baseline;gap:8px;padding:8px 0;border-top:1px solid #29322a;border-bottom:1px solid #29322a}.inspect-stack span{font-size:7px;color:#707b72}.inspect-stack strong{margin-left:auto;font-size:18px;color:var(--lime)}.inspect-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:9px}.inspect-grid span{padding:7px;border:1px solid #263028;font-size:7px;color:#8b958d}.inspect-grid b{float:right;color:#e5e8e2}.truth-badge{border-left:2px solid var(--orange);padding-left:8px!important;color:#a49587!important}.inspect-actions button,.guide-action{width:100%;height:34px;border:1px solid #536443;background:#101610;color:var(--lime);font-size:7px;letter-spacing:.08em;cursor:pointer}

.chat-drawer{position:fixed;z-index:120;right:22px;bottom:128px;width:420px;max-height:500px;background:rgba(7,11,8,.98);border:1px solid #3d473f;box-shadow:0 24px 70px rgba(0,0,0,.66);padding:14px}.drawer-head{display:flex;align-items:center;border-bottom:1px solid #29322a;padding-bottom:10px}.drawer-head>div{display:grid;gap:3px}.drawer-head small{font-size:6px;color:#747f76}.drawer-head strong{font-size:9px;color:var(--lime)}.drawer-head button{margin-left:auto;border:0;background:transparent;font-size:20px;color:#788279;cursor:pointer}.chat-drawer .chat-feed{max-height:270px;overflow:auto;padding:12px 0}.chat-drawer form{display:flex}.chat-drawer input{flex:1;height:38px;border:1px solid #2c352e;background:#0b100c;color:var(--paper);padding:0 10px;outline:none}.chat-drawer form button{width:70px;border:1px solid #75401f;background:var(--orange);color:#0d110e;font-weight:900}.city-acquisition{font-family:ui-sans-serif,system-ui,sans-serif;font-size:9px;line-height:1.4;color:#717b73;margin:10px 0 0}
.phone-fab{position:fixed;z-index:100;right:18px;bottom:126px;height:38px;border:1px solid #6c853a;background:#111711;color:var(--lime);font-size:8px;padding:0 13px}

.showcase-only{position:fixed;inset:0;background:#08100d}.showcase-only .phaser-root{position:absolute;inset:0}

@media(min-width:1550px){.game-stage{grid-template-columns:minmax(0,1fr) 350px 245px}.device-preview{display:flex}.inspect-panel{right:617px}}
@media(max-width:1180px){.top-bar{grid-template-columns:auto minmax(0,1fr) auto}.status-strip{display:none}.game-stage{grid-template-columns:minmax(0,1fr) 330px}.district-title{font-size:9px}.phone-panel{font-size:95%}.bottom-bar{grid-template-columns:170px 270px minmax(240px,1fr) auto}.bottom-shortcuts{display:none}.inspect-panel{right:350px}}
@media(max-width:860px){
  .top-bar{height:54px;grid-template-columns:auto minmax(0,1fr) auto}.misfits-logo{padding:0 13px;font-size:18px}.district-title{padding:0 10px;font-size:7px;letter-spacing:.05em}.district-title b{margin:0 4px}.live-chip{min-width:78px;font-size:7px}.live-chip small{font-size:5px}
  .game-stage{display:block;min-height:calc(100dvh - 54px - 64px);height:calc(100dvh - 54px - 64px);max-height:none}.world-panel{height:100%;border-right:0}.world-overlay-title{left:10px;top:10px}.world-overlay-title strong{font-size:18px}.world-tagline{left:10px;bottom:48px}.truth-line{display:none}.notice-line{left:10px;right:auto;bottom:12px;text-align:left;max-width:65%}
  .phone-panel{position:fixed;z-index:100;left:0;right:0;bottom:calc(64px + var(--safe-bottom));top:36dvh;border-left:0;border-top:1px solid #384238;transform:translateY(calc(100% + 70px));transition:transform .2s ease;box-shadow:0 -24px 60px rgba(0,0,0,.65)}.phone-panel.open{transform:translateY(0)}.phone-status{position:static}.phone-head{position:sticky;top:50px;background:#080b09;z-index:3}.guide-card{grid-template-columns:82px minmax(0,1fr)}.robot-portrait{height:98px}
  .bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;min-height:calc(64px + var(--safe-bottom));height:calc(64px + var(--safe-bottom));grid-template-columns:1fr;padding-bottom:var(--safe-bottom)}.coords,.bottom-chat,.bottom-open-chat,.bottom-shortcuts{display:none}.bottom-actions{border-right:0;grid-template-columns:repeat(4,1fr)}.bottom-actions button{height:64px}
  .welcome-card{left:10px;right:10px;bottom:calc(74px + var(--safe-bottom));width:auto;max-height:62dvh;overflow:auto}.city-request{grid-template-columns:1fr}.city-request small{grid-column:1}
  .inspect-panel{left:10px;right:10px;top:auto;bottom:calc(74px + var(--safe-bottom));width:auto}.chat-drawer{left:10px;right:10px;bottom:calc(74px + var(--safe-bottom));width:auto;max-height:60dvh}.phone-fab{right:10px;bottom:calc(74px + var(--safe-bottom))}
}
@media(max-width:520px){.district-title{white-space:normal;line-height:1.15}.live-chip{min-width:66px}.world-overlay-title small{font-size:5px}.world-overlay-title strong{font-size:16px}.world-tagline{font-size:6px}.notice-line{font-size:5px;max-width:78%}.welcome-card h2{font-size:24px}.welcome-card{padding:14px}.move-list button{height:42px}.phone-section{padding:11px}.phone-status>div{min-height:45px}.phone-status strong{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}