/* hitagi.fun — портал: шлюз между зонами. Только две плитки зон,
   статус и профиль. Стиль карточек — общий каркас theme.css. */

.portal { max-width: 900px; }

/* --- плитки зон --- */
.zones { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.zone { display: flex; flex-direction: column; gap: 0; padding: 16px 18px 18px;
  background: var(--panel); border: 1px solid var(--line); color: inherit;
  cursor: pointer; transition: background var(--speed) linear,
    border-color var(--speed) linear, transform var(--speed) steps(2); }
.zone:hover { background: var(--panel-2); border-color: var(--accent);
  transform: translateY(-2px); }
.zone-head { display: flex; align-items: center; gap: 10px; }
.zone-idx { font: 700 10px/1 var(--head); letter-spacing: .22em; color: var(--fg-mute); }
.zone-head .badge { margin-left: auto; }
.zone-title { margin: 12px 0 8px; font: 700 21px/1.15 var(--head);
  letter-spacing: .06em; text-transform: uppercase; color: var(--fg); }
.zone-desc { margin: 0 0 14px; font-size: 12.5px; line-height: 1.7;
  color: var(--fg-dim); letter-spacing: .02em; }
.zone-feats { list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }
.zone-feats li { position: relative; padding-left: 15px; font-size: 11.5px;
  line-height: 1.55; color: var(--fg-mute); letter-spacing: .02em; }
.zone-feats li::before { content: "▸"; position: absolute; left: 0; top: 0;
  color: var(--accent); }
.zone-go { margin-top: auto; display: inline-flex; align-items: center; gap: 9px;
  align-self: flex-start; padding: 9px 14px; border: 1px solid var(--accent);
  color: var(--accent); font: 700 10px/1 var(--head); letter-spacing: .18em;
  text-transform: uppercase; transition: background var(--speed) linear,
    color var(--speed) linear; }
.zone:hover .zone-go { background: var(--accent); color: var(--bg); }
.zone-arrow { font-size: 13px; letter-spacing: 0; }

/* зона на обслуживании — гасим и убираем переход */
.zone.off { opacity: .55; cursor: default; pointer-events: none; }
.zone.off:hover { transform: none; background: var(--panel); border-color: var(--line); }
.zone.off .zone-go { border-color: var(--line); color: var(--fg-mute); }

/* гость: вместо «ОТКРЫТЬ» — вход в аккаунт */
.zone.locked .zone-go { border-color: var(--warn); color: var(--warn); }
.zone.locked:hover .zone-go { background: var(--warn); color: var(--bg); }

@media (max-width: 640px) {
  /* шапка: бренд + профиль в одну строку, «СОСТОЯНИЕ» — под ними */
  .portal header.top { display: grid; grid-template-columns: auto 1fr;
    gap: 10px 12px; align-items: center; }
  .portal header.top .brand { grid-column: 1; grid-row: 1; }
  .portal header.top .user { grid-column: 2; grid-row: 1; justify-self: end;
    margin-left: 0; }
  .portal header.top > .btn { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .zone { padding: 14px 14px 16px; }
  .zone-title { font-size: 18px; }
  .zone-go { width: 100%; justify-content: center; min-height: 44px; }
}