/* Treino de skills (server/treino.py, web/js/treino.js; mockup t01-t08 approved): the statue's window, the dark screen
   while the character sleeps, the wake, the Exercise's mini window, the charges in the trade and in Store › Treino.
   Only the client's pieces and colours (docs/DESIGN.md: pf-panel, an-kv, fx-bar, st-card, ba-outcome, cp-bar); the
   choice with the gold #c5b47c outline (the button texture hides a box-shadow). */

/* the sprites cut from the client for the mockup (exercise weapons, skill trainer, exercise dummy): whole pixels */
.tr-px{image-rendering:pixelated;flex:0 0 auto}

/* ---- the statue's window */
dialog.window.tr-modal{width:min(400px,calc(100vw - 16px))}
.tr-modal .wb{display:grid;gap:6px;align-content:start}
.tr-intro{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:center;padding:2px 2px 0}
.tr-intro .ba-slot{display:grid;place-items:center;width:44px;height:44px}
.tr-intro p{margin:0;color:#fff;line-height:15px}
.tr-intro p b{color:#e4ca78;font-weight:normal}
.tr-skills{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:4px}
.tr-skill{display:grid;justify-items:center;gap:1px;min-width:0;min-height:0;padding:4px 0 3px;font:11px/12px 'Tibia Pixel',Verdana,sans-serif;color:#c0c0c0}
.tr-skill b{color:#fff;font-weight:normal;font-size:12px;line-height:13px}
.tr-skill small{max-width:100%;color:#a9a9a9;font-size:10px;line-height:11px;white-space:nowrap}
.tr-skill.is-sel{outline:2px solid #c5b47c;outline-offset:-2px;color:#e8c547}
.tr-skill.is-sel b{color:#e8c547}
.tr-time{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:4px 4px 2px}
.tr-time button{min-width:0;min-height:26px;padding:2px 2px;white-space:nowrap}
.tr-time button.is-sel{outline:2px solid #c5b47c;outline-offset:-2px;color:#e8c547}
.tr-bal{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:center;padding:0 6px 5px}
.tr-bal small{color:#a9a9a9}
.tr-bal em{font-style:normal;color:#e8c547;white-space:nowrap}
.tr-bal .fx-bar{grid-column:1/-1}
.tr-modal .an-kv{margin:4px}
.tr-modal .an-kv b.good,.tr-veil .an-kv b.good,.tr-mini .an-kv b.good{color:#5fc85f}
.tr-modal .an-kv b.gold,.tr-veil .an-kv b.gold,.tr-mini .an-kv b.gold{color:#e8c547}
.tr-note{margin:0;padding:0 6px 4px;color:#a9a9a9;font-size:11px;line-height:14px}

/* a skill with its bar: name, level and % on one line, the bar, what it went up */
.tr-sk{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:2px 6px;align-items:center;padding:3px 6px}
.tr-sk>img,.tr-sk>canvas{grid-row:1/3}
.tr-sk>span{min-width:0;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-sk>b{font-weight:normal;color:#e8c547;white-space:nowrap}
.tr-sk>.fx-bar{grid-column:2/4}
.tr-sk>small{grid-column:2/4;color:#5fc85f;font-size:10px;line-height:11px}
.fx-bar.tr-now i{background:#5fc85f}
.fx-bar.tr-gain{background:#1c1c1c}
.fx-bar .tr-up{position:absolute;top:0;bottom:0;background:#5fc85f}

/* ---- the dark screen while training: the whole client under black, one window in the middle (no Esc, no X) */
.ba-outcome.tr-veil{position:fixed;inset:0;z-index:60;background:radial-gradient(#000d 35%,#000f);padding:16px}
.tr-veil .ba-outcome-window{width:min(340px,100%)}
.tr-veil .ba-outcome-banner{margin-bottom:6px}
.tr-veil .ba-outcome-banner strong{font-size:20px;line-height:22px;text-align:center}
.tr-veil .ba-outcome-banner small{text-align:center;line-height:13px}
.tr-sleep{position:relative;display:flex;align-items:flex-end;gap:4px;height:64px;padding-right:14px}
.tr-sleep .tr-me{display:grid;place-items:end center;filter:brightness(.75)}
.tr-sleep i{position:absolute;right:0;top:2px;font:bold 12px/12px 'Tibia Pixel',Verdana,sans-serif;font-style:normal;color:#e4ca78;text-shadow:1px 1px #000}
.tr-veil .tr-sk{padding:3px 2px}
.tr-veil .an-kv{margin:4px 2px 6px;grid-template-columns:minmax(0,1fr) auto}
.tr-veil .an-kv b{text-align:right}
.tr-veil .ba-outcome-note{font-size:11px;line-height:14px;color:#a9a9a9;padding:0 2px}
.tr-veil .ba-outcome-actions button{min-height:30px}
.tr-live{display:flex;align-items:center;justify-content:center;gap:5px;margin:0 0 4px;color:#a9a9a9;font-size:10px;line-height:11px}
.tr-live i{width:6px;height:6px;background:#5fc85f;box-shadow:0 0 0 1px #000}

/* ---- the wake result (ba-outcome over the field) */
.tr-wake .ba-outcome-window{width:min(340px,100%)}
.tr-wake .an-kv{grid-template-columns:minmax(0,1fr) auto;margin:2px 2px 6px}
.tr-wake .an-kv b{text-align:right}
.tr-wake .ba-outcome-note{font-size:11px;line-height:14px;color:#a9a9a9;padding:0 2px}

/* ---- the exercise weapon's mini window */
dialog.window.tr-mini{width:min(330px,calc(100vw - 16px))}
.tr-mini .wb{display:grid;gap:4px;align-content:start}
.tr-whead{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;align-items:center;padding:2px}
.tr-whead .ba-slot{display:grid;place-items:center;width:40px;height:40px}
.tr-whead b{display:block;color:#fff;font-weight:normal}
.tr-whead small{display:block;color:#a9a9a9}
.tr-charges{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:2px 6px;align-items:center;padding:3px 6px}
.tr-charges>img{grid-row:1/3}
.tr-charges>span{color:#fff}
.tr-charges>b{font-weight:normal;color:#fff;white-space:nowrap}
.tr-charges>.fx-bar{grid-column:2/4}
.fx-bar.tr-ch i{background:#4b98da}
.tr-mini .an-kv{margin:2px 6px 4px;grid-template-columns:minmax(0,1fr) auto}
.tr-mini .an-kv b{text-align:right}

/* ---- Store › Treino: the type picked inside a product, the charges on a card */
.st-card .tr-ch-tag{color:#4b98da}
.tr-store-note{margin:0;padding:2px 6px 5px;color:#a9a9a9;font-size:11px;line-height:14px}

/* ---- the trade: an item's charges in the detail line */
.mk-dhead small .tr-ch-tag{color:#4b98da}

/* the weapon's mini window sits low: the character and the dummy stay in sight above it */
dialog#dialog.tr-mini[open]{margin:auto auto 8px}

.tr-wake .tr-sk{padding:3px 2px}

.window-title canvas.tr-px{flex:0 0 auto;margin-right:6px;vertical-align:-3px}
.tr-crown{margin-right:3px;vertical-align:-3px;image-rendering:pixelated}
.tr-why{margin:0;padding:4px 6px;color:#e8c547;text-align:center;font-size:11px;line-height:14px}
.tr-sk>canvas{grid-row:1/3}
.tr-charges>canvas{grid-row:1/3}
.tr-store-kinds{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;padding:4px}
.tr-store-kinds button{display:grid;place-items:center;min-width:0;min-height:40px;padding:2px}
.tr-store-kinds button.is-sel{outline:2px solid #c5b47c;outline-offset:-2px}
.tr-store-kinds small{font-size:10px;line-height:11px;color:#a9a9a9}
.tr-store-kinds button.is-sel small{color:#e8c547}