:root{--tile-width:32px;--bump-amount:.25}@media only screen and (device-width<=600px){:root{--tile-width:16px;font-size:.75em}}*{box-sizing:border-box}html{background-color:#fcfbf3}html,body,#app{min-height:100%}body{color:#31373d;touch-action:pan-y;justify-content:center;align-items:center;width:100%;max-width:100%;height:100vh;margin:auto;font-family:Courier New,Courier,"Courier 10 Pitch",monospace;font-size:2em;font-weight:700}@media only screen and (device-width<=600px){div.row{transform:translateY(-3em)}}p{font-weight:700}h1,h2,h3{font-family:Almendra SC,serif}a{color:gray;font-size:.75em}button,.button{color:#555;background-color:#78b159;border:2px solid #4d9029;border-bottom-width:5px;border-radius:6px;padding:.25em .5em;font-family:Courier New,Courier,"Courier 10 Pitch",monospace;font-size:1em;font-weight:700}button:active,.button:active{border-bottom:2px solid #4d9029;margin-bottom:3px;transform:translateY(4px)}button.key{background-color:#d4e1ea;border:2px solid #aab8c2;border-bottom-width:5px}button.key:active{border-bottom:2px solid #aab8c2}button.key svg{width:1em;height:1em}button.key svg path{fill:#555}#app{flex-direction:column;justify-content:center;align-items:center;display:flex}#game{justify-content:center;display:flex}button#help{position:absolute;top:8px;left:8px}div.row{height:var(--tile-width)}span.grid{width:var(--tile-width);height:var(--tile-width);display:inline-block}span.grid>*{justify-content:center;align-items:center;display:flex;position:absolute}img.tile{width:var(--tile-width)}span.stat{color:#333;text-shadow:0 0 3px #fff;opacity:.5;font-size:.5em;position:absolute;top:-1em}span.xp{width:var(--tile-width);height:var(--tile-width);vertical-align:top;text-align:center;font-size:.75em;display:inline-block;position:relative;top:.15em}#health-bars{margin:auto;position:absolute;top:8px}#inventory ul{justify-content:center;width:100%;margin:0;padding:0;list-style-type:none;display:flex;position:absolute;bottom:8px;left:0}#inventory li{display:inline-block}#inventory li+li{margin-left:.25em}#arrow-buttons{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;bottom:1.5em;right:.5em}#arrow-buttons>div{justify-content:center;align-items:center;width:100%;display:flex}#arrow-buttons button span{vertical-align:sub}#arrow-buttons button svg{vertical-align:text-top}.modal{z-index:2;background-color:#fcfbf3;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:100%;padding:1em;display:flex;position:absolute;top:0;left:0;overflow-y:auto}.tombstone{text-align:center;background-color:#fff;border:1px solid #ccd6dd;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;width:95%;max-width:600px;margin:1em;padding:1em;font-size:.75em;display:flex}.tombstone #stats p{color:#6c7a88;margin:0}.tombstone hr{background-color:#ccd6dd;border:none;width:100%;height:1px}.tombstone .again{margin:0 .5em .5em}.tombstone .choice{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5em;margin:.5em 0;display:flex}.tombstone .choice button.secondary{background-color:#d4e1ea;border-color:#aab8c2}.tombstone .choice button.chosen{color:#fff;background-color:#4d9029}.tombstone .choice .pending{color:#6c7a88;flex-basis:100%;margin:.25em 0 0;font-size:.75em}.build{color:gray;font-size:.5em}#game.frozen{opacity:.3;pointer-events:none;-webkit-user-select:none;user-select:none}.timer{flex-direction:column;align-items:center;line-height:1.2;display:flex}.timer .timer-label{color:#6c7a88;font-size:.5em}.timer .timer-clock{font-variant-numeric:tabular-nums}.timer.break{font-size:.75em;position:absolute;top:8px;right:8px}.timer.break.warn .timer-clock{color:#c72}.timer.work{z-index:1;width:100%;font-size:1.5em;position:absolute;top:50%;left:0;transform:translateY(-50%)}.timer.work .timer-label{font-size:.4em}.timer.next,.timer.rest{font-size:1.25em}.timer.rest .timer-clock{color:#4d9029}.away{color:#6c7a88;margin:.5em 0 0;font-size:.5em}.pop{animation:.25s pop}@keyframes pop{0%{animation-timing-function:cubic-bezier(.59,2.5,.88,.32);transform:scale(0)}to{transform:scale(1)}}.grow-and-fade{animation:1s forwards grow-and-fade}@keyframes grow-and-fade{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(3)}}.bump-up{animation:.25s bump-up}@keyframes bump-up{0%{transform:translateY(calc(var(--tile-width) * var(--bump-amount) * -1))}to{transform:translateY(0)}}.bump-left{animation:.25s bump-left}@keyframes bump-left{0%{transform:translateX(calc(var(--tile-width) * var(--bump-amount) * -1))}to{transform:translate(0)}}.bump-down{animation:.25s bump-down}@keyframes bump-down{0%{transform:translateY(calc(var(--tile-width) * var(--bump-amount)))}to{transform:translateY(0)}}.bump-right{animation:.25s bump-right}@keyframes bump-right{0%{transform:translateX(calc(var(--tile-width) * var(--bump-amount)))}to{transform:translate(0)}}
