:root { --page: #0d0d11; --surface: #16161c; --surface-2: #1d1d25; --line: #2a2a33; --ink: #ececf1; --ink-2: #c3c2b7; --muted: #8b8b98; --accent: #8ea2ff; --accent-2: #6da7ec; --gold: #e8c170; --good: #0ca30c; --warn: #fab219; --common: #c3c2b7; --uncommon: #5fcf7f; --rare: #6da7ec; --epic: #b596ff; --legendary: #f2a33a; --mono: "JetBrains Mono", "JetBrainsMono Nerd Font", ui-monospace, SFMono-Regular, Menlo, monospace; color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; background: var(--page); color: var(--ink); font: 15px/1.5 var(--mono); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0 0 .6rem; font-weight: 600; letter-spacing: .01em; } h1 { font-size: 1.6rem; } h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); } h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-top: 1.2rem; } code, pre { font-family: var(--mono); } pre { background: var(--page); border: 1px solid var(--line); border-radius: 8px; padding: .8rem; overflow-x: auto; font-size: .78rem; color: var(--ink-2); } .muted { color: var(--muted); } .small { font-size: .8rem; } /* ---- Header and menu (base.html; 21oct2026.md A1) ---- Brand row: logo, the (?) and bell icons (gold circles; the name is the aria-label, the popup is CSS on hover and keyboard focus, never a title), the tagline beside the logo, or its own line at <= 800px. Menu: Map ... Log out, then the dashed admin box (samples pill + Admin) at the far right. */ .top { display: flex; align-items: center; gap: .6rem 1rem; padding: .9rem 1.2rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .brandrow { display: flex; align-items: center; gap: .3rem .5rem; flex-wrap: wrap; min-width: 0; } .brand { font-weight: 700; color: var(--ink); font-size: 1.05rem; white-space: nowrap; } .hicon { position: relative; display: inline-grid; place-items: center; flex: none; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--gold); color: var(--page); font-size: .75rem; font-weight: 700; line-height: 1; } .hicon:hover { text-decoration: none; box-shadow: 0 0 0 2px rgba(232,193,112,.35); } .hicon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .hicon svg { width: .78rem; height: .78rem; display: block; } .hicon .pop { position: absolute; top: calc(100% + .45rem); left: 50%; transform: translateX(-50%); z-index: 30; padding: .2rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--ink); font-size: .72rem; font-weight: 400; line-height: 1.4; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s, visibility .12s; } @media (hover: hover) { .hicon:hover .pop { opacity: 1; visibility: visible; } } /* touch: a tap just opens the page */ .hicon:focus-visible .pop { opacity: 1; visibility: visible; } .hicon .newdot { position: absolute; top: -.15rem; right: -.2rem; width: .5rem; height: .5rem; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 2px var(--page); } .tagline { margin-left: .35rem; color: var(--muted); font-size: .68rem; line-height: 1.3; } .tagline > span { display: block; white-space: nowrap; } @media (max-width: 800px) { .brandrow { flex-basis: 100%; } /* One line when it fits; else it breaks between the two sentences, and balanced inside one that must wrap, so no word ("too.") is ever alone on a line. */ .tagline { flex-basis: 100%; margin-left: 0; text-wrap: balance; } .tagline > span { display: inline-block; white-space: normal; } } @media (prefers-reduced-motion: reduce) { .hicon .pop { transition: none; } } .top nav { display: flex; gap: .7rem 1rem; align-items: center; margin-left: auto; flex-wrap: wrap; font-size: .85rem; } .top nav a { color: var(--ink-2); } .top nav a.btn { color: #0d0d11; } .top nav .me { color: var(--gold); } .top form { margin: 0; } .adminzone { position: relative; display: inline-flex; align-items: center; gap: .6rem; border: 1px dashed var(--legendary); border-radius: 6px; padding: .3rem .7rem; margin-left: .2rem; white-space: nowrap; } .adminzone small { position: absolute; top: -.6rem; left: .4rem; background: var(--page); padding: 0 .25rem; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--legendary); line-height: 1.2; white-space: nowrap; } .top nav .adminzone a { color: var(--legendary); } /* ---- end header and menu ---- */ main { max-width: 1120px; margin: 0 auto; padding: 1.2rem 16px 3rem; } footer { text-align: center; color: var(--muted); font-size: .75rem; padding: 2rem 16px; border-top: 1px solid var(--line); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; } .card.narrow { max-width: 420px; margin: 2rem auto; } .cardhead { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; } .cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; align-items: start; } .cols.even { grid-template-columns: 1fr 1fr; } @media (max-width: 800px) { .cols, .cols.even { grid-template-columns: 1fr; } } label { display: block; margin-bottom: .8rem; font-size: .8rem; color: var(--ink-2); } input, select { display: block; width: 100%; margin-top: .3rem; padding: .55rem .7rem; background: var(--page); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font: inherit; } input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .btn { display: inline-block; background: var(--accent); color: #0d0d11; border: 0; border-radius: 8px; padding: .55rem 1rem; font: inherit; font-weight: 600; cursor: pointer; } .btn:hover { filter: brightness(1.1); text-decoration: none; } .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } .btn.small { padding: .35rem .7rem; font-size: .8rem; } .btn em { font-style: normal; opacity: .7; font-weight: 400; margin-left: .3rem; } button.link { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 0; } .flash { background: var(--surface-2); border-left: 3px solid var(--accent); padding: .6rem .9rem; border-radius: 6px; margin-bottom: 1rem; } .ok { color: var(--good); } .warn { color: var(--warn); } /* landing */ .hero-land { padding: 3rem 0 2rem; max-width: 720px; } .hero-land h1 { font-size: 2.3rem; line-height: 1.2; } .lede { color: var(--ink-2); font-size: 1rem; } .eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .15em; font-size: .72rem; } .zones { list-style: none; padding: 0; margin: 0 0 1rem; } .zones li { display: flex; justify-content: space-between; padding: .45rem 0; border-bottom: 1px dashed var(--line); gap: 1rem; } .zname { color: var(--ink); } /* hero card */ .herocard { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; } .avatar { position: relative; width: 104px; height: 104px; flex: none; } .avatar img, .avatar span { width: 104px; height: 104px; border-radius: 16px; object-fit: cover; display: grid; place-items: center; background: linear-gradient(135deg, #25254a, #184f95); font-size: 2.6rem; font-weight: 700; border: 2px solid var(--gold); } .avatar .lvl { position: absolute; bottom: -8px; right: -8px; background: var(--gold); color: #0d0d11; border-radius: 999px; min-width: 34px; height: 34px; display: grid; place-items: center; font-size: .95rem; border: 3px solid var(--surface); } .who { flex: 1; min-width: 240px; } .who h1 { margin-bottom: .1rem; } .title { color: var(--gold); margin: 0 0 .6rem; } .xp { height: 10px; background: var(--page); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; } .xp i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; } .chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; } .chips span { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; font-size: .75rem; color: var(--ink-2); } .chips .rested { color: var(--accent); } .actions form { margin: 0; } .tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 1rem; } @media (max-width: 800px) { .tiles { grid-template-columns: repeat(2, 1fr); } } .tiles div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; } .tiles b { display: block; font-size: 1.5rem; font-weight: 600; } .tiles span { color: var(--muted); font-size: .75rem; } /* charts */ .chart { width: 100%; height: auto; display: block; } .chart .ax { fill: var(--muted); font: 10px var(--mono); } .chart .goal { fill: var(--ink-2); font: 10px var(--mono); } .chart .met { fill: var(--gold); font: 9px var(--mono); } .chart [data-tip]:hover { stroke: var(--ink); stroke-width: 1; } .chart.bars [data-tip]:hover { fill: rgba(255,255,255,.04); stroke: none; } .scrollx { overflow-x: auto; } .activity { min-width: 760px; } .chart .num { fill: #0d0d11; font: 700 8px var(--mono); pointer-events: none; } .legend .dot { border-radius: 50%; margin-left: .5rem; } .legend { font-size: .72rem; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; } .legend i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; } #tip { position: fixed; pointer-events: none; background: #000; color: var(--ink); border: 1px solid var(--line); padding: .3rem .55rem; border-radius: 6px; font-size: .75rem; z-index: 10; white-space: nowrap; } /* quest log */ .day { border-left: 2px solid var(--line); padding: 0 0 .8rem .9rem; margin-left: .3rem; position: relative; } .day::before { content: ""; position: absolute; left: -6px; top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); } .dayhead { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; font-size: .85rem; } .day ul { list-style: none; padding: 0; margin: .3rem 0 0; font-size: .82rem; color: var(--ink-2); } .day li { padding: .1rem 0; } .day li.fight::before { content: "⚔ "; color: var(--muted); } .day li.rest::before, .day li.bonus::before { content: "☾ "; color: var(--accent); } .day li.horde::before { content: "⚔ "; color: var(--muted); } .day li.cross { color: var(--ink); } .day li.cross::before { content: "⟡ "; color: var(--gold); } .day li.level { color: var(--gold); } .day li.level::before { content: "▲ "; } .day li.boss { color: var(--legendary); font-weight: 600; } .day li.boss::before { content: "☠ "; } .loot em { font-style: normal; font-size: .75rem; } .loot.common b { color: var(--common); } .loot.uncommon b { color: var(--uncommon); } .loot.rare b { color: var(--rare); } .loot.epic b { color: var(--epic); } .loot.legendary b { color: var(--legendary); } .day li.loot::before { content: "✦ "; color: var(--gold); } .lootlist { list-style: none; padding: 0; margin: 0; font-size: .82rem; } .lootlist li { display: flex; justify-content: space-between; padding: .25rem 0; border-bottom: 1px dashed var(--line); } .lootlist em { color: var(--muted); } .crossroads { border-color: var(--gold); } .fork p { margin: .2rem 0 .5rem; } .fork form { display: flex; gap: .5rem; flex-wrap: wrap; } .hbar { display: grid; grid-template-columns: 7.5rem 1fr 3.6rem; gap: .6rem; align-items: center; font-size: .8rem; margin-bottom: .35rem; } .hbar span { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; color: var(--ink-2); } .hbar i { height: 6px; background: var(--page); border-radius: 999px; overflow: hidden; } .hbar i b { display: block; height: 100%; background: var(--accent-2); border-radius: 999px; } .hbar em { font-style: normal; color: var(--ink); text-align: right; white-space: nowrap; } .badge { font-size: .65rem; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); padding: .05rem .4rem; border-radius: 999px; letter-spacing: .05em; margin-left: .3rem; } .row { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); flex-wrap: wrap; } .grow { flex: 1; } .inline { display: inline; margin: 0; } .inline-form { display: flex; gap: .5rem; } .inline-form input { margin: 0; } .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-size: .8rem; } .seg a { padding: .35rem .7rem; color: var(--ink-2); } .seg a.on { background: var(--surface-2); color: var(--ink); } .board { width: 100%; border-collapse: collapse; font-size: .88rem; } .board th { text-align: left; color: var(--muted); font-weight: 400; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; padding: .5rem; border-bottom: 1px solid var(--line); } .board td { padding: .55rem .5rem; border-bottom: 1px dashed var(--line); } .board .r { text-align: right; } .board tr.mine td { background: var(--surface-2); } /* settings: one compact column */ .settings { max-width: 860px; margin: 0 auto; } .settings .card { padding: 1rem 1.2rem; } .settings h3 { margin: 1rem 0 .4rem; } .settings pre { margin: 0; font-size: .74rem; } .settings p { margin: .3rem 0 .6rem; } .tiny { font-size: .7rem; } .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem .9rem; align-items: end; } .fields label { margin: 0; } .fields .end { display: flex; align-items: center; gap: .9rem; } .profrow { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; } @media (max-width: 640px) { .profrow { grid-template-columns: 1fr; } } .portrait { display: flex; flex-direction: column; align-items: center; gap: .35rem; } .avatar.sm, .avatar.sm img, .avatar.sm span { width: 72px; height: 72px; font-size: 1.8rem; border-radius: 12px; } .filepick { margin: 0; font-size: .75rem; color: var(--accent); cursor: pointer; } .filepick input { display: none; } .settings h3 span { text-transform: none; letter-spacing: 0; } .settings pre { white-space: pre-wrap; overflow-wrap: anywhere; } .copywrap { position: relative; } .copywrap pre { padding-right: 5.5rem; } .copybtn { position: absolute; top: .45rem; right: .45rem; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; padding: .2rem .6rem; font: .72rem var(--mono); cursor: pointer; } .copybtn:hover { color: var(--ink); border-color: var(--accent); } .copybtn.done { color: var(--good); border-color: var(--good); } .manual { margin: .3rem 0 .8rem; } .manual summary { cursor: pointer; } .manual pre { margin-top: .4rem; } .addhint { margin: .7rem 0 0; } .machines { width: 100%; min-width: 600px; border-collapse: collapse; font-size: .82rem; margin-top: .4rem; } .machines th { text-align: left; font-weight: 400; color: var(--muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; padding: .4rem .35rem; border-bottom: 1px solid var(--line); white-space: nowrap; } .machines td { padding: .4rem .35rem; border-bottom: 1px dashed var(--line); white-space: nowrap; } .machines .r { text-align: right; } .machines tfoot td { border-bottom: 0; border-top: 1px solid var(--line); color: var(--ink-2); } .rename { position: relative; display: inline-flex; align-items: center; margin: 0; } .rename input { margin: 0; width: auto; min-width: 8.5rem; max-width: 24rem; padding: .2rem .35rem; background: transparent; border: 1px solid transparent; border-radius: 5px; color: var(--ink); font-weight: 600; } .rename input:hover { border-color: var(--line); } .rename input:focus { background: var(--page); border-color: var(--accent); outline: none; } .rename .pen { color: var(--muted); font-size: .75rem; margin-left: .15rem; pointer-events: none; } .rename input:focus + .pen { visibility: hidden; } .sharebar { display: inline-block; width: 28px; height: 5px; background: var(--page); border-radius: 999px; overflow: hidden; vertical-align: middle; margin-right: .3rem; } .sharebar i { display: block; height: 100%; background: var(--accent-2); } .linkbtn { background: none; border: 0; color: var(--muted); font: inherit; font-size: .78rem; cursor: pointer; padding: 0; } .linkbtn:hover { color: #e66767; text-decoration: underline; } .planbadge { display: inline-block; margin-left: .5rem; padding: .08rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 600; letter-spacing: .03em; vertical-align: middle; border: 1px solid; } .planbadge.sm { margin-left: .3rem; font-size: .62rem; padding: 0 .4rem; } .plan-pro { color: #d7dae0; border-color: #8b8b98; background: rgba(215,218,224,.08); } .plan-team { color: #6da7ec; border-color: #3987e5; background: rgba(109,167,236,.1); } .plan-max { color: var(--gold); border-color: #b8913f; background: rgba(232,193,112,.1); } .plan-max20 { color: #c9b4ff; border-color: #8f6be8; background: linear-gradient(90deg, rgba(143,107,232,.18), rgba(232,193,112,.12)); } .plan-ent { color: #5fcf7f; border-color: #2f9c52; background: rgba(95,207,127,.1); } /* ---- Machines (2026-10-21 plan, A3): the 🖥 n count beside the plan badge (templates/_machines.html). ---- */ .machcount { display: inline-block; margin-left: .5rem; padding: .08rem .5rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font-size: .7rem; font-weight: 600; vertical-align: middle; white-space: nowrap; cursor: help; } .machcount.sm { margin-left: .3rem; font-size: .62rem; padding: 0 .4rem; } /* ---- end Machines ---- */ label.check { display: flex; align-items: center; gap: .45rem; margin: 0; } label.check input { width: auto; margin: 0; } .fields .wide { grid-column: 1 / -1; } /* settings: collapsible sections (Profile open, the rest closed) */ details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; } details.fold > summary::-webkit-details-marker { display: none; } details.fold > summary::before { content: "▸"; color: var(--muted); display: inline-block; transition: transform .15s; } details.fold[open] > summary::before { transform: rotate(90deg); } details.fold > summary h2 { margin: 0; } details.fold > summary .cardhead { flex: 1; margin: 0; } details.fold > summary:hover h2 { color: var(--ink-2); } details.fold[open] > summary { margin-bottom: .9rem; } details.fold:not([open]) { padding-top: .85rem; padding-bottom: .85rem; } .btn:disabled { opacity: .45; cursor: not-allowed; filter: none; } .invited { background: rgba(232,193,112,.1); border: 1px solid #5a4a28; border-radius: 8px; padding: .5rem .7rem; color: var(--gold); } .captally { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin: .4rem 0 1rem; } .captally .big { font-size: 1.6rem; font-weight: 700; color: var(--gold); } .captally .xp { width: 220px; margin-top: .4rem; } .capform { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .capform .capval { min-width: 2.2rem; text-align: center; font-size: 1.1rem; color: var(--ink); } .pagetitle { margin: .2rem 0 1rem; } .statline { margin-top: .6rem; } .machines td.hero { white-space: normal; min-width: 13rem; } /* feedback box at the foot of every page (logged in) and the admin inbox */ details.fbbox { max-width: 640px; margin: 2.5rem auto 0; padding: .7rem 1rem; border: 1px dashed var(--line); border-radius: 10px; } details.fbbox > summary { color: var(--muted); font-size: .8rem; flex-wrap: nowrap; } details.fbbox[open] { border-style: solid; background: var(--surface); } .fbkinds { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: .5rem; } .fbkinds label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; cursor: pointer; } .fbkinds input { display: inline; width: auto; margin: 0; } textarea { display: block; width: 100%; box-sizing: border-box; padding: .55rem .7rem; background: var(--page); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font: inherit; resize: vertical; } textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .inboxtable td.msg { white-space: pre-wrap; min-width: 16rem; max-width: 32rem; } .warnline { margin: .7rem 0 0; padding: .45rem .7rem; border-left: 3px solid var(--warn); background: var(--surface-2); border-radius: 6px; } /* how it works */ .how { max-width: 760px; } .how ul { padding-left: 1.2rem; } .how li { margin: .35rem 0; } .updline { margin: .4rem 0 0; } .updline time[data-tip] { cursor: help; } @media (max-width: 520px) { .how .zones li { flex-direction: column; gap: 0; } } /* updates page */ .changelog { max-width: 760px; } .updmeta { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; } .upd .updtitle { font-size: 1.05rem; text-transform: none; letter-spacing: .01em; color: var(--ink); margin: 0 0 .35rem; } .upd p { margin: 0 0 .5rem; color: var(--ink-2); } .upd p:last-child { margin-bottom: 0; } .tag { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; border: 1px solid; background: var(--surface-2); } .tag-new { color: var(--uncommon); } .tag-improved { color: var(--rare); } .tag-fixed { color: var(--legendary); } .actionbox { margin: .2rem 0 .6rem; padding: .55rem .8rem; border: 1px solid var(--warn); border-left-width: 4px; background: var(--surface-2); border-radius: 8px; font-size: .85rem; } .actionbox b { display: block; color: var(--warn); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .15rem; } .howfoot { margin: .2rem 0 0; } /* privacy: Settings rows, profile preview, stub */ .prow { display: grid; grid-template-columns: 11rem 1fr; gap: .25rem 1rem; align-items: center; padding: .6rem 0; border-bottom: 1px dashed var(--line); } .plabel { font-size: .85rem; color: var(--ink); } .prow .pnote { grid-column: 2; margin: .1rem 0 0; } .seg.levels { display: inline-grid; grid-template-columns: repeat(4, auto); justify-self: start; } .seg.levels label { position: relative; margin: 0; font-size: inherit; color: inherit; } .seg.levels label + label { border-left: 1px solid var(--line); } .seg.levels input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; } .seg.levels span { display: block; padding: .35rem .7rem; color: var(--ink-2); cursor: pointer; text-align: center; white-space: nowrap; } .seg.levels label:hover span { color: var(--ink); } .seg.levels input:checked + span { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); } .seg.levels input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; } .seg.levels input:disabled + span { opacity: .35; cursor: not-allowed; text-decoration: line-through; } .seg.levels label:hover input:disabled + span { color: var(--ink-2); } .prow.pgate { border-bottom: 1px solid var(--line); padding-bottom: .9rem; margin-bottom: .2rem; } .prow.pgate .plabel { font-weight: 600; } .pnotes { margin: .8rem 0; padding-left: 1.1rem; } .pnotes li { margin: .15rem 0; } .privacy .end { display: flex; align-items: center; gap: .9rem; } @media (max-width: 640px) { .prow { grid-template-columns: 1fr; } .prow .pnote { grid-column: 1; } .seg.levels { grid-template-columns: 1fr 1fr; justify-self: stretch; } .seg.levels label:nth-child(3) { border-left: 0; } .seg.levels label:nth-child(n+3) { border-top: 1px solid var(--line); } } .previewbar { display: flex; justify-content: space-between; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; background: rgba(232,193,112,.1); border: 1px solid #5a4a28; color: var(--gold); border-radius: 8px; padding: .55rem .9rem; margin-bottom: 1rem; font-size: .85rem; } .previewbar .seg { background: var(--surface); } .previewas { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; margin-top: .6rem; } .actions .seg a { padding: .25rem .55rem; font-size: .72rem; } .btn.inert { opacity: .55; cursor: default; } .btn.inert:hover { filter: none; } .tiles.few { grid-template-columns: repeat(2, minmax(0, 220px)); } /* Models / mix / hours card: period toggle (7 days · 30 days · 12 months), switched by site.js */ .seg.period button { background: none; border: 0; font: inherit; padding: .3rem .6rem; color: var(--ink-2); cursor: pointer; white-space: nowrap; } .seg.period button + button { border-left: 1px solid var(--line); } .seg.period button:hover { color: var(--ink); } .seg.period button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); } .seg.period button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .seg[hidden] { display: none; } .periods .seg.period { font-size: .72rem; } .periodnote { display: block; margin: .3rem 0 0; } .chart.hours .prev { pointer-events: none; } /* feed (app/feed.py, _feed.html): lines, not cards; the day headings are the only structure */ .feed { max-width: 760px; } .feed h3.feedday { margin: 1.1rem 0 .2rem; } .feedlist { list-style: none; margin: 0; padding: 0; } .fe { display: flex; align-items: center; gap: .6rem; min-height: 2rem; padding: .25rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; color: var(--ink-2); } .fe:last-child { border-bottom: 0; } .feav { flex: none; line-height: 0; } .feav img, .feav span { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: linear-gradient(135deg, #25254a, #184f95); color: var(--ink); font-size: .6rem; font-weight: 700; line-height: 1; } .feav:hover { text-decoration: none; } .fetext { flex: 1; min-width: 0; overflow-wrap: anywhere; } .fe-boss .fetext, .fe-result .fetext { color: var(--ink); } .kudos { margin: 0; flex: none; } .kudo { flex: none; background: none; border: 0; border-radius: 6px; color: var(--muted); font: inherit; font-size: .8rem; padding: .2rem .45rem; min-width: 2rem; min-height: 1.75rem; white-space: nowrap; } button.kudo { cursor: pointer; } button.kudo:hover, button.kudo:focus-visible { color: var(--ink); background: var(--surface-2); } .kudo.mine { color: var(--gold); } .feedempty { margin: .8rem 0; } /* Sample players (app/samples.py): a lens for admins, always labelled so nobody mistakes one for a person. */ .sampletag { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; padding: 0 .35rem; vertical-align: middle; font-weight: 400; } .top nav a.samplepill { font-size: .65rem; color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; padding: .05rem .5rem; letter-spacing: .05em; } label.check { display: inline-flex; align-items: center; gap: .4rem; margin: 0 .6rem 0 0; } label.check input { display: inline; width: auto; margin: 0; } /* Friends page (friends.html): challenges as a band across the top, then friends | activity feed */ .challengeband .challenges { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); column-gap: 1.6rem; } .friendfeed { min-width: 0; padding-top: calc(1.1rem + 1px); } .friendfeed .feed { max-width: none; } .friendfeed .feed h3.feedday:first-child { margin-top: 0; } .friendlist .who { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; line-height: 1.35; } .friendlist .week { white-space: nowrap; } .friendlist .inline-form .btn { flex: none; white-space: nowrap; } @media (max-width: 800px) { .friendfeed { padding-top: .4rem; } } /* ---- Activity, was Compare (compare.html, charts.cmp_*; 21oct2026.md B2) ---- Twelve charts, each in its own panel (the .card look), under four headings: How much · When · How · The game. Two panels a row wide, one at <= 800px. Words in HTML, marks in SVG. You: gold, filled. A friend: blue, filled. The friends' median: a dashed outline. The hours bars are blue like the profile's, the comparison dashed. */ .cmphead { display: flex; justify-content: space-between; align-items: center; gap: .8rem 1rem; flex-wrap: wrap; margin-bottom: .4rem; } .cmphead h1 { margin: 0; } .cmpswitches { display: flex; gap: .6rem; flex-wrap: wrap; } .cmpswitches .seg a { white-space: nowrap; } .cmpswitches .seg a.on { box-shadow: inset 0 -2px 0 var(--accent); } .cmpnote { margin: .2rem 0 1rem; } .cmpempty { color: var(--ink-2); margin: 1.2rem 0 .4rem; } .cmpgroup + .cmpgroup { margin-top: 1.8rem; } .cmpgh { font-size: .85rem; color: var(--ink); margin: 1.2rem 0 .7rem; } .cmpgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; } @media (max-width: 800px) { .cmpgrid { grid-template-columns: minmax(0, 1fr); } } .cmpgrid > .cmpchart:last-child:nth-child(odd) { grid-column: 1 / -1; } /* a lone last panel: the whole row */ .cmpchart { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem 1.1rem; } @media (max-width: 520px) { .cmpchart { padding: .85rem .8rem .9rem; } } .cmpchart h3 { margin: 0 0 .35rem; } .cmpchart .verdict { margin: 0 0 .7rem; color: var(--ink); font-size: .9rem; } .cmprows { list-style: none; margin: 0; padding: 0; } .cmprows li { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) 3.6rem; align-items: center; gap: .6rem; min-height: 1.6rem; font-size: .8rem; } .cmprows .who { display: flex; align-items: center; gap: .35rem; min-width: 0; white-space: nowrap; color: var(--ink-2); } .cmprows .who a, .cmprows .who b, .cmprows .who .medlabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .cmprows .who .sampletag { flex: none; } .cmprows .who .nwt { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .cmprows li.me .who b { color: var(--gold); } .cmprows .medlabel { color: var(--muted); font-style: italic; } .cmprows .val { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; } .cmprows li.me .val { color: var(--gold); } .cmprows.streak li { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) 4.6rem; } .cmprows.wideval li { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) 5.6rem; } /* "about 225k" */ .cmprows.wideval .val { white-space: nowrap; } .cmprows.streak .val small { display: block; font-size: .68rem; color: var(--muted); line-height: 1.1; } /* Model mix and Bosses and loot: name and figure on one line, the bar under them across the panel. */ .cmprows.two li { grid-template-columns: minmax(0, 1fr) auto; row-gap: .15rem; padding: .2rem 0; } .cmprows.two li > svg { grid-column: 1 / -1; } .cmpbar, .cmpstack { width: 100%; height: 12px; display: block; overflow: visible; } .cmpdots { width: 100%; height: 16px; display: block; } @media (max-width: 520px) { .cmprows li { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr) 3.4rem; gap: .5rem; } .cmprows.streak li { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr) 4.2rem; } .cmprows.wideval li { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr) 5.2rem; } .cmprows.dots li { grid-template-columns: minmax(0, 1fr) 3rem; row-gap: .1rem; padding: .2rem 0; } .cmprows.dots .cmpdots { grid-column: 1 / -1; grid-row: 2; } .cmprows.two li { grid-template-columns: minmax(0, 1fr) auto; } } .cmpchart .track { fill: var(--line); } .cmpchart .off { fill: var(--line); } .cmpchart .mk.me { fill: var(--gold); } .cmpchart .mk.friend { fill: var(--accent-2); } .cmpchart .mk.median { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 3 2; } .cmpchart circle.mk.median { stroke-width: 1; stroke-dasharray: none; } .cmpchart .tick { fill: var(--ink); } .cmpchart .ring { fill: none; stroke: var(--line); stroke-width: 1; } .cmpchart .night { fill: var(--line); opacity: .7; } .cmpchart .outline { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 3; } .cmpchart .ax { fill: var(--muted); font: 9px var(--mono); } .cmpchart .hit:hover { fill: var(--ink); fill-opacity: .08; } /* Model families: the loot-rarity colours, each well clear of the panel (#16161c) and of its neighbours; a hair of the panel colour between segments. A median's mix is dimmed under its dashed outline. */ .cmpstack .fam { stroke: var(--surface); stroke-width: .6; vector-effect: non-scaling-stroke; } .cmpstack.median .fam { opacity: .55; } .fam-fable { fill: var(--epic); background: var(--epic); } .fam-opus { fill: var(--legendary); background: var(--legendary); } .fam-sonnet { fill: var(--uncommon); background: var(--uncommon); } .fam-haiku { fill: var(--rare); background: var(--rare); } .fam-other { fill: var(--muted); background: var(--muted); } .cmpchart .fam:hover { opacity: .8; } .cmphourswrap { max-width: 560px; } .cmphours { width: 100%; height: auto; display: block; } .hoursmall { list-style: none; margin: 1rem 0 .3rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem 1rem; } .hoursmall li { font-size: .72rem; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; } .hoursmall .cmphours { margin-bottom: .2rem; } .cmpchart .legend { display: flex; flex-wrap: wrap; gap: .2rem .5rem; margin: .5rem 0 0; } .cmpchart .legend i.sw { width: 14px; height: 10px; display: inline-block; border-radius: 2px; margin-left: 0; } .legend i.sw.me { background: var(--gold); } .legend i.sw.friend { background: var(--accent-2); } .legend i.sw.hb { background: #3987e5; } /* charts.BAR, the profile's hour bars */ .legend i.sw.night { background: var(--line); border: 1px solid var(--line); } .legend i.sw.outline { background: none; border-top: 2px dashed var(--ink); height: 0; border-radius: 0; } .legend i.sw.tick { width: 2px; background: var(--ink); border-radius: 0; } /* The picker (22oct2026.md 1c): a fold under the note, a search box and a wrapping list of ticks. */ .cmppick { margin: 0 0 1.2rem; padding: .6rem .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; } .cmppick > summary { cursor: pointer; font-size: .85rem; color: var(--ink-2); } .cmppick[open] > summary { margin-bottom: .6rem; } .pickfind { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .pickfind label { margin: 0; font-size: .8rem; color: var(--ink-2); } .pickfind input { flex: 1 1 12rem; width: auto; min-width: 0; margin: 0; padding: .35rem .6rem; } .pickform .tiny { margin: .4rem 0 .5rem; } .picklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .15rem 1rem; } .picklist li[hidden] { display: none; } .picklist label { display: flex; align-items: center; gap: .4rem; margin: 0; padding: .2rem 0; font-size: .8rem; color: var(--ink); cursor: pointer; min-width: 0; } .picklist input { display: inline-block; width: auto; flex: none; margin: 0; padding: 0; } .picklist .pickname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .picklist .pickval { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; } .picklist input:disabled + .pickname { opacity: .5; } .pickform.js [data-pickfind] { display: none; } .pickgo { display: flex; align-items: center; gap: 1rem; margin-top: .6rem; font-size: .85rem; } /* One motion: bars grow in once (sideways, the hours bars upwards). Nothing moves for a reader who asks for less motion. */ .cmpbar .mk, .cmpstack .fam, .cmphours .mk { transform-box: fill-box; animation: cmp-grow .5s ease-out both; } .cmpbar .mk, .cmpstack .fam { transform-origin: left center; } .cmphours .mk { transform-origin: center bottom; animation-name: cmp-rise; } @keyframes cmp-grow { from { transform: scale(0, 1); } to { transform: none; } } @keyframes cmp-rise { from { transform: scale(1, 0); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { .cmpbar .mk, .cmpstack .fam, .cmphours .mk { animation: none; } } /* ---- end Activity ---- */ /* ---- Leaderboard (r21 A2, 2026-10-21): the place dropdown, and no sideways scroll on a phone (long handles wrap, the Zone column steps aside under 520 px; it is on every profile). ---- */ .placepick { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .8rem; } .placepick label { display: inline; margin: 0; font-size: .85rem; color: var(--ink-2); } .placepick select { display: inline-block; width: auto; max-width: 100%; margin: 0; padding: .35rem .6rem; } .placepick .btn { padding: .35rem .8rem; } .placepick.js .btn { display: none; } /* .seg's overflow: hidden lets a flex item shrink below its links and cut the last one ("All tim" at 375 px): on the board the two rows wrap instead. */ .board-card .seg { flex-wrap: wrap; max-width: 100%; } .boardwrap { overflow-x: auto; } .board td.hero { overflow-wrap: anywhere; } @media (max-width: 520px) { .board .zonecol { display: none; } .board th, .board td { padding-left: .3rem; padding-right: .3rem; } .board-card .seg a { padding: .35rem .45rem; font-size: .72rem; white-space: nowrap; } } /* ---- end leaderboard ---- */ /* ---- Achievements, titles and records (r21 C1) ---- */ /* ---- Titles in names (22oct2026.md round 5, app/names.py) ---- "jubalizer the Polyglot": the title muted and italic after the handle. A button, so a keyboard reaches it; its popup shows on hover and focus (CSS) and on a tap (site.js toggles .open; Escape closes). Closed it is display: none, so it never widens the page. With script (html.ttljs) the popup is fixed and placed by site.js, so a table's scroll box can't clip it. .plain (inside a label or a chart's name column): text with a hover tip. */ .nwt { overflow-wrap: anywhere; } .ttl { position: relative; display: inline; margin: 0; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-style: italic; font-weight: 400; letter-spacing: normal; text-transform: none; cursor: help; } .ttl:hover { color: var(--ink-2); } .ttl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } .ttl .pop { display: none; position: absolute; top: calc(100% + .35rem); left: 0; z-index: 30; width: max-content; max-width: min(18rem, calc(100vw - 2rem)); padding: .3rem .55rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--ink); font-size: .75rem; font-style: normal; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal; letter-spacing: normal; text-transform: none; } @media (hover: hover) { .ttl:hover .pop { display: block; } } .ttl:focus-visible .pop, .ttl.open .pop { display: block; } .ttl.shut .pop { display: none; } .ttljs .ttl .pop { position: fixed; top: auto; left: auto; } .reclist { list-style: none; padding: 0; margin: 0; font-size: .82rem; } .reclist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .8rem; padding: .35rem 0; border-bottom: 1px dashed var(--line); } .reclist li span { color: var(--ink-2); } .reclist li b { text-align: right; } .reclist li em { grid-column: 1 / -1; font-style: normal; color: var(--muted); font-size: .75rem; } .titlepick { margin-top: 1rem; } .achhow li { margin-bottom: .2rem; } /* ---- end achievements ---- */ /* ---- hard titles (22oct2026.md round 6, six-titles): Settings → Profile → Titles ---- */ .titles { margin-top: 1.2rem; border-top: 1px dashed var(--line); padding-top: .8rem; } .titles h3 { margin: 0 0 .3rem; } .titles h4 { margin: .9rem 0 .3rem; } .titles .titlepick { margin-top: .6rem; } .tpick { border: 0; margin: 0; padding: 0; min-width: 0; } .tpick legend { padding: 0; margin-bottom: .3rem; color: var(--muted); } .tchoice { display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 .45rem; font-size: .85rem; } .tchoice input { width: auto; margin: .2rem 0 0; flex: none; } .tchoice span .tiny { display: block; overflow-wrap: anywhere; } .ttodo { list-style: none; padding: 0; margin: 0; } .ttodo li { padding: .35rem 0; border-bottom: 1px dashed var(--line); overflow-wrap: anywhere; font-size: .85rem; } .ttodo li .tiny { display: block; } /* ---- end hard titles ---- */ /* The monthly recap (21oct2026.md C4): the page's card is an inline SVG with a fixed width and height (the PNG's size), scaled down to fit; the profile's card from the 1st to the 7th is one line and a button. */ .recap h1 { margin: 0; font-size: 1.3rem; } .recapnav { display: flex; gap: 1rem; } .recapwrap { margin: .4rem 0 .8rem; } .recapsvg { display: block; width: 100%; max-width: 600px; height: auto; } .recapacts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0; } .recapempty { color: var(--ink-2); } .recapcard { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; } .recapcard p { margin: 0; } /* ---- Accounts (22oct2026.md round 2): Turnstile, Settings → Security (masked token, delete), check your email ---- */ .cf-turnstile { margin: .4rem 0 .8rem; min-height: 65px; } .fields .cf-turnstile { margin: 0; } .btn.danger { background: transparent; color: #e66767; border: 1px solid #7a3434; } .btn.danger:hover { background: rgba(230,103,103,.1); filter: none; } .pendingmail { margin: .2rem 0 .7rem; } .tokrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; margin: .3rem 0 .5rem; } details.reveal { min-width: 0; max-width: 100%; } details.reveal summary { cursor: pointer; list-style: none; } details.reveal summary::-webkit-details-marker { display: none; } details.reveal[open] summary { display: none; } .tokfull { overflow-wrap: anywhere; word-break: break-all; color: var(--ink); } .tokbtns { display: flex; align-items: center; gap: 1rem; margin: .2rem 0 .3rem; } .tokbtns form { margin: 0; } /* ---- end accounts ---- */ /* ---- Email (22oct2026.md 2d): Settings → Emails, the unreachable notice, Admin → Email ---- */ .mailwarn { border-left-color: var(--warn); } .emailprefs h3 { margin: .8rem 0 .3rem; font-size: .85rem; } .emailprefs h3:first-of-type { margin-top: 0; } .emailprefs .erow { padding: .3rem 0; border-bottom: 1px dashed var(--line); } .emailprefs .erow p { margin: .15rem 0 0 1.6rem; } .emailprefs .end { display: flex; margin-top: .8rem; } .mailform h2 { margin: .4rem 0 .6rem; font-size: 1rem; } .mailwho { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: .7rem; } .mailwho label.check span, .tickgrid label.check span { overflow-wrap: anywhere; } .mailform fieldset.segment { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .8rem .7rem; margin: 0 0 .7rem; min-width: 0; } .mailform fieldset.segment .fields { margin-bottom: .6rem; } .mailform fieldset.segment label.check { margin-right: 1.2rem; } .tickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .3rem .8rem; margin: .5rem 0; } .mailform .ticked { margin-bottom: .8rem; } .mailform .ticked summary { cursor: pointer; } .mailbtns { display: flex; flex-wrap: wrap; gap: .5rem; } .mailcount { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); } .mailcount .confirm { max-width: 220px; } .mailpreview { display: block; width: 100%; height: 640px; border: 1px solid var(--line); border-radius: 8px; background: #0d0d11; } .campaign { padding: .35rem 0; border-bottom: 1px dashed var(--line); } .campaign summary { cursor: pointer; overflow-wrap: anywhere; } /* ---- end email ---- */ /* ---- two-factor (22oct2026.md 3d, _twofa.html) ---- */ .twofasetup { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; margin: .4rem 0 .8rem; } .twofasetup .qr { width: 185px; height: 185px; border-radius: 6px; background: #fff; } .twofasetup p { min-width: 0; flex: 1 1 200px; } .tfkey { overflow-wrap: anywhere; letter-spacing: .04em; } pre.recovery { columns: 2; column-gap: 2rem; font-size: 1.05rem; line-height: 1.7; } /* ---- end two-factor ---- */ /* ---- Round 3: /data, /privacy, /terms, /security, the footer links, the password eye ---- */ .footlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.1rem; margin-top: .7rem; font-size: .72rem; } .footlinks a { color: var(--muted); } .footlinks a:hover { color: var(--ink-2); } .legal h3 { margin-top: 1.1rem; } .legal ul { padding-left: 1.2rem; } .legal li { margin: .35rem 0; } .fieldlist { margin: .4rem 0 .8rem; } .fieldlist .frow { display: grid; grid-template-columns: 1fr; gap: .15rem; padding: .45rem 0; border-bottom: 1px dashed var(--line); } .fieldlist dt { font-weight: 600; overflow-wrap: anywhere; } .fieldlist dt code { font-weight: 400; color: var(--ink-2); } .fieldlist dd { margin: 0; overflow-wrap: anywhere; } .fieldlist .why { display: block; font-size: .8rem; } .fieldlist dd a { margin-left: .4rem; } @media (min-width: 700px) { .fieldlist .frow { grid-template-columns: minmax(10rem, 15rem) 1fr; gap: 1rem; } } .tablecard { border-top: 1px solid var(--line); margin-top: .9rem; padding-top: .2rem; } .tablecard h3 { margin-bottom: .2rem; text-transform: none; letter-spacing: 0; font-size: .9rem; } .tablecard .keep { color: var(--ink-2); } pre.sha { overflow-wrap: anywhere; white-space: pre-wrap; } .facts { list-style: none; padding-left: 0 !important; } .facts li { padding: .55rem 0; border-bottom: 1px dashed var(--line); margin: 0 !important; } .facts .claim { display: block; } .facts .proof { display: block; margin-top: .2rem; overflow-wrap: anywhere; } /* The eye beside every password field (static/site.js adds it): the field and the button sit in one row. */ .pwrow { display: flex; align-items: stretch; gap: .4rem; } .pwrow input { flex: 1 1 auto; min-width: 0; } .pweye { flex: none; display: inline-grid; place-items: center; width: 2.6rem; margin-top: .3rem; padding: 0; background: var(--page); color: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font: inherit; } .pweye:hover { color: var(--ink); } .pweye:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .pweye svg { width: 1.15rem; height: 1.15rem; display: block; } .pweye .off { display: none; } .pweye[aria-pressed="true"] .on { display: none; } .pweye[aria-pressed="true"] .off { display: block; } /* ---- end round 3 ---- */ /* ---- deletion (22oct2026.md 3b): what goes and what stays, on Delete my data and in Settings → Security ---- */ .lingers { margin: .4rem 0 .8rem; padding-left: 1.1rem; } .lingers li { margin: .3rem 0; overflow-wrap: anywhere; } .lingerfold { margin: .3rem 0 .6rem; } .lingerfold summary { cursor: pointer; color: var(--muted); } /* ---- end deletion ---- */ /* ---- Round 4: the footer's second line, the cookie banner (static/consent.js), the landing page ---- */ .footorg { margin: .6rem 0 0; font-size: .72rem; } .footorg a { color: var(--muted); text-decoration: underline; } .footlinks button.link { font-size: inherit; } .footlinks button.link:hover { color: var(--ink-2); } .footlinks button.link[hidden] { display: none; } .consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; padding: .8rem 16px; background: var(--surface-2); border-top: 1px solid var(--line); font-size: .8rem; } .consent[hidden] { display: none; } .consent p { margin: 0; flex: 1 1 22rem; } .consent .consent-state { flex: 0 0 auto; font-size: .72rem; } .consent .consent-state:empty { display: none; } .consent-btns { display: flex; gap: .5rem; } @media (max-width: 520px) { .hero-land { padding: 1.6rem 0 1rem; } .hero-land h1 { font-size: 1.65rem; } } /* ---- Moderation (22oct2026.md 3c): the Report link under a hero's action, Admin → Players. ---- */ .reportlink { display: block; margin-top: .5rem; text-align: right; } .modsearch { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; } .modsearch label { flex: 1; min-width: 12rem; margin: 0; } .modform { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .8rem; max-width: 30rem; } .modform h3 { margin: 0 0 .4rem; } .modreport { border-bottom: 1px dashed var(--line); padding: .3rem 0; } .modreport p { margin: .2rem 0; overflow-wrap: anywhere; } /* Admin → SEO & analytics (app/analytics.py, templates/admin_seo.html): tables side by side when there is room, one column on a phone; a long search or address wraps instead of widening the page. */ .seo h3 { margin: 1rem 0 .3rem; font-size: .9rem; } .seogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0 1.5rem; } .seotable { width: 100%; min-width: 0; table-layout: fixed; } .seotable th:first-child, .seotable td.k { width: auto; white-space: normal; overflow-wrap: anywhere; } .seotable th.r, .seotable td.r { width: 4.2rem; } .seo .tiles { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); } /* ---- The compact profile (22oct2026.md round 5, five-prof): badge strip, Records · Statistics, challenge lines ---- Badges: round icons with the name under them; a locked one (the owner's only) is grey and dashed. Each is a button whose popup shows on hover and keyboard focus (CSS) and on a tap (site.js toggles .open; Escape adds .shut). Closed it is display: none, so it never widens the page; with script (html.achjs) it is fixed and placed in the window. */ .achstrip .badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem .4rem; } .achbadge { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 5.4rem; margin: 0; padding: .1rem; border: 0; background: none; color: var(--ink-2); font: inherit; cursor: help; text-align: center; } .achbadge .bicon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: var(--gold); border: 2px solid var(--gold); background: rgba(232,193,112,.1); } .achbadge .bicon svg { width: 1.3rem; height: 1.3rem; display: block; } .achbadge .bname { font-size: .68rem; line-height: 1.25; overflow-wrap: anywhere; } .achbadge.locked { color: var(--muted); } .achbadge.locked .bicon { color: var(--muted); border: 2px dashed var(--line); background: none; } .achbadge:hover .bicon { box-shadow: 0 0 0 3px rgba(232,193,112,.25); } .achbadge.locked:hover .bicon { box-shadow: 0 0 0 3px rgba(139,139,152,.2); } .achbadge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; } .achbadge .pop { display: none; position: absolute; top: calc(100% + .35rem); left: 0; z-index: 30; width: max-content; max-width: min(17rem, calc(100vw - 2rem)); padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--ink); font-size: .75rem; line-height: 1.4; text-align: left; white-space: normal; } .achbadge .pop b { color: var(--gold); font-weight: 600; } .achbadge.locked .pop b { color: var(--ink-2); } .achbadge .pop em { display: block; font-style: normal; color: var(--muted); margin-top: .15rem; } .achbadge .pop .bnext { display: block; color: var(--muted); } @media (hover: hover) { .achbadge:hover .pop { display: block; } } .achbadge:focus-visible .pop, .achbadge.open .pop { display: block; } .achbadge.shut .pop { display: none; } .achjs .achbadge .pop { position: fixed; top: auto; left: auto; } .recstats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem 2rem; } @media (max-width: 640px) { .recstats { grid-template-columns: minmax(0, 1fr); } } /* ---- end compact profile ---- */ /* ---- Challenges, flat (22oct2026.md round 7: _challenge.html on Friends, the profile and the feed; the New challenge form, _newchallenge.html). Long handles and titles wrap; nothing may widen the page at 390 px. ---- */ .chcard { padding: .5rem 0; border-bottom: 1px dashed var(--line); overflow-wrap: anywhere; min-width: 0; } .chcard:last-child { border-bottom: 0; } .chcard p { margin: 0 0 .3rem; } .chside b { font-weight: 600; } .chside b.pend { font-weight: 400; color: var(--muted); } .chside.won b { color: var(--accent-2); } .chv, .chmeta { color: var(--muted); font-size: .85em; } .chscore { color: var(--ink-2); font-variant-numeric: tabular-nums; } .chres { font-size: .9rem; } .chspoils { color: var(--accent-2); } .chcard form.chact { display: inline-block; margin: .2rem .4rem 0 0; } .ch-feed { padding: 0; border: 0; } .tugbar { display: block; width: 100%; height: 10px; margin: .2rem 0 .3rem; border: 1px solid var(--line); border-radius: 999px; } .tugbar .tb { fill: #3a2f55; } .tugbar .ta { fill: var(--accent-2); } .newch { margin-top: 1rem; padding: .6rem .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; } .newch > summary h3 { margin: 0; } .newch:not([open]) { padding-top: .6rem; padding-bottom: .6rem; } .newchform { min-width: 0; } .chscoring { border: 0; margin: 0 0 .6rem; padding: 0; min-width: 0; } .chscoring legend { padding: 0; margin-bottom: .3rem; font-size: .85rem; color: var(--ink-2); } .chscoring label { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .35rem; font-size: .9rem; color: var(--ink); cursor: pointer; } .chscoring input { display: inline-block; width: auto; flex: none; margin: 0; } .chscoring label > span { min-width: 0; } .chpick { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .1rem 1.2rem; } .chpick li { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .7rem; padding: .3rem 0; border-bottom: 1px dashed var(--line); font-size: .85rem; min-width: 0; } .chpick li[hidden] { display: none; } .chpick .pickname { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; } .chpick label.side { display: inline-flex; align-items: center; gap: .3rem; margin: 0; font-size: .8rem; color: var(--ink-2); cursor: pointer; white-space: nowrap; } .chpick label.side input { display: inline-block; width: auto; margin: 0; padding: 0; } .chpick .why { flex: 1 0 100%; font-size: .75rem; color: var(--muted); } .chpick li.off .pickname, .chpick li.off label.side { opacity: .5; } .chpick .bwhy { display: none; } .newchform.b .chpick li[data-bno] .bwhy { display: block; } .newchform.b .chpick li[data-bno] .pickname, .newchform.b .chpick li[data-bno] label.side { opacity: .5; } .newchform.js [data-pickfind] { display: none; } .chcount { margin: .6rem 0; font-size: .85rem; color: var(--ink-2); } /* ---- Alerts in the bell (22oct2026.md round 5, app/alerts.py; design.md → Alerts) ---- The logged-in bell is a