/* ---- the page: the game holds the screen (no page scroll, no zoom on the iPhone); Bestiary's font and background ---- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* no double-tap zoom anywhere: touch-action is not inherited, and inside a scrolling list or window Safari zoomed the
   tapped block to the screen's width (the client's diag, 2026-10-28: scale 1.053 = 440/418, moved 11 px; iPhone
   Pro Max). The elements that drag (#mm, #tracker, the big map) keep their own. */
*,*::before,*::after{touch-action:manipulation}
[hidden]{display:none!important}
html,body{margin:0;width:100%;max-width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;touch-action:manipulation;-webkit-text-size-adjust:100%;padding:0}
#game,#game *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#game input,#game textarea{-webkit-user-select:text;user-select:text}
img,canvas{image-rendering:pixelated}
button img,button canvas{pointer-events:none}

/* ---- the entry screens (boot, sign in, new character): Bestiary's sign-in window (auth.css lg-*) in the middle ---- */
.screen{position:fixed;inset:0}
#boot,#login,#create{display:grid;place-items:center;padding:6px;overflow-y:auto}
.window.auth{width:min(460px,calc(100vw - 12px));max-width:100%}
.lg-body{display:grid;gap:6px;padding:6px}
.lg-art{display:flex;gap:2px;justify-content:center}.lg-art canvas{width:48px;height:48px}
/* a deploy: in the middle, the game darkened behind it (the owner, 2026-10-28) */
#updating{z-index:1000;display:grid;place-items:center;padding:6px;overflow-y:auto;background:rgba(0,0,0,.8)}
#updating-art{display:block;width:320px;max-width:100%;margin:0 auto;image-rendering:pixelated}
.boot-bar{display:block;height:8px}.boot-bar i{display:block;height:100%;width:0;background:#e8c547;transition:width .2s}
.st .st-art canvas{width:64px;height:64px;image-rendering:pixelated}
.st .aw-tag img{width:12px;height:12px}

/* Tibia Realms' own pieces on the Bestiary Realms client (css/bestiary/*, vendored, never edited): the game screen
   that fits the phone without scrolling (the map in Auto Farm's field), the windows as centred modals (the owner: "foque
   em modal"), the map's overlays (target, battle list, cooldowns, ribbon), the shortcuts on the client's item.png and
   the console's colours. Only the colours of docs/DESIGN.md. */

/* ---- the game screen (mockup 2): header, one strip, the map as big as it can be, one row of shortcuts, the bar ---- */
#game.shell{position:fixed;inset:0;max-width:none;margin:0;padding:4px 4px 0;display:flex;flex-direction:column;gap:4px;overflow:hidden;
  padding-left:max(4px,env(safe-area-inset-left));padding-right:max(4px,env(safe-area-inset-right))}
#game.shell>header.app-top{flex:0 0 auto;z-index:30}
#game .app-avatar canvas{flex:0 0 32px;width:32px;height:32px}
#game .app-avatar{position:relative}
#game .app-menu{position:absolute;left:4px;top:calc(100% + 2px);z-index:60;display:flex;flex-direction:column;gap:2px;width:230px;max-width:calc(100vw - 16px);padding:4px}
#game .app-menu .menu-group{margin:4px 2px 0;color:#e4ca78}
#game .app-menu button{display:flex;align-items:center;gap:8px;min-height:40px;text-align:left}
.res b.hp{color:#5fc85f}.res b.hp.is-bad{color:#e8584c}.res b.mp{color:#4b98da}
#content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;margin:0;padding:0}
/* the phone: the bar in the column under the game (not over it: Safari's bar cannot cover the shortcuts) */
#game.shell>nav.app-nav{position:static;flex:0 0 auto;margin:0 -4px}
/* the play window (Bestiary's arena window): "Lugar › Onde" and the level; strip; the field; the action bar */
#play{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:4px;margin:0;padding:0 0 4px;overflow:hidden}
#crumb{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:26px;margin:0}
#crumb #where{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lvl{flex:0 0 auto;display:flex;align-items:center;gap:6px;min-height:0;height:20px;margin:0;padding:0 2px;background:none;border:0;border-image:none;box-shadow:none;font-size:11px}
#lvl b{font-weight:normal;color:#e8c547;white-space:nowrap}#lvl .fm-bar-p{width:56px}#lvl small{color:#c0c0c0}
#play>.nx-strip{flex:0 0 auto;margin:0 4px}
/* the strip's line wraps on a narrow phone instead of being cut ("6 abates · 11,5k XP/h · 3,6k gp/h") */
#play>.nx-strip small{white-space:normal;overflow:visible}
#board{position:relative;flex:1 1 auto;min-height:0;max-height:none;margin:0 4px;padding:0;line-height:0;overflow:hidden}
nav.app-nav img{image-rendering:pixelated}
/* over the map: dark boxes with the client's edge (level and experience, the party, the last message) */
.map-box{position:absolute;z-index:3;background:rgba(28,28,28,.82);border:1px solid #111;box-shadow:1px 1px #6a6a6a;line-height:12px}
/* the party's bar and the Bestiário's tracker in one column at the right, under the minimap: as wide as what they
   show, both the same width (the owner, 2026-10-28: "Pras duas ficarem certinhas mesmo tamanho") */
#side{position:absolute;right:6px;top:6px;z-index:3;display:grid;gap:4px;width:max-content;max-width:150px;pointer-events:none}
#side>*{pointer-events:auto}
#side>.map-box{position:static}
#partybar{display:grid;gap:2px;padding:2px}
#partybar .pm{display:grid;grid-template-columns:26px minmax(0,1fr);gap:4px;align-items:center;width:100%;min-height:0;margin:0;padding:1px 2px;text-align:left;
  background:none;border:1px solid transparent;border-image:none;font:inherit;color:#fff}
#partybar .pm canvas{width:26px;height:26px;background:#1c1c1c;border:1px solid #000}
#partybar .pm span{display:grid;gap:1px;min-width:0}
#partybar .pm b{display:block;font-weight:normal;font-size:10px;line-height:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#partybar .pm small{display:block;font-size:9px;line-height:10px;color:#a9a9a9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#partybar .pm.is-dead{opacity:.45}
#partybar .pf-head{min-height:16px;font-size:10px;padding:0 4px}
#fm-status{left:6px;bottom:6px;max-width:calc(100% - 64px);min-height:0;height:auto;margin:0;padding:2px 6px;font-size:10px;color:#fff;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-image:none}
#fm-status:empty{display:none}
.conds{display:flex;gap:2px;align-items:center;z-index:3;min-height:28px;line-height:12px;cursor:default}
.conds:empty{display:none}
.conds i{background:none!important;border:0!important}
.conds i{display:grid;place-items:center;width:15px;height:15px;background:#1c1c1c;border:1px solid #000}
.conds img{width:9px;height:9px}
.conds .pz{width:auto;padding:0 4px;gap:4px;display:flex;align-items:center;color:#c0c0c0;font-style:normal;font-size:11px;white-space:nowrap}

/* the map in the field */
#viewport{position:absolute;inset:0;line-height:0;background:#0d0d0d;overflow:hidden;touch-action:none}
#map,#overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block}
#overlay{pointer-events:none}
#target-card{position:absolute;left:6px;bottom:32px;z-index:3;display:flex;align-items:center;gap:5px;padding:2px 6px 2px 2px;max-width:60%;line-height:13px;
  background:rgba(28,28,28,.9);border:1px solid #111;box-shadow:inset 0 0 0 1px #e8584c}
#target-card canvas{width:32px;height:32px;flex:none}
#target-card>span{display:grid;gap:2px;min-width:0}
#target-card b{display:block;color:#fff;font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#target-card .tb{display:block;width:80px;height:5px;background:#000;border:1px solid #000}
#target-card .tb i{display:block;height:100%;background:#e8584c}
#quick{position:absolute;right:6px;bottom:6px;z-index:3;display:flex;flex-direction:column;gap:4px}
#quick button{width:40px;height:40px;min-height:40px;padding:0;display:grid;place-items:center;font-size:20px;background-color:rgba(28,28,28,.55)}
#quick canvas,#quick img{width:32px;height:32px}
#quick .danger{font-size:24px;line-height:24px}
#battle{position:absolute;right:52px;bottom:4px;width:180px;max-height:calc(100% - 8px);display:flex;flex-direction:column;line-height:14px;z-index:5}
#battle .bl{overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1 1 auto}
.bl-row{display:grid;grid-template-columns:32px minmax(0,1fr);gap:4px;align-items:center;width:100%;min-height:36px;padding:1px 3px;text-align:left}
.bl-row canvas{width:32px;height:32px}
.bl-row b{display:block;color:#fff;font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-row .tb{height:4px;background:#000;border:1px solid #000}.bl-row .tb i{display:block;height:100%;background:#5fc85f}
.bl-row.on{box-shadow:inset 0 0 0 1px #e8584c}
#ribbon{position:absolute;left:0;right:0;top:22%;z-index:4;display:grid;justify-items:center;gap:2px;pointer-events:none;line-height:16px;text-align:center}
#ribbon small{color:#fff;text-shadow:1px 1px #000,-1px -1px #000;background:rgba(0,0,0,.5);padding:1px 6px}
#ribbon .re-ribbon{position:relative;display:inline-flex;align-items:flex-start;height:44px;max-width:100%}
#ribbon .re-ribbon img{width:64px;height:44px;flex:0 0 auto}
#ribbon .re-ribbon span{display:block;height:44px;padding:13px 4px 0;background:url('../assets/ui/event/ribbon-mid.png') repeat-x;
  font:bold 13px/31px 'Tibia Pixel',Verdana,sans-serif;color:#fff;text-shadow:1px 1px #000,-1px 0 #000,0 -1px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#ribbon .re-ribbon span b{color:#e8584c;font-size:16px}
#conn{position:absolute;left:50%;top:6px;z-index:6;transform:translateX(-50%);line-height:18px;padding:0 8px;background:#262626;border:1px solid #111;color:#fff}
#cdbar{position:absolute;left:6px;top:40px;z-index:3;display:flex;gap:2px;pointer-events:none}
.cd{position:relative;width:20px;height:20px;display:grid;place-items:center;background:rgba(20,20,20,.72);border:1px solid #000}
.cd img{width:18px;height:18px;opacity:.3}
.cd:not(.busy){visibility:hidden}
.cd.busy img{opacity:1}
.cd i{position:absolute;left:0;right:0;bottom:0;background:rgba(232,197,71,.45);transform-origin:bottom}

/* the shortcuts ("Atalhos"): slots on the client's item.png, six in a row */
#hotbar{flex:0 0 auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:0 4px}
#hotbar .hk:nth-child(n+7){display:none}
.hk{position:relative;display:grid;place-items:center;width:100%;max-width:52px;aspect-ratio:1;height:auto;min-height:0;justify-self:center;padding:0;border:0;border-image:none;
  background:url('../assets/ui/classic/item.png') center/100% 100% no-repeat;touch-action:manipulation}
.hk canvas{width:32px;height:32px}
.hk .w{display:none;position:absolute;left:2px;right:2px;bottom:1px;font-size:9px;line-height:9px;color:#fff;text-shadow:1px 1px #000,-1px 0 #000;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.hk .n{position:absolute;right:4px;bottom:3px;font-size:11px;line-height:11px;color:#fff;text-shadow:1px 1px #000,-1px 0 #000}
.hk .sw{position:absolute;inset:3px;background:rgba(0,0,0,.62);transform-origin:bottom;pointer-events:none}
.hk.none{opacity:.45}.hk.empty{color:#6f6f6f;font-size:16px}

/* the console's colours (the chat window) */
.log p{margin:0;color:#c0c0c0;word-break:break-word;line-height:14px}
.log time{color:#6f6f6f;margin-right:4px}
.say{color:#ffff00}.say b{color:#e8c547;font-weight:normal}.npc{color:#5ff7f7}.info,.status,.loot{color:#fff}
.look{color:#5fc85f}.advance{color:#fff;font-weight:bold}.damage,.exp{color:#a9a9a9}.warn{color:#ff8b7e}
.quest{color:#e4ca78}.chat b{color:#e8c547;font-weight:normal}
.kw{color:#4b98da;text-decoration:underline;cursor:pointer}

/* ---- the windows: centred modals (Bestiary's dialogs), the body scrolls inside, actions at the bottom ---- */
dialog{color:#c0c0c0;padding:0}
dialog::backdrop{background:rgba(0,0,0,.55)}
dialog#sheet,dialog#dialog{width:min(420px,calc(100vw - 12px));max-width:min(420px,calc(100vw - 12px));max-height:calc(100dvh - 24px);margin:auto;overflow:visible}
dialog#sheet[open],dialog#dialog[open]{display:flex;flex-direction:column}
dialog#sheet .grab{display:none}
dialog#sheet .wb,dialog#dialog .wb{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.tabs{display:flex;gap:2px;flex-wrap:wrap}.tabs button{min-height:34px;flex:1 1 0;padding:0 6px}

/* ---- desktop: Bestiary's shell (the bar becomes a rail on the left); the twelve shortcuts ---- */
@media (min-width:1000px){
  #game.shell{padding-left:100px;padding-bottom:4px}
  #game.shell>nav.app-nav{position:fixed;margin:0}
  #hotbar{justify-content:center}
  #hotbar{grid-template-columns:repeat(12,minmax(0,1fr))}#hotbar .hk:nth-child(n+7){display:grid}
  dialog#sheet,dialog#dialog{width:min(520px,calc(100vw - 120px));max-width:min(520px,calc(100vw - 120px))}
}

/* ---- inside the windows ---- */
/* the footer (Bestiary's windows: Fechar and the others on the left, the green action wide on the right) */
dialog .cp-bar.win-foot{position:static;display:flex;gap:4px;margin:0;padding:6px;grid-template-columns:none}
dialog .cp-bar.win-foot>button{flex:0 1 auto;min-height:40px;padding:0 12px}
dialog .cp-bar.win-foot>button.primary{flex:1 1 auto}
dialog .wb{display:flex;flex-direction:column;gap:6px;padding:6px}
dialog .wb>*{flex-shrink:0}               /* the body scrolls; its pieces (tabs above all) keep their height */
dialog .wb>.pf-tabs{margin:0}
/* Caçar (Raids): the tiles hold the game's portrait canvas */
.raid-modal .rp-tile canvas{width:44px;height:44px}
.raid-modal .rp-tile small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.raid-modal .rp-head canvas{width:64px;height:64px}
.raid-modal .rp-head small{display:block;line-height:13px}
.raid-modal .rp-affix{margin:0}
/* Loot: the Market's tiles, gold frame = taken */
dialog .mk-types{display:grid;grid-template-columns:repeat(auto-fill,40px);gap:3px;padding:6px;justify-content:start}
dialog .mk-type .mk-ic canvas{width:32px;height:32px}
dialog .mk-type.is-none{opacity:.45}
/* a rule's ON / OFF (the client's button; on in green, off grey) */
.rule-on{min-height:28px;width:40px;padding:0;font-size:10px;color:#a9a9a9}
.rule-on.is-on{color:#5fc85f;box-shadow:inset 0 0 0 1px #5fc85f}
/* the tabs with an icon (Bestiary's profile tabs, creature.css #detail rules, the same values for the game's windows) */
:is(#sheet,#dialog) .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}
:is(#sheet,#dialog) .profile-nav.cp-tabs::-webkit-scrollbar{display:none}
:is(#sheet,#dialog) .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}
:is(#sheet,#dialog) .profile-nav.cp-tabs button img{opacity:.75}
:is(#sheet,#dialog) .profile-nav.cp-tabs button.active{color:#fff;border-bottom-color:#e8c547}
:is(#sheet,#dialog) .profile-nav.cp-tabs button.active img{opacity:1}
:is(#sheet,#dialog) .profile-nav.cp-tabs .app-dot{top:2px;right:4px}
/* numbers typed in a window: the client's text field, no browser arrows */
dialog input[type=number]{appearance:textfield;-moz-appearance:textfield}
dialog input[type=number]::-webkit-inner-spin-button,dialog input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* Magias: the spell rows' icon (the game's canvas) */
.sf-form .sf-icon canvas{width:32px;height:32px}
.sf-form small.w{color:#e4ca78}.sf-form.is-locked small.w{color:#a9a9a9}
/* the game's additions to Bestiary's profile head: the portrait canvas, a fallen one in grey, life and mana bars */
.cp-portrait canvas{width:64px;height:64px;image-rendering:pixelated}
.cp-portrait.gray canvas{filter:grayscale(1) brightness(.6)}
.cp-badge canvas,.cp-badge img{width:16px;height:16px;object-fit:contain;image-rendering:pixelated}
.cp-bars{display:grid;gap:2px;margin-top:2px}
.cp-bars span{position:relative;display:block;height:12px;background:#000;border:1px solid #3d3d3d}
.cp-bars i{position:absolute;inset:0 auto 0 0;background:#e8584c}.cp-bars span+span i{background:#4b98da}
.cp-bars em{position:relative;display:block;font-style:normal;text-align:center;font-size:9px;line-height:10px;color:#fff;text-shadow:1px 1px #000}
/* NPC talk (Bestiary's Quests): the NPC's face is the game's canvas */
.qj-npc .qj-npc-pic canvas{width:32px;height:32px}
dialog .say-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px}.say-form button{min-height:36px}
dialog .qj-chat{max-height:34dvh;overflow-y:auto;overscroll-behavior:contain}
/* the outcome over the screen (death, disconnection): the game's portrait */
.ba-outcome .st-art canvas{width:48px;height:48px;image-rendering:pixelated}
/* Trade (Bestiary's Market): the goods' tiles hold the game's canvas; the picked amount in the table */
dialog .mk-type{position:relative}dialog .mk-type>b{position:absolute;right:2px;bottom:1px;font-size:10px;color:#fff;text-shadow:1px 1px #000}
dialog .mk-dhead .mk-ic canvas{width:32px;height:32px}
dialog .mk-table tr{cursor:pointer}
/* the item menu and the dragged item are popovers (above the modal windows) */
#ctxmenu[popover]{position:fixed;inset:auto;margin:0;padding:3px;overflow:visible;color:#c0c0c0;min-width:170px}
#ctxmenu:popover-open{display:flex;flex-direction:column}
#ctxmenu button{text-align:left;min-height:42px}
#drag-ghost[popover]{position:fixed;inset:auto;margin:0;padding:0;border:0;background:none;overflow:visible;pointer-events:none;width:32px;height:32px}

/* ---- the game's own pieces in the windows (Bestiary's values: wells #1c1c1c/#262626, frame #c5b47c, item.png) ---- */
.wt-ic{width:16px;height:16px;margin-right:4px;vertical-align:-3px;object-fit:contain}
/* an item slot on the client's item.png (inventory, purchases); a number in the corner; the drop target in gold */
.slot{position:relative;flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;padding:0;min-height:0;border:0;border-image:none;
  background:url('../assets/ui/classic/item.png') center/100% 100% no-repeat}
.slot canvas{width:32px;height:32px}
.slot .n{position:absolute;right:1px;bottom:0;font-size:11px;line-height:11px;color:#fff;text-shadow:1px 1px #000,-1px 0 #000}
.slot.empty canvas{opacity:.18;filter:grayscale(1)}
.slot.drop{box-shadow:inset 0 0 0 1px #c5b47c}
/* Mochila: the equipment doll (Tibia's 3 x 4) beside its numbers; each container a panel of slots */
.doll-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start;padding:6px}
.doll{display:grid;grid-template-columns:repeat(3,40px);gap:3px}
.doll .slot{width:40px;height:40px}
.kv{display:grid;gap:1px;min-width:0}
.kv div{display:flex;justify-content:space-between;gap:6px;padding:2px 6px;background:#262626;border-bottom:1px solid #111}
.kv div:nth-child(even){background:#2b2b2b}.kv b{color:#fff;font-weight:normal}.kv .coin{color:#f4d35e}
.cwin .pf-head{gap:4px;justify-content:flex-start}.cwin .pf-head small{margin-left:auto}
.cwin .pf-head .x{flex:0 0 auto;width:30px;height:18px;min-height:0;padding:0;border:0;border-image:none;background:url('../assets/ui/classic/close-normal.png') center/14px 14px no-repeat}
.cico{display:inline-block;width:16px;height:16px;overflow:hidden}.cico canvas{width:16px;height:16px}
.cgrid{display:flex;flex-wrap:wrap;gap:2px;padding:4px}
/* the editors (Preparar, a rule): rows in wells, ▲▼ order, steppers; the picked one with the gold frame */
.rules{display:flex;flex-direction:column;gap:3px;padding:0 4px 4px}
.rule{display:grid;grid-template-columns:40px 32px minmax(0,1fr) auto;gap:6px;align-items:center;min-height:44px;padding:3px 4px;text-align:left;width:100%;
  background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a;color:#c0c0c0}
.rule canvas{width:32px;height:32px}
.rule b{color:#fff;font-weight:normal}.rule em{font-style:normal;color:#e8c547}
.rule.off{opacity:.55}
.prep-order{display:flex;flex-direction:column;gap:2px}.prep-order button{min-height:22px;width:32px;padding:0;font-size:10px}
.prep-add{width:100%;min-height:40px;margin-top:3px}
.loot-row{display:grid;grid-template-columns:32px minmax(0,1fr);gap:6px;align-items:center;min-height:40px;padding:2px 6px;background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.loot-row canvas{width:32px;height:32px}
.loot-row b{display:block;color:#fff;font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loot-row small{color:#a9a9a9}
.loot-row.prep-buy{grid-template-columns:34px minmax(0,1fr) 72px 36px}.prep-buy input{width:72px}.prep-buy .x-row{min-height:36px;padding:0}
dialog .mk-type.loot-row{display:block;min-height:0;padding:0;background:none;border:0;box-shadow:none}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:3px}
.pick{display:flex;flex-direction:column;align-items:center;gap:1px;min-height:58px;padding:2px;font-size:9px;line-height:10px;text-align:center}
.pick canvas{width:32px;height:32px}.pick.on{color:#fff;box-shadow:inset 0 0 0 1px #c5b47c}.pick.no{opacity:.4}
.loot-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.lp{display:grid;justify-items:center;gap:1px;min-height:58px;padding:3px 1px;font-size:9px;line-height:10px;text-align:center}
.lp canvas{width:32px;height:32px}.lp span{color:#a9a9a9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.lp.on{color:#fff;box-shadow:inset 0 0 0 1px #c5b47c}.lp.on span{color:#fff}
.rule-step{display:flex;flex-direction:column;gap:6px;min-height:120px}
.when{display:grid;gap:3px}
/* what is picked or on: the client's gold frame. An outline, drawn over the button: the classic buttons paint their
   texture (border-image fill) over an inset box-shadow, which hid the mark (the owner: "não dá a marcação visual") */
.pick.on,.lp.on,.rp-modes button.is-sel,.sf-form.is-sel,.tabs button.on,#chat-tabs button.on,.hp-toggle.on,.split-chips button.active,
.pf-tabs button.active,.pf-chips button.active,.back-opt.is-sel,.calm-opt.is-sel{outline:2px solid #c5b47c;outline-offset:-2px;color:#e8c547}
/* the same frame for the picks of the newer windows (respawns, Guilda, Store, Premium, Fenda, Conta, Admin): their inset
   box-shadow sits under the same texture (the owner: the tapped respawn wasn't marked) */
.rs-row.is-sel,.gd-c.sel,.gd-look.sel,.gd-pick button.sel,.st-cats button.active,.st-card.sel,.st-pack.sel,.st-pay button.active,
.st-opts button.active,.pm-opts button.active,.fx-auto button.sel,.fx-who .fx-p.sel,.admin-modes button.active,.cs-toggle.active{outline:2px solid #c5b47c;outline-offset:-2px}
.rule-on.is-on{outline:1px solid #5fc85f;outline-offset:-2px}
.bl-row.on{outline:1px solid #e8584c;outline-offset:-1px}
.stepper{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:4px;align-items:center}
/* Separar: the amount (stepper + quick amounts) and where to (aw-path cards, the picked one in the client's gold frame) */
.split-n{display:grid;gap:4px;padding:6px}
/* Party Hunt Analyser: two lines under each name; the split as who → whom */
.pa-members .an-member .t small{display:block}
.pa-split{padding:6px}
.split-chips{display:flex;flex-wrap:wrap;gap:4px}
.split-chips button{flex:1 1 0;min-height:36px;white-space:nowrap}
.split-chips button.active{box-shadow:inset 0 0 0 1px #c5b47c;color:#e8c547}
.split-to{padding:6px;grid-template-columns:repeat(2,minmax(0,1fr))}
.split-to .card{display:grid;justify-items:center;gap:2px;min-height:0;padding:6px 4px}
.split-to .card b,.split-to .card small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stepper button{min-height:44px;font-size:16px}
.stepper output{display:grid;place-items:center;min-height:44px;background:#1c1c1c;border:1px solid #111;color:#e8c547;font-size:16px}
/* the class briefing: the spell's scene on a floor (the game's canvas) */
.bf-stagebox{border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a;background:#000;line-height:0}
.bf-stage{width:100%;height:auto}
.spell-text{margin:0;padding:6px 2px;color:#c0c0c0;line-height:1.35}
.bf-grid .bf-mini canvas{width:100%;height:auto;border:1px solid #111}
.bf-mini b canvas{width:16px;height:16px;border:0}
/* choice cards (Bestiary's aw-path st) holding the game's portraits and icons */
.st canvas{max-width:64px;max-height:64px}
.st>img{width:32px;height:32px;object-fit:contain}
.st small{display:block;color:#a9a9a9;line-height:12px}
/* help: the analyser's rows with the client's icons */
.tips .an-slot img{width:32px;height:32px;object-fit:contain}
/* the map's canvases are sized by main.js layout (no cap from Auto Farm's field) */
#board canvas{max-height:none;max-width:none;aspect-ratio:auto}
#board #map{display:block}

/* ---- mockup 3: the hunt window (the bag over the map) and the auxiliary's windows ---- */
.hw-n{font-weight:normal;font-size:16px;color:#fff;white-space:nowrap}
.hw-h{font-style:normal;color:#e8c547}
.hw-loot{display:flex;flex-wrap:wrap;gap:3px;padding:6px}
.hw-loot .ba-slot{position:relative;width:44px;height:44px;display:grid;place-items:center}
.hw-loot canvas{width:32px;height:32px}
.hw-loot b{position:absolute;right:3px;bottom:1px;font-weight:normal;font-size:10px;line-height:10px;color:#fff;text-shadow:1px 1px #000,-1px 0 #000}
.st-grid.aux-cards{grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:4px;padding:4px}
.st-grid.aux-cards .st:last-child:nth-child(odd){grid-column:auto}
.aux-cards .st{min-height:0}
.aux-cards .st small{display:block;color:#c0c0c0;line-height:13px}
.aux-cards .st-art canvas{width:64px;height:64px}
.aux-name{display:flex;gap:4px;padding:6px}.aux-name input{flex:1;min-width:0}
.aux-bars{display:grid;gap:2px;padding:0 6px 6px}
#aux-error:empty{display:none}

/* the Necromante (server/necro.py): shadows dark, their life and time, the talents in two columns */
.is-shade{filter:brightness(var(--shade-b,.3)) saturate(.25) drop-shadow(0 0 1px #9b5cff) drop-shadow(0 0 2px #9b5cff)}
.necro-bar{display:block;height:4px;margin-top:2px;background:#1c1c1c;border:1px solid #000}.necro-bar i{display:block;height:100%}
.necro-rows .an-member .t small,.necro-steps .an-member .t small{white-space:normal}
/* Fortalecer: the name and the cost whole on a phone ("+1 nível · 10 Essências" in two lines when it must) */
.necro-rows .an-member .t b{white-space:normal;overflow-wrap:anywhere}
.necro-up{max-width:112px;white-space:normal;line-height:13px;padding-top:2px;padding-bottom:2px}
.necro-time{color:#e8c547}
.necro-note{margin:0;padding:6px}
.necro-tal{grid-template-columns:repeat(2,minmax(0,1fr))!important}
/* Sombras: four tabs with the Maestria (server/mastery.py) share a 320 px phone */
dialog#dialog .pf-tabs.necro-tabs button{min-width:0;padding-left:2px;padding-right:2px}
.necro-tal .rp-tile.is-on{box-shadow:none;outline:1px solid #c5b47c;outline-offset:-1px}
.necro-tal .rp-tile.is-sel{outline:2px solid #c5b47c;outline-offset:-2px}

/* Menu › Vocações: the tabs with the vocation's icon, two lines under each name, the runes and potions as tiles */
.kits-tabs button{display:flex;align-items:center;justify-content:center;gap:2px;padding:0 2px}
.kits-rows .an-member .t small{white-space:normal}
.kits-grid{padding:6px;grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
.kits-grid .pick{min-height:64px;overflow-wrap:anywhere}
.kits-grid .pick small{display:block;color:#a9a9a9;font-size:9px;white-space:nowrap}
/* the Maestria (server/mastery.py) on Bestiary's mastery.css: room under the selected mark, the prova in one row */
.ms-node i{margin:7px 0 10px}
.ms-trail::before{top:25px}
.ms-mark .ms-prova b{grid-column:auto}
.ms-mark>.pf-note{margin:0}
.ms-opt:disabled{cursor:default}
/* the Prova's moments (server/prova.py) on Bestiary's santiago.css: the guide's window over the map, the briefing, the end */
.pv-layer .sg-hint{z-index:1}
body:has(dialog[open]) .pv-layer{display:none}
.pv-guide{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px;padding:6px}
.pv-guide .sg-portrait{background:#262626;display:grid;place-items:center;overflow:hidden}
.pv-guide.pv-mini{grid-template-columns:48px minmax(0,1fr)}.pv-guide.pv-mini .sg-portrait{width:48px;height:48px}
.pv-ok{color:#5fc85f}
.pv-videos{padding:4px}
.pv-bar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;padding:6px}
.pv-bar span{position:relative;display:grid;place-items:center;aspect-ratio:1;background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.pv-bar span.is-new{outline:1px solid #c5b47c}.pv-bar i{position:absolute;right:2px;bottom:0;font-style:normal;color:#e4ca78;font-size:10px}
.pv-cmp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px}
.pv-cmp .pf-panel{margin:0}.pv-cmp .an-kv{grid-template-columns:minmax(0,1fr) auto}
.pv-cmp ul{margin:0;padding:4px 6px;list-style:none;display:grid;gap:2px}.pv-cmp li{color:#a9a9a9}.pv-cmp li.ok{color:#5fc85f}
.pv-cmp .pv-best{color:#e8c547}.pv-ic{display:grid;place-items:center;padding:4px}.pv-try{display:grid;padding:0 6px 6px}
/* the Bestiário (server/bestiary.py) on Bestiary's cyclopedia.css: in a window, two classes a row on a phone, names whole */
.cy-win .wb{padding:0}.cy-win .cy{gap:4px;max-width:none;width:100%;margin:0}
.cy-win .cy-bar>button span{display:inline!important}
.cy-win .cy-classes{grid-template-columns:repeat(2,minmax(0,1fr))!important}
/* the Bestiário's search, over its classes (web/js/ui.js bsClasses) */
.cy-search{display:flex;padding:6px 6px 0}.cy-search input{flex:1 1 auto;min-width:0}
.cy-found .cy-hint{padding:6px}
.cy-win .cy-class b{white-space:normal!important;overflow:visible!important;letter-spacing:0!important}
.cy-card.unknown .cy-art canvas{filter:brightness(0)}
.cy-win .cy-loot-row{grid-template-columns:72px 1fr}
.cy-win .ch-grades>div{white-space:normal!important;overflow:visible!important}
.cy-win .cy-res{gap:3px 14px}.cy-win .cy-res>div{grid-template-columns:16px 1fr 34px}
.cy-win .cy-crumb{cursor:pointer}
.cy-win .cy-hint{padding:0 8px}
/* the narrowest phones (320 px): a window's footer wraps (the green action on a row of its own) instead of cutting its
   buttons (the owner, 2026-10-24: nothing cut); the Fenda's "Ao abrir" row in web/css/rift.css */
@media (max-width:359px){
  dialog .cp-bar.win-foot{flex-wrap:wrap}
  dialog .cp-bar.win-foot>button{flex:1 1 0;min-width:0;padding:0 6px}
  dialog .cp-bar.win-foot>button.primary{flex:1 1 100%}
}
/* Loot › Pegar e guardar (web/js/ui.js lootPick): Tibia's protection-zone icon, 9 px as in the client, in the tile's
   top corner (the count sits at the bottom); the choice over the Loot window, its three answers one under the other */
dialog .mk-type .lt-keep{position:absolute;top:2px;right:2px;width:9px;height:9px;image-rendering:pixelated;pointer-events:none}
.lt-legend{white-space:nowrap}.lt-legend img{width:9px;height:9px;vertical-align:-1px;image-rendering:pixelated}
.lt-pick .ba-outcome-banner strong{text-align:center;overflow-wrap:anywhere}
.lt-pick .ba-outcome-banner small{white-space:normal;text-align:center;line-height:14px}
.lt-pick .st-art canvas{width:32px;height:32px}
.lt-pick .ba-outcome-note{padding:0 6px;line-height:14px}
.lt-pick .ba-outcome-actions{flex-direction:column;padding:0 6px 6px}
.lt-pick .ba-outcome-actions button{min-height:32px}
/* Market (web/js/market.js) on the Bestiary client's market.css: the back arrow always (it hides it on a desktop there),
   the pages of a list, the quantity next to its button */
#dialog[data-win=market] .mk-back{display:inline-grid;place-items:center}
#dialog[data-win=market] .mk-dhead{display:flex;align-items:center;gap:6px;margin:0 0 4px}
#dialog[data-win=market] .mk-dhead>span:last-child{display:flex;flex-direction:column;min-width:0}
#dialog[data-win=market] .mk-tabs{margin:4px 0}
#mk-q{width:100%;margin:4px 0}
.mk-bal{margin:2px 0 4px;white-space:normal;overflow:visible;text-overflow:clip}
.mk-pager{display:flex;align-items:center;justify-content:center;gap:10px;padding:3px}
.mk-pager button{min-width:36px}
.mk-act{display:flex;gap:4px;align-items:center;justify-content:flex-end}
.mk-qty{width:52px}
.mk-row.active{box-shadow:inset 0 0 0 1px #c5b47c}
#dialog[data-win=market] .mk-table td{white-space:normal}
#dialog[data-win=market] .mk-table td small{display:block;white-space:normal;line-height:12px}
#dialog[data-win=market] .mk-table .mk-link{white-space:normal;text-align:left;padding:0}
/* Lojas (web/js/ui.js shopsWindow): the town's sellers, a row each (portrait, name, goods), Bestiary's pf-panel */
.lj-list{display:grid;gap:3px;padding:6px}
.lj-loot{max-height:min(46vh,380px);overflow-y:auto}
.lj-left{max-height:min(22vh,180px)}
.lj-row{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:6px;min-height:40px;padding:2px 6px;text-align:left}
.lj-pic{width:32px;height:32px;display:grid;place-items:center}.lj-pic canvas,.lj-pic img{width:32px;height:32px}
.lj-txt{display:grid;min-width:0}.lj-txt b{font-weight:normal;color:#fff}.lj-txt small{color:#a9a9a9;overflow-wrap:anywhere}
.lj-why{margin:0;padding:4px 6px;font-size:11px;color:#e8584c}