:root { --bg: #1c1a17; --panel: #2b2722; --panel-border: #4a4238; --text: #d8d0c0; --muted: #8f8677; --accent: #c8a45a; } * { box-sizing: border-box; } /* Departure Mono, a pixel font, served with the game under the SIL Open Font License (fonts/DepartureMono-OFL.txt), for the switch in the ⋯ menu (2026-10-01: "Add a setting in the menu that uses departure mono as the font"). The page's fonts are three tokens, so the switch is one class on the root that redefines them: the UI's, the console's monospace and the area title's serif. The font is drawn on an eleven-pixel grid, so the base size goes to 11px with it, and it has no bold of its own, so none is faked: a smeared pixel font is worse than one weight. */ @font-face { font-family: "Departure Mono"; src: url("fonts/DepartureMono-Regular.woff2") format("woff2"); font-display: swap; } :root { --gripw: 8px; /* The smallest thing anybody is asked to press, mouse or finger (2026-10-10: "The hit region for buttons must be 44x44 so the icons can be smaller if necessary or better"). Every button, square and mark is at least this big in both directions; what is drawn in it can be smaller, and mostly is. It is Apple's 44 points and WCAG's enhanced target size. */ --hit: 44px; /* What is drawn in a square of --hit: the thirty-two pixel pictures, and less once the squares are too small to hold them inside their border. */ --hitart: min(32px, calc(var(--hit) - 4px)); /* The chat line's presses, and the way into it on a phone: the one place under --hit (2026-10-10: "make the chat buttons 38px"). The line is typed in far more than it is pressed, and every pixel of it is a pixel of log. */ --chatpress: 38px; /* The other place under --hit: the marks over the world that are not a panel's icon (2026-10-10: "make the non panel icons in the game view region 38px"), the info button and the statuses in the top left, the floor chip, full screen and the ⋯ in the top right. They are pressed far less than they are looked past, and every pixel they take is world hidden. The panels' icons and the things lying in reach keep --hit. */ --viewhit: 38px; --uifont: "Segoe UI", system-ui, sans-serif; --monofont: ui-monospace, Consolas, monospace; --titlefont: Georgia, "Times New Roman", serif; } /* Smaller presses, chosen from the menu's Button size (2026-10-12: "In the menu, add an option to set panel button size. 32, 38, 44"). 44 above is where everybody starts; these are a player's own trade of finger room for room on the screen. */ html.hit38 { --hit: 38px; } html.hit32 { --hit: 32px; } html.pixelfont { --uifont: "Departure Mono", ui-monospace, monospace; --monofont: "Departure Mono", ui-monospace, monospace; --titlefont: "Departure Mono", ui-monospace, monospace; } html.pixelfont body { font-size: 11px; } html.pixelfont * { font-synthesis: none; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.4 var(--uifont); overflow: hidden; } #app { display: grid; /* One column: the world's. There were panel areas either side of it, with a grip on each inside edge, until 2026-10-01, when the panels became icons along the bottom of the world ("Show each of the panels as an icon along the bottom (or top)"); see #panelbar. */ grid-template-columns: 1fr; /* One row: the health and mana bars were a row of their own across the whole page until 2026-09-30, when they went into the world's column, directly over it ("Always show the health and mana bars directly above the main window"). */ grid-template-rows: 1fr; /* Less the phone's keyboard while the chat line is open over it (fitAboveKeyboard in main.ts), so the line stands on the keyboard rather than under it; nothing anywhere else. */ height: calc(100vh - var(--kbd, 0px)); /* Full screen on a phone means the notch and the gesture bar are the page's problem: the viewport meta says cover the lot, and these give the borrowed edges back so no panel hides under hardware. They are zero on everything that has no insets, which is every desktop. */ padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* The page does not zoom (2026-10-15: "Lock the screen scale so players can't zoom the page"): pan-x pan-y lets a finger scroll what scrolls and takes the pinch and the double-tap zoom from the browser everywhere, since an element's touch-action can only narrow what its page allows. The viewport meta and zoomlock.ts say it to the browsers that do not listen here. */ html { touch-action: pan-x pan-y; } /* Small screens are played by tapping, and a tap that has to wait to see whether it was a double tap is a tap that feels broken, so the wait is called off wherever a tap is the gesture. */ #buttonsbody button, #spellsbody button, .paneltoggle, #viewtools button, #viewtoolsleft button, #grounddock button { touch-action: manipulation; } /* The world takes every gesture rather than only the double tap, because two fingers on it are a pinch that zooms the window (see main.ts) and the browser may not have them for a page zoom. The minimap used to own its drag the same way; the window owns the pinch now that it is the thing being zoomed. */ #game { touch-action: none; } /* The viewport unit follows the browser's own chrome as it hides and shows, where the browser supports it; 100vh is the fallback above. */ @supports (height: 100dvh) { #app { height: calc(100dvh - var(--kbd, 0px)); } } /* The two numbers a fight is read off, directly over the world and as wide as it (they spanned the whole page, panel areas and all, until 2026-09-30). They were the first two rows of a panel that folds, drags and scrolls, which is three ways to lose sight of your own health while something is biting you; here nothing can move them. The bars keep the classes and the ids they had, so what draws them did not change at all. */ #topbars { flex: none; display: flex; gap: 4px; padding: 3px 6px; background: var(--panel); border-bottom: 2px solid var(--panel-border); } #topbars .bar { flex: 1 1 0; margin: 0; height: 16px; } #topbars .bar span { line-height: 16px; font-size: 12px; } /* The page: the info panel down its left from top to bottom, and everything else in a column to its right (2026-10-06: "Always show the info panel tiled on the left at the full screen height"). It is the box the panel's width is a share of, and the one its grip stands in. On a narrow screen it is a column instead: see the narrow rules. */ #gamewrap { position: relative; display: flex; flex-direction: row; min-width: 0; min-height: 0; background: #000; /* How wide the info panel is: never more than half the page, however narrow the page becomes after it was dragged. main.ts sets it. */ --drawerw: min(300px, 50%); } /* The bars, the world, the panels beside it and the log under them, to the right of the info panel. */ #gamecol { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; } /* The canvas and anything laid over it. It is its own positioned box so an overlay can cover the view alone: the console below it and the bag and stats beside it stay where they are, and stay readable. */ #view { position: relative; flex: 1 1 0; min-height: 0; display: flex; /* Sized by the page and never by what is in it, so what is over the world can ask which way round the world is: see the floor chip. */ container: view / size; } /* The stick under a held finger on the world (2026-10-12: "Allow long pressing then dragging to move like a joystick"): a ring where the finger came down, and a knob that follows it once it drags. Fixed to the page and placed by main.ts at the finger, so it is a child of the body and not of the view, whose size containment would otherwise be what it is fixed to. */ #stickring { position: fixed; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); background: rgba(0, 0, 0, .25); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); pointer-events: none; z-index: 40; } #stickring[hidden] { display: none; } #stickknob { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(255, 255, 255, .45); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); } #stickring.walking #stickknob { background: var(--accent); } #game { /* flex-basis 0 so the backing store's own size never feeds back into layout: the renderer sizes it from this element, in device pixels, and letterboxes itself. */ flex: 1 1 0; display: block; width: 100%; min-height: 0; cursor: crosshair; outline: none; background: #000; } /* The furniture over the world: the strip in the top right that is about the window — full screen, and the pair that looks a floor up and a floor down — and the strip in the bottom right that is about what you are carrying and what you are standing on. Asked for on 2026-09-22: "show the fullscreen/windowed button in the top right of the main view, with an appropriate glyph and tooltip", "move the up and down level map controls into the main window top right like the fullscreen/windowed control", "remove the inventory panel and make it a bag icon in the bottom right corner. clicking it pops up the inventory", and "when there's an item under the player, have an icon pop up next to the inventory icon in the bottom right with the item under the player displayed". Everything here is in service of one rule: this is furniture over somebody's game, so it takes as little of the world as it can and none of the clicks that were not meant for it. Each button is the size of its own drawing and no bigger, which is the whole of what stops it eating a click on the ground: the world's listeners are on the canvas, a click inside these twenty-six pixels never reaches it, and a click one pixel outside them is a click on the canvas like any other. The strips themselves are the one piece of wrapper on the page and they are wrapper for a reason: a control that comes and goes — the ground icon appears when you walk onto something and vanishes when you walk off — must not move the one beside it, and a row packed against an edge is what keeps the bag in the same pixels all session. The price of a row is the gaps between its buttons, which would be a transparent lid over a piece of ground somebody meant to click on, and that is paid for outright: the strip passes presses through and only the buttons catch them. They are dim at rest and light up when pointed at. The corner of a game is not a toolbar and a row of bright chips sitting there all session would be read as something happening; dim, they are plainly controls and plainly not part of the scene. They keep a solid-ish backing rather than being drawn straight onto the world so that they survive whatever is underneath them — the ground is sand in one place and stone in another, and a bare line drawing has no contrast it can rely on. z-index 4 puts them under the things that cover the whole view: the trade window and the death screen, each of which is over the world on purpose. A button poking up through the wash over a dead character is the one thing on that screen that had not noticed. What else the client draws near these corners was checked rather than assumed. The line written across the top of the view while you are looking at another floor used to be centred in the whole of it and used to run under the one button that was up there; with three marks at one end and the spell rail at the other it would lose both ends of its sentence at a phone's width, so it is centred in the band between them now, measuring their widths off these elements — see peekLabel in render.ts, which is why the strips are the size of what is in them and nothing more. The bar that asks whether you want to trade and the reconnect bar are both pinned to the top middle and both stand a layer higher, so they cross the strip and cover it for the few seconds they are up, which is the right way round: a question you have to answer outranks a control you might press. The bottom right had nothing in it at all — the three full-view overlays are each centred inside the view — which is half the reason the bag is there and the other half is that it is the corner a right hand rests in. */ #viewtools, #grounddock { position: absolute; z-index: 4; display: flex; align-items: flex-start; gap: 4px; /* The strip is scenery; only what is in it is a target. */ pointer-events: none; } #viewtools { top: 6px; right: 6px; } #viewtoolsleft { position: absolute; z-index: 6; top: 6px; left: 6px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; justify-items: start; gap: 4px; pointer-events: none; max-width: calc(100% - 160px); } /* The info button in the corner, the statuses in a row to its right, and the ride button under the info button (2026-10-13: "show the mount button below the info drawer button"). The statuses (their rule is below) span both rows, so a second row of them wraps in beside the horse rather than under it. */ #statsbtn { grid-column: 1; grid-row: 1; } #ridebtn { grid-column: 1; grid-row: 2; } /* The buttons rode the drawer's edge over the world while it was out (2026-09-29: "When the stats panel is shown, still have the stats button float in the main view, pressing it again closes the stats"). Since 2026-10-06 the info panel is never over the world, so the corner stays in the corner. */ /* The statuses, as icons in a row to the right of the info button (2026-10-01: "show statuses as icons to the right of the info icon. remove the statuses field from the stats panel"), wrapping onto a second row rather than running under the floor chip. Each is the size of the corner's buttons and wears its status's colour on its border and its drawing, as the chips did; a status with a clock carries the clock in small figures along its foot. A press on one says what it is in the console, as its tooltip does to a mouse that waits. */ #statusicons { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; } .statusicon { pointer-events: auto; position: relative; width: 26px; height: 26px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: rgba(22, 20, 15, .72); color: #b9c2cc; border: 1px solid #3a4048; border-radius: 3px; cursor: pointer; padding: 0; font: inherit; } .statusicon svg { width: 16px; height: 16px; display: block; } .statusicon.good { border-color: #4a6a8c; color: #9cc4ee; } .statusicon.warn { border-color: #8c7a3a; color: #e0c46a; } .statusicon.bad { border-color: #8c4a4a; color: #e88; } .statusicon .clock, #ridebtn .clock { position: absolute; right: 1px; bottom: 0; font-size: 9px; font-weight: bold; line-height: 1; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; pointer-events: none; } .statusicon:has(.clock) svg { margin-top: -5px; } /* Statuses are facts about you, not things to press (2026-10-05: "Status icons should be differentiated somehow, they currently look like regular buttons"). The corner's button rules reached them as well, so each wore the same dark square as the info button beside it. Now each is a disc tinted with its own colour, ringed in it, with its clock on a pill under its foot, and does not light up under a pointer the way a button does. The id in the selector is what lets these win over the corner's rules for buttons. */ /* The press is the whole 38 (--viewhit) and the disc is drawn in the middle of it, at 26 and 30 on a touch screen as it was, so the discs stand apart by what their hit regions take rather than by a gap. */ #statusicons { gap: 0; } #statusicons .statusicon { width: var(--viewhit); height: var(--viewhit); --disc: 26px; border: 0; background: none; box-shadow: none; } #statusicons .statusicon::before { content: ""; position: absolute; pointer-events: none; inset: calc((var(--viewhit) - var(--disc)) / 2); border-radius: 50%; box-sizing: border-box; border: 1.5px solid currentColor; background: color-mix(in srgb, currentColor 22%, rgba(10, 10, 12, .78)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); } #statusicons .statusicon svg { position: relative; } #statusicons .statusicon:hover, #statusicons .statusicon:focus-visible { background: none; } #statusicons .statusicon:hover::before, #statusicons .statusicon:focus-visible::before { background: color-mix(in srgb, currentColor 32%, rgba(10, 10, 12, .82)); } #statusicons .statusicon.good, #statusicons .statusicon.good:hover { color: #9cc4ee; } #statusicons .statusicon.warn, #statusicons .statusicon.warn:hover { color: #e0c46a; } #statusicons .statusicon.bad, #statusicons .statusicon.bad:hover { color: #e88; } #statusicons .statusicon svg { width: 14px; height: 14px; } #statusicons .statusicon:has(.clock) svg { margin-top: 0; } #statusicons .statusicon .clock, #ridebtn .clock { left: 50%; right: auto; bottom: calc((var(--viewhit) - var(--disc)) / 2 - 7px); transform: translateX(-50%); padding: 0 3px; border-radius: 6px; background: rgba(0, 0, 0, .85); text-shadow: none; } /* The square's own foot, where a status has its disc's. */ #ridebtn .clock { bottom: -7px; } /* The info panel: Stats, Skills and Players, stacked (one panel at a time at first, all three since 2026-09-29: "Skills, stats and players should all pop out together and stack vertically"). It slid out over the left of the world from a button in its corner until 2026-10-06: "Always show the info panel tiled on the left at the full screen height". Since then, wider than the narrow breakpoint, it is a column down the left of the page from top to bottom with everything else to its right, covering nothing. It was always out there for a few hours, and then went back to the button showing and hiding it ("Don't show it always in horizontal mode"). On a narrow screen it is a drawer the button brings out above the world: see the narrow rules. */ #drawer { flex: none; width: var(--drawerw); box-sizing: border-box; min-height: 0; padding: 6px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; background: var(--panel); border-right: 2px solid var(--panel-border); } /* Shut, it takes no room at all, at every width, and nor does its grip (below): the info button shows and hides it (2026-10-06). */ #drawer:not(.open) { display: none; } /* Stats, Skills and Players share the drawer's height and each scrolls its own rows inside its share (2026-10-17: "Make each panel scrollable"), its title staying put above them; the drawer scrolled the three as one before. A panel gives up room in proportion to its height, so a long list of players gives way before a short one. */ #drawer section { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; } #drawer section > .title { flex: none; } #drawer section > .panelbody { flex: 0 1 auto; min-height: 0; } #drawer section[hidden] { display: none; } /* Skills and Players are boxed together only when held upright on a phone (see the narrow rules); everywhere else the box is not drawn and the three stack in the drawer as they did. */ #drawerside { display: contents; } /* The panel's right edge, dragged for its width (2026-09-29: "It should be a resizable panel"): the same strip with a line in it as the columns' own grips, standing on the edge from the top of the page to the bottom. */ #drawergrip { position: absolute; z-index: 5; top: 0; bottom: 0; left: var(--drawerw); width: 10px; margin-left: -5px; display: flex; align-items: center; justify-content: center; cursor: col-resize; touch-action: none; } #drawergrip::after { content: ""; height: 34px; width: 3px; border-radius: 2px; background: var(--panel-border); } #drawergrip:hover::after, #drawergrip.dragging::after { background: var(--accent); } #drawergrip:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } #drawer:not(.open) + #drawergrip { display: none; } #statsbtn.on, #ridebtn.on { color: var(--accent); border-color: var(--accent); } /* The Ride button while a fight keeps the horse from standing for you (2026-10-13: "show a timer for how long until a mount can be used, in the button"): the seconds left in small figures on a pill under its foot, the clock the statuses wear ("The countdown should use the same subscript thing like the light status"); see .statusicon .clock below. ui.ts ticks the number down. */ #ridebtn:not(.waiting) .clock { display: none; } /* The info button stays at every width: on a wide screen it shows and hides the panel's column, as it does the drawer on a phone (2026-10-06: "Don't show it always in horizontal mode ... The button to hide it doesn't appear anymore"). The world is pushed over by the column rather than covered (2026-10-01: "the info drawer should not hover over the map it should push it in"), and the renderer, which sizes itself from the canvas, letterboxes the world into what is left. */ /* The floor chip: the floor being looked at, as one rounded piece (2026-09-29: "implement it, fading area title, sound in the menu"). The floor is lit in the accent while you are looking at one that is not your own, and a press on it then brings you back; see paintFloor. Look up and look down were its two ends until 2026-10-13 ("Only show the level up down buttons when the current level isn't the one the player is on. Otherwise just show the current level and expand it out to protrude into the main view with up/down when clicked"): now they hang under the floor, or out to its left down the right edge (below), over the world, while you are looking at another floor (.peek) or after a press on the floor (.open). The floor itself stays where it is either way, so nothing in the strip moves when they come and go. */ #floorchip { position: relative; pointer-events: auto; display: flex; align-items: center; height: calc(var(--viewhit) + 2px); box-sizing: border-box; background: rgba(22, 20, 15, .72); border: 1px solid var(--panel-border); border-radius: 19px; } #viewtools #floorchip button { width: var(--viewhit); height: 100%; border: 0; border-radius: 19px; background: transparent; } #viewtools #floorchip button:hover, #viewtools #floorchip button:focus-visible { background: rgba(255, 255, 255, .06); } #viewtools #floorchip svg { width: 12px; height: 12px; } #viewtools #floorlabel { width: auto; min-width: var(--viewhit); padding: 0 2px; color: var(--text); font: 600 12px/1 var(--uifont); letter-spacing: .02em; } #floorsteps { position: absolute; top: calc(100% + 4px); right: -1px; display: none; flex-direction: column; width: calc(var(--viewhit) + 2px); box-sizing: border-box; background: rgba(22, 20, 15, .72); border: 1px solid var(--panel-border); border-radius: 19px; } #floorchip.open #floorsteps, #floorchip.peek #floorsteps { display: flex; } #viewtools #floorsteps button { width: 100%; height: var(--viewhit); } #floorchip.peek, #floorchip.peek #floorsteps { border-color: var(--accent); } #viewtools #floorchip.peek #floorlabel { color: var(--accent); } /* Down the right edge under the ⋯ while the world is wider than it is tall (2026-10-10: "when the game view is wider than it is tall, show the floorchip aligned vertically below the morebtn"), and the strip across the top a chip shorter. The ⋯ is the strip's last button, so its right edge is the strip's. Only where the column clears what stands in the bottom right corner: the chip comes down to 2 presses and 8px (it was 4 and 12 while look up and look down were under it), so 250px leaves room for the right panels' one row of icons wider than the narrow breakpoint, and 350px for the three that go up the right edge on a phone. Shorter than that the chip stays in the strip, where it was. Down the edge, look up and look down come out to the left of the floor rather than under it, up then down, at the floor's own height (2026-10-13: "When the floor chip is on the right, clicking it should show the floor change buttons popping out to the left of it"). */ @container view (orientation: landscape) and (min-height: 250px) { @media (min-width: 721px) { #floorchip { position: absolute; top: calc(100% + 4px); right: 0; width: calc(var(--viewhit) + 2px); } #viewtools #floorlabel { width: 100%; min-width: 0; padding: 0; } #floorsteps { top: -1px; right: calc(100% + 4px); flex-direction: row; width: auto; height: calc(var(--viewhit) + 2px); } #viewtools #floorsteps button { width: var(--viewhit); height: 100%; } } } @container view (orientation: landscape) and (min-height: 350px) { #floorchip { position: absolute; top: calc(100% + 4px); right: 0; width: calc(var(--viewhit) + 2px); } #viewtools #floorlabel { width: 100%; min-width: 0; padding: 0; } #floorsteps { top: -1px; right: calc(100% + 4px); flex-direction: row; width: auto; height: calc(var(--viewhit) + 2px); } #viewtools #floorsteps button { width: var(--viewhit); height: 100%; } } /* The ⋯ and what it opens: full screen and sound, the marks set once and left, as a small list under the strip with a word beside each drawing. */ #moremenu { position: absolute; z-index: 7; top: calc(var(--viewhit) + 10px); right: 6px; display: flex; flex-direction: column; gap: 2px; padding: 4px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); /* Never taller than the window: main.ts sets max-height from where the menu starts, and the rest scrolls under a finger or the wheel without dragging the page or the log behind it. */ overflow-y: auto; overscroll-behavior: contain; } #moremenu[hidden] { display: none; } /* A row keeps its size in a menu too long for the window and the menu scrolls instead: a flex column would otherwise squeeze the rule between the window's choices and the game's to nothing first. */ #moremenu > *, #popmenu > * { flex: none; } #moremenu button { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; background: transparent; color: var(--text); border: 0; border-radius: 4px; font: 13px var(--uifont); white-space: nowrap; cursor: pointer; text-align: left; } #moremenu button[hidden] { display: none; } #moremenu button:hover, #moremenu button:focus-visible { background: rgba(200, 164, 90, .15); color: var(--accent); } #moremenu svg { width: 16px; height: 16px; display: block; } #moremenu button, #popmenu button { min-height: var(--hit); box-sizing: border-box; } /* Button size: its name, then the three sizes in a row, the one in use underlined in the accent. */ #hitsize { display: flex; align-items: center; gap: 2px; } #hitsize .hitlabel { display: flex; align-items: center; gap: 8px; flex: 1; padding: 0 8px; white-space: nowrap; } #moremenu #hitsize button { min-width: var(--hit); padding: 6px 8px; justify-content: center; } #hitsize button[aria-checked="true"] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); } /* The game's buttons in the menu since 2026-09-30 ("Move debug toggle, help, logout, changes, highscores buttons all into the ... Button"): a rule between them and the window's two, the debug switch red while it is on, Changes in the accent while anything is waiting, and Log out greyed while you may not leave (a skull, or a fight under ten seconds old). The ⋯ itself is lit while changes wait, since the count on Changes is out of sight until it is opened. */ #moremenu .menusep { height: 1px; margin: 3px 4px; background: var(--panel-border); } #moremenu button.on { color: #e88; } #moremenu button.unread { color: var(--accent); } #moremenu button:disabled { color: var(--muted); cursor: not-allowed; opacity: .55; background: transparent; } #morebtn.unread { color: var(--accent); border-color: var(--accent); } #morebtn.on { color: var(--accent); border-color: var(--accent); } /* The small menu that pops up beside what was pressed (2026-10-08: "use a context menu that pops up over them, like we're supposed to have for message log interactions"): one of the world's people, a line of the log, the bag's icon. No backdrop, so the world shows and plays round it; it is placed by popmenu.ts, which keeps it inside the window. The ⋯ menu's look, since it is the same kind of thing. */ #popmenu { position: fixed; z-index: 35; left: 0; top: 0; display: flex; flex-direction: column; gap: 1px; padding: 4px; min-width: 140px; max-width: min(300px, calc(100vw - 12px)); max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); overflow-y: auto; overscroll-behavior: contain; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); outline: none; } #popmenu[hidden] { display: none; } #popmenu .pophead { padding: 4px 8px 5px; margin-bottom: 2px; border-bottom: 1px solid var(--panel-border); color: var(--muted); font: 12px/1.35 var(--uifont); cursor: default; } #popmenu button { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; background: transparent; color: var(--text); border: 0; border-radius: 4px; font: 13px var(--uifont); text-align: left; cursor: pointer; } #popmenu button:hover:not(:disabled), #popmenu button:focus-visible, #popmenu button:focus { background: rgba(200, 164, 90, .15); color: var(--accent); outline: none; } /* A quest on an NPC's menu (2026-10-05: "Make clicking an NPC provide options like starting quests, vendor, etc"): first, with its "!", and in the accent, so the errand stands out from the small talk under it. */ #popmenu button.quest { color: var(--accent); } #popmenu button:disabled { color: var(--muted); cursor: not-allowed; opacity: .55; } #popmenu .poptick { display: inline-block; width: 1em; text-align: center; color: var(--accent); } /* A choice that is a thing (the Equipment panel's places): its picture, the size it is in the bag with how many in the corner, then its name. Its numbers wait under the name for a long press or a right-click. */ #popmenu { -webkit-touch-callout: none; user-select: none; } #popmenu .popicon { position: relative; flex: none; width: 32px; height: 32px; } #popmenu .popicon canvas { display: block; width: 32px; height: 32px; image-rendering: pixelated; } #popmenu .popicon .count { position: absolute; right: -2px; bottom: -3px; font-size: 10px; color: #fff; text-shadow: 0 0 2px #000; } #popmenu .poplabel { display: flex; flex-direction: column; min-width: 0; } #popmenu .popdetail { margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.3; white-space: normal; } #popmenu .popdetail[hidden] { display: none; } #popmenu .popstats { color: var(--muted); font-size: 11px; line-height: 1.25; white-space: nowrap; } /* What a thing is, when the menu is there only to say it: a long press on the Equipment panel's square. Words, not choices. */ #popmenu .popabout { padding: 3px 8px; color: var(--text); font: 12px/1.4 var(--uifont); cursor: default; } #popmenu .popabout + .popabout { color: var(--muted); } /* An area's name on arriving in it: large, over the top of the world, for a few seconds, then faded out. Scenery, never a target. */ #areatitle { position: absolute; z-index: 3; top: 16%; left: 50%; transform: translateX(-50%); max-width: 80%; text-align: center; pointer-events: none; color: #f2e6c8; text-shadow: 0 2px 6px #000, 0 0 2px #000; opacity: 0; transition: opacity .8s ease-in; } #areatitle.show { opacity: 1; transition: opacity .25s ease-out; } #areatitle b { display: block; font: 700 26px/1.15 var(--titlefont); letter-spacing: .04em; } #areatitle i { display: block; font: italic 13px var(--titlefont); opacity: .85; margin-top: 2px; } /* The zoom's note: smaller than the area's name, and below the middle of the world, near where the eye already is while the ground grows or shrinks but clear of your own character, who is in the middle. */ #zoomtag { position: absolute; z-index: 3; top: 68%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap; padding: 4px 10px; border-radius: 3px; background: rgba(22, 20, 15, .72); border: 1px solid var(--panel-border); color: #f2e6c8; font: 600 15px var(--titlefont); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .6s ease-in; } #zoomtag.show { opacity: 1; transition: opacity .15s ease-out; } #grounddock { bottom: 6px; right: 6px; } /* The ground at your feet shares the bottom right corner with the panels' icons since they came over the world (2026-10-01: "float the panelbar icons over the map"): it steps up over the right side's row of them when there are any, and on a narrow screen, where the shut panels' icons go up the right edge, it steps in beside them. */ #view:has(#panelbarright > .panelicon:not([hidden])) #grounddock { bottom: calc(var(--hit) + 12px); } #viewtools button, #viewtoolsleft button, #grounddock button { pointer-events: auto; position: relative; width: var(--viewhit); height: var(--viewhit); padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(22, 20, 15, .72); color: var(--muted); border: 1px solid var(--panel-border); border-radius: 3px; cursor: pointer; /* A button that is also held down must not select anything or raise the browser's own menu over itself: the hold is the tooltip, the same as on a spell. */ user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } /* display: flex above beats the hidden attribute, and hidden is how three of these keep themselves off the screen: the full screen button where the browser has no full screen to give, the ground icon whenever there is nothing under your feet, and the ride button for somebody with no horse. Without this line the first of those gets a button that cannot work, which is worse than no button at all, and the others get an empty square in the corner for ever. */ #viewtools button[hidden], #viewtoolsleft button[hidden], #grounddock button[hidden] { display: none; } #viewtools button:hover, #viewtools button:focus-visible, #viewtoolsleft button:hover, #viewtoolsleft button:focus-visible, #grounddock button:hover, #grounddock button:focus-visible { color: var(--accent); border-color: var(--accent); background: rgba(22, 20, 15, .92); } /* The drawings take the button's colour and nothing else decides their hue; all that is settled here is how big they are. See viewicons.ts. */ #viewtools svg, #viewtoolsleft svg, #grounddock svg { width: 16px; height: 16px; display: block; } /* What is lying in reach, one icon a tile (2026-10-20, see showGround in ui.ts): the size of the other icons over the world, drawn from the same sprite the bag and the ground itself use, so the square in the corner and the thing on the floor are recognisably one object. They were one icon twice the size of the rest until then (2026-09-24), for the tile under you alone. The row runs along the foot of the world from the right edge when the world is taller than it is wide, and up its right edge from the bottom when it is wider, and wraps when it runs out of room rather than running into the strip at the top. Each is lit the way the depot's icon is beside a box (.panelicon.urgent below), since each is a thing beside you to be had for a press, and is the size of the bag's squares and the panels' icons, --hit, which follows the menu's Button size (2026-10-20: "They should be sized to the button size the user selected in the menu like everything else"). */ #grounddock button { width: var(--hit); height: var(--hit); } #grounddock { flex-direction: row-reverse; flex-wrap: wrap-reverse; align-items: flex-end; max-width: calc(100% - 12px); } @container view (orientation: landscape) { #grounddock { flex-direction: column-reverse; max-height: calc(100% - 2 * var(--viewhit) - 32px); max-width: none; } } #grounddock canvas { width: var(--hitart); height: var(--hitart); image-rendering: pixelated; } /* How many of the thing lying there there are: a small number in the corner of the button, out of the way of the drawing under it. */ #grounddock .count { position: absolute; right: 2px; bottom: 0; font-size: 13px; line-height: 1; font-weight: bold; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; } /* The two readings at the top of the Inventory panel: how many different things the bag holds, and what it weighs against what this character can lift. They sat in a box in the corner of the world for a few hours on 2026-09-22 and are back on the panel's own line with the squares. A row of their own above the grid rather than beside the panel's name, because every other panel's title is one line of one thing and at a phone's width the two of them were measured spilling past the panel's edge over the stats beside it. The weight takes no colour however high it climbs: it is the limit nobody meets, a reading and not a warning. */ /* The spells, down the left edge of the world (asked for on 2026-09-22: "put the spells as icons along the left side of the screen"). The rail is the full height of the view so that the icons in it have a height to wrap against, and it is scenery for the same reason the corner strips are: a full-height box down the left of the world would otherwise be a transparent wall you could not click through. Only the icons and the question mark take presses. It wraps into a second column rather than scrolling or clipping. A short view — somebody who has dragged the log up, or a telephone held upright — cannot show twelve icons in one column, and of the three things that can happen then, two are unacceptable: clipping loses spells with no sign that they are gone, and a scrollbar thirty pixels wide over the world is a control nobody will find. Wrapping costs another strip of the world's left edge in exactly the case where there was no room, and costs nothing at all the rest of the time, which is most of the time: at a desk the column never wraps. The character is in the middle of the view either way, so what a second column covers is the far left of what is around you and never you. z-index 4, with the corner strips, and under the three overlays that take the whole view for the same reason. */ /* The spells, laid out to the width the panel has, exactly as the squares are: auto-fill with a floor, so a narrow column puts four icons across and a wide one seven, and the rows follow. It was a rail down the left edge of the world for a few hours on 2026-09-22, with the icons in a wrapping column; back in a panel it is the ordinary rule, since a panel is a thing with a width and that is all this ever needed. The bag squares' floor, since 2026-10-09 ("reduce the size of the spell icons to match the inventory tile size"): a spell button is a square as a bag square is, its drawing and its cost fitted inside. It was 38, and 44 on a touch screen, with the button as tall as its contents, until then. */ /* The grid hangs on a class rather than on the body's own id, which is the trap the row of buttons in the Controls panel fell into first: the fold is a rule about .panelbody, one id outranks any number of classes, and a layout rule hung on a body's id goes on laying it out under a title that says the panel is shut. It looked for all the world like a click that had not registered. A test says so. */ /* The rows are --hit tall too (2026-10-17: "spell icons should not shrink to try to fit the panel"): a row left to size itself from a square button counted the button as only as tall as its drawing and cost, so down a side column too short for them all the rows squeezed to about 31 and the squares overlapped one another, rather than the panel scrolling. */ .spellgrid { display: grid; grid-template-columns: repeat(auto-fill, var(--hit)); grid-auto-rows: var(--hit); gap: 3px; } #console { height: 150px; flex: 0 0 auto; display: flex; flex-direction: column; background: var(--panel); border-top: 2px solid var(--panel-border); } /* The chat line: the box you type in, and at the end of it the button that opens what the console is showing. The button is last in the row and takes no more room than its word, so the box has everything else — a filter list is opened a few times a session and typed beside constantly, and the one that is used more gets the space. */ #chatrow { flex: 0 0 auto; display: flex; align-items: stretch; border-top: 1px solid var(--panel-border); /* Kept out of a phone's rounded corners in full screen: see --cornerx under the touch-screen rules. Nought everywhere else. */ padding-left: var(--cornerx, 0px); padding-right: var(--cornerx, 0px); padding-bottom: var(--cornery, 0px); background: var(--panel); } /* --chatpress tall, 38, its border aside. */ #chatrow { min-height: calc(var(--chatpress) + 1px); } /* Folded away on a phone until asked for (foldChat in main.ts): shrunk to nothing and clipped rather than display: none, so the chat box can still take the focus, and the focus arriving is what opens it. The log's foot keeps clear of a phone's corners in its place (under #logwrap). */ #chatrow.folded { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #chatrow #chat { flex: 1; min-width: 0; border-top: 0; } #filtersbtn { flex: 0 0 auto; font: inherit; font-size: 11px; cursor: pointer; padding: 0 10px; border: 0; border-left: 1px solid var(--panel-border); background: #1c1a14; color: var(--muted); } #filtersbtn:hover, #filtersbtn:focus-visible { background: #2a261d; color: var(--text); } /* A filter you have forgotten about looks exactly like a game that has stopped telling you things, which is why the strip these came from was always on show. A menu cannot do that, so the button says the count instead — "Filters (2)" — and wears the accent while any kind is off: the fact that something is being hidden stays outside the menu, and only which kinds it is has to be asked for. */ #filtersbtn.muting { color: var(--accent); } /* The two toggles on the chat line, Yell at its head and Types beside Filters: an icon each, on a button that stands out of the row while it is off and is pressed into it while it is on (2026-10-08: "it should look like a button that can be pressed in (toggled)"). Out is a light top edge and a dark bottom one; in is the same edges swapped, a shadow inside, and the accent on the icon. */ #chatrow .toggle { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: var(--chatpress); padding: 0; margin: 0; cursor: pointer; border: 1px solid; border-color: #5a5444 #14120d #14120d #5a5444; border-radius: 3px; background: linear-gradient(#2e2a20, #1f1c15); color: var(--muted); } #chatrow .toggle:hover, #chatrow .toggle:focus-visible { color: var(--text); } #chatrow .toggle[aria-pressed="true"] { border-color: #0e0d09 #4a4538 #4a4538 #0e0d09; background: #15130e; color: var(--accent); box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.7); } #chatrow .toggle[aria-pressed="true"] svg { transform: translateY(1px); } /* While yelling, the line is typed as it will be heard. The placeholder is left as it is written. */ #chat.yelling { text-transform: uppercase; } #chat.yelling::placeholder { text-transform: none; } #filtersmenuacts button { /* Each switch is named by the kind it hides, and is given that kind's own string to display rather than a label written out beside it, so the two can never drift. Capitalising is this stylesheet's business: the button reads as a word on a menu, and the same string at the head of a line reads as what the line is. */ text-transform: capitalize; } #filtersmenuacts button[aria-pressed="true"] { border-color: #6a6250; background: #332f24; } /* An off filter is legible but plainly off: dimmed and struck through, so a glance down the menu says what is missing from the log. */ #filtersmenuacts button[aria-pressed="false"] { color: #6d675c; text-decoration: line-through; } /* How many lines of the kind the log holds, hidden ones included (2026-10-07: "in the chat filters menu, show how many messages exist in each category, included those that were filtered"): at the far end of the switch, quiet beside the name, with figures of one width so a count ticking up while the menu is open does not shuffle. Floated rather than laid out by flex because a float is not struck through with the name: an off kind's count is still a plain fact, and the one reason to look. */ #filtersmenuacts button .count { float: right; margin-left: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } #filtersmenuacts button[aria-pressed="false"] .count { color: #6d675c; } /* The log's box, which it shares with the button back to its newest line (2026-10-07: "add a button to scroll the chat log to the very newest messages"). It takes the log's place in the console and the log fills it; it is a positioned box only so the button can stand in its corner. */ #logwrap { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; } /* With the chat line folded away (above), the log's foot is the console's and keeps clear of a phone's corners in full screen. */ #console:has(#chatrow.folded) #logwrap { padding-bottom: var(--cornery, 0px); } /* overflow-anchor: none because the log keeps the line you are reading in place itself (holdLogView in ui.ts), and does it in every browser. Left on, Chromium's own scroll anchoring would move the view for the oldest lines going off the top as well, and the two together move it twice. */ #log { flex: 1; min-height: 0; overflow-y: scroll; padding: 4px 8px; font-family: var(--monofont); font-size: 12px; white-space: pre-wrap; word-break: break-word; overflow-anchor: none; -webkit-touch-callout: none; } /* A held finger on a line of the log opens its menu, Copy message (2026-10-07, buildLogCopy in ui.ts), so on a touchscreen the log is not selectable: a hold would otherwise pick out a word and put the phone's own Copy bar over the menu. A mouse still selects lines as it always has, for Cmd+C. The line copied lights for a moment with a word in its corner, laid over the line so nothing in the log moves. */ @media (hover: none), (pointer: coarse) { #log { user-select: none; -webkit-user-select: none; } } #log > div { position: relative; } #log > div.copied { background: rgba(126, 215, 126, .16); } #log > div.copyfail { background: rgba(255, 102, 102, .16); } /* The line whose menu is up (see popmenu.ts), so it is plain which one the menu beside it is about. */ #log > div.menued { background: rgba(200, 164, 90, .16); } #log > div.copied::after, #log > div.copyfail::after { content: "Copied"; position: absolute; top: 0; right: 0; padding: 0 4px; border-radius: 2px; font-size: 11px; font-style: normal; font-weight: bold; background: #7ed77e; color: #1c1a14; pointer-events: none; } #log > div.copyfail::after { content: "Could not copy"; background: #f66; } /* Back to the newest line: a small square in the bottom right corner of the log, the size and colours of the marks over the world, shown only while the log is scrolled back. It stands clear of the scrollbar, whose width ui.ts puts in --logbar, since a scrollbar is as wide as the system says and on a phone it is no width at all. The count in its corner is how many lines have come in since you scrolled back, on its left so a button at the edge of a phone does not push it off the glass. */ #logend { position: absolute; right: calc(var(--logbar, 0px) + 6px); bottom: 6px; z-index: 1; width: var(--hit); height: var(--hit); padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(22, 20, 15, .85); color: var(--muted); border: 1px solid var(--panel-border); border-radius: 3px; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } #logend[hidden] { display: none; } /* The way into the chat line while it is folded away on a phone (2026-10-10: "Implement the visible chat button"): the same small square as the way back to the newest line, --chatpress like the buttons on the line it opens, in the log's top right corner (2026-10-17: "The button to start a chat should be on the top right of the message log"), clear of the way back down in the bottom one. Gold while a filter is off, as Filters is: Filters is folded away with the line, and a forgotten filter looks like a game that has stopped talking. */ #chatopen { position: absolute; right: calc(var(--logbar, 0px) + 6px); top: 6px; z-index: 1; width: var(--chatpress); height: var(--chatpress); padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(22, 20, 15, .85); color: var(--text); border: 1px solid var(--panel-border); border-radius: 3px; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } #chatopen[hidden] { display: none; } #chatopen svg { display: block; } #console:has(#filtersbtn.muting) #chatopen { color: var(--accent); border-color: var(--accent); } #console:has(#chatrow.folded) #logend { bottom: calc(6px + var(--cornery, 0px)); } #logend:hover, #logend:focus-visible { color: var(--accent); border-color: var(--accent); background: rgba(22, 20, 15, .95); } #logend svg { width: 16px; height: 16px; display: block; } #logend .count { position: absolute; top: -7px; left: -7px; min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box; border-radius: 7px; font-size: 11px; line-height: 14px; font-weight: bold; text-align: center; background: var(--accent); color: #1c1a14; } #logend .count[hidden] { display: none; } /* What kind each line is, shown only while the Types switch on the chat line is on. Every line carries its label whether or not it is being shown, so switching Types on names the log you already have rather than starting a new one. Each kind gets a colour of its own, unlike the lines themselves — a blow and a shopkeeper are both plain white to read, and the whole point of the label is to tell apart what looks alike. It is padded to the longest kind so the words after it line up in a column. */ #log .kind { display: none; } #log.types .kind { display: inline-block; width: 8ch; font-size: 11px; } #log .k-say { color: #f2d24a; } #log .k-private { color: #6cdcff; } #log .k-noise { color: #ff8c00; } #log .k-dealt { color: #ffb070; } #log .k-received { color: #ff8a8a; } #log .k-loot { color: #6ede6e; } #log .k-level { color: #c9a2ff; } #log .k-event { color: #6fb8e8; } #log .k-answer { color: #ffffff; } #log .k-server { color: #cfcfcf; } #log .k-blocked { color: #d9863c; } #log .k-spells { color: #b58cff; } #log .k-debug { color: #8fa3b5; } #log .k-error { color: #ff2d55; } #log .k-critical { color: #ff3b30; } /* The arrival time on every line: quiet, so the words stay the loudest thing on the line. */ #log .ts { color: #7a746a; font-size: 11px; } #log .say { color: #f0d060; } #log .server { color: #dcdcdc; } /* An answer to something you asked — a look, a bearing — is white in the log because it is white over your head: the same sentence arrives in two places at once and should read as one thing arriving, not two. */ #log .answer { color: #ffffff; } /* Blows land in the same plain white as anything else said to you: they are their own kinds so the filters can turn them off — what you deal and what you take, apart, since 2026-09-27 — not because they should look different while they are on. */ #log .dealt, #log .received { color: #dcdcdc; } /* World news — arrivals, departures, deaths, level-ups — reads apart from messages addressed to you. */ #log .event { color: #8fb8d8; font-style: italic; } #log .loot { color: #7ed77e; } #log .level { color: #ff8; font-weight: bold; } #log .error { color: #f66; } /* The damage sums, when they are asked for: quiet and monospaced, since they are arithmetic to be read rather than news to be told. */ #log .debug { color: #9aa8b4; font-family: var(--monofont); font-size: 11px; } /* The way between levels is blocked: a state of the world rather than a mistake of yours, so it gets its own colour between the two. */ #log .blocked { color: #f09a5a; } /* Noises — eating, a rat in the dark, whatever else gets a sound — in the creature-sound orange, apart from the yellow of words. Dark orange, asked for on 2026-09-21: "show the noises in dark orange". It was #ffae42, which is a light amber: beside the say yellow at #f0d060 it read as a second shade of the same thing rather than as a colour of its own, which is the whole job the colour has to do now that creatures sound off on their own. #ff8c00 is CSS `darkorange` exactly, and the value was picked by measuring rather than by eye. Against the console's own background — --panel, #2b2722 — the amber stood at 8.0:1 and this stands at 6.4:1; two darker oranges were held against it and both were worse buys, #e07000 at 4.6:1, which is on the 4.5:1 floor for text somebody is expected to read, and #cc6600 at 3.9:1, which is under it. So: plainly darker and plainly more orange than what it replaces, with half again the contrast the standard asks for still in hand. The kind label above wears the same value rather than a shade near it. The label and the line are the one channel named twice, and two oranges a hair apart is a difference a reader has to work out is not meaningful. */ #log .noise { color: #ff8c00; } /* The server telling everybody it is going down: red, bold, and never filtered (see UNFILTERED in ui.ts). The same red is drawn over the player's own head, so the line reads as one thing arriving twice. */ #log .critical { color: #ff3b30; font-weight: bold; } #log .own { color: #ffe9a0; } /* Private messages (/tell) in light blue, as Tibia has them, and your own half paler, as your own says are. */ #log .private { color: #6cdcff; } #log .private.own { color: #b8ecff; } /* The words of a spell going off, anybody's: SPELL_COLOR in game.ts, the colour they are drawn in over the caster's head too. */ #log .spells.spell { color: #c9a7ff; } #chat { border: 0; background: #16140f; color: var(--text); padding: 6px 8px; font: inherit; outline: none; } #chat:focus { background: #221f18; } /* The console's other edge: the strip you drag to say how much of the screen is log and how much is world. It is the top of the console rather than the bottom for the plain reason that the bottom is the bottom of the window — the boundary worth moving is the one between the view and the log, and that is this one. CSS `resize: vertical` was the cheap answer and it grips the wrong corner. It has to look like something that can be taken hold of, so it wears a short bar across the middle of it and an ns-resize cursor, and the bar takes the accent under the pointer and while it is being dragged — the same gold the panel titles' hand answers to. A keyboard gets the focus ring, drawn inside the strip since the strip is only a few pixels tall and an outline hung outside it would be drawn over the world. touch-action: none is what makes a finger work here, and it is why the drag needs no long press the way a panel's does. The column of panels scrolls under a thumb, so a touch there is ambiguous from its first pixel and the hold is how the ambiguity is settled; this strip scrolls nothing and nothing else wants a vertical drag on it, so there is nothing to settle and the press can mean the drag at once. What the browser would otherwise do with the gesture — pan the page, or bounce it — is what this line refuses. And a finger is wider than a hairline, so a coarse pointer gets twice the strip to aim at. The bar drawn across it stays the same size: what grew is the target, not the furniture. */ #loggrip { flex: 0 0 auto; height: 8px; display: flex; align-items: center; justify-content: center; background: #221f18; cursor: ns-resize; touch-action: none; } #loggrip::after { content: ""; width: 34px; height: 2px; border-radius: 1px; background: var(--panel-border); } #loggrip:hover::after, #loggrip.dragging::after { background: var(--accent); } #loggrip:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* What a screen with no pointer gets. A finger is wider than a hairline and there is no hover on it to find anything with, so a target it has to hit is bigger and a control it has to notice is brighter — and both cost a piece of the world, which is why they are here and not at every width. The marks in the corners of the view sit where a thumb rests while the other hand walks, and a pointer-sized square there is a mis-tap on the ground behind it; the spells down the left edge are the same argument with twelve targets instead of five. There is one of these blocks in this stylesheet and everything about a touchscreen belongs in it. It is kept whole rather than split per control because these are all the same decision about the same kind of screen, and each one of them is a piece of somebody's world given up: they are easier to weigh against each other in one place than in six, and a second block written above this one would be read as the whole of what a phone gets. */ @media (pointer: coarse) { #loggrip { height: 16px; } /* And the info panel's right edge, a column's grip on a phone held sideways, gets the same: at 10px a thumb missed it (2026-10-13: "Make the drawer resizable"). The narrow rules lay it across instead. */ #drawergrip { width: 16px; margin-left: -8px; } /* The way back to the newest line, finger-sized, like the marks over the world. */ #logend { color: var(--text); } #logend svg { width: 20px; height: 20px; } /* The rounded corners of a phone's glass (2026-10-04: "In full screen portrait mode on mobile, the bottom of the interface is being pressed into the rounded corners of the screen, in this case the chat input field and filters button"). The safe-area insets the body pads by are the notch and the system bars; no phone reports its corners as one, and in full screen the gesture bar goes, so the bottom inset falls to nothing and the chat line's two ends sat in the curve. In full screen on a touch screen the chat line comes in from both sides and up from the bottom by what a phone's corner takes at that height: about eighteen pixels in from the side a dozen up, for corners of the forty-odd pixel radius phones have. What the body already pads at the bottom counts towards the dozen. */ html:fullscreen { --cornerx: 18px; --cornery: max(0px, calc(12px - env(safe-area-inset-bottom, 0px))); } #viewtools button, #viewtoolsleft button, #grounddock button { color: var(--text); } #statusicons .statusicon { --disc: 30px; } #statusicons .statusicon svg { width: 16px; height: 16px; } #viewtools svg, #grounddock svg { width: 20px; height: 20px; } #viewtools #floorchip svg { width: 16px; height: 16px; } #viewtools #floorlabel { font-size: 14px; } #moremenu button { padding: 10px 14px 10px 10px; font-size: 15px; } #popmenu button { padding: 10px 14px 10px 10px; font-size: 15px; } #grounddock .count { font-size: 14px; } /* A name on the Players panel is a press for the player menu, and a twelve-pixel line of text is a mis-tap on the name above it. */ #players .prow { padding: 5px 3px; } } /* The log keeps its scrollbar gutter whether or not there is anything to scroll to, so its width is one width (Ben, 2026-09-19: "always show the scrollbar on the panels, to avoid having it appear and disappear when things resize"). The panel areas it was also written for went on 2026-10-01. */ /* The panels' icons. Wider than the narrow breakpoint they float over the bottom of the world, the left panels' icons in its bottom left corner and the right panels' in its bottom right (2026-10-01: "on wider screens, the panels stack horizontally from the left or right, with the icons along the bottom (justified left or right depending on whether panels will show on that side)", and then "float the panelbar icons over the map": they were a strip between the world and the log until then). The bar takes no presses, only its icons do, so the world between the two groups is still the world. On a narrow screen there is no bar: an open panel's icon stands beside the panel, and the shut ones go up the right edge of the world from its bottom (#panelfloat). An icon is lit while its panel is open. */ #panelbar { position: absolute; z-index: 4; left: 6px; right: 6px; bottom: 6px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; pointer-events: none; } #panelbarleft, #panelbarright { display: flex; align-items: center; gap: 4px; min-height: var(--hit); } /* The right side's icons read from the right edge, as its panels do. */ #panelbarright { flex-direction: row-reverse; } .panelicon { pointer-events: auto; } /* Each icon is an inventory square (2026-10-07: "Fix the panel icons to be 32x32 like the inventory tiles"): a box of --hit, border and all, as the bag's and the equipment's squares are, with a thirty-two pixel drawing in it, the size of the pictures in theirs. The box was thirty-eight until 2026-10-10, when every press went to 44. It was a thirty-two pixel box round a twenty pixel drawing ("make panel icons 32x32 like other buttons", the same day), which read as smaller than the squares it stands beside. It is that size at every width and under a finger as under a mouse. The drawing is the sixteen-pixel box drawn at twice its size, so it stays sharp. What stands beside or over the icons allows for the size: the ground at your feet steps up and in by it (#grounddock above and in the narrow rules), a panel under the world keeps a gutter of it at its right for its icon, and a panel beside the world leaves room for it under its contents. */ .panelicon { flex: none; width: var(--hit); height: var(--hit); padding: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: rgba(22, 20, 15, .72); color: var(--muted); border: 1px solid var(--panel-border); border-radius: 3px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; position: relative; } .panelicon[hidden] { display: none; } .panelicon:hover, .panelicon:focus-visible { color: var(--text); border-color: var(--accent); } .panelicon.on { color: var(--accent); border-color: var(--accent); background: #221f18; box-shadow: inset 0 -2px 0 var(--accent); } .panelicon.dragging { opacity: .6; outline: 1px dashed var(--accent); cursor: grabbing; } .panelicon svg { width: var(--hitart); height: var(--hitart); display: block; } /* An icon calling for attention (2026-10-08: "don't automatically open the depot when standing next to it. show the panelicon for it with an urgent appearance of some kind so it's obvious"): the Depot's, from arriving beside a box until its panel is opened or you step away (see urgenticon.ts). The drawing and border go to the accent, a ring of it pulses out round the square, and a dot sits in its top corner, so it reads at thirty-eight pixels over the world, in the bar and up the edge of a phone's. The ring is a shadow and the dot is inside the square's own corner, so neither takes room or is cut off at the edge of the world. Whoever asks for less motion gets the ring held still instead. The things within reach (#grounddock) glow and pulse the same but have no dot (2026-10-20: "Remove it for the ground icons"): they come several in a row, where a dot on each adds nothing. */ .panelicon.urgent, #grounddock button.urgent { color: var(--accent); border-color: var(--accent); background: rgba(58, 46, 22, .9); animation: panelurgent 1.2s ease-in-out infinite; } .panelicon.urgent::after { content: ""; position: absolute; top: 2px; right: 2px; padding: 4px; border-radius: 50%; background: #f0c060; box-shadow: 0 0 0 1px #16140f; pointer-events: none; } @keyframes panelurgent { 0%, 100% { box-shadow: 0 0 0 1px var(--accent), 0 0 4px 1px rgba(200, 164, 90, .5); } 50% { box-shadow: 0 0 0 3px var(--accent), 0 0 12px 4px rgba(240, 192, 96, .75); } } @media (prefers-reduced-motion: reduce) { .panelicon.urgent, #grounddock button.urgent { animation: none; box-shadow: 0 0 0 2px var(--accent), 0 0 8px 2px rgba(240, 192, 96, .6); } } /* How heavy the bag is, on the bag's icon (2026-10-07: "Can we show the inventory encumbrance "fill" on the icon and show more detail by hovering?", and "don't show the numbers in the panel anymore"). A wash rising from the icon's foot as far up it as the bag is full, --fill from 0 to 1, set by main.ts (paintBagLoad) with data-load. It is behind the drawing — the drawing is positioned too and comes after it, with a dark rim so it stands off an amber wash in the amber of a lit icon — and translucent, so the bag reads through it lit or not, and its top edge is a brighter line so the level reads at a glance. Muted while there is room; amber from four fifths of the way (bagweight.ts, HEAVY_AT); and past the line red, hatched, full to the top and the border red with it, so over is told by more than a colour. On a lit icon it stands on the accent's underline rather than over it. Placed by its edges, with no size of its own, so nothing here sizes the icon. */ .bagfill { position: absolute; left: 0; right: 0; bottom: 0; top: calc((1 - var(--fill, 0)) * 100%); border-radius: 0 0 2px 2px; pointer-events: none; background: rgba(143, 134, 119, .28); box-shadow: inset 0 1px 0 rgba(216, 208, 192, .45); } .bagfill + svg { position: relative; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .85)); } .panelicon.on > .bagfill { bottom: 2px; top: calc((1 - var(--fill, 0)) * (100% - 2px)); } .panelicon[data-load="heavy"] > .bagfill { background: rgba(224, 160, 48, .34); box-shadow: inset 0 1px 0 #e0a030; } .panelicon[data-load="over"] > .bagfill { background: repeating-linear-gradient(135deg, rgba(210, 60, 44, .55) 0 4px, rgba(210, 60, 44, .3) 4px 8px); box-shadow: none; } .panelicon[data-load="over"], .panelicon[data-load="over"]:hover { border-color: #d23c2c; } #panelfloat { display: none; } /* The row the world stands in, with the panels that push it in beside it or under it (2026-10-01): see #worldrow in index.html. Wider than the narrow breakpoint it is a grid of three columns and two rows: the left panels' row down its whole height, the world with its bars over the log in the middle, and the right panels' row down its whole height, so the log is tiled under the world and as wide as it, and the panels run beside both (2026-10-07: "the message log tile under the main window always", and of the two ways shown, "tile the chat log under the main window only per option A"). It ran across the bottom of the world and both panel rows until then. main.ts (placeLog) puts the log in this row; on a narrow screen it is under the shelf, outside the row. Each side's column is as wide as the panels open in it (2026-10-17: "the size of the panels should be fixed since they always scroll. so we should be able to automatically fit the panelcol/panelshelf"): each panel is one column that scrolls down, so it is the same width however full it is, and only a panel opening or shutting moves the world's edge. From 2026-10-08 ("make a fixed space for panels and scroll within it to prevent the map jarring when you move away from for example a vendor or depot") until then it was a width the player dragged, and what did not fit scrolled sideways: back then a full bag grew a second column. A side is never more than 45% of the row, 45cqw since the row is the container its units are a share of, and scrolls sideways past that. A side with nothing open in it has no box (.panelcol:not(.hasopen)), so its column takes nothing. */ #worldrow { flex: 1 1 0; min-height: 0; display: grid; position: relative; container-type: inline-size; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; } #panelcolleft { grid-column: 1; grid-row: 1 / 3; } #worldmid { grid-column: 2; grid-row: 1; } #panelcolright { grid-column: 3; grid-row: 1 / 3; } #console { grid-column: 2; grid-row: 2; } #worldmid { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; } /* The shelf: the open panels stacked under the world on a narrow screen (below); wider than that they stand in the side rows instead and it is empty. */ #panelshelf { display: none; } /* No padding (2026-10-09: "remove the padding for every panel, maybe combine the separation"): the contents run to the panel's border, and what stands between two panels is the one gap of the column, shelf or drawer they are in. It was 6px inside every panel as well as the 6px between them, so two panels' contents were three gaps apart. */ .panel { background: #201d19; border: 1px solid var(--panel-border); padding: 0; border-radius: 3px; /* Never wider than the share it is given. A flex item's default min-width is auto, which is its content's minimum — so on a phone, where the panels are a wrapping row of 45% each, one long line inside a panel used to push it out to the full column and drop the panel beside it onto the next row. That is what three statuses did to the stats panel (Ben, 2026-09-19: "The stats panel seems to taking the whole column while the extra statuses are present ... force the status row to never increase the width of the panel"). With this, the width is the layout's to decide and the content's to wrap into. */ min-width: 0; } /* The side rows the open panels stand in, wider than the narrow breakpoint: the left panels side by side from the left edge, the right ones from the right edge, each pushing the world in (2026-10-01: "on wider screens, the panels stack horizontally from the left or right"). A row with nothing open in it takes no room. A row is the full height of the world and the log under it together, and as wide as its panels up to 45% of the row (see #worldrow): past that the panels that do not fit across it are scrolled to, sideways, by its scrollbar or the mouse wheel (main.ts). */ .panelcol { flex: none; display: flex; flex-direction: row; align-items: flex-start; gap: 6px; padding: 6px; overflow-x: auto; overflow-y: hidden; box-sizing: border-box; scrollbar-width: thin; background: var(--panel); } #panelcolleft { order: -1; border-right: 2px solid var(--panel-border); width: max-content; max-width: 45cqw; } #panelcolright { order: 1; flex-direction: row-reverse; border-left: 2px solid var(--panel-border); width: max-content; max-width: 45cqw; } .panelcol:not(.hasopen) { display: none; } /* Each panel in a side row lays its contents down one column and is only as wide as that column (2026-10-01: "When the panels are on the left or right, align the contents vertically to minimise horizontal size"): a side row takes its width from the world. The squares go one under another, as do the spells' palette and the Controls' buttons, each button its drawing then its word. An empty bag or an empty spell list takes the width of its note rather than setting it one word to a line. What does not fit down the row's height scrolls inside the panel, each panel on its own (2026-10-17: "Make each panel scrollable"). Until then a panel never scrolled (2026-10-01: "instead of scrolling panels, wrap onto a new column or row, depending on the orientation"): what did not fit went on in a new column beside it, which made a full bag on a short window as wide as several panels. The gutter for the scrollbar is kept whether or not it is needed, so a panel does not widen, and push its neighbours along, the moment one more thing makes it scroll. */ .panelcol > .panel { flex: none; width: max-content; max-height: 100%; overflow: hidden; box-sizing: border-box; } .panelcol #inv, .panelcol #depot, .panelcol #vendor, .panelcol #equip, .panelcol #spellsbody, .panelcol #buttonsbody { display: grid; grid-auto-flow: row; grid-template-columns: max-content; } /* The spells by their body's id, as the bag's are, since 2026-10-05 ("Raise the minimum width for spell buttons"): the rule above names #spellsbody, and an id outranks a class, so a .spellgrid here was overruled and the spells stood as narrow as their drawings, 26px beside the bag's 38. */ .panelcol #inv, .panelcol #depot, .panelcol #vendor, .panelcol #equip, .panelcol #spellsbody { grid-template-columns: var(--hit); } .panelcol #inv:has(> .none) { grid-template-columns: max-content; } /* Beside the world the empty spell list's one line runs down the panel rather than across it, so the panel is a square wide as it is with spells in it (2026-10-17: "my comment about 1 line for the spells was assuming the panel was horizontal. for vertical panel (landscape screen), something else should be done"): across, it made the panel three hundred pixels wide; before that it was a box four lines tall. */ .panelcol #spellsbody .none { writing-mode: vertical-rl; justify-self: center; padding: 6px 4px; } /* Its row is as tall as the line, not the --hit of a row of spells. */ .panelcol #spellsbody:has(> .none) { grid-auto-rows: auto; } .panelcol #buttonsbody button { flex: none; justify-content: flex-start; } .panelcol > .panel:not(.open) { display: none; } /* An open panel in a side row wears its icon, as one under the world wears it beside it (2026-10-01: "the icons should be inline with their contents in the wide view just like for the narrow view"), at its foot: the panel stands the full height of its row, its contents run down from its top, and the icon is at its foot (2026-10-07: "When I said shown them at the bottom in horizontal screen, I meant at the bottom of the panel, vertically aligning the contents of the panel from top to bottom"). It was floated into the top left corner, over the contents, until then. So every open panel's icon is along the bottom of the screen, at the foot of its own panel. The gap keeps the icon at least four pixels under the contents when they reach down that far, and the contents scroll above it rather than pushing it off the bottom. */ .panelcol > .panel.open:not([hidden]) { align-self: stretch; display: flex; flex-direction: column; gap: 4px; } .panelcol > .panel > .panelbody { flex: 0 1 auto; min-height: 0; } /* Every panel scrolls what it cannot show (2026-10-17: "Make each panel scrollable"): down the side, along its row in the shelf under the world on a narrow screen (the narrow rules), and in the info drawer. The body scrolls and nothing else, so a panel's title and its icon stay where they are, and the wheel or a finger at the end of one panel's list does not run on into the shelf, the drawer or the page behind it. */ .panelcol > .panel > .panelbody, #panelshelf > .panel > .panelbody, #drawer .panel > .panelbody { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; } .panelcol > .panel > .panelicon { margin-top: auto; } /* The icon stands in the middle of its panel's width (2026-10-17: "center the panel icon in the panel when there's a scrollbar"). The body keeps a gutter for its scrollbar at its right, so an icon at the panel's left edge sat off to one side of a bag or equipment column no wider than it, by the width of the scrollbar. */ .panelcol > .panel > .panelicon { align-self: center; } /* The title is a row: the toggle at the left, and whatever else a panel keeps on its title — the map's arrows and its zoom — packed against the right. The toggle's auto margin is the rule that does the packing: it takes all the free space, so the rest sit at the far end in the order they are written. Nothing on the row shrinks: the map's controls on a phone-width panel used to fold their own buttons over each other to fit, so an item that does not fit goes whole onto a second line, and the row's flex-end puts that line at the right too. Nothing on a title is a caption any more; what a panel has to explain is in its help dialog, opened from the main help since the question mark in the title's corner went on 2026-10-10. The row is also what a panel is dragged by (main.ts), so it shows a hand. `touch-action: pan-y` rather than `none`: a finger that lands here is far more often scrolling the column than moving a panel, so the browser keeps the vertical pan and a drag is only taken after a long press, which main.ts then holds by cancelling the touch's moves. No text is selectable on it, since a mouse drag across it would otherwise be selecting the name as it went. */ .panel .title { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 3px; font-weight: bold; color: var(--accent); margin-bottom: 4px; user-select: none; -webkit-user-select: none; } .panel .title > * { flex: none; } .panel .title > .paneltoggle { margin-right: auto; } /* The title is also the switch that folds the panel away. It is a real