/* Stellar Dominion — клиент под Galaxy Empire.
   ХРОМ:
   • Тянущиеся/повторяющиеся элементы (панели, баннеры, ячейки, поля, навигация, ресбар) —
     ЧИСТЫЙ CSS: clip-path срезанные углы + градиент + неоновое свечение (drop-shadow). БЕЗ tiling PNG.
   • PNG-рамки (assets/ui/frames) — ТОЛЬКО где элемент ≈ размера рамки и не тянется: кнопки, портрет.
   Иерархия: тяжёлый декор — на ключевых акцентах (баннер имени), ячейки — лёгкие. Только portrait. */

:root{
  --bg:#060c15; --bg2:#0a1320; --steel:#12243a; --steel-edge:#2c4f72;
  --neon-orange:#ff9a3c; --neon-teal:#36e3df;
  --gold:#ffd27d; --gold-strong:#f5b441;
  --text:#dceaf4; --muted:#84a6bd; --ok:#5fe0a4; --bad:#ff6b6b;
  --metal:#cfd6dd; --crystal:#7fd4ff; --gas:#7df0b6; --energy:#ffd166;
  /* PNG-рамки только для нерастягиваемых элементов (?v=2 — после вырезки фона) */
  --f-btn:url('/assets/ui/frames/btn_normal.png?v=2');
  --f-btn-down:url('/assets/ui/frames/btn_pressed.png?v=2');
  --f-portrait:url('/assets/ui/frames/portrait_frame.png?v=2');
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Segoe UI',system-ui,Roboto,Arial,sans-serif;color:var(--text);
  background:#04080d url('/assets/backgrounds/bg_space.png') center/cover fixed no-repeat;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.hidden{display:none !important}
img{user-select:none;-webkit-user-drag:none}

/* ── телефон-сцена ── */
#scene{position:relative;width:100%;max-width:480px;height:100%;max-height:1040px;
  overflow:hidden;background:linear-gradient(180deg,var(--bg),var(--bg2))}
#stars{position:absolute;inset:0;z-index:0;pointer-events:none}
#game{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column}
#resbar{flex:0 0 auto;z-index:5}
#screen{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:14px 12px 18px;
  display:flex;flex-direction:column;gap:14px;-webkit-overflow-scrolling:touch}
#nav{flex:0 0 auto;z-index:5}

/* ════════════ CSS-РАМКИ со срезанными углами ════════════ */
/* Приём: фон элемента = цвет канта, clip-path octagon; ::before (inset, тот же clip-path,
   тёмная заливка, z-index:-1) оставляет кант полоской по краю; неон — filter:drop-shadow
   (следует форме clip-path). Контент в тёмном центре поверх ::before. */

/* Панель — тёмный щит, тонкий стальной кант. */
.panel{
  --cut:12px;--bw:2px;--edgecol:#37618b;--glow:rgba(54,227,223,.16);
  position:relative;z-index:0;background:var(--edgecol);padding:15px 18px;color:var(--text);
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
  filter:drop-shadow(0 0 5px var(--glow));
}
.panel::before{content:"";position:absolute;inset:2px;z-index:-1;
  background:linear-gradient(160deg,#112740,#0a1726);
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),
    calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);}

/* Баннер имени — ключевой акцент: золото-оранжевый кант, золотой текст по центру. */
.banner{
  position:relative;z-index:0;--cut:16px;padding:11px 30px;min-height:58px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:linear-gradient(150deg,var(--neon-orange),#9c5a1e 60%,#2c4f72);
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% 50%,calc(100% - var(--cut)) 100%,
    var(--cut) 100%,0 50%);
  filter:drop-shadow(0 0 7px rgba(255,154,60,.30));
}
.banner::before{content:"";position:absolute;inset:2px;z-index:-1;
  background:linear-gradient(160deg,#15263b,#0b1828);
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%);}
.banner h2{font-size:20px;color:var(--gold);text-shadow:0 0 10px rgba(245,180,65,.55);letter-spacing:1px}
.banner small{color:var(--muted);font-size:11px;letter-spacing:.5px}

/* Золотой заголовок раздела (без рамки — «воздух») */
.title-gold{color:var(--gold);font-size:16px;font-weight:800;text-align:center;
  text-shadow:0 0 8px rgba(245,180,65,.4);letter-spacing:.6px;margin:2px 0}

/* ════════════ ЛЁГКИЕ ЯЧЕЙКИ (CSS, тонкий кант) ════════════ */
.tile{
  position:relative;z-index:0;--cut:9px;background:#2c4f72;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.tile::before{content:"";position:absolute;inset:1.5px;z-index:-1;
  background:linear-gradient(180deg,#0f2236,#0a1626);
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),
    calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);}
.tile-img{display:flex;align-items:center;justify-content:center;padding:10px 10px 6px;min-height:100px;
  background:radial-gradient(ellipse at 50% 40%,rgba(54,227,223,.12),transparent 70%)}
.tile-img img{max-width:100%;max-height:90px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.tile-body{padding:4px 10px 11px;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.tile-body .nm{color:var(--gold);font-weight:700;font-size:13px;line-height:1.15}
.tile-body .sub{color:var(--muted);font-size:11px}
.tile-lvl{color:var(--neon-teal);font-size:11px;font-weight:700}

/* ════════════ РЕСУРС-БАР (CSS) ════════════ */
.resbar{
  position:relative;z-index:0;--cut:0px;background:#2c4f72;
  display:flex;gap:6px;padding:7px 14px;align-items:center;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  border-bottom:1px solid rgba(54,227,223,.25);
}
.resbar::before{content:"";position:absolute;inset:0 0 2px 0;z-index:-1;
  background:linear-gradient(180deg,#13273e,#0c1a2b)}
.resbar .res{flex:1 1 0;display:flex;align-items:center;gap:5px;min-width:0}
.resbar .res img{width:22px;height:22px;flex:0 0 auto}
.resbar .res .v{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.resbar .res .v b{font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resbar .res .v small{font-size:9px;color:var(--muted)}
.resbar .res .v small.plus{color:var(--ok)}
.resbar .res.full .v b{color:var(--bad)}

/* ════════════ НАВИГАЦИЯ (CSS) ════════════ */
.nav{
  position:relative;z-index:0;display:flex;gap:2px;padding:7px 8px;
  background:#0c1a2b;border-top:1px solid rgba(54,227,223,.25);
  box-shadow:0 -4px 14px rgba(0,0,0,.4);
}
.nav button{flex:1 1 0;background:transparent;border:0;cursor:pointer;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px 1px;font-size:9.5px;min-width:0}
.nav button img{width:25px;height:25px;opacity:.78;transition:opacity .15s,filter .15s}
.nav button.active{color:var(--neon-teal)}
.nav button.active img{opacity:1;filter:drop-shadow(0 0 6px rgba(54,227,223,.8))}

/* ════════════ PNG-КНОПКА (не тянется по-сегментно — картинка уместна) ════════════ */
/* Срез border-image = реальные границы плоской бирюзовой зоны в btn_normal.png
   (768×320: борта 211/203 px по горизонтали — асимметричны, отсюда был «уезд»
   текста; верх/низ 64 px сохраняют объём ободка). Формат: top right bottom left.
   Так fill-зона ложится РОВНО на плоский центр, а content-box центрируется по нему. */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-width:14px 24px;border-style:solid;border-color:transparent;
  border-image:var(--f-btn) 64 203 64 211 fill / 14px 24px / 0 stretch;
  min-height:50px;padding:0 12px;cursor:pointer;
  font-weight:800;font-size:15px;color:#06222b;text-shadow:0 1px 0 rgba(255,255,255,.25);
  background:transparent;letter-spacing:.3px;line-height:1;
}
.btn:active{border-image:var(--f-btn-down) 64 203 64 211 fill / 14px 24px / 0 stretch;transform:translateY(1px)}
.btn[disabled]{filter:grayscale(.7) brightness(.7);cursor:default}
.btn-wide{width:100%}
.btn-sm{min-height:40px;font-size:13px;border-width:11px 20px;
  border-image:var(--f-btn) 64 203 64 211 fill / 11px 20px / 0 stretch}
.btn-sm:active{border-image:var(--f-btn-down) 64 203 64 211 fill / 11px 20px / 0 stretch}
/* Иконка вынесена из потока влево, чтобы НЕ смещать подпись: текст центрируется
   по плоской зоне сам по себе, независимо от наличия/ширины иконки. */
.btn img{position:absolute;left:24px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;flex:0 0 auto}

/* ════════════ PNG-ПОРТРЕТ (квадрат ≈ рамке, не тянется) ════════════ */
.portrait{border:13px solid transparent;border-image:var(--f-portrait) 120 fill / 13px / 0 stretch;
  width:88px;height:88px;flex:0 0 auto;overflow:hidden;padding:3px}
.portrait img{width:100%;height:100%;object-fit:cover;border-radius:4px}

/* ════════════ ВХОД ════════════ */
.auth{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;padding:24px}
.auth-logo{font-size:30px;font-weight:900;letter-spacing:3px;color:var(--gold);
  text-shadow:0 0 18px rgba(245,180,65,.5)}
.auth-logo span{display:block;font-size:14px;letter-spacing:8px;color:var(--neon-teal);text-align:center}
.auth-box{width:100%;max-width:330px;padding:22px 20px;display:flex;flex-direction:column;gap:12px}
.auth-box h2{text-align:center;color:var(--gold);font-size:18px;margin-bottom:4px}
/* поле ввода — лёгкая CSS-рамка со срезом, под размер инпута */
.auth-box input{background:#081320;color:var(--text);font-size:15px;padding:12px 14px;border:0;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  box-shadow:inset 0 0 0 1.5px var(--steel-edge)}
.auth-box input::placeholder{color:var(--muted)}
.auth-box input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--neon-teal),0 0 10px rgba(54,227,223,.3)}
.auth-error{color:var(--bad);font-size:13px;min-height:16px;text-align:center}

/* ════════════ ОБЩЕЕ ════════════ */
.hint{color:var(--muted);font-size:13px;text-align:center;padding:10px}
.row{display:flex;gap:12px;align-items:center}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#screen::-webkit-scrollbar{width:5px}
#screen::-webkit-scrollbar-thumb{background:var(--steel-edge);border-radius:3px}