body {
background:#FFF;
color:#000;
font-size:90%;
text-align:center;
}
a, a:visited {
color:#000;
text-decoration:underline;
}
a:active, a:hover {
color:#00F;
text-decoration:none;
}
h1, h2 {
font-size:200%;
margin:0;
}
h2, caption {
font-size:110%;
font-weight:bold;
}
caption {
margin:1ex;
}
caption aside {
position:absolute;
margin-left:1ex;
font-weight:normal;
display:inline;
font-size:91%;
margin-top:.3ex;
}
hr {
clear:both;
visibility:hidden;
height:2ex;
margin:0;
}
.section ul {
margin-bottom:1ex;
}
.section h2 {
margin:0 1ex;
clear:both;
}
.section table {
float:left;
position:relative;
margin:1ex 1ex 2ex;
}
.section .section {
float:left;
}
#charset .section table {
margin:-0.5ex 0 1ex;
}
p {
margin:1ex 0 1em;
}
p.aside {
font-size:80%;
}
p.footer {
margin:1em 0 0;
clear:both;
}
.help + .footer {
margin:0;
}
.error {
background:#F00;
background:rgba(255, 0, 0, .8);
color:#FFF;
border:2px solid #000;
border-width:2px 0;
padding:1em;
margin:2ex auto;
clear:both;
}
.error > * {
margin-bottom:1ex;
}
.error > *:last-child {
margin-bottom:0;
}
ul {
margin:0;
padding:0;
list-style:none;
}
pre {
text-align:left;
margin:2ex auto;
white-space:pre-wrap;
overflow-wrap:break-word;
}
body > pre {
width:78ch;
tab-size:4;
-moz-tab-size:4;
padding:0 1em;
border-width:0 1px;
border-style:solid;
white-space:pre;
}
code {
white-space:nowrap;
}
h1 small,
h2 small {
position:absolute;
margin-left:1em;
font-size:50%;
font-weight:normal;
padding-top:1.75ex;
}
dl > dt {
float:left;
width:50%;
text-align:right;
}
dl > dd {
text-align:left;
padding-left:1em;
overflow:hidden;
}
.row0 {margin-top:-5ex}
.row2 {margin-left:7em}
.row3 {margin-left:8em}
.row4 {margin-left:10em}
table.keys tr {
clear:both;
display:block;
}
table.keys tbody {
clear:both;
padding-top:1ex;
display:block;
}
table.keys th,
h3 {display:none}
.keys .mode {display:none}
table.keys {
display:block;
width:82.5em;
// padding-right:72px;
border-spacing:0;
border-collapse:collapse;
}
table.keys > * {
margin-right:-72px;
}
dl.legend dt,
.keys td {
float:left;
width:6.2em;
line-height:2.25ex;
height:4.5ex;
overflow:hidden;
margin:0 2px -1px;
padding:0;
text-align:center;
border:1px solid #000;
border-radius:4px;
-moz-border-radius:4px;
text-transform-variation:text;
}
.keys td b {
float:left;
font-size:200%;
line-height:2.5ex;
padding-left:2px;
}
.keys .row0 td {
width:8.5em;
}
.keys td b[title] {
cursor:help;
}
.keys td[onclick]:hover {
cursor:pointer;
}
.keys td a {
color:inherit;
text-decoration:none;
display:block;
height:100%;
}
.keys .meta td b,
.keys .ctrl td b,
.keys .lead td b {
font-size:100%;
line-height:5ex;
}
.keys .meta td b small,
.keys .ctrl td b small {
font-size:70%;
font-weight:normal;
}
table {
border-collapse:collapse;
}
th, td {
border-color:#778;
border:1px solid #888;
background:#DDD;
}
thead th, td {
text-align:center;
}
td.joind {
border-bottom:none;
}
td.joinu {
border-top-color:transparent;
}
td.joinr {
border-right:none;
}
td.joinl {
border-left:none;
}
thead {
position:sticky;
top:0;
background:#DDD8;
}
.glyphs thead th, .glyphs td {
width:1.6em;
}
.glyphs tbody td {
font-size:112%;
}
.glyphs.big tbody td {
font-size:200%;
}
.glyphs .glyphs {
margin:0.5ex 0;
}
.glyphs .glyphs td {
font-size:100%;
}
.cover td {
min-width:2.5ex;
}
th,
tfoot td,
thead td {
border-width:0;
background:transparent;
}
.glyphs thead td {
width:auto;
}
.glyphs caption {
margin-left:2.2em;
}
th {
padding:0 0.2em;
}
.diinfo th {
font-size:50%;
font-weight:normal;
}
.diinfo tbody th {
text-align:right;
padding:0 0.5em;
}
.cat {
font-size:70%;
text-transform:uppercase;
}
tfoot .cat th {
border-top:1px solid #888;
}
table.color td {
border:1px solid #555;
font-weight:normal;
padding:0 8px;
}
table.color td samp {
margin:0 -8px 0 8px;
font-family:inherit;
float:right;
}
table.color td samp ~ samp {
}
table.color td samp small {
font:100% monospace;
padding:0 .5ex;
}
table.dimap {
table-layout:fixed;
}
.dimap thead th, .dimap td {
width:1.2em;
min-width:1em;
}
.dimap th {
text-align:center;
}
.mapped tbody, .mapped colgroup,
.dimap tbody, .dimap colgroup {
border:2px double #888;
}
.mapped tbody,
.dimap tbody {
border-width:2px 0;
}
.mapped colgroup,
.dimap colgroup {
border-width:0 2px;
}
.diinfo {
-moz-column-width:24em;
-webkit-column-width:24em;
column-width:24em;
}
.diinfo > div {
overflow:hidden;
column-break-inside:avoid;
-webkit-column-break-inside:avoid;
position:relative; z-index: 1;
}
.glyphs.dilabel td {
padding:0;
padding-bottom:1.1ex;
vertical-align:bottom;
}
.glyphs.dilabel small {
font-size:50%;
display:block;
margin-top:0.2ex;
margin-bottom:-2.2ex;
}
.glyphs.dilabel small.digraph {
background:#000;
color:#FFF;
opacity:0.3;
}
.glyphs.dilabel small.value {
background:#600;
color:#FFF;
opacity:0.3;
}
.X {background:#FFF}
.Mc, .Me, .Zl, .Zp {background:#F00}
.X > span {background:#898; background: rgba(0, 0, 0, .25)}
.Armenian,
.Greek {background:#FFE8CF}
.Cyrillic {background:#FFDDA8}
.Latin {background:#FFB}
.Aramaic,
.Hebrew {background:#FFD}
.Arabic {background:#EFE}
.African {background:#DED}
.Brahmic {background:#FBB}
.Khmer {background:#FBA}
.Hangul,
.Syllabic {background:#DEA}
.Katakana {background:#DFA}
.Hiragana {background:#DFC}
.Bopomofo {background:#BFC}
.Han {background:#CFD}
.Alpha {background:#ADA}
.Nd, .Nl, .No {background:#FDD}
.Sc {background:#FCD}
.Sm {background:#ECE}
.So {background:#DCF}
.Pd, .Po, .Pc {background:#CDF}
.Ps, .Pe, .Pi, .Pf {background:#BEF}
.Lm, .Sk {background:#CEE}
.Mn {background:#ACC}
.Cc, .Cf {color:#666; background: #BBB}
.Zs {background:#ACB}
.Co, .Xi.Co {background:#DCC}
.Xi, .Cs {background:#CCC}
.Xd {color:#844}
.Xr {color:#888}
.dimap .Xr {background:#EEE}
.ccmap .Xr {opacity:.4}
.l1 {background:#FDD}
.l2 {background:#FED}
.l3 {background:#FFD}
.l4 {background:#EFD}
.l5 {background:#DFD}
.l0 {background:#EEE}
.ex { color:#888; color: rgba(0, 0, 0, .5)}
.u-invalid {background:#BBB}
#digraphs .u-l3 {color:#080}
#digraphs .u-l3.ex {color:#4C0}
#digraphs .u-l2 {color:#A44; color: rgba(128, 0, 0, .6)}
#digraphs .u-l1 {color:#D00; color: rgba(255, 0, 0, .8)}
.p0 {opacity:.6}
.p0.p {opacity:1}
.p::after {content:'!'; color: #F00}
.p4::after {color:#C00}
.p3::after {color:#A00}
.p2::after {color:#800}
.p1::after,
.p0::after {color:#000}
.p09::after {opacity:.9}
.p08::after {opacity:.8}
.p07::after {opacity:.7}
.p06::after {opacity:.6}
.p05::after {opacity:.5}
.p04::after {opacity:.4}
.p03::after {opacity:.3}
.p02::after {opacity:.2}
.p01::after {opacity:.1}
.p00::after {display:none}
.sy-comment { color:#888 }
.sy-constant { color:#008 }
.sy-type,
.sy-identifier { color:#804 }
.sy-statement { }
.sy-preProc { }
.sy-special { color:#408 }
.sy-error { font-weight:bold; background-color: #F00; color: #FFF }
.sy-todo { background-color:#FF0 }
.glyphs b { font-weight:normal; color: #800 }
.X:hover {cursor:help}
.X:hover > span {background:#FFF}
.Greek:hover, .Armenian:hover {background:#FA8}
.Cyrillic:hover {background:#FB7}
.Latin:hover {background:#EE4}
.Hebrew:hover, .Aramaic:hover {background:#FFA}
.Arabic:hover {background:#CFD}
.African:hover {background:#BDB}
.Syllabic:hover, .Hangul:hover {background:#CE6}
.Katakana:hover {background:#BF7}
.Hiragana:hover {background:#AF8}
.Bopomofo:hover {background:#8FA}
.Brahmic:hover {background:#F77}
.Khmer:hover {background:#F87}
.Han:hover {background:#5EB}
.Alpha:hover {background:#5C5}
.Nd:hover, .Nl:hover, .No:hover {background:#F99}
.Sc:hover {background:#F8C}
.Sm:hover {background:#F8F}
.So:hover {background:#A8F}
.Pd:hover, .Po:hover, .Pc:hover {background:#8AF}
.Ps:hover, .Pe:hover, .Pi:hover, .Pf:hover {background:#8DF}
.Lm:hover, .Sk:hover {background:#BFF}
.Mn:hover {background:#CDE}
.Zs:hover {background:#CED}
.Cc:hover, .Cf:hover {background:#DDD}
.Co:hover {background:#A77}
.Xr:hover {background:#FFF}
.Xi:hover {background:#DDD}
.l0:hover {background:#888}
.l1:hover {background:#F88}
.l2:hover {background:#FC8}
.l3:hover {background:#FF8}
.l4:hover {background:#CF8}
.l5:hover {background:#8F8}
.u-l3:hover {outline:1px solid #080}
.u-l3.ex:hover {outline:1px solid #8F0}
.u-l2:hover {outline:1px solid #800}
.u-l1:hover {outline:1px solid #F00}
.c-sa,
.g1 {background:#BFE}
.c-na,
.g2 {background:#BFB}
.g3 {background:#DFA}
.c-af,
.g4 {background:#FFA}
.c-eu,
.g5 {background:#FDA}
.g6 {background:#FCA}
.c-as,
.g7 {background:#FCC}
.c-an,
.g8 {background:#ECE}
.c-oc,
.g9 {background:#CCF}
.c-sa:hover,
.g1 a:hover, .g1[onclick]:hover {background:#5ED}
.c-na:hover,
.g2 a:hover, .g2[onclick]:hover {background:#7E7}
.g3 a:hover, .g3[onclick]:hover {background:#CE6}
.c-af:hover,
.g4 a:hover, .g4[onclick]:hover {background:#EE4}
.c-eu:hover,
.g5 a:hover, .g5[onclick]:hover {background:#FA6}
.g6 a:hover, .g6[onclick]:hover {background:#F97}
.c-as:hover,
.g7 a:hover, .g7[onclick]:hover {background:#F88}
.c-an:hover,
.g8 a:hover, .g8[onclick]:hover {background:#D9D}
.c-oc:hover,
.g9 a:hover, .g9[onclick]:hover {background:#99F}
.no {
background:#EEE;
}
.keys td.ni {
border:0;
padding:1px;
background:none;
}
dl.legend dt.more,
.keys td.more b {
text-shadow:#F20 0 0 0.1em;
}
dl.legend dt.more:hover,
.keys td.more:hover b {
text-shadow:#F20 0 0 0.5em, #FC0 0 0 0.2em;
}
dl.legend dt.new,
.keys td.new {
border-style:dashed;
}
dl.legend dt.ext,
.keys td.ext {
opacity:.6;
}
.help {
display:table;
width:100%;
}
.help > * {
display:table-cell;
width:20%;
vertical-align:top;
}
.left dl.legend {
margin-left:6.4em;
}
.left dl.legend dt {
margin-left:-6.4em;
float:left;
clear:left;
}
.left dl.legend dd {
float:left;
}
.right dl.legend {
margin-right:6.4em;
}
.right dl.legend dt {
margin-right:-6.4em;
float:right;
clear:right;
}
.right dl.legend dd {
float:right;
}
.right {
text-align:right;
}
dl.legend dt {
margin:0 0 1px;
height:auto;
padding:2px 0;
}
dl.legend dd {
margin:3px 0.4em 0;
padding:0;
}
dl.legend-options dt {
background:#CCC;
}
ul.legend-set {
clear:right;
padding-top:1ex;
}
ul.legend-set li {
margin:6px 0;
}
.legend {
margin-top:1em;
}
.legend table {
width:100%;
}
.legend td {
padding:0 0.2em;
}
figure {
margin:0;
position:relative;
}
figure img {
vertical-align:bottom;
width:100%;
}
@media (min-width:60em) {
figcaption {
padding:0 1em;
color:#000;
background:rgba(255, 255, 255, .66);
position:absolute;
right:0;
bottom:0;
max-width:100%;
box-sizing:border-box;
}
.gallery li.parent:hover > figure > figcaption,
.gallery figure:hover > figcaption {
font-size:175%;
right:50%;
bottom:50%;
transform:translate(50%, 50%);
margin-left:-60%;
}
}
.gallery {
display:grid;
grid:auto-flow dense / repeat(auto-fit, minmax(200px, 1fr));
grid-gap:1px;
}
.gallery li, .gallery ul {
display:contents;
}
.gallery figure {
overflow:hidden;
box-sizing:border-box;
}
.gallery figcaption > small {
display:inline-block;
}
@media (min-width:403px) and (min-height: 266px) {
.gallery li.large > figure {
grid-row:span 2;
grid-column:span 2;
}
}
@media (min-width:603px) and (min-height: 400px) {
.gallery > ul > li:first-child > figure,
.gallery li.huge > figure {
grid-row:span 3;
grid-column:span 3;
}
}
.gallery figure, .gallery figcaption {
transition:all .5s ease-in;
}
.gallery figure:hover ~ ul figcaption {
color:#FFF;
background:rgba(0, 0, 0, .5);
}
body#word {
margin:8px 1px;
}
table.gallery {
grid-auto-flow:row;
grid-template-columns:repeat(auto-fit, minmax(2em, max-content));
}
table.gallery tbody,
table.gallery tr {
display:contents;
}
table.gallery tr > :first-child {
grid-column:1;
-grid-row:span 6;
margin:auto;
}
table.gallery tr > :nth-child(2) {
grid-column:2;
}
table.gallery td {
border:0;
outline:1px solid #888;
}
#browser td > a {
text-decoration:none;
}
#browser td > a:active,
#browser td > a:hover {
text-decoration:underline;
}
#browser tr .aside {
font-size:80%;
overflow:hidden;
height:0;
-webkit-transition:all 1s ease-in;
-o-transition:all 1s ease-in;
-moz-transition:all 1s ease-in;
transition:height 1s ease-in;
}
#browser tr .aside p {
margin:1ex 0;
}
#browser tr.target .aside,
#browser tr:target .aside {
height:auto;
}
#browser td.X {
white-space:nowrap;
}
#browser tr:target > td:first-of-type,
#browser tr.focus > td:first-of-type {
background:inherit;
}
#browser tr.focus > td {
border-bottom-color:#000;
}
form.aside {
position:absolute;
top:3ex;
right:1em;
}
.family-name {
font-variant:small-caps;
}
#index nav {
columns:3;
-moz-columns:3;
-webkit-columns:3;
}
nav > .section {
break-inside:avoid;
-webkit-column-break-inside:avoid;
page-break-inside:avoid;
overflow:hidden;
}
#index nav a {
display:inline-block;
margin-top:1em;
}
.units tbody tr:hover:not(.race) {
background:#EEE;
}
.unit-gas {
color:#040;
}
.unit-min, .unit-min a:not(:hover) {
color:#004;
}
.unit-supply {
color:#080;
}
.unit-o {color:#C08}
.unit-u {color:#44C}
.unit-p {color:#0A8}
.unit-composed {
color:#C88;
}
.unit-air {
color:#08C;
}
.unit-x {color:#888}
.unit-s {color:#890}
.unit-m {color:#C70}
.unit-l {color:#D22}
.unit-h {color:#804}
.magic-opt:before,
.magic-opt:after {
color:#000;
}
.hurtrel, .units .hurtrel {
color:#778;
}
tbody .unit-shield {
color:#64A;
}
.unit-pdd {
color:#A8C;
}
.unit-splash {
color:#4A0;
}
.hurt-a {
color:#036;
}
.hurt-g {
color:#063;
}
.unit-massive {
color:#D88;
}
.unit-detect::before {
color:#0A8;
}
.unit-jump {
color:#8A4;
}
body .magic-perma {
text-decoration-color:#8C0;
-moz-text-decoration-color:#8C0;
-webkit-text-decoration-color:#8C0;
}
@page {
size:landscape;
margin:0;
}
@media print {
ul.legend-set {display:none}
}
@media (min-height:112ex) and (min-width: 90em) {
table.keys {
width:auto;
}
.keys td {
padding:1ex 0 1ex .1em;
width:7em;
}
}
@media (max-width:79em) {
.keys td {
position:relative;
width:4.5em;
}
.keys td b,
.keys .meta td b,
.keys .ctrl td b,
.keys .lead td b {
position:absolute;
right:0;
font-size:250%;
line-height:2.5ex;
opacity:.5;
color:#FFF;
}
table.keys {
width:62.1em;
}
.row2 {margin-left:5.3em}
.row3 {margin-left:6em}
.row4 {margin-left:7.5em}
@media (max-width:61em) {
.keys td {
width:3em;
height:6.75ex;
font-size:80%;
}
.keys td b,
.keys .meta td b,
.keys .ctrl td b,
.keys .lead td b {
line-height:4ex;
}
table.keys {
width:37em;
}
.row2 {margin-left:3.5em}
.row3 {margin-left:4em}
.row4 {margin-left:5em}
}
@media (max-width:42em) {
.help > * {
display:table-row;
width:auto;
}
ul.legend-set {
clear:left;
}
.right dl.legend {
margin-right:0;
margin-left:6.4em;
}
.right dl.legend dt {
margin-right:0;
margin-left:-6.4em;
float:left;
clear:left;
}
.right dl.legend dd {
float:left;
}
}
}