/* The page is the sea. One dark room, one world filling it, and the least chrome that still says where you are. THE INSETS ARE THE WIDGET'S. `data-insets="css"` on the widget tag writes --dp-inset-* on ; everything this page floats over the world is placed against them, so nothing of ours ever sits under dice.place's square. */ :root { --ink: #eef2f6; --dim: #93a3b4; --sea: #0a1620; --accent: #2f8f86; --dp-inset-top: 0px; --dp-inset-right: 0px; --dp-inset-bottom: 0px; --dp-inset-left: 0px; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sea); color: var(--ink); font: 15px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } /* The world's box. NOTHING here may carry a transform: the widget appends a position:fixed iframe to , and a transformed ancestor would make this element its containing block and trap it in the corner of the canvas. */ .world { position: absolute; inset: 0; touch-action: none; /* the camera rig wants the gestures, not the scroller */ } .mark { position: fixed; top: calc(12px + var(--dp-inset-top)); left: calc(14px + var(--dp-inset-left)); z-index: 3; pointer-events: none; } .brand { pointer-events: auto; color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 13px; opacity: 0.75; text-shadow: 0 1px 3px rgb(0 0 0 / 60%); } .brand:hover { opacity: 1; } /* "My island". The pan-return brings the TARGET home by itself; what it cannot undo is a zoom or a turn, so this is the one control that puts the whole view back. Hidden for anyone without a seat — a spectator has no island to return to, and a button that reframes the sea is a button that lies. NOT `.home`: the home PAGE carries `class="board home"`, and a rule named for the button matched itself — which became a fixed, shrink-to-fit box in the bottom-right corner with the whole page inside it. A class on is a page's name for itself, so nothing else may claim it. */ .recenter { position: fixed; right: calc(16px + var(--dp-inset-right)); bottom: calc(16px + var(--dp-inset-bottom)); z-index: 3; padding: 9px 16px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 999px; background: rgb(10 22 32 / 72%); backdrop-filter: blur(8px); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; } .recenter:hover { border-color: var(--accent); } .status { position: fixed; left: 50%; top: calc(16px + var(--dp-inset-top)); transform: translateX(-50%); z-index: 4; padding: 7px 14px; border-radius: 999px; background: rgb(10 22 32 / 82%); color: var(--dim); font-size: 13px; } /* The home page's words, over the demo sea. A scrim under them rather than a panel around them: the sea is the point, and a box over it would be a poster of the game sitting on top of the game. Nothing here is interactive, so it lets every click through to the widget behind it. */ .blurb { pointer-events: none; background: radial-gradient(ellipse 70% 55% at 50% 45%, rgb(6 16 24 / 72%) 0%, rgb(6 16 24 / 45%) 45%, rgb(6 16 24 / 0%) 100%); text-shadow: 0 2px 18px rgb(4 12 18 / 85%); position: fixed; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; /* Centred on the PAGE, not on what is left of it. Padding by the widget's insets centred the title inside the padded box instead, which pushed it a hundred-odd pixels off-centre for good — the inset is a constant corner footprint, so it never comes back. The words are kept out of that corner by being narrow rather than by being moved. */ padding: 24px; } /* The heading is short enough to clear the corner on its own. The tagline is not, so it WRAPS rather than being pushed sideways: the widget's expanded panel is wider than the inset it publishes (that inset is the collapsed square's footprint, by design), so there is no inset arithmetic that would dodge it — and laying the page out around a panel that folds itself away would move the title off centre for good. */ .blurb h1 { max-width: 86vw; } .blurb p { max-width: min(80vw, 340px); } .blurb h1 { margin: 0; font-size: clamp(40px, 9vw, 92px); font-weight: 600; letter-spacing: 0.02em; } .blurb p { margin: 0; color: var(--dim); font-size: clamp(15px, 2.4vw, 20px); }