:root{
  /* Tones MEASURED from the original site, not picked by eye:
     rows 241,224,198 and 212,192,161 -- header 213,192,161
     text 90,40,0 -- links 0,66,148 -- background 5,17,34 */
  --parch:#f1e0c6; --parch2:#d4c0a1; --parch3:#d5c0a1; --ink:#5a2800;
  --gold:#f4e3b0; --goldS:#c9a44e; --goldL:#ffeec2;
  --v1:#5d8038; --v2:#2c4a1d; --v3:#1d3313;
  --m1:#6b5540; --m2:#42342639; --link:#004294; --link2:#610b0b;
  --sans:Verdana,Arial,'DejaVu Sans',sans-serif;
  --serif:Georgia,'Palatino Linotype',serif;
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23r)' opacity='0.055'/></svg>");
}
*{box-sizing:border-box}
body{margin:0;font:12px/1.6 var(--sans);color:var(--ink);background:#0a0810}
body::before{content:"";position:fixed;inset:0;z-index:0;
  background:#141019 url(/static/stone_panel.png) repeat;
  filter:brightness(.55) saturate(.7)}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(135% 90% at 50% -5%,rgba(30,22,45,.2),rgba(6,5,10,.95) 65%),
             var(--noise)}
a{color:var(--link);text-decoration:none;font-weight:bold}

/* The centre is what widens: the two side columns keep the same width and
   whatever makes the page wider pushes them outwards. At 1160 the Equipment
   table, which has nine columns, spilled off the paper. */
.page{position:relative;z-index:1;max-width:1300px;margin:0 auto;
        display:grid;grid-template-columns:196px minmax(0,1fr) 200px;
        gap:16px;padding:16px 16px 30px}

/* The centre column is ONE framed parchment sheet, and the boxes sit on
   top of it. That is the structural difference with the earlier layout. */
.sheet{padding:6px;border-radius:6px;
  background:linear-gradient(rgba(150,122,84,.6),rgba(72,56,36,.8)),
             url(/static/stone_panel.png) repeat;
  box-shadow:0 6px 22px rgba(0,0,0,.6),0 0 0 1px #17110a,
             inset 0 1px 0 rgba(255,238,200,.35)}
.sheetIn{padding:14px;border-radius:4px;background:var(--parch) var(--noise);
  box-shadow:inset 0 0 0 1px rgba(120,95,60,.55),inset 0 3px 10px rgba(120,95,60,.2)}
/* The gap between sections. At 16 px a character sheet read as a single
   block: the last row of a table sat right against the dark header of the
   next one and you could not see where one thing ended and the next began.
   And the last one carries no gap, since the paper ends there. */
.sheetIn .frame{background:none;padding:0;box-shadow:none;margin-bottom:26px}
.sheetIn .frame:last-child{margin-bottom:0}
.sheetIn .frame .corner{display:none}
.sheetIn .frame>h2{border-radius:3px 3px 0 0}
.sheetIn .frame>.body{box-shadow:inset 0 0 0 1px rgba(120,95,60,.4);
  border-radius:0 0 3px 3px;background:rgba(255,250,238,.55)}
.sheetIn .frame>table{box-shadow:inset 0 0 0 1px rgba(120,95,60,.4);
  border-radius:0 0 3px 3px}

/* illustrated header */
.masthead{position:relative;z-index:2;height:186px;overflow:hidden;
  border-bottom:3px solid #17110a;box-shadow:0 4px 14px rgba(0,0,0,.6)}
.mhArt{position:absolute;inset:0;background:url(/static/cover.jpg) center 32%/cover no-repeat}
.mhVeil{position:absolute;inset:0;
  background:linear-gradient(rgba(10,8,14,.15),rgba(10,8,14,.55) 55%,rgba(10,8,14,.92)),
             radial-gradient(70% 120% at 50% 40%,transparent,rgba(10,8,14,.6))}
.mhText{position:absolute;left:0;right:0;bottom:18px;text-align:center}
.mhSign{image-rendering:pixelated;height:64px;width:auto;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.9))}
.mhText span{display:block;margin-top:8px;font-size:10.5px;letter-spacing:4px;
  text-transform:uppercase;color:#cbb894;text-shadow:0 1px 3px #000}

/* ---------------- logo and menu ---------------- */
.logo{text-align:center;padding:4px 0 18px}
.logo b{display:block;font:400 34px/1 var(--serif);letter-spacing:4px;color:var(--gold);
  text-shadow:0 1px 0 #3a2a10,0 2px 1px #000,0 0 26px rgba(201,164,78,.55)}
.logo span{display:block;margin-top:6px;font-size:9px;letter-spacing:4px;
  text-transform:uppercase;color:#a2937a}
.logo hr{margin:11px auto 0;width:70%;height:1px;border:none;
  background:linear-gradient(90deg,transparent,var(--goldS),transparent)}

.menu{margin-bottom:14px;border-radius:6px;
  box-shadow:0 3px 10px rgba(0,0,0,.55),0 0 0 1px #17110a}
.menu>b{display:block;padding:8px 13px;font:bold 13px/1 var(--sans);letter-spacing:.04em;
  text-transform:uppercase;color:#f0dcae;border-radius:5px 5px 0 0;
  background:linear-gradient(rgba(122,98,66,.82),rgba(58,44,28,.9)),
             url(/static/stone_panel.png) repeat;
  box-shadow:inset 0 1px 0 rgba(255,236,196,.4),inset 0 -1px 0 rgba(0,0,0,.5);
  text-shadow:0 1px 1px rgba(0,0,0,.6)}
.menu a{display:flex;align-items:center;gap:9px;padding:8px 12px;font-size:11.5px;
  font-weight:normal;color:#eadfc6;background:linear-gradient(#332a1c,#241d13);
  box-shadow:inset 0 1px 0 rgba(255,235,190,.07);border-top:1px solid #17110a}
.menu a i{width:22px;height:22px;flex:0 0 22px;background:center/contain no-repeat;
  image-rendering:pixelated;filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))}
.menu a.act{background:linear-gradient(var(--v1),var(--v2) 60%,var(--v3));
  color:var(--goldL);font-weight:bold;text-shadow:0 1px 1px rgba(0,0,0,.55);
  box-shadow:inset 0 1px 0 rgba(210,240,170,.35),inset 0 -1px 0 rgba(0,0,0,.45)}
.menu a:last-child{border-radius:0 0 5px 5px}

/* ---------------- loading veil ---------------- */
/* Hidden by default and only shown by the script: with JavaScript off the
   page behaves exactly as before instead of getting stuck behind a veil. */
#veil{position:fixed;inset:0;z-index:9999;display:none;cursor:wait;
  align-items:center;justify-content:center;background:rgba(10,7,3,.55)}
#veil.on{display:flex}
#veil>div{display:flex;gap:13px;align-items:center;padding:15px 22px;
  border-radius:6px;font:bold 12px var(--sans);color:var(--ink);
  background:var(--parch) var(--noise);
  box-shadow:0 6px 22px rgba(0,0,0,.6),inset 0 0 0 1px rgba(120,95,60,.6)}
#veil .spin{width:26px;height:26px;border-radius:50%;
  border:3px solid rgba(90,40,0,.22);border-top-color:#8a5a12;
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Anyone asking for reduced motion does not get a wheel spinning in their
   face. */
@media (prefers-reduced-motion:reduce){
  #veil .spin{animation:pulse 1.2s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.35}}
}

/* ---------------- frames ---------------- */
.frame{position:relative;margin:0 0 16px;padding:5px;border-radius:5px;
  background:linear-gradient(rgba(150,122,84,.55),rgba(80,62,40,.75)),
             url(/static/stone_panel.png) repeat;
  box-shadow:0 4px 12px rgba(0,0,0,.55),0 0 0 1px #1b1409,
             inset 0 1px 0 rgba(255,238,200,.35)}
.frame>h2{margin:0 0 4px;padding:8px 14px;font:bold 12.5px var(--sans);color:#fff8e6;
  letter-spacing:.3px;border-radius:3px;text-shadow:0 1px 1px rgba(0,0,0,.7);
  background:linear-gradient(#6d5740,#3f3122 60%,#332618);
  box-shadow:inset 0 1px 0 rgba(255,230,185,.28),inset 0 -1px 0 rgba(0,0,0,.55)}
.frame>h2 .right{float:right;font-weight:normal;color:#d8c9a8}
.frame>.body{padding:13px 14px;border-radius:3px;
  background:var(--parch) var(--noise);
  box-shadow:inset 0 0 0 1px rgba(120,95,60,.5),inset 0 2px 6px rgba(120,95,60,.18)}
.frame>table{border-radius:3px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(120,95,60,.5)}
.frame .corner{position:absolute;width:7px;height:7px;border:1px solid #1b1409;
  background:linear-gradient(#ffeec2,#c9a44e);border-radius:1px}
.frame .e1{top:-2px;left:-2px}.frame .e2{top:-2px;right:-2px}
.frame .e3{bottom:-2px;left:-2px}.frame .e4{bottom:-2px;right:-2px}

/* ---------------- tables ---------------- */
table{width:100%;border-collapse:collapse;font-size:13.3px;background:var(--parch)}
thead th{text-align:left;padding:6px 10px;font-weight:bold;color:var(--ink);
  background:var(--parch3);
  box-shadow:inset 0 1px 0 rgba(255,246,224,.5),inset 0 -1px 0 rgba(90,70,40,.5)}
tbody td{padding:5px 10px;border-bottom:1px solid rgba(140,115,75,.18)}
tbody tr:nth-child(odd) td{background:var(--parch)}
tbody tr:nth-child(even) td{background:var(--parch2)}
.num{text-align:right}
.pos{width:44px;color:#7a6a4c}
.pos.top{color:#9a6f10;font-weight:bold;text-shadow:0 1px 0 rgba(255,245,215,.7)}

/* ---------------- right column ---------------- */
.box{margin:0 0 14px;padding:4px;border-radius:5px;
  background:linear-gradient(rgba(150,122,84,.5),rgba(80,62,40,.75)),
             url(/static/stone_panel.png) repeat;
  box-shadow:0 3px 10px rgba(0,0,0,.5),0 0 0 1px #1b1409,
             inset 0 1px 0 rgba(255,238,200,.3)}
.box>b{display:block;padding:6px 11px;font:400 13.5px var(--serif);color:var(--gold);
  letter-spacing:.7px;border-radius:3px;text-shadow:0 1px 1px rgba(0,0,0,.6);
  background:linear-gradient(var(--v1),var(--v2) 60%,var(--v3));
  box-shadow:inset 0 1px 0 rgba(215,245,175,.35),inset 0 -1px 0 rgba(0,0,0,.4)}
.box>div{margin-top:3px;padding:9px 11px;border-radius:3px;font-size:11px;
  background:var(--parch) var(--noise);
  box-shadow:inset 0 0 0 1px rgba(120,95,60,.45)}
.box table{background:none;font-size:11px}
.box td{padding:3px 0;border:none;background:none!important}

/* No :hover effects anywhere on the site, by request. */
/* ---------------- buttons, forms and notices ---------------- */
/* Tibia button, measured against the original: saturated blue body, GOLDEN
   (not white) lettering and a brass frame with a dark line on the outside.
   That frame is what gives it the metallic feel; without it, it looks like
   any old web button. */
.tButton{display:inline-block;min-width:112px;padding:4px 16px;margin:0 5px 5px 0;
  font:bold 11px var(--sans);color:#ffd76a;text-align:center;text-decoration:none;
  letter-spacing:.3px;text-shadow:0 1px 1px rgba(0,0,0,.75);
  border:2px solid #c9a44e;border-radius:4px;cursor:pointer;
  background:linear-gradient(#2f56d8,#1733a8 45%,#0d1f75);
  box-shadow:0 0 0 1px #2b1d08,inset 0 1px 0 rgba(255,255,255,.45),
             inset 0 -2px 4px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.45)}
.tButton.red{background:linear-gradient(#d8503a,#a02414 45%,#6f1408)}
.tButton.green{background:linear-gradient(#63b03a,#3a7a1d 45%,#245212)}
.tButton.grey{background:linear-gradient(#8a7048,#4e3b26 45%,#382a1c)}
.buttons{margin-top:12px;text-align:center}
.buttons.right{text-align:right}
/* A button that belongs to the PAGE, not to the form above it. Stuck to the
   last box it looked like that form's "cancel", so it is set apart with some
   air and a line. */
.buttons.pageBack{margin-top:24px;padding-top:18px;
  border-top:1px solid rgba(120,95,60,.35)}

/* The table fills the whole box, like tibia.com: label on the left in a
   narrow column and the field taking the rest. */
table.form{width:100%;background:none}
/* The stripe has to cross the WHOLE row, label included. Each cell used to
   carry its own colour and the light tone stopped at the label. */
table.form tr{background:var(--parch)}
table.form tr:nth-child(even){background:var(--parch2)}
table.form th,table.form td{background:none}
/* The label aligns to the TOP, with its field, not to the centre of the
   cell: when there is a hint below the field the cell grows, and centred
   vertically the label drifted to the height of the hint instead of to that
   of its own field.
   The top padding is the SAME as that of the field's cell. It was at 11 px
   against the cell's 6, and that left the label four and a half pixels below
   the centre of the box: you could see it. */
table.form th{width:190px;padding:6px 14px 6px 10px;text-align:left;
  vertical-align:top;font-weight:bold;color:var(--ink);white-space:nowrap}
table.form td{padding:6px 10px;vertical-align:top}

/* NOTE: this selector must exclude radios and checkboxes. With a bare
   `input` the radios inherited min-width and rendered as 220px bars. */
table.form input:not([type]),table.form input[type=text],
table.form input[type=password],table.form input[type=email],
table.form input[type=number],table.form select{padding:3px 6px;font:12px var(--sans);color:var(--ink);
  border:1px solid #8b7550;border-radius:2px;background:#fffaf0}
table.form input:not([type]),table.form input[type=text],
table.form input[type=password],table.form input[type=email]{
  width:100%;max-width:320px;box-sizing:border-box}
table.form input[type=radio],table.form input[type=checkbox]{
  width:auto;min-width:0;margin:0 5px 0 0;vertical-align:-2px}
td.radios label{display:inline-block;margin-right:20px;cursor:pointer}
.searchCols label{display:block;margin:0 0 2px;cursor:pointer}
.searchCols input[type=radio]{margin:0 5px 0 0;vertical-align:-2px}
.hint{color:#7a6a4c;font-weight:normal}
/* The account data table shares a column with the rest of the site, and the
   value is aligned to the left of that column, not hanging off the text next
   to it. */
table.acctFacts{margin-top:9px;table-layout:fixed}
table.acctFacts th{width:160px}
b.acctNum{font:bold 15px var(--sans);letter-spacing:.5px}
.acctFacts + .under{margin:8px 0 0}
/* Hint below a field. It goes inside its own cell, not as a separate row:
   it is not another form value, it is a note about the field above it. */
.under{margin:3px 0 0;font-size:11px;color:#7a6a4c;font-weight:normal;
  line-height:1.35}
ol.steps{margin:14px 0 0;padding-left:22px}
ol.steps li{margin:0 0 6px}
.info{display:flex;gap:9px;align-items:flex-start;margin:12px 0 0;padding:9px 11px;
  border-radius:3px;background:var(--parch2);
  box-shadow:inset 0 0 0 1px rgba(120,95,60,.5)}
/* A "you are missing something before you can do this" notice. It is the only
   thing the visitor has to read in the box, so it goes in its own panel with
   the same frame as the other boxes on the page: floating loose over the
   background it looks like the styles are broken. Everything centred on the
   same axis -- icon, title, text and button -- so it reads as a single piece
   and not lopsided. */
.gate{margin:2px 0;padding:17px 16px 16px;border-radius:3px;text-align:center;
  background:var(--parch2);box-shadow:inset 0 0 0 1px rgba(120,95,60,.5)}
.gateHead{display:flex;gap:9px;align-items:center;justify-content:center}
.gateHead b{font:bold 14px var(--serif);color:var(--ink)}
/* Only the title carries its own style. With a bare `.gate b` it also caught
   the bold text inside the paragraph and each piece went off to its own
   line. */
/* text-wrap:balance spreads the lines out so they come out similar: a
   centred paragraph with one long line and another of three words looks
   lopsided even when it is perfectly centred. */
.gate p{margin:7px auto 0;max-width:44ch;line-height:1.5;text-wrap:balance}
.gate .buttons{text-align:center;margin-top:15px}
.gateIcon{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  font:bold 17px/26px Georgia,serif;text-align:center;color:#fff;
  background:linear-gradient(#3a5fc8,#1f3c8c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 3px rgba(0,0,0,.5)}
.gateIcon::before{content:"i"}

.infoIcon{flex:0 0 auto;width:16px;height:16px;border-radius:50%;
  font:bold 11px/16px Georgia,serif;text-align:center;color:#fff;
  background:linear-gradient(#3a5fc8,#1f3c8c)}

.notice{margin:0 0 12px;padding:8px 11px;border-radius:3px;font-weight:bold;
  box-shadow:inset 0 0 0 1px rgba(120,95,60,.5)}
.notice.bad{color:#7a1408;background:#f2d3c6}
.notice.good{color:#2c4a1d;background:#d9e8c6}
/* The one line on a rules page the reader must not skim past -- the number
   that keeps him out of trouble. Same green as a good notice, but inline in
   the prose instead of a banner, so it reads as part of the explanation. */
p.safe{margin:8px 0;padding:7px 10px;border-radius:3px;
       color:#2c4a1d;background:#d9e8c6}
.intro{margin:0 0 14px;padding:11px 13px;border-radius:3px;
  background:var(--parch) var(--noise);
  box-shadow:inset 0 0 0 1px rgba(120,95,60,.5)}
.welcome{margin:0 0 14px;text-align:center;font:bold 15px var(--serif);
  color:var(--ink)}
b.big{font:bold 20px var(--serif)}

/* ---------------- Account Management ---------------- */
.acctStatus{display:flex;gap:14px;align-items:flex-start;margin-bottom:2px}
.acctStatus .gem{flex:0 0 auto;width:26px;height:26px;margin-top:2px;border-radius:50%;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,0,0,.45),
             0 1px 3px rgba(0,0,0,.5)}
.acctStatus .gem.free{background:radial-gradient(circle at 35% 30%,#e86a5a,#8c1a08)}
.acctStatus .gem.prem{background:radial-gradient(circle at 35% 30%,#8fe06a,#1f6a12)}
.acctStatus>div:nth-child(2){flex:1}
.acctStatus p{margin:4px 0 0}
.acctKind{font:bold 15px var(--serif)}
.acctKind.free{color:#a01a08}
.acctKind.prem{color:#2c6a12}
.acctButtons{text-align:right}
.charActs{width:96px;text-align:right;white-space:nowrap;font-size:11px}
.hiddenTag{margin-left:7px;padding:1px 6px;border-radius:8px;font-size:10px;
  font-weight:normal;color:#6b5a3c;background:rgba(120,95,60,.18)}
.comment{white-space:pre-line;max-width:52ch}
table.form textarea{width:100%;max-width:420px;box-sizing:border-box;padding:5px 7px;
  font:12px var(--sans);color:var(--ink);border:1px solid #8b7550;border-radius:2px;
  background:#fffaf0;resize:vertical}
a.charName{font-weight:bold}
.charLine{font-size:11px;color:#7a6a4c}

/* ---------------- download button ---------------- */
a.dl{display:inline-block;padding:9px 18px;background:#5a3d1f;color:#f0e0c0;
 border:2px outset #8a6a3a;font-weight:bold;text-decoration:none;font-size:13px}
a.dl:hover{background:#6d4a26}
a.dl:active{border-style:inset}

/* ---------------- Kill Statistics ---------------- */
table.kills thead tr:first-child th{text-align:center;background:var(--parch3)}
table.kills th.race{text-align:left}
table.kills tbody tr.total td{font-weight:bold;background:var(--parch3)}

/* ---------------- houses ---------------- */
table.houseList td.viewCell{width:120px;text-align:right}
table.houseList td.viewCell .tButton{margin:0}
.houseView{display:flex;gap:16px;align-items:flex-start}
.houseMap{flex:0 0 auto;text-align:center}
.houseMap img{width:124px;height:124px;image-rendering:pixelated;
  border:1px solid #8b7550;background:#000}
.houseMap span{display:block;font-size:11px;color:#7a6a4c}
.houseText{flex:1}
.houseText p{margin:10px 0 0}
b.houseName{font-size:13.5px}
.beds{margin-top:2px}
/* Character search. The field did not have a single line of style: it came
   out with the 175 px the browser gives it by default and with the button
   stuck to it, without a pixel in between. A Tibia name can reach twenty-nine
   letters, so the field is stretched and the button is set apart. */
.search{display:flex;gap:12px;align-items:center;margin-top:4px}
.search input{flex:1 1 auto;max-width:420px;padding:4px 8px;
  font:12px var(--sans);color:var(--ink);background:#fffaf0;
  border:1px solid #8b7550;border-radius:2px}
.searchCols{display:flex;gap:10px;margin-top:3px}
.searchCols>div{flex:1;padding:9px 11px;border-radius:3px;
  background:var(--parch) var(--noise);
  box-shadow:inset 0 0 0 1px rgba(120,95,60,.45)}
.searchCols>div>b{display:block;margin-bottom:5px}
.searchCols label{display:block;margin:0 0 2px}
.searchCols .gap{height:12px}

/* ---------------- deaths ---------------- */
table.deaths td.when{width:180px;white-space:nowrap;color:#7a6a4c}
table.deaths td.what .unjust{color:#a01a08;font-weight:bold}

.createLink{margin:-8px 0 12px;text-align:center;font-size:11px}
.createLink a{color:var(--gold);text-shadow:0 1px 1px rgba(0,0,0,.7)}

/* ---------------- pieces ---------------- */
/* The sprite sits loose on the parchment, with no box: the frame looked like
   the game's sqm and boxed the character in. The drop shadow follows the
   outline of the drawing (not a box) and gives it some weight. */
.portrait{width:60px;height:60px;object-fit:contain;
  background:none;filter:drop-shadow(0 2px 2px rgba(60,40,15,.45))}
/* The gap when there is no image does need a frame, or you cannot tell that
   something is missing. */
.portrait.noImg{border-radius:3px;filter:none}
.portrait.portrait_mini{width:34px;height:34px;margin-right:9px;vertical-align:middle}
.pbar{height:10px;border-radius:5px;background:#c0a87c;
  box-shadow:inset 0 1px 2px rgba(80,60,30,.55)}
.pbar i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(#8fc75c,#3f6a26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.pill{display:inline-block;padding:3px 9px;border-radius:3px;font-weight:bold;
  font-size:10px;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.5)}
.yes{background:linear-gradient(#5d8038,#2c4a1d)}
.no{background:linear-gradient(#a53232,#661717)}

form .row{display:flex;gap:8px;flex-wrap:wrap}
input,select{flex:1 1 170px;padding:7px 9px;font:12px var(--sans);color:var(--ink);
  border:1px solid #8a704c;border-radius:3px;background:#fffaef;
  box-shadow:inset 0 1px 3px rgba(120,95,60,.28)}
button{padding:5px 18px;font:bold 11px var(--sans);color:#ffd76a;cursor:pointer;
  letter-spacing:.3px;text-shadow:0 1px 1px rgba(0,0,0,.75);
  border:2px solid #c9a44e;border-radius:4px;
  background:linear-gradient(#2f56d8,#1733a8 45%,#0d1f75);
  box-shadow:0 0 0 1px #2b1d08,inset 0 1px 0 rgba(255,255,255,.45),
             inset 0 -2px 4px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.45)}
.noImg{display:inline-block;vertical-align:middle;background:rgba(120,95,60,.13);
  border-radius:3px;box-shadow:inset 0 0 0 1px rgba(120,95,60,.28)}
.icon.noImg{width:32px;height:32px;margin-right:7px}
.note{color:#7a6a4c;font-size:11px}

/* ---------------- house card ---------------- */
table.card th{text-align:left;width:150px;padding:5px 10px;font-weight:bold;
  color:var(--ink);white-space:nowrap;
  border-bottom:1px solid rgba(140,115,75,.18)}
table.card tr:nth-child(odd) th,table.card tr:nth-child(odd) td{background:var(--parch)}
table.card tr:nth-child(even) th,table.card tr:nth-child(even) td{background:var(--parch2)}
.auction{color:#8a5a00;font-style:italic}
.rentbox{margin:12px 0 0;padding:9px 11px;font-size:12px;color:#5a4426;
  background:rgba(255,246,224,.7);border-left:3px solid #b08a3a;
  box-shadow:inset 0 0 0 1px rgba(140,115,75,.25)}
.rentbox b{color:#5a2800}
.rentbox p{margin:5px 0 0}
.cardChar{display:flex;gap:14px;align-items:flex-start}
.cardPortrait{flex:0 0 auto;padding:6px 10px 0 4px}
.cardChar .cardData{flex:1 1 auto;min-width:0}
@media(max-width:600px){.cardChar{display:block}}
.motto{margin:0 0 10px;padding:8px 10px;font-style:italic;color:#6a4a20;
  background:rgba(255,246,224,.55);
  box-shadow:inset 0 0 0 1px rgba(140,115,75,.25)}
.cardHouse{display:flex;gap:12px;align-items:flex-start}
.cardData{flex:1 1 auto;min-width:0}
.cardMap{flex:0 0 auto;text-align:center}
.cardMap img{display:block;width:160px;height:160px;image-rendering:pixelated;
  border:1px solid #1b1409;
  box-shadow:0 0 0 1px rgba(214,192,161,.5),0 2px 5px rgba(0,0,0,.5)}
.cardMap span{display:block;margin-top:4px;color:#7a6a4c;font-size:11px}
@media(max-width:760px){.cardHouse{display:block}.cardMap{margin-top:10px}}
.floorplan{padding:6px;background:#0b0d14;
  box-shadow:inset 0 0 0 1px rgba(140,115,75,.35)}
.floorplan img{display:block;width:100%;height:auto}

/* counter ribbon, centred under the header */
.ribbon{position:relative;z-index:3;text-align:center;line-height:0}
.ribbonIn{display:inline-block;padding:9px 34px 11px;line-height:1.4;
  border-radius:0 0 10px 10px;
  background:linear-gradient(rgba(45,35,22,.98),rgba(24,18,11,.99)),
             url(/static/stone_panel.png) repeat;
  box-shadow:0 5px 16px rgba(0,0,0,.7),0 0 0 1px #17110a,
             inset 0 -1px 0 rgba(255,235,190,.18)}
.ribbonTitle{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:#a2937a}
.ribbonIn b{display:block;margin:2px 0 1px;font:400 28px/1 var(--serif);
  color:var(--gold);text-shadow:0 2px 4px rgba(0,0,0,.8)}
.ribbonFoot{display:block;font-size:9.5px;letter-spacing:.14em;color:#8d8069}

/* account box */
.accountBox{margin:0 0 12px;padding:4px;border-radius:5px;
  background:linear-gradient(rgba(150,122,84,.5),rgba(80,62,40,.75)),
             url(/static/stone_panel.png) repeat;
  box-shadow:0 3px 10px rgba(0,0,0,.5),0 0 0 1px #1b1409,
             inset 0 1px 0 rgba(255,238,200,.3)}
.accountBox>b{display:block;padding:6px 11px;font:400 13.5px var(--serif);
  color:var(--gold);letter-spacing:.7px;border-radius:3px;
  background:linear-gradient(var(--v1),var(--v2) 60%,var(--v3));
  box-shadow:inset 0 1px 0 rgba(215,245,175,.35)}
.accountBox>div{margin-top:3px;padding:11px;border-radius:3px;
  background:var(--parch) var(--noise);
  box-shadow:inset 0 0 0 1px rgba(120,95,60,.45)}
.accountBox label{display:block;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:#6b5c42;margin:0 0 3px}
.accountBox input{width:100%;margin:0 0 9px;padding:6px 8px;font-size:12px}
.accountBox .button{margin:2px 0 0;padding:8px}




  .bloque.inv .bloqueImg{order:0}.heroRot{height:52px}}
.strip{position:relative;z-index:2;
  background:linear-gradient(#5e1a1a,#3a0f0f 60%,#280a0a);
  box-shadow:inset 0 1px 0 rgba(255,190,170,.25),inset 0 -1px 0 rgba(0,0,0,.6),
             0 2px 8px rgba(0,0,0,.5)}
.strip .env{max-width:1300px;margin:0 auto;padding:7px 18px;display:flex;
  justify-content:space-between;align-items:center;color:#f0d9c4;font-size:11px;
  letter-spacing:.4px}
.strip b{color:var(--gold);letter-spacing:1px}
.strip .right{display:flex;align-items:center;gap:8px;font-weight:bold}
.light{width:9px;height:9px;border-radius:50%;display:inline-block}
.light.yes{background:#7ed957;box-shadow:0 0 8px #7ed957}
.light.no{background:#d95757;box-shadow:0 0 8px #d95757}
/* The two big buttons on the bar are framed like the ones in the original:
   a brass frame with rivets in the corners. The rivets are :before and
   :after with a repeated radial gradient, so as not to depend on an
   image. */
.button{position:relative;display:block;margin:0 0 10px;padding:12px 10px;
  text-align:center;font:bold 15px var(--serif);letter-spacing:1.2px;
  color:#ffd76a;border-radius:5px;text-shadow:0 1px 2px rgba(0,0,0,.8);
  border:2px solid #c9a44e;
  background:linear-gradient(#2f56d8,#1733a8 50%,#0d1f75);
  box-shadow:0 0 0 1px #2b1d08,inset 0 1px 0 rgba(255,255,255,.45),
             inset 0 -3px 7px rgba(0,0,0,.4),0 3px 9px rgba(0,0,0,.55)}
/* rivets: four brass dots, one in each corner */
.button::before,.button::after{content:"";position:absolute;left:3px;right:3px;
  height:5px;pointer-events:none;
  background:radial-gradient(circle at 2.5px 2.5px,#f2d68a 0 1.6px,
             #8a6a26 1.9px 2.4px,transparent 2.5px) left top no-repeat,
             radial-gradient(circle at calc(100% - 2.5px) 2.5px,#f2d68a 0 1.6px,
             #8a6a26 1.9px 2.4px,transparent 2.5px) right top no-repeat}
.button::before{top:3px}
.button::after{bottom:3px;transform:scaleY(-1)}
.button.grey{background:linear-gradient(#8a7048,#4e3b26 50%,#382a1c)}
.creature{image-rendering:pixelated;max-width:72px;max-height:72px}
.icon{image-rendering:pixelated;width:32px;height:32px;object-fit:contain;
  vertical-align:middle;margin-right:7px}
/* ---------------- front page: news ---------------- */
/* The maroon header of the tibia.com news: date in light type, title in
   bold, and a black line separating it from the parchment. */
.frame.news>h2.newsHead{background:linear-gradient(#8c2118,#6d1710 55%,#59110c);
  border:1px solid #2a0a06;padding:7px 13px;
  box-shadow:inset 0 1px 0 rgba(255,190,170,.30),inset 0 -1px 0 rgba(0,0,0,.5)}
.newsDate{font-weight:normal;color:#f0d3c6;letter-spacing:.2px}
.frame.news>.body{padding:15px 16px 14px}
.frame.news p{margin:0 0 10px;line-height:1.55}
.frame.news p:last-child{margin-bottom:0}
.frame.news h3{margin:16px 0 6px;font:bold 13px var(--serif);color:#7a1408}
.frame.news ul{margin:6px 0 10px;padding-left:20px}
.frame.news li{margin:0 0 4px}
/* The drop cap of the first paragraph, as on tibia.com. It is floated so
   the text wraps around it instead of leaving it a gap. */
.drop{float:left;margin:1px 7px -2px 0;font:normal 44px/34px Georgia,serif;
  color:#7a1408;text-shadow:0 1px 0 rgba(255,247,229,.8)}
/* Big header: the temple of Thais with the title on top. */
.hero{position:relative;margin:0 0 14px;border-radius:3px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(120,95,60,.6),0 2px 6px rgba(0,0,0,.45)}
.hero img{display:block;width:100%;height:200px;object-fit:cover;
  object-position:center 55%;image-rendering:pixelated}
/* Only the part where the text goes is darkened. Before, the veil covered
   the whole image and the temple, which is what we want to show off, came
   out dull. */
.hero .veilTop{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,12,4,.30) 0%,rgba(20,12,4,0) 26%,
             rgba(20,12,4,0) 60%,rgba(20,12,4,.45) 100%)}
/* The text rests on its own dark band and not on the gradient: over the
   light floor of the temple, the title and the strapline were
   unreadable. */
.hero .heroTxt{position:absolute;left:0;right:0;bottom:0;text-align:center;
  padding:10px 16px 12px;background:rgba(14,9,3,.66);
  border-top:1px solid rgba(255,220,160,.18)}
.hero h1{margin:0;font:normal 28px var(--serif);color:#f6e2ae;
  text-shadow:0 2px 3px rgba(0,0,0,.9),0 0 18px rgba(0,0,0,.7)}
.hero .kicker{margin:0 0 4px;font:bold 10.5px var(--sans);letter-spacing:3px;
  text-transform:uppercase;color:#d9b98a}
.hero p{margin:6px auto 0;max-width:60ch;color:#e8d7b4;font-size:12px;
  text-shadow:0 1px 2px rgba(0,0,0,.9)}
/* The temple group, floated to the right of the text. */
.newsArt{float:right;width:330px;margin:2px 0 10px 16px;border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(120,95,60,.6),0 2px 5px rgba(0,0,0,.4);
  image-rendering:pixelated}
.newsArt + p{margin-top:0}
figure.newsFig{float:right;width:330px;margin:2px 0 10px 16px}
figure.newsFig img{display:block;width:100%;border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(120,95,60,.6),0 2px 5px rgba(0,0,0,.4);
  image-rendering:pixelated}
figure.newsFig figcaption{margin-top:5px;font-size:10.5px;color:#7a6a4c;
  text-align:center;line-height:1.35}
.signoff{margin-top:14px;color:#5d4c33;font-style:italic}
/* The world figures, in a row. */
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px;clear:both}
.fact{flex:1 1 130px;padding:9px 10px;border-radius:3px;text-align:center;
  background:var(--parch2);box-shadow:inset 0 0 0 1px rgba(120,95,60,.5)}
.fact b{display:block;font:normal 21px var(--serif);color:var(--ink)}
.fact span{font-size:10.5px;color:#7a6a4c}
/* The creature row: the real sprites, at the size they are seen in the
   game, with their name underneath. */
.beasts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  margin:12px 0 4px;clear:both;padding:11px 8px 8px;border-radius:3px;
  background:var(--parch2);box-shadow:inset 0 0 0 1px rgba(120,95,60,.5)}
.beast{flex:0 0 76px;text-align:center}
.beast img{display:block;margin:0 auto;width:56px;height:56px;
  object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 2px 2px rgba(60,40,15,.5))}
.beast b{display:block;margin-top:3px;font:bold 10.5px var(--sans);
  color:#5d4c33;line-height:1.2}
.beast span{display:block;font-size:9.5px;color:#8a7a5c}
/* Items use the same format as the creatures, but smaller: an item sprite
   is 32 px and enlarging it further only blurs it. */
.beast.loot img{width:44px;height:44px}
.beast.loot{flex:0 0 84px}
/* The crossed-out display case of the pay-to-win section: the items dimmed
   and the stamp on top. Drawn with CSS, with no new images. */
.shop{position:relative;margin:12px 0 2px;padding:14px 10px 12px;clear:both;
  border-radius:3px;background:var(--parch2);
  box-shadow:inset 0 0 0 1px rgba(120,95,60,.5)}
/* Dimmed, but not invisible: any greyer than this and the coin could not be
   seen. */
.shop .beasts{margin:0;padding:0;background:none;box-shadow:none;
  filter:grayscale(.55);opacity:.72}
/* Today's products are drawn as shop cards: one box per product, so it
   reads as a "catalogue" and not as a "backpack". */
.shop .beast{flex:0 0 104px;padding:9px 4px 7px;border-radius:3px;
  background:rgba(255,247,229,.5);
  box-shadow:inset 0 0 0 1px rgba(120,95,60,.4)}
.shop .beast img{width:48px;height:48px}
.shop .beast b{font-size:11px;color:#5d4c33}
/* The price tag: it is what turns five loose icons into a catalogue. It
   says "this costs real money" without a single word. */
.shop .beast{position:relative}
.shop .beast::after{content:"€";position:absolute;top:3px;right:5px;
  width:17px;height:17px;border-radius:50%;
  font:bold 11px/17px var(--sans);color:#fff6e6;
  background:linear-gradient(#a8291d,#7c1710);
  box-shadow:0 1px 2px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.25)}
/* The stamp goes BELOW the cards, overlapping them a little. Centred on top
   it covered the labels of half the products, and what has to be read is
   precisely what they are. */
.shop .stampRow{position:relative;text-align:center;margin-top:2px;
  pointer-events:none}
.shop .stamp{display:inline-block;transform:rotate(-4deg);padding:7px 20px;
  border:3px solid #8c2118;border-radius:4px;color:#8c2118;
  font:bold 19px/1 var(--sans);letter-spacing:4px;text-transform:uppercase;
  background:rgba(255,247,229,.92);box-shadow:0 2px 7px rgba(0,0,0,.35);
  white-space:nowrap}
.shop .stampNote{margin-top:9px;text-align:center;font-size:10.5px;
  color:#7a6a4c}
/* The list of what is bought with money today, crossed out. It goes in two
   columns because in a single one it takes up half the screen and loses the
   at-a-glance effect. */
.gone{margin:10px 0 2px;padding:12px 14px 10px;border-radius:3px;clear:both;
  background:var(--parch2);box-shadow:inset 0 0 0 1px rgba(120,95,60,.5)}
.gone > b{display:block;margin:0 0 8px;font:bold 12px var(--sans);
  letter-spacing:.4px;text-transform:uppercase;color:#7a1408}
.gone ul{margin:0;padding:0;list-style:none;columns:2;column-gap:22px}
/* ONLY the product name is struck through, not the whole line: with
   everything struck through nobody could read the explanation, and that is
   exactly the part that stings. */
.gone li{break-inside:avoid;margin:0 0 6px;padding-left:17px;position:relative;
  font-size:12px;line-height:1.4;color:#6b5c40;text-decoration:none}
.gone li s{color:#8a7a5c;font-weight:bold;text-decoration-line:line-through;
  text-decoration-color:rgba(140,33,24,.9);text-decoration-thickness:2px}
/* The cross is not struck through: otherwise you cannot tell it is a
   cross. */
.gone li::before{content:"×";position:absolute;left:0;top:-1px;
  color:#8c2118;font:bold 13px var(--sans);text-decoration:none}
.gone li i{font-style:normal;color:#7a6a4c;font-size:11px}
.gone p{margin:9px 0 0;text-decoration:none;color:var(--ink);font-weight:bold}
/* ---------------- the world map ---------------- */
.worldMap{position:relative;margin:12px 0 6px;border-radius:3px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(120,95,60,.6),0 2px 6px rgba(0,0,0,.4)}
.worldMap img{display:block;width:100%;image-rendering:pixelated}
/* The city names, also as a row of cards. */
/* No stretching: with flex:1 the last two shared out the width of the row
   and ended up twice the size of the rest. */
/* The cities: they are not links or menu cards, they are a list to read.
   In two columns, with the name in serif and one line about what each one
   was. */
.towns{margin:12px 0 4px;padding:13px 15px 11px;border-radius:3px;
  background:var(--parch2);box-shadow:inset 0 0 0 1px rgba(120,95,60,.5);
  columns:2;column-gap:26px}
.towns div{break-inside:avoid;margin:0 0 9px;padding-left:15px;position:relative}
.towns div::before{content:"";position:absolute;left:0;top:6px;width:6px;
  height:6px;border-radius:50%;background:#a8291d;
  box-shadow:0 0 0 2px rgba(255,247,229,.85)}
.towns b{display:block;font:bold 13px var(--serif);color:var(--ink);
  letter-spacing:.2px}
.towns span{display:block;margin-top:1px;font-size:11px;line-height:1.35;
  color:#7a6a4c}

/* The green mirror of the red list: what DOES work, so that anyone who does
   not believe it can check. Same grid, different mark. */
.works{margin:10px 0 2px;padding:12px 14px 10px;border-radius:3px;clear:both;
  background:var(--parch2);box-shadow:inset 0 0 0 1px rgba(120,95,60,.5)}
.works > b{display:block;margin:0 0 8px;font:bold 12px var(--sans);
  letter-spacing:.4px;text-transform:uppercase;color:#3f5d1f}
.works ul{margin:0;padding:0;list-style:none}
.works li{margin:0 0 7px;padding-left:20px;position:relative;font-size:12px;
  line-height:1.4;color:#5d4c33}
.works li::before{content:"✓";position:absolute;left:0;top:-1px;color:#4a7020;
  font:bold 13px var(--sans)}
.works li b{color:var(--ink)}
.works p{margin:9px 0 0;font-weight:bold;color:var(--ink)}

/* The only thing that does exist, stated positively and in plain sight. */
.only{margin:10px 0 0;padding:12px 14px;border-radius:3px;clear:both;
  background:linear-gradient(rgba(90,120,50,.20),rgba(90,120,50,.10));
  box-shadow:inset 0 0 0 1px rgba(95,120,55,.55)}
.only b{color:#3f5d1f}
.pledge{margin:12px 0 0;padding:11px 13px;border-radius:3px;clear:both;
  background:var(--parch2);box-shadow:inset 0 0 0 1px rgba(120,95,60,.5)}
.pledge b{color:#7a1408}

/* ---------------- guilds ---------------- */
.guilds td{vertical-align:middle}
.gLogoCell{width:56px;text-align:center}
.gLogo{image-rendering:pixelated;object-fit:contain;vertical-align:middle;
  filter:drop-shadow(0 1px 2px rgba(60,40,15,.45))}
.gName{font:bold 13px var(--serif);color:var(--ink)}
.gDesc{margin-top:3px;color:#5d4c33}
.gView{width:112px;text-align:right;white-space:nowrap}
/* The card header: the emblem on both sides of the name, as on tibia.com,
   where the shield is repeated left and right. */
.guildHead{display:flex;align-items:center;justify-content:center;gap:24px;
  margin:0 0 14px;padding:8px 6px}
.guildHead h1{margin:0;font:normal 26px var(--serif);color:var(--ink);
  text-shadow:0 1px 0 rgba(255,247,229,.6);text-align:center}
.gMotto{margin:0 0 9px}
/* A scheduled leadership handover: it has not happened yet, so it is set
   apart from the rest of the card instead of reading as a fact. */
.pendingLead{margin:0 0 9px;padding:7px 10px;border-radius:3px;
  background:rgba(120,95,60,.13);
  box-shadow:inset 0 0 0 1px rgba(120,95,60,.35)}
.gTitle{color:#7a6a4c}
.gRank{width:140px}
/* No cell in this table breaks in two: "Master Sorcerer" and the dates went
   onto two lines and the member list came out jumpy. The name column takes
   whatever space is left over. */
.members td,.members th{white-space:nowrap}
/* The column that takes the leftover space: in the member list it is the
   name one, and in the management list the controls one. Without telling
   them apart, the rank column ate the width and the buttons stacked up in a
   column. */
.roster td:nth-child(2){width:100%}
.manage td:nth-child(3){width:100%}
.members td.on{color:#2c6a1d;font-weight:bold}
.members td.off{color:#8a3b2a}
.guildFoot{margin-top:16px;padding-top:14px;text-align:center;color:#5d4c33;
  border-top:1px solid rgba(120,95,60,.35)}
.guildFoot .buttons{margin-top:10px;text-align:center}
/* Emblem grid. The real radio is hidden and what you see is the sprite;
   that way a logo is picked with one click and without uploading any
   image. */
.emblems{display:flex;flex-wrap:wrap;gap:6px;max-width:430px}
.emblem{position:relative;display:inline-flex;align-items:center;
  justify-content:center;width:42px;height:42px;border-radius:3px;cursor:pointer;
  background:rgba(120,95,60,.10);
  box-shadow:inset 0 0 0 1px rgba(120,95,60,.35)}
.emblem input{position:absolute;opacity:0;width:0;height:0;margin:0}
.emblem img{width:32px;height:32px;image-rendering:pixelated}
.emblem.on,.emblem:has(input:checked){background:rgba(90,120,50,.25);
  box-shadow:inset 0 0 0 2px #6f8a3f}
/* A member management row: rank, title and buttons in line. */
.mRow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mRow input,.mRow select{padding:3px 6px;font:12px var(--sans);color:var(--ink);
  background:#fbf3e0;border:1px solid #a08a63;border-radius:3px}
.mRow input{min-width:130px}
.mRow .tButton{padding:4px 10px;font-size:11px}
/* The spell search: a row of dropdowns that fits the width of the box and
   wraps by itself on narrow screens. */
.filters{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;
  margin:0 12px 12px;padding:10px 12px;background:rgba(216,196,160,.35);
  border:1px solid #c8b48c;border-radius:4px}
.filters label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;
  font-weight:bold;color:#6b5a3e;text-transform:uppercase;letter-spacing:.04em}
.filters input,.filters select{flex:0 0 auto;padding:3px 6px;
  font:12px var(--sans);color:var(--ink);background:#fbf3e0;
  border:1px solid #a08a63;border-radius:3px;text-transform:none;
  letter-spacing:0}
.filters button{padding:6px 16px}
/* The "Reset" goes next to the button and has to sit at the same height.
   With `align-self:center` it centred against the whole row -- which is
   taller, because the filters carry their title above them -- and came out
   floating over the button. It is given the same box as the button (same
   type, same padding and a transparent two pixel border) and, since the row
   aligns to the bottom, both texts land on the same line. */
.filters .clear{align-self:flex-end;padding:6px 6px;
  font:bold 11px var(--sans);line-height:normal;
  border:2px solid transparent}
/* The spell table has ten columns: the type is tightened up a little and
   the name and the formula are left in charge. */
table.spells{font-size:11.5px}
table.spells td,table.spells th{padding:4px 6px}
/* The header does not wrap: otherwise the sort arrow dropped onto a second
   line all by itself. */
table.spells th{white-space:nowrap}
table.spells td.num{white-space:nowrap}
/* The quest list: the reward is just pictures, and the numbered map legend
   sits right next to the picture, not as a shopping list. */
td.sReward{white-space:nowrap}
td.sReward .icon{margin-right:2px}
a.more{font:italic 11px var(--serif);color:#7a4a1e}
img.questMap{image-rendering:pixelated;width:100%;max-width:440px;
  border:2px solid #2a1d12}
ul.legend{margin:10px 0 0;padding:0;list-style:none;
  font:12px var(--serif);color:#5b4636}
ul.legend li{padding:2px 0}
/* Each picture in the guide with its caption, one after another as you
   scroll down. */
.shot{margin:16px 0 6px;text-align:center}
.shot img{display:block;margin:0 auto}
.shot .legend{display:inline-block;text-align:left;margin:8px 0 0}
table.spells td.sName,table.spells td.sWords{white-space:nowrap}
table.spells td.sVoc{font-size:11px;color:#5b4c33}
table.spells td.sEffect{font-size:11px;color:#5b4c33}
/* The words an NPC understands: small cards, since there are many. */
.says{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.say{padding:2px 7px;font:11.5px var(--sans);color:#4a3c26;background:#efe2c4;
  border:1px solid #c6b189;border-radius:10px}
.automap{image-rendering:pixelated;border:2px solid #6d5836;border-radius:3px}
/* Safety net for the wide tables: on a small screen the table scrolls, it
   does not spill off the paper. */
.wide{overflow-x:auto}
/* The headers that sort the equipment table: they look like links but do
   not shout, and the arrow says which way it goes. */
table.spells th a{color:inherit;text-decoration:none;border:0}
table.spells th a:hover{text-decoration:underline}
table.spells th .dir{color:#8a6a2a}
/* The batches of the item list. */
.pager{display:flex;justify-content:center;align-items:center;gap:18px;
  padding:8px 0;font-size:12px}
.pager span{color:#9a8a6d}
/* A sample snippet of conversation: what you say on the left and what the
   NPC answers in italics, so the order can be seen at a glance. */
.talk{margin:8px 0;padding:8px 12px;background:rgba(216,196,160,.35);
  border-left:3px solid #a08a63;border-radius:3px}
.talk p{margin:2px 0;font-size:12px}
.talk b{display:inline-block;width:34px;color:#6b5a3e}
.talk .them{font-style:italic;color:#5b4c33;margin-left:34px}
/* The big picture on a rune card: the sprite is 32, it is shown at double
   size and without smoothing, which is how it looks in the game. */
.bigItem{width:64px;height:64px;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 2px 2px rgba(60,40,15,.45))}
/* The icon is the same size in ALL the lists -- spells, runes, NPCs, items
   and equipment -- as in the creature one: 32 pixels, which is exactly what
   the game sprite measures. Before, these five were at 24 and the creature
   one at 32, and there was no reason for the difference. */
/* The gap for those that do not conjure a rune: it takes up space, but is
   not seen. */
table.spells td.sName .noImg{background:none;border:0;box-shadow:none}
table.spells td.sWords{font-family:var(--serif);color:#5d4a2a}
.prem{display:inline-block;margin-left:5px;padding:0 4px;border-radius:2px;
  font:bold 8.5px/13px var(--sans);letter-spacing:.05em;text-transform:uppercase;
  color:#3a2d14;background:var(--gold);vertical-align:1px}
.foot{position:relative;z-index:1;text-align:center;padding:18px;
  color:#8a7c62;font-size:10.5px}
@media(max-width:900px){.page{grid-template-columns:1fr}}