/* The playtest site. Same rules as the game's key frames: navy outlines, the spring palette, the logbook's warm-white
   pages with navy type, lamp gold for the one thing to press. Screenshots stay pixel-sharp. */
@font-face{font-family:'Silkscreen';src:url(/fonts/silkscreen.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'VT323';src:url(/fonts/vt323.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{
  --ink:#0f1b2b;--sea:#1e3a4c;--sea2:#2f6f73;--foam:#6fb3a8;
  --paper:#e8e2cf;--paper-d:#d6ceb5;--paper-dd:#b8b2a0;--granite:#7d7a70;--granite-d:#4a4740;
  --red:#c23b3b;--red-d:#8a2b2b;--gold:#e0b04a;--gold-d:#a87a24;--beam:#f6e7a1;--grass:#5a7d3a;--wood:#6b4a2f;
  color-scheme:dark;
  --pixel:'Silkscreen',ui-monospace,Menlo,Consolas,monospace;--body:'VT323',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ink)}
body{margin:0;color:var(--paper);font:22px/1.25 var(--body);-webkit-font-smoothing:none;
  background-color:var(--ink);
  /* the sea from the key frames: short dashes on dark water */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='32' shape-rendering='crispEdges'%3E%3Crect x='6' y='6' width='6' height='2' fill='%231e3a4c'/%3E%3Crect x='30' y='14' width='8' height='2' fill='%231e3a4c'/%3E%3Crect x='14' y='24' width='5' height='2' fill='%231a3344'/%3E%3Crect x='40' y='28' width='4' height='2' fill='%231a3344'/%3E%3C/svg%3E")}
a{color:var(--beam)}a:hover{color:#fff}
img.px{image-rendering:pixelated;image-rendering:crisp-edges;display:block;width:100%;height:auto}
.wrap{max-width:1152px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* the logbook page: warm white, navy outline, a navy tab bar on top */
.log{position:relative;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:2px;
  box-shadow:0 0 0 2px var(--paper-dd),0 6px 0 2px rgba(0,0,0,.35)}
.log .tab{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;padding:6px 14px 5px;background:var(--ink);
  color:var(--paper-dd);font:400 15px/1.2 var(--pixel);letter-spacing:.06em}
.log .tab b{font-weight:400;background:var(--paper);color:var(--ink);padding:1px 8px;margin-left:-8px}
.log .in{padding:18px 22px 20px}
.log h2,.log h3{margin:0 0 12px;font:400 18px/1.25 var(--pixel);letter-spacing:.05em;color:var(--ink)}
.log p{margin:0 0 12px}
.log a{color:var(--red-d)}.log a:hover{color:var(--red)}
.log .dim{color:var(--granite-d)}
.log .rule{height:2px;background:var(--paper-dd);margin:14px 0}

/* buttons: lamp gold, navy outline, a hard shadow like the game's boxes */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:12px 26px;
  border:2px solid var(--ink);border-radius:2px;background:var(--gold);color:var(--ink);
  box-shadow:inset 0 -4px 0 var(--gold-d),0 0 0 2px var(--beam),0 4px 0 2px rgba(0,0,0,.4);
  font:400 20px/1 var(--pixel);letter-spacing:.02em;text-decoration:none;cursor:pointer}
.btn:hover,.btn:focus-visible{background:var(--beam);color:var(--ink);outline:none}
.btn:active{transform:translateY(2px)}
.btn.small{min-height:40px;padding:8px 16px;font-size:15px}
.log a.btn,.log a.btn:hover{color:var(--ink)}
.btn.quiet{background:var(--paper);box-shadow:inset 0 -3px 0 var(--paper-dd),0 0 0 2px var(--paper-dd)}
.btn.quiet:hover,.btn.quiet:focus-visible{background:#fff}
.btn:disabled{opacity:.5;cursor:default}
:focus-visible{outline:2px solid var(--beam);outline-offset:3px}
.log :focus-visible{outline-color:var(--red)}

/* forms on the logbook page */
label{display:block;font:400 14px/1.3 var(--pixel);letter-spacing:.05em;color:var(--granite-d);margin:0 0 6px}
input,select,textarea{width:100%;background:#f6f2e4;color:var(--ink);border:2px solid var(--granite);border-radius:2px;padding:9px 12px;font:22px/1.2 var(--body)}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:none;background:#fff}
.field{margin:0 0 18px}
.hp{position:absolute!important;left:-9999px!important}

/* a screenshot in its own frame */
.shot{margin:0;border:2px solid var(--ink);box-shadow:0 0 0 2px var(--paper-dd),0 6px 0 2px rgba(0,0,0,.35);background:var(--ink)}
.shot figcaption{padding:8px 12px 9px;background:var(--paper);color:var(--ink);font:400 13px/1.35 var(--pixel);letter-spacing:.04em;border-top:2px solid var(--ink)}
.shot figcaption span{color:var(--red-d)}

@media (max-width:640px){body{font-size:20px}.log .in{padding:16px 15px 18px}.btn{width:100%;font-size:17px;padding:12px 14px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}