@font-face { font-family: 'Fistalle'; src: url('assets/fonts/Fistalle.ttf') format('truetype'); font-weight: 400; font-style: normal; /* paint the title immediately in a fallback, then swap to Fistalle when it loads — no invisible-text (FOIT) delay while the font downloads */ font-display: swap; } @font-face { font-family: 'IoskeleyMono'; src: url('assets/fonts/IoskeleyMono-Light.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } html { overflow-x: hidden; -webkit-text-size-adjust: 100%; /* THE master scale. Everything sized in rem/em is a multiple of this, so the whole page (title, buttons, columns, margins, calendar, text) scales as ONE unit and all proportions are kept. Caps at 1rem so wide screens look exactly as before, then shrinks with the viewport ALL THE WAY DOWN — NO floor — so every element keeps scaling uniformly as you narrow; the page only changes character at the mobile breakpoint. Knob: 1.1vw sets how fast it scales; 16px is the full-size ceiling. */ font-size: min(1.1vw, 16px); /* ── Max content width — the fix for "it stops scaling and just stretches" ── The master scale above CAPS at 16px, which it reaches at a viewport of 16 / 0.011 ≈ 1454px. Past that, every rem is frozen but the containers are still width:100%, so the page stops SCALING and starts STRETCHING: the columns get wider and the ENTER/SAVE row (pinned to the right gutter) walks off toward the screen edge while the type stays put. Capping the content at 90rem stops that — the layout freezes at the exact size it had when scaling ended, and the extra width becomes margin instead. Why 90rem specifically: below the cap, root = 1.1vw, so 90rem = 90 × 0.011 × W ≈ 0.99 × W — i.e. it's effectively full-bleed and NOTHING about narrow/medium screens changes. At the cap it works out to ~1440px, and there it stays. Widen this to let the page run wider on big monitors. */ --page-max: 90rem; /* Distance from a SCREEN edge to the capped content box's edge — i.e. the margin the cap creates. 0 while the page is full-bleed, growing once --page-max bites. Anything that needs to break OUT of the content box and touch the screen (the beveled rules) offsets by this. Deliberately free of percentages, so it means the same thing wherever it's used: a % here would resolve against whichever element it landed in (the title box, say) instead of the page. */ --page-gutter: max(0px, calc((100vw - var(--page-max)) / 2)); /* shared side indent for the title, its buttons AND the body columns, in rem so it scales with the master font-size; steps down on mobile below. */ --title-indent: 4rem; /* settings panel scale — steps down at the same breakpoints as the title/buttons (the panel transform: scale()s by this). 1 = full size on desktop. */ --ui-scale: 1; /* Root background-color is propagated by iOS into the safe-area strips (notch / status bar / overscroll). iOS won't tile the granite IMAGE into that strip, only this flat color — so set it to the granite texture's own average tone (#f5eef1, the measured mean of granite.jpg) so the strip reads as the same pale stone as the page instead of the old flat yellow. Also the first-paint color before the texture loads. */ background-color: #f5eef1; background-image: url("assets/webpages/granite.jpg"); /* Tile size in rem so the granite scales on the SAME root unit as every element — as the page resizes the texture grows/shrinks WITH the title etc. instead of them gliding across a fixed-size texture. 16rem = the old 16rem at root 16. */ background-size: 16rem; /* anchor the repeating texture from the top-left with the per-load random pixel offset (set on by the inline script) so it stays put when the viewport width changes — `center` re-phased the tiling on every resize */ background-position: var(--bg-offset-x, 0rem) var(--bg-offset-y, 0rem); background-attachment: local; } body { background: transparent; font-family: 'Fistalle', sans-serif; /* reset the default UA body margin: the full-width title mark is clipped to the body box (overflow-x:hidden), so an 0.5rem margin would stop the mark short of the screen's left edge (this was why CAMP looked different) */ margin: 0; overflow-x: hidden; } /* iOS safe area (notch / status bar): the content pages set viewport-fit=cover so the granite background extends edge-to-edge UNDER the notch (matching the game) — otherwise iOS fills that strip with the page's flat background-color (the yellow --page-color). With the page now under the notch, push the topmost content (the title bar, the highest element on every page) down by the safe-area inset so it isn't hidden behind the notch/status bar. env() resolves to 0 on desktop and non-cover browsers, so this is a no-op everywhere except cover-mode iOS. */ .title-outer { padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } .title-outer { /* Title font-size == mark height. Shared on this common ancestor of the

and .title-actions so the buttons size + position off the mark and track it at every breakpoint. Overridden in the same @media blocks the title uses. */ /* Pure rem now, so the title scales with the master root font-size in lockstep with everything else (no separate vw rate). At full root it's 3rem = 3rem; it shrinks as the root shrinks. The mobile block below still overrides it for phones. */ --title-fs: 3rem; /* ── Shared look for ALL FOUR beveled rules under the title (the two full-width ::before/::after and the two title-box lines). Each rule sets only its own WIDTH (left/right) and VERTICAL offset; the bevel itself is defined ONCE here so all four stay in sync — change a colour or thickness here and every rule, on every page, updates. */ --rule-thickness: 0.1rem; /* border width = bevel depth */ --rule-height: calc(var(--title-fs) * 0.08); /* bar height */ --rule-fill: rgba(0, 0, 0, 0.1); /* faint dark fill (page shows through) */ --rule-shadow: rgba(0, 0, 0, 0.3); /* recessed edge → top + left */ --rule-highlight: rgb(255, 255, 255, 0.6); /* lit edge → bottom + right */ /* How far the THREE FULL-WIDTH rules (::before at 0.8, .title-rule-mid at 0.9, ::after at 1.0 × --title-fs) drop below their authored offsets — the ones that run under the desk sub-title. One knob so all three move as a set and keep their spacing; raise it to push them further down the page, set it to 0 to put them back where they were. Does NOT touch the four short rules inside the title box (those sit at --title-rule-top and stay pinned to the title). The rules stay put; it's the SUB-TITLE that's positioned to meet them — its bottom border sits on this top rule's top border (see the derivation on .title-sub's transform). So this number sets where the line group lives, and the sub follows it: move it and redo that transform. */ --rule-drop: calc(var(--title-fs) * 0.28); /* ── Full-bleed escape hatch for the three horizontal rules ── .title-outer is now capped at --page-max and centred, so its absolutely-positioned rules would stop at the CONTENT edge on a wide monitor. This reaches them back out to the viewport: a NEGATIVE offset of exactly the margin the cap created. It's 0 while the page is full-bleed, so narrow screens are unaffected. Used as `left: calc(var(--rule-bleed) + )`, same for right. */ --rule-bleed: calc(-1 * var(--page-gutter)); min-height: auto; height: auto; display: flex; align-items: flex-start; justify-content: flex-start; /* guaranteed minimum gap between the title and the action buttons: the buttons' margin-left:auto eats free space on wide screens, but this column-gap is reserved first, so when the title grows / the page narrows the buttons can't close right up against it. Scales with the title. */ column-gap: calc(var(--title-fs) * 0.6); width: 100%; /* Stop stretching once the master scale caps out (see --page-max on html): past ~1454px the page would otherwise keep widening with the type frozen, walking the ENTER/SAVE row off to the screen edge. Capped + centred, so the buttons stay on the same right margin as the body columns below, and the extra screen width becomes side margin. The full-width rules (::before/::after and .title-rule-mid) are positioned inside this box, so they end at the content edge too. */ max-width: var(--page-max); margin-inline: auto; position: relative; z-index: auto; padding: 2em 0 0 var(--title-indent); /* keep the 4em padding inside the 100% width so the title-outer never grows wider than its container — otherwise pages without a global border-box reset (CAMP, PumpRoom) overflow page-center and get re-centered, shifting the title left of where the bordered-box pages render it */ box-sizing: border-box; } /* ── Page body: THE content box. Every page wraps everything below the title bar (.title-outer) in a single
— the location buttons + scoreboard on index, the log + calendars on DraftingRoom, the image grids on Catalyst / AnnexBloom, the scan row on CAMP, the editor on PumpRoom. This one rule is the only place the page's side margins are set, so changing it here moves the content edge on EVERY page at once, index included. The box matches the title bar exactly: same --title-indent side padding, same --page-max cap, same centring — so the body's left edge lines up under the title and its right edge under the title-action buttons, with equal margins at any width. Content inside must NOT re-add a side indent of its own; it just fills this box. The top margin clears the title bar's bottom ridge line. */ .page-body { width: 100%; max-width: var(--page-max); margin: 8rem auto 0; padding: 0 var(--title-indent); box-sizing: border-box; } /* ── Two-column body (log column + calendar/notes column) — the standard location-page layout. Just the row: its side margins come from .page-body above, like every other page's content. Everything here is in rem, so the column gaps, the calendar width and (via inherited em text) all the log + calendar text scale with the master root font-size — one proportion. The calendar caps at 44rem then shrinks. */ .log-calendar-row { display: flex; align-items: flex-start; gap: 1.5rem; width: 100%; } .log-calendar-row > .log-section { flex: 1; min-width: 0; } .log-calendar-row > #right-column { /* rem cap + floor scale with the master font-size; the 48vw middle lets it keep shrinking on narrow screens so the log never gets squeezed to nothing. */ width: clamp(17.5rem, 48vw, 44rem); flex-shrink: 0; display: flex; flex-direction: column; gap: 1.25rem; } /* (No per-column font-size overrides: the log + calendar text is em-based and inherits the master root font-size, so it scales in proportion with everything else automatically.) */ /* "MENU" back-to-index button — same beveled, page-colored look as the in-page arrow buttons (e.g. CAMP's #camp-pdf-nav button). Lives inside .title-outer as a flex item: margin-left:auto pushes it to the right end of the title's row and align-self:center lines it up vertically with the title. */ .menu-btn { align-self: center; margin-left: auto; margin-right: 1.5em; cursor: pointer; font-family: 'Fistalle', sans-serif; font-size: 1rem; letter-spacing: 0.125rem; line-height: 1; padding: 0.375rem 1rem; color: #fff; text-decoration: none; background: var(--page-color, #05489b); border-top: 0.25rem outset rgba(255, 255, 255, 0.55); border-left: 0.25rem outset rgba(255, 255, 255, 0.3); border-bottom: 0.25rem outset rgba(0, 0, 0, 0.65); border-right: 0.25rem outset rgba(0, 0, 0, 0.35); } .menu-btn:active { border-style: inset; } h1 { color: rgb(255, 255, 255); margin: 0; font-family: Fistalle, sans-serif; font-weight: bold; --title-ls: .45em; font-size: var(--title-fs); letter-spacing: var(--title-ls); display: inline-block; width: auto; line-height: 1.2; white-space: nowrap; /* never let the title stack onto a second line — it shrinks instead */ } /* Granite for the iOS notch / status-bar strip ONLY. The ROOT (html) background-image is NOT re-tiled by iOS into the safe-area strip — it only fills that strip with the root background-COLOR — so the texture never reached it (the flat color showed: first yellow, now black). We CAN'T just paint a full-viewport granite layer: the title's letters are filled with the SAME granite at the SAME fixed anchor (background-clip:text + attachment:fixed), so a full fixed-granite background matches the letters exactly and the title vanishes. Instead paint granite ONLY in the top safe-area strip, which sits ABOVE the title (the title bar is padded down by the same inset), so it never touches the text. height:0 on desktop / non-notch browsers → invisible no-op. Same size + per-load offset as the page granite so it lines up seamlessly with the scrolling background at the top. */ body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); z-index: 0; pointer-events: none; background-color: #f5eef1; /* granite's average tone — fallback / shows if the inset is 0 */ background-image: url("assets/webpages/granite.jpg"); background-size: 16rem; background-position: var(--bg-offset-x, 0rem) var(--bg-offset-y, 0rem); background-repeat: repeat; } body > * { position: relative; z-index: 1; } /* Remove stacking context so mix-blend-mode can reach the page background */ .page-center { z-index: auto; } mark { background: var(--page-color); color: #ffffff; display: inline-block; padding: 0rem 0 0 4rem; } /* Center wrapper for scoreboard and content (shared) */ .page-center { width: 100%; max-width: 100vw; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .scoreboard-section { width: 26.875rem; height: 31.3125rem; margin: 2.5rem auto 0 auto; padding: 1.25rem; background: linear-gradient(rgba(255, 255, 255, 0.267), rgba(255, 255, 255, 0.253)), url('assets/webpages/greenGranite.jpg') center / cover no-repeat; position: relative; border-top: 0.125rem solid #dfdfdf; border-left: 0.125rem solid #dfdfdf; border-bottom: 0.125rem solid #404040; border-right: 0.125rem solid #404040; flex-shrink: 0; overflow: hidden; align-self: center; box-sizing: border-box; } /* Top border — mitered corners */ .scoreboard-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.25rem; background: url('assets/webpages/celticBack.jpg') repeat-x; background-size: auto 2.5rem; clip-path: polygon(1.25rem 0, calc(100% - 1.25rem) 0, 100% 100%, 0 100%); z-index: 3; pointer-events: none; opacity: 1; mix-blend-mode: overlay; transform: scaleY(-1); } /* Bottom border — mitered corners */ .scoreboard-section::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1.25rem; background: url('assets/webpages/celticBack.jpg') repeat-x; background-size: auto 2.5rem; clip-path: polygon(1.25rem 0, calc(100% - 1.25rem) 0, 100% 100%, 0 100%); z-index: 3; pointer-events: none; opacity: 1; mix-blend-mode: overlay; } .scoreboard-inner { width: 100%; height: 100%; padding: 0; position: relative; box-sizing: border-box; } .scoreboard-bevel { padding: 1.5rem 2rem 2rem 2rem; box-sizing: border-box; width: 100%; height: 100%; border-top: 0.125rem solid #404040; border-left: 0.125rem solid #404040; border-bottom: 0.125rem solid #dfdfdf; border-right: 0.125rem solid #dfdfdf; } /* Right border */ .scoreboard-inner::before { content: ''; position: absolute; top: -1.25rem; right: 0; width: 31.0625rem; height: 1.25rem; background: url('assets/webpages/celticBack.jpg') repeat-x; background-size: auto 2.5rem; clip-path: polygon(1.25rem 0, calc(100% - 1.25rem) 0, 100% 100%, 0 100%); transform-origin: top right; transform: rotate(-90deg); z-index: 2; pointer-events: none; opacity: 1; mix-blend-mode: overlay; } /* Left border */ .scoreboard-inner::after { content: ''; position: absolute; top: -1.25rem; left: 0; width: 31.0625rem; height: 1.25rem; background: url('assets/webpages/celticBack.jpg') repeat-x; background-size: auto 2.5rem; clip-path: polygon(1.25rem 0, calc(100% - 1.25rem) 0, 100% 100%, 0 100%); transform-origin: top left; transform: rotate(90deg); z-index: 2; pointer-events: none; opacity: 1; mix-blend-mode: overlay; } .scoreboard-section h2 { font-size: 1.5em; margin-bottom: 0.125rem; color: #ff0000; font-family: 'Fistalle', sans-serif; letter-spacing: 0.25rem; mix-blend-mode:soft-light; border-top: 0.125rem solid #dfdfdf; border-left: 0.125rem solid #dfdfdf; border-bottom: 0.125rem solid #404040; border-right: 0.125rem solid #404040; text-shadow: 0.05rem 0.03125rem 0rem #ffffff, -0.05rem 0 0rem #000000, 0.05rem 0 0rem #ffffff, 0.05rem -0.05625rem 0rem #000000; } /* ── Logging-only scoreboard (location pages) ─────────────────────────────── The leaderboard now lives on index.html. Location pages still load scoreboard.js so the in-game SAVE keeps logging kills, but the board itself is neutralized here — only the name prompt surfaces (for a brand-new player on save). These are scoped overrides; the full styling above is untouched and still used by the index. Add class "sb-logging-only" to #scoreboard-mount. */ .sb-logging-only .scoreboard-section, .sb-logging-only .scoreboard-inner, .sb-logging-only .scoreboard-bevel { display: block; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; border: none; background: none; box-shadow: none; overflow: visible; } .sb-logging-only .scoreboard-section::before, .sb-logging-only .scoreboard-section::after, .sb-logging-only .scoreboard-inner::before, .sb-logging-only .scoreboard-inner::after, .sb-logging-only .celtic-sides { display: none; content: none; } /* hide everything in the board except the on-demand name prompt */ .sb-logging-only .scoreboard-bevel > *:not(#namePrompt) { display: none; } .scoreboard-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; } .scoreboard-table th, .scoreboard-table td { padding: 0.375rem 0rem; text-align: left; color: #797700; border-bottom: 0.0625rem solid rgba(255,255,255,0.15); font-family: 'Fistalle', sans-serif; letter-spacing: 0.03125rem; mix-blend-mode:difference; text-shadow: 0.05rem 0.03125rem 0rem #ffffff, -0.05rem 0 0rem #000000, 0.05rem 0 0rem #000000, 0.05rem -0.05625rem 0rem #000000; } .scoreboard-table th { font-weight: 600; background: rgba(255, 255, 255, 0); letter-spacing: 0.03125rem; } .scoreboard-table td { color: #fffeb5; mix-blend-mode:hard-light; } #logKillsBtn { padding: 0.625rem 1.5rem; font-size: 0.9375rem; background: rgba(180, 40, 40, 0.85); color: #ffffff; border: 0.0625rem solid rgba(255,100,100,0.4); border-radius: 0.375rem; cursor: pointer; transition: background 0.2s, border-color 0.2s; margin-right: 0.5rem; } #logKillsBtn:hover { background: rgba(200, 60, 60, 0.95); border-color: rgba(255,150,150,0.6); } #logKillsBtn:disabled { opacity: 0.5; cursor: default; } .kill-info { display: inline-block; margin-left: 0.75rem; color: #ff4400; font-size: 0.875rem; } /* ═════════════════ MOBILE (phones), max-width 600px ═════════════════ Single shared mobile block. Placed after all the base rules it overrides so equal-specificity rules win on source order. Page-specific mobile tweaks (e.g. index.html's location tiles / quality picker) live in that page's own