/* Раздел «Игры» (games.js) и верхняя строка экрана «Колоды» (#decks-head, materials.js). */

/* ---------- Колоды: «+ Новая колода» сверху ---------- */
#page-words>#decks-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 14px}
#page-words>#decks-head h2{margin:0;font-family:'Unbounded',sans-serif;font-weight:800;font-size:26px;line-height:1.1;color:#092556}
#page-words>#decks-head #material-new{flex:none;width:auto;min-height:44px;padding:0 16px;border-radius:12px;border:0;background:#FFCA38;color:#092556;font-weight:700;font-size:15px;box-shadow:0 3px 0 #C99A12;white-space:nowrap}
#page-words>#decks-head #material-new:active{transform:translateY(2px);box-shadow:0 1px 0 #C99A12}
#page-words>#decks-head #material-show-all{display:none}
#page-words:not([data-view="list"])>#decks-head{display:none}

/* ---------- Игры ---------- */
#page-games{font-family:'Golos Text',system-ui,sans-serif;color:#092556}
.gm-list{display:grid;gap:12px}
.gm-card{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center;background:#fff;border:1px solid #DCE3EF;border-radius:24px;padding:18px}
.gm-card[data-game="battle"]{background:#031D4F;border-color:#031D4F;color:#fff}
.gm-body{min-width:0}
.gm-who{display:inline-block;font-size:12px;font-weight:700;padding:4px 9px;border-radius:8px;background:#F2F5FA;color:#183E86}
.gm-card[data-game="battle"] .gm-who{background:rgba(255,202,56,.16);color:#FFCA38}
#page-games .gm-body h2{color:#092556;font-family:'Unbounded',sans-serif;font-weight:800;font-size:21px;line-height:1.2;margin:8px 0 6px}
.gm-body p{margin:0 0 14px;font-size:14px;line-height:1.5;color:#4A5B7E;max-width:42em}
.gm-card[data-game="battle"] .gm-body p{color:#C9D5EE}
#page-games .gm-card[data-game="battle"] .gm-body h2{color:#fff}
.gm-play{min-height:46px;padding:0 18px;border-radius:13px;font-weight:700;font-size:15px;border:2px solid #092556;background:#fff;color:#092556}
.gm-card[data-game="battle"] .gm-play{border:0;background:#FFCA38;box-shadow:0 4px 0 #C99A12}
.gm-play:active{transform:translateY(2px)}

.gm-art{height:120px;border-radius:18px;display:grid;place-items:center}
.gm-art-board{grid-template-columns:repeat(3,1fr);place-items:stretch;align-content:center;gap:6px;padding:10px;background:rgba(255,255,255,.06)}
.gm-art-board span{display:grid;place-items:center;height:42px;border-radius:10px;background:#092556;border:1px solid #23457F;color:#fff;font-family:'Unbounded',sans-serif;font-weight:700;font-size:16px}
.gm-art-board span:nth-child(2),.gm-art-board span:nth-child(4){background:#FFCA38;border-color:#FFCA38;color:#092556}
.gm-art-bot{grid-template-columns:1fr auto 1fr;gap:4px;background:#031D4F;padding:0 10px;overflow:hidden}
.gm-bot{font-size:44px;line-height:1;justify-self:center}
.gm-art-bot b{font-family:'Unbounded',sans-serif;font-size:13px;color:#8DA2CC}
.gm-art-bot img{width:64px;height:auto;justify-self:center}
.gm-art-timer{background:#F2F5FA}
.gm-art-timer svg{width:84px;height:84px}
.gm-ring{stroke-dashoffset:28}

/* одно движение при открытии: плитки поля переворачиваются, таймер отсчитывает */
#page-games.gm-play-in .gm-art-board span{animation:jdPop .45s calc(.15s + var(--n,0) * 60ms) cubic-bezier(.2,.8,.2,1) both}
.gm-art-board span:nth-child(1){--n:0}.gm-art-board span:nth-child(2){--n:1}.gm-art-board span:nth-child(3){--n:2}.gm-art-board span:nth-child(4){--n:3}.gm-art-board span:nth-child(5){--n:4}.gm-art-board span:nth-child(6){--n:5}
@keyframes gmTick{from{stroke-dashoffset:100}to{stroke-dashoffset:28}}
#page-games.gm-play-in .gm-ring{animation:gmTick 1.2s .3s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion: reduce){
 #page-games .gm-art-board span,#page-games .gm-ring{animation:none!important}
}

@media (max-width:640px){
 #page-words>#decks-head h2{font-size:22px}
 .gm-card{grid-template-columns:1fr;gap:14px;padding:16px;border-radius:22px}
 .gm-art{height:100px}
 .gm-art-board{grid-template-columns:repeat(6,1fr)}
 .gm-art-board span{height:40px}
 .gm-play{width:100%}
}

/* Игры собраны в разделе «Игры»: убираем дубли из меню и с экрана «Сегодня» (кнопки остаются в DOM, ими пользуется games.js). */
#app-menu #menu-challenge,#app-menu #menu-battle,#page-home #home-battle,#page-home #home-solo{display:none!important}

/* Вызов на время: выбор колоды (training.js → fillGameSources) */
.game-source-label{display:grid;gap:6px;margin:6px 0 10px;font-weight:600;font-size:14px;color:#092556}
#game-source{min-height:48px;font-size:16px}

/* ---------- Папки колод (materials.js) ---------- */
#page-words>#decks-head{flex-wrap:wrap}
#page-words>#decks-head h2{margin-right:auto}
#page-words>#decks-head #folder-new{flex:none;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid #DCE3EF;background:#fff;color:#092556;font-weight:700;font-size:15px}
.deck-folders{display:flex;flex-direction:column;gap:10px;margin:0 0 10px}
.deck-folders:empty{display:none}
.deck-folder{background:#fff;border:1px solid #DCE3EF;border-radius:20px;overflow:hidden;transition:border-color .2s}
.deck-folder[open]{border-color:#B9C7E2}
.deck-folder>summary{display:grid;grid-template-columns:48px minmax(0,1fr) auto 14px;align-items:center;gap:12px;min-height:72px;padding:12px 16px;cursor:pointer;list-style:none}
.deck-folder>summary::-webkit-details-marker{display:none}
.deck-folder>summary::after{content:"";width:9px;height:9px;border-right:2px solid #092556;border-bottom:2px solid #092556;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.deck-folder[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.folder-icon{width:48px;height:48px;border-radius:14px;background:#092556;position:relative}
.folder-icon::before{content:"";position:absolute;inset:12px 10px;background:#FFCA38;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 22'%3E%3Cpath d='M2 0h8l3 3h13a2 2 0 0 1 2 2v15a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 22'%3E%3Cpath d='M2 0h8l3 3h13a2 2 0 0 1 2 2v15a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center/contain no-repeat;transform-origin:50% 100%;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.deck-folder[open] .folder-icon::before{transform:scaleY(.86) skewX(-6deg)}
.deck-folder>summary .deck-name{font-family:'Unbounded',sans-serif;font-weight:700;font-size:16px;color:#092556;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.deck-folder>summary .deck-sub{display:block;font-size:13px;color:#5E6F92}
.deck-folder>summary .deck-badge-n:empty{display:none}
.deck-folder-body{display:flex;flex-direction:column;gap:8px;padding:4px 12px 12px;border-top:1px solid #EEF2F8;background:#F7F9FD}
.deck-folder-body>.deck-card{margin:0}
.deck-folder[open] .deck-folder-body>.deck-card{animation:jdCardIn .35s calc(var(--i,0) * 0ms + .02s) cubic-bezier(.2,.8,.2,1) both}
.deck-folder-actions{display:flex;gap:8px;padding-top:4px}
.deck-folder-actions button{min-height:40px;padding:0 14px;border-radius:12px;border:1px solid #DCE3EF;background:#fff;color:#092556;font-weight:600;font-size:14px}

/* окно папки */
#folder-editor .folder-pick-label{margin:6px 0 8px;font-weight:600;font-size:14px;color:#092556}
.folder-decks{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto;padding:2px}
.folder-deck{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border:1px solid #DCE3EF;border-radius:14px;background:#fff;cursor:pointer;transition:border-color .15s,background-color .15s}
.folder-deck:has(input:checked){border-color:#092556;background:#FFF6DA}
.folder-deck input[type="checkbox"]{appearance:auto;width:22px;height:22px;min-width:22px;min-height:0;margin:0;flex:none;accent-color:#092556}
.folder-deck-txt{display:flex;flex-direction:column;min-width:0}
.folder-deck-txt strong{font-size:15px;color:#092556;overflow-wrap:anywhere}
.folder-deck-txt span{font-size:13px;color:#5E6F92}
#folder-editor .primary{margin-top:12px;width:100%}
.folder-delete{margin-top:10px;width:100%;min-height:44px;border-radius:12px;border:1px solid #F3C4B5;background:#fff;color:#9A3412;font-weight:600}
.folder-move-deck{margin:0 0 10px;font-size:14px;color:#4A5B7E}
.folder-move-list{display:flex;flex-direction:column;gap:8px}
.folder-move-opt{min-height:50px;padding:0 16px;border-radius:14px;border:1px solid #DCE3EF;background:#fff;color:#092556;font-weight:600;font-size:15px;text-align:left}
.folder-move-opt[aria-current="true"]{border-color:#092556;background:#FFF6DA}
.folder-move-opt[aria-current="true"]::after{content:" ✓"}
.folder-move-new{border-style:dashed;color:#183E86}
@media (max-width:640px){
 dialog#folder-editor[open],dialog#folder-move[open]{animation:jdSheetUp .38s cubic-bezier(.2,.8,.2,1) both}
 #page-words>#decks-head h2{flex-basis:100%}
 #page-words>#decks-head #folder-new,#page-words>#decks-head #material-new{flex:1}
}
@media (prefers-reduced-motion: reduce){
 .folder-icon::before,.deck-folder>summary::after{transition:none}
 .deck-folder[open] .deck-folder-body>.deck-card,dialog#folder-editor[open],dialog#folder-move[open]{animation:none!important}
}
#folder-error:empty{display:none}