/* public/app.css */ * { box-sizing: border-box; } [hidden] { display: none !important; } html { color-scheme: dark; } body { margin: 0; background: var(--paper-deep); color: var(--chalk); font: var(--body); -webkit-font-smoothing: antialiased; } .num, .status, .readout, .total, .countdown { font-variant-numeric: tabular-nums; } a { color: inherit; } button, .chunky { font: inherit; } .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; max-width: 1040px; margin: 0 auto; height: 56px; box-sizing: content-box; } .brand { font: 800 18px/1 var(--font); letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; flex: none; } .modes { display: flex; gap: 8px; font: var(--small); flex-wrap: nowrap; } .modes a { text-decoration: none; opacity: 0.7; padding: 6px 8px; border-radius: 999px; white-space: nowrap; } @media (max-width: 400px) { .brand { font-size: 16px; } .modes { gap: 4px; font-size: 12px; } .modes a { padding: 5px 7px; } } .modes a.is-active { opacity: 1; background: var(--paper); color: var(--ink); } .game { max-width: 1040px; margin: 0 auto; padding: 0 16px 24px; display: grid; gap: 4px; } .status { display: flex; justify-content: space-between; font: var(--small); color: var(--chalk-dim); height: 36px; align-items: center; } /* The fixed .result/.summary panels are positioned against the viewport, not .stage: nothing on .stage's ancestor chain (up to and including ) may set transform, filter, contain, or will-change, since any of those creates a containing block that would trap "position: fixed" here. */ .stage { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); aspect-ratio: 358 / 372; min-height: 320px; margin-top: 4px; } @media (min-width: 720px) { .stage { aspect-ratio: 16 / 9; } } .board { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; cursor: grab; } .board:active { cursor: grabbing; } .board .grid-line { stroke: var(--grid); fill: none; } .board .ground { stroke: var(--grid-major); } .board .reference path, .board .guess path, .board .truth path { stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .board .reference path { fill: none; stroke: var(--chalk-dim); stroke-width: 2.5px; } .board .dimension line { stroke: var(--terracotta); } .board .dimension text { fill: var(--terracotta); font-family: var(--font); font-weight: 700; } .board .guess path { fill: rgb(0 0 0 / 0); stroke: var(--chalk); stroke-width: 2.5px; cursor: move; } .board .guess path:hover { filter: brightness(0.96); } .board .handle { fill: var(--chalk); stroke: var(--ink); cursor: nwse-resize; } .board .handle[data-corner="tr"], .board .handle[data-corner="bl"] { cursor: nesw-resize; } .board .handle[hidden] { display: none; } .board.is-locked .guess path { opacity: 0.5; cursor: default; } [data-state="finished"] .board, [data-state="finished"] .legend, [data-state="finished"] .zoom { display: none; } .board .truth path { fill: none; stroke: var(--terracotta); stroke-width: 3.5px; } .board .truth[hidden] { display: none; } .board .truth .truth-anim.truth-in { animation: truth-in var(--t-truth) var(--ease) both; transform-box: fill-box; transform-origin: 50% 100%; } @keyframes truth-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } } .legend { position: absolute; left: 12px; top: 10px; display: grid; gap: 6px; font: 600 13px/1 var(--font); pointer-events: none; } .legend i { display: inline-block; width: 12px; height: 12px; border-radius: var(--r-tag); margin-right: 8px; vertical-align: -1px; } .legend-ref i { background: var(--ink); } .legend-guess i { background: transparent; border: 2px solid var(--chalk); box-sizing: border-box; } .legend span span { font-weight: 400; color: var(--chalk-dim); } .legend b { color: var(--terracotta); font-weight: 600; } .zoom { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 8px; } .zoom button { width: var(--h-zoom); height: var(--h-zoom); border-radius: var(--r-chip); border: 0; background: var(--paper-deep); color: var(--chalk); font: 700 20px/1 var(--font); box-shadow: 0 4px 0 oklch(0.18 0.05 250); } .strip, .strip-info, .strip-controls { display: contents; } [data-state="revealed"] #strip, [data-state="finished"] #strip { display: none; } .readout { margin: 8px 0 0; font: 700 17px/1.3 var(--font); text-align: center; } .hint { margin: 0; text-align: center; color: var(--chalk-dim); font: 400 13px/1.45 var(--font); } .controls { display: grid; grid-template-columns: var(--h-secondary) 1fr var(--h-secondary); gap: 12px; align-items: center; margin-top: 8px; } input[type="range"] { width: 100%; accent-color: var(--terracotta); height: var(--h-secondary); } @media (min-width: 720px) { #strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; } .strip-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .strip-info .readout, .strip-info .hint { margin: 0; text-align: left; } .strip-info .readout { font-size: 20px; } .strip-info .hint { font-size: 14px; } .strip-controls { display: flex; align-items: center; gap: 12px; flex: none; } .strip-controls .controls { grid-template-columns: var(--h-secondary) 320px var(--h-secondary); margin-top: 0; } .strip-controls #lock { width: 240px; min-height: var(--h-primary); flex: none; } } .chunky { display: inline-flex; align-items: center; justify-content: center; min-height: var(--h-secondary); padding: 0 20px; border: 0; border-radius: var(--radius); background: var(--grid); color: var(--chalk); font: var(--button); text-decoration: none; box-shadow: 0 var(--edge) 0 var(--paper-deep); transform: translateY(0); transition: transform var(--t-press) var(--ease), box-shadow var(--t-press) var(--ease); } @media (hover: hover) and (pointer: fine) { .chunky:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--paper-deep); background: oklch(0.40 0.07 250); } .chunky.primary:not(:disabled):hover { box-shadow: 0 5px 0 var(--terracotta-deep); background: oklch(0.70 0.17 38); } } .chunky:active { transform: translateY(var(--edge)); box-shadow: none; } .chunky.primary { background: var(--terracotta); color: var(--ink); box-shadow: 0 var(--edge) 0 var(--terracotta-deep); min-height: var(--h-primary); font-weight: 800; } .chunky.primary:active { background: oklch(0.62 0.17 38); } .chunky:disabled { opacity: 0.4; transform: none; box-shadow: none; } #lock { font: var(--button); letter-spacing: 0.04em; } .result, .summary { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0; background: var(--panel); color: var(--ink); border-radius: 24px 24px 0 0; padding: 24px 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; animation: slide-up var(--t-panel) var(--ease) both; } .result { top: 330px; } .summary { top: 96px; } @keyframes slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } #next { margin-top: auto; position: sticky; bottom: 0; background: var(--panel); padding-top: 4px; flex-shrink: 0; } #compare, #code-rail { margin-top: auto; } .result .chunky, .summary .chunky, .code-rail { flex-shrink: 0; } .result h2 { margin: 0; font: var(--display-26); letter-spacing: -0.025em; } .summary h2 { margin: 0; font: 600 14px/1 var(--font); color: var(--ink-dim); font-weight: 600; } .result-grid, .summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; padding: 16px 0; border-top: 1px solid oklch(0.88 0.02 85); border-bottom: 1px solid oklch(0.88 0.02 85); } .result-grid { border: 0; padding: 0; align-items: start; } .result-grid dt, .summary-grid dt { font: var(--tiny); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-dim); margin-bottom: 4px; display: block; } .result-grid dd, .summary-grid dd { margin: 0; font: 800 22px/1 var(--font); letter-spacing: -0.02em; } #truth-value { font-size: 36px; letter-spacing: -0.02em; color: var(--terracotta); } @media (min-width: 720px) { #truth-value { font-size: 44px; letter-spacing: -0.025em; } } #guess-value { font-size: 26px; } .result-grid dd.note { font: var(--tiny); font-weight: 400; color: var(--ink-dim); margin-top: 4px; } .points { margin: 0; align-self: flex-start; height: 36px; padding: 0 14px; border-radius: var(--r-chip); font: 700 15px/1 var(--font); color: var(--ink); display: inline-flex; align-items: center; } .points[data-colour="green"] { background: var(--green); } .points[data-colour="yellow"] { background: var(--yellow); } .points[data-colour="orange"] { background: var(--orange); } .points[data-colour="red"] { background: var(--red); } .points.pop { animation: pop var(--t-chip) var(--ease) both; } @keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } } .fact { margin: 0; font: var(--body); } .source { font: 600 14px/1 var(--font); color: var(--terracotta-deep); text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; } .summary-title, #summary-title { font: 600 14px/1 var(--font); color: var(--ink-dim); } .summary .total { margin: 0; display: flex; align-items: baseline; gap: 8px; } .summary .total .n { font: 800 56px/1 var(--font); letter-spacing: -0.03em; color: var(--terracotta); } .summary .total .of { color: var(--ink-dim); font: 800 26px/1 var(--font); letter-spacing: -0.01em; } @media (min-width: 720px) { .summary .total .n { font-size: 64px; } } .summary .squares { margin: 0; display: flex; gap: 8px; } .summary .squares .sq { width: 48px; height: 48px; border-radius: var(--r-chip); flex: none; } @media (min-width: 720px) { .summary .squares .sq { width: 44px; height: 44px; } } .sq[data-colour="green"] { background: var(--green); } .sq[data-colour="yellow"] { background: var(--yellow); } .sq[data-colour="orange"] { background: var(--orange); } .sq[data-colour="red"] { background: var(--red); } .summary .compare { margin: 0; font: 600 15px/1.45 var(--font); } .code-rail { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; min-height: 48px; flex-shrink: 0; padding: 0 6px 0 16px; border-radius: 14px; background: oklch(0.92 0.02 85); } .code-rail span { font: 600 14px/1 var(--font); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .code-rail button { height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--panel); color: var(--terracotta-deep); font: 700 13px/1 var(--font); flex: none; } .summary-grid dd.code, #streak-value.code { letter-spacing: 0.06em; } .summary .countdown { margin: 0; text-align: center; font: 600 14px/1 var(--font); color: var(--ink-dim); } .summary .chunky { background: var(--ink); color: var(--chalk); box-shadow: 0 var(--edge) 0 oklch(0.10 0.02 250); } .summary .chunky.primary { background: var(--terracotta); color: var(--ink); box-shadow: 0 var(--edge) 0 var(--terracotta-deep); } #summary-link { font: 700 15px/1 var(--font); color: var(--terracotta-deep); text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; background: none; box-shadow: none; min-height: 0; padding: 0; } #summary-link.as-button { font: var(--button); font-size: 18px; letter-spacing: 0; text-decoration: none; align-self: stretch; background: var(--ink); color: var(--chalk); box-shadow: 0 var(--edge) 0 oklch(0.10 0.02 250); min-height: var(--h-secondary); padding: 0 20px; } .error, .loading { text-align: center; } .error { display: flex; flex-direction: column; align-items: center; gap: 20px; } #error-text { font: 700 17px/1.4 var(--font); max-width: 260px; } #retry { background: var(--chalk); color: var(--ink); box-shadow: 0 var(--edge) 0 var(--chalk-dim); min-height: var(--h-small); font-size: 16px; } .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--chalk); color: var(--ink); min-height: 44px; padding: 10px 18px; border-radius: 22px; box-shadow: 0 4px 0 var(--chalk-dim); font: 700 15px/1.3 var(--font); text-align: center; } [data-state="loading"] .board, [data-state="loading"] .legend, [data-state="loading"] .zoom, [data-state="loading"] .controls, [data-state="loading"] #lock, [data-state="loading"] .readout { visibility: hidden; } [data-state="playing"] .loading, [data-state="revealed"] .loading, [data-state="finished"] .loading, [data-state="error"] .loading { display: none; } @media (min-width: 720px) { .result { position: absolute; left: auto; top: 24px; right: 24px; bottom: 24px; width: 440px; z-index: auto; border-radius: 24px; padding: 28px; } .summary { position: absolute; left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); z-index: auto; width: 560px; max-height: calc(100% - 48px); border-radius: 24px; padding: 32px; animation: slide-up-centred var(--t-panel) var(--ease) both; } .result h2 { font-size: 36px; letter-spacing: -0.03em; } } @keyframes slide-up-centred { from { opacity: 0; transform: translate(-50%, -45%); } to { opacity: 1; transform: translate(-50%, -50%); } } .landing { max-width: 720px; margin: 0 auto; padding: 32px 16px 48px; display: grid; gap: 40px; } .landing h1 { font: var(--display-44); letter-spacing: -0.035em; margin: 0 0 12px; } .landing h2 { font: var(--display-26); letter-spacing: -0.025em; margin: 0 0 8px; } .landing p { max-width: 65ch; } .steps { padding-left: 20px; display: grid; gap: 10px; } .ways { display: grid; gap: 16px; } @media (min-width: 720px) { .ways { grid-template-columns: repeat(3, 1fr); } } .ways > div { background: var(--paper); border-radius: var(--radius-lg); padding: 16px; } .ways h3 { margin: 0 0 6px; } .soon { opacity: 0.6; font-weight: 700; color: var(--gold); } details { background: var(--paper); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 8px; } summary { font-weight: 700; cursor: pointer; } .foot { text-align: center; padding: 24px; opacity: 0.7; font-size: 14px; } @media (prefers-reduced-motion: reduce) { .board .truth .truth-anim.truth-in, .result, .summary, .points.pop { animation: fade 200ms linear both; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .chunky { transition: none; } }