/* 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 with the tabs as text links. */
.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}
.shell>header nav{display:flex;flex:1;gap:0;overflow-x:auto;scrollbar-width:none;min-width:0}
.shell>header nav::-webkit-scrollbar{display:none}
.shell>header nav button{flex:0 0 auto;min-height:26px;height:26px;padding:0 7px;border:0;border-image:none;background:none;box-shadow:none;color:#a9a9a9}
.shell>header nav button.active{color:#fff;background:none;border:0;box-shadow:inset 0 -2px #c5b47c}
.shell>header nav button:hover{color:#fff}
.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(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}
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}
.ba-shiny{position:absolute;left:2px;top:0;color:#9fe8ff;font-style:normal;font-size:11px;pointer-events:none}
.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}
.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}
.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:11px;height:11px;vertical-align:-1px}
.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) and, on a phone, the whole menu in two rows. */
.hdr-chest{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;height:28px;min-height:28px;padding:0;border:1px solid #111;background:#2f2f2f;box-shadow:inset 1px 1px #5e5e5e}
.hdr-chest[hidden]{display:none}
.hdr-chest img{width:24px;height:24px;image-rendering:pixelated;opacity:.75}
.hdr-chest.has-items img{opacity:1}
.hdr-chest b{position:absolute;right:-5px;top:-5px;min-width:15px;height:15px;padding:0 3px;font:bold 11px/15px 'Tibia Pixel',Verdana,sans-serif;text-align:center;color:#1c1c1c;background:#e8c547;border:1px solid #111}
.hdr-chest b:empty{display:none}
.hdr-chest.is-new{border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.hdr-chest.is-new img{animation:hdr-chest 1.6s ease-in-out infinite}
@keyframes hdr-chest{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.hdr-chest.is-new img{animation:none}}
@media(max-width:760px){
 .shell>header.window{flex-wrap:wrap;row-gap:4px;column-gap:6px}
 .shell>header .logo{order:0;margin-right:auto}
 .shell>header .wiki-button{order:1}
 .shell>header .hdr-chest{order:2}
 .shell>header .resources{order:3}
 .shell>header nav{order:4;flex:1 1 100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;overflow:visible}
 .shell>header nav button{min-width:0;height:28px;min-height:28px;padding:0 1px;font-size:11px;letter-spacing:-.6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#2b2b2b;border:1px solid #111}
 .shell>header nav button[hidden]{display:none}
 .shell>header nav button.active{color:#fff;border:1px solid #c5b47c;box-shadow:inset 0 0 0 1px #c5b47c;background:#2b2b2b}
}
/* 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}