/* Creature window (2.82, app.js profileHead/profileTabs/profileBar/tierTab, lessons.js; docs/DESIGN.md › Perfil da criatura).
   Only the colours of docs/DESIGN.md › Valores; the pixel font at 11 or 22 px. */
#detail #detail-footer{display:none}
#detail-body .cp-gold{color:#e8c547}
#detail-body .cp-gold-soft{color:#e4ca78;font-weight:normal}
#detail-body .cp-good{color:#5fc85f}
#detail-body .cp-bad{color:#e8584c}
#detail-body .cp-center{text-align:center;margin:4px 0 0}
#detail-body .cp-id{margin:0;color:#a9a9a9;text-align:center}
/* header */
.cp-head{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:8px;align-items:start;margin:0 0 6px}
.cp-portrait{position:relative;display:grid;place-items:center;width:64px;height:64px;overflow:hidden;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.cp-portrait canvas{width:64px;height:64px;image-rendering:pixelated}
.cp-portrait img{max-width:64px;max-height:64px}
.cp-who{min-width:0;display:grid;gap:3px}
.cp-who>b{color:#fff;font-weight:normal;overflow-wrap:anywhere}.cp-who>b em{font-style:normal;color:#e8c547}
.cp-who>small{color:#a9a9a9}
.cp-shiny{color:#7cf08a}
.cp-badges{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.cp-badge{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0 6px;color:#fff;background:#1c1c1c;border:1px solid #111;box-shadow:inset 0 0 0 1px #3d3d3d;border-image:none;font-size:11px}
button.cp-badge{cursor:pointer}
@media(hover:hover){button.cp-badge:hover:not(:disabled){border-image:none;box-shadow:inset 0 0 0 1px #e4ca78}}
button.cp-badge:focus-visible{outline:2px solid #e8c547;outline-offset:1px}
.cp-badge img{width:16px;height:16px;object-fit:contain;image-rendering:pixelated}
.cp-pips{display:inline-flex;gap:4px;align-items:center;padding:0 2px}
.cp-pips i{width:8px;height:8px;transform:rotate(45deg);background:#1c1c1c;border:1px solid #6f6f6f}
.cp-pips i.on{background:#e8c547;border-color:#111}
.cp-xp{display:block;height:4px;background:#000;border:1px solid #3d3d3d}.cp-xp i{display:block;height:100%;background:#e4ca78}
.cp-quick{display:grid;gap:3px}
.cp-quick button{width:32px;min-height:30px;padding:0}
.cp-quick button.on{color:#e8c547;box-shadow:inset 0 0 0 1px #e4ca78}
/* tabs: one row with the client's icons, scrolling sideways on a phone */
#detail .profile-nav.cp-tabs{position:sticky;top:0;z-index:2;background:#3d3d3d url('/assets/ui/classic/panel-texture.png') repeat;display:flex;gap:0;overflow-x:auto;scrollbar-width:none;margin:0 0 8px;padding:0;border-bottom:1px solid #111;box-shadow:0 1px #6a6a6a}
#detail .profile-nav.cp-tabs::-webkit-scrollbar{display:none}
#detail .profile-nav.cp-tabs button{position:relative;flex:1 0 auto;display:grid;justify-items:center;gap:1px;grid-column:auto;min-height:0;padding:4px 7px 5px;color:#a9a9a9;background:none;border:0;border-bottom:2px solid transparent;border-image:none;box-shadow:none}
#detail .profile-nav.cp-tabs button img{opacity:.75}
#detail .profile-nav.cp-tabs button.active{color:#fff;border-bottom-color:#e8c547}
#detail .profile-nav.cp-tabs button.active img{opacity:1}
@media(hover:hover){#detail .profile-nav.cp-tabs button:hover:not(:disabled){border-image:none;color:#fff}}
#detail .profile-nav.cp-tabs .app-dot{top:2px;right:4px}
.cp-body{display:grid;gap:8px;grid-auto-rows:max-content;min-width:0}
.cp-body>*{min-width:0}
.cp-body .pf-panel{margin:0}
.cp-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
.cp-fold{margin:0}
/* Perfil: the Skills window */
.cp-skills{display:grid}
.cp-sk{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:2px 6px;align-items:center;padding:4px 2px 5px;border-bottom:1px solid #3d3d3d}
.cp-sk:last-child{border-bottom:0}
.cp-sk img{width:16px;height:16px;object-fit:contain}
.cp-sk>span:first-of-type{color:#c0c0c0}
.cp-sk b{color:#fff;font-weight:normal;font-variant-numeric:tabular-nums;text-align:right}
.cp-sk b ins{text-decoration:none;color:#5fc85f}
.cp-pb{display:block;position:relative;height:5px;background:#000;border:1px solid #5e5e5e}
.cp-pb i{position:absolute;left:0;top:0;bottom:0;background:#5fc85f}
.cp-sk .cp-pb{grid-column:2/-1}
.cp-sk small{grid-column:2/-1;color:#a9a9a9}
.cp-minis{display:flex;gap:3px}
.cp-slot{position:relative;display:grid;place-items:center;width:46px;height:46px;background:url('/assets/ui/classic/item.png') center/100% 100% no-repeat}
.cp-slot img{max-width:32px;max-height:32px;image-rendering:pixelated}
.cp-mini{width:30px;height:30px}.cp-mini img{max-width:22px;max-height:22px}
/* Set: the client's equipment window */
.cp-doll{display:grid;grid-template-columns:repeat(3,62px);gap:6px;justify-content:center}
.cp-eq{display:grid;justify-items:center;gap:2px;width:62px;min-height:0;padding:0;background:none;border:0;border-image:none;color:#a9a9a9}
@media(hover:hover){.cp-eq:hover:not(:disabled){border-image:none;color:#fff}}
.cp-eq .cp-slot{width:46px;height:46px}
.cp-eq.is-gap{visibility:hidden}
.cp-ghost{opacity:.25;filter:grayscale(1)}
.cp-eq[class*="rarity-"] .cp-slot{box-shadow:inset 0 0 0 1px #e4ca78}
.cp-buffs{display:grid;gap:4px}
/* Tier */
.cp-ladder{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:2px 0 4px}
.cp-ladder::before,.cp-ladder::after{content:"";position:absolute;left:10%;top:15px;height:2px}
.cp-ladder::before{right:10%;background:#3d3d3d}
.cp-ladder::after{width:calc((100% - 20%) * var(--fill) / 100);background:#e8c547;transition:width .3s}
.cp-step{position:relative;z-index:1;display:grid;justify-items:center;gap:3px;min-height:0;padding:0;background:none;border:0;border-image:none;color:#a9a9a9}
@media(hover:hover){.cp-step:hover:not(:disabled){border-image:none}}
.cp-step:disabled{opacity:1}
.cp-step span{display:grid;place-items:center;width:30px;height:30px;background:#1c1c1c;border:1px solid #111;box-shadow:inset 0 0 0 1px #3d3d3d}
.cp-step.is-now span{background:#2b2b2b;color:#e8c547;box-shadow:inset 0 0 0 1px #e4ca78}
.cp-step.is-go span{background:#e8c547;color:#111;box-shadow:0 0 0 2px #111}
.cp-step.is-go small{color:#e8c547}
.cp-step.is-reach span{color:#fff;box-shadow:inset 0 0 0 1px #6f6f6f}
.cp-step.is-far span{opacity:.45}
.cp-gains{display:grid;gap:6px}
.cp-gain{display:grid;grid-template-columns:16px 84px minmax(0,1fr) auto;gap:6px;align-items:center}
.cp-gain img{width:16px;height:16px;object-fit:contain}
.cp-gbar{position:relative;height:6px;background:#000;border:1px solid #5e5e5e}
.cp-gbar i{position:absolute;left:0;top:0;bottom:0;background:#6f6f6f}
.cp-gbar em{position:absolute;top:0;bottom:0;background:#5fc85f}
.cp-gain b{color:#fff;font-weight:normal;white-space:nowrap;font-variant-numeric:tabular-nums}.cp-gain b ins{text-decoration:none;color:#5fc85f}
.cp-cost{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.cp-tag{display:grid;grid-template-columns:24px minmax(0,1fr);gap:6px;align-items:center;padding:6px;background:#1c1c1c;border:1px solid #111}
.cp-tag b{display:block;color:#f4d35e;font-weight:normal}.cp-tag small{display:block}
.cp-tag-art img{width:24px;height:24px;object-fit:contain}
.cp-copies{display:flex;flex-wrap:wrap;gap:4px}
.cp-copy i{position:absolute;font-style:normal;color:#fff;text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000}
.cp-copy .cp-lv{right:4px;bottom:2px}.cp-copy .cp-gn{left:4px;top:2px;color:#c0c0c0}
.cp-copy.is-warn{box-shadow:inset 0 0 0 1px #e8584c}
.cp-alert{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:space-between;margin-top:6px;padding:4px 6px;color:#fff;background:#2b2b2b;border:1px solid #e8584c}
.cp-alert button{min-height:26px}
.cp-keep{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.cp-reqs{display:grid;gap:4px}
.cp-req{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:6px;align-items:center}
.cp-req b{font-weight:normal;color:#fff}.cp-req b.cp-good{color:#5fc85f}
.promoted-card{display:grid;gap:4px;margin:0 0 8px;padding:6px 8px;border-color:#5fc85f;box-shadow:inset 0 0 0 1px #5fc85f}
.promoted-card canvas{width:100%;height:auto;background:#000;image-rendering:pixelated}
.promoted-card b{color:#5fc85f;font-weight:normal;font-size:22px;line-height:26px;text-align:center}
.promoted-card small{color:#c0c0c0;text-align:center}
.cp-rows{display:grid;gap:2px}.cp-rows div{display:flex;justify-content:space-between}.cp-rows ins{text-decoration:none;color:#5fc85f}
/* the bar at the bottom: the action of the tab, and ⋯ */
.cp-bar{position:sticky;bottom:0;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:4px;margin:8px -4px 0;padding:6px 4px;background:#3d3d3d url('/assets/ui/classic/panel-texture.png') repeat;border-top:1px solid #111;box-shadow:0 -1px #6a6a6a}
.cp-bar>button{min-height:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-sheet{position:absolute;right:4px;bottom:calc(100% + 2px);display:grid;gap:2px;min-width:220px;padding:4px;background:#3d3d3d url('/assets/ui/classic/panel-texture.png') repeat;border:1px solid #111;box-shadow:1px 1px #000,inset 1px 1px #6a6a6a}
.cp-sheet button{display:flex;align-items:center;gap:6px;min-height:34px;text-align:left}
.cp-sheet img,.cp-sheet .cp-ic{width:16px;height:16px;object-fit:contain}
.cp-sheet .cp-danger{color:#ff8b7e}
/* the lesson window (lessons.js) */
dialog.window.ls-modal{width:min(420px,calc(100vw - 16px))}
.ls-body{display:grid;gap:6px;padding:6px 8px 8px;grid-auto-rows:max-content}
.ls-vars{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.ls-vars::-webkit-scrollbar{display:none}
.ls-vars button{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:0 6px}
.ls-vars button.on{color:#fff;box-shadow:inset 0 0 0 1px #e4ca78}
.ls-vars img,.ls-role-ic{width:16px;height:16px;object-fit:contain;image-rendering:pixelated}
.ls-stage{border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a;background:#000;line-height:0}
.ls-stage canvas{width:100%;height:auto;image-rendering:pixelated}
.ls-legend{display:flex;flex-wrap:wrap;gap:3px}
.ls-legend canvas{width:16px;height:16px;image-rendering:pixelated}
.ls-text{display:grid;gap:4px}
.ls-text h3{margin:0;font-size:11px;font-weight:normal;color:#e8c547}
.ls-text p{margin:0;color:#c0c0c0}
.ls-text b{color:#fff;font-weight:normal}
.ls-src{color:#a9a9a9}
.ls-note{margin:0;color:#a9a9a9;text-align:center}
.ls-genes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.ls-genes div{display:grid;justify-items:center;gap:2px}
.ls-gcol{position:relative;width:12px;height:42px;background:#000;border:1px solid #5e5e5e}
.ls-gcol i{position:absolute;left:0;right:0;bottom:0;background:#5fc85f}
.ls-genes small{color:#a9a9a9}
.ls-acts{display:grid}
.ls-acts button{min-height:36px}
@media(prefers-reduced-motion:reduce){.cp-ladder::after{transition:none}}
.cp-sheet[hidden]{display:none}

/* 2.83: the window scrolls up and down only (1 px wider content let a phone drag the whole window sideways). */
#detail-body{overflow-x:hidden;touch-action:pan-y}
.sf-form em{white-space:normal}
/* the promotion result: a small window over the creature window */
dialog.window.promo-modal{width:min(360px,calc(100vw - 16px))}
.promo-body{display:grid;gap:6px;padding:6px 8px 8px}
.promo-body .promoted-card{margin:0;text-align:center}
.promo-body .promoted-card b{font-size:22px;line-height:26px}
.promo-who{color:#fff}
.promo-acts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px}
.promo-acts.is-one{grid-template-columns:minmax(0,1fr)}
.promo-acts button{min-height:36px}
/* Sugerir set (2.83.1, qol.js suggest): one window that fits a phone. */
.sg-goals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;margin:0 0 6px}
.sg-goals button{display:grid;justify-items:center;gap:2px;min-height:42px;padding:2px;white-space:normal;line-height:12px}
.sg-goals button.on{color:#fff;box-shadow:inset 0 0 0 1px #e4ca78}
.sg-wait{text-align:center;padding:24px 0}
.sg-box{display:grid;gap:6px;margin:0 0 6px}
.sg-power{display:grid;justify-items:center;padding:4px;background:#1c1c1c;border:1px solid #111}
.sg-power span{color:#a9a9a9}.sg-power b{font-size:22px;line-height:26px;font-weight:normal;color:#fff}
.sg-power ins,.sg-stats ins{text-decoration:none;color:#5fc85f}.sg-power ins.is-down,.sg-stats ins.is-down{color:#e8584c}
.sg-doll{grid-template-columns:repeat(3,56px);gap:8px 14px}
.sg-eq{position:relative;width:56px}
.sg-eq.is-same{opacity:.55}.sg-eq.is-sel .cp-slot{box-shadow:inset 0 0 0 2px #e8c547}
.sg-new{position:absolute;z-index:1;top:-6px;right:-4px;padding:0 3px;font-style:normal;line-height:13px;color:#111;background:#5fc85f;border:1px solid #111}
.sg-line{margin:0;min-height:28px;text-align:center;color:#c0c0c0}.sg-line b{color:#fff;font-weight:normal}.sg-gold{color:#e8c547}
.sg-stats{display:grid;gap:3px;margin:0 0 6px}
.sg-stats div{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:6px;align-items:center}
.sg-stats span{color:#c0c0c0}.sg-stats b{color:#fff;font-weight:normal;white-space:nowrap}
.sg-acts{position:sticky;bottom:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;padding-top:4px}
.sg-acts button{min-height:40px}