@font-face { font-family: Digital; font-style: normal; font-weight: 400; src: url('Checkbook.woff') format('woff'); } @font-face { font-family: Sans; font-style: normal; font-weight: 400; src: url('FiraSans-Regular.woff') format('woff'); } @font-face { font-family: Mono; font-style: normal; font-weight: 400; src: url('DejaVuSansMono.woff') format('woff'); } * { margin: 0; padding: 0; font-weight: normal; text-decoration: none; list-style-type: none; font-style: normal; cursor: default; } html { font-size: 18px; font-family: Sans, sans-serif; text-align: center; color: black; background-color: white; } header, nav, main, section { display: block; } body, nav, .tray { user-select: none; -moz-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; } h1 { font-family: Digital, Sans, sans-serif; font-size: 2em; white-space: nowrap; } body [href], body [onclick], .ticks, input, label { cursor: pointer; } a[href] { color: red; text-decoration: underline; } header { top: 0; position: fixed; left: 0; right: 0; display: block; background-color: black; font-family: Digital, Sans, sans-serif; color: white; z-index: 2; height: 1em; line-height: 1em; font-size: 2.5em; } header h1 { font-size: 0.75em; } nav { padding: 0 8px; } body { padding-top: 2.5em; } .standalone header { padding-top: 20px; } .standalone { margin-top: 20px; } body [onclick]:hover, body [onclick]:active, body [data-tray]:hover, body [data-tray]:active, label:hover, label:active, #addUnit li:hover { color: red; cursor: pointer; } section { border: solid black 1px; margin: 2em 3em; padding: 0.25em 2em; position: relative; } .close { font-family: Mono, monospace; line-height: 1em; position: absolute; font-size: 2.5em; width: 1em; height: 1em; top: 0; left: 0; } .close:after { content: "✕"; } section > .name { line-height: 1em; font-family: Digital, Sans, sans-serif; font-size: 1.5em; white-space: nowrap; } section > .aside { display: block; font-size: 0.75em; padding-top: 0.5em; font-family: Sans, sans-serif; } .weapons > li:before { content: attr(data-remaining) " " attr(data-name); display: block; width: 100%; text-align: center; font-size: 0.9em; font-family: Mono, monospace; } .weapons > li[data-count="1"]:before { content: attr(data-name); } section > .type { font-family: Mono, monospace; font-variant: small-caps; } .stats { font-variant: small-caps; } .stats > li { display: inline-block; padding: 0 0.25em; font-family: Mono, monospace; } .stats > li:before { font-size: 0.75em; font-family: Sans, sans-serif; } .stats > .attack:before { content: "Atk "; } .stats > .defense:before { content: "Def "; } .stats > .range:before { content: "Rng "; } .stats > .aside { display: block; font-variant: normal; text-transform: none; font-size: 0.75em; font-family: Sans, sans-serif; } .weapons { display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-direction: row; -webkit-flex-direction: row; justify-content: space-around; -webkit-justify-content: space-around; align-items: flex-end; -webkit-align-items: flex-end; align-content: center; -webkit-align-content: center; } .weapons > li { display: inline-block; margin: 1em 0.75em; margin-bottom: 0em; flex-grow: 1; -webkit-box-flex: 1; -webkit-flex-grow: 1; } .ticks { display: inline-block; font-size: 2em; font-family: Mono, monospace; line-height: 0.75em; } [data-remaining="0"] .ticks { color: red; } .treads { margin: 0.5em auto; padding: 0 1em; padding-right: 1.5em; list-style-type: none; display: inline-block; } [data-remaining="0"]:before { text-decoration: line-through; color: red; } .treads:before { content: attr(data-remaining) " Tread Units"; font-family: Mono, monospace; display: block; margin-top: 0.7em; text-align: center; margin-right: -1.25em; } .treads.propulsion:before { content: attr(data-remaining) " Prop. Units"; } .treads > li { text-align: right; display: block; line-height: 0.75em; } .treads > li:after { margin-right: -1em; font-size: 0.5em; width: 1em; display: inline-block; font-family: Mono, monospace; vertical-align: 0.125em; } .ticks > span { display: inline-block; padding: 0 0.111em; height: 0.75em; overflow: hidden; cursor: pointer; } .treads > li:first-child:before { content: "Move starts at"; font-family: Sans, sans-serif; font-size: 0.75em; display: inline-block; font-variant: small-caps; vertical-align: 0.25em; margin-right: -0.125em; } .treads.propulsion > li:first-child:before { content: "Must move"; } .treads > li:first-child:after { font-size: 1em; } .treads > li:first-child:nth-last-child(n+1) { counter-reset: i 1; } .treads > li:first-child:nth-last-child(n+2) { counter-reset: i 2; } .treads > li:first-child:nth-last-child(n+3) { counter-reset: i 3; } .treads > li:first-child:nth-last-child(n+4) { counter-reset: i 4; } .treads > li:first-child:nth-last-child(n+5) { counter-reset: i 5; } .treads > li:first-child:nth-last-child(n+6) { counter-reset: i 6; } .treads > li:after { content: counter(i); counter-increment: i -1; } #unit-template { display: none; } .tray { position: fixed; border: solid black 1px; border-top-width: 0; z-index: 1; transition: transform 0.3s; -webkit-transition: -webkit-transform 0.3s; background-color: rgba(255, 255, 255, 0.9412); overflow: auto; max-height: 80%; -webkit-overflow-scrolling: touch; } .tray.visible { transform: translate(0, 0) !important; -webkit-transform: translate(0, 0) !important; transition: transform 0.3s; -webkit-transition: -webkit-transform 0.3s; } #addUnit { transform: translateX(-100%); -webkit-transform: translateX(-100%); font-size: 2em; display: block; } #addUnit > li { display: block; padding: 0.25em; text-align: left; font-family: Digital, Sans, sans-serif; white-space: nowrap; cursor: pointer; } #legal { font-size: 0.8em; left: 40%; right: 0%; transform: translateX(100%); -webkit-transform: translateX(100%); text-align: center; padding-top: 1em; } #legal p { padding: 1em; text-align: justify; text-align-last: center; -moz-text-align-last: center; -webkit-text-align-last: center; } .stats { margin-top: -0.3333em; } .colophon { font-size: 1.5em; font-family: Digital, Sans, sans-serif; margin-top: 0.25em; } #brain { right: 0em; transform: translateX(100%); -webkit-transform: translateX(100%); padding: 0.5em; text-align: left; overflow: hidden; } #report { font-family: Mono, monospace; white-space: pre; } #howto { left: 25%; right: 25%; max-height: 50%; overflow-y: auto; transform: translateY(-100%); -webkit-transform: translateY(-100%); padding: 0.5em; text-align: left; overflow-y: auto; } @media (max-width: 1023px) { html { font-size: 16px; } } @media (max-width: 768px) { html { font-size: 13px; } } @media (max-width: 640px) { section { margin: 1em; padding: 0.333em; } .weapons > li:before { content: attr(data-name); } .weapons > li { margin: 0.5em 0.5em; margin-bottom: 0; } .stats > .attack:before { content: ""; } .stats > .defense { padding: 0 0.5em; } .stats > .defense:before { content: "D"; font-family: Mono, monospace; font-size: 1em; } .weapons .ticks { margin-top: -0.125em; } .stats > .range:before { content: "/"; font-family: Mono, monospace; font-size: 1em; } .stats > .aside { display: none; } .stats > li { padding: 0; } .treads { margin: 0 1.5em; min-width: 12em; } .treads:before { margin-bottom: -0.75em; } .treads > li:first-child:before { content: "M"; font-family: Mono, monospace; font-size: 1em; vertical-align: 0.125em; } } @media (max-width: 480px) { html { font-size: 11px; } section > .type, section > .aside { display: none; } }