@font-face {
  font-family: 'opensans';
  src: url('opensans.woff') format('woff');
  font-weight:normal;
  font-style:normal;
}

html {background-color:#222;font-family:'opensans',sans-serif;font-size:62.5%;height:100%;}
body {color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.6rem;height:100%;margin:0;text-align:center;}

body.view-window nav,
body.view-window footer {display:none;}

main {display:flex;flex-wrap:wrap;margin:0 auto;}
main > div {background-color:#262626;color:#555;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1.25em;margin:0.1rem;overflow:hidden;position:relative;vertical-align:top;}
main > div span, main > div ul {pointer-events:none;position:relative;text-shadow:0 0.5px 1px #222;z-index:1;}
main > div ul {list-style-type:none;margin:0;padding:0;}
main > div ul:not(.charhighlight) li:not(:first-child) {display:none;}
main > div ul.charhighlight {display:flex;pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;transform:rotate(45deg) scale(145%);}
main > div ul.charhighlight li.active {flex:1;height:100%;}

main[data-zoom="1"] {width:16rem;}
main[data-zoom="1"] > div {font-size:0.75rem;width:3rem;height:3rem;}
main[data-zoom="1"] > div.character {background-size:20px;}

main[data-zoom="2"] {width:24rem;}
main[data-zoom="2"] > div {font-size:1.05rem;width:4.6rem;height:4.6rem;}
main[data-zoom="2"] > div.character {background-size:28px;}

main[data-zoom="3"] {width:32rem;}
main[data-zoom="3"] > div {font-size:1.3rem;width:6.2rem;height:6.2rem;}

main[data-zoom="4"] {width:40rem;}
main[data-zoom="4"] > div {font-size:1.4rem;width:7.8rem;height:7.8rem;}

main > :nth-child(1) {border-top-left-radius:0.3rem;}
main > :nth-child(5) {border-top-right-radius:0.3rem;}
main > :nth-child(21) {border-bottom-left-radius:0.3rem;}
main > :nth-child(25) {border-bottom-right-radius:0.3rem;}

main > .active {background-color:#444;color:#fff;}

main > [data-count] {position:relative;}
main > [data-count]:not([data-count="1"]):before {content:attr(data-count);font-size:1.25rem;font-weight:bold;position:absolute;top:0.5rem;right:0.5rem;z-index:2;}

main > .character[data-character] {background-position:center center;background-repeat:no-repeat;font-size:0;}
main > .character[data-character] > span {display:none;}
main > .character[data-character="maxim"] {background-image:url('https://ref.ancientcave.net/img/characters/maxim.png');}
main > .character[data-character="tia"] {background-image:url('https://ref.ancientcave.net/img/characters/tia.png');}
main > .character[data-character="guy"] {background-image:url('https://ref.ancientcave.net/img/characters/guy.png');}
main > .character[data-character="selan"] {background-image:url('https://ref.ancientcave.net/img/characters/selan.png');}
main > .character[data-character="dekar"] {background-image:url('https://ref.ancientcave.net/img/characters/dekar.png');}
main > .character[data-character="lexis"] {background-image:url('https://ref.ancientcave.net/img/characters/lexis.png');}
main > .character[data-character="arty"] {background-image:url('https://ref.ancientcave.net/img/characters/arty.png');}

main > .character[data-character="maxim"].active, main > .maxim.active,
main > div ul.charhighlight li.maxim {background-color:#972e23;}
main > .character[data-character="tia"].active, main > .tia.active,
main > div ul.charhighlight li.tia {background-color:#b55d7a;}
main > .character[data-character="guy"].active, main > .guy.active,
main > div ul.charhighlight li.guy {background-color:#ad7c31;}
main > .character[data-character="selan"].active, main > .selan.active,
main > div ul.charhighlight li.selan {background-color:#326d4c;}
main > .character[data-character="dekar"].active, main > .dekar.active,
main > div ul.charhighlight li.dekar {background-color:#314d85;}
main > .character[data-character="lexis"].active, main > .lexis.active,
main > div ul.charhighlight li.lexis {background-color:#58886e;}
main > .character[data-character="arty"].active, main > .arty.active,
main > div ul.charhighlight li.arty {background-color:#5074c2;}

main > div.cycle[data-cycle] ul:not(.charhighlight) li:first-child {display:none;}
main > div.cycle[data-cycle="2"] ul:not(.charhighlight) li:nth-child(2),
main > div.cycle[data-cycle="3"] ul:not(.charhighlight) li:nth-child(3),
main > div.cycle[data-cycle="4"] ul:not(.charhighlight) li:nth-child(4),
main > div.cycle[data-cycle="5"] ul:not(.charhighlight) li:nth-child(5),
main > div.cycle[data-cycle="6"] ul:not(.charhighlight) li:nth-child(6),
main > div.cycle[data-cycle="7"] ul:not(.charhighlight) li:nth-child(7),
main > div.cycle[data-cycle="8"] ul:not(.charhighlight) li:nth-child(8),
main > div.cycle[data-cycle="9"] ul:not(.charhighlight) li:nth-child(9) {display:block;}

nav ul {display:flex;list-style-type:none;padding:0;}
nav li {background-color:#111;box-sizing:border-box;cursor:pointer;display:inline-block;line-height:4rem;margin:0 0.3rem;padding:0 1.5rem;}
nav li.square {padding:0;width:4rem;}
nav #charhighlight {display:none;}

footer div {color:#444;display:inline-block;margin:1rem;}
footer div a {color:#444;}