/* The game guide: dense reference tables on top of the public-page styles. */

.guide{max-width:920px}
.guide h2{font-size:14px;margin-top:46px;padding-bottom:8px;border-bottom:3px solid var(--stone-2)}
.guide h4{font-size:10px;color:var(--gold);margin:0 0 6px}
.guide section:first-of-type h2{margin-top:26px}

/* --- contents --- */
.toc{background:var(--stone-1);border:3px solid var(--ink);padding:16px 18px;margin:24px 0 8px;
  box-shadow:inset 0 3px 0 var(--stone-3),inset 0 -3px 0 var(--stone-0)}
.toc b{display:block;color:var(--gold);font-size:10px;margin-bottom:10px}
.toc a{display:inline-block;width:calc(50% - 10px);font-size:9px;margin:4px 0;border:none;
  color:var(--parch-d)}
.toc a:hover{color:var(--gold)}

/* --- tables --- */
.tableWrap{overflow-x:auto;margin:14px 0 22px;border:3px solid var(--ink);background:var(--stone-0)}
.guide table{border-collapse:collapse;width:100%;font-size:9px;min-width:420px}
.guide th{background:var(--stone-2);color:var(--gold);text-align:left;padding:9px 10px;
  white-space:nowrap;border-bottom:3px solid var(--ink);font-weight:normal}
.guide td{padding:8px 10px;border-bottom:1px solid var(--stone-1);color:var(--parch-d);
  white-space:nowrap}
.guide tbody tr:last-child td{border-bottom:none}
.guide tbody tr:hover td{background:var(--stone-1)}
.guide td b{color:var(--parch)}
.guide .no{color:var(--stone-3)}
.guide .lv{color:var(--stone-4);font-size:8px}

/* the Town Hall matrix is wider than the rest */
.thTable{min-width:560px}

/* --- one building --- */
.bld{margin:22px 0 30px;padding-left:14px;border-left:4px solid var(--stone-2)}
.bld p{margin:6px 0}
.tag{display:inline-block;font-size:7px;color:var(--stone-4);background:var(--stone-1);
  border:2px solid var(--ink);padding:3px 6px;margin-left:5px;vertical-align:middle;
  white-space:nowrap}
.tag.warnTag{color:var(--blood-l);border-color:var(--blood)}

.guide .cards{margin-top:18px}
.guide .card h4{margin-bottom:6px}
.guide .card p{font-size:9px;margin:5px 0}

.formula{background:var(--stone-0);border:3px solid var(--ink);border-left:4px solid var(--gold-d);
  padding:12px 14px;color:var(--gold)!important;font-size:9px;overflow-x:auto;white-space:nowrap}

.guide p.warn{color:var(--blood-l);border-left:4px solid var(--blood);
  background:var(--stone-0);padding:10px 13px}

@media (max-width:620px){
  .toc a{width:100%}
  .guide h2{font-size:12px}
}