/* Reference look (Bestiary Arena): client art at 1x, the 11px bitmap font, compact bevelled
   controls, inventory-style slots framed by quality and small windows over a dimmed game. */
body{color:#c0c0c0}
strong,b,h1,h2,h3,h4{color:#fff}
small{font-size:11px}

/* Header: one thin strip (the navigation itself is in shell.css). */
.shell>header.window{border-width:4px;border-image-slice:4;padding:4px 8px;min-height:0;gap:10px;flex-wrap:nowrap}
.logo{font:bold 11px 'Tibia Pixel',Verdana,sans-serif;color:#e4ca78;white-space:nowrap}
.logo small{display:none}
.resources{gap:10px;white-space:nowrap}.resources img{width:16px;height:16px;image-rendering:pixelated}
.resources b{color:#fff}

/* Windows: the 15px title band of the client frame at 1x. */
section.window,dialog.window{border-width:19px 4px 4px;border-image:url('/assets/ui/classic/window.png') 15 4 4 stretch}
section.window>.window-title,dialog.window>.window-title,dialog.window .window-title{margin:-19px -4px 0;height:19px;min-height:19px;padding:0 6px;font:11px 'Tibia Pixel',Verdana,sans-serif;color:#c0c0c0;background:none;border:0}
.window-title small{color:#a9a9a9}
dialog::backdrop{background:#000a}
dialog.window,dialog.window#detail{width:min(420px,calc(100vw - 48px));max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);box-shadow:0 4px 16px #000}
dialog .window-title button,dialog>.window-title button{flex:0 0 auto;width:19px;height:19px;min-width:19px;min-height:19px;margin-right:-4px;padding:0;border:0;border-image:none;font-size:0;background:url('/assets/ui/classic/close-normal.png') center/12px 12px no-repeat;image-rendering:pixelated;position:relative}
dialog .window-title button::before{display:none}
dialog .window-title button::after{content:'';position:absolute;inset:-8px -6px}
dialog .window-title button:hover{background-image:url('/assets/ui/classic/close-hover.png')}
dialog .window-title button:active{background-image:url('/assets/ui/classic/close-pressed.png')}

/* Controls: the client button at its native size. */
button{min-height:24px;padding:3px 8px;font-size:11px;line-height:14px}
nav button,.ae-rail button{line-height:14px}
.primary,button.primary{border:1px solid #142313;border-image:none;background:#3f6a3a;box-shadow:inset 1px 1px #77a46d,inset -1px -1px #24401f;color:#e8f3e1}
.primary:active{box-shadow:inset -1px -1px #77a46d,inset 1px 1px #24401f}
.danger,button.danger{border:1px solid #140c0c;border-image:none;background:#6a2e2a;box-shadow:inset 1px 1px #a5605a,inset -1px -1px #3f1714;color:#f5e1df}
button:disabled{opacity:.55}
button.primary:disabled{filter:grayscale(1)}
input,select,textarea{min-height:24px;padding:3px 6px;font-size:11px;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a;color:#e6e6e6}
input::placeholder{color:#6f6f6f}
hr,.ba-sep{border:0;height:2px;background:linear-gradient(#2a2a2a 50%,#6a6a6a 50%);margin:8px 0}

/* Slots framed by gene quality, with tier stars and the level as in the client inventory. */
.ba-slot{position:relative;display:block;width:100%;aspect-ratio:1;min-width:0;min-height:0;padding:0;overflow:hidden;border:1px solid #121212;border-image:none;
  background:#262626;box-shadow:inset 0 0 0 1px var(--slot-edge,#3c3c3c),inset 0 0 6px 2px var(--slot-glow,transparent)}
.ba-slot:hover{box-shadow:inset 0 0 0 1px #9c9c9c,inset 0 0 6px 2px var(--slot-glow,transparent)}
.ba-slot.selected{border-color:#d6d6d6}
.ba-slot .ba-sprite{position:absolute;right:0;bottom:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;pointer-events:none}
.ba-level{position:absolute;left:2px;bottom:0;font:bold 11px/14px 'Tibia Pixel',Verdana,sans-serif;color:#fff;pointer-events:none;
  text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000,1px 1px #000,-1px -1px #000,1px -1px #000,-1px 1px #000}
.ba-stars{position:absolute;top:1px;right:1px;display:flex;pointer-events:none}
.ba-stars i{width:11px;height:11px;margin-left:-1px;background:url('/assets/ui/star.png') no-repeat;image-rendering:pixelated}
.shiny-mark,.fm-slot b.shiny-mark{color:#f4d35e}
.ba-shiny{position:absolute;left:2px;top:0;color:#f4d35e;font-style:normal;font-size:11px;pointer-events:none}
/* 2.89: a shiny shines in gold. The ✦ is #f4d35e everywhere; the client's yellow sparkles (effect 182, the procEffects.rebirth
   strip at x=384 of effect-procs.png, 22 frames, unscaled) go over its art every ~4 s on the cards and the profile. */
.shiny-fx{position:absolute;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;background:url('/assets/tibia/effect-procs.png') -384px 0 no-repeat;
 image-rendering:pixelated;pointer-events:none;z-index:2;animation:shiny-fx 4s steps(22,end) infinite}
@keyframes shiny-fx{0%{background-position:-384px 0}38.5%,100%{background-position:-384px -704px}}
@media (prefers-reduced-motion:reduce){.shiny-fx{animation:none;background-position:-384px -320px}}
.ba-slot.in-team::after{content:'';position:absolute;right:2px;bottom:2px;width:5px;height:5px;background:#e8c547;border:1px solid #000}
.rarity-slot-grey{--slot-fill:#262626;--slot-edge:#3c3c3c;--slot-glow:transparent}
.rarity-slot-green{--slot-fill:#262626;--slot-edge:#4a7a3a;--slot-glow:#4a7a3a55}
.rarity-slot-blue{--slot-fill:#262626;--slot-edge:#3d6585;--slot-glow:#3d658577}
.rarity-slot-purple{--slot-fill:#262626;--slot-edge:#6b4f87;--slot-glow:#6b4f8788}
.rarity-slot-yellow{--slot-fill:#262626;--slot-edge:#7c7a3c;--slot-glow:#8a873c88}
.ba-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:4px;padding:4px;background:#1e1e1e;border:1px solid #111;box-shadow:1px 1px #6a6a6a;max-height:calc(5 * 38px + 8px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.ba-toolbar{display:flex;gap:4px;margin-bottom:5px}.ba-toolbar input{flex:1;min-width:0}.ba-toolbar select{width:auto}
/* Arena: team slots in a row, the collection grid below. */
.client-team-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:6px}
.client-team-slot{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:0;background:none;border:0;box-shadow:none}
.client-team-slot .ba-slot{width:100%;max-width:56px}
.client-team-slot small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#a9a9a9}
.ba-empty{color:#6f6f6f;font-size:11px;text-align:center}
.client-bestiary{margin-top:8px}
/* Dialogs keep the client proportions: a small window over the dimmed game. */
#detail>.window-title,#detail .window-title{min-height:19px;height:19px;padding:0 6px}
#detail #close-detail{min-width:0;width:19px;min-height:19px;height:19px;padding:0;background:url('/assets/ui/classic/close-normal.png') center/12px 12px no-repeat;border:0;font-size:0;color:transparent}
#detail-footer{padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:none;border-top:0;box-shadow:inset 0 2px 0 -1px #2a2a2a,inset 0 1px #6a6a6a}
#profile-close{width:auto;min-height:24px;margin-left:auto;display:block}
.client-arena-tabs button,.catalog-tabs button{min-height:26px;padding:3px 6px}
.board-loot{min-height:22px;padding:2px 6px}
.board-zoom button{min-width:24px;min-height:24px;font-size:11px}
/* Battle board at client scale: BoardZoom sizes the canvas (32px per tile) and the frame; dragging replaces scrolling. */
.client-board,.client-board.is-placing{overflow:hidden;max-height:none;min-height:0;padding:0;background:#0d0d0d;touch-action:pan-x pan-y;overscroll-behavior:contain}
.client-board #board,.client-board.is-placing canvas{min-width:0;max-width:none;image-rendering:pixelated}
.client-board.is-zoomed #board{cursor:grab}
.board-zoom{right:4px;bottom:4px;gap:2px}
/* Bestiary grid drag & drop and newly revealed creatures. */
.ba-slot{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.ba-drag-ghost{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;opacity:.85;box-shadow:0 4px 10px #000a}
.ba-slot.ba-dragging{opacity:.35}
body.ba-dragging-page{cursor:grabbing;user-select:none;-webkit-user-select:none}
.ba-drop-target{outline:2px solid #e8c547;outline-offset:-2px}
.client-team-slot .ba-drop-target,.client-team-slot .ba-slot.ba-drop-target{outline-offset:1px}
.ba-new{animation:ba-new 1s steps(2) 4}
@keyframes ba-new{50%{box-shadow:inset 0 0 0 2px #e8c547,0 0 6px 2px #e8c547aa}}
/* Battle result: a client window over the darkened field. */
/* No fade: iOS Safari sometimes left the fade half done (a see-through window); client windows simply appear. */
.ba-outcome{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:8px;background:radial-gradient(#0003 30%,#000b);isolation:isolate;transform:translateZ(0)}
.ba-outcome.is-loss{background:radial-gradient(#3a000022 20%,#000b)}
.ba-outcome-window{width:min(300px,100%);margin:0;opacity:1;background-color:#4b4b4b;box-shadow:0 0 0 1px #000,0 6px 18px #000c}
/* Taller than the field (Maestria, boss and quest notes): the darkened layer scrolls, not the window. The title and
   its close button sit in the window's top border, which a scrolling window clips: they were invisible and could not
   be clicked (bots: "sem botão de fechar"). margin:auto keeps the top of a tall window within reach. */
.ba-outcome{overflow-y:auto;overscroll-behavior:contain}
section.window.ba-outcome-window{max-height:none;overflow:visible;margin:auto}
.ba-outcome-window>.window-title{justify-content:space-between}
.ba-outcome-window #ba-outcome-close{flex:0 0 auto;width:19px;height:19px;min-width:19px;min-height:19px;margin-right:-4px;padding:0;border:0;border-image:none;font-size:0;background:url('/assets/ui/classic/close-normal.png') center/12px 12px no-repeat;image-rendering:pixelated}
.ba-outcome-window #ba-outcome-close:active{background-image:url('/assets/ui/classic/close-pressed.png')}
.ba-outcome-banner{display:flex;flex-direction:column;align-items:center;gap:3px;margin:2px 0 8px;padding:8px 6px;background:#1c1c1c;border:1px solid #0d0d0d;box-shadow:1px 1px #6a6a6a,inset 0 0 12px #000}
.ba-outcome-banner strong{font:bold 22px/24px 'Tibia Pixel',Verdana,sans-serif;letter-spacing:0;text-shadow:2px 0 #000,-2px 0 #000,0 2px #000,0 -2px #000,2px 2px #000,-2px -2px #000,2px -2px #000,-2px 2px #000}
.is-win .ba-outcome-banner strong{color:#f4d35e}
.is-win .ba-outcome-banner{background:linear-gradient(#2b2614,#171512);border-color:#3b3218}
.is-loss .ba-outcome-banner strong{color:#e8584c}
.is-loss .ba-outcome-banner{background:linear-gradient(#2a1512,#151111);border-color:#3a1916}
.ba-outcome-banner small{color:#a9a9a9}
.ba-outcome-loot{display:flex;justify-content:center;gap:5px;margin:0 0 6px}
.ba-loot-slot,.ba-loot-capture .ba-slot{position:relative;width:36px;height:36px;flex:0 0 36px}
.ba-loot-slot{display:inline-flex;align-items:center;justify-content:center;border:2px solid transparent;border-image:url('/assets/ui/classic/item.png') 2 fill stretch;background:none}
.ba-loot-slot img,.ba-loot-slot .ba-sprite{width:32px;height:32px;image-rendering:pixelated}
.ba-loot-slot b{position:absolute;right:1px;bottom:0;font:bold 11px/12px 'Tibia Pixel',Verdana,sans-serif;color:#fff;text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000,1px 1px #000,-1px -1px #000}
.ba-loot-capture{display:inline-block}
.ba-outcome-note{margin:0 0 4px;text-align:center;color:#c0c0c0}
.ba-outcome-actions{display:flex;gap:4px;justify-content:center}
/* Verdict of the Analisador da batalha (analyser.js) under the loot: a strip that opens the analysis. */
.ba-outcome-why{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;width:100%;margin:4px 0 0;padding:4px 8px;text-align:left;min-height:0}
.ba-outcome-why span{display:grid;min-width:0}
.ba-outcome-why b{color:#e8c547;font-weight:normal}.ba-outcome-why.is-bad b{color:#e8756c}
.ba-outcome-why small{color:#c0c0c0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ba-outcome-why em{font-style:normal;color:#fff;white-space:nowrap}
.ba-outcome-actions button{flex:1;min-height:26px;padding:3px 4px;white-space:nowrap}
.ba-outcome-hint{display:block;margin-top:5px;text-align:center;color:#a9a9a9}

/* Tibia interface icons (web/tibia-icons.js, docs/ICONS.md): native pixels; smooth when shrunk. */
.ti{display:inline-block;vertical-align:middle;image-rendering:pixelated}.ti.soft{image-rendering:auto}
.ti-pair{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.race-card .race-icon{display:block;margin:0 auto 2px;height:40px;width:auto}
.race-card.undiscovered .race-icon{filter:grayscale(1) brightness(.6)}
.collection-race h3 .ti,.bestiary-race h3 .ti,.quest h3 .ti{margin-right:2px}
.stats .ti{margin-right:2px}
#stamina-icon{width:auto;height:auto;vertical-align:middle}
.raid-difficulties .raid-diff-icon{justify-self:start;height:28px}
.raid-live-row:has(.is-ready,.is-cooling){grid-template-columns:minmax(0,1fr) 16px 70px 44px}
.raid-live-row .is-cooling{opacity:.35;filter:grayscale(1)}
.asc-badge-bar .ti{margin-right:2px}

/* Header: the Store inventory chest (with its count) lives in the avatar's menu (shell.css). */
/* Autoformação: current team and proposal, five creatures each with their strength. */
.auto-team{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:6px}
.auto-team>span{display:grid;justify-items:center;gap:2px;text-align:center;min-width:0}
.auto-team small{color:#c0c0c0;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.auto-team small b{display:block;color:#e8c547;font-weight:normal}
.auto-team small i{display:block;font-style:normal;color:#a9a9a9}
.ba-xp{display:grid;grid-template-columns:repeat(auto-fit,minmax(52px,1fr));gap:2px;margin:0 0 6px}
.ba-xp>span{position:relative;display:flex;flex-direction:column;align-items:center;padding:2px 1px 4px;background:#1c1c1c;border:1px solid #0d0d0d;box-shadow:1px 1px #6a6a6a}
.ba-xp small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:#c0c0c0;white-space:nowrap;letter-spacing:-.6px}
.ba-xp small b{color:#7cf08a;font-weight:normal}
.ba-xp i{position:absolute;left:1px;bottom:1px;height:2px;background:#4b98da}
/* Battle options (web/battle-options.js): a client-style options window. */
.bo-modal{width:min(420px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto}
.bo{display:grid;gap:6px;padding:6px}
.bo-body{display:grid;gap:6px;padding:6px}
.bo-field{display:grid;gap:2px;color:#c0c0c0}
.bo-field select{width:100%}
.bo-check{display:flex;align-items:center;gap:6px;color:#c0c0c0;min-height:24px}
.bo-actions{display:flex;gap:4px;justify-content:flex-end}
.bo .pf-note{margin:0}
.ba-outcome-key{color:#fff}
.ba-outcome-more{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin:5px 0 0;padding:3px 8px;min-height:24px;text-align:left}
.ba-outcome-more span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e4ca78}
.ba-outcome-more small{flex:0 0 auto;color:#a9a9a9}
.ba-details{display:grid;gap:6px}
/* Como foi (2.88): the battle in up to three lines (combat_report.story); its header opens the details. The window stays
   the height of its content and fits the field (316 px) at 390x844 and 320x568. */
.has-story .ba-outcome-banner{margin:0 0 4px;padding:4px 6px}
.has-story .ba-outcome-loot{margin:0 0 4px}
.ba-story{margin:0 0 4px;background:#1c1c1c;border:1px solid #0d0d0d;box-shadow:1px 1px #6a6a6a}
.ba-story-head{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;min-height:20px;padding:0 6px;text-align:left}
.ba-story-head span{color:#e4ca78}.ba-story-head small{flex:0 0 auto;color:#a9a9a9;white-space:nowrap}
.ba-story-row{display:grid;grid-template-columns:34px minmax(0,1fr);gap:6px;align-items:center;padding:1px 5px;border-top:1px solid #2a2a2a;text-align:left}
.ba-story-ic{display:grid;place-items:center;width:34px;height:34px;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000;overflow:hidden}
.ba-story-ic .ba-story-art{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
.ba-story-row>span:last-child{min-width:0}
.ba-story-row b,.ba-story-row small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ba-story-row b{font-weight:normal;color:#fff}.ba-story-row small{color:#a9a9a9}
.ba-story-row.is-tip b{color:#e8c547}
.ba-fatal{color:#e8584c}.ba-dodge{color:#99ffff}
.ba-details .ba-outcome-note{text-align:left}
/* A second creature of a species already in the team (2.82, arena-ui.js duplicateHelp): what its promotion costs and gives. */
.ba-dup-cost{width:100%;border-collapse:collapse;margin:2px 0 6px}
.ba-dup-cost td{padding:2px 6px;border-bottom:1px solid #262626;color:#c0c0c0}
.ba-dup-cost td:nth-child(2){text-align:right;white-space:nowrap}
.ba-dup-cost .ba-dup-gain{color:#5fc85f;text-align:right}
/* Próximo passo (2.82, hints.js): one action at a time over the Arena, compact on a phone. */
.nx-strip{display:flex;align-items:center;gap:6px;margin:4px 6px 0;padding:2px 6px;border:1px solid #111;box-shadow:1px 1px #6a6a6a,inset 1px 1px #6a6a6a;background:#2f2f2f}
.nx-strip.is-action{border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.nx-strip .nx-ic{width:32px;height:32px;flex:none;image-rendering:pixelated;object-fit:contain}
.nx-strip span{flex:1 1 0;min-width:0;display:grid}
.nx-strip b{color:#e8c547;font-weight:normal;font-size:11px;line-height:12px}
.nx-strip small{color:#fff;font-size:11px;line-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-strip button{flex:none;min-height:32px}
.ba-cap-up,.fm-up{color:#e8c547}
/* What the battle opened (2.82, unlockHTML): once, with the way there. */
.ba-unlock{display:flex;align-items:center;gap:6px;margin:2px 0 6px;padding:4px 6px;border-color:#5fc85f;box-shadow:inset 0 0 0 1px #5fc85f}
.ba-unlock img{width:22px;height:22px;flex:none;image-rendering:pixelated;object-fit:contain}
.ba-unlock span{flex:1 1 0;min-width:0;display:grid;text-align:left}.ba-unlock b{color:#5fc85f;font-weight:normal}.ba-unlock small{color:#c0c0c0}
.ba-unlock button{flex:none;min-height:32px}
/* 2.85.1: a member that fell in the battle on screen: grey and dark, with the client's red X (scripts/client_items.py) on top. */
.client-team-slot.is-fallen .ba-slot{position:relative}
.client-team-slot.is-fallen .ba-slot>*{filter:grayscale(1) brightness(.5)}
.client-team-slot.is-fallen .ba-slot::after{content:"";position:absolute;inset:0;margin:auto;width:32px;height:32px;background:url('/assets/tibia/fallen-x.png') center/32px 32px no-repeat;image-rendering:pixelated;pointer-events:none}
.client-team-slot.is-fallen small{color:#6a6a6a;text-decoration:line-through}
/* 2.85.4: the Arena fits a phone (390×844): lower rows of tabs and buttons and a board frame that leaves the team in view
   (the board keeps its zoom and drag). */
@media (max-width:600px){
 .client-arena-body .pv-modes button{min-height:26px;padding:1px 3px}
 .client-arena-tabs{margin-bottom:4px}.client-arena-tabs>button{min-height:28px;padding:1px 4px;line-height:12px}
 .client-main-controls button{min-height:34px}
 .client-replay-controls button,.client-replay-controls select{min-height:28px}
 .client-arena-body{padding:6px}
 .client-board.board-wrap{max-height:320px}
}