/* VT323 by Peter Hull, SIL Open Font License 1.1 (/licenses/VT323-OFL.txt). Self-hosted since V3.2.1: the exact three subsets Google Fonts served, so every glyph is identical and no third party is contacted to draw the town. */ @font-face { font-family:'VT323'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/vt323-vietnamese.0ee3d783a8.woff2) format('woff2'); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family:'VT323'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/vt323-latin-ext.dcbaf698a4.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family:'VT323'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/vt323-latin.043a60145a.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } * { margin:0; padding:0; box-sizing:border-box; } html,body { width:100%; height:100%; overflow:hidden; background:#141428; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; font-family:'VT323', monospace; } #game { display:block; width:100%; height:100%; image-rendering:pixelated; image-rendering:crisp-edges; } #ui { position:fixed; inset:0; pointer-events:none; color:#efe6d8; } #title { position:absolute; top:calc(10px + env(safe-area-inset-top)); left:0; right:0; text-align:center; } #title h1 { font-size:26px; letter-spacing:6px; font-weight:normal; text-shadow:0 2px 0 #000a; pointer-events:auto; cursor:pointer; display:inline-block; } #title p { font-size:15px; letter-spacing:2px; color:#c9b8c9; margin-top:2px; text-shadow:0 2px 0 #000a; } #counter { position:absolute; left:12px; bottom:calc(10px + env(safe-area-inset-bottom)); font-size:15px; letter-spacing:1px; color:#a99cb8; text-shadow:0 1px 0 #000a; } #hint { position:absolute; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); font-size:15px; letter-spacing:1px; color:#8d81a0; text-shadow:0 1px 0 #000a; text-align:right; } .pxbtn { pointer-events:auto; cursor:pointer; font-family:'VT323',monospace; font-size:17px; letter-spacing:2px; color:#efe6d8; background:#26202e; border:2px solid #efe6d8; padding:3px 10px 4px; box-shadow:0 3px 0 #000a; } .pxbtn:active { transform:translateY(2px); box-shadow:0 1px 0 #000a; } #topRight { position:absolute; top:calc(14px + env(safe-area-inset-top)); right:12px; display:flex; flex-direction:column; align-items:flex-end; gap:8px; } /* V3.2.5: the two status lines that used to live inside the settings panel, surfaced read-only. No button, no panel, no gear. */ #status { font-size:14px; letter-spacing:1px; color:#c9b8e0; text-align:right; text-shadow:0 1px 0 #000a; line-height:1.3; max-width:46vw; } body.day #status { color:#3b4058; text-shadow:0 1px 0 rgba(255,255,255,0.35); } #topLeft { position:absolute; top:calc(14px + env(safe-area-inset-top)); left:12px; display:flex; gap:8px; align-items:center; } body.day #title h1, body.day #title p { color:#2e3448; text-shadow:0 2px 0 rgba(255,255,255,0.35); } /* ---------- panels (announcements / menu) ---------- */ .panel { position:fixed; inset:0; background:#181230; display:flex; flex-direction:column; z-index:20; color:#efe6d8; } .hidden { display:none !important; } .phead { display:flex; align-items:center; gap:10px; padding:10px 12px 8px; padding-top:calc(10px + env(safe-area-inset-top)); background:#100b22; border-bottom:2px solid #2e2446; } .phead .who { flex:1; overflow:hidden; } .phead .who .nm { font-size:22px; letter-spacing:2px; } .phead .who .sub { font-size:14px; letter-spacing:1px; color:#a99cb8; } .plog { flex:1 1 auto; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:8px; -webkit-overflow-scrolling:touch; } .msg { max-width:82%; padding:6px 10px 7px; font-size:18px; line-height:1.15; letter-spacing:1px; border:2px solid #000a; box-shadow:0 3px 0 #0008; white-space:pre-wrap; } .msg.sys { align-self:center; background:none; border:none; box-shadow:none; color:#8d81a0; font-size:14px; } .msg .tag { display:block; font-size:13px; color:#8a6aa8; margin-bottom:1px; } /* ---------- top button row ---------- */ #topLeft { flex-wrap:wrap; max-width:52vw; } #topLeft .pxbtn { font-size:15px; padding:2px 7px 3px; } /* ===== Cozuzu V3 production shell ===================================== Normal Web with every monetization flag off renders exactly as V2 did: the ad containers are removed from the DOM by cozuzu-shell.js, and the sponsor badge and CTA start hidden. Nothing below changes the town. */ /* Reserved commercial band, Normal Web only (the names of the placements live in the web module, never in this shared sheet). It sits in the flow above the town, never over it. While nothing is shown the band is display:none: the town keeps the whole viewport, with no blank box and no reserved hole. When one IS shown, the web module measures it into --cz-ad-h and sets .cz-ad-on, and the rules below shorten the canvas and push the HUD down so nothing is covered. */ :root { --cz-ad-h: 0px; } .adSlot { display:none; } /* only a shown slot takes space */ /* "filled" is set by the web module only when Google reports a real ad; an unfilled unit stays display:none and the town keeps the whole viewport. */ .adSlot[data-state="filled"], .adSlot[data-state="preview"] { display:block; width:100%; background:#141428; border-bottom:2px solid #2e2446; box-sizing:border-box; text-align:center; } .adSlot > .adInner { max-width:970px; margin:0 auto; padding:8px 12px; box-sizing:border-box; } body.cz-ad-on #game { height:calc(100% - var(--cz-ad-h)); } body.cz-ad-on #ui { top:var(--cz-ad-h); } /* The permitted slot size, decided BEFORE the ad is requested. This is Google's documented fixed-size responsive pattern: one class on the , sized per screen width with media queries, and NO data-ad-format / data-full-width-responsive (those hand the choice back to Google, which is how a 280px block once landed over the town). The ad can only be the size the slot allows, so nothing has to be corrected after it renders. */ .bandUnit { display:inline-block; width:320px; height:50px; } @media (min-width:500px) { .bandUnit { width:468px; height:60px; } } @media (min-width:800px) { .bandUnit { width:728px; height:90px; } } @media (min-width:1000px) { .bandUnit { width:970px; height:90px; } } /* development only: never rendered for a normal visitor, never a real ad */ .slotMock { border:2px dashed #6ad0c0; color:#6ad0c0; letter-spacing:1px; display:inline-flex; align-items:center; justify-content:center; max-width:100%; box-sizing:border-box; font-size:14px; text-align:center; } #sponsorBadge { position:fixed; z-index:40; left:50%; transform:translateX(-50%); bottom:calc(56px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:8px; padding:6px 12px 7px; background:rgba(20,16,34,0.92); border:2px solid #efe6d8; color:#efe6d8; font-family:'VT323',monospace; font-size:17px; letter-spacing:1px; pointer-events:none; } #sponsorBadge.hidden { display:none; } #sponsorBadge .sponsorLabel { font-size:13px; letter-spacing:2px; color:#a99dc9; text-transform:uppercase; } #sponsorBadge .sponsorMark { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; background:#6ad0c0; color:#08221d; font-size:16px; } #sponsorBadge .sponsorMark img { width:22px; height:22px; object-fit:contain; display:block; } @media (prefers-reduced-motion: no-preference){ #sponsorBadge:not(.hidden){ animation:sponsorIn 220ms ease-out; } @keyframes sponsorIn { from{ opacity:0; transform:translateX(-50%) translateY(6px);} } } /* OBS Browser Source composition. The town itself is untouched — this only removes normal-website chrome so the capture is the scene, not a webpage with its UI awkwardly hidden. */ body.stream-mode #title, body.stream-mode #topLeft, body.stream-mode #topRight, body.stream-mode #counter, body.stream-mode #hint { display:none; } /* ===== V3.2 launch polish ============================================ */ /* Wide screens: the stack wrappers vanish from layout and every child keeps its original absolute position, exactly as before. */ #topStack, #topBar { display:contents; } body.stream-mode #topStack { display:none; } /* Subtle site links, bottom centre. V3.2.5: the settings panel that used to carry these links on phones is gone, so they are shown on every width -- the info/legal pages must stay reachable without one. Never on stream pages (the build does not emit them there at all). */ #siteNav { position:absolute; left:50%; transform:translateX(-50%); bottom:calc(12px + env(safe-area-inset-bottom)); display:none; gap:14px; font-size:14px; letter-spacing:1px; opacity:0.5; pointer-events:auto; white-space:nowrap; transition:opacity 160ms ease-out; } #siteNav a { color:#a99cb8; text-decoration:none; text-shadow:0 1px 0 #000a; } #siteNav a:hover, #siteNav a:focus-visible { color:#efe6d8; text-decoration:underline; } #siteNav:hover, #siteNav:focus-within { opacity:0.95; } body.day #siteNav a { color:#2e3448; text-shadow:0 1px 0 rgba(255,255,255,0.35); } #siteNav { display:flex; } body.stream-mode #siteNav { display:none !important; } /* Narrow phones (tested at 320 / 375 / 390 / 430): the centred title used to sit on top of the wrapped button rows, and the hint ran into the counter. Buttons stay top-left/top-right, the title flows beneath them, and the tap hint (a child of #topStack) sits under the title in the sky, so the bottom sidewalk holds only the counter and no traffic lane is covered. On wide screens #hint keeps its absolute bottom-right spot. */ @media (max-width:600px) { #topStack { display:flex; flex-direction:column; gap:6px; position:absolute; top:calc(12px + env(safe-area-inset-top)); left:10px; right:10px; } #topBar { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; } #topLeft, #topRight { position:static; } #topLeft { flex:1 1 auto; min-width:0; max-width:none; gap:6px; } #topRight { flex:0 0 auto; gap:6px; } #topLeft .pxbtn, #topRight .pxbtn { font-size:14px; letter-spacing:1px; padding:2px 6px 3px; } #title { position:static; } #title h1 { font-size:22px; letter-spacing:4px; } #title p { font-size:14px; letter-spacing:1px; margin-top:0; } #counter { font-size:14px; } #status { font-size:13px; max-width:52vw; } #siteNav { font-size:13px; gap:10px; flex-wrap:wrap; justify-content:center; max-width:94vw; white-space:normal; } #hint { position:static; text-align:center; font-size:13px; line-height:1.15; margin-top:1px; } body.day #hint { color:#3b4058; text-shadow:0 1px 0 rgba(255,255,255,0.35); } }