/* ============ STUDIO CITY styles ============ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --ink:#2b2350; --paper:#fffdf7; --pop:#ff5d8f; --sun:#ffc14d; --sky:#59c2ff;
  --leaf:#4cd47f; --purp:#8f6bff; --card:#ffffff; --shadow:0 10px 30px rgba(43,35,80,.25);
  --r:18px;
}
html,body{height:100%;overflow:hidden;font-family:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;background:#1c1740;color:var(--ink);
  user-select:none;-webkit-user-select:none;touch-action:none}
.hidden{display:none!important}
#view{position:fixed;inset:0}
#view canvas{display:block}
button{font-family:inherit;cursor:pointer;border:none}
input,select,textarea{font-family:inherit;user-select:text;-webkit-user-select:text}

/* ---------- boot / crash / join ---------- */
#boot,#crash,#join{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#2b2350 0%,#4b3a9e 55%,#ff8fb3 130%);overflow:auto}
.boot-card,.join-card{background:var(--paper);border-radius:26px;padding:34px 40px;text-align:center;box-shadow:var(--shadow);max-width:92vw}
.boot-logo{font-size:64px;line-height:1}
.boot-logo.sm{font-size:40px}
.boot-card h1,.join-head h1{font-size:34px;letter-spacing:2px;color:var(--ink);margin:6px 0 2px}
.boot-sub{opacity:.65;margin-bottom:18px}
.bootbar-wrap{width:300px;max-width:70vw;height:14px;background:#e8e4f7;border-radius:9px;overflow:hidden;margin:0 auto}
#bootbar{height:100%;width:2%;border-radius:9px;background:linear-gradient(90deg,var(--sky),var(--purp),var(--pop));transition:width .25s}
#boottxt{margin-top:10px;font-size:13px;opacity:.6}
.crash-btns{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.big-btn{background:var(--purp);color:#fff;font-size:18px;font-weight:700;padding:13px 26px;border-radius:14px;box-shadow:0 4px 0 rgba(0,0,0,.18);transition:transform .08s}
.big-btn:active{transform:translateY(3px);box-shadow:none}
.big-btn.alt{background:var(--sky)}
.big-btn.warn{background:#ff8b5d}
.big-btn.play{background:linear-gradient(90deg,#ff5d8f,#8f6bff);width:100%;margin-top:14px;font-size:20px}
.tiny{font-size:12px}
.center{text-align:center;margin-top:8px}
a{color:var(--purp)}

.join-card{padding:26px 34px;text-align:left}
.join-head{display:flex;align-items:center;gap:12px;justify-content:center}
.join-sub{text-align:center;opacity:.65;margin:4px 0 18px}
.join-grid{display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
.join-left{display:flex;flex-direction:column;min-width:230px}
.join-left label{font-weight:700;font-size:13px;margin:10px 0 4px;opacity:.75}
.join-left input{font-size:20px;padding:10px 14px;border:3px solid #e3ddf5;border-radius:12px;outline:none;text-transform:none}
.join-left input:focus{border-color:var(--purp)}
#j-room{text-transform:uppercase}
.join-right{text-align:center}
#j-preview{background:linear-gradient(180deg,#bfe7ff,#e8f9ee);border-radius:16px}
.pick-label{font-size:12px;font-weight:700;opacity:.7;margin-top:8px;text-align:left}
.pick-row{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.pick-row .sw{width:30px;height:30px;border-radius:9px;border:3px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;background:#eee}
.pick-row .sw.sel{border-color:var(--ink);transform:scale(1.1)}
#j-status{min-height:16px;color:var(--pop);font-weight:700}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:50}
#hud .chip,#hud .pill,#hud .hud-btn{pointer-events:auto}
.hud-topleft{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.hud-topright{position:absolute;top:12px;right:12px;display:flex;gap:7px;align-items:center}
.chip{background:rgba(255,253,247,.94);border-radius:13px;padding:7px 13px;font-weight:800;font-size:14px;box-shadow:0 3px 10px rgba(0,0,0,.22);display:flex;align-items:center;gap:8px;color:var(--ink)}
.name-chip .career{font-size:11px;background:var(--purp);color:#fff;padding:2px 8px;border-radius:8px;font-weight:700}
.coin-chip b{color:#c78a00}
.xp-chip{min-width:150px}
.xpbar{flex:1;height:9px;background:#e8e4f7;border-radius:5px;overflow:hidden;min-width:70px}
#hud-xpfill{height:100%;width:0%;background:linear-gradient(90deg,var(--leaf),var(--sky));border-radius:5px;transition:width .4s}
.dev-chip{background:#2b2350;color:#ffd76e}
.job-chip{background:#fff3d6;border:2px dashed #e0a93e}
.pill{background:rgba(255,253,247,.94);border-radius:99px;padding:6px 12px;font-size:12px;font-weight:800;box-shadow:0 3px 10px rgba(0,0,0,.22)}
.pill.ok{color:#0f9d58}.pill.warn{color:#c78a00}.pill.bad{color:#e5484d}
.pill.soft{opacity:.92}
.hud-btn{width:42px;height:42px;border-radius:13px;background:rgba(255,253,247,.94);font-size:20px;box-shadow:0 3px 10px rgba(0,0,0,.22)}
.hud-btn:active{transform:scale(.93)}

#needs{position:absolute;bottom:14px;left:14px;display:flex;gap:7px;pointer-events:none}
.need{background:rgba(255,253,247,.92);border-radius:12px;padding:5px 8px;font-size:15px;display:flex;align-items:center;gap:5px;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.need i{display:block;width:34px;height:7px;background:#e3ddf5;border-radius:4px;overflow:hidden;font-style:normal}
.need b{display:block;height:100%;background:var(--leaf);border-radius:4px;width:100%;transition:width .5s}
.need.low b{background:#ff8b5d}
.need.crit b{background:#e5484d}

#lockhint{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);background:rgba(43,35,80,.6);color:#fff;
  border-radius:11px;padding:5px 14px;font-size:13px;font-weight:700;pointer-events:none;opacity:.85}
#coursechip{position:absolute;top:56px;right:14px;cursor:pointer;pointer-events:auto;border:2px solid var(--sun,#ffd76e)}
#coursechip.done{border-color:#4cd47f}
.meter{height:12px;background:#eee;border-radius:8px;overflow:hidden;margin:4px 0 10px}
.meter.big{height:18px;border-radius:10px}
.meter i{display:block;height:100%;background:#8f6bff;border-radius:8px;transition:width .4s}
.card .tag{display:inline-block;background:#efeafd;border-radius:6px;padding:1px 6px;font-size:10px;font-weight:800;vertical-align:middle}
#prompt{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);background:rgba(43,35,80,.92);color:#fff;
  padding:10px 22px;border-radius:14px;font-weight:800;font-size:16px;box-shadow:var(--shadow);pointer-events:auto;cursor:pointer;white-space:nowrap}
#prompt .key{background:var(--sun);color:var(--ink);border-radius:7px;padding:2px 9px;margin-right:8px;font-size:14px}
#frozen{position:absolute;top:70px;left:50%;transform:translateX(-50%);background:#2b2350;color:#ffd76e;padding:10px 24px;border-radius:14px;font-weight:800;box-shadow:var(--shadow)}
#eventbanner{position:absolute;top:70px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,var(--pop),var(--purp));color:#fff;padding:12px 30px;border-radius:16px;font-weight:900;font-size:20px;box-shadow:var(--shadow);animation:pop .5s}
@keyframes pop{0%{transform:translateX(-50%) scale(.3)}70%{transform:translateX(-50%) scale(1.1)}100%{transform:translateX(-50%) scale(1)}}

/* ---------- touch ---------- */
#touch{position:fixed;inset:0;z-index:60;pointer-events:none}
#joy{position:absolute;bottom:80px;left:26px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.4);pointer-events:auto}
#joyknob{position:absolute;left:38px;top:38px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.75)}
.tbtns{position:absolute;bottom:84px;right:22px;display:flex;flex-direction:column;gap:12px;pointer-events:auto}
.tbtns button{width:62px;height:62px;border-radius:50%;font-size:26px;background:rgba(255,253,247,.85);box-shadow:0 4px 12px rgba(0,0,0,.3)}

/* ---------- toasts / confetti / spotlight ---------- */
#toasts{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:rgba(43,35,80,.95);color:#fff;padding:10px 20px;border-radius:13px;font-weight:700;font-size:15px;opacity:0;transform:translateY(-8px);transition:all .35s;max-width:80vw;text-align:center;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateY(0)}
.toast.gold{background:linear-gradient(90deg,#c78a00,#ffc14d);color:#3a2a00}
.toast.pop{background:linear-gradient(90deg,var(--pop),var(--purp))}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:150;overflow:hidden}
.confetti i{position:absolute;top:-4vh;width:10px;height:14px;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
#spotlight{position:fixed;inset:0;z-index:140;background:rgba(20,15,45,.9);display:flex;align-items:center;justify-content:center}
.spot-inner{text-align:center;animation:pop .5s}
#spot-img{max-width:74vw;max-height:64vh;border-radius:16px;border:8px solid #fff;box-shadow:0 0 80px rgba(255,193,77,.6);background:#fff}
#spot-cap{color:#ffd76e;font-size:22px;font-weight:900;margin-top:14px}

/* ---------- overlay panels ---------- */
#ov{position:fixed;inset:0;z-index:100;background:rgba(28,23,64,.55);display:flex;align-items:center;justify-content:center;padding:14px}
.panel{background:var(--paper);border-radius:22px;box-shadow:var(--shadow);max-width:min(1060px,96vw);max-height:94vh;display:flex;flex-direction:column;overflow:hidden;animation:pop .3s}
.panel.wide{width:min(1060px,96vw)}
.phead{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:linear-gradient(90deg,#efeafd,#fdeef4);border-bottom:2px solid #e8e2f8}
.ptitle{font-size:20px;font-weight:900;color:var(--ink)}
.pclose{background:#fff;border-radius:10px;width:34px;height:34px;font-size:16px;font-weight:900;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.pbody{padding:18px 20px;overflow:auto;flex:1}
.pbody h3{margin:12px 0 6px;font-size:15px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0}
.grow{flex:1}
.btn{background:var(--purp);color:#fff;font-weight:800;padding:9px 16px;border-radius:11px;font-size:14px;box-shadow:0 3px 0 rgba(0,0,0,.15)}
.btn:active{transform:translateY(2px);box-shadow:none}
.btn.sky{background:var(--sky)}.btn.leaf{background:var(--leaf);color:#083b1e}.btn.sun{background:var(--sun);color:#4a3400}
.btn.pop{background:var(--pop)}.btn.gray{background:#a49ec4}.btn.danger{background:#e5484d}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:9px}
.btn.ghost{background:#efeafd;color:var(--ink);box-shadow:none;border:2px solid #ddd4f5}
.btn:disabled{opacity:.45;cursor:default}
.field{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:700}
.field input,.field select,.field textarea{font-size:15px;padding:8px 10px;border:2px solid #e3ddf5;border-radius:10px;outline:none}
.card{background:#fff;border:2px solid #ece7fa;border-radius:14px;padding:12px}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.artcard{border:2px solid #ece7fa;border-radius:14px;overflow:hidden;background:#fff;cursor:pointer;transition:transform .1s}
.artcard:hover{transform:translateY(-3px)}
.artcard img,.artcard canvas{width:100%;height:110px;object-fit:cover;background:#f4f1fc;display:block}
.artcard .meta{padding:7px 9px;font-size:12px}
.artcard .meta b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.artcard .tag{display:inline-block;background:#efeafd;border-radius:6px;padding:1px 6px;font-size:10px;font-weight:800;margin-top:3px}
.artcard .tag.feat{background:var(--sun)}
.artcard .tag.hid{background:#ffd4d6}
.badge-ico{font-size:26px}
.progress{height:16px;background:#e8e4f7;border-radius:9px;overflow:hidden}
.progress>div{height:100%;background:linear-gradient(90deg,var(--leaf),var(--sky));border-radius:9px;transition:width .5s}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tabs .btn{background:#efeafd;color:var(--ink);box-shadow:none}
.tabs .btn.on{background:var(--ink);color:#fff}
table.list{width:100%;border-collapse:collapse;font-size:13px}
table.list td,table.list th{padding:6px 8px;border-bottom:1px solid #eee7fb;text-align:left}
.loglist{font-size:12px;max-height:320px;overflow:auto;background:#f7f4fe;border-radius:10px;padding:10px}
.loglist div{padding:3px 0;border-bottom:1px dashed #e3dcf7}

/* ---------- paint tool ---------- */
.paint-wrap{display:flex;gap:14px;flex-wrap:wrap}
.paint-toolbar{display:flex;flex-direction:column;gap:6px;min-width:132px}
.tool-btn{background:#efeafd;border-radius:10px;padding:8px;font-size:15px;font-weight:800;color:var(--ink);text-align:left}
.tool-btn.on{background:var(--ink);color:#fff}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.swatches .sw{width:26px;height:26px;border-radius:8px;border:2px solid transparent;cursor:pointer}
.swatches .sw.sel{border-color:var(--ink);transform:scale(1.12)}
.canvas-stack{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.15);background:
  repeating-conic-gradient(#f2f0f8 0% 25%, #fff 0% 50%) 0 0/20px 20px;touch-action:none;flex:none}
.canvas-stack canvas{position:absolute;left:0;top:0}
.canvas-stack canvas:first-child{position:relative}
.layer-row{display:flex;gap:5px}
.layer-row .btn{flex:1}
.thumbs{display:flex;gap:6px;overflow-x:auto;padding:6px 0}
.thumbs .fr{border:3px solid #ddd4f5;border-radius:8px;cursor:pointer;flex:none;position:relative;background:#fff}
.thumbs .fr.on{border-color:var(--pop)}
.thumbs .fr canvas{display:block;border-radius:5px}
.thumbs .fr .no{position:absolute;top:1px;left:4px;font-size:10px;font-weight:900;color:var(--purp)}
.sb-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sb-panel{border:2px solid #e3ddf5;border-radius:12px;padding:8px;background:#fff}
.sb-panel.on{border-color:var(--pop)}
.sb-panel input,.sb-panel select{width:100%;margin-top:5px;font-size:12px;padding:5px;border:2px solid #eee;border-radius:8px}

/* ---------- game studio ---------- */
.gs-wrap{display:flex;gap:14px;flex-wrap:wrap}
.gs-palette{display:flex;flex-direction:column;gap:5px;min-width:120px}
.gcanvas{border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.2);touch-action:none;image-rendering:pixelated}
.code-panel{background:#241d4e;color:#c9f7d8;font-family:ui-monospace,Consolas,monospace;font-size:13px;border-radius:12px;padding:12px;line-height:2}
.code-panel select{background:#3a3170;color:#ffd76e;border:none;border-radius:6px;padding:2px 6px;font-family:inherit}
.code-panel .kw{color:#8f9dff}.code-panel .fn{color:#ffd76e}.code-panel .cm{color:#7f76b5}
.slider-row{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.slider-row input[type=range]{flex:1}

/* ---------- program picker (join screen) ---------- */
.prog-grid{display:flex;flex-direction:column;gap:6px;margin:4px 0 6px;max-height:220px;overflow:auto}
.prog-chip{display:flex;align-items:center;gap:10px;text-align:left;background:#f4f1fc;border:3px solid transparent;border-radius:12px;padding:7px 10px;font-size:13px;transition:border .12s}
.prog-chip i{display:block;font-style:normal;font-size:11px;opacity:.65;font-weight:600}
.prog-chip .prog-ico{font-size:22px}
.prog-chip.sel{border-color:var(--purp);background:#efe9ff}
.prog-chip:hover{border-color:#d5cbf5}

/* ---------- avatar creator ---------- */
#ov.ov-top{z-index:300}
.av-wrap{display:flex;gap:18px;flex-wrap:wrap}
.av-left{display:flex;flex-direction:column;gap:6px;min-width:250px;align-items:center}
.av-canvas{background:linear-gradient(180deg,#bfe7ff,#e8f9ee);border-radius:16px}
.av-camps{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.av-right{flex:1;min-width:290px}
.av-tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.av-chiprow{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 6px}
.av-chip{background:#efeafd;border-radius:10px;padding:7px 11px;font-size:13px;font-weight:800;color:var(--ink)}
.av-chip.on{background:var(--ink);color:#fff}
.av-chip.locked{opacity:.55}
.av-opts .pick-label{margin-top:10px}

/* ---------- crosshair + control hints ---------- */
#crosshair{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:rgba(255,255,255,.85);box-shadow:0 0 0 2px rgba(43,35,80,.5);pointer-events:none}
#hints{position:absolute;bottom:14px;right:14px;background:rgba(255,253,247,.95);border-radius:14px;padding:12px 15px;
  font-size:13px;line-height:1.7;box-shadow:var(--shadow);pointer-events:auto;max-width:290px;color:var(--ink)}
#hints .hints-head{font-weight:900;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
#hints button{background:#efeafd;border-radius:8px;padding:3px 9px;font-size:11px;font-weight:800;color:var(--ink)}
#hints b{background:var(--sun);border-radius:5px;padding:0 5px;font-size:11px}

/* ---------- city ideas ---------- */
.idea-card{position:relative}
.idea-card.featured{border-color:var(--sun);box-shadow:0 0 0 3px rgba(255,193,77,.35)}
.idea-star{font-size:10px;font-weight:900;color:#c78a00;margin-bottom:3px}
.idea-comment{background:#f4f1fc;border-radius:8px;padding:5px 8px;margin:4px 0}
.idea-card select{font-size:11px;padding:4px;border:2px solid #e3ddf5;border-radius:8px;max-width:130px}

/* ---------- robotics workshop ---------- */
.robot-prog{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;min-height:34px;background:#f4f1fc;border-radius:10px;padding:6px}
.robot-cmd{background:var(--ink);color:#7dfcb1;border-radius:8px;padding:4px 10px;font-size:16px;font-weight:900;cursor:pointer}
.robot-cmd:hover{background:#e5484d;color:#fff}

/* small screens */
@media (max-width:760px){
  .xp-chip{min-width:100px}
  #needs{bottom:190px}
  .join-grid{gap:14px}
  .pbody{padding:12px}
}

/* ================= M15 — Districts Awake ================= */
.m15-prompt{position:absolute;top:100px;left:50%;transform:translateX(-50%);background:rgba(255,253,247,.97);border-radius:14px;padding:12px 16px;box-shadow:0 6px 24px rgba(0,0,0,.3);z-index:60;text-align:center;max-width:90vw}
.m15-partyhud{position:absolute;left:12px;top:190px;background:rgba(255,253,247,.9);border-radius:12px;padding:6px 10px;font-size:12px;font-weight:700;box-shadow:0 3px 10px rgba(0,0,0,.2);min-width:150px;max-width:230px;pointer-events:auto}
.m15-ph-head{font-size:12px;margin-bottom:2px}
.m15-ph-row{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:1px 0}
.m15-ph-dist{opacity:.7;font-weight:600}
.m15-card{text-align:left;display:flex;flex-direction:column}
.m15-card-ico{font-size:26px;line-height:1.1}
.m15-diag{position:fixed;left:10px;bottom:70px;z-index:70;background:rgba(20,16,46,.88);color:#cfe0ff;font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;padding:8px 12px;border-radius:10px;max-width:min(560px,92vw);pointer-events:none}
.m15-minimap{position:absolute;right:12px;top:64px;width:150px;height:150px;border-radius:16px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.3);border:3px solid rgba(255,253,247,.95);background:#8fce7a}
.m15-minimap canvas{width:150px;height:150px;display:block;cursor:pointer}
.m15-mm-label{position:absolute;left:0;right:0;bottom:0;background:rgba(43,35,80,.7);color:#fff;font-size:10px;font-weight:800;text-align:center;padding:1px 2px;pointer-events:none}
.m15-wpchip{position:absolute;top:12px;left:50%;transform:translateX(-50%);cursor:pointer;white-space:nowrap}
.m15-arrow{display:inline-block;transition:transform .15s;font-size:16px}
.m15-bar{height:10px;border-radius:6px;background:#ece7fa;overflow:hidden}
.m15-bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--leaf),var(--sky))}
.m15-grid{display:grid;gap:3px}
.m15-cell{border-radius:6px;border:2px solid #e3ddf5;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;font-size:18px;min-height:30px}
.m15-cell.on{background:#efeafd;border-color:var(--purp)}
.m15-kbd{display:inline-block;border:2px solid #cfc6ee;border-bottom-width:4px;border-radius:7px;padding:0 6px;font-weight:900;font-size:12px;background:#fff}
.m15-hudbtns{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.m15-hudbtns button{width:54px;height:54px;border-radius:16px;font-size:24px;background:rgba(255,253,247,.94);box-shadow:0 3px 10px rgba(0,0,0,.25)}
.m15-flybar{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:rgba(20,16,46,.82);color:#fff;border-radius:14px;padding:6px 14px;font-weight:800;font-size:13px;display:flex;gap:12px;align-items:center;pointer-events:none}
.m15-flybar .m15-bat{width:90px;height:9px;border-radius:5px;background:rgba(255,255,255,.2);overflow:hidden}
.m15-flybar .m15-bat>i{display:block;height:100%;background:#7dfcb1}
@media (max-width:700px){.m15-minimap{width:110px;height:110px;top:60px}.m15-minimap canvas{width:110px;height:110px}.m15-partyhud{top:auto;bottom:150px}}