/* TibiaRealms on the Bestiary skin (docs/DESIGN.md): the classic Tibia client atlas (window, buttons, slots, text
   fields), the Bestiary shell (top bar with avatar and Menu, balances, five destinations with client icons) and
   bottom sheets within reach of the thumb. iPhone: nothing wider than the screen, no page bounce or zoom, scroll
   boxes in flex columns (Safari shrinks grid rows with a max height). */
@font-face{font-family:'Tibia Pixel';src:url('../assets/fonts/tibia-pixel.woff') format('woff');font-weight:normal}
@font-face{font-family:'Tibia Pixel';src:url('../assets/fonts/tibia-pixel-bold.woff') format('woff');font-weight:bold}
:root{
  --ground:#171717;--panel:#3d3d3d;--well:#262626;--deep:#1c1c1c;--line:#111;--hi:#6a6a6a;--head:#2f2f2f;--row:#323232;
  --text:#c0c0c0;--white:#fff;--muted:#a9a9a9;--dim:#6f6f6f;--gold:#e8c547;--msg:#e4ca78;--coin:#f4d35e;--frame:#c5b47c;
  --good:#5fc85f;--good2:#7cf08a;--bad:#e8584c;--bad2:#e8756c;--bad3:#ff8b7e;--mana:#4b98da;
  --pixel:'Tibia Pixel',Verdana,sans-serif;color-scheme:dark;
  --safe-b:env(safe-area-inset-bottom,0px);--nav-h:calc(60px + var(--safe-b));
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;width:100%;max-width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--ground) url('../assets/ui/classic/dark_background.png');
  color:var(--text);font:11px/14px var(--pixel)}
body{position:fixed;inset:0;touch-action:manipulation;-webkit-text-size-adjust:100%}
#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 client's atlas ---- */
button{font:11px var(--pixel);color:#deded7;background:none;border:3px solid transparent;border-image:url('../assets/ui/classic/button-normal.png') 3 fill stretch;
  min-height:28px;padding:0 8px;cursor:pointer;touch-action:manipulation}
@media(hover:hover){button:hover:not(:disabled){border-image-source:url('../assets/ui/classic/button-hover.png');color:var(--white)}}
button:active,button.active,button.on{border-image-source:url('../assets/ui/classic/button-pressed.png');color:var(--white)}
button.primary,button.go{border:1px solid #142313;border-image:none;background:#3f6a3a;box-shadow:inset 1px 1px #77a46d,inset -1px -1px #24401f;color:#e8f3e1}
button.primary:active{background:#355a31}button.danger,button.stop{color:var(--bad3)}button:disabled{opacity:.5;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible{outline:1px solid var(--gold);outline-offset:1px}
input,select{font:16px var(--pixel);color:var(--white);background:#393939 url('../assets/ui/classic/textedit.png') center/100% 100%;border:1px solid var(--line);
  min-height:34px;padding:0 8px;max-width:100%;min-width:0}
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px;height:22px;min-height:22px;padding:0;border:0;
  background:url('../assets/ui/classic/checkbox-off.png') center/100% 100% no-repeat}
input[type=checkbox]:checked{background-image:url('../assets/ui/classic/checkbox-on.png')}
input[type=radio]{min-height:0;accent-color:var(--gold)}
label{display:grid;gap:3px}label.check{display:flex;align-items:center;gap:6px}
.window,.win{border:6px solid transparent;border-image:url('../assets/ui/classic/window.png') 27 6 6 6 stretch;
  background:#4b4b4b url('../assets/ui/classic/panel-texture.png');color:var(--text);min-width:0;max-width:100%}
.window-title,.wt{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:22px;margin-top:-5px;padding:0 2px;color:var(--text)}
.window-title .x,.wt .x{flex:0 0 auto;width:40px;height:30px;min-height:0;padding:0;border:0;border-image:none;
  background:url('../assets/ui/classic/close-normal.png') center/20px 20px no-repeat}
.window-title .x:active,.wt .x:active{background-image:url('../assets/ui/classic/close-pressed.png')}
.wb{padding:6px;display:flex;flex-direction:column;gap:6px;min-width:0}
.wf{display:flex;justify-content:flex-end;gap:4px;padding:6px;background:var(--panel) url('../assets/ui/classic/panel-texture.png');
  border-top:1px solid var(--line);box-shadow:0 -1px var(--hi)}
.wf button{min-height:44px;padding:0 14px;flex:1 1 0}
.pf-panel{background:var(--panel) url('../assets/ui/classic/panel-texture.png');border:1px solid var(--line);box-shadow:1px 1px var(--hi),inset 1px 1px var(--hi);min-width:0}
.pf-head{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:20px;margin:0;font:11px var(--pixel);padding:1px 6px;background:var(--head);
  border-bottom:1px solid var(--line);box-shadow:0 1px #5e5e5e;color:var(--text)}
.pf-head small{color:var(--muted)}
.well{background:var(--well);border:1px solid var(--line);box-shadow:inset 1px 1px #000,1px 1px var(--hi)}
.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 no-repeat}
.slot canvas{width:32px;height:32px}
.slot .n{position:absolute;right:1px;bottom:0;font-size:11px;line-height:11px;color:var(--white);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 var(--gold)}
.err{color:var(--bad3);margin:0;min-height:14px}.hint{color:var(--muted);margin:0;line-height:15px}

/* ---- login and creation ---- */
.screen{position:fixed;inset:0}
#boot,#login,#create{display:grid;place-items:center;padding:16px;overflow-y:auto}
.boot-win{width:min(320px,100%)}#boot-text{margin:0}
.bar{height:8px;background:var(--deep);border:1px solid #000}.bar i{display:block;height:100%;width:0;background:var(--gold)}
.login-win{width:min(360px,100%)}.create-win{width:min(460px,100%)}
.sex{display:flex;gap:16px;border:1px solid var(--line);padding:4px 8px;margin:0}.sex legend{color:var(--muted)}.sex label{display:flex;gap:4px;align-items:center}
.vocs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.vocs button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px 0;min-height:96px}
.vocs button.on{box-shadow:inset 0 0 0 1px var(--frame);color:var(--gold)}
.vocs button .soon{color:var(--muted)}
.vocs canvas{width:64px;height:64px}
.voc-info{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;align-items:center;min-height:56px;color:var(--white)}
.voc-info small{display:block;color:var(--muted)}

/* ---- game shell ---- */
#game{display:flex;flex-direction:column;height:100%;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);overflow:hidden}
header.app-top{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:5px;padding:2px 4px;z-index:30;border-width:4px}
.app-avatar{position:relative;display:flex;align-items:center;gap:5px;flex:0 1 auto;min-width:0;max-width:44%;height:40px;min-height:40px;padding:0 6px 0 2px;text-align:left}
.app-avatar canvas{flex:0 0 32px;width:32px;height:32px}
.av-txt{display:grid;min-width:0;line-height:12px}
.av-txt b{font-weight:normal;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av-txt small{color:var(--msg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-avatar .menu-label{position:absolute;left:3px;bottom:-1px;font-size:9px;line-height:9px;color:var(--msg);text-shadow:1px 1px #000}
.app-avatar.active{box-shadow:inset 0 0 0 1px var(--frame)}
.vitals{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.vbar{position:relative;height:16px;background:var(--deep);border:1px solid #000;box-shadow:1px 1px var(--hi)}
.vbar i{position:absolute;inset:0 auto 0 0;width:100%;background:var(--bad)}
.vbar.mp i{background:var(--mana)}
.vbar span{position:relative;display:block;text-align:center;line-height:14px;color:var(--white);text-shadow:1px 1px #000}
.resources{display:flex;gap:3px;flex:0 0 auto}
.res{display:inline-flex;align-items:center;gap:4px;height:34px;min-height:34px;padding:0 6px;color:var(--white);background:var(--deep);
  border:1px solid var(--line);border-image:none;box-shadow:inset 1px 1px #000,1px 1px var(--hi)}
.res b{font-weight:normal;color:var(--coin)}
.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}
.app-menu .menu-group{margin:4px 2px 0;color:var(--msg)}
.app-menu .menu-group:first-child{margin-top:0}
.app-menu button{display:flex;align-items:center;gap:8px;min-height:40px;text-align:left}
.app-menu button img{flex:0 0 auto}

#play{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.board{flex:0 0 auto;padding:0;position:relative;margin:3px 3px 0}
.board .pf-head{justify-content:flex-start;height:20px}
.board .pf-head #where{flex:0 1 auto;color:var(--msg)}
.board .pf-head small{margin-left:auto;white-space:nowrap}
#viewport{margin:0 auto}
/* faixa acima do mapa (Bestiary .nx-strip): o próximo passo ou a caçada em andamento, com a ação ao lado */
.nx-strip{flex:0 0 auto;display:flex;align-items:center;gap:6px;margin:3px 3px 0;padding:2px 2px 2px 4px;min-height:40px;border:1px solid #111;box-shadow:1px 1px #6a6a6a,inset 1px 1px #6a6a6a;background:#2f2f2f}
.nx-strip.is-action{border-color:var(--frame);box-shadow:inset 0 0 0 1px var(--frame)}
.nx-strip canvas{width:32px;height:32px;flex:none}
.nx-strip span{flex:1 1 0;min-width:0;display:grid}
.nx-strip b{color:var(--gold);font-weight:normal;line-height:12px}
.nx-strip small{color:var(--white);line-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-strip button{flex:none;min-height:34px;padding:0 10px}
.conds{display:flex;gap:2px;align-items:center}
.conds i{display:grid;place-items:center;width:15px;height:15px;background:var(--deep);border:1px solid #000}
.conds img{width:9px;height:9px}
.conds .pz{width:auto;padding:0 4px;gap:3px;display:flex;align-items:center;color:var(--good);font-style:normal}
#viewport{position:relative;margin:0 auto;line-height:0;background:#000;overflow:hidden;touch-action:none}
#map{display:block}
#overlay{position:absolute;left:0;top:0;pointer-events:none}
#target-card{position:absolute;left:4px;bottom:4px;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 var(--bad)}
#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:var(--white);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:var(--bad)}
#quick{position:absolute;right:4px;bottom:4px;display:flex;flex-direction:column;gap:4px}
#quick button{width:44px;height:44px;min-height:44px;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:var(--white);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:var(--good)}
.bl-row.on{box-shadow:inset 0 0 0 1px var(--bad)}
#ribbon{position:absolute;left:0;right:0;top:22%;display:grid;justify-items:center;gap:2px;pointer-events:none;line-height:16px;text-align:center}
#ribbon small{color:var(--white);text-shadow:1px 1px #000,-1px -1px #000;background:rgba(0,0,0,.5);padding:1px 6px}
.re-ribbon{position:relative;display:inline-flex;align-items:flex-start;height:44px;max-width:100%}
.re-ribbon img{width:64px;height:44px;flex:0 0 auto}
.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 var(--pixel);color:#fff;text-shadow:1px 1px #000,-1px 0 #000,0 -1px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.re-ribbon span b{color:var(--bad);font-size:16px}
#conn{position:absolute;left:50%;top:6px;transform:translateX(-50%);line-height:18px;padding:0 8px;background:var(--well);border:1px solid var(--line);color:var(--white)}
#expbar{position:relative;height:9px;background:var(--deep);border-top:1px solid #000}
#expbar i{position:absolute;inset:0 auto 0 0;background:var(--gold)}
#expbar span{position:relative;display:block;text-align:center;font-size:9px;line-height:8px;color:var(--white);text-shadow:1px 1px #000}

#partybar{flex:0 0 auto;display:flex;gap:3px;padding:3px;overflow-x:auto;scrollbar-width:none;background:var(--panel) url('../assets/ui/classic/panel-texture.png');
  border-bottom:1px solid var(--line)}
#partybar::-webkit-scrollbar{display:none}
.pm{position:relative;flex:0 0 auto;display:grid;grid-template-columns:32px 70px;gap:4px;align-items:center;min-height:44px;padding:2px 4px 2px 2px;text-align:left}
.pm.on{box-shadow:inset 0 0 0 1px var(--frame)}
.pm canvas{width:32px;height:32px}
.pm b{display:block;color:var(--white);font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:12px}
.pm small{display:block;color:var(--muted);line-height:11px}
.pm .mini{display:grid;gap:1px;margin-top:2px}.pm .mini span{display:block;height:4px;background:#000}
.pm .mini i{display:block;height:100%;background:var(--bad)}.pm .mini span+span i{background:var(--mana)}
.pm.dead canvas{filter:grayscale(1) brightness(.5)}
.pm .tgt{position:absolute;right:3px;top:3px;width:6px;height:6px;background:var(--bad);border:1px solid #000}
.pm.lock{grid-template-columns:1fr;justify-items:center;min-width:54px;color:var(--muted);line-height:12px;text-align:center}
.pm.lock b{color:var(--msg)}

#cdbar{position:absolute;right:3px;top:3px;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}

#hotbar{flex:0 0 auto;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 15px) / 6);gap:3px;padding:3px 4px 4px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;background:var(--panel) url('../assets/ui/classic/panel-texture.png');
  border-bottom:1px solid var(--line)}
.hk{position:relative;display:grid;place-items:center;height:46px;min-height:46px;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{position:absolute;left:2px;right:2px;bottom:1px;font-size:9px;line-height:9px;color:var(--white);text-shadow:1px 1px #000,-1px 0 #000;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.hk .n{position:absolute;right:3px;top:2px;font-size:11px;line-height:11px;color:var(--white);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:var(--dim);font-size:16px}

#console{flex:1 1 auto;min-height:62px;display:flex;flex-direction:column;margin:0 3px 3px;padding:0}
.con-head{height:20px}.con-head .console-open{position:static;min-height:18px;height:18px;padding:0 8px;line-height:12px}
#hotbar::-webkit-scrollbar{display:none}
.console-tabs{display:none;gap:2px;margin-top:-2px;overflow-x:auto;scrollbar-width:none;flex:0 0 auto}
.console-tabs::-webkit-scrollbar{display:none}
.console-tabs button{min-height:26px;padding:0 7px;white-space:nowrap;flex:0 0 auto}
.console-tabs button.new{color:var(--gold)}
.console-lines{flex:1 1 auto;min-height:0;overflow:hidden;margin:3px;padding:2px 5px;background:var(--deep);border:1px solid var(--line);
  box-shadow:inset 1px 1px #000;display:flex;flex-direction:column;justify-content:flex-end}

#console{position:relative}
.log p,.console-lines p{margin:0;color:var(--text);word-break:break-word;line-height:14px}
.log time,.console-lines time{color:var(--dim);margin-right:4px}
.say{color:#ffff00}.say b{color:var(--gold);font-weight:normal}.npc{color:#5ff7f7}.info,.status,.loot{color:var(--white)}
.look{color:var(--good)}.advance{color:var(--white);font-weight:bold}.damage,.exp{color:var(--muted)}.warn{color:var(--bad3)}
.quest{color:var(--msg)}.chat b{color:var(--gold);font-weight:normal}
.kw{color:var(--mana);text-decoration:underline;cursor:pointer}

nav.app-nav{flex:0 0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:3px 3px calc(3px + var(--safe-b));
  background:var(--head);border-top:1px solid var(--line);box-shadow:0 -1px #5e5e5e;z-index:40}
nav.app-nav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;min-width:0;height:54px;min-height:54px;
  padding:1px 1px 3px;color:var(--muted);line-height:12px}
nav.app-nav button.active{color:var(--white);box-shadow:inset 0 0 0 1px var(--frame)}
nav.app-nav .ni,nav.app-nav img{display:block;width:32px;height:32px}
nav.app-nav .ni canvas{width:32px;height:32px}
.app-dot{position:absolute;top:4px;right:calc(50% - 20px);width:7px;height:7px;background:var(--bad);border:1px solid #111}
#side{display:none}

/* ---- bottom sheets: panels open from the bottom, actions where the thumb is ---- */
dialog{color:var(--text);padding:0}
dialog::backdrop{background:rgba(0,0,0,.5)}
dialog.sheet{position:fixed;inset:auto 0 var(--nav-real,64px) 0;margin:0;width:100%;max-width:100%;max-height:calc(100dvh - var(--nav-real,64px) - 56px);
  display:none;flex-direction:column;overflow:hidden;z-index:35}
dialog.sheet[open]{display:flex;animation:sheet-up .16s ease-out}
@keyframes sheet-up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){dialog.sheet[open]{animation:none}}
dialog.sheet .grab{width:44px;height:4px;margin:2px auto 0;background:var(--hi);border-radius:2px}
dialog.sheet .wb{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
dialog#dialog{max-width:min(420px,calc(100vw - 16px));width:100%;max-height:calc(100dvh - 24px);overflow:hidden}
dialog#dialog[open]{display:flex;flex-direction:column}
dialog#dialog .wb{overflow-y:auto;overflow-x:hidden;min-height:0}
.tabs{display:flex;gap:2px;flex-wrap:wrap}.tabs button{min-height:34px;flex:1 1 0;padding:0 6px}

/* inventory: the client's equipment doll */
.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}
.cwin .pf-head{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}
.kv{display:flex;flex-direction:column;gap:2px;min-width:0}
.kv div{display:flex;justify-content:space-between;gap:6px;padding:2px 6px;background:var(--well);border:1px solid var(--line)}
.kv div:nth-child(even){background:var(--row)}.kv b{color:var(--white);font-weight:normal}.kv .coin{color:var(--coin)}
.cwin .pf-head{gap:4px}.cwin .pf-head canvas{width:16px;height:16px}
.cgrid{display:flex;flex-wrap:wrap;gap:2px;padding:4px}
.prog{height:6px;background:var(--deep);border:1px solid #000}.prog i{display:block;height:100%;background:var(--gold)}
.prog.good i{background:var(--good)}

/* party */
.member{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:8px;align-items:center;padding:4px}
.member canvas.full{width:64px;height:64px}
.member b{color:var(--white);font-weight:normal}
.member .bars{display:grid;gap:2px;margin-top:3px}
.member .bars span{position:relative;display:block;height:12px;background:var(--deep);border:1px solid #000}
.member .bars i{position:absolute;inset:0 auto 0 0;background:var(--bad)}.member .bars span+span i{background:var(--mana)}
.member .bars em{position:relative;display:block;font-style:normal;text-align:center;font-size:9px;line-height:10px;color:var(--white);text-shadow:1px 1px #000}
.rules{display:flex;flex-direction:column;gap:3px;padding:0 4px 4px}
.rule{display:grid;grid-template-columns:22px 32px minmax(0,1fr) auto;gap:6px;align-items:center;min-height:44px;padding:3px 4px;text-align:left;width:100%}
.rule canvas{width:32px;height:32px}
.rule b{color:var(--white);font-weight:normal}.rule em{font-style:normal;color:var(--gold)}
.rule.off{opacity:.55}
.rule-edit{display:flex;flex-direction:column;gap:6px}
.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{box-shadow:inset 0 0 0 1px var(--frame);color:var(--white)}.pick.no{opacity:.4}
.chips{display:flex;flex-wrap:wrap;gap:3px}.chips button{min-height:36px}
.stepper{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:4px;align-items:center}
.stepper button{min-height:44px;font-size:16px}
.stepper output{display:grid;place-items:center;min-height:44px;background:var(--deep);border:1px solid var(--line);color:var(--gold);font-size:16px}
.unlock{display:flex;flex-direction:column;gap:4px;padding:6px}
.unlock .head{display:flex;align-items:center;gap:6px}.unlock b{color:var(--white);font-weight:normal}
.unlock.soon{opacity:.7}

/* spells */
.sp-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:6px;align-items:center;padding:2px 4px;min-height:40px}
.sp-row canvas{width:32px;height:32px}.sp-row b{color:var(--white);font-weight:normal}.sp-row small{color:var(--muted)}
.sp-row.lock{opacity:.5}.sp-row .words{color:var(--msg)}

/* NPC conversation and trade */
.npc-head{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;align-items:center}
.npc-head canvas{width:64px;height:64px}
.npc-say{padding:6px 8px;background:var(--deep);border:1px solid var(--line);color:#5ff7f7;line-height:16px}
.npc-log{display:flex;flex-direction:column;gap:3px;max-height:28dvh;overflow-y:auto;overscroll-behavior:contain}
.npc-log p{margin:0;line-height:15px}.npc-log .me{color:var(--gold)}.npc-log .them{color:#5ff7f7}
.keys{display:flex;flex-wrap:wrap;gap:4px}.keys button{min-height:40px;color:var(--mana)}
.trow{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:6px;align-items:center;padding:3px 4px;background:var(--well);border:1px solid var(--line)}
.trow:nth-child(even){background:var(--row)}
.trow b{display:block;color:var(--white);font-weight:normal}.trow small{color:var(--coin)}
.trow .act{display:flex;align-items:center;gap:3px}
.trow .act button{min-height:40px;min-width:40px;padding:0 6px}
.trow .act output{min-width:26px;text-align:center;color:var(--white)}
.tlist{display:flex;flex-direction:column;gap:2px}

/* outcomes (ba-outcome) */
.outcome{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:4px 0}
.outcome .gains{display:flex;flex-direction:column;gap:2px;width:100%}
.outcome .gains div{display:flex;justify-content:space-between;padding:2px 8px;background:var(--well);border:1px solid var(--line)}
.outcome .gains b{color:var(--good);font-weight:normal}
.outcome canvas.full{width:64px;height:64px}

#ctxmenu{position:fixed;z-index:80;display:flex;flex-direction:column;min-width:170px;padding:3px}
#ctxmenu button{text-align:left;min-height:42px}
#drag-ghost{position:fixed;z-index:90;pointer-events:none;width:32px;height:32px}

/* chat sheet */
.log{display:flex;flex-direction:column;gap:0;min-height:30dvh;max-height:52dvh;overflow-y:auto;overscroll-behavior:contain;padding:3px 6px;background:var(--deep);border:1px solid var(--line)}
.say-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px}.say-form button{min-height:40px}

/* desktop: the Tibia client's layout (map, side windows, console) */
@media (min-width:1000px){
  #game{display:grid;grid-template-columns:92px minmax(0,1fr) 300px;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"top top top" "nav play side"}
  header.app-top{grid-area:top}#play{grid-area:play}
  nav.app-nav{grid-area:nav;grid-template-columns:1fr;grid-auto-rows:64px;align-content:start;gap:3px;padding:8px 4px;border-top:0;border-right:1px solid var(--line);box-shadow:1px 0 var(--hi)}
  nav.app-nav button{height:64px;min-height:64px}
  #side{grid-area:side;display:flex;flex-direction:column;gap:3px;padding:3px;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    background:var(--panel) url('../assets/ui/classic/panel-texture.png');border-left:1px solid var(--line)}
  #hotbar{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(12,minmax(0,1fr));overflow:visible}
  .console-tabs{display:flex}
  #console{min-height:120px}
  dialog.sheet{left:auto;right:300px;width:420px;bottom:0;max-height:calc(100dvh - 60px)}
}

/* Caçar: the hunts as Bestiary's quest board (.qj-board / .qj-offer), the loot as Tibia's Quick Loot list */
.hunt-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px}
.hunt-card{position:relative;display:grid;justify-items:center;align-content:start;gap:1px;min-height:112px;margin:0;padding:6px 3px 5px;text-align:center;white-space:normal}
.hunt-card canvas{width:64px;height:64px}
.hunt-card b{color:var(--white);font-weight:normal;line-height:13px}
.hunt-card small{color:var(--muted);font-size:10px;line-height:12px}
.hunt-card.on{color:var(--white);border-color:var(--frame);box-shadow:inset 0 0 0 1px var(--frame)}
.tag{position:absolute;top:2px;right:2px;padding:0 4px;font-style:normal;font-size:10px;line-height:14px;color:var(--text);background:var(--well);border:1px solid #111;white-space:nowrap}
.tag.is-good{color:var(--good)}.tag.is-fair{color:var(--gold)}.tag.is-bad{color:var(--bad2)}.tag.is-live{color:var(--coin)}
.hunt-about{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;padding:6px}
.hunt-about span{color:var(--muted)}.hunt-about b{color:var(--white);font-weight:normal}
.loot-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:3px;padding:4px}
.loot-row{display:grid;grid-template-columns:22px 32px minmax(0,1fr);gap:6px;align-items:center;min-height:40px;padding:2px 6px;background:var(--deep);border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px var(--hi)}
.loot-row canvas{width:32px;height:32px}
.loot-row b{display:block;color:var(--white);font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loot-row small{color:var(--muted)}
.loot-row.off canvas,.loot-row.off b{opacity:.45}
.pf-head label{display:flex;align-items:center;gap:6px;color:var(--white)}
.pf-head input[type=checkbox]{width:16px;height:16px;min-height:16px}
.pf-note{margin:0;padding:4px 6px 6px;color:var(--muted)}