/* miniapp/base/panels.css — плашки-кнопки верхней панели игры и их карточки (base/panels.js) */

/* плашка-кнопка: выглядит как обычная плашка, но нажимается */
.g-pill-btn{position:relative;font:inherit;color:#fff;cursor:pointer;text-align:left;
  transition:transform .16s cubic-bezier(.2,.8,.2,1),background .2s ease}
.g-pill-btn:hover{background:var(--g-glass-hi)}
.g-pill-btn:active{transform:scale(.96)}
.g-pill-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* «+» — есть что сделать (день ещё не засчитан) */
.g-pill-mark{position:absolute;top:-4px;right:-3px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
  font:700 12px/1 'Unbounded',system-ui,sans-serif;color:#fff;background:#fb8a12;
  box-shadow:0 0 0 2px rgba(26,23,19,.85),0 2px 6px rgba(214,98,0,.6)}

/* второе действие в карточке — спокойнее главного */
.g-card-alt{margin-top:8px;width:100%;min-height:48px;border-radius:14px;cursor:pointer;
  font:500 13.5px 'Unbounded',system-ui,sans-serif;color:var(--g-sheet-ink);background:rgba(var(--g-ink-rgb),.06);
  border:1px solid var(--g-sheet-line);transition:background .2s ease,transform .16s cubic-bezier(.2,.8,.2,1)}
.g-card-alt:hover{background:rgba(var(--g-ink-rgb),.1)}
.g-card-alt:active{transform:scale(.98)}
.g-card-alt:disabled,.g-card-go:disabled{opacity:.6;cursor:default}

/* заморозки серии */
.g-freeze{display:flex;align-items:center;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--g-sheet-line)}
.g-freeze>span{display:grid;opacity:.3;filter:grayscale(1)}   /* только ячейка заморозки, не плашка-иконка внутри */
.g-freeze>span.on{opacity:1;filter:none}
.g-freeze div{display:flex;flex-direction:column;margin-left:4px;min-width:0}
.g-freeze b{font-size:13px}
.g-freeze small{font-size:11.5px;line-height:1.4;color:var(--g-sheet-mut)}

/* просроченные дела в карточке здоровья */
.g-issues{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.g-issues div{font-size:13px;font-weight:500;line-height:1.4;padding:10px 12px;border-radius:12px;
  background:rgba(255,159,28,.12);border:1px solid rgba(214,120,0,.22)}

@media(prefers-reduced-motion:reduce){.g-pill-btn{transition:none}}

/* дела недели: кружок слева и список в карточке */
.g-quests{font:inherit;padding:0}
.g-quests.all{background:rgba(26,70,34,.62);border-color:rgba(143,211,106,.6)}
.g-quests.all b{color:#b9eb97}
.g-quests-list{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.g-quest{display:flex;gap:10px;align-items:flex-start}
.g-quest>b{width:22px;height:22px;flex:none;border-radius:7px;border:1.5px solid rgba(var(--g-ink-rgb),.25);background:var(--g-field);
  display:grid;place-items:center;font-size:13px;color:#fff}
.g-quest.done>b{background:#3f9e3a;border-color:#3f9e3a}
.g-quest>div{flex:1;min-width:0}
.g-quest span{display:block;font-size:13.5px;font-weight:600;line-height:1.35}
.g-quest.done span{opacity:.7}
.g-quest small{font-size:11.5px;color:var(--g-sheet-mut)}
.g-quest .g-bar{margin-top:4px;height:8px}

/* медаль месяца в карточке дел */
.g-medal{margin-top:14px;border-top:1px solid var(--g-sheet-line);padding-top:12px}
.g-medal-m{font-size:12.5px;font-weight:700;margin:6px 0 2px}
.g-medal-c{display:flex;gap:6px;align-items:baseline;font-size:12.5px;line-height:1.4;opacity:.75}
.g-medal-c.ok{opacity:1}
.g-medal-c b{width:14px;flex:none;color:#2f7a3a}
.g-medal small{display:block;margin-top:6px;font-size:11.5px;line-height:1.4;color:var(--g-sheet-mut)}

/* высокая карточка (дела недели и медаль) на низком экране — прокручивается, а не уходит за верх */
.g-card{max-height:calc(100% - var(--g-top) - 80px);overflow-y:auto;overscroll-behavior:contain}
/* Своя полоса прокрутки (владелец 05.10: системная «кривая»): тонкая, цвета чернил карточки, не заходит
   на скруглённые углы. Chrome/Safari — ::-webkit-scrollbar (он работает, только пока не задан scrollbar-color),
   Firefox — стандартные свойства */
.g-card::-webkit-scrollbar{width:12px}
.g-card::-webkit-scrollbar-track{background:transparent;margin:22px 0}
.g-card::-webkit-scrollbar-thumb{background:rgba(var(--g-ink-rgb),.2);background-clip:padding-box;border:4px solid transparent;border-radius:12px}
.g-card::-webkit-scrollbar-thumb:hover{background-color:rgba(var(--g-ink-rgb),.36)}
@supports not selector(::-webkit-scrollbar){.g-card{scrollbar-width:thin;scrollbar-color:rgba(var(--g-ink-rgb),.26) transparent}}