/* ==========================================================================
   UNION POKER · UI
   Дизайн-система клуба. Один файл для приложения, кассы, панели и экранов ТВ.
   Подключение:  <link rel="stylesheet" href="union-poker-ui.css">
   Шрифты:       <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Forum&family=Manrope:wght@500;600;700;800&display=swap">
   ========================================================================== */

:root{
  color-scheme: dark;

  /* --- цвета --- */
  --up-bg:        #0A0907;   /* фон приложения          */
  --up-surface:   #15120D;   /* карточка                 */
  --up-surface-2: #1B1710;   /* вложенный блок           */
  --up-line:      #2B2417;   /* границы                  */
  --up-ink:       #F4ECD8;   /* основной текст           */
  --up-muted:     #9C9179;   /* второстепенный текст     */

  --up-gold-1:    #F5DC93;   /* светлое золото           */
  --up-gold-2:    #D4AF5A;   /* основное золото          */
  --up-gold-3:    #A8791F;   /* тёмное золото            */
  --up-gold-text: #F0D488;   /* золото для текста        */
  --up-gold-dim:  #B79A55;   /* приглушённое золото      */
  --up-gold: linear-gradient(135deg, #F5DC93 0%, #D4AF5A 48%, #A8791F 100%);

  --up-ok:    #6FD9A2;  --up-ok-bg:   rgba(111,217,162,.14);
  --up-warn:  #E9B466;  --up-warn-bg: rgba(233,180,102,.14);
  --up-bad:   #E0687A;  --up-bad-bg:  rgba(224,104,122,.14);
  --up-info-bg: rgba(212,175,90,.13);

  /* --- шрифты --- */
  --up-font-display: "Forum", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --up-font-ui: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* --- размеры --- */
  --up-r-sm: 12px;  --up-r-md: 16px;  --up-r-lg: 20px;  --up-r-xl: 28px;  --up-r-pill: 999px;
  --up-gap: 12px;
  --up-shadow: 0 10px 26px rgba(0,0,0,.45);
  --up-glow: 0 0 26px rgba(212,175,90,.22);
}

/* ---------- основа ---------- */
.up, .up-page{
  background: var(--up-bg);
  color: var(--up-ink);
  font-family: var(--up-font-ui);
  font-size: 15px;
  line-height: 1.5;
}
.up-page{ max-width: 560px; margin: 0 auto; padding: 0 14px; }
.up *, .up-page *{ box-sizing: border-box; }

.up-display{ font-family: var(--up-font-display); font-weight: 400; letter-spacing: .01em; }
.up-h1{ font: 400 28px/1.1 var(--up-font-display); margin: 0; }
.up-h2{ font: 400 22px/1.15 var(--up-font-display); margin: 0; }
.up-label{
  font: 800 11px var(--up-font-ui); letter-spacing: .16em;
  text-transform: uppercase; color: var(--up-gold-dim);
}
.up-muted{ color: var(--up-muted); }
.up-gold{
  background: var(--up-gold); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--up-gold-text);
}
.up-num{ font-variant-numeric: tabular-nums; }

/* ---------- шапка ---------- */
.up-header{ display: flex; align-items: center; gap: 12px; padding: 14px 0 10px; }
.up-logo{
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  border: 1.5px solid rgba(212,175,90,.55); background: var(--up-surface) center/cover no-repeat;
  box-shadow: var(--up-glow);
}
.up-wordmark{ display: flex; flex-direction: column; gap: 5px; line-height: 1; }
.up-wordmark b{
  font: 400 19px var(--up-font-display); letter-spacing: .24em;
  background: var(--up-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.up-wordmark small{
  font: 800 8px var(--up-font-ui); letter-spacing: .62em; color: var(--up-gold-dim); padding-left: 2px;
}

/* ---------- карточки ---------- */
.up-card{
  background: var(--up-surface); border: 1.5px solid var(--up-line);
  border-radius: var(--up-r-lg); padding: 16px 18px;
}
.up-card--accent{
  background: linear-gradient(150deg, #241D0F, #12100A);
  border-color: rgba(212,175,90,.5);
}
.up-card--flat{ background: var(--up-surface-2); border-color: transparent; }

.up-tile{
  background: var(--up-surface); border: 1px solid var(--up-line);
  border-radius: var(--up-r-md); padding: 12px 10px; text-align: center;
}
.up-tile b{ display: block; font: 400 26px/1.1 var(--up-font-display); color: var(--up-gold-text); }
.up-tile small{ display: block; font: 700 10px var(--up-font-ui); letter-spacing: .06em; color: var(--up-muted); margin-top: 4px; }

/* ---------- строка списка ---------- */
.up-row{
  display: flex; align-items: center; gap: 12px;
  background: var(--up-surface); border: 1.5px solid var(--up-line);
  border-radius: var(--up-r-lg); padding: 11px 14px; margin-bottom: 9px;
}
.up-row__body{ flex: 1; min-width: 0; }
.up-row__title{ font-weight: 700; font-size: 15px; }
.up-row__sub{ color: var(--up-muted); font-size: 13px; margin-top: 2px; }
.up-row--dim{ opacity: .45; }

/* ---------- кнопки ---------- */
.up-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 800 15px var(--up-font-ui); color: var(--up-ink);
  background: #221D11; border: 1.5px solid var(--up-line);
  border-radius: var(--up-r-md); padding: 12px 18px; cursor: pointer;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.up-btn:hover, .up-btn:focus-visible{ border-color: var(--up-gold-2); outline: none; }
.up-btn:active{ transform: scale(.985); }
.up-btn--gold{ background: var(--up-gold); color: #1A1206; border-color: transparent; box-shadow: 0 8px 20px rgba(212,175,90,.2); }
.up-btn--soft{ background: var(--up-info-bg); color: var(--up-gold-text); border-color: transparent; }
.up-btn--ghost{ background: transparent; }
.up-btn--danger{ background: var(--up-bad-bg); color: var(--up-bad); border-color: rgba(224,104,122,.3); }
.up-btn--block{ display: flex; width: 100%; }
.up-btn--sm{ padding: 9px 14px; font-size: 13px; border-radius: var(--up-r-sm); }
.up-btn[disabled], .up-btn--disabled{ opacity: .45; pointer-events: none; }

/* ---------- метки состояния ---------- */
.up-chip{
  display: inline-flex; align-items: center; gap: 5px;
  font: 800 11px var(--up-font-ui); padding: 4px 10px; border-radius: var(--up-r-pill);
  background: var(--up-info-bg); color: var(--up-gold-text); white-space: nowrap;
}
.up-chip--ok{ background: var(--up-ok-bg); color: var(--up-ok); }
.up-chip--warn{ background: var(--up-warn-bg); color: var(--up-warn); }
.up-chip--bad{ background: var(--up-bad-bg); color: var(--up-bad); }

/* ---------- аватар ---------- */
.up-avatar{
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font: 800 13px var(--up-font-ui); color: #1A1206; background: var(--up-gold);
}
.up-avatar--lg{ width: 56px; height: 56px; font-size: 18px; }

/* ---------- поля ввода ---------- */
.up-field{ margin-bottom: 12px; }
.up-field > label{ display: block; margin-bottom: 6px; font: 800 11px var(--up-font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--up-gold-dim); }
.up-input, .up-textarea{
  width: 100%; background: var(--up-surface); color: var(--up-ink);
  border: 1.5px solid var(--up-line); border-radius: var(--up-r-md);
  padding: 12px 14px; font: 600 16px var(--up-font-ui);
}
.up-input:focus, .up-textarea:focus{ outline: none; border-color: var(--up-gold-2); }
.up-textarea{ min-height: 120px; resize: vertical; line-height: 1.6; }

/* ---------- нижняя навигация ---------- */
.up-tabbar{
  position: fixed; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  height: 60px; border-radius: var(--up-r-pill); background: #1A160E;
  border: 1px solid rgba(212,175,90,.24); box-shadow: var(--up-shadow);
  display: flex; align-items: center; justify-content: space-around; padding: 0 6px; z-index: 10;
}
.up-tab{
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 44px; border-radius: var(--up-r-pill);
  color: #8F8266; text-decoration: none;
}
.up-tab--active{ background: var(--up-gold); color: #1A1206; padding: 0 14px; font: 800 13px var(--up-font-ui); }

/* ---------- шторка снизу ---------- */
.up-sheet{ position: fixed; inset: 0; background: rgba(5,4,3,.92); display: none; align-items: flex-end; z-index: 20; }
.up-sheet--open{ display: flex; }
.up-sheet__box{
  width: 100%; max-height: 92vh; overflow: auto; background: #0E0C08;
  border-top: 1.5px solid rgba(212,175,90,.4); border-radius: var(--up-r-xl) var(--up-r-xl) 0 0;
  padding: 16px 16px calc(22px + env(safe-area-inset-bottom, 0px));
}
.up-sheet__grab{ width: 40px; height: 5px; border-radius: 3px; background: var(--up-line); margin: 0 auto 14px; }

/* ---------- афиша турнира ---------- */
.up-poster{
  position: relative; overflow: hidden; container-type: inline-size;
  aspect-ratio: 4/5; border-radius: var(--up-r-xl); color: var(--up-ink);
  background: radial-gradient(90% 70% at 88% 10%, rgba(212,175,90,.40) 0%, transparent 60%),
              linear-gradient(165deg, #221A09 0%, #0B0A08 64%);
}
.up-poster::before{
  content: ""; position: absolute; inset: 2.4cqw; border-radius: 5cqw;
  border: .3cqw solid rgba(232,197,110,.5); pointer-events: none;
}
.up-poster > *{ position: relative; z-index: 1; }
.up-poster__tag{
  position: absolute; left: 6cqw; top: 6cqw; font: 800 3.6cqw/1 var(--up-font-ui);
  padding: 2.1cqw 3.6cqw; border-radius: var(--up-r-pill);
  color: var(--up-gold-text); background: rgba(212,175,90,.14); border: 1px solid rgba(212,175,90,.42);
}
.up-poster__logo{
  position: absolute; right: 6cqw; top: 7cqw; font: 400 3.1cqw/1 var(--up-font-display);
  letter-spacing: .24em; color: #E8C56E;
}
.up-poster__title{
  position: absolute; left: 6cqw; bottom: 13.5cqw; max-width: 68cqw;
  font: 400 13cqw/1.02 var(--up-font-display);
  background: linear-gradient(180deg, #FCEBB4 0%, #DDB552 60%, #A87A20 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.up-poster__meta{ position: absolute; left: 6cqw; bottom: 6cqw; max-width: 88cqw;
  font: 700 3.7cqw/1.25 var(--up-font-ui); opacity: .9; }
.up-poster--long .up-poster__title{ font-size: 9.6cqw; bottom: 17cqw; max-width: 82cqw; }
.up-poster--xlong .up-poster__title{ font-size: 7.6cqw; bottom: 17.5cqw; max-width: 86cqw; }
.up-poster--green{ background: radial-gradient(100% 80% at 82% 16%, #14704F 0%, #0B3B2C 46%, #05130E 100%); }
.up-poster--wine{ background: radial-gradient(100% 80% at 86% 8%, rgba(226,112,120,.32), transparent 56%),
                              linear-gradient(160deg, #4A1322 0%, #1B0810 70%, #0B0508 100%); }

/* ---------- мелочи ---------- */
.up-divider{ height: 1px; background: var(--up-line); border: 0; margin: 16px 0; }
.up-stack{ display: grid; gap: var(--up-gap); }
.up-grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--up-gap); }
.up-grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.up-grid-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.up-section{ display: flex; align-items: baseline; justify-content: space-between; margin: 18px 2px 10px; }
.up-section b{ font: 400 20px var(--up-font-display); }
.up-section a{ font: 700 13px var(--up-font-ui); color: var(--up-gold-text); text-decoration: none; }
.up-empty{ text-align: center; color: var(--up-muted); font-size: 14px; line-height: 1.6; padding: 26px 10px; }
.up-toast{
  position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%);
  background: var(--up-gold); color: #1A1206; font: 800 14px var(--up-font-ui);
  padding: 12px 20px; border-radius: var(--up-r-md); z-index: 40;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.up-toast--on{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .up-btn:active{ transform: none; }
  .up-toast{ transition: none; }
}