/* bryce.today — /game/ additions only. Loaded after /styles.css, which already provides the desk, the book, the parchment page, the ribbon tabs, buttons, fields, notes, the seal, the panel and every mobile-first layout rule. Nothing from there is repeated here; this file is only what the game pages need on top. Mobile-first like the shared sheet: no fixed widths, no hover-only affordances, 44px (2.75rem) minimum targets via --tap, and the one min-width query below only adds breathing room. */ /* ---- page frame ---------------------------------------------------------- */ /* Reserve the scrollbar's gutter even while nothing scrolls, so hopping between a short section (World) and a tall one (Account) never shifts the whole page sideways when the bar pops in. The reserved strip belongs to , which body's desk texture does not reach — so html wears the same woodgrain (both tile from the viewport origin, so the seam is invisible) and the desk runs edge to edge, scrollbar or not. */ html { scrollbar-gutter: stable; background-color: var(--desk-base); background-image: var(--desk); } /* The wash behind duty cards, the duty page and inventory rows. 0.45 is the shipped default (20 points more opaque than the original 0.25); the Settings slider overrides it through this custom property, and /game/prepaint.js restores the saved value before first paint. */ :root { --panel-alpha: 0.45; } /* The Energy resource's fixed amber — see .bar-energy below. */ :root { --energy: #cc8a1e; } /* Health's fixed oxblood — same rule as Energy: its own constant, never the accent, so no cover/page/accent choice can recolour the resource. The heart icon (icon-health.svg) carries the same value. */ :root { --health: #a33b2e; } /* The ink a warning speaks in. Light papers borrow the health red — the established "this hurt" colour — but that red sits at 2.4:1 against the dark papers, so there it lifts to a tint that clears 4.5:1. Its own token rather than --health itself, which is a bar fill and must not move. */ :root { --warn-ink: #a33b2e; } html.mode-dark { --warn-ink: #e8867a; } /* On game pages the AXIS washes follow the opacity slider too — the coloured Mastery cells, tinted duty cards and ledger entries. theme.css fixes these at 0.10 for the rest of the site; 0.25 × the 0.45 default lands on that same ~0.11, so the shipped look is unchanged, but the slider now moves these panels with everything else. Dark mode's brighter --axis-*-rgb values flow through automatically. The neutral wash (multi- stat cards) scales the same way. */ :root { --axis-force-wash: rgba(var(--axis-force-rgb), calc(var(--panel-alpha) * 0.25)); --axis-understanding-wash: rgba(var(--axis-understanding-rgb), calc(var(--panel-alpha) * 0.25)); --axis-endurance-wash: rgba(var(--axis-endurance-rgb), calc(var(--panel-alpha) * 0.25)); --axis-precision-wash: rgba(var(--axis-precision-rgb), calc(var(--panel-alpha) * 0.25)); --neutral-wash: rgba(0, 0, 0, calc(var(--panel-alpha) * 0.1)); } /* The book and the site chrome cap themselves at 62rem;
has to agree so the status line above the book lines up with its left edge. */ .shell { width: 100%; max-width: 62rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0; } /* The signed-in player's name under the mark, wearing the mark's own dress: same display face, same tracking, a size down, gold like ".today". Empty until the session is known. */ .mark-stack { display: flex; flex-direction: column; } .mark-player { font-family: var(--display); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-lit); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65); } /* The header's right side: the settings gear beside the logout button. The shared .site-head is space-between, so the pair has to travel as one flex item to stay together on the right. */ .head-actions { display: flex; align-items: center; gap: 0.15rem; } /* "Log out" broke over two lines on a narrow phone and made the header a row taller than it needed to be. That was cheap when the header scrolled away; it is not now that the shell holds it on screen for good, so the words stay on one line and the header keeps the height of a single row. */ .head-actions > * { white-space: nowrap; } /* On a phone the row is tight, and flex shrank the icon buttons to nothing — the gear and the bell were there, 19px wide, drawing nothing. The glyph buttons keep their size; the search field is what gives. */ .head-actions .ghost { flex: 0 0 auto; } .head-actions .head-search { flex: 1 1 9rem; min-width: 3rem; } /* The header player search: a slim field left of the gear, its results dropping as a parchment list anchored to the field. High z-index so the list clears the sticky bars strip (z 5). */ .head-search { position: relative; margin-right: 0.3rem; } #head-search-input { font: inherit; font-size: 0.8rem; color: var(--parchment); width: 100%; max-width: 9rem; padding: 0.25rem 0.5rem; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 2px; } #head-search-input::placeholder { color: rgba(255, 255, 255, 0.55); } #head-search-input:focus { outline: none; border-color: var(--gold); } /* The desk is dark in BOTH modes, but dark mode turns --parchment near-black — the same trap styles.css pins the ghost buttons out of. Pin the typed text to the lit-parchment constant likewise. */ html.mode-dark #head-search-input { color: #f2e8d2; } @media (max-width: 30rem) { #head-search-input { max-width: 6.5rem; } } .head-search-results { position: absolute; right: 0; top: calc(100% + 0.25rem); z-index: 30; list-style: none; margin: 0; padding: 0.2rem; min-width: 100%; background: var(--parchment); border: 1px solid var(--rule-strong); border-radius: 2px; box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.4); } .head-search-hit { font: inherit; font-size: 0.85rem; color: var(--ink); display: block; width: 100%; text-align: left; padding: 0.3rem 0.6rem; background: transparent; border: 0; cursor: pointer; white-space: nowrap; } .head-search-hit:hover, .head-search-hit:focus-visible { background: rgba(0, 0, 0, 0.07); } /* No-JS note and the app-level status line both sit on the desk rather than on parchment, so they take the desk's light-on-dark treatment. */ .desk-note { margin: 0; min-height: 0; /* shared .note reserves 1.5em; on the desk that would leave a permanent gap above the book */ color: var(--parchment); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .noscript-note { width: 100%; max-width: 62rem; margin: 0; padding: 0.75rem 1rem; border: 1px solid var(--gold); border-radius: 0.25rem; background: rgba(0, 0, 0, 0.3); color: var(--parchment); font-size: 0.95rem; } /* ---- reveal gate -------------------------------------------------------- */ /* app.html keeps its content out of sight until GET /me resolves, so a signed -out visitor never sees a flash of the shell before the redirect. game.js adds .ready on success AND on the retry path, so the retry panel is always reachable — the page must never end up blank. Only the app page is gated; index.html and 404.html paint immediately. */ body[data-page='app'] .shell { opacity: 0; transition: opacity 0.18s ease; } body[data-page='app'].ready .shell { opacity: 1; } /* ---- login mode ribbons ------------------------------------------------- */ /* The two login modes are plain buttons carrying aria-pressed, not ARIA tabs (no arrow-key tab semantics are implied). The shared sheet only paints the active state for aria-current / aria-selected, so the pressed state is mapped onto the same look here. */ .tab[aria-pressed='true'] { background: var(--parchment); color: var(--ink); box-shadow: 0 -2px 0 var(--gold) inset; font-weight: 600; } /* ---- title line --------------------------------------------------------- */ /* Heading on the left, wax seal on the right; wraps rather than shrinking. */ .title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.6rem; } .title-row h1 { margin: 0; } /* ---- identity block ----------------------------------------------------- */ /* Seal plus the "Signed in as" lines. Stacks on a narrow phone. */ .identity { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .identity > div { flex: 1 1 14rem; min-width: 0; } .identity p:last-child { margin-bottom: 0; } /* The seal carries the account's first initial; Cinzel has caps only. */ .identity .seal { text-transform: uppercase; } /* Names come from the API. Long ones break instead of pushing the page wide. */ .name { overflow-wrap: anywhere; } /* ---- Admin badge -------------------------------------------------------- */ .stamp { display: inline-block; padding: 0.15rem 0.55rem; border: 1px solid var(--gold); border-radius: 0.15rem; background: rgba(156, 124, 44, 0.14); color: var(--ink-soft); font-family: var(--display); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; vertical-align: 0.15em; } /* ---- account record ----------------------------------------------------- */ /* Label / value rows on ruled parchment. Two columns once there is room, one column on a phone so a long value never forces a sideways scroll. */ .record { margin: 0; } .record > div { display: grid; grid-template-columns: 1fr; gap: 0 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); } .record > div:last-child { border-bottom: 0; } .record dt { font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } .record dd { margin: 0; overflow-wrap: anywhere; } /* ---- inline command name ------------------------------------------------ */ .cmd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; padding: 0.1em 0.35em; border: 1px solid var(--rule-strong); border-radius: 0.15rem; background: rgba(255, 255, 255, 0.4); white-space: nowrap; } /* ---- form footers ------------------------------------------------------- */ /* Submit button beside its "Saved" confirmation; wraps on a narrow screen so the button keeps its full tap target. */ .form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } /* A hairline before a trailing action (the second Log out button). */ .rule-off { margin: 1.75rem 0 1.25rem; border: 0; border-top: 1px solid var(--rule); } .stack-gap { margin-top: 1.5rem; } /* ---- retry panel -------------------------------------------------------- */ /* Shown when /me fails for any reason other than a definite 401/403. */ .retry-actions { margin-top: 1.25rem; } @media (min-width: 34rem) { /* Enough width for the label column to sit beside its value. */ .record > div { grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; } } @media (min-width: 64rem) { /* Matches the shared sheet's wide-screen active ribbon, which keys on aria-current / aria-selected only. Same breakpoint, same values — moved with the sidebar from 48rem to 64rem so the pair stays in step. */ .tab[aria-pressed='true'] { box-shadow: 0.15rem 0.15rem 0.4rem rgba(0, 0, 0, 0.3), -3px 0 0 var(--gold) inset; transform: translateX(0.25rem); } } /* ---- settings: cover and desk pickers ------------------------------------ The chips (.option-row/.option), the swatch and every sw-* colour class moved to /styles.css: the homepage gear panel shows the same pickers now, so they are shared chrome. Only game-specific settings widgets (avatar seals, the sliders) keep rules in this file. */ /* ---- mastery ------------------------------------------------------------- Colour here is ALWAYS the axis (--axis-force etc from /theme.css), never the school, and it never travels without .cell-mark: under deuteranopia Force and Endurance are the same colour, so the glyph is what actually carries which axis a cell belongs to. Do not "simplify" the mark away. */ /* The bars ride above everything and stay put. A parchment plate rather than leather, so the fills keep the contrast they were picked for — woad on dark leather would go muddy. */ .mbars { position: sticky; top: 0.4rem; /* a sliver of desk stays visible above it when stuck */ z-index: 5; background: var(--parchment); border: 1px solid var(--rule-strong); border-radius: 2px; padding: 0.4rem 0.6rem; box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.4); } /* All three across at EVERY width, including the narrowest phone: stacked bars cost extra vertical space, and this thing is pinned to the top of the screen on every page — height is the whole budget. minmax(0, 1fr) matters: a bare 1fr bottoms out at min-content, and the nowrap name + number would prop a column open and shove Health past the plate's edge. */ .bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .bar { min-width: 0; } /* Sized to be read at a glance, not squinted at: these two numbers are the game's whole dashboard, and the strip is on screen on every page. */ .bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.35rem; } /* In a pinch the NAME gives way (ellipsis), never the number — the count is the reading, the label is decor once the icon and colour carry identity. */ .bar-name { display: inline-flex; align-items: center; gap: 0.3em; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; color: var(--ink); white-space: nowrap; min-width: 0; } .bar-name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .bar-num { font-size: 0.95rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; } .bar-track { position: relative; /* the countdown overlays the fill */ height: 1.5rem; margin-top: 0.25rem; border-radius: 2px; background: var(--parchment-shade); border: 1px solid var(--rule); overflow: hidden; } /* The time-to-full, printed inside the track: white with a black outline (four offset shadows + a soft halo), so it reads over the gold fill, the woad fill, and the bare shade alike — no per-bar text colour to fall out of step with the fills. */ .bar-time { position: absolute; inset: 0; padding-left: 0.45rem; display: flex; align-items: center; justify-content: flex-start; font-size: 1rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.85), 1px -1px 0 rgba(0, 0, 0, 0.85), -1px 1px 0 rgba(0, 0, 0, 0.85), 1px 1px 0 rgba(0, 0, 0, 0.85), 0 0 3px rgba(0, 0, 0, 0.55); pointer-events: none; } .bar-fill { display: block; height: 100%; width: 0; transition: width 0.4s linear; } /* Energy is The World's bar, so it takes The World's own axis-free identity: gold, the material accent. Study is the scholarly one — woad. */ /* Energy is HARD amber — its own constant, deliberately not the accent, so no cover/page/accent choice can ever recolour the resource. The bolt icon (icon-energy.svg) carries the same value. */ .bar-energy .bar-fill { background: var(--energy); } .bar-study .bar-fill { background: var(--axis-understanding); } .bar-health .bar-fill { background: var(--health); } /* Phones: the count moves INTO the track, printed where the countdown was, and the countdown goes — two numbers can't share a phone-width column, and how-much beats how-long at a glance. Same white-with-outline treatment as .bar-time so it reads over any fill. Scoped to .bars: the fight plates reuse .bar-num/.bar-track and keep their own layout. */ @media (max-width: 480px) { .bars .bar { position: relative; } .bars .bar-time { display: none; } .bars .bar-num { position: absolute; left: 0.45rem; bottom: 0; z-index: 1; height: 1.5rem; display: flex; align-items: center; pointer-events: none; color: #fff; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.85), 1px -1px 0 rgba(0, 0, 0, 0.85), -1px 1px 0 rgba(0, 0, 0, 0.85), 1px 1px 0 rgba(0, 0, 0, 0.85), 0 0 3px rgba(0, 0, 0, 0.55); } /* A tap flips one bar to its countdown (game.js toggles .show-time); the whole bar is the target, comfortably past 44px wide. */ .bars .bar { -webkit-tap-highlight-color: transparent; } .bars .bar.show-time .bar-time { display: flex; } .bars .bar.show-time .bar-num { display: none; } } /* Very narrow phones: three tracks now share the strip, so the labels and numbers tighten rather than wrap and double the strip's height. */ @media (max-width: 22rem) { .bars { gap: 0.4rem; } .bar-name { font-size: 0.68rem; letter-spacing: 0.03em; } .bar-num { font-size: 0.8rem; } .bar-time { font-size: 0.85rem; padding-left: 0.3rem; } } .grid-head { margin-top: 1.4rem; } /* A head with a figure at its far end — "Moves 3 / 4 equipped". */ .grid-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .grid-head-sub { font-size: 0.78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .grid-head h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.82rem; color: var(--ink-soft); margin: 0 0 0.2rem; } /* Mastery: only the trainable attributes, grouped by which bar pays. */ .trainable { margin-top: 0.7rem; } .train-group + .train-group { margin-top: 1.1rem; } .train-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.35rem; margin-bottom: 0.55rem; } .train-group-name { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.82rem; } .train-group-bar { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.75rem; color: var(--ink-faint); font-style: italic; } /* Now that the nav is inline until 64rem, a phone has the whole width — so the four attributes go 2x2 rather than a single tall stack, and all four sit on one row as soon as there is room. */ .train-row { display: grid; gap: 0.5rem; grid-template-columns: 1fr 1fr; } @media (max-width: 22rem) { .train-row { grid-template-columns: 1fr; } } @media (min-width: 44rem) { .train-row { grid-template-columns: repeat(4, 1fr); } } .train-row .cell { margin-bottom: 0; } /* Account: the record is the octagon (styled with the rest of the figure, further down); this is the one line that outlives it — all sixteen, added up, under the two halves the figure shows. */ .grand-total { margin: 1rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--rule); font-family: var(--display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--ink-soft); display: flex; justify-content: space-between; } .grand-total span { font-family: var(--body); font-size: 1.1rem; color: var(--ink); letter-spacing: 0; } .cell { border: 1px solid var(--rule); border-left: 3px solid currentColor; border-radius: 2px; padding: 0.45rem 0.55rem; margin-bottom: 0.5rem; } .cell.axis-force { color: var(--axis-force); background: var(--axis-force-wash); } .cell.axis-understanding { color: var(--axis-understanding); background: var(--axis-understanding-wash); } .cell.axis-endurance { color: var(--axis-endurance); background: var(--axis-endurance-wash); } .cell.axis-precision { color: var(--axis-precision); background: var(--axis-precision-wash); } .cell-top { display: flex; align-items: baseline; gap: 0.4rem; } .cell-mark { font-size: 0.8rem; line-height: 1; } .cell-name { font-weight: 600; font-size: 1rem; } .cell-pts { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; font-size: 0.9rem; } /* Experience toward the next level: a thin track under the job line, the fill in the axis colour, the numbers printed on it. At the top it fills and says so. */ .cell-xp { position: relative; height: 1rem; margin: 0.3rem 0 0.1rem; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, calc(var(--panel-alpha) * var(--panel-dim, 1))); } .cell-xp-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink-faint); opacity: 0.45; } .axis-force .cell-xp-fill { background: var(--axis-force); } .axis-understanding .cell-xp-fill { background: var(--axis-understanding); } .axis-endurance .cell-xp-fill { background: var(--axis-endurance); } .axis-precision .cell-xp-fill { background: var(--axis-precision); } .cell-xp.is-max .cell-xp-fill { opacity: 0.7; } .cell-xp-text { position: relative; display: block; text-align: center; font-size: 0.66rem; line-height: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); } .cell-axis { margin: 0.1rem 0 0.4rem; font-size: 0.72rem; font-style: italic; color: var(--ink-faint); text-transform: lowercase; } .cell-train { font-family: var(--body); font-size: 0.82rem; cursor: pointer; background: transparent; color: currentColor; border: 1px solid currentColor; border-radius: 2px; padding: 0.25rem 0.55rem; width: 100%; } .cell-train:hover:not(:disabled) { background: var(--parchment); } .cell-train:disabled { cursor: default; opacity: 0.45; } .cell-train .bicon { margin-left: 0.3em; } /* ---- resource icons ------------------------------------------------------- Bolt = Energy, flame = Resolve, printed beside every bar name and every cost so which resource pays is visible without reading. The SVGs live in /game/ (img-src 'self'); their colours are baked in to match the bar fills — gold and woad. */ .bicon { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.15em; flex: none; background-position: center; background-repeat: no-repeat; background-size: contain; } .bicon-energy { background-image: url('/game/icon-energy.svg'); } .bicon-study { background-image: url('/game/icon-resolve.svg'); } .bicon-health { background-image: url('/game/icon-health.svg'); } .cell.is-locked { color: var(--ink-faint); background: transparent; } /* ---- phone: one row that scrolls, along the bottom edge ------------------ */ /* Eight ribbons and then ≡, all the same width, on a strip you swipe. This was five equal columns for a long time, and the fifth slot was the whole problem: everything past it went behind More and was invisible until you went looking. A strip is not rationed by width, so the bar can hold what it ought to hold and stay one row tall. The strip used to stick to the TOP, half a finger under the mastery bars, and the two of them fought: both pinned at the top of the viewport, the ribbons winning on z-index and painting straight over the bar names. Two hundred pixels of chrome claimed for one hundred pixels of screen, and the dashboard lost. So the ribbons went to the bottom, where the thumb already is — the bars keep the top to themselves, and the nav is nearer the hand than it ever was up there. Source order is the bar order. Unlike the top strip it can no longer sit bare on the desk: the page scrolls UNDER it now, so it needs a floor. Leather, the same frame the book wears, so the bar reads as the desk's near edge rather than a slab dropped on top. Scoped to #menu, NOT .spread .tabs: the login page also has .tabs inside a .spread — its two-button Log in / Create account switch — and it must not become a scrolling strip. */ @media (max-width: 63.999rem) { /* The bar's own height, published to the page so that everything else pinned to the bottom edge — the chat dock, the impersonation banner, the task toast — stands ON the bar instead of underneath it. Derived, not measured: a ribbon at the tap target, the plate's padding above and below it, and the hairline. Hand-typing "3.3rem" here works right up until someone changes the padding, and then everything standing on the bar sinks half into it with nothing to say why. The home-indicator inset is 0 on a viewport that is not cover-fit — which this one is not — but it rides inside the same sum, so if that ever changes the bar and its tenants move together. */ :root { --botnav-pad-b: max(0.15rem, env(safe-area-inset-bottom, 0px)); --botnav-h: calc(var(--tap) + 0.35rem + var(--botnav-pad-b) + 1px); } #menu { display: block; position: fixed; left: 0; right: 0; bottom: 0; /* One rung above the chat dock's 30, and the reason is the drawer. The bar and the dock never actually touch — the dock stands ON the bar — but the More drawer opens upward into the very corner the dock tabs occupy, and the dock comes later in the markup. Left level, the dock would paint over a drawer the player had just that moment opened. */ z-index: 31; padding: 0.35rem 0 var(--botnav-pad-b); /* The leather frame, lit and shaded exactly as .book's is. Opaque on purpose: the page runs beneath the bar and must not read through it. */ background: var(--leather); background-image: linear-gradient(rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.22)); border-top: 1px solid var(--ink); /* The lift is cast upward — the bar is above the page, not below it. */ box-shadow: 0 -0.35rem 0.9rem rgba(0, 0, 0, 0.45); } #menu .bar-scroll { display: flex; gap: 0.2rem; padding: 0 0.1rem; overflow-x: auto; /* pan-x, not auto: a vertical swipe that starts on a ribbon belongs to the page, and only the horizontal component steers the strip. */ touch-action: pan-x; /* Reaching the last ribbon must not hand the overscroll up to the page. */ overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; /* No snapping: the strip stops where the thumb stopped it, and since every ribbon is the same width a strip parked mid-ribbon reads as deliberate rather than adrift. */ scroll-behavior: auto; /* A drag across ribbons is a gesture, not a text selection, and a tap should not flash a blue box over the plate. */ user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; /* The scrollbar is desk furniture on a phone, and it was eating a row of pixels under the bar for a control no thumb uses. The edges say "there is more this way" instead — see .at-start / .at-end below. */ scrollbar-width: none; } #menu .bar-scroll::-webkit-scrollbar { display: none; } /* Whichever side still has ribbons behind it fades into the leather. The classes come from game.js, because which edge should fade depends on where the strip is parked. */ #menu .bar-scroll { --strip-mask: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%); -webkit-mask-image: var(--strip-mask); mask-image: var(--strip-mask); } #menu .bar-scroll.at-start { --strip-mask: linear-gradient(to right, #000 0, #000 calc(100% - 1.5rem), transparent 100%); } #menu .bar-scroll.at-end { --strip-mask: linear-gradient(to right, transparent 0, #000 1.5rem, #000 100%); } /* Both ends at once means it all fits — nothing to promise, no fade. */ #menu .bar-scroll.at-start.at-end { --strip-mask: none; } /* The fixed width is the point: a ribbon holds its size and its place whether its label is "World" or "Inventory", so the bar is learned by position instead of read every time. */ #menu .bar-scroll .tab { flex: 0 0 5.5rem; min-height: var(--tap); justify-content: center; text-align: center; padding: 0.5rem 0.15rem; font-size: 0.6rem; letter-spacing: 0.04em; white-space: nowrap; } .tab-more .more-glyph { font-size: 0.95rem; letter-spacing: 0; line-height: 1; } /* Only styled when open, so the plain [hidden] attribute still hides it — setting `display` unconditionally here would override [hidden] and leave the menu permanently on screen. It opens UPWARD now. A drawer that dropped from a bar on the bottom edge would open straight off the screen, so the anchor moves from the bar's underside to its top: bottom:100% instead of top:100%. The hard offset shadow stays down-and-right, the way every plate on this desk casts. */ .menu-more:not([hidden]) { position: absolute; bottom: 100%; right: 0.1rem; z-index: 20; display: flex; flex-direction: column; min-width: 9rem; /* Taller than the screen is the one way this drawer can lose an entry, so it scrolls before it reaches the mastery bars up top. */ max-height: calc(100vh - var(--botnav-h) - 7rem); overflow-y: auto; background: #cbbfa3; border: 1px solid var(--ink); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35); } #menu .menu-more .tab { width: 100%; justify-content: flex-start; text-align: left; border-radius: 0; background: transparent; background-image: none; box-shadow: none; border-bottom: 1px solid rgba(42, 31, 22, 0.28); padding: 0.5rem 0.7rem; font-size: 0.68rem; } .menu-more .tab:last-child { border-bottom: 0; } } /* ---- phone: everything else that lives on the bottom edge ---------------- The nav bar is fixed, so it is out of the page's flow and the page knows nothing about it — left alone, the last line of every section and the footer would end up underneath the ribbons. Three things have to give it room, and they are all here rather than scattered by feature, because the thing they share is the bar, not what they do. Anything already pinned to the bottom simply stands one bar higher. The dock in particular gains from it: its tabs are drawn with a flat bottom and rounded top precisely so they can rest ON an edge, and now there is a real edge under them instead of the screen's. */ @media (max-width: 63.999rem) { /* THE DOCUMENT DOES NOT SCROLL. The shell does. This is the whole answer to a bar on the bottom edge that would not sit still. Chrome on Android keeps its address bar along the bottom and retracts it as you scroll — but only ever in reply to the DOCUMENT scrolling. Scroll something inside the document and the toolbar has no opinion at all. So the page stops being the thing that scrolls: the body is exactly one viewport tall and holds its content, and the shell in the middle of it takes the overflow. The toolbar never leaves, so the bottom edge of the viewport is a single line rather than two a toolbar apart, and everything pinned to it — the ribbons, the dock standing on them — is simply still. It costs the strip the toolbar used to hand back on the way down, and it costs the site header its exit; both were paid deliberately, for a bar that does not move while you read. dvh rather than svh: whatever state the toolbar happens to be in as the page paints, the body matches it exactly and no strip of desk is left over at the bottom. With nothing to retract for, it then stays there. */ body[data-page='app'] { height: 100vh; /* fallback first */ height: 100dvh; overflow: hidden; /* The bar's clearance moves to the scroller, which is what runs under it now — the body no longer has a bottom for anything to hide at. */ padding-bottom: 0; } body[data-page='app'] .shell { flex: 1 1 auto; min-height: 0; /* or a flex item refuses to shrink and scroll */ overflow-y: auto; /* Naming the x axis matters: leaving it `visible` makes the browser compute it to `auto` the moment y is not visible, and a stray wide row would hand the reader a sideways scrollbar it never had before. */ overflow-x: hidden; /* Reaching the end of the shell must not hand the scroll up to a document that cannot take it — and would wake the toolbar if it could. */ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--botnav-h) + var(--pad)); } /* Nothing in a scrolling column gets squeezed: it keeps its own height and the container carries the overflow. Without this the shell is a flex box with a fixed height and too much in it, so it goes looking for something to compress — and a flex item's automatic minimum size is its content, EXCEPT for a scroll container, whose minimum is nought. The ticker is the one child with overflow:hidden, which made it the only thing that could give, so it gave all of it: the town crier's plate flattened to ten pixels while the bars and the book stood their ground. */ body[data-page='app'] .shell > * { flex-shrink: 0; } /* One line of copyright, and the bar is standing on it. It has the whole desktop and every other page to be read on. */ body[data-page='app'] > footer { display: none; } /* The dock and the impersonation banner stand on the bar too — but not from here. Their own rules, further down this file, read --botnav-h with a zero fallback: an override written up here loses to them on source order alone, and for a day the dock sat under the bar with nothing to say why. Anything new that pins to the bottom edge follows suit. */ } /* On the wide rail the More ribbon STAYS, at the bottom of the list, and its menu opens accordion-style inside the rail — so the Forum (and Account, Admin, Settings) are reachable from a dropdown there rather than crowding the rail as permanent items. Same button, same open/close manners as the phone. */ @media (min-width: 64rem) { .tab-more { justify-content: flex-start; } .more-glyph { margin-right: 0.45em; } .menu-more:not([hidden]) { display: block; } .menu-more .tab { padding-left: 1.9rem; font-size: 0.66rem; } /* The strip dissolves and its ribbons rejoin the rail's own column, exactly as #menu-more does above — otherwise the rail would be a single flex row stuffed into an 11.5rem column. There is nothing to scroll here and no width to fix, so the phone rules stop at 63.999rem and this undoes the one thing that would outlive them: the extra box in the middle. */ #menu .bar-scroll { display: contents; } } /* The word appears only where there is room for words. */ .more-label { display: none; } @media (min-width: 64rem) { .more-label { display: inline; } } /* Rail-only ribbons (Home): a phone lands on Home by default and has no slot to spare; the rail has room for the word. */ .tab-desktop { display: none; } @media (min-width: 64rem) { .tab-desktop { display: block; } } /* ---- phone: the menu leaves the page entirely ----------------------------- These pages used to keep the wide layout's side panel on a narrow 7.5rem rail all the way down to the smallest phone. That rail cost the page a seventh of its width at exactly the size where width is scarcest, which is why the mastery grid could never open up on a phone. The rail went, and the ribbons spent a while as a strip along the top — which cost the page height instead of width, and cost it right where the mastery bars were already standing. Now they are lifted out of the flow altogether, into the fixed bar on the bottom edge, and the page owes them nothing but the padding underneath it. The side panel returns at 64rem in /styles.css, where there is room for both. */ /* ---- purse ---------------------------------------------------------------- A slim line under the two bars, inside the sticky strip so the coin count is on every page. Height up there is the whole budget: one short row, no wrapping. */ .purse { display: flex; justify-content: space-between; align-items: center; margin: 0.3rem 0 0; padding-top: 0.3rem; border-top: 1px solid var(--rule); } /* Status marks in the label's old seat: only ACTIVE states show, each a 16px inline stroke icon with its words in the title/aria-label. The min-height keeps the row from breathing when the icons come and go. */ .status-icons { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 1.1rem; } .status-icon { display: inline-flex; align-items: center; gap: 0.2rem; } /* The countdown beside each mark; tabular digits so the strip does not wobble as seconds tick. */ .status-time { font-size: 0.78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } .status-infirmary { color: var(--health); } .status-fight { color: var(--ink-soft); } .status-streak { color: var(--ink-soft); } .purse-amt { font-size: 0.9rem; font-variant-numeric: tabular-nums; white-space: nowrap; } /* The town crier: its own slim plate just under the sticky bars strip — NOT sticky; it scrolls away with the page. The line slides right to left; duration comes from game.js (--ticker-s, scaled to the line's length); padding-left 100% starts the line off the right edge and translateX(-100%) carries it fully out the left. */ .ticker { overflow: hidden; margin-top: 0.4rem; padding: 0.25rem 0.6rem; background: var(--parchment); border: 1px solid var(--rule-strong); border-radius: 2px; } .ticker-text { display: inline-block; white-space: nowrap; /* Overflow clips at the plate's PADDING edge, but a plain 100% only reaches the content edge — the extra 0.6rem (the plate's own side padding) parks the line fully off-frame between passes. */ padding-left: calc(100% + 0.6rem); /* One pass, not infinite: game.js restarts it after a 2s rest, so the line catches its breath off the right edge between readings. */ animation: ticker-slide var(--ticker-s, 20s) linear; font-size: 0.85rem; color: var(--ink-soft); } @keyframes ticker-slide { to { transform: translateX(-100%); } } /* The crier's pen on Home: the line box takes what the row has left, the Post plate keeps its own width. */ .crier-row input { flex: 1 1 12rem; min-width: 0; min-height: var(--tap); } /* Respect a reader who asked for stillness: park the line instead. */ @media (prefers-reduced-motion: reduce) { .ticker-text { animation: none; padding-left: 0; } } .purse-amt span + span { margin-left: 0.35em; } /* Denomination colours are decorative — the g/s/c letters carry the meaning. */ .coin-g { color: var(--gold); font-weight: 600; } .coin-s { color: #6f6a5f; } .coin-c { color: #8a5a3c; } /* ---- duties --------------------------------------------------------------- The board: one card per duty The World offers, then a single seek-work button — WHICH duty you draw is the server's roll. */ /* The boards are grids of compact square TILES, grouped by colour (game.js sorts: neutral first, then the axis order). Each tile is a real