/* Wiki do Bestiary (web/wiki.js): a large window over any screen, and the page /wiki.html.
   Pieces of docs/DESIGN.md only: pf-panel, pf-table, the client's buttons and fields, the
   tutorial ribbon between the stone flags, Tibia floor and sprites, and the palette colours. */
dialog.window.wiki-modal{flex-direction:column;width:min(1180px,98vw);height:min(94dvh,980px);max-height:94dvh;padding:0;overflow:visible}
dialog.window.wiki-modal[open]{display:flex}
.wiki-modal .window-title{flex:0 0 auto;gap:6px}
.wiki-modal .window-title>span{margin-right:auto}
.wk-out{font-size:10px;color:#c0c0c0;text-decoration:none;padding:0 6px}
.wk-out:hover{color:#fff}
#wiki-body{flex:1;min-height:0;overflow:hidden}
.wk{position:relative;display:grid;grid-template-columns:232px minmax(0,1fr);height:100%;min-height:0;background:#3d3d3d url('/assets/ui/classic/panel-texture.png')}

/* Navigation */
.wk-aside{display:flex;flex-direction:column;gap:2px;min-height:0;overflow:auto;padding:6px;border-right:1px solid #111;box-shadow:1px 0 #6a6a6a}
.wk-aside h4{margin:8px 2px 2px;font-size:10px;color:#e4ca78;text-transform:uppercase;letter-spacing:.5px}
.wk-search{display:flex;align-items:center;gap:4px;padding:3px;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.wk-search input{flex:1;min-width:0;min-height:24px;border:0;background:transparent}
.wk-nav{display:flex;align-items:center;gap:6px;width:100%;min-height:30px;padding:3px 6px;text-align:left;white-space:normal}
.wk-nav .wk-ico{width:18px;height:18px;object-fit:contain}
.wk-nav.active{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.wk-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.wk-mobile{display:none;padding:6px 6px 0}
.wk-mobile select{width:100%}
.wk-article{flex:1;min-height:0;overflow:auto;padding:8px 8px 0;display:flex;flex-direction:column;gap:8px;outline:none;scroll-behavior:smooth}
.wk-article .pf-panel{margin:0}
.wk-article>*{flex-shrink:0}
.wk-body{padding:8px}
/* Panel heads may carry a note: it wraps under the title instead of squeezing it. */
.wk-panel>.pf-head{flex-wrap:wrap;height:auto;min-height:19px;column-gap:6px;row-gap:0;line-height:15px;padding-top:3px;padding-bottom:3px}
.wk-panel>.pf-head small{margin-left:auto}

/* Page banner: the client's ribbon, the lead, and the page's creatures standing on Tibia floor. */
.wk-hero{display:grid;gap:0;border:1px solid #111;box-shadow:1px 1px #6a6a6a,inset 1px 1px #6a6a6a;background:#2f2f2f}
.wk-hero-floor{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:88px;padding:0 8px 6px;overflow:hidden;background-size:64px 64px;image-rendering:pixelated;border-bottom:1px solid #111}
.wk-hero-floor span{display:block;animation:wk-bob 2.4s ease-in-out infinite;animation-delay:calc(var(--i)*-.37s)}
.wk-hero-floor .wk-sprite{width:64px;height:64px}
@keyframes wk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.wk-hero-text{display:grid;justify-items:center;gap:4px;padding:6px 10px 10px;text-align:center}
.wk-hero-text p{max-width:760px;margin:0;color:#e5e2d9;font-size:12px;line-height:18px}
.wk-ribbon{margin:-26px 0 0}
.wk-act{margin-top:4px}

/* Pictures */
.wk-sprite{width:48px;height:48px;object-fit:contain;image-rendering:pixelated;vertical-align:middle}
.wk-sprite.wk-s{width:32px;height:32px;margin:-6px 2px -6px 0}
.wk-ico{width:20px;height:20px;object-fit:contain;image-rendering:pixelated;vertical-align:middle}
.wk-ico.wk-big{width:32px;height:32px}
.wk-ico.wk-s,.wk-store.wk-s{width:16px;height:16px}
.wk-dragon{width:72px;height:auto;image-rendering:pixelated}
.wk-media-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:8px}
.wk-media-row:has(>:only-child){grid-template-columns:minmax(0,680px);justify-content:center}
.wk-article>.wk-shot{max-width:900px;justify-self:center;width:100%;align-self:center}
.wk-media{position:relative;display:grid;gap:4px;margin:0;padding:4px;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.wk-media video,.wk-media img{display:block;width:100%;height:auto;image-rendering:pixelated;background:#1c1c1c}
.wk-media figcaption{padding:0 2px 2px;font-size:11px;line-height:15px;color:#c0c0c0}
.wk-media figcaption b{color:#fff}
.wk-clip{cursor:pointer}
.wk-play{position:absolute;left:50%;top:42%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;font-size:18px;color:#fff;background:#1c1c1c;border:1px solid #111;box-shadow:1px 1px #6a6a6a;pointer-events:none;transition:opacity .2s}
.wk-clip.is-playing .wk-play{opacity:0}
.wk-zoom{display:block;width:100%;min-height:0;padding:0;border:0;background:none;cursor:zoom-in}
.wk-zoom:active{background:none}
.wk-shot img{max-height:420px;object-fit:contain;image-rendering:auto}
.wk-lightbox{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:28px 10px 10px;background:#000d}
.wk-lightbox[hidden]{display:none}
.wk-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border:1px solid #111;box-shadow:1px 1px #6a6a6a}
.wk-lightbox button{position:absolute;right:8px;top:4px}

/* Blocks */
.wk-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,132px),1fr));gap:6px;margin:0;padding:0;list-style:none;counter-reset:wk}
.wk-steps li{position:relative;display:grid;justify-items:center;align-content:start;gap:3px;padding:20px 6px 8px;text-align:center;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.wk-steps li+li::before{content:'›';position:absolute;left:-9px;top:44%;color:#e4ca78;font-size:16px}
.wk-n{position:absolute;left:4px;top:3px;color:#e8c547}
.wk-steps .wk-pic{display:grid;place-items:center;min-height:64px}
.wk-steps .wk-sprite,.wk-card .wk-pic .wk-sprite{width:64px;height:64px}
.wk-steps strong{color:#fff}
.wk-steps small{color:#c0c0c0;line-height:14px}
.wk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:6px}
.wk-cards.wk-cols-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.wk-cards.wk-cols-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.wk-cards.wk-cols-4,.wk-cards.wk-cols-5{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.wk-card{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:6px;padding:6px;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.wk-card .wk-pic{display:grid;place-items:center;width:64px;height:64px;overflow:hidden;background:#1c1c1c;border:1px solid #111}
.wk-card .wk-pic .wk-ico{width:32px;height:32px}
.wk-card>span:last-child{display:grid;gap:2px;min-width:0}
.wk-card strong{color:#fff}
.wk-card small{color:#c0c0c0;line-height:14px}
.wk-card-link{position:absolute;inset:0;z-index:1}
.wk-card:has(.wk-card-link):hover{border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.wk-mini .wk-card{grid-template-columns:64px minmax(0,1fr);padding:4px}
.wk-table-wrap{overflow-x:auto}
.wk-table{width:100%}
.pf-table.wk-table th,.pf-table.wk-table td{vertical-align:middle;text-align:left;line-height:15px}
.pf-table.wk-table td:first-child{display:table-cell;width:1%;white-space:nowrap}
.pf-table.wk-table td:last-child{width:auto;color:#c0c0c0}
.pf-table.wk-table td:first-child .wk-ico{margin-right:4px}
.wk-table td small{display:block;color:#a9a9a9}
.wk-cell{display:inline-grid;vertical-align:middle;text-align:left}
.wk-tip{display:flex;align-items:flex-start;gap:8px;margin:0;padding:6px 8px;color:#e4ca78;background:#2f2f2f;border:1px solid #111;border-left:2px solid #c5b47c;box-shadow:1px 1px #6a6a6a}
.wk-tip .wk-ico{flex:0 0 auto}
.wk-tip a,.wk-list a{color:#e8c547}
.wk-list{display:grid;gap:3px;margin:0;padding:0 0 0 16px;color:#c0c0c0;line-height:16px}
.wk-list li::marker{color:#e4ca78}
.wk-list b{color:#fff}
.wk-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.wk-chips>span{display:inline-flex;align-items:center;gap:5px;padding:3px 7px 3px 4px;color:#fff;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.wk-states{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:4px;margin-bottom:6px}
.wk-states>span{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:6px;align-items:center;padding:4px;background:#262626;border:1px solid #111}
.wk-states .wk-ico{grid-row:1/3}
.wk-states b{color:#fff}
.wk-states small{color:#c0c0c0}
.wk-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:8px;align-items:start}
.wk-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:8px}
.wk-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:8px}
.wk-rarity{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:4px;margin-bottom:6px}
.wk-rarity>span{display:grid;padding:5px 7px;background:var(--slot-fill);border:1px solid #111;border-left:4px solid var(--slot-edge)}
.wk-rarity b{color:#fff}
.wk-rarity small{color:#c0c0c0}
.wk-tk{display:inline-block;padding:1px 8px;color:#fff;background:#262626;border:1px solid #111;border-left:4px solid var(--t)}
.wk-shiny{color:#f4d35e}
.wk-store{width:32px;height:32px}
.wk-store.wk-s{margin:-4px 2px -4px 0}
.wk-shop{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:4px}
.wk-shop>span{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:6px;align-items:center;padding:4px;background:#262626;border:1px solid #111}
.wk-shop img{grid-row:1/3;width:32px;height:32px}
.wk-shop b{color:#fff}
.wk-shop small{color:#c0c0c0}
.wk-gloss{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 12px;margin:0}
.wk-gloss dt{color:#e8c547}
.wk-gloss dd{margin:0;color:#c0c0c0}
.wk-pager{position:sticky;bottom:0;z-index:3;flex:0 0 auto;overflow:visible;display:flex;justify-content:space-between;gap:6px;margin:auto -8px 0;padding:6px 8px;background:#2f2f2f;border-top:1px solid #111;box-shadow:0 -1px #5e5e5e}
.wk-pager button{flex:0 1 auto;min-width:0;max-width:49%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The Wiki buttons around the game: header, sign-in, "?" in windows. */
.wiki-button{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;color:#e4ca78}
.shell>header .wiki-button{min-height:26px;height:26px;padding:0 8px}
.window-title .wiki-button{flex:0 0 auto;min-width:0;min-height:18px;height:18px;padding:0 6px;margin-left:auto;font-size:10px}
.window-title>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.window-title .wiki-help{margin-left:auto}
.window-title .wiki-help+button{margin-left:4px}
.wiki-button img{width:14px;height:14px;image-rendering:pixelated}
.wiki-help{min-width:22px;min-height:20px;padding:0 6px;font-weight:bold}

/* The client turns every button in a dialog's title into the close button: not these. */
dialog .window-title button.wiki-button,dialog .window-title button.wiki-help{flex:0 0 auto;min-width:0;width:auto;height:18px;min-height:18px;padding:0 6px;font:10px 'Tibia Pixel',Verdana,sans-serif;color:#e4ca78;border:1px solid #111;background:#2f2f2f;box-shadow:inset 1px 1px #5e5e5e}
dialog .window-title button.wiki-button::before,dialog .window-title button.wiki-help::before{content:none;display:none}
dialog .window-title button.wiki-button:hover,dialog .window-title button.wiki-help:hover,dialog .window-title button.wiki-button:active,dialog .window-title button.wiki-help:active{color:#fff;border-color:#c5b47c;background:#2f2f2f}
dialog .window-title button.wiki-button::after,dialog .window-title button.wiki-help::after{content:none}

/* Stand-alone page */
body.wiki-page{margin:0;min-height:100dvh;background:#161616}
body.wiki-page .wk-shell{display:flex;flex-direction:column;height:100dvh;max-width:1280px;margin:0 auto;padding:6px}
body.wiki-page .wk-shell>.window{display:flex;flex-direction:column;flex:1;min-height:0}
body.wiki-page #wiki-host{flex:1;min-height:0}

@media(prefers-reduced-motion:reduce){.wk-hero-floor span{animation:none}.wk-article{scroll-behavior:auto}}
@media(max-width:760px){
 .wk{grid-template-columns:minmax(0,1fr)}
 .wk-aside{display:none}
 .wk-mobile{display:block}
 .wk-split{grid-template-columns:minmax(0,1fr)}
 .wk-hero-floor{height:72px}
 .wk-hero-floor .wk-sprite{width:48px;height:48px}
 .wk-steps li+li::before{display:none}
 .wk-panel>.pf-head small{flex-basis:100%;margin-left:0}
 .wk-pager button{flex:1 1 0}
 dialog.window.wiki-modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh}
}