/* In-match rules reference: the launch button, the reading panel (quick reference + rulebook), and the tap-to-learn inspect mode driven from the top-bar toggle. Inspect is no longer launched from the panel — the rules popup keeps only the reading tiers; a `?` in the room's top bar turns the board into a learn-by-touching surface (see WebClient/Components/GameRoom.razor and RulesReferenceOverlay.razor). While inspect is on, every explorable region wears a highlight ring (css below + the data-rules-inspect beacon set by js/rules-inspect.js), hover floats the shared rich card (js/rich-tip.js), and a tap spotlights a region and pins its card. The spotlight itself is the shared tutorial cut-out (.tut-spot, tutorial.css); this file styles only the rules chrome. See docs/design/rules-reference.md. */ /* ── Reading panel: a PanelModal with tabs and a scrolling body ── */ /* The primitive supplies the scrim, the frame and the header row; the panel sits on the over-room tier so it clears the room's log sidebar and the launch pill. What is left here is the panel's own width, its bounded height, its softer entrance, and the header's reading padding. */ .rules-panel { width: min(560px, 100%); max-height: min(80vh, 720px); animation: rules-pop 0.2s ease both; } .rules-panel .app-modal__panel-head { padding: 1rem 1.15rem 0.75rem; } .rules-tabs { display: flex; gap: 0.35rem; padding: 0 1.15rem; border-bottom: 1px solid var(--border-color); } .rules-tab { appearance: none; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; /* A tab is a control on a touch surface, so it holds the app's 44px tap floor whatever its label's size. */ min-height: 2.75rem; padding: 0.5rem 0.35rem 0.6rem; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; } .rules-tab:hover { color: var(--text-primary); } .rules-tab--active { color: var(--text-primary); border-bottom-color: var(--accent-blue, #6ca8ff); } .rules-body { padding: 0.9rem 1.15rem 1.15rem; overflow-y: auto; } /* Quick reference reads tighter than the rulebook; both share the section shape. */ .rules-summary { margin: 0 0 0.9rem; font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary); } .rules-section { margin-bottom: 1rem; } .rules-section:last-child { margin-bottom: 0; } .rules-section__heading { margin: 0 0 0.4rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-blue-ink); } .rules-section__points { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; } .rules-section__points li { font-size: 0.9rem; line-height: 1.45; color: var(--text-primary); } /* ── Inspect mode: the pinned help card + the explorable-region highlight ── The card is created by js/rules-inspect.js and filled with the region's authored tip-def (the same markup the hover tooltip clones), so a tap shows the identical rich card a hover does — one help, two reaches. */ /* While inspect is on, every region that has help (a [data-tip] trigger) wears a soft static ring, so the player can see what's explorable without a boardful of competing motion; the region under the pointer brightens to mark the current hover target. The beacon is set on by js/rules-inspect.js. */ body[data-rules-inspect='on'] [data-tip] { outline: 2px solid color-mix(in srgb, var(--accent-blue-soft) 55%, transparent); outline-offset: 3px; box-shadow: 0 0 10px color-mix(in srgb, var(--accent-blue-soft) 22%, transparent); cursor: help; transition: outline-color 0.15s ease, box-shadow 0.15s ease; } body[data-rules-inspect='on'] [data-tip]:hover { outline-color: color-mix(in srgb, var(--accent-blue-soft) 95%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent-blue-soft) 45%, transparent); } /* While inspecting, the board is look-don't-touch: its own controls don't fire (the inspect click handler swallows them and shows help instead), so the button cursor becomes the help cursor rather than inviting a move. Enabled controls only — a disabled button dispatches no click, so it can't be inspected anyway. */ body[data-rules-inspect='on'] [data-tat-stage] button:not(:disabled), body[data-rules-inspect='on'] [data-tat-stage] [role='button'] { cursor: help; } /* The pinned help card: the same reading chrome as the floating tooltip, fixed bottom-left so it stays clear of the board it just spotlighted. Pointer-events: none keeps a tap under it inspecting the next region. */ .rules-inspect-card { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: calc(var(--z-tip) - 2); pointer-events: none; max-width: min(19rem, calc(100vw - 2.5rem)); padding: 0.6rem 0.7rem; border-radius: 0.7rem; background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); color: var(--text-primary); animation: rules-card-in 0.22s ease both; } @keyframes rules-pop { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: none; } } @keyframes rules-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .rules-panel, .rules-inspect-card { animation: none; } body[data-rules-inspect='on'] [data-tip] { transition: none; } }