:root{
  color-scheme:dark;
  --bg:#071521;
  --bar:#0b1c2c;
  --panel:#10283b;
  --panel-2:#17364b;
  --line:#31536b;
  --text:#f4efe2;
  --muted:#a9bdcb;
  --gold:#e2bd67;
  --teal:#69c7b8;
  --danger:#dc7581;
  font-family:"Segoe UI",Arial,sans-serif;
}

*{ box-sizing:border-box; }
html,body{ width:100%; height:100%; margin:0; overflow:hidden; background:var(--bg); color:var(--text); }
button,a{ font:inherit; }
button{ color:inherit; }

.site-bar{
  position:relative;
  z-index:20;
  height:58px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 14px;
  border-bottom:1px solid var(--line);
  background:var(--bar);
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}

.brand{
  min-width:218px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  border:0;
  background:none;
  text-align:left;
  cursor:pointer;
}
.brand img{ width:38px; height:38px; border-radius:6px; object-fit:cover; border:1px solid #5d7380; }
.brand span{ min-width:0; display:flex; flex-direction:column; }
.brand strong{ font-family:Georgia,serif; font-size:18px; line-height:1.05; color:#fff4d7; }
.brand small{ margin-top:3px; font-size:10px; color:var(--muted); }

.site-tabs{ align-self:stretch; display:flex; align-items:stretch; gap:2px; }
.site-tab{
  position:relative;
  min-width:92px;
  padding:0 13px;
  border:0;
  background:transparent;
  color:#b7c8d3;
  cursor:pointer;
}
.site-tab::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:0;
  height:3px;
  background:transparent;
}
.site-tab:hover{ color:#fff; background:rgba(255,255,255,.04); }
.site-tab.active{ color:#fff0c7; }
.site-tab.active::after{ background:var(--gold); }

.site-actions{ margin-left:auto; display:flex; align-items:center; gap:7px; }
.progress-badge{
  min-width:112px;
  padding:7px 10px;
  border:1px solid #7e6735;
  border-radius:4px;
  background:#2b3540;
  color:#f1d78f;
  font-size:11px;
  font-weight:700;
  text-align:center;
}
.icon-button{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #3b5a70;
  border-radius:4px;
  background:#132c40;
  color:#d9e7ee;
  cursor:pointer;
  font-size:17px;
}
.icon-button:hover{ border-color:var(--gold); color:#fff2ca; }

.site-main{ height:calc(100% - 58px); }
.version-notice{
  position:absolute;
  z-index:15;
  top:68px;
  right:16px;
  width:min(460px,calc(100% - 32px));
  display:grid;
  grid-template-columns:1fr auto 28px;
  align-items:center;
  gap:12px;
  padding:12px 12px 12px 15px;
  border:1px solid #9b8149;
  border-radius:6px;
  background:#182d3d;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
.version-notice.hidden{ display:none; }
.version-notice strong,.version-notice span{ display:block; }
.version-notice strong{ color:#ffe7a5; font-size:13px; }
.version-notice span{ margin-top:3px; color:var(--muted); font-size:11px; line-height:1.35; }
.version-notes{ margin:7px 0 0; padding-left:17px; color:#d6e0e2; font-size:11px; line-height:1.45; }
.version-notes:empty{ display:none; }
.version-notice a{ color:#ffe6a8; font-size:12px; white-space:nowrap; }
.version-notice button{ width:28px; height:28px; padding:0; border:1px solid #557184; border-radius:4px; background:#102333; color:#d8e5e8; cursor:pointer; font-size:18px; line-height:1; }
.version-notice button:hover{ border-color:var(--gold); color:#fff; }
.site-view{ display:none; width:100%; height:100%; }
.site-view.active{ display:block; }
.play-view{ position:relative; background:#06111b; }
.play-view iframe{ width:100%; height:100%; display:block; border:0; background:#091725; }
.game-loading{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#0a1b2a;
  transition:opacity .25s,visibility .25s;
}
.game-loading.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.game-loading img{ width:76px; height:76px; object-fit:cover; border:1px solid #5a7486; border-radius:8px; }
.game-loading strong{ margin-top:8px; font-family:Georgia,serif; font-size:23px; color:#fff0c7; }
.game-loading span{ color:var(--muted); font-size:12px; }

.content-view{ overflow:auto; background:#091925; }
.content-shell{ width:min(1180px,calc(100% - 36px)); margin:0 auto; padding:34px 0 54px; }
.narrow-shell{ width:min(900px,calc(100% - 36px)); }
.eyebrow{ display:block; margin-bottom:7px; color:var(--teal); font-size:11px; font-weight:800; text-transform:uppercase; }
h1,h2,p{ margin-top:0; }
h1{ margin-bottom:10px; font-family:Georgia,serif; font-size:36px; color:#fff0cf; }
h2{ margin-bottom:10px; font-size:17px; color:#f2d995; }
p{ color:var(--muted); line-height:1.6; }
.lead{ max-width:720px; font-size:16px; }

.update-heading{ display:grid; grid-template-columns:1fr 240px; gap:28px; align-items:end; margin-bottom:24px; }
.update-heading p{ max-width:720px; margin-bottom:0; }
.progress-panel{
  padding:16px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--panel);
}
.progress-panel strong{ display:block; font-size:32px; color:#f0cc74; }
.progress-panel span{ color:var(--muted); font-size:11px; }
.progress-panel small{ display:block; margin-top:8px; color:#d6c181; font-size:10px; }
.progress-track{ height:7px; margin-top:12px; overflow:hidden; border-radius:4px; background:#07131e; }
.progress-track i{ display:block; width:100%; height:100%; background:linear-gradient(90deg,var(--teal),var(--gold)); }
.update-preview{ width:100%; display:block; border:1px solid #496274; border-radius:6px; background:#071521; }
.update-columns{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:24px; }
  .update-columns section,.about-grid section{
  padding:18px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--panel);
}
.update-columns ul{ margin:0; padding-left:20px; color:#c8d5dc; line-height:1.75; }

.download-list{ display:grid; gap:10px; margin-top:28px; }
.download-warning{ margin:18px 0 -12px; color:#ffcf75; font-size:12px; font-weight:700; }
.download-row{
  display:grid;
  grid-template-columns:48px 1fr auto;
  align-items:center;
  gap:16px;
  min-height:88px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--panel);
}
.download-row h2{ margin-bottom:4px; color:#edf1ee; }
.download-row p{ margin:0; font-size:12px; }
.download-row a,.download-row button,.text-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 14px;
  border:1px solid #9b8149;
  border-radius:4px;
  background:#263744;
  color:#ffe6a8;
  text-decoration:none;
  cursor:pointer;
}
.download-row a:hover,.download-row button:hover,.text-link:hover{ background:#334958; border-color:#d4b96f; }
.platform-mark{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:6px;
  color:#071521;
  font-size:18px;
  font-weight:900;
}
.platform-mark.android{ background:#7fd0a8; }
.platform-mark.windows{ background:#76bce7; }
.platform-mark.browser{ background:#e0bf70; }
.platform-mark.telegram{ background:#79c8e8; }
.download-row.upcoming{ border-color:#78663d; }
.download-row.telegram-download{ border-color:#43758e; background:#102b3e; }

.about-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px; }
.about-grid p{ font-size:13px; }
.text-link{ margin-top:4px; }
.hidden{ display:none !important; }

.account-gate{
  display:grid;
  grid-template-columns:52px 1fr auto;
  align-items:center;
  gap:16px;
  margin-top:28px;
  padding:18px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#0d2232;
}
.account-g-mark{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid #7790a3;
  border-radius:50%;
  background:#f4f6f8;
  color:#3668b2;
  font-size:22px;
  font-weight:800;
}
.account-gate h2{ margin-bottom:4px; color:#edf1ee; }
.account-gate p{ margin:0; font-size:12px; }
.account-primary-btn,.account-secondary-btn,.account-icon-btn{
  min-height:38px;
  padding:0 14px;
  border:1px solid #8e7744;
  border-radius:4px;
  background:#263b4a;
  color:#ffe4a3;
  cursor:pointer;
  font-weight:700;
}
.account-primary-btn:hover,.account-secondary-btn:hover,.account-icon-btn:hover{
  border-color:#d9ba6e;
  background:#324d60;
}
.account-dashboard{ margin-top:28px; }
.account-profile{
  display:grid;
  grid-template-columns:52px 1fr auto auto;
  align-items:center;
  gap:12px;
  padding:14px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.account-profile img{
  width:48px;
  height:48px;
  border:1px solid #607b8d;
  border-radius:50%;
  object-fit:cover;
}
.account-profile-main{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.account-profile-main strong{ color:#f5edd9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-profile-main span{ color:#b6c6d0; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-profile-main small{ color:var(--teal); font-size:10px; }
.account-icon-btn{ width:38px; padding:0; font-size:18px; }
.account-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--line);
}
.account-summary div{ padding:17px 12px; border-right:1px solid var(--line); }
.account-summary div:last-child{ border-right:0; }
.account-summary strong{ display:block; color:#f0ce79; font-size:22px; }
.account-summary span{ display:block; margin-top:3px; color:var(--muted); font-size:10px; }
.account-save-list{ display:grid; gap:1px; margin-top:18px; background:var(--line); border:1px solid var(--line); }
.account-save-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  padding:14px;
  background:var(--panel);
}
.account-save-main{ min-width:0; }
.account-save-title{ color:#edf1ee; font-size:14px; font-weight:800; }
.account-save-meta{ margin-top:4px; color:var(--muted); font-size:10px; line-height:1.55; }
.account-save-values{ text-align:right; white-space:nowrap; }
.account-save-values strong{ display:block; color:#e7c978; font-size:14px; }
.account-save-values span{ display:block; margin-top:4px; color:#8dbdaa; font-size:9px; font-weight:700; }
.account-empty{ padding:28px 16px; background:var(--panel); color:var(--muted); text-align:center; }
.account-message{ min-height:20px; margin-top:12px; color:var(--teal); font-size:12px; text-align:center; }
.account-message.error{ color:var(--danger); }
.mobile-tabs{ display:none; }

@media (max-width:900px){
  .site-tabs{ display:none; }
  .progress-badge{ display:none; }
  .brand{ min-width:0; }
  .brand small{ display:none; }
  .site-actions{ gap:5px; }
  .site-main{ height:calc(100% - 58px - 58px); }
  .mobile-tabs{
    position:fixed;
    z-index:30;
    left:0;
    right:0;
    bottom:0;
    height:58px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    border-top:1px solid var(--line);
    background:#0b1c2c;
  }
  .mobile-tabs button{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    border:0;
    background:transparent;
    color:#93aab8;
    cursor:pointer;
  }
  .mobile-tabs button.active{ color:#f0d589; background:#132a3b; }
  .mobile-tabs b{ font-size:13px; }
  .mobile-tabs span{ font-size:9px; }
  .update-heading{ grid-template-columns:1fr; }
  .progress-panel{ max-width:280px; }
  .update-columns,.about-grid{ grid-template-columns:1fr; }
  .account-profile{ grid-template-columns:46px 1fr auto; }
  .account-profile .account-secondary-btn{ grid-column:1 / -1; width:100%; }
}

@media (max-width:560px){
  .site-bar{ padding:0 8px; }
  .brand img{ width:34px; height:34px; }
  .brand strong{ font-size:15px; }
  .site-actions .icon-button:first-of-type{ display:none; }
  .content-shell,.narrow-shell{ width:calc(100% - 22px); padding-top:22px; }
  h1{ font-size:28px; }
  .download-row{ grid-template-columns:42px 1fr; }
  .download-row a,.download-row button{ grid-column:1 / -1; width:100%; }
  .account-gate{ grid-template-columns:46px 1fr; }
  .account-gate .account-primary-btn{ grid-column:1 / -1; width:100%; }
  .account-summary strong{ font-size:17px; }
  .account-save-row{ grid-template-columns:1fr; }
  .account-save-values{ text-align:left; }
}