/* Forgefront's pages. Loaded only on those pages, after site.css, so the rest of the site
   pays nothing for it.

   Forgefront is its own game with its own header, links and mark. What it shares with the
   rest of the domain is the paper it is drawn on: fat ink outlines, hard offset shadows,
   nothing blurred. The game itself is not on these pages at all - it has /forgefront/play/
   to itself, filling the window. */

/* The chase along the foot of the page is Infinite Ascent's joke. It does not belong under
   another game. */
body[data-page^="forgefront"] .chase{display:none}

/* ---------------------------------------------------------------- header */
/* The mark is the game's own: an emerald on the dark of its map. */
.ff-mark{width:34px; height:34px; flex:none; display:grid; place-items:center;
         background:#0d1117; border:2.5px solid var(--ink); border-radius:9px;
         box-shadow:var(--shadow-sm); transition:transform .15s ease}
.ff-mark::before{content:""; width:12px; height:12px; transform:rotate(45deg);
                 background:#3ddc97}
.ff-brand:hover .ff-mark{transform:rotate(-8deg) scale(1.08)}
.ff-brand b{color:#14805a; font-weight:700}

/* The one link across to the other game. Dashed and set apart, so it reads as a way out
   of this game and not as one more page of it. */
.top nav a.ff-other{display:inline-flex; align-items:center; gap:7px; margin-left:10px;
                    color:var(--ink-2); border:2px dashed var(--ink-3)}
.top nav a.ff-other:hover{border-style:solid; border-color:var(--ink); color:var(--ink)}
.ff-other img{width:18px; height:18px; border-radius:5px; display:block}

.ff-hint{font-family:var(--hand); font-weight:600; font-size:15px; color:var(--ink-2);
         margin:12px 0 0}

/* ---------------------------------------------------------------- pictures */
.ff-shot{max-width:min(var(--max), 100% - 32px); margin:26px auto 30px}
.ff-shot img{display:block; width:100%; height:auto; border:4px solid var(--ink);
             border-radius:16px; box-shadow:7px 7px 0 var(--ink); background:#0b0d11}
.ff-shot figcaption{font-size:14.5px; color:var(--ink-2); margin:14px 4px 0; text-align:center}

/* ---------------------------------------------------------------- copy */
.ff-res{list-style:none; padding:0; margin:20px 0 14px; display:grid; gap:12px}
.ff-res li{position:relative; padding-left:34px; color:var(--ink-2)}
.ff-res b{color:var(--ink)}
/* the game's own marker for each resource: a diamond, in its colour */
.ff-res li::before{content:""; position:absolute; left:6px; top:.42em; width:13px; height:13px;
                   transform:rotate(45deg); border:2.5px solid var(--ink);
                   box-shadow:2px 2px 0 var(--ink); background:var(--c)}
.ff-res .iron{--c:#cfd6e0}
.ff-res .gold{--c:#ffcc4d}
.ff-res .emerald{--c:#3ddc97}

.ff-clock{list-style:none; padding:0; margin:20px 0; display:grid; gap:10px}
.ff-clock li{display:flex; gap:14px; align-items:baseline; background:var(--card);
             border:3px solid var(--ink); border-radius:13px; padding:11px 16px;
             box-shadow:var(--shadow-sm); color:var(--ink-2)}
.ff-clock b{font-family:var(--hand); font-size:19px; color:var(--ink); min-width:3.2em}

/* A cell of several keys should not wrap one key onto its own line. */
body[data-page^="forgefront"] tbody th{white-space:nowrap}