/* doIRL components. Colour, type, space, radius, shadow and motion all come from tokens.css as var(--…).
   Geometry that is not a token (an icon nudge, a hairline) is local to the component that needs it. */
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--text-body); letter-spacing: -0.024em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
[class*="irl-"], [class*="irl-"]::before, [class*="irl-"]::after { box-sizing: border-box; }
[class*="irl-"] h1, [class*="irl-"] h2, [class*="irl-"] h3, [class*="irl-"] p, [class*="irl-"] figure, [class*="irl-"] ul { margin: 0; }
[class*="irl-"] :is(h1, h2, h3), .large-title, .display-xl, .display-l, .title-1, .title-2, .title-3 { text-wrap: balance; }
button[class*="irl-"] { font: inherit; letter-spacing: inherit; -webkit-tap-highlight-color: transparent; }
.numeral-xl, .numeral-l, .numeral-m, .numeral-s, .code, .irl-tnum { font-variant-numeric: tabular-nums; }
.irl-icon { display: inline-block; flex: none; vertical-align: middle; }
.irl-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.irl-muted { color: var(--ink-2); }
.irl-ink { color: var(--ink); }
.irl-center { text-align: center; }
.irl-placeholder { color: var(--ink-3); }
.irl-danger, .irl-danger-ink { color: var(--danger); }
.irl-accent-ink { color: var(--accent-text); }
.irl-attention-ink { color: var(--attention); }
.irl-inline { display: inline-flex; align-items: center; gap: var(--space-6); }
.irl-linkbtn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); min-height: 32px; padding: 0 2px; border: 0; background: none; color: var(--accent-text); cursor: pointer; border-radius: var(--radius-xs); }
.irl-linkbtn:active { opacity: .55; }
.irl-linkbtn:disabled { color: var(--ink-disabled); cursor: default; }
:where(button, a, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.irl-tone--accent { background: var(--accent-soft); color: var(--accent-text); }
.irl-tone--verified { background: var(--verified-soft); color: var(--verified); }
.irl-tone--checking { background: var(--checking-soft); color: var(--checking); }
.irl-tone--attention { background: var(--attention-soft); color: var(--attention); }
.irl-tone--danger { background: var(--danger-soft); color: var(--danger); }
.irl-tone--freeze { background: var(--freeze-soft); color: var(--freeze); }
.irl-tone--muted { background: var(--fill); color: var(--ink-2); }
.irl-tone-ink--accent { color: var(--accent-text); }
.irl-tone-ink--checking { color: var(--checking); }
.irl-tone-ink--freeze { color: var(--freeze); }
.irl-tone-ink--muted { color: var(--ink-2); }

.irl-pill { display: inline-flex; align-items: center; gap: var(--space-4); height: 26px; padding: 0 10px 0 8px; border-radius: var(--radius-full); white-space: nowrap; }
.irl-pill--accent { background: var(--accent-soft); color: var(--accent-text); }
.irl-pill--verified { background: var(--verified-soft); color: var(--verified); }
.irl-pill--checking { background: var(--checking-soft); color: var(--checking); }
.irl-pill--attention { background: var(--attention-soft); color: var(--attention); }
.irl-pill--danger { background: var(--danger-soft); color: var(--danger); }
.irl-pill--freeze { background: var(--freeze-soft); color: var(--freeze); }
.irl-pill--muted { background: var(--fill); color: var(--ink-2); }
.irl-pill--ink { background: var(--surface-inverse); color: var(--ink-inverse); padding: 0 10px; }

.irl-row__tile { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; }
.irl-tile--neutral { background: var(--fill); color: var(--ink); }
.irl-tile--accent { background: var(--accent); color: var(--on-accent); }
.irl-tile--verified { background: var(--verified-soft); color: var(--verified); }
.irl-tile--checking { background: var(--checking-soft); color: var(--checking); }
.irl-tile--danger { background: var(--danger-soft); color: var(--danger); }
.irl-tile--freeze { background: var(--freeze-soft); color: var(--freeze); }
.irl-tile--muted { background: var(--fill); color: var(--ink-2); }
.irl-tile--ink { background: var(--surface-inverse); color: var(--ink-inverse); }

@keyframes irl-rotate { to { transform: rotate(360deg); } }
@keyframes irl-draw { to { stroke-dashoffset: 0; } }
@keyframes irl-blink { 50% { opacity: 0; } }
@keyframes irl-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes irl-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes irl-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes irl-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes irl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes irl-ripple { from { transform: translate(-50%, -50%) scale(.2); opacity: .5; } to { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } }
@keyframes irl-pulse { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes irl-indet { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes irl-scan { 0% { top: 4%; } 50% { top: 92%; } 100% { top: 4%; } }
@keyframes irl-streak-in { from { transform: translate(-14px, 8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes irl-breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes irl-slide-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes irl-zoom-in { from { transform: scale(1.06); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes irl-burst { 0% { transform: rotate(var(--a)) translateY(-40px) scaleY(.2); opacity: 0; } 40% { opacity: 1; } 70% { transform: rotate(var(--a)) translateY(-100px) scaleY(1.08); } 100% { transform: rotate(var(--a)) translateY(-92px) scaleY(1); opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  [class*="irl-"] { transition-duration: var(--duration-fast) !important; }
  .irl-skel, .irl-verify__scan, .irl-celebrate__streak, .irl-tap__ripple, .irl-map__pulse, .irl-checkin__dot::after, .irl-loader path { animation: none !important; }
}
.irl-logo { display: inline-block; flex: none; overflow: visible; }
.irl-logo--animate .irl-logo__lower, .irl-logo--animate .irl-logo__symbol { animation: irl-streak-in var(--duration-slow) var(--ease-spring) both; }
.irl-logo--animate .irl-logo__upper { animation: irl-streak-in var(--duration-slow) var(--ease-spring) 120ms both; }
.irl-logo--animate .irl-logo__word { animation: irl-fade var(--duration-slow) var(--ease-standard) 240ms both; }
.irl-appicon { display: inline-block; flex: none; }
.irl-appicon--shadow { filter: drop-shadow(0 1px 1.5px #00000026) drop-shadow(0 6px 14px #0000001f); }
.irl-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; margin: 0; border: 0; border-radius: var(--radius-full); background: none; color: inherit; cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none; -webkit-user-select: none;
  transition: transform var(--duration-press) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
.irl-btn--large { height: var(--size-button-lg); padding: 0 var(--space-24); min-width: 128px; }
.irl-btn--medium { height: var(--size-button-md); padding: 0 var(--space-20); }
.irl-btn--compact { height: var(--size-button-sm); padding: 0 var(--space-12); }
.irl-btn--compact::after { content: ''; position: absolute; inset: -6px -2px; }
.irl-btn--full { width: 100%; }
.irl-btn__content { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); }
.irl-btn--compact .irl-btn__content { gap: var(--space-6); }
.irl-btn--loading .irl-btn__content { visibility: hidden; }
.irl-btn__spinner { position: absolute; inset: 0; display: grid; place-items: center; }
.irl-btn:active:not(:disabled), .irl-btn.irl-is-pressed { transform: scale(.97); }
.irl-btn:focus-visible, .irl-btn.irl-is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }

.irl-btn--primary { background: var(--accent); color: var(--on-accent); }
.irl-btn--primary:active:not(:disabled), .irl-btn--primary.irl-is-pressed { background: var(--accent-pressed); }
.irl-btn--secondary { background: var(--fill); color: var(--ink); }
.irl-btn--secondary:active:not(:disabled), .irl-btn--secondary.irl-is-pressed { background: var(--fill-strong); }
.irl-btn--tertiary { background: var(--accent-soft); color: var(--accent-text); }
.irl-btn--tertiary:active:not(:disabled), .irl-btn--tertiary.irl-is-pressed { filter: brightness(.95) saturate(1.1); }
.irl-btn--text { background: transparent; color: var(--accent-text); padding-left: var(--space-12); padding-right: var(--space-12); min-width: 0; }
.irl-btn--text:active:not(:disabled), .irl-btn--text.irl-is-pressed { opacity: .5; transform: none; }
.irl-btn--destructive { background: var(--danger); color: var(--on-danger); }
.irl-btn--destructive:active:not(:disabled), .irl-btn--destructive.irl-is-pressed { filter: brightness(.92); }
.irl-btn--glass { background: var(--glass); color: var(--ink); box-shadow: inset 0 0 0 1px var(--glass-line); -webkit-backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate)); backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate)); }
.irl-btn--overlay { background: var(--scrim-media); color: var(--on-camera); -webkit-backdrop-filter: blur(var(--material-blur)); backdrop-filter: blur(var(--material-blur)); }
.irl-btn--danger.irl-btn--text, .irl-btn--danger.irl-btn--secondary { color: var(--danger); }
.irl-btn--danger.irl-btn--tertiary { background: var(--danger-soft); color: var(--danger); }
.irl-btn:disabled:not(.irl-btn--loading):not(.irl-btn--text) { background: var(--fill); color: var(--ink-disabled); box-shadow: none; cursor: not-allowed; filter: none; }
.irl-btn--text:disabled { color: var(--ink-disabled); cursor: not-allowed; }
.irl-btn--loading { cursor: progress; }
.irl-btn--success.irl-btn--primary { background: var(--verified); color: var(--on-verified); }
.irl-btn--success.irl-btn--secondary, .irl-btn--success.irl-btn--tertiary, .irl-btn--success.irl-btn--text { color: var(--verified); }
.irl-btn--success .irl-btn__check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: irl-draw var(--duration-base) var(--ease-standard) 60ms forwards; }

.irl-iconbtn { position: relative; display: inline-grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: transform var(--duration-press) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.irl-iconbtn--large { width: var(--size-hit); height: var(--size-hit); }
.irl-iconbtn--medium { width: 36px; height: 36px; }
.irl-iconbtn--small { width: 30px; height: 30px; }
.irl-iconbtn--medium::after, .irl-iconbtn--small::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
.irl-iconbtn:active:not(:disabled), .irl-iconbtn.irl-is-pressed { transform: scale(.92); }
.irl-iconbtn--plain:active:not(:disabled), .irl-iconbtn--plain.irl-is-pressed { background: var(--fill); }
.irl-iconbtn--filled { background: var(--fill); }
.irl-iconbtn--filled:active:not(:disabled) { background: var(--fill-strong); }
.irl-iconbtn--tinted { background: var(--accent-soft); color: var(--accent-text); }
.irl-iconbtn--primary { background: var(--accent); color: var(--on-accent); }
.irl-iconbtn--glass { background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line), var(--shadow-float); -webkit-backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate)); backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate)); }
.irl-iconbtn--overlay { background: var(--scrim-media); color: var(--on-camera); -webkit-backdrop-filter: blur(var(--material-blur)); backdrop-filter: blur(var(--material-blur)); }
.irl-iconbtn:disabled { color: var(--ink-disabled); cursor: not-allowed; }
.irl-iconbtn.irl-is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.irl-iconbtn__badge { position: absolute; top: 3px; right: 3px; min-width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }

.irl-toggle { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-6); flex: none; height: 36px; padding: 0 var(--space-16) 0 var(--space-12); border: 0; border-radius: var(--radius-full); background: var(--fill); color: var(--ink); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-press) var(--ease-standard); }
.irl-toggle--small { height: 32px; }
.irl-toggle--icon { width: 36px; padding: 0; }
.irl-toggle--small.irl-toggle--icon { width: 32px; }
.irl-toggle:active:not(:disabled) { transform: scale(.95); }
.irl-toggle--on { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1.5px var(--accent-text); }
.irl-toggle--overlay { background: var(--scrim-media); color: var(--on-camera); -webkit-backdrop-filter: blur(var(--material-blur)); backdrop-filter: blur(var(--material-blur)); }
.irl-toggle--overlay.irl-toggle--on { background: var(--knob); color: var(--camera); box-shadow: none; }
.irl-toggle:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }

.irl-btngroup--stack { display: flex; flex-direction: column; gap: var(--space-12); }
.irl-btngroup--stack > .irl-btn { width: 100%; }
.irl-btngroup--row { display: flex; gap: var(--space-12); }
.irl-btngroup--row > .irl-btn { flex: 1 1 0; min-width: 0; }
.irl-btngroup--joined { display: inline-flex; align-items: center; padding: 3px; border-radius: var(--radius-full); background: var(--fill); }
.irl-btngroup__seg { position: relative; display: inline-flex; align-items: center; gap: var(--space-6); height: 38px; padding: 0 var(--space-12); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
.irl-btngroup__seg + .irl-btngroup__seg::before { content: ''; position: absolute; left: -1px; top: 11px; bottom: 11px; width: 1px; background: var(--line-strong); opacity: .5; }
.irl-btngroup__seg:active:not(:disabled) { background: var(--fill-strong); }
.irl-btngroup__seg:disabled { color: var(--ink-disabled); }

.irl-auth { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: var(--size-button-lg); border: 0; border-radius: var(--radius-full); cursor: pointer; transition: transform var(--duration-press) var(--ease-standard), filter var(--duration-fast) var(--ease-standard); }
.irl-auth__content { display: inline-flex; align-items: center; gap: 10px; }
.irl-auth__mark { display: inline-grid; place-items: center; width: 20px; height: 20px; }
.irl-auth--apple { background: var(--surface-inverse); color: var(--ink-inverse); }
.irl-auth--google { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.irl-auth--email { background: var(--fill); color: var(--ink); }
.irl-auth:active:not(:disabled) { transform: scale(.98); filter: brightness(.96); }
.irl-auth--loading .irl-auth__content { visibility: hidden; }
.irl-auth:disabled:not(.irl-auth--loading) { opacity: var(--opacity-disabled); cursor: not-allowed; }
.irl-field { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.irl-field__labelrow { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-12); }
.irl-field__label { color: var(--ink-2); padding: 0 var(--space-4); }
.irl-input { display: flex; align-items: center; gap: var(--space-8); min-height: var(--size-field); padding: 0 var(--space-12) 0 var(--space-16); border: 0; border-radius: var(--radius-md); background: var(--fill); color: var(--ink); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.irl-input--focus { box-shadow: inset 0 0 0 2px var(--focus); }
.irl-field--error .irl-input { box-shadow: inset 0 0 0 2px var(--danger); }
.irl-input--disabled { opacity: var(--opacity-disabled); }
.irl-input--readonly { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.irl-input__el { flex: 1; min-width: 0; margin: 0; padding: 15px 0; border: 0; outline: 0; background: transparent; color: inherit; font: var(--text-body); letter-spacing: -0.024em; -webkit-appearance: none; appearance: none; }
.irl-input__el:focus-visible { outline: 0; }
.irl-input__el::placeholder { color: var(--ink-3); opacity: 1; }
.irl-input__el:disabled { cursor: not-allowed; }
.irl-input__prefix { color: var(--ink-2); margin-right: calc(-1 * var(--space-6)); }
.irl-input__lead { color: var(--ink-2); }
.irl-input__ok { color: var(--verified); }
.irl-input__bad { color: var(--danger); }
.irl-input__clear { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-right: -4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; }
.irl-input--area { align-items: stretch; padding-top: 0; padding-bottom: 0; }
.irl-input--area .irl-input__el { resize: none; padding: 14px 0; min-height: 96px; line-height: 22px; }
.irl-field__msgrow { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-12); padding: 0 var(--space-4); }
.irl-field__msg { display: flex; align-items: flex-start; gap: var(--space-6); color: var(--ink-2); }
.irl-field__msg .irl-icon { margin-top: 2px; }
.irl-field__msg--error { color: var(--danger); }
.irl-field__msg--success { color: var(--verified); }
.irl-field__counter { flex: none; color: var(--ink-2); }

.irl-username__sugg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin-top: var(--space-12); padding: 0 var(--space-4); }

.irl-code { display: flex; flex-direction: column; gap: var(--space-8); }
.irl-code__cells { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-8); cursor: text; }
.irl-code__cell { position: relative; display: grid; place-items: center; height: 62px; border-radius: var(--radius-md); background: var(--fill); color: var(--ink); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.irl-code__cell--filled { animation: irl-pop var(--duration-base) var(--ease-spring); }
.irl-code__cell--active { box-shadow: inset 0 0 0 2px var(--focus); background: var(--surface); }
.irl-code__caret { width: 2px; height: 28px; border-radius: 1px; background: var(--accent-text); animation: irl-blink 1s steps(1) infinite; }
.irl-code--error .irl-code__cell, .irl-code--expired .irl-code__cell { box-shadow: inset 0 0 0 2px var(--danger); }
.irl-code--error .irl-code__cells { animation: irl-shake 380ms var(--ease-standard); }
.irl-code--expired .irl-code__cell { color: var(--ink-3); }
.irl-code--verified .irl-code__cell { box-shadow: inset 0 0 0 2px var(--verified); color: var(--verified); }
.irl-code--verifying .irl-code__cell { opacity: .45; }
.irl-code__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; }
.irl-code__overlay { position: absolute; inset: 0; display: grid; place-items: center; }
.irl-code__msgrow { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 32px; padding: 0 var(--space-4); }
.irl-code__msgrow .irl-linkbtn { min-height: 28px; }

.irl-search { display: flex; align-items: center; gap: var(--space-12); }
.irl-search__box { flex: 1; display: flex; align-items: center; gap: var(--space-8); height: var(--size-hit); padding: 0 var(--space-8) 0 var(--space-12); border-radius: var(--radius-full); background: var(--fill); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--duration-fast) var(--ease-standard); }
.irl-search--focus .irl-search__box { box-shadow: inset 0 0 0 2px var(--focus); }
.irl-search__icon { color: var(--ink-2); }
.irl-search__el { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: var(--text-body); letter-spacing: -0.024em; -webkit-appearance: none; appearance: none; }
.irl-search__el::placeholder { color: var(--ink-3); opacity: 1; }
.irl-search__el::-webkit-search-cancel-button { display: none; }

.irl-wheel { position: relative; display: flex; justify-content: center; height: 216px; padding: 0 var(--space-8); overflow: hidden; border-radius: var(--radius-xl); background: var(--surface); }
.irl-wheel::before, .irl-wheel::after { content: ''; position: absolute; left: 0; right: 0; height: 72px; z-index: 2; pointer-events: none; }
.irl-wheel::before { top: 0; background: linear-gradient(var(--surface), transparent); }
.irl-wheel::after { bottom: 0; background: linear-gradient(transparent, var(--surface)); }
.irl-wheel__band { position: absolute; left: var(--space-8); right: var(--space-8); top: 50%; height: 36px; margin-top: -18px; border-radius: 10px; background: var(--fill); }
.irl-wheel__col { position: relative; height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; outline-offset: -2px; }
.irl-wheel__col::-webkit-scrollbar { display: none; }
.irl-wheel__pad { height: 90px; }
.irl-wheel__item { display: flex; align-items: center; justify-content: center; height: 36px; scroll-snap-align: center; font-size: 21px; line-height: 25px; letter-spacing: -0.02em; color: var(--ink); cursor: pointer; transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); white-space: nowrap; }
.irl-wheel__item--on { font-weight: 600; }

.irl-menupicker { position: relative; display: flex; flex-direction: column; gap: var(--space-8); }
.irl-menupicker > .irl-field__label { padding: 0 var(--space-4); }
.irl-menupicker__btn { justify-content: space-between; width: 100%; padding-right: var(--space-16); cursor: pointer; text-align: left; }
.irl-menupicker__menu { position: absolute; top: 100%; left: 0; right: 0; margin-top: var(--space-6); z-index: 5; }
.irl-check { display: flex; align-items: flex-start; gap: var(--space-12); padding: var(--space-8) 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.irl-check__box { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-strong); color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-press) var(--ease-standard); }
.irl-check__box--on { background: var(--accent); box-shadow: none; color: var(--on-accent); }
.irl-check__tick { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset var(--duration-base) var(--ease-standard) 40ms; }
.irl-check__box--on .irl-check__tick { stroke-dashoffset: 0; }
.irl-check:active .irl-check__box { transform: scale(.88); }
.irl-check input:focus-visible + .irl-check__box, .irl-check.irl-is-focus .irl-check__box { outline: 2px solid var(--focus); outline-offset: 2px; }
.irl-check__text { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.irl-check--disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }

.irl-radio { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-xl); background: var(--surface); }
.irl-radio__row { position: relative; display: flex; align-items: center; gap: var(--space-12); min-height: var(--size-row); padding: var(--space-12) var(--space-16); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
.irl-radio__row + .irl-radio__row::before { content: ''; position: absolute; top: 0; right: 0; left: var(--space-16); height: 1px; background: var(--line); }
.irl-radio--radio .irl-radio__row + .irl-radio__row::before { left: 50px; }
.irl-radio__row:active { background: var(--fill); }
.irl-radio__row:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius-md); }
.irl-radio__dot { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-strong); transition: box-shadow var(--duration-fast) var(--ease-spring); }
.irl-radio__row--on .irl-radio__dot { box-shadow: inset 0 0 0 7px var(--accent-strong); }
.irl-radio__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.irl-radio__tick { color: var(--accent-text); }
.irl-radio__row--disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }

.irl-switch { position: relative; display: inline-flex; flex: none; width: 51px; height: 31px; }
.irl-switch__input { position: absolute; inset: -7px; z-index: 1; width: calc(100% + 14px); height: calc(100% + 14px); margin: 0; opacity: 0; cursor: pointer; }
.irl-switch__track { position: relative; width: 100%; height: 100%; border-radius: var(--radius-full); background: var(--fill-strong); transition: background-color var(--duration-base) var(--ease-standard); }
.irl-switch__thumb { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: var(--radius-full); background: var(--knob); box-shadow: var(--shadow-knob); transition: transform var(--duration-base) var(--ease-spring), width var(--duration-fast) var(--ease-standard); }
.irl-switch--on .irl-switch__track { background: var(--accent); }
.irl-switch--on .irl-switch__thumb { transform: translateX(20px); }
.irl-switch__input:active + .irl-switch__track .irl-switch__thumb { width: 33px; }
.irl-switch--on .irl-switch__input:active + .irl-switch__track .irl-switch__thumb { transform: translateX(14px); }
.irl-switch__input:focus-visible + .irl-switch__track { outline: 2px solid var(--focus); outline-offset: 2px; }
.irl-switch--disabled { opacity: var(--opacity-disabled); }
.irl-switch--disabled .irl-switch__input { cursor: not-allowed; }
.irl-switch--loading .irl-switch__thumb::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 2px solid var(--fill-strong); border-top-color: var(--ink-2); animation: irl-rotate .8s linear infinite; }

.irl-seg { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 3px; border-radius: var(--radius-full); background: var(--fill); isolation: isolate; }
.irl-seg__thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n)); border-radius: var(--radius-full); background: var(--segment-thumb); box-shadow: var(--shadow-knob); transform: translateX(calc(var(--i) * 100%)); transition: transform var(--duration-base) var(--ease-spring); z-index: -1; }
.irl-seg__opt { display: flex; align-items: center; justify-content: center; gap: var(--space-6); height: 34px; padding: 0 var(--space-12); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink-2); cursor: pointer; transition: color var(--duration-fast) var(--ease-standard); white-space: nowrap; }
.irl-seg--small .irl-seg__opt { height: 28px; }
.irl-seg__opt--on { color: var(--ink); }

.irl-chip { display: inline-flex; align-items: center; flex: none; border-radius: var(--radius-full); background: var(--fill); color: var(--ink); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-press) var(--ease-standard); }
.irl-chip__btn { display: inline-flex; align-items: center; gap: var(--space-6); height: 34px; padding: 0 var(--space-12); border: 0; border-radius: inherit; background: transparent; color: inherit; cursor: pointer; }
.irl-chip--small .irl-chip__btn { height: 30px; padding: 0 var(--space-12); }
.irl-chip:active { transform: scale(.96); }
.irl-chip--on { background: var(--accent-soft); color: var(--accent-text); }
.irl-chip--suggestion { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.irl-chip--status { cursor: default; }
.irl-chip__x { display: grid; place-items: center; width: 26px; height: 26px; margin: 0 4px 0 -6px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.irl-chip--disabled { opacity: var(--opacity-disabled); }
.irl-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); font-variant-numeric: tabular-nums; animation: irl-pop var(--duration-base) var(--ease-spring); }
.irl-badge--danger { background: var(--danger); color: var(--on-danger); }
.irl-badge--neutral { background: var(--fill-strong); color: var(--ink); }
.irl-badge--dot { min-width: 10px; width: 10px; height: 10px; padding: 0; }

.irl-tabbar { display: flex; justify-content: center; padding: 0 var(--space-20); pointer-events: none; }
.irl-tabbar__glass { display: flex; align-items: stretch; gap: 2px; height: var(--size-tabbar); padding: 4px; border-radius: var(--radius-full); background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line), var(--shadow-float); -webkit-backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate)); backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate)); pointer-events: auto; transition: width var(--duration-slow) var(--ease-spring); }
.irl-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 96px; padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink-2); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-press) var(--ease-standard); }
.irl-tab:active { transform: scale(.94); }
.irl-tab--on { background: var(--fill); color: var(--accent-text); }
.irl-tab__icon { position: relative; display: inline-flex; }
.irl-tab__badge { position: absolute; top: -4px; right: -10px; box-shadow: 0 0 0 2px var(--surface); }
.irl-tab__badge.irl-badge--dot { top: -2px; right: -4px; }
.irl-tabbar--min .irl-tabbar__glass { height: 52px; }
.irl-tabbar--min .irl-tab { width: 52px; }

.irl-navbtn { display: inline-flex; align-items: center; justify-content: center; gap: 2px; flex: none; min-width: var(--size-hit); height: var(--size-hit); padding: 0; border: 0; border-radius: var(--radius-full); color: var(--ink); cursor: pointer; transition: transform var(--duration-press) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.irl-navbtn--label { padding: 0 var(--space-16) 0 var(--space-8); }
.irl-navbtn:active { transform: scale(.92); }
.irl-navbtn--glass { background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line), var(--shadow-float); -webkit-backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate)); backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate)); }
.irl-navbtn--fill { width: 32px; min-width: 32px; height: 32px; background: var(--fill); color: var(--ink-2); }
.irl-navbtn--overlay { background: var(--scrim-media); color: var(--on-camera); -webkit-backdrop-filter: blur(var(--material-blur)); backdrop-filter: blur(var(--material-blur)); }
.irl-navbtn--lg { min-width: 52px; height: 52px; }
.irl-navbtn--plain { background: transparent; color: var(--accent-text); }

.irl-navbar { position: relative; padding: 0 var(--space-20); }
.irl-navbar__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-8); height: 52px; }
.irl-navbar__side { display: flex; align-items: center; gap: var(--space-8); }
.irl-navbar__side--end { justify-content: flex-end; }
.irl-navbar__title { opacity: 0; transform: translateY(6px); transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; text-align: center; }
.irl-navbar__title--on { opacity: 1; transform: none; }
.irl-navbar__large { padding: var(--space-4) 0 var(--space-8); transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-slow) var(--ease-standard); transform-origin: left center; }
.irl-navbar__large--off { opacity: 0; transform: scale(.94) translateY(-8px); height: 0; padding: 0; overflow: hidden; }
.irl-navbar--collapsed { background: var(--glass); box-shadow: 0 1px 0 var(--glass-line); -webkit-backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate)); backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate)); }
.irl-navbar--transparent .irl-navbar__title { color: var(--on-camera); }

.irl-toolbar { display: inline-flex; align-items: center; gap: var(--space-4); height: 56px; padding: 6px; border-radius: var(--radius-full); }
.irl-toolbar--glass { background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line), var(--shadow-float); -webkit-backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate)); backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate)); color: var(--ink); }
.irl-toolbar--overlay { background: var(--scrim-media); color: var(--on-camera); -webkit-backdrop-filter: blur(var(--material-blur)); backdrop-filter: blur(var(--material-blur)); }
.irl-toolbar__item { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-6); min-width: var(--size-hit); height: var(--size-hit); padding: 0 var(--space-12); border: 0; border-radius: var(--radius-full); background: transparent; color: inherit; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-press) var(--ease-standard); }
.irl-toolbar__item:active:not(:disabled) { transform: scale(.94); background: var(--fill); }
.irl-toolbar--overlay .irl-toolbar__item:active { background: var(--scrim-media); }
.irl-toolbar__item--primary { background: var(--accent); color: var(--on-accent); padding: 0 var(--space-16); }
.irl-toolbar__item:disabled { color: var(--ink-disabled); }
.irl-toolbar__spacer { flex: 1; min-width: var(--space-8); }

.irl-row { position: relative; display: flex; align-items: center; gap: var(--space-12); width: 100%; min-height: var(--size-row); margin: 0; padding: 10px var(--space-16); border: 0; background: var(--surface); color: var(--ink); text-align: left; }
.irl-row--press { cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
.irl-row--press:active { background: var(--fill); }
.irl-row--disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.irl-row__lead { display: inline-flex; flex: none; }
.irl-row__text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.irl-row__title { overflow: hidden; text-overflow: ellipsis; }
.irl-row__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irl-row__sub--multi { white-space: normal; }
.irl-row__value { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irl-row__chev { flex: none; color: var(--ink-3); }
.irl-row__tick { flex: none; color: var(--accent-text); }
label.irl-row { cursor: pointer; }
.irl-overlay { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: flex-end; }
.irl-overlay--center { justify-content: center; align-items: center; }
.irl-scrim { position: absolute; inset: 0; background: var(--scrim); animation: irl-fade var(--duration-base) var(--ease-standard); }

.irl-menu { min-width: 240px; max-width: 320px; padding: 6px; border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-overlay); animation: irl-zoom-in var(--duration-base) var(--ease-spring); transform-origin: top right; }
.irl-menu__title { padding: 8px 12px 6px; color: var(--ink-2); }
.irl-menu__section + .irl-menu__section { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.irl-menu__item { display: flex; align-items: center; gap: var(--space-8); width: 100%; min-height: var(--size-hit); padding: 8px 12px 8px 4px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
.irl-menu__item:hover, .irl-menu__item:active { background: var(--fill); }
.irl-menu__item:disabled { color: var(--ink-disabled); cursor: not-allowed; background: transparent; }
.irl-menu__item--danger { color: var(--danger); }
.irl-menu__check { display: inline-grid; place-items: center; flex: none; width: 22px; color: var(--accent-text); }
.irl-menu__text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.irl-menu__icon { flex: none; color: inherit; opacity: .9; }

.irl-ctx { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: var(--space-20); }
.irl-ctx__backdrop { position: absolute; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: irl-fade var(--duration-base) var(--ease-standard); }
.irl-ctx__stack { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-12); width: 100%; max-width: 340px; }
.irl-ctx__preview { border-radius: var(--radius-xl); box-shadow: var(--shadow-overlay); animation: irl-pop var(--duration-slow) var(--ease-spring); overflow: hidden; }
.irl-ctx__menu { align-self: flex-start; transform-origin: top left; }

.irl-popover { position: relative; z-index: 10; width: max-content; max-width: 280px; margin-top: 12px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-overlay); animation: irl-pop var(--duration-base) var(--ease-spring); display: flex; flex-direction: column; gap: var(--space-6); white-space: normal; text-align: left; }
.irl-popover__arrow { position: absolute; top: -7px; left: var(--arrow-x); width: 16px; height: 16px; margin-left: -8px; background: var(--surface-raised); transform: rotate(45deg); border-radius: 3px; }
.irl-popover--top { margin-top: 0; margin-bottom: 12px; }
.irl-popover--top .irl-popover__arrow { top: auto; bottom: -7px; }
.irl-popover__body { color: var(--ink-2); }
.irl-popover .irl-linkbtn { align-self: flex-start; }

.irl-asheet { position: relative; display: flex; flex-direction: column; gap: var(--space-8); margin: 0 var(--space-8) var(--space-8); animation: irl-slide-up var(--duration-slow) var(--ease-sheet); }
.irl-asheet__group { overflow: hidden; border-radius: var(--radius-2xl); background: var(--surface-raised); box-shadow: var(--shadow-sheet); }
.irl-asheet__head { display: flex; flex-direction: column; gap: 2px; padding: 14px 20px; text-align: center; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.irl-asheet__btn { display: flex; align-items: center; justify-content: center; gap: var(--space-8); width: 100%; min-height: 58px; padding: 0 20px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--accent-text); cursor: pointer; }
.irl-asheet__head + .irl-asheet__btn, .irl-asheet__btn:first-child { border-top: 0; }
.irl-asheet__btn:active { background: var(--fill); }
.irl-asheet__btn.irl-danger { color: var(--danger); }
.irl-asheet__cancel { width: 100%; min-height: 58px; border: 0; border-radius: var(--radius-2xl); background: var(--surface-raised); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sheet); }
.irl-asheet__cancel:active { background: var(--fill); }

.irl-sheet { position: relative; display: flex; flex-direction: column; height: calc(var(--detent) * 100%); min-height: 200px; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; background: var(--surface-raised); box-shadow: var(--shadow-sheet); transition: height var(--duration-slow) var(--ease-sheet); animation: irl-slide-up var(--duration-slow) var(--ease-sheet); overflow: hidden; }
.irl-sheet--small { margin: 0 var(--space-8) var(--space-8); border-radius: var(--radius-2xl); }
.irl-sheet__grab { display: flex; justify-content: center; align-items: center; height: 22px; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; flex: none; }
.irl-sheet__grab span { width: 40px; height: 5px; border-radius: var(--radius-full); background: var(--fill-strong); }
.irl-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-12); padding: 4px var(--space-20) var(--space-12); }
.irl-sheet__head--start { justify-content: flex-start; align-items: center; }
.irl-sheet__head--start .irl-sheet__titles { flex: 1; min-width: 0; }
.irl-sheet__titles { display: flex; flex-direction: column; gap: 2px; }
.irl-sheet__body { flex: 1; overflow: auto; padding: 0 var(--space-20) var(--space-16); }
.irl-sheet__foot { padding: var(--space-12) var(--space-20) var(--space-32); border-top: 1px solid var(--line); }

.irl-alert { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); width: 300px; padding: var(--space-24) var(--space-20) var(--space-16); border-radius: var(--radius-2xl); background: var(--surface-raised); box-shadow: var(--shadow-overlay); text-align: center; animation: irl-zoom-in var(--duration-base) var(--ease-spring); }
.irl-alert__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--space-6); border-radius: 50%; background: var(--fill); color: var(--ink); }
.irl-alert__msg { color: var(--ink-2); }
.irl-alert__actions { display: flex; gap: var(--space-8); width: 100%; margin-top: var(--space-16); }
.irl-alert__actions > .irl-btn { flex: 1 1 0; min-width: 0; padding: 0 var(--space-12); }
.irl-alert__actions--stack { flex-direction: column; }

.irl-confirm { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); margin: 0 var(--space-8) var(--space-8); padding: var(--space-24) var(--space-20) var(--space-20); border-radius: var(--radius-2xl); background: var(--surface-raised); box-shadow: var(--shadow-sheet); animation: irl-slide-up var(--duration-slow) var(--ease-sheet); }
.irl-confirm__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-4); border-radius: 50%; }
.irl-confirm__titles { display: flex; flex-direction: column; gap: 2px; }
.irl-confirm__body { display: flex; flex-direction: column; gap: var(--space-8); margin-bottom: var(--space-8); }
.irl-confirm__body .irl-linkbtn { min-height: 0; padding: 0; font: inherit; font-weight: 600; vertical-align: baseline; }
.irl-confirm__error { align-self: stretch; }
.irl-confirm__actions { display: flex; flex-direction: column; gap: var(--space-8); width: 100%; margin-top: var(--space-8); }

.irl-modal { position: relative; display: flex; flex-direction: column; height: calc(100% - 64px); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; background: var(--bg); box-shadow: var(--shadow-sheet); animation: irl-slide-up var(--duration-slow) var(--ease-sheet); overflow: hidden; }
.irl-modal__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 56px; padding: 0 var(--space-20); }
.irl-modal__bar > :last-child { justify-self: end; }
.irl-modal__bar > :first-child { justify-self: start; }
.irl-modal__body { flex: 1; overflow: auto; padding: var(--space-8) var(--space-20) var(--space-32); }

.irl-cover { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); animation: irl-fade var(--duration-base) var(--ease-standard); overflow: hidden; }
.irl-cover--camera { background: var(--camera); color: var(--on-camera); }
.irl-cover--accent { background: var(--accent); color: var(--on-accent); }
.irl-cover__close { position: absolute; top: 58px; left: var(--space-20); z-index: 5; }
.irl-card { display: block; width: 100%; margin: 0; border: 0; border-radius: var(--radius-xl); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); text-align: left; }
.irl-card--regular { padding: var(--space-16); }
.irl-card--roomy { padding: var(--space-20); }
.irl-card--none { padding: 0; overflow: hidden; }
.irl-card--raised { background: var(--surface-raised); box-shadow: var(--shadow-overlay); }
.irl-card--sunken { background: var(--fill); box-shadow: none; }
.irl-card--press { cursor: pointer; transition: transform var(--duration-press) var(--ease-standard); }
.irl-card--press:active { transform: scale(.98); }

.irl-quest { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; animation: irl-rise var(--duration-base) var(--ease-standard) both; }
.irl-quest__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); min-height: 26px; }
.irl-quest__mode { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.irl-quest__main { display: flex; align-items: flex-start; gap: var(--space-12); }
.irl-quest__text { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.irl-quest__title { text-wrap: balance; }
.irl-quest__title--dim { color: var(--ink-2); }
.irl-quest__detail { text-wrap: pretty; }
.irl-quest__thumb { display: inline-flex; flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: var(--radius-sm); }
.irl-quest__thumb > svg, .irl-quest__thumb > img { width: 100%; height: 100%; object-fit: cover; }
.irl-quest__foot { display: flex; align-items: center; gap: var(--space-16); }
.irl-quest__band { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-6) var(--space-8); margin: 0 calc(-1 * var(--space-16)) calc(-1 * var(--space-16)); padding: var(--space-12) var(--space-16); }
.irl-quest__band .footnote { flex: 1; min-width: 140px; }
.irl-quest__band--submitted { background: var(--checking-soft); color: var(--checking); }
.irl-quest__band--verified { background: var(--verified-soft); color: var(--verified); }
.irl-quest__band--expired { background: var(--fill); color: var(--ink-2); }
.irl-quest__band--unavailable { background: var(--attention-soft); color: var(--attention); }
.irl-quest--expired, .irl-quest--unavailable { box-shadow: none; background: var(--surface); }
.irl-quest--expired .irl-quest__mode, .irl-quest--unavailable .irl-quest__mode { color: var(--ink-3); }
.irl-quest--compact { gap: var(--space-8); }
.irl-quest--bonus { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.irl-quest--bonus .irl-quest__mode { color: var(--accent-text); }

.irl-map { display: block; }
.irl-map__land { fill: var(--map-land); }
.irl-map__green { fill: var(--map-green); }
.irl-map__water { fill: var(--map-water); }
.irl-map__road { stroke: var(--map-road); stroke-linecap: round; }
.irl-map__radius { fill: var(--accent-strong); fill-opacity: .12; stroke: var(--accent-strong); stroke-width: 2; stroke-dasharray: 5 5; }
.irl-map__pulse { fill: none; stroke: var(--accent-strong); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: irl-pulse 1.8s var(--ease-standard) infinite; }
.irl-map__pin path { fill: var(--accent-strong); }
.irl-map__pinhole { fill: var(--surface); }
.irl-map__you { fill: var(--checking); stroke: var(--knob); stroke-width: 3; }
.irl-map__youhalo { fill: var(--checking); fill-opacity: .18; }

.irl-place { overflow: hidden; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.irl-place__map { position: relative; }
.irl-place__radius { position: absolute; left: var(--space-12); bottom: var(--space-12); padding: 4px 10px; border-radius: var(--radius-full); background: var(--glass); color: var(--ink); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--glass-line); }
.irl-place__body { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16); }
.irl-place__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-12); }
.irl-place__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.irl-place__dist { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 26px; padding: 0 10px; border-radius: var(--radius-full); background: var(--fill); color: var(--ink); }

.irl-grid-item { display: flex; flex-direction: column; gap: var(--space-4); padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.irl-grid-item__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-lg); background: var(--fill); transition: transform var(--duration-press) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.irl-grid-item__media > svg, .irl-grid-item__media > img, .irl-grid-item__media > .irl-ph { width: 100%; height: 100%; object-fit: cover; }
.irl-grid-item:active .irl-grid-item__media { transform: scale(.97); }
.irl-grid-item--sel .irl-grid-item__media { box-shadow: 0 0 0 3px var(--accent-strong); }
.irl-grid-item--locked .irl-grid-item__media > :first-child { opacity: .35; filter: grayscale(1); }
.irl-grid-item__lock { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-2); }
.irl-grid-item__new { position: absolute; top: 8px; left: 8px; padding: 2px 7px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); }
.irl-grid-item__title { margin-top: 2px; }

.irl-group { display: flex; flex-direction: column; gap: var(--space-6); }
.irl-group__head { padding: 0 var(--space-16); color: var(--ink-2); }
.irl-group__body { overflow: hidden; border-radius: var(--radius-xl); background: var(--surface); }
.irl-group__body > * + *::before { content: ''; position: absolute; top: 0; right: 0; left: 58px; height: 1px; background: var(--line); }
.irl-group__body > * { position: relative; }
.irl-group__body > .irl-row:not(:has(.irl-row__tile)) + .irl-row::before, .irl-group__body > .irl-nolead + *::before { left: var(--space-16); }
.irl-group__foot { padding: 0 var(--space-16); color: var(--ink-2); }

.irl-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-12); padding: 0 var(--space-4); }
.irl-divider { height: 1px; background: var(--line); }
.irl-divider--v { width: 1px; height: auto; align-self: stretch; }
.irl-divider--label { display: flex; align-items: center; gap: var(--space-12); height: auto; background: none; }
.irl-divider--label::before, .irl-divider--label::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.irl-media { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-lg); background: var(--fill); }
.irl-media > svg, .irl-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.irl-media > .irl-skel { position: absolute; inset: 0; }
.irl-media__error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-8); color: var(--ink-2); }
.irl-media__overlay { position: absolute; top: var(--space-12); left: var(--space-12); right: var(--space-12); display: flex; gap: var(--space-8); }
.irl-media__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-32) var(--space-16) var(--space-12); background: linear-gradient(transparent, var(--scrim-media)); color: var(--on-camera); }

.irl-thumb { position: relative; display: inline-grid; place-items: center; flex: none; overflow: visible; border-radius: var(--radius-sm); background: var(--fill); color: var(--ink-3); }
.irl-thumb > svg:not(.irl-icon), .irl-thumb > img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.irl-thumb > .irl-skel { border-radius: inherit; }
.irl-thumb__badge { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.irl-thumb__badge--verified { background: var(--verified); color: var(--on-verified); }
.irl-thumb__badge--checking { background: var(--checking); color: var(--surface); }
.irl-thumb__badge--error { background: var(--danger); color: var(--on-danger); }
.irl-thumb__badge--waiting { background: var(--ink-2); color: var(--surface); }

.irl-ph { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-lg); background: var(--fill); color: var(--ink-3); }
.irl-ph__pattern { position: absolute; inset: 0; width: 100%; height: 100%; }
.irl-ph__pattern path { stroke: var(--fill-strong); fill: none; }
.irl-ph__icon { position: relative; }

.irl-disc { overflow: hidden; border-radius: var(--radius-xl); background: var(--surface); }
.irl-disc__head { display: flex; align-items: center; gap: var(--space-12); width: 100%; min-height: var(--size-row); padding: 10px var(--space-16); border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.irl-disc__title { flex: 1; }
.irl-disc__chev { color: var(--ink-3); transition: transform var(--duration-base) var(--ease-spring); }
.irl-disc--open .irl-disc__chev { transform: rotate(180deg); }
.irl-disc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-base) var(--ease-standard); }
.irl-disc--open .irl-disc__panel { grid-template-rows: 1fr; }
.irl-disc__inner { overflow: hidden; padding: 0 var(--space-16); }
.irl-disc--open .irl-disc__inner { padding-bottom: var(--space-16); }

.irl-sample { display: block; width: 100%; height: 100%; }

/* Photo-optional play: private completions, the photo-verified line and the Add proof prompt. */
.irl-quest__band--verified { align-items: flex-start; }
.irl-quest__band--verified > .irl-icon { flex: none; margin-top: 1px; }
.irl-quest__band--private { flex-direction: column; align-items: stretch; gap: var(--space-12); background: var(--fill); color: var(--ink-2); }
.irl-quest__band--waiting { flex-direction: column; align-items: stretch; background: var(--fill); color: var(--ink-2); }
.irl-quest__bandrow { display: flex; align-items: flex-start; gap: var(--space-8); }
.irl-quest__bandrow > .irl-icon { flex: none; margin-top: 1px; }
.irl-quest__bandrow > .footnote { flex: 1; min-width: 0; text-wrap: pretty; }
.irl-quest__addlink { min-height: 0; padding: 0; vertical-align: baseline; }
.irl-quest__foot { flex-wrap: wrap; row-gap: var(--space-8); }
.irl-quest__foot .irl-btn + .irl-btn { margin-left: calc(-1 * var(--space-8)); }
.irl-addproof { display: flex; flex-direction: column; gap: var(--space-8); color: var(--ink); }
.irl-addproof--framed { padding: var(--space-12) var(--space-12) var(--space-12); border-radius: var(--radius-lg); background: var(--surface); }
.irl-addproof__btns { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.irl-addproof--large { gap: var(--space-12); }
.irl-addproof--large .irl-addproof__btns { flex-direction: column; }
.irl-addproof > .caption-1 { text-wrap: pretty; }
.irl-addproof--passed { flex-direction: row; align-items: flex-start; gap: var(--space-8); color: var(--ink-2); }
.irl-addproof--passed > .irl-icon { flex: none; margin-top: 1px; }
.irl-quest__band--long > .footnote { flex-basis: calc(100% - 24px); text-wrap: pretty; }
.irl-quest__band--long > .irl-rarity { margin-left: 24px; }
.irl-spinner { display: inline-grid; place-items: center; flex: none; color: var(--ink-2); }
.irl-spinner svg { animation: irl-rotate .9s steps(8) infinite; }
.irl-spinner--current { color: currentColor; }
.irl-spinner--accent { color: var(--accent-text); }
.irl-spinner--inverse { color: var(--ink-inverse); }
.irl-loader { display: inline-flex; color: var(--ink); }
.irl-loader path { fill: currentColor; }
.irl-loader__lower { animation: irl-breathe 1.2s var(--ease-standard) infinite; }
.irl-loader__upper { fill: var(--accent) !important; animation: irl-breathe 1.2s var(--ease-standard) .3s infinite; }

.irl-skel { display: block; border-radius: var(--radius-xs); background: linear-gradient(100deg, var(--fill) 30%, var(--fill-strong) 50%, var(--fill) 70%); background-size: 220% 100%; animation: irl-shimmer 1.4s linear infinite; }
.irl-skel--text { height: 12px; margin: 5px 0; }
.irl-skel--circle { border-radius: 50%; }
.irl-skel--rect { width: 100%; height: 100%; }
.irl-skel-group { display: flex; flex-direction: column; width: 100%; }

.irl-progress { display: flex; flex-direction: column; gap: var(--space-6); width: 100%; }
.irl-progress__meta { display: flex; justify-content: space-between; gap: var(--space-12); color: var(--ink-2); }
.irl-progress__track { position: relative; height: 8px; overflow: hidden; border-radius: var(--radius-full); background: var(--fill); }
.irl-progress--small .irl-progress__track { height: 6px; }
.irl-progress--large .irl-progress__track { height: 12px; }
.irl-progress__fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent-strong); transition: width var(--duration-slow) var(--ease-standard); }
.irl-progress--verified .irl-progress__fill { background: var(--verified); }
.irl-progress--checking .irl-progress__fill { background: var(--checking); }
.irl-progress--ink .irl-progress__fill { background: var(--ink); }
.irl-progress__fill--indet { width: 40%; animation: irl-indet 1.3s var(--ease-standard) infinite; }

.irl-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.irl-ring > svg { position: absolute; inset: 0; }
.irl-ring__track, .irl-ring__seg--todo { stroke: var(--fill-strong); }
.irl-ring__fill, .irl-ring__seg--done { stroke: var(--accent-strong); }
.irl-ring__fill { transition: stroke-dashoffset var(--duration-slow) var(--ease-standard); }
.irl-ring__seg--pending { stroke: var(--checking); stroke-dasharray: 3 6; }
.irl-ring__seg--soft { stroke: var(--line-strong); }
.irl-ring--verified .irl-ring__fill { stroke: var(--verified); }
.irl-ring--attention .irl-ring__fill { stroke: var(--attention); }
.irl-ring__center { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }

.irl-dots { display: inline-flex; align-items: center; gap: 6px; }
.irl-dots__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--fill-strong); transition: width var(--duration-base) var(--ease-spring), background-color var(--duration-base) var(--ease-standard); }
.irl-dots__dot--done { background: var(--ink-3); }
.irl-dots__dot--on { width: 24px; background: var(--ink); }

.irl-status { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.irl-status--pill { height: 26px; padding: 0 10px 0 8px; gap: 4px; border-radius: var(--radius-full); background: var(--fill); }
.irl-status--checking { color: var(--checking); }
.irl-status--verified { color: var(--verified); }
.irl-status--danger { color: var(--danger); }
.irl-status--attention { color: var(--attention); }
.irl-status--freeze { color: var(--freeze); }
.irl-status--accent { color: var(--accent-text); }
.irl-status--pill.irl-status--checking { background: var(--checking-soft); }
.irl-status--pill.irl-status--verified { background: var(--verified-soft); }
.irl-status--pill.irl-status--danger { background: var(--danger-soft); }
.irl-status--pill.irl-status--attention { background: var(--attention-soft); }
.irl-status--pill.irl-status--freeze { background: var(--freeze-soft); }
.irl-status--pill.irl-status--accent { background: var(--accent-soft); }

.irl-banner { position: relative; display: flex; align-items: flex-start; gap: var(--space-12); padding: 14px var(--space-16); border-radius: var(--radius-lg); background: var(--fill); color: var(--ink); animation: irl-rise var(--duration-base) var(--ease-standard); }
.irl-banner__icon { flex: none; margin-top: 1px; }
.irl-banner__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.irl-banner__body { color: var(--ink-2); }
.irl-banner__action { align-self: flex-start; margin-top: 6px; padding: 0; border: 0; background: none; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; cursor: pointer; }
.irl-banner__close { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin: -4px -6px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.irl-banner--info .irl-banner__icon { color: var(--ink-2); }
.irl-banner--attention { background: var(--attention-soft); }
.irl-banner--attention .irl-banner__icon, .irl-banner--attention .irl-banner__action { color: var(--attention); }
.irl-banner--danger { background: var(--danger-soft); }
.irl-banner--danger .irl-banner__icon, .irl-banner--danger .irl-banner__action { color: var(--danger); }
.irl-banner--success { background: var(--verified-soft); }
.irl-banner--success .irl-banner__icon, .irl-banner--success .irl-banner__action { color: var(--verified); }
.irl-banner--checking { background: var(--checking-soft); }
.irl-banner--checking .irl-banner__icon, .irl-banner--checking .irl-banner__action { color: var(--checking); }
.irl-banner--freeze { background: var(--freeze-soft); }
.irl-banner--freeze .irl-banner__icon { color: var(--freeze); }
.irl-banner--offline { background: var(--surface-inverse); color: var(--ink-inverse); }
.irl-banner--offline .irl-banner__body, .irl-banner--offline .irl-banner__close { color: var(--ink-inverse); opacity: .8; }
.irl-banner--offline .irl-banner__action { color: var(--accent-on-inverse); }

.irl-toast { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 48px; max-width: 100%; padding: 0 var(--space-20) 0 var(--space-16); border-radius: var(--radius-full); background: var(--surface-inverse); color: var(--ink-inverse); box-shadow: var(--shadow-float); }
.irl-toast--open { animation: irl-rise var(--duration-base) var(--ease-spring); }
.irl-toast--closed { opacity: 0; transform: translateY(12px); transition: opacity var(--duration-base) var(--ease-exit), transform var(--duration-base) var(--ease-exit); }
.irl-toast__icon { flex: none; }
.irl-toast__action { margin-left: var(--space-8); padding: 0; border: 0; background: none; color: var(--accent-on-inverse); cursor: pointer; }

.irl-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); max-width: 340px; margin: 0 auto; padding: var(--space-32) var(--space-20); text-align: center; }
.irl-state--compact { padding: var(--space-20) var(--space-16); gap: var(--space-6); }
.irl-state__disc { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--space-8); border-radius: 50%; }
.irl-state--compact .irl-state__disc { width: 52px; height: 52px; margin-bottom: var(--space-4); }
.irl-state__body { color: var(--ink-2); text-wrap: pretty; }
.irl-state__actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin-top: var(--space-12); }

.irl-offline { display: inline-flex; align-items: center; gap: var(--space-6); max-width: 100%; height: 34px; padding: 0 14px 0 var(--space-12); border-radius: var(--radius-full); background: var(--surface-inverse); color: var(--ink-inverse); }
.irl-offline__detail { opacity: .78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irl-offline__retry { margin-left: var(--space-4); padding: 0; border: 0; background: none; color: var(--accent-on-inverse); cursor: pointer; }

.irl-success { display: inline-grid; place-items: center; flex: none; }
.irl-success__halo { fill: none; stroke: var(--verified); stroke-width: 2; opacity: 0; }
.irl-success__disc { fill: var(--verified); }
.irl-success__tick { stroke: var(--on-verified); stroke-dasharray: 46; stroke-dashoffset: 0; }
.irl-success--accent .irl-success__disc { fill: var(--accent); }
.irl-success--accent .irl-success__tick { stroke: var(--on-accent); }
.irl-success--accent .irl-success__halo { stroke: var(--accent); }
.irl-success--play .irl-success__disc { transform-box: fill-box; transform-origin: center; animation: irl-pop var(--duration-slow) var(--ease-spring) both; }
.irl-success--play .irl-success__tick { stroke-dashoffset: 46; animation: irl-draw var(--duration-base) var(--ease-standard) 220ms forwards; }
.irl-success--play .irl-success__halo { transform-box: fill-box; transform-origin: center; animation: irl-pulse 900ms var(--ease-standard) 200ms both; }
.irl-daily { display: grid; grid-template-columns: auto 1fr; gap: var(--space-12) var(--space-16); align-items: center; padding: var(--space-16); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.irl-daily__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.irl-daily__chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-8); }
.irl-daily--complete .irl-ring__seg--done { stroke: var(--accent-strong); }

.irl-qhead { display: flex; flex-direction: column; gap: var(--space-12); }
.irl-qhead__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.irl-qhead__proof { display: inline-flex; align-items: center; gap: var(--space-6); color: var(--ink-2); }

.irl-reqs { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16); border-radius: var(--radius-xl); background: var(--surface); }
.irl-reqs ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-12); }
.irl-reqs__item { display: flex; align-items: flex-start; gap: var(--space-12); }
.irl-reqs__mark { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-strong); color: transparent; }
.irl-reqs__item--done .irl-reqs__mark { background: var(--verified); box-shadow: none; color: var(--on-verified); }
.irl-reqs__item--failed .irl-reqs__mark { background: var(--danger); box-shadow: none; color: var(--on-danger); }
.irl-reqs__item--info .irl-reqs__mark { box-shadow: none; background: var(--fill); color: var(--ink-2); }

.irl-tap { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); }
.irl-tap__pad { position: relative; display: grid; place-items: center; width: 232px; height: 232px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-card); cursor: pointer; overflow: hidden; touch-action: manipulation; transition: transform var(--duration-press) var(--ease-standard); -webkit-tap-highlight-color: transparent; }
.irl-tap__pad > .irl-ring { position: absolute; inset: 0; }
.irl-tap__pad:active { transform: scale(.97); }
.irl-tap__count { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; color: var(--ink); }
.irl-tap__ripple { position: absolute; width: 90px; height: 90px; border-radius: 50%; background: var(--accent); opacity: .5; pointer-events: none; animation: irl-ripple 600ms var(--ease-standard) forwards; }
.irl-tap--complete .irl-tap__pad { cursor: default; }
.irl-tap--interrupted .irl-tap__count { opacity: .5; }

.irl-timer { display: flex; flex-direction: column; align-items: center; gap: var(--space-20); }
.irl-timer .irl-ring { background: var(--surface); border-radius: 50%; box-shadow: var(--shadow-card); }
.irl-timer__ctrls { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); width: 100%; }
.irl-timer__ctrls .irl-btn--large { width: 100%; max-width: 320px; }

.irl-quiz { display: flex; flex-direction: column; gap: var(--space-16); }
.irl-quiz__opts { display: flex; flex-direction: column; gap: var(--space-8); }
.irl-quiz__opt { display: flex; align-items: center; gap: var(--space-12); min-height: 56px; padding: var(--space-12) var(--space-16); border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-press) var(--ease-standard); }
.irl-quiz__opt:active { transform: scale(.985); }
.irl-quiz__opt .body { flex: 1; }
.irl-quiz__key { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--fill); color: var(--ink-2); }
.irl-quiz__opt--sel { box-shadow: inset 0 0 0 2px var(--accent-text); background: var(--accent-soft); }
.irl-quiz__opt--sel .irl-quiz__key { background: var(--accent); color: var(--on-accent); }
.irl-quiz__opt--right { box-shadow: inset 0 0 0 2px var(--verified); background: var(--verified-soft); color: var(--verified); }
.irl-quiz__opt--right .irl-quiz__key { background: var(--verified); color: var(--on-verified); }
.irl-quiz__opt--wrong { box-shadow: inset 0 0 0 2px var(--danger); background: var(--danger-soft); color: var(--danger); animation: irl-shake 380ms var(--ease-standard); }
.irl-quiz__opt--wrong .irl-quiz__key { background: var(--danger); color: var(--on-danger); }
.irl-quiz__foot { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); min-height: 54px; }

.irl-spin { display: flex; flex-direction: column; align-items: center; gap: var(--space-20); }
.irl-spin__wheelwrap { position: relative; width: 240px; height: 240px; border-radius: 50%; box-shadow: var(--shadow-card); }
.irl-spin__wheel { display: block; border-radius: 50%; transition: transform 3.1s cubic-bezier(0.12, 0.8, 0.12, 1); }
.irl-spin__seg--0 { fill: var(--accent); }
.irl-spin__seg--1 { fill: var(--surface); }
.irl-spin__seg--2 { fill: var(--fill-strong); }
.irl-spin__label { font: var(--text-numeral-s); fill: var(--ink); }
.irl-spin__seg--0 + .irl-spin__label { fill: var(--on-accent); }
.irl-spin__hub { fill: var(--surface-inverse); }
.irl-spin__pointer { position: absolute; top: -10px; left: 50%; z-index: 2; width: 0; height: 0; margin-left: -12px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 22px solid var(--ink); filter: drop-shadow(0 2px 2px #00000033); }
.irl-spin__out { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); width: 100%; min-height: 96px; }
.irl-spin__result { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; animation: irl-pop var(--duration-slow) var(--ease-spring); }

.irl-hold { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); }
.irl-hold__btn { position: relative; display: grid; place-items: center; width: 120px; height: 120px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--accent-text); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.irl-hold__btn > svg { position: absolute; inset: 0; }
.irl-hold__track { fill: none; stroke: var(--fill-strong); stroke-width: 8; }
.irl-hold__fill { fill: none; stroke: var(--accent-strong); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; transition: stroke-dashoffset var(--duration-fast) var(--ease-exit); }
.irl-hold__core { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--accent-soft); transition: transform var(--duration-base) var(--ease-spring), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.irl-hold--holding .irl-hold__fill { stroke-dashoffset: 0; transition: stroke-dashoffset var(--hold) linear; }
.irl-hold--holding .irl-hold__core { transform: scale(.92); }
.irl-hold--done .irl-hold__fill { stroke-dashoffset: 0; stroke: var(--verified); }
.irl-hold--done .irl-hold__core { background: var(--verified); color: var(--on-verified); animation: irl-pop var(--duration-slow) var(--ease-spring); }
.irl-hold--danger .irl-hold__btn { color: var(--danger); }
.irl-hold--danger .irl-hold__fill { stroke: var(--danger); }
.irl-hold--danger .irl-hold__core { background: var(--danger-soft); }
.irl-hold--danger.irl-hold--done .irl-hold__core { background: var(--danger); color: var(--on-danger); }

.irl-cam { position: relative; height: 100%; min-height: 560px; overflow: hidden; background: var(--camera); color: var(--on-camera); }
.irl-cam__feed { position: absolute; inset: 0; }
.irl-cam__feed > svg, .irl-cam__feed > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.irl-cam--shot .irl-cam__feed { animation: irl-fade 320ms var(--ease-standard); }
.irl-cam--shot::after { content: ''; position: absolute; inset: 0; background: var(--knob); opacity: .7; animation: irl-fade 320ms var(--ease-exit) reverse forwards; pointer-events: none; }
.irl-cam__top { position: absolute; top: 58px; left: var(--space-16); right: var(--space-16); display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.irl-cam__title { max-width: 60%; padding: 6px 12px; border-radius: var(--radius-full); background: var(--scrim-media); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-backdrop-filter: blur(var(--material-blur)); backdrop-filter: blur(var(--material-blur)); }
.irl-cam__guide { position: absolute; top: 22%; bottom: 30%; left: 14%; right: 14%; pointer-events: none; }
.irl-cam__guide i { position: absolute; width: 34px; height: 34px; border: 3.5px solid var(--on-camera); border-radius: 6px; opacity: .9; }
.irl-cam__guide i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.irl-cam__guide i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 12px 0 0; }
.irl-cam__guide i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 12px; }
.irl-cam__guide i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
.irl-cam__hint { position: absolute; left: 50%; bottom: 24%; transform: translateX(-50%); padding: 8px 14px; border-radius: var(--radius-full); background: var(--scrim-media); white-space: nowrap; -webkit-backdrop-filter: blur(var(--material-blur)); backdrop-filter: blur(var(--material-blur)); }
.irl-cam__bottom { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; padding: var(--space-24) var(--space-32) 52px; background: linear-gradient(transparent, var(--scrim-media)); }
.irl-cam__slot { width: 52px; height: 52px; }
.irl-cam__shutter { position: relative; display: grid; place-items: center; width: var(--size-shutter); height: var(--size-shutter); padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 5px var(--knob); cursor: pointer; }
.irl-cam__shutter span { width: 60px; height: 60px; border-radius: 50%; background: var(--knob); transition: transform var(--duration-press) var(--ease-standard); }
.irl-cam__shutter:active span { transform: scale(.88); }

.irl-review { display: flex; flex-direction: column; gap: var(--space-16); }
.irl-review__check { display: flex; align-items: flex-start; gap: var(--space-8); color: var(--ink-2); padding: 0 var(--space-4); }
.irl-review__check .irl-icon { margin-top: 2px; }
.irl-review__actions { display: flex; gap: var(--space-12); }
.irl-review__actions .irl-btn { flex: 1 1 0; min-width: 0; padding: 0 var(--space-12); }

.irl-upload { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-16) var(--space-12) var(--space-12); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.irl-upload__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.irl-upload--failed { box-shadow: inset 0 0 0 1.5px var(--danger); }
.irl-upload--waiting { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.irl-upload__keep { align-self: flex-start; min-height: 0; padding: 0; }

.irl-verify { display: flex; flex-direction: column; gap: var(--space-20); }
.irl-verify__media { position: relative; }
.irl-verify__scan { position: absolute; left: 4%; right: 4%; height: 3px; border-radius: 3px; background: var(--checking); box-shadow: 0 0 18px 4px var(--checking); opacity: .9; animation: irl-scan 2.4s var(--ease-standard) infinite; }
.irl-verify--checking .irl-verify__media .irl-media { filter: saturate(.6); }
.irl-verify__badge { position: absolute; right: -6px; bottom: -6px; padding: 4px; border-radius: 50%; background: var(--bg); }
.irl-verify__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.irl-verify__kept { display: flex; align-items: flex-start; gap: var(--space-8); color: var(--ink-2); text-wrap: pretty; }
.irl-verify__kept > .irl-icon { flex: none; margin-top: 2px; color: var(--verified); }
.irl-verify__actions { display: flex; flex-direction: column; gap: var(--space-4); }
.irl-verify--leave { flex: 1 0 auto; }
.irl-verify--leave .irl-verify__actions { margin-top: auto; padding-bottom: var(--space-16); }
.irl-verify--tryAgain .irl-verify__media .irl-media { box-shadow: inset 0 0 0 3px var(--attention); }

.irl-checkin { display: flex; flex-direction: column; gap: var(--space-12); }
.irl-checkin__here .irl-btn__content { gap: 10px; }
.irl-checkin__dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--on-accent); }
.irl-checkin__dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--on-accent); animation: irl-pulse 1.6s var(--ease-standard) infinite; }
.irl-checkin__here:disabled .irl-checkin__dot { background: var(--ink-disabled); }
.irl-checkin__here:disabled .irl-checkin__dot::after { display: none; }
.irl-rarity { position: relative; display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-4); vertical-align: middle; }
.irl-rarity__chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: var(--radius-full); white-space: nowrap; }
.irl-rarity--small .irl-rarity__chip { height: 22px; padding: 0 8px 0 6px; gap: 5px; }
.irl-rarity__pips { display: inline-flex; gap: 2px; }
.irl-rarity__pips i { width: 3px; height: 10px; border-radius: 2px; background: currentColor; opacity: .22; }
.irl-rarity__pips i.on { opacity: 1; }
.irl-rarity--small .irl-rarity__pips i { height: 8px; width: 2.5px; }
.irl-rarity__share { font-weight: 500; }
.irl-rarity__info { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.irl-rarity__anchor { position: relative; display: inline-flex; }
.irl-rarity__pop { position: absolute; top: 100%; left: -14px; z-index: 10; }
.irl-rarity--common .irl-rarity__chip { background: var(--rarity-common-soft); color: var(--rarity-common); }
.irl-rarity--uncommon .irl-rarity__chip { background: var(--rarity-uncommon-soft); color: var(--rarity-uncommon); }
.irl-rarity--rare .irl-rarity__chip { background: var(--rarity-rare-soft); color: var(--rarity-rare); }
.irl-rarity--epic .irl-rarity__chip { background: var(--rarity-epic-soft); color: var(--rarity-epic); }
.irl-rarity--legendary .irl-rarity__chip { background: var(--rarity-legendary-soft); color: var(--rarity-legendary); }
.irl-rarity--mythic .irl-rarity__chip { background: var(--rarity-mythic-soft); color: var(--rarity-mythic); box-shadow: inset 0 0 0 1.5px var(--rarity-mythic); }
.irl-rarity--new .irl-rarity__chip, .irl-rarity--unrated .irl-rarity__chip, .irl-rarity--limited .irl-rarity__chip { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.irl-rarity--unrated .irl-rarity__chip, .irl-rarity--limited .irl-rarity__chip { box-shadow: none; outline: 1.5px dashed var(--line-strong); outline-offset: -1.5px; }
.irl-rarity--founding .irl-rarity__chip { background: var(--surface-inverse); color: var(--ink-inverse); }

.irl-level, .irl-streak { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--space-16); border-radius: var(--radius-xl); background: var(--surface); }
.irl-level__top, .irl-streak__top { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.irl-level .irl-popover { position: absolute; top: 44px; right: 8px; }
.irl-level__locked { display: flex; align-items: center; gap: var(--space-8); color: var(--ink-2); padding: var(--space-6) 0; }
.irl-streak__row { display: flex; align-items: baseline; gap: var(--space-8); }
.irl-streak__icon { align-self: center; display: inline-flex; }
.irl-streak--active .irl-streak__icon { color: var(--streak); }
.irl-streak--missed .numeral-l { color: var(--ink-2); }

.irl-freeze { display: flex; align-items: center; gap: var(--space-12); }
.irl-freeze__slots { display: flex; gap: var(--space-6); }
.irl-freeze__slot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--ink-3); background: transparent; outline: 1.5px dashed var(--line-strong); outline-offset: -1.5px; }
.irl-freeze__slot--full { background: var(--freeze-soft); color: var(--freeze); outline: 0; }
.irl-freeze__slot--used { color: var(--freeze); outline-color: var(--freeze); animation: irl-shake 420ms var(--ease-standard); }
.irl-freeze__text { display: flex; flex-direction: column; gap: 1px; }

.irl-history { display: flex; flex-direction: column; gap: var(--space-8); }
.irl-history__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.irl-history__wd { text-align: center; }
.irl-history__day { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 9px; background: var(--fill); color: var(--ink-2); }
.irl-history__day--v1 { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-strong); }
.irl-history__day--v2 { background: var(--accent); opacity: .6; }
.irl-history__day--v3 { background: var(--accent); }
.irl-history__day--freeze { background: var(--freeze-soft); color: var(--freeze); }
.irl-history__day--checking { background: var(--checking-soft); color: var(--checking); }
.irl-history__day--missed { background: transparent; outline: 1.5px dashed var(--line-strong); outline-offset: -1.5px; }
.irl-history__day--today { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.irl-history__day--future { background: var(--fill); opacity: .45; }
.irl-history__legend { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.irl-history__legend span { display: inline-flex; align-items: center; gap: 5px; }
.irl-history__legend i { width: 12px; height: 12px; border-radius: 4px; aspect-ratio: auto; }

.irl-medal { position: relative; display: inline-grid; place-items: center; flex: none; }
.irl-medal > svg { position: absolute; inset: 0; }
.irl-medal__ring { fill: none; stroke-width: 3; }
.irl-medal__streaks { stroke-opacity: .16; }
.irl-medal__icon { position: relative; display: inline-flex; }
.irl-medal--common .irl-medal__ring, .irl-medal--common .irl-medal__streaks { stroke: var(--rarity-common); } .irl-medal--common .irl-medal__disc { fill: var(--rarity-common-soft); } .irl-medal--common .irl-medal__icon { color: var(--rarity-common); }
.irl-medal--uncommon .irl-medal__ring, .irl-medal--uncommon .irl-medal__streaks { stroke: var(--rarity-uncommon); } .irl-medal--uncommon .irl-medal__disc { fill: var(--rarity-uncommon-soft); } .irl-medal--uncommon .irl-medal__icon { color: var(--rarity-uncommon); }
.irl-medal--rare .irl-medal__ring, .irl-medal--rare .irl-medal__streaks { stroke: var(--rarity-rare); } .irl-medal--rare .irl-medal__disc { fill: var(--rarity-rare-soft); } .irl-medal--rare .irl-medal__icon { color: var(--rarity-rare); }
.irl-medal--epic .irl-medal__ring, .irl-medal--epic .irl-medal__streaks { stroke: var(--rarity-epic); } .irl-medal--epic .irl-medal__disc { fill: var(--rarity-epic-soft); } .irl-medal--epic .irl-medal__icon { color: var(--rarity-epic); }
.irl-medal--legendary .irl-medal__ring, .irl-medal--legendary .irl-medal__streaks { stroke: var(--rarity-legendary); } .irl-medal--legendary .irl-medal__disc { fill: var(--rarity-legendary-soft); } .irl-medal--legendary .irl-medal__icon { color: var(--rarity-legendary); }
.irl-medal--mythic .irl-medal__ring, .irl-medal--mythic .irl-medal__streaks { stroke: var(--rarity-mythic); } .irl-medal--mythic .irl-medal__disc { fill: var(--rarity-mythic-soft); } .irl-medal--mythic .irl-medal__icon { color: var(--rarity-mythic); }
.irl-medal--locked .irl-medal__ring { stroke: var(--line-strong); stroke-dasharray: 4 5; }
.irl-medal--locked .irl-medal__disc { fill: var(--fill); }
.irl-medal--locked .irl-medal__streaks { stroke: var(--ink-3); }
.irl-medal--locked .irl-medal__icon { color: var(--ink-3); }

.irl-ach { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-12) var(--space-4); border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); cursor: pointer; text-align: center; transition: transform var(--duration-press) var(--ease-standard); }
.irl-ach:active { transform: scale(.96); }
.irl-ach__medal { position: relative; margin-bottom: 4px; }
.irl-ach__new { position: absolute; top: -4px; right: -10px; padding: 2px 6px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); }
.irl-ach__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irl-ach--locked .irl-ach__name { color: var(--ink-2); }
.irl-achgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }

.irl-achdetail { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); padding: var(--space-8) 0; }
.irl-achdetail__meta { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.irl-achdetail__meta .irl-rarity { justify-content: center; }
.irl-achdetail__private { display: inline-flex; align-items: center; gap: var(--space-6); padding: 8px 12px; border-radius: var(--radius-full); background: var(--fill); color: var(--ink-2); }
.irl-achdetail--history { gap: var(--space-8); padding: 0 0 var(--space-12); }
.irl-achdetail__earned { margin: 2px 0 0; text-wrap: balance; }
.irl-achdetail__when { display: inline-flex; align-items: center; gap: var(--space-6); }
.irl-achdetail__history { margin-top: 10px; padding-top: var(--space-16); border-top: 1px solid var(--line); }
.irl-achdetail--history .irl-achdetail__private { margin-top: var(--space-6); }

.irl-rhist { display: flex; flex-direction: column; gap: 10px; align-self: stretch; min-width: 0; }
.irl-rhist__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-8); }
.irl-rhist__titles { display: flex; flex-direction: column; min-width: 0; }
.irl-rhist__plot { position: relative; touch-action: pan-y; cursor: crosshair; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; border-radius: var(--radius-xs); }
.irl-rhist__plot > svg { position: absolute; left: 0; top: 0; overflow: visible; }
.irl-rhist__band--common { fill: var(--rarity-common-soft); }
.irl-rhist__band--uncommon { fill: var(--rarity-uncommon-soft); }
.irl-rhist__band--rare { fill: var(--rarity-rare-soft); }
.irl-rhist__band--epic { fill: var(--rarity-epic-soft); }
.irl-rhist__band--legendary { fill: var(--rarity-legendary-soft); }
.irl-rhist__band--mythic { fill: var(--rarity-mythic-soft); }
.irl-rhist__line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.irl-rhist__dot { fill: var(--ink); stroke: var(--surface-raised); stroke-width: 2; }
.irl-rhist__you { fill: var(--accent-strong); stroke: var(--surface-raised); stroke-width: 2; }
.irl-rhist__youline { stroke: var(--accent-strong); stroke-width: 1.5; }
.irl-rhist__leader { stroke: var(--accent-strong); stroke-width: 1; }
.irl-rhist__hair { stroke: var(--ink-2); stroke-width: 1; }
.irl-rhist__label { position: absolute; white-space: nowrap; pointer-events: none; }
.irl-rhist__you-label { color: var(--ink); text-align: center; }
.irl-rhist__x { color: var(--ink-3); }
.irl-rhist__band-label { position: absolute; display: flex; justify-content: flex-end; pointer-events: none; }
.irl-rhist__band-label .irl-rarity__chip { background: transparent; box-shadow: none; }
.irl-rhist__note { margin: 0; color: var(--ink-3); }
.irl-rhist__empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: 18px var(--space-16); border-radius: var(--radius-lg); background: var(--fill); text-align: center; }
.irl-rhist__empty .irl-icon { color: var(--ink-2); }

.irl-celebrate { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); padding: var(--space-24) var(--space-20); }
.irl-celebrate__burst { position: relative; display: grid; place-items: center; width: 220px; height: 220px; margin-bottom: var(--space-8); }
.irl-celebrate__core { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 10px var(--accent-soft); }
.irl-celebrate--play .irl-celebrate__core { animation: irl-pop var(--duration-celebrate) var(--ease-spring) both; }
.irl-celebrate__streak { position: absolute; left: 50%; top: 50%; width: 10px; height: var(--l); margin-left: -5px; margin-top: calc(-0.5 * var(--l)); border-radius: var(--radius-full); background: var(--accent); transform: rotate(var(--a)) translateY(-86px); transform-origin: center; opacity: .9; }
.irl-celebrate__streak--ink { background: var(--ink); width: 8px; margin-left: -4px; }
.irl-celebrate--play .irl-celebrate__streak { animation: irl-burst 1.1s var(--ease-standard) var(--d) both; }
.irl-celebrate__note { display: flex; align-items: center; justify-content: center; gap: var(--space-6); margin: var(--space-4) 0 var(--space-16); max-width: 300px; }
.irl-celebrate__note .irl-icon { flex: none; }
.irl-stat { display: flex; flex-direction: column; gap: 4px; padding: var(--space-16); border-radius: var(--radius-xl); background: var(--surface); min-width: 0; }
.irl-stat__top { display: flex; align-items: center; gap: var(--space-6); margin-bottom: var(--space-6); color: var(--ink-2); }

.irl-lb { display: grid; grid-template-columns: minmax(44px, auto) 1fr auto; align-items: center; gap: var(--space-8); min-height: var(--size-row); padding: 6px var(--space-16) 6px var(--space-8); background: var(--surface); }
.irl-lb__pos { min-width: 36px; padding: 0 4px; text-align: center; color: var(--ink-2); }
.irl-lb--top .irl-lb__pos { color: var(--ink); }
.irl-lb__name { display: flex; align-items: center; gap: var(--space-8); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irl-lb__you { padding: 2px 8px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); }
.irl-lb__level { white-space: nowrap; }
.irl-lb--you { background: var(--accent-soft); }
.irl-lb--you .irl-lb__pos { color: var(--accent-text); }

.irl-mypos { overflow: hidden; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-float); }
.irl-mypos .irl-lb { background: var(--accent-soft); }
.irl-mypos__msg { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-16); color: var(--ink-2); }
.irl-mypos__msg > div { flex: 1; min-width: 0; color: var(--ink); }

.irl-optout { display: flex; flex-direction: column; gap: var(--space-8); }
.irl-optout__row { display: flex; align-items: center; gap: var(--space-12); min-height: var(--size-row); padding: 10px var(--space-16); border-radius: var(--radius-xl); background: var(--surface); }
.irl-optout__label { flex: 1; }
.irl-optout > .footnote { padding: 0 var(--space-16); }

.irl-gate { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); padding: var(--space-20); border-radius: var(--radius-xl); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); }
.irl-gate__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.irl-gate__text { display: flex; flex-direction: column; gap: var(--space-4); }
.irl-gate__actions { display: flex; align-items: center; gap: var(--space-4); }
.irl-gate--compact { flex-direction: row; align-items: center; padding: var(--space-12) var(--space-16); }
.irl-gate--compact .irl-gate__text { flex: 1; }

.irl-copycode { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: var(--space-12) var(--space-12) var(--space-12) var(--space-16); border-radius: var(--radius-lg); background: var(--fill); }
.irl-copycode__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.irl-copycode__btn { display: inline-flex; align-items: center; gap: var(--space-6); height: 36px; padding: 0 var(--space-12); border: 0; border-radius: var(--radius-full); background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-card); transition: color var(--duration-fast) var(--ease-standard), transform var(--duration-press) var(--ease-standard); }
.irl-copycode__btn:active { transform: scale(.95); }
.irl-copycode--copied .irl-copycode__btn { color: var(--verified); }
.irl-copycode--copied .irl-copycode__btn .irl-icon { animation: irl-pop var(--duration-base) var(--ease-spring); }

.irl-ms { display: flex; flex-direction: column; gap: var(--space-6); }
.irl-ms__track { display: flex; align-items: center; }
.irl-ms__bar { flex: 1; height: 6px; margin: 0 -1px; border-radius: var(--radius-full); background: var(--fill-strong); overflow: hidden; }
.irl-ms__bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent-strong); transition: width var(--duration-slow) var(--ease-standard); }
.irl-ms__node { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 2px var(--line-strong); }
.irl-ms__node--on { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.irl-ms__node--next { color: var(--accent-text); box-shadow: inset 0 0 0 2px var(--accent-text); }
.irl-ms { padding-bottom: 22px; }
.irl-ms__label { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--ink-2); }
.irl-ms__node:last-child .irl-ms__label { left: auto; right: 0; transform: none; }

.irl-invite { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-20); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.irl-invite__head { display: flex; align-items: flex-start; gap: var(--space-12); }
.irl-invite__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }

.irl-invrow { position: relative; display: flex; align-items: center; gap: var(--space-12); min-height: 60px; padding: 10px var(--space-16); background: var(--surface); }
.irl-identity { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); padding: var(--space-20); border-radius: var(--radius-xl); background: var(--surface); }
.irl-identity__top { display: flex; align-items: center; gap: var(--space-12); }
.irl-identity__mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--accent); }
.irl-identity__names { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.irl-identity--guest .irl-identity__mark { background: var(--fill); }
.irl-identity__btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.irl-identity--guest .irl-identity__mark .irl-logo { color: var(--ink-3) !important; }

.irl-method .irl-pill, .irl-method .irl-status { flex: none; }

.irl-consent { display: flex; flex-direction: column; gap: var(--space-8); }
.irl-consent__row { display: flex; align-items: center; gap: var(--space-12); min-height: var(--size-row); padding: 10px var(--space-16); border-radius: var(--radius-xl); background: var(--surface); }
.irl-consent__sys { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); padding: 0 var(--space-16); color: var(--attention); }

.irl-perm { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); padding: var(--space-24) var(--space-20) var(--space-16); border-radius: var(--radius-2xl); background: var(--surface); text-align: center; }
.irl-perm__icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--space-8); border-radius: 50%; }
.irl-perm__actions { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; margin-top: var(--space-12); }
.irl-perm--compact { flex-direction: row; flex-wrap: wrap; text-align: left; align-items: center; padding: var(--space-16); }
.irl-perm--compact .irl-perm__icon { width: 48px; height: 48px; margin: 0; }

.irl-report { display: flex; flex-direction: column; gap: var(--space-16); }
.irl-report--sent { align-items: center; gap: var(--space-8); padding: var(--space-24) 0; }
.irl-report__reasons { box-shadow: var(--shadow-card); }

.irl-blocked .irl-btn { flex: none; }

.irl-export { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-16); border-radius: var(--radius-xl); background: var(--surface); }

.irl-deletion { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); padding: var(--space-16); border-radius: var(--radius-xl); background: var(--surface); }

.irl-destroy { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-12); }
.irl-destroy > .irl-confirm__icon { align-self: flex-start; }
.irl-destroy__list { list-style: none; padding: var(--space-12) var(--space-16); display: flex; flex-direction: column; gap: var(--space-8); border-radius: var(--radius-lg); background: var(--danger-soft); color: var(--ink); }
.irl-destroy__list li { display: flex; align-items: center; gap: var(--space-8); }
.irl-destroy__list .irl-icon { color: var(--danger); }
.irl-destroy__hold { display: flex; justify-content: center; padding: var(--space-8) 0; }
.irl-destroy__export { min-height: 0; padding: 0; vertical-align: baseline; }

.irl-save { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); }
.irl-save__btns { display: flex; flex-direction: column; gap: var(--space-8); width: 100%; margin-top: var(--space-8); }

/* Before you start (RulesConsent): approved copy, equal-weight Accept and Decline, the agreement line right next to Accept. */
.irl-rules { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.irl-rules__scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-8) var(--space-20) var(--space-24); scrollbar-width: none; }
.irl-rules__scroll::-webkit-scrollbar { display: none; }
.irl-rules__scroll--more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); }
.irl-rules__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-16); }
.irl-rules__list li { display: flex; align-items: flex-start; gap: var(--space-12); }
.irl-rules__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--fill); color: var(--ink-2); }
.irl-rules__list .callout { padding-top: 5px; text-wrap: pretty; }
.irl-rules__inline { display: inline; min-height: 0; padding: 0; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; vertical-align: baseline; }
.irl-rules__foot { flex: none; display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-12) var(--space-20) 40px; background: var(--bg); box-shadow: 0 -1px 0 var(--line); }
.irl-rules__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
.irl-rules--stack .irl-rules__btns { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
/* Documentation frames (Phone, Board, Specimen). Not part of the shipped app UI. */
.irl-spec { color: var(--ink); background: var(--bg); }
.irl-spec--surface { background: var(--surface); }
.irl-spec--padded { padding: var(--space-20); }
.irl-spec__title { margin-bottom: var(--space-12); color: var(--ink-2); }
.irl-spec__body { display: flex; flex-wrap: wrap; gap: var(--space-24) var(--space-20); align-items: flex-start; }
.irl-spec__body--grid { display: grid; }
.irl-spec__item { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.irl-spec__item--center { align-items: center; }
.irl-spec__item--wide { flex: 1 1 100%; grid-column: 1 / -1; }
.irl-spec__label { color: var(--ink-2); }
.irl-spec__demo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); min-width: 0; }
.irl-spec__item--center .irl-spec__demo { justify-content: center; }
.irl-stage { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }

.irl-board { display: flex; flex-wrap: wrap; align-items: flex-start; padding: var(--space-24); background: var(--bg); }
.irl-board__note { flex: 1 1 100%; color: var(--ink-2); }
.irl-phonewrap { display: flex; flex-direction: column; gap: var(--space-12); margin: 0; flex: none; }
.irl-phonewrap__label { color: var(--ink-2); padding-left: var(--space-4); }
.irl-phone__scaler { position: relative; }
.irl-phone { position: absolute; top: 0; left: 0; width: 393px; height: 852px; padding: 0; border-radius: var(--radius-device); background: var(--bg); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-overlay); transform-origin: top left; overflow: hidden; }
.irl-phone--camera { background: var(--camera); }
.irl-phone--surface { background: var(--surface); }
.irl-phone--accent { background: var(--accent); color: var(--on-accent); }
.irl-phone__screen { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; isolation: isolate; }
.irl-statusbar { position: absolute; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 30px 0 44px; color: var(--ink); pointer-events: none; }
.irl-statusbar--light { color: var(--on-camera); }
.irl-statusbar__time { font: 600 17px/22px var(--font-text); letter-spacing: -0.02em; padding-top: 2px; }
.irl-statusbar__island { position: absolute; top: 11px; left: 50%; width: 124px; height: 36px; margin-left: -62px; border-radius: var(--radius-full); background: var(--camera); }
.irl-statusbar__icons { display: inline-flex; align-items: center; gap: 6px; padding-top: 2px; }
.irl-statusbar__icons svg { fill: currentColor; }
.irl-phone__home { position: absolute; left: 50%; bottom: 8px; z-index: 40; width: 138px; height: 5px; margin-left: -69px; border-radius: var(--radius-full); background: var(--ink); opacity: .9; }
.irl-phone__home--light { background: var(--on-camera); }

.irl-screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; padding-top: 54px; }
.irl-screen--padded > .irl-screen__body, .irl-screen__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-8) var(--space-20) var(--space-24); overflow: hidden; }
.irl-screen--tabbar .irl-screen__body { padding-bottom: 110px; }
.irl-screen__body > * { flex-shrink: 0; }
.irl-screen__tabbar { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 30; }
.irl-screen__bottom { position: absolute; left: var(--space-20); right: var(--space-20); bottom: 40px; z-index: 30; display: flex; flex-direction: column; gap: var(--space-8); }
.irl-screen__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: 25; background: linear-gradient(transparent, var(--bg) 70%); pointer-events: none; }
/* Future concepts: a dashed tag marks anything that is not in the current release. */
.irl-future { display: inline-flex; align-items: center; gap: var(--space-6); align-self: flex-start; padding: 4px 10px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--ink-2); }
.irl-future-card { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16); border-radius: var(--radius-xl); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
/* In-app games (under review). Game colors are content colors inside a game, never a status. Red and blue always come with a word (Start, End). */
:root, [data-theme] { --game-red: var(--danger); --game-blue: var(--checking); --game-green: var(--verified); --game-gold: var(--rarity-legendary); --game-gold-soft: var(--rarity-legendary-soft); }

/* Intro */
.irl-gameintro { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.irl-gameintro__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-8) var(--space-20) var(--space-24); min-height: 0; }
.irl-gameintro__chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.irl-gameintro__how { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.irl-gameintro__icon { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--accent-soft); color: var(--accent-text); }
.irl-gameintro__howtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-wrap: pretty; }
.irl-gameintro__safety { display: flex; align-items: flex-start; gap: var(--space-8); color: var(--ink-2); }
.irl-gameintro__safety > .irl-icon { flex: none; margin-top: 1px; color: var(--verified); }
.irl-gameintro__notice { display: flex; align-items: flex-start; gap: var(--space-12); padding: var(--space-16); border-radius: var(--radius-xl); background: var(--fill); color: var(--ink); text-wrap: pretty; }
.irl-gameintro__notice > .irl-icon { flex: none; margin-top: 1px; color: var(--ink-2); }
.irl-gameintro--unknown .irl-gameintro__notice { background: var(--accent-soft); }
.irl-gameintro--unknown .irl-gameintro__notice > .irl-icon { color: var(--accent-text); }
.irl-gameintro__foot, .irl-game__foot, .irl-gameresult__foot { flex: none; display: flex; flex-direction: column; gap: var(--space-8); padding: 0 var(--space-20) 40px; }

/* Playing frame */
.irl-game { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.irl-game__progress { min-width: 0; }
.irl-game__play { flex: 1; display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-8) var(--space-20) var(--space-24); min-height: 0; }
.irl-game__play--center { justify-content: center; align-items: stretch; }
.irl-game__play--top { justify-content: flex-start; }
.irl-game__play > * { flex-shrink: 0; }

/* Result */
.irl-gameresult { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.irl-gameresult__spacer { height: 52px; flex: none; }
.irl-gameresult__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-12); padding: 0 var(--space-24) var(--space-40); text-align: center; }
.irl-gameresult__body .irl-loader { margin-bottom: var(--space-8); }
.irl-gameresult--done .irl-gameresult__body { justify-content: flex-start; padding-top: 58px; gap: 14px; }
.irl-gameresult__state { padding: 0; }

/* Number pad */
.irl-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); width: 100%; }
.irl-pad__key { display: grid; place-items: center; height: 58px; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); cursor: pointer; touch-action: manipulation; transition: transform var(--duration-press) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.irl-pad__key:active { transform: scale(.95); background: var(--fill); }
.irl-pad__key:disabled { color: var(--ink-disabled); cursor: default; }
.irl-pad__key--fn { background: transparent; box-shadow: none; color: var(--ink-2); }
.irl-pad__key--enter { background: var(--accent); color: var(--on-accent); }
.irl-pad__key--enter:disabled { background: var(--fill); color: var(--ink-disabled); }
.irl-pad--short { grid-template-columns: repeat(4, 1fr); }

/* Quick math */
.irl-math { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); width: 100%; }
.irl-math__q { display: flex; align-items: baseline; gap: 14px; font: var(--text-numeral-xl); color: var(--ink); }
.irl-math__op { color: var(--accent-text); }
.irl-math__answer { display: grid; place-items: center; min-width: 168px; height: 76px; padding: 0 var(--space-20); border-radius: var(--radius-xl); background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent-text); color: var(--ink); }
.irl-math__caret { display: block; width: 3px; height: 40px; border-radius: 2px; background: var(--accent-text); animation: irl-blink 1s steps(2) infinite; }
.irl-math--right .irl-math__answer, .irl-math--finished .irl-math__answer { box-shadow: inset 0 0 0 2px var(--verified); background: var(--verified-soft); color: var(--verified); }
.irl-math--wrong .irl-math__answer { box-shadow: inset 0 0 0 2px var(--danger); background: var(--danger-soft); color: var(--danger); animation: irl-shake 380ms var(--ease-standard); }
.irl-math__status { min-height: 24px; display: grid; place-items: center; }
.irl-math .irl-pad { margin-top: var(--space-8); }

/* Quiz run */
.irl-quiz--run .irl-quiz__opt:disabled { cursor: default; }
.irl-quiz--run .irl-quiz__opt--wrong { animation: irl-shake 380ms var(--ease-standard); }
.irl-quiz--run .irl-quiz__foot { min-height: 28px; }

/* Unscramble */
.irl-scramble { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); width: 100%; }
.irl-scramble__slots { display: flex; justify-content: center; gap: var(--space-6); }
.irl-scramble__slot { display: grid; place-items: center; width: 44px; height: 56px; border-radius: var(--radius-md); background: var(--fill); box-shadow: inset 0 -3px 0 var(--line-strong); font: var(--text-title-2); color: var(--ink); }
.irl-scramble__slot--on { background: var(--accent-soft); box-shadow: inset 0 -3px 0 var(--accent-text); color: var(--accent-text); animation: irl-pop var(--duration-base) var(--ease-spring); }
.irl-scramble--solved .irl-scramble__slot { background: var(--verified-soft); box-shadow: inset 0 -3px 0 var(--verified); color: var(--verified); }
.irl-scramble--wrong .irl-scramble__slots { animation: irl-shake 380ms var(--ease-standard); }
.irl-scramble--wrong .irl-scramble__slot--on { background: var(--danger-soft); box-shadow: inset 0 -3px 0 var(--danger); color: var(--danger); }
.irl-scramble__tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); max-width: 340px; }
.irl-scramble__tile { display: grid; place-items: center; width: 60px; height: 68px; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card), inset 0 -3px 0 var(--line); cursor: pointer; transition: transform var(--duration-press) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
.irl-scramble__tile:active { transform: scale(.94); }
.irl-scramble__tile--used { opacity: .28; box-shadow: none; cursor: default; }
.irl-scramble p { min-height: 24px; }

/* Odd one out */
.irl-odd { width: 100%; }
.irl-odd__grid { display: grid; gap: var(--space-8); }
.irl-odd__cell { display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--accent-strong); box-shadow: var(--shadow-card); cursor: pointer; transition: transform var(--duration-press) var(--ease-standard); }
.irl-odd__cell:active { transform: scale(.95); }
.irl-odd__cell--faint .irl-icon { opacity: .5; }
.irl-odd__cell--miss { animation: irl-shake 380ms var(--ease-standard); box-shadow: inset 0 0 0 2px var(--danger); }
.irl-odd__cell--found { background: var(--verified-soft); color: var(--verified); box-shadow: inset 0 0 0 2px var(--verified); }
.irl-odd__cell--found .irl-icon { opacity: 1; }

/* Memory match */
.irl-memory { width: 100%; }
.irl-memory__grid { display: grid; gap: var(--space-8); }
.irl-memory__card { position: relative; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: var(--radius-lg); background: transparent; cursor: pointer; perspective: 600px; }
.irl-memory__back, .irl-memory__face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform var(--duration-slow) var(--ease-standard); }
.irl-memory__back { overflow: hidden; background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-soft); }
.irl-memory__back svg { width: 72%; height: 72%; }
.irl-memory__back path { stroke: var(--accent); fill: none; opacity: .45; }
.irl-memory__face { background: var(--surface); color: var(--accent-text); box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--line); transform: rotateY(180deg); }
.irl-memory__card--up .irl-memory__back { transform: rotateY(-180deg); }
.irl-memory__card--up .irl-memory__face { transform: rotateY(0); }
.irl-memory__card--matched .irl-memory__face { background: var(--verified-soft); color: var(--verified); box-shadow: inset 0 0 0 2px var(--verified); }

/* Connect the dots */
.irl-dots { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); width: 100%; }
.irl-dots__board { display: block; width: 100%; max-width: 340px; aspect-ratio: 1; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); touch-action: none; user-select: none; -webkit-user-select: none; overflow: visible; }
.irl-dots__band { fill: none; stroke: var(--fill-strong); stroke-linecap: round; stroke-linejoin: round; }
.irl-dots__guide { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.irl-dots__trace { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.irl-dots__start { fill: var(--game-red); stroke: var(--surface); stroke-width: 4; }
.irl-dots__end { fill: var(--game-blue); stroke: var(--surface); stroke-width: 4; }
.irl-dots__label { font: var(--text-caption-strong); fill: var(--ink); }
.irl-dots--missed .irl-dots__board { animation: irl-shake 380ms var(--ease-standard); }
.irl-dots--done .irl-dots__trace { stroke: var(--verified); }
.irl-dots__msg { min-height: 24px; }

/* Draw it */
.irl-draw { display: flex; flex-direction: column; gap: var(--space-12); width: 100%; }
.irl-draw__prompt { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); }
.irl-draw__count--ok { color: var(--verified); }
.irl-draw__pad { display: block; width: 100%; aspect-ratio: 1; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--line); touch-action: none; cursor: crosshair; }
.irl-draw__ink { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.irl-draw__dot { fill: var(--ink); }
.irl-draw__note { display: flex; align-items: center; gap: var(--space-4); }
.irl-draw__btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); margin-top: var(--space-4); }

/* Plug it in */
.irl-plug { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); text-align: center; }
.irl-plug__disc { position: relative; display: grid; place-items: center; width: 168px; height: 168px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.irl-plug--waiting .irl-plug__disc::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid var(--accent); animation: irl-pulse 1.8s var(--ease-standard) infinite; }
.irl-plug--charging .irl-plug__disc { background: var(--attention-soft); color: var(--attention); }
.irl-plug--done .irl-plug__disc { background: var(--verified); color: var(--on-verified); animation: irl-pop var(--duration-slow) var(--ease-spring); }
.irl-plug--noBattery .irl-plug__disc { background: var(--fill); color: var(--ink-3); }
.irl-plug__text { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); max-width: 320px; text-wrap: pretty; }

/* Luck: gold wheel and Plinko */
.irl-luck { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); width: 100%; }
.irl-luck__out { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); width: 100%; min-height: 104px; }
.irl-wheel__seg--0 { fill: var(--surface); }
.irl-wheel__seg--1 { fill: var(--fill-strong); }
.irl-wheel__seg--gold { fill: var(--game-gold); }
.irl-wheel__seg { stroke: var(--line); stroke-width: 1; }
.irl-wheel__star { fill: var(--surface); }
.irl-luck--win .irl-spin__wheelwrap { box-shadow: 0 0 0 6px var(--game-gold-soft), var(--shadow-card); }
.irl-plinko { display: block; width: 100%; max-width: 300px; overflow: visible; }
.irl-plinko__peg { fill: var(--line-strong); }
.irl-plinko__slot { fill: var(--fill); }
.irl-plinko__slot--gold { fill: var(--game-gold); }
.irl-plinko__slot--hit { stroke: var(--ink); stroke-width: 2.5; }
.irl-plinko__slot--gold.irl-plinko__slot--hit { stroke: var(--verified); }
.irl-plinko__ball { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; transition: cx 190ms var(--ease-standard), cy 190ms cubic-bezier(.5, 0, .9, .6); }
.irl-luck--win .irl-plinko__ball { fill: var(--surface); stroke: var(--verified); stroke-width: 3; }

/* Today chip for a game this version doesn't know */
.irl-quest__mode--update { color: var(--accent-text); }

/* Content colors for color games: each always comes with a word, a shape or a position too. */
.irl-ink--red { color: var(--game-red); } .irl-ink--blue { color: var(--game-blue); } .irl-ink--green { color: var(--game-green); } .irl-ink--purple { color: var(--rarity-epic); } .irl-ink--gold { color: var(--game-gold); }
.irl-ink-bg--red { --pad: var(--game-red); } .irl-ink-bg--blue { --pad: var(--game-blue); } .irl-ink-bg--green { --pad: var(--game-green); } .irl-ink-bg--gold { --pad: var(--game-gold); }
.irl-progress--attention .irl-progress__fill { background: var(--attention); }

/* Move IRL */
.irl-move, .irl-count, .irl-facedown, .irl-still { display: flex; flex-direction: column; align-items: center; gap: var(--space-20); }
.irl-count__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.irl-count__icon--jump { animation: irl-hop 900ms var(--ease-standard) infinite; }
.irl-count__icon--shake { animation: irl-shake 600ms var(--ease-standard) infinite; }
.irl-count__icon--turn .irl-icon { animation: irl-rotate 2.4s linear infinite; }
@keyframes irl-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } }
.irl-count .irl-ring, .irl-facedown .irl-ring, .irl-still .irl-ring { background: var(--surface); border-radius: 50%; box-shadow: var(--shadow-card); }
.irl-bubble { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-16); width: 100%; }
.irl-bubble__dish { display: block; width: 260px; height: 260px; margin: 0 auto; }
.irl-bubble__ring { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.irl-bubble__cross { stroke: var(--line); stroke-width: 1.5; }
.irl-bubble__target { fill: none; stroke: var(--line-strong); stroke-width: 2.5; stroke-dasharray: 5 5; }
.irl-bubble__dot { fill: var(--accent); stroke: var(--surface); stroke-width: 3; transition: cx 120ms linear, cy 120ms linear; }
.irl-bubble--in .irl-bubble__target { stroke: var(--verified); stroke-dasharray: none; }
.irl-bubble--out .irl-bubble__dot { fill: var(--attention); }
.irl-maze { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); width: 100%; }
.irl-maze__board { display: block; width: 100%; max-width: 330px; aspect-ratio: 1; }
.irl-maze__wall { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.irl-maze__frame { fill: var(--surface); }
.irl-maze__goal { fill: var(--verified-soft); stroke: var(--verified); stroke-width: 2.5; }
.irl-maze__flag { fill: none; stroke: var(--verified); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.irl-maze__ball { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.irl-north { display: flex; flex-direction: column; align-items: center; gap: var(--space-20); }
.irl-north__dial { position: relative; display: grid; place-items: center; width: 260px; height: 260px; }
.irl-north__dial > svg { position: absolute; inset: 0; transition: transform 200ms linear; }
.irl-north__face { fill: var(--surface); stroke: var(--line); stroke-width: 2; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .08)); }
.irl-north__tick { stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; }
.irl-north__letter { font: var(--text-headline); fill: var(--ink-2); }
.irl-north__letter--n { font: var(--text-title-2); fill: var(--game-red); }
.irl-north__pointer { position: absolute; top: -14px; left: 50%; z-index: 2; margin-left: -11px; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 20px solid var(--ink); }
.irl-north--on .irl-north__face { stroke: var(--verified); stroke-width: 4; }
.irl-north__hold { position: relative; z-index: 1; }
.irl-north__read { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.irl-north__ok { color: var(--verified); }

/* Reflex */
.irl-react { display: flex; flex-direction: column; gap: var(--space-12); width: 100%; flex: 1; }
.irl-react__panel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-12); min-height: 360px; padding: var(--space-24); border: 0; border-radius: var(--radius-2xl); background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-card); cursor: pointer; touch-action: manipulation; text-align: center; }
.irl-react__panel--go { background: var(--accent); color: var(--on-accent); }
.irl-react__panel--early { background: var(--attention-soft); color: var(--attention); }
.irl-react__panel--result { color: var(--ink); }
.irl-stop { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-16); width: 100%; }
.irl-stop__face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 240px; border-radius: var(--radius-2xl); background: var(--surface); box-shadow: var(--shadow-card); }
.irl-stop--hidden .irl-stop__face .numeral-xl { color: var(--ink-3); }
.irl-stop--ok .irl-stop__face { box-shadow: inset 0 0 0 3px var(--verified); }
.irl-stop--miss .irl-stop__face { box-shadow: inset 0 0 0 3px var(--attention); }
.irl-stop > p { min-height: 24px; display: grid; place-items: center; }
.irl-catch { display: flex; flex-direction: column; gap: var(--space-12); width: 100%; }
.irl-catch__field { position: relative; height: 420px; border-radius: var(--radius-2xl); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; }
.irl-catch__star { position: absolute; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: var(--game-gold-soft); color: var(--game-gold); cursor: pointer; }
.irl-colorword { display: flex; flex-direction: column; gap: var(--space-12); width: 100%; }
.irl-colorword__panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-16); height: 380px; border: 0; border-radius: var(--radius-2xl); background: var(--surface); box-shadow: var(--shadow-card); cursor: pointer; }
.irl-colorword__word { font: var(--text-display-xl); letter-spacing: .02em; }
.irl-colorword--match .irl-colorword__panel { box-shadow: inset 0 0 0 3px var(--verified); }
.irl-colorword--mistake .irl-colorword__panel { box-shadow: inset 0 0 0 3px var(--danger); animation: irl-shake 380ms var(--ease-standard); }
.irl-colorword__foot { display: flex; align-items: center; justify-content: space-between; min-height: 24px; }
.irl-rhythm { display: flex; flex-direction: column; align-items: center; gap: var(--space-20); width: 100%; }
.irl-rhythm__pad { display: grid; place-items: center; width: 200px; height: 200px; padding: 0; border: 0; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); box-shadow: 0 0 0 10px var(--surface), var(--shadow-card); cursor: pointer; }
.irl-rhythm__pad--pulse { animation: irl-beat var(--beat, 667ms) var(--ease-standard) infinite; }
@keyframes irl-beat { 0% { transform: scale(1.08); background: var(--accent); color: var(--on-accent); } 35%, 100% { transform: scale(1); } }
.irl-rhythm__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 300px; }
.irl-rhythm__dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-strong); }
.irl-rhythm__dot--hit { background: var(--verified); box-shadow: none; }
.irl-rhythm__dot--miss { box-shadow: inset 0 0 0 2px var(--attention); background: linear-gradient(45deg, transparent 44%, var(--attention) 44% 56%, transparent 56%); }
.irl-rhythm__dot--next { box-shadow: inset 0 0 0 3px var(--accent); }

/* Memory */
.irl-simon { display: flex; flex-direction: column; align-items: center; gap: var(--space-20); width: 100%; }
.irl-simon__pads { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); width: 100%; max-width: 320px; }
.irl-simon__pad { display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--radius-2xl); background: var(--surface); box-shadow: inset 0 0 0 3px var(--pad), var(--shadow-card); cursor: pointer; transition: transform var(--duration-press) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.irl-simon__pad svg { width: 64px; height: 64px; }
.irl-simon__pad path { fill: var(--pad); }
.irl-simon__pad--lit { background: var(--pad); transform: scale(1.04); box-shadow: 0 0 0 6px var(--surface), 0 0 0 9px var(--pad); }
.irl-simon__pad--lit path { fill: var(--surface); }
.irl-simon--watch .irl-simon__pad { cursor: default; }
.irl-nummem { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); width: 100%; }
.irl-nummem__num { font: var(--text-numeral-xl); letter-spacing: .08em; padding: var(--space-40) 0; }
.irl-nummem--show .irl-progress { width: 220px; }
.irl-nummem__answer--wrong { box-shadow: inset 0 0 0 2px var(--danger); background: var(--danger-soft); color: var(--danger); }
.irl-lights { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); width: 100%; }
.irl-lights__grid { display: grid; gap: var(--space-8); width: 100%; max-width: 330px; }
.irl-lights__tile { display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--radius-md); background: var(--surface); color: var(--on-accent); box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--line); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
.irl-lights__tile--on { background: var(--accent); box-shadow: 0 0 14px 2px var(--accent-soft); }
.irl-lights__tile--wrong { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 2px var(--danger); }
.irl-changed { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); width: 100%; }
.irl-changed__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); width: 100%; padding: var(--space-12); border-radius: var(--radius-2xl); background: var(--surface); box-shadow: var(--shadow-card); }
.irl-changed__item { display: grid; place-items: center; height: 92px; padding: 0; border: 0; border-radius: var(--radius-lg); background: transparent; color: var(--ink); cursor: pointer; }
.irl-changed--look .irl-changed__item { cursor: default; }
.irl-changed__item--right { background: var(--verified-soft); color: var(--verified); box-shadow: inset 0 0 0 2px var(--verified); }
.irl-changed__item--wrong { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 2px var(--danger); animation: irl-shake 380ms var(--ease-standard); }
.irl-changed > p { min-height: 24px; }

/* Puzzles */
.irl-slide { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); width: 100%; }
.irl-slide__board { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: var(--space-8); width: 100%; max-width: 320px; aspect-ratio: 1; padding: var(--space-8); border-radius: var(--radius-2xl); background: var(--fill); }
.irl-slide__tile { display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card), inset 0 -3px 0 var(--line); cursor: pointer; }
.irl-slide__tile--home { color: var(--accent-text); }
.irl-slide--done .irl-slide__tile { background: var(--verified-soft); color: var(--verified); box-shadow: none; }
.irl-search { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); width: 100%; }
.irl-search__grid { display: grid; gap: 2px; width: 100%; padding: var(--space-8); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.irl-search__cell { display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); cursor: pointer; }
.irl-search__cell--found { background: var(--verified-soft); color: var(--verified); }
.irl-search__cell--first { background: var(--accent); color: var(--on-accent); }
.irl-search__words { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); }
.irl-countdots { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); width: 100%; }
.irl-countdots__field { position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--radius-2xl); background: var(--surface); box-shadow: var(--shadow-card); }
.irl-countdots__field span { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ink); }
.irl-countdots__answer--right { box-shadow: inset 0 0 0 2px var(--verified); background: var(--verified-soft); color: var(--verified); }
.irl-sudoku { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); width: 100%; }
.irl-sudoku__grid { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; max-width: 300px; aspect-ratio: 1; border-radius: var(--radius-lg); background: var(--surface); box-shadow: inset 0 0 0 3px var(--ink); overflow: hidden; }
.irl-sudoku__cell { display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--accent-text); box-shadow: inset -1px -1px 0 var(--line); cursor: pointer; }
.irl-sudoku__cell--bx { box-shadow: inset -3px -1px 0 var(--ink); }
.irl-sudoku__cell--by { box-shadow: inset -1px -3px 0 var(--ink); }
.irl-sudoku__cell--bx.irl-sudoku__cell--by { box-shadow: inset -3px -3px 0 var(--ink); }
.irl-sudoku__cell--given { color: var(--ink); }
.irl-sudoku__cell--sel { background: var(--accent-soft); }
.irl-sudoku__cell--clash { color: var(--danger); text-decoration: underline wavy var(--danger); }
.irl-sudoku .irl-pad { max-width: 330px; }
.irl-pipes { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); width: 100%; }
.irl-pipes__board { display: block; width: 100%; max-width: 352px; }
.irl-pipes__bg { fill: var(--fill); }
.irl-pipes__cell { fill: var(--surface); }
.irl-pipes__tile { cursor: pointer; }
.irl-pipes__pipe { fill: none; stroke: var(--line-strong); stroke-linecap: round; }
.irl-pipes__pipe--on { stroke: var(--accent); }
.irl-pipes__joint { fill: var(--line-strong); }
.irl-pipes__joint--on { fill: var(--accent); }
.irl-pipes--done .irl-pipes__pipe--on { stroke: var(--verified); }
.irl-pipes--done .irl-pipes__joint--on { fill: var(--verified); }
.irl-pipes__ends { display: flex; justify-content: space-between; width: 100%; max-width: 352px; padding: 0 4px; }
.irl-riddle { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-16); width: 100%; }
.irl-riddle > .irl-pill { align-self: center; }
.irl-riddle__emoji { font-size: 64px; line-height: 1.2; text-align: center; letter-spacing: .1em; padding: var(--space-24) 0 var(--space-8); }
.irl-riddle > .irl-status { align-self: center; }
/* Math games (under review, planned). A chart here is the puzzle: no tooltips and no value labels on the marks; the axis carries the numbers. */
.irl-diff__dots { display: inline-flex; gap: 3px; margin-right: 2px; }
.irl-diff__dots i { width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.irl-diff__dots i.irl-diff__dot--on { background: currentColor; }
.irl-math__q--two { font: var(--text-numeral-l); gap: 10px; }
.irl-pad--decimal .irl-pad__key { height: 50px; }
.irl-pad__key--wide { grid-column: 1 / -1; }
.irl-ans { display: flex; align-items: center; justify-content: center; gap: 2px; }
.irl-ans__prefix { color: var(--ink-2); }
.irl-ans--right { box-shadow: inset 0 0 0 2px var(--verified); background: var(--verified-soft); color: var(--verified); }
.irl-ans--wrong { box-shadow: inset 0 0 0 2px var(--danger); background: var(--danger-soft); color: var(--danger); animation: irl-shake 380ms var(--ease-standard); }
.irl-frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.05; font-variant-numeric: tabular-nums; }
.irl-frac > span:first-child { padding: 0 .2em .06em; border-bottom: 2px solid currentColor; }
.irl-frac > span:last-child { padding-top: .06em; }
.irl-frac--big { font: var(--text-numeral-l); }

.irl-graph { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.irl-graph__chart { display: block; width: 100%; overflow: visible; }
.irl-graph__grid { stroke: var(--line); stroke-width: 1; }
.irl-graph__base { stroke: var(--line-strong); stroke-width: 1.5; }
.irl-graph__tick { font: var(--text-caption-1); fill: var(--ink-2); }
.irl-graph__tick--on { fill: var(--ink); font-weight: 700; }
.irl-graph__hit { fill: transparent; }
.irl-graph__col { cursor: pointer; outline: none; }
.irl-graph__col:focus-visible .irl-graph__hit { fill: var(--accent-soft); }
.irl-graph__bar { fill: var(--accent); }
.irl-graph__col--on .irl-graph__bar { fill: var(--accent-strong); stroke: var(--ink); stroke-width: 2; }
.irl-graph--picked .irl-graph__col:not(.irl-graph__col--on) .irl-graph__bar { opacity: .4; }
.irl-graph--right .irl-graph__col--on .irl-graph__bar { fill: var(--verified); stroke: none; }
.irl-graph--wrong .irl-graph__col--on .irl-graph__bar { fill: var(--danger); stroke: none; }
.irl-graph__line { fill: none; stroke: var(--accent-strong); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.irl-graph__dot { fill: var(--accent-strong); stroke: var(--surface); stroke-width: 2; }
.irl-graph__chart { padding: 10px 8px 4px; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); box-sizing: border-box; }
.irl-graph__q { text-wrap: balance; }

.irl-nline { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.irl-nline__ask { display: flex; align-items: center; justify-content: center; gap: 10px; }
.irl-nline__target { display: inline-flex; justify-content: center; align-items: center; min-height: 52px; padding: 0 16px; border-radius: var(--radius-lg); background: var(--accent-soft); color: var(--accent-text); font: var(--text-numeral-m); }
.irl-nline__target .irl-frac { font: var(--text-title-2); }
.irl-nline__svg { display: block; width: 100%; padding: 6px 0; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.irl-nline__axis { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.irl-nline__major { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.irl-nline__minor { stroke: var(--line-strong); stroke-width: 1.5; stroke-linecap: round; }
.irl-nline__label { font: var(--text-footnote-strong); fill: var(--ink-2); }
.irl-nline__marker { cursor: grab; outline: none; }
.irl-nline__marker:focus-visible .irl-nline__knob { stroke: var(--focus); stroke-width: 4; }
.irl-nline__stem { stroke: var(--accent-strong); stroke-width: 3; stroke-linecap: round; }
.irl-nline__knob { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
.irl-nline__dot { fill: var(--accent-strong); stroke: var(--surface); stroke-width: 2.5; }
.irl-nline--right .irl-nline__knob, .irl-nline--right .irl-nline__dot { fill: var(--verified); }
.irl-nline--right .irl-nline__stem { stroke: var(--verified); }
.irl-nline__val { font: var(--text-footnote-strong); fill: var(--verified); }
.irl-nline--wrong .irl-nline__knob, .irl-nline--wrong .irl-nline__dot { fill: var(--danger); }
.irl-nline--wrong .irl-nline__stem { stroke: var(--danger); }
.irl-nline--wrong .irl-nline__svg { animation: irl-shake 380ms var(--ease-standard); }

.irl-plot { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.irl-plot__coord { font-variant-numeric: tabular-nums; color: var(--accent-text); white-space: nowrap; }
.irl-plot__svg { display: block; width: 100%; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); cursor: crosshair; }
.irl-plot__grid { stroke: var(--line); stroke-width: 1; }
.irl-plot__axis { stroke: var(--ink-2); stroke-width: 2; }
.irl-plot__tick { font: var(--text-caption-2); fill: var(--ink-2); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.irl-plot__pt { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
.irl-plot__ptlabel { font: var(--text-caption-strong); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.irl-plot--right .irl-plot__pt { fill: var(--verified); }
.irl-plot--wrong .irl-plot__pt { fill: var(--danger); }
.irl-plot__line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.irl-plot__line--right { stroke: var(--verified); }
.irl-plot__line--wrong { stroke: var(--danger); }
.irl-plot__tag { fill: var(--surface-inverse); }
.irl-plot__tagtext { font: var(--text-caption-strong); fill: var(--ink-inverse); }
.irl-plot__choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.irl-plot__choice:disabled { cursor: default; }
.irl-plot__choice { height: 56px; border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--line); cursor: pointer; }
.irl-plot__choice--right { background: var(--verified-soft); color: var(--verified); box-shadow: inset 0 0 0 2px var(--verified); }
.irl-plot__choice--wrong { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 2px var(--danger); animation: irl-shake 380ms var(--ease-standard); }

.irl-shade { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.irl-shade__on { fill: var(--accent); }
.irl-shade__off { fill: var(--surface); }
.irl-shade__cut { stroke: var(--line-strong); stroke-width: 2; }
.irl-shade__cut--on { stroke: var(--surface); stroke-width: 2; }
.irl-shade__rim { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.irl-shade__pies { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.irl-shade__opt { display: grid; place-items: center; height: 120px; border: 0; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); cursor: pointer; }
.irl-shade__opt--right { background: var(--verified-soft); box-shadow: inset 0 0 0 2.5px var(--verified); }
.irl-shade__opt:disabled, .irl-shade__card:disabled { cursor: default; }
.irl-shade__opt--wrong { background: var(--danger-soft); box-shadow: inset 0 0 0 2.5px var(--danger); animation: irl-shake 380ms var(--ease-standard); }
.irl-shade__ask { display: flex; align-items: center; justify-content: center; gap: 10px; }
.irl-shade__bar { display: grid; gap: 4px; height: 76px; padding: 6px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.irl-shade__cell { border: 0; border-radius: 6px; background: var(--fill); box-shadow: inset 0 0 0 1.5px var(--line-strong); cursor: pointer; }
.irl-shade__cell--on { background: var(--accent); box-shadow: none; }
.irl-shade--right .irl-shade__cell--on { background: var(--verified); }
.irl-shade__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.irl-shade__card { display: grid; place-items: center; height: 140px; border: 0; border-radius: var(--radius-xl); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); cursor: pointer; }
.irl-shade__card--right { background: var(--verified-soft); color: var(--verified); box-shadow: inset 0 0 0 2.5px var(--verified); }
.irl-shade__card--wrong { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 2.5px var(--danger); animation: irl-shake 380ms var(--ease-standard); }

.irl-seq { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.irl-seq__tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.irl-seq__tile { display: grid; place-items: center; min-width: 50px; height: 58px; padding: 0 8px; border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-card); color: var(--ink); }
.irl-seq__tile--ask { min-width: 64px; background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 2px var(--accent-text); }
.irl-seq__tile--ask.irl-ans--right { background: var(--verified-soft); color: var(--verified); box-shadow: inset 0 0 0 2px var(--verified); }
.irl-seq__tile--ask.irl-ans--wrong { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 2px var(--danger); }

.irl-bal { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.irl-bal__svg { display: block; width: 100%; overflow: visible; }
.irl-bal__post { fill: var(--fill-strong); stroke: var(--line-strong); stroke-width: 1.5; stroke-linejoin: round; }
.irl-bal__base { stroke: var(--line-strong); stroke-width: 4; stroke-linecap: round; }
.irl-bal__beam, .irl-bal__side { transition: transform 600ms var(--ease-spring); }
.irl-bal__beam path { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.irl-bal__pivot { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.irl-bal__string { stroke: var(--line-strong); stroke-width: 1.5; }
.irl-bal__pan { fill: var(--fill-strong); stroke: var(--line-strong); stroke-width: 1.5; }
.irl-bal__bag { fill: var(--accent-soft); stroke: var(--accent-text); stroke-width: 2; }
.irl-bal__x { font: italic 700 18px/1 var(--font-display); fill: var(--accent-text); }
.irl-bal__unit { fill: var(--ink-2); }
.irl-bal--right .irl-bal__beam path { stroke: var(--verified); }
.irl-bal__ask { display: flex; align-items: center; justify-content: center; gap: 14px; }
.irl-bal__ask .irl-math__answer { min-width: 110px; height: 64px; }
@media (prefers-reduced-motion: reduce) { .irl-bal__beam, .irl-bal__side { transition: none; } }

.irl-target { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.irl-target__goal { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 112px; height: 112px; border-radius: 50%; background: var(--surface-inverse); color: var(--ink-inverse); }
.irl-target__goal .irl-muted { color: var(--ink-inverse); opacity: .75; }
.irl-target--right .irl-target__goal { background: var(--verified); color: var(--on-verified); }
.irl-target__tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 76px; }
.irl-target__tile { display: grid; place-items: center; min-width: 76px; height: 76px; padding: 0 10px; border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card), inset 0 -3px 0 var(--line); cursor: pointer; }
.irl-target__tile--made { background: var(--accent-soft); color: var(--accent-text); }
.irl-target__tile--sel { box-shadow: inset 0 0 0 3px var(--accent-text); }
.irl-target__tile--right { background: var(--verified-soft); color: var(--verified); box-shadow: inset 0 0 0 2px var(--verified); }
.irl-target--wrong .irl-target__tiles { animation: irl-shake 380ms var(--ease-standard); }
.irl-target__ops { display: flex; gap: 10px; }
.irl-target__op { display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--fill); color: var(--ink); cursor: pointer; }
.irl-target__op:disabled { color: var(--ink-disabled); cursor: default; }
.irl-target__op--on { background: var(--accent); color: var(--on-accent); }
.irl-target__log { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; color: var(--ink); }
.irl-target__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }

.irl-money { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.irl-money__receipt { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 16px 18px 18px; border-radius: var(--radius-lg) var(--radius-lg) 4px 4px; background: var(--surface); box-shadow: var(--shadow-card); }
.irl-money__receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 8px; background: radial-gradient(circle at 6px 0, var(--surface) 5px, transparent 5.5px) 0 0 / 12px 8px repeat-x; }
.irl-money__icon { color: var(--ink-2); }
.irl-money__line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 8px; border-top: 1.5px dashed var(--line); }
.irl-money__line:first-of-type { border-top: 0; padding-top: 0; }
.irl-money .irl-math__answer { min-width: 180px; }
/* Web (under review): doIRL's web pages. Night in both themes, Anybody for display type, the flame palette, scroll motion.
   Layout follows the container (.irl-landing or .irl-wframe), not the window, so phone and desktop frames can sit side by side.
   Fixed chrome (fuse, nav, get bar, sparks) lives outside the container, so nothing in the page (a filter, a transform)
   can trap position: fixed. A frame (.irl-wframe) keeps fixed parts inside it on purpose, for previews and boards. */
.irl-web {
  position: relative; background: var(--web-night); color: var(--web-bone); color-scheme: dark; overflow-x: clip;
  font-family: var(--font-display); -webkit-font-smoothing: antialiased;
  --wg: clamp(20px, calc(6.63px + 3.43cqi), 56px);
  --ws: clamp(96px, calc(69.26px + 6.86cqi), 168px);
  --wmax: 1320px;
  --flame-grad: linear-gradient(100deg, var(--flame-white) 0%, var(--flame-gold) 18%, var(--flame) 46%, var(--flame-deep) 72%, var(--ember) 100%);
}
.irl-web::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.irl-web--still::after, .irl-web--phone::after, .irl-web--desktop::after, .irl-web--frame::after { position: absolute; }
.irl-web__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.irl-landing, .irl-wframe { container: web / inline-size; position: relative; }
.irl-wframe { contain: layout; }
.irl-web a { color: inherit; }
.irl-web :focus-visible { outline: 3px solid var(--volt); outline-offset: 3px; border-radius: 6px; }

/* Type: each style grows from its phone size to its desktop size with the container. */
.irl-web .irl-kicker { display: inline-block; font: 800 clamp(12px, calc(11.26px + .19cqi), 14px)/1.2 var(--font-web); font-variation-settings: "wdth" 125; letter-spacing: .16em; text-transform: uppercase; color: var(--flame); }
.irl-web .irl-display { margin: 0; font: 900 clamp(46px, calc(21.49px + 6.29cqi), 112px)/.9 var(--font-web); font-variation-settings: "wdth" 84; letter-spacing: -.015em; text-transform: uppercase; text-wrap: balance; }
.irl-web .irl-title { margin: 0; font: 800 clamp(28px, calc(20.57px + 1.9cqi), 48px)/1 var(--font-web); font-variation-settings: "wdth" 96; letter-spacing: -.01em; }
.irl-web .irl-lede { margin: 0; max-width: 34em; font: 500 clamp(18px, calc(15.77px + .57cqi), 24px)/1.4 var(--font-display); letter-spacing: -.005em; color: var(--web-ash); text-wrap: pretty; }

/* Flame text */
.irl-flame { background: var(--flame-grad); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: irl-burn 5s ease-in-out infinite alternate; }
.irl-flame--heat { filter: url(#irl-heat) drop-shadow(0 0 22px rgba(255, 107, 44, .38)); }
@keyframes irl-burn { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* MegaType: JavaScript sets each line's size and width axis; this is the look and a fallback size. */
.irl-mega { position: relative; margin: 0; display: flex; flex-direction: column; align-items: flex-start; font-family: var(--font-web); font-weight: 900; line-height: .86; letter-spacing: -.012em; text-transform: uppercase; color: var(--web-bone); opacity: 0; transition: opacity .35s; }
.irl-mega.is-ready { opacity: 1; }
.irl-mega__line { display: block; white-space: nowrap; font-size: clamp(76px, calc(34.4px + 10.67cqi), 188px); padding: .02em 0; }
.irl-mega__line--outline { color: transparent; -webkit-text-stroke: 2px var(--web-bone); }
.irl-mega__probe { position: absolute; left: -9999px; top: 0; visibility: hidden; white-space: nowrap; font: 900 100px/1 var(--font-web); letter-spacing: -.012em; text-transform: uppercase; }

/* Stickers */
.irl-sticker { --dx: 0px; --dy: 0px; --st-bg: var(--web-bone); --st-ink: var(--web-night); position: relative; display: inline-flex; align-items: center; rotate: var(--tilt); translate: var(--dx) var(--dy); font: 800 15px/1 var(--font-web); font-variation-settings: "wdth" 112; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; user-select: none; -webkit-user-select: none; transition: rotate .3s var(--ease-spring), scale .3s var(--ease-spring); }
.irl-sticker__body { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px 8px; border-radius: 999px; background: var(--st-bg); color: var(--st-ink); box-shadow: 0 0 0 2px var(--web-night), 0 6px 0 0 rgba(0, 0, 0, .45); }
.irl-sticker--l { font-size: 20px; }
.irl-sticker--l .irl-sticker__body { padding: 11px 18px 10px; }
.irl-sticker--s { font-size: 12px; }
.irl-sticker--flame { --st-bg: var(--flame); }
.irl-sticker--gold { --st-bg: var(--flame-gold); }
.irl-sticker--volt { --st-bg: var(--volt); }
.irl-sticker--ink { --st-bg: var(--web-coal); --st-ink: var(--web-bone); }
.irl-sticker--ink .irl-sticker__body { box-shadow: inset 0 0 0 2px var(--web-bone), 0 6px 0 0 rgba(0, 0, 0, .45); }
.irl-sticker--verified { --st-bg: #3FD68E; --st-ink: #06170E; }
.irl-sticker--common { --st-bg: #A9ABAE; } .irl-sticker--uncommon { --st-bg: #4FD2BF; } .irl-sticker--rare { --st-bg: #8CABFF; }
.irl-sticker--epic { --st-bg: #C59BFF; } .irl-sticker--legendary { --st-bg: #F4CB52; } .irl-sticker--mythic { --st-bg: #FF7EB1; }
.irl-sticker--burst .irl-sticker__body { background: none; box-shadow: none; padding: 22px 18px; }
.irl-sticker__burst { position: absolute; inset: -18% -8%; width: 116%; height: 136%; fill: var(--st-bg); filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .45)); }
.irl-sticker--drag { cursor: grab; touch-action: none; }
.irl-sticker--drag:hover { scale: 1.05; }
.irl-sticker.is-held { cursor: grabbing; rotate: 0deg; scale: 1.1; z-index: 20; }
.irl-sticker--float { animation: irl-bob 5s ease-in-out infinite; }

/* Reveal: at rest a section is already there, dim and grey; on screen it rises and ignites. */
.irl-reveal { opacity: .55; translate: 0 34px; scale: .97; filter: saturate(.15) brightness(.78); transition: opacity var(--web-reveal-time) var(--web-ease-blast) var(--delay, 0ms), translate var(--web-reveal-time) var(--web-ease-blast) var(--delay, 0ms), scale var(--web-reveal-time) var(--web-ease-blast) var(--delay, 0ms), filter var(--web-reveal-time) var(--web-ease-blast) var(--delay, 0ms); }
.irl-reveal.is-in { opacity: 1; translate: 0 0; scale: 1; filter: none; }

/* Fuse */
.irl-fuse { --p: 0; position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 4px; z-index: 61; background: rgba(255, 255, 255, .06); pointer-events: none; }
.irl-fuse__lit { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p)); background: var(--flame-grad); box-shadow: 0 0 12px var(--flame); }
.irl-fuse__spark { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: radial-gradient(circle, var(--flame-white) 0 28%, var(--flame-gold) 44%, transparent 70%); animation: irl-flicker .22s steps(2) infinite; }

/* Nav */
.irl-web .irl-wnav { container: wnav / inline-size; position: fixed; top: 0; left: 0; right: 0; padding-top: calc(4px + env(safe-area-inset-top, 0px)); z-index: 60; transition: background-color .3s, box-shadow .3s; }
.irl-wnav__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: calc(var(--wmax) + 2 * var(--wg)); margin: 0 auto; padding: 12px var(--wg); }
.irl-web .irl-wnav.is-solid { background: rgba(10, 10, 11, .74); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 1px 0 var(--web-smoke); }
.irl-web .irl-wnav--still { position: absolute; top: 0; padding-top: 0; }
.irl-wnav__logo { display: inline-flex; }
.irl-wnav__links { display: none; gap: 28px; }
.irl-wnav__links a { font: 700 15px/1 var(--font-display); text-decoration: none; opacity: .82; transition: opacity .2s, color .2s; }
.irl-wnav__links a:hover { opacity: 1; color: var(--flame); }
.irl-wnav__end { display: flex; align-items: center; gap: 10px; }
.irl-web .irl-wnav__menu { height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--web-bone); box-shadow: inset 0 0 0 2px var(--web-bone); font: 800 13px/1 var(--font-web); font-variation-settings: "wdth" 120; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.irl-web .irl-wnav .irl-wnav__cta { display: none; }
@container wnav (min-width: 720px) { .irl-web .irl-wnav .irl-wnav__cta { display: inline-flex; } }
@container wnav (min-width: 980px) { .irl-wnav__links { display: flex; } .irl-wnav__menu { display: none; } }
.irl-wmenu { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; gap: 28px; padding: calc(16px + env(safe-area-inset-top, 0px)) 20px calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--web-night); animation: irl-menu-in .4s var(--web-ease-blast); overflow-y: auto; }
.irl-wmenu__top { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; }
.irl-web .irl-wmenu__close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--web-coal); color: var(--web-bone); display: grid; place-items: center; cursor: pointer; }
.irl-wmenu__links { display: flex; flex-direction: column; gap: 2px; flex: 1; justify-content: center; }
.irl-wmenu__links a { font: 900 clamp(44px, 13vw, 72px)/1 var(--font-web); font-variation-settings: "wdth" 80; text-transform: uppercase; text-decoration: none; animation: irl-menu-link .5s var(--web-ease-blast) both; animation-delay: calc(var(--i) * 60ms); }
.irl-wmenu__links a:hover, .irl-wmenu__links a:focus-visible { color: var(--flame); }
.irl-wframe .irl-wmenu__links a { font-size: clamp(44px, 13cqi, 72px); }

/* Buttons */
.irl-web .irl-wbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border: 0; border-radius: 999px; text-decoration: none; cursor: pointer; font: 800 15px/1 var(--font-web); font-variation-settings: "wdth" 115; letter-spacing: .08em; text-transform: uppercase; transition: translate .16s var(--ease-spring), box-shadow .16s, background-color .2s; }
.irl-web .irl-wbtn--s { height: 40px; padding: 0 16px; font-size: 13px; }
.irl-web .irl-wbtn--l { height: 60px; padding: 0 30px; font-size: 17px; }
.irl-web .irl-wbtn--flame { background: var(--flame); color: var(--web-night); box-shadow: 0 0 0 2px var(--web-night), 0 5px 0 0 var(--ember); }
.irl-web .irl-wbtn--flame:hover { translate: 0 -2px; box-shadow: 0 0 0 2px var(--web-night), 0 7px 0 0 var(--ember), 0 0 30px rgba(255, 107, 44, .45); }
.irl-web .irl-wbtn--flame:active { translate: 0 3px; box-shadow: 0 0 0 2px var(--web-night), 0 2px 0 0 var(--ember); }
.irl-web .irl-wbtn--bone { background: var(--web-bone); color: var(--web-night); }
.irl-web .irl-wbtn--ghost { background: transparent; color: var(--web-bone); box-shadow: inset 0 0 0 2px var(--web-bone); }
.irl-web .irl-wbtn--ghost:hover { color: var(--flame); box-shadow: inset 0 0 0 2px var(--flame); }

/* Store buttons */
.irl-stores { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.irl-stores--column { flex-direction: column; align-items: stretch; }
.irl-web .irl-store { display: inline-flex; align-items: center; gap: 11px; text-align: left; height: 58px; padding: 0 20px 0 12px; border-radius: 18px; background: var(--web-bone); color: var(--web-night); text-decoration: none; box-shadow: 0 0 0 2px var(--web-night), 0 6px 0 0 var(--flame); transition: translate .16s var(--ease-spring), rotate .16s var(--ease-spring), box-shadow .16s; }
.irl-web .irl-store:hover { translate: 0 -3px; rotate: -1.5deg; box-shadow: 0 0 0 2px var(--web-night), 0 9px 0 0 var(--flame); }
.irl-web .irl-store:active { translate: 0 3px; box-shadow: 0 0 0 2px var(--web-night), 0 2px 0 0 var(--flame); }
.irl-store__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--web-night); color: var(--flame); flex: none; }
.irl-store__text { display: flex; flex-direction: column; gap: 3px; }
.irl-store__small { font: 600 11px/1 var(--font-text); }
.irl-store__big { font: 800 19px/1 var(--font-display); letter-spacing: -.01em; }
.irl-stores--l .irl-store { height: 66px; padding: 0 24px 0 14px; border-radius: 20px; }
.irl-stores--l .irl-store__big { font-size: 22px; }
.irl-stores--s .irl-store { height: 46px; padding: 0 14px 0 9px; border-radius: 14px; box-shadow: 0 0 0 2px var(--web-night), 0 4px 0 0 var(--flame); }
.irl-stores--s .irl-store__mark { width: 28px; height: 28px; border-radius: 9px; }
.irl-stores--s .irl-store__big { font-size: 16px; }
.irl-stores--s .irl-store__small { font-size: 10px; }
/* On a phone the two buttons share one row, at any size. */
@container web (max-width: 719px) {
  .irl-web .irl-stores:not(.irl-stores--column) { flex-wrap: nowrap; width: 100%; }
  .irl-web .irl-stores .irl-store { flex: 1 1 0; min-width: 0; max-width: 220px; height: 54px; gap: 8px; padding: 0 10px 0 9px; border-radius: 16px; }
  .irl-web .irl-stores .irl-store__mark { width: 30px; height: 30px; border-radius: 10px; }
  .irl-web .irl-stores .irl-store__big { font-size: 15px; white-space: nowrap; }
  .irl-web .irl-stores .irl-store__small { font-size: 10px; white-space: nowrap; }
}

/* Ticker */
.irl-ticker { position: relative; z-index: 3; width: 112%; margin: clamp(28px, 3.4cqi, 56px) -6%; padding: clamp(10px, 1.1cqi, 18px) 0; overflow: hidden; rotate: var(--tilt); }
.irl-ticker--flame { background: var(--flame-grad); color: var(--web-night); box-shadow: 0 10px 50px rgba(255, 107, 44, .35); }
.irl-ticker--outline { background: var(--web-coal); color: transparent; -webkit-text-stroke: 1.5px var(--web-bone); box-shadow: inset 0 2px 0 var(--web-smoke), inset 0 -2px 0 var(--web-smoke); }
.irl-ticker--volt { background: var(--volt); color: var(--web-night); }
.irl-ticker__track { display: flex; width: max-content; will-change: transform; }
.irl-ticker__item { display: inline-flex; align-items: center; gap: .42em; padding-right: .42em; font: 900 clamp(26px, calc(13.6px + 3.2cqi), 60px)/1 var(--font-web); font-variation-settings: "wdth" 118; letter-spacing: -.005em; text-transform: uppercase; white-space: nowrap; }
.irl-web .irl-ticker__sep { height: .7em; width: auto; flex: none; color: var(--web-night) !important; -webkit-text-stroke: 0; }
.irl-web .irl-ticker--outline .irl-ticker__sep { color: var(--flame) !important; }
.irl-ticker__sep--text { -webkit-text-fill-color: var(--flame); font-size: .7em; }
.irl-web--still .irl-ticker__track { transform: translateX(-8%); }

/* Sections */
.irl-wsec { position: relative; max-width: calc(var(--wmax) + 2 * var(--wg)); margin: 0 auto; padding: var(--ws) var(--wg) 0; }
.irl-wsec__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(32px, 4cqi, 64px); }
.irl-wsec--center .irl-wsec__head { align-items: center; text-align: center; }
.irl-wsec--bleed { max-width: none; padding-left: 0; padding-right: 0; }
.irl-wsec--bleed .irl-wsec__head, .irl-wsec__after { max-width: var(--wmax); margin-left: auto; margin-right: auto; padding-left: var(--wg); padding-right: var(--wg); box-sizing: content-box; }
.irl-wsec__after { display: flex; margin-top: 8px; }

/* Hero */
.irl-whero { position: relative; display: grid; gap: 30px; max-width: calc(var(--wmax) + 2 * var(--wg)); margin: 0 auto; padding: calc(92px + 2cqi) var(--wg) 36px; }
@container web (min-width: 720px) { .irl-whero { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: 40px; min-height: 820px; padding-top: 118px; } }
.irl-whero__glow { position: absolute; z-index: 0; left: 62%; top: 46%; width: max(760px, 90cqi); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 107, 44, .4), rgba(196, 26, 12, .2) 46%, transparent 74%); pointer-events: none; animation: irl-breathe 7s ease-in-out infinite; }
.irl-whero__words { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.irl-whero__kicker { align-self: flex-start; margin: 0 0 -4px 4px; }
.irl-web .irl-whero__lede { color: var(--web-bone); opacity: .9; }
.irl-whero__note { margin: 0; font: 600 13px/1.3 var(--font-text); color: var(--web-ash); }
.irl-whero__stage { position: relative; z-index: 1; display: flex; justify-content: center; padding: 12px 0 28px; min-width: 0; }
.irl-whero__phone { position: relative; rotate: 4deg; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .6)) drop-shadow(0 0 70px rgba(255, 107, 44, .22)); animation: irl-hover 7s ease-in-out infinite; }
.irl-whero__stage .irl-sticker { position: absolute; z-index: 3; }
.irl-whero__s1 { top: 3%; left: 2%; }
.irl-whero__s2 { top: 31%; right: 0; }
.irl-whero__s3 { bottom: 20%; left: 0; }
.irl-whero__s4 { bottom: 5%; right: 8%; }
@container web (min-width: 720px) { .irl-whero__s1 { left: 0; } .irl-whero__s2 { right: -4%; } .irl-whero__s3 { left: -6%; } }
.irl-web .irl-whero__bubble { position: absolute; z-index: 2; width: clamp(70px, calc(52px + 5.2cqi), 126px); box-shadow: 0 0 0 3px var(--flame), 0 18px 40px rgba(0, 0, 0, .55); animation: irl-bob 6s ease-in-out infinite; }
.irl-whero__bubble--0 { top: 13%; right: 3%; animation-delay: -1s; }
.irl-whero__bubble--1 { top: 52%; left: 3%; animation-delay: -3s; }
.irl-whero__bubble--2 { bottom: 0; left: 40%; animation-delay: -5s; }
@container web (max-width: 719px) { .irl-whero__bubble--2 { display: none; } }

/* Steps */
.irl-steps { display: grid; gap: 16px; }
@container web (min-width: 720px) { .irl-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; } }
.irl-step { position: relative; height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 22px; border-radius: 30px; background: var(--web-coal); box-shadow: inset 0 0 0 1.5px var(--web-smoke); overflow: hidden; box-sizing: border-box; }
.irl-step__n { font: 900 clamp(80px, calc(58px + 5.6cqi), 140px)/.78 var(--font-web); font-variation-settings: "wdth" 132; color: transparent; -webkit-text-stroke: 2px var(--flame); margin-bottom: 6px; }
.irl-step__body { margin: 0; font: 500 16px/1.45 var(--font-display); color: var(--web-ash); }
.irl-step__art { margin-top: auto; padding-top: 14px; }
.irl-step__quests { display: flex; flex-direction: column; gap: 8px; }
.irl-miniq { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 16px; background: var(--web-night); box-shadow: inset 0 0 0 1.5px var(--web-smoke); }
.irl-miniq__icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--flame); color: var(--web-night); flex: none; }
.irl-miniq__text { display: flex; flex-direction: column; gap: 2px; font: 700 14px/1.2 var(--font-display); }
.irl-miniq__mode { font: 600 11px/1 var(--font-text); color: var(--web-ash); }
.irl-miniq__new { margin-left: auto; font: 900 11px/1 var(--font-web); letter-spacing: .14em; text-transform: uppercase; color: var(--volt); }
.irl-step__clip { width: min(210px, 62%); margin: 0 auto; }
.irl-step__flex { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 10px; }
.irl-step__level { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.irl-web .irl-step__num { font: 900 clamp(88px, calc(64px + 6cqi), 150px)/.86 var(--font-web); font-variation-settings: "wdth" 110; }

/* Clips */
.irl-clip { --rx: 0deg; --ry: 0deg; position: relative; margin: 0; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: var(--web-coal); box-shadow: 0 0 0 2px var(--web-smoke), 0 24px 60px rgba(0, 0, 0, .55); transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--tilt, 0deg)); transition: transform .45s var(--web-ease-blast), box-shadow .3s; isolation: isolate; }
.irl-clip:hover { box-shadow: 0 0 0 2px var(--flame), 0 30px 80px rgba(255, 107, 44, .22); }
.irl-clip__media { position: absolute; inset: 0; }
.irl-clip__media video, .irl-clip__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.irl-clip__standin { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(244, 244, 241, .6); background: radial-gradient(120% 80% at 30% 20%, #3A1B10, var(--web-coal) 60%), var(--web-coal); }
.irl-clip__label { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 5px 7px 4px; border-radius: 6px; background: rgba(10, 10, 11, .62); color: var(--web-bone); font: 700 10px/1 var(--font-text); letter-spacing: .06em; text-transform: uppercase; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.irl-clip__cap { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 56px 14px 14px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .8)); }
.irl-clip__title { font: 900 clamp(20px, calc(16px + .6cqi), 26px)/.95 var(--font-web); font-variation-settings: "wdth" 88; text-transform: uppercase; color: var(--web-bone); }
.irl-clip__quest { font: 600 12px/1.3 var(--font-text); color: rgba(244, 244, 241, .84); }
.irl-clip__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.irl-web .irl-clip__toggle { position: absolute; z-index: 3; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(10, 10, 11, .55); color: var(--web-bone); cursor: pointer; opacity: 0; transition: opacity .2s; }
.irl-clip:hover .irl-clip__toggle, .irl-web .irl-clip__toggle.is-paused, .irl-web .irl-clip__toggle:focus-visible { opacity: 1; }
@media (hover: none) { .irl-web .irl-clip__toggle { opacity: .85; } }
.irl-clip--round { aspect-ratio: 1; border-radius: 50%; }
.irl-clip--round .irl-clip__toggle { display: none; }
.irl-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font: 700 11px/1 var(--font-text); white-space: nowrap; color: var(--web-night); }
.irl-chip--verified { background: #3FD68E; color: #06170E; }
.irl-chip--common { background: #A9ABAE; } .irl-chip--uncommon { background: #4FD2BF; } .irl-chip--rare { background: #8CABFF; }
.irl-chip--epic { background: #C59BFF; } .irl-chip--legendary { background: #F4CB52; } .irl-chip--mythic { background: #FF7EB1; }
.irl-chip--ash { align-self: flex-start; height: 30px; padding: 0 12px; gap: 6px; background: var(--web-coal); color: var(--web-bone); box-shadow: inset 0 0 0 1.5px var(--web-smoke); font-size: 13px; }

/* Reel */
.irl-reel { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--wg); padding: 10px var(--wg) 34px; scrollbar-width: none; }
.irl-reel::-webkit-scrollbar { display: none; }
.irl-reel__slot { flex: 0 0 min(64cqi, 290px); scroll-snap-align: start; }
@container web (min-width: 720px) {
  .irl-reel { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.7cqi, 24px); overflow: visible; max-width: var(--wmax); margin: 0 auto; padding: 16px var(--wg) 56px; }
  .irl-reel__slot:nth-child(even) { margin-top: 64px; }
}

/* Proof wall */
.irl-wall { columns: 2; column-gap: 12px; }
@container web (min-width: 720px) { .irl-wall { columns: 4; column-gap: 24px; } }
.irl-wall__item { break-inside: avoid; margin-bottom: 16px; }
@container web (min-width: 720px) { .irl-wall__item { margin-bottom: 26px; } }
.irl-polaroid { margin: 0; padding: 8px 8px 12px; border-radius: 6px; background: var(--web-bone); color: var(--web-night); rotate: var(--tilt, 0deg); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); transition: rotate .35s var(--ease-spring), scale .35s var(--ease-spring); }
.irl-polaroid:hover { rotate: 0deg; scale: 1.03; }
.irl-polaroid__img { position: relative; overflow: hidden; border-radius: 3px; background: #2A2A2E; }
.irl-polaroid__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.irl-polaroid figcaption { display: flex; flex-direction: column; gap: 8px; padding: 10px 4px 0; }
.irl-polaroid__quest { font: 800 clamp(13px, calc(11.5px + .3cqi), 16px)/1.1 var(--font-web); font-variation-settings: "wdth" 84; text-transform: uppercase; }

/* Trend */
.irl-trend { position: relative; display: grid; gap: 28px; max-width: calc(var(--wmax) + 2 * var(--wg)); margin: 0 auto; padding: var(--ws) var(--wg) 0; }
@container web (min-width: 720px) {
  .irl-trend { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); grid-template-areas: "main clip" "formats formats"; align-items: center; column-gap: 56px; row-gap: 48px; }
  .irl-trend__main { grid-area: main; } .irl-trend__clip { grid-area: clip; } .irl-trend__formats { grid-area: formats; }
}
.irl-trend__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.irl-trend__badge { align-self: flex-start; }
.irl-trend__tag { width: 100%; }
.irl-trend__clip { width: min(300px, 74cqi); justify-self: center; }
.irl-trend__formats { display: flex; flex-direction: column; gap: 14px; }
.irl-formats { display: grid; gap: 12px; }
@container web (min-width: 720px) { .irl-formats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.irl-format { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 18px; border-radius: 24px; background: var(--web-coal); box-shadow: inset 0 0 0 1.5px var(--web-smoke); }
.irl-format__icon { grid-row: span 2; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--volt); color: var(--web-night); }
.irl-format__title { font: 800 18px/1.1 var(--font-web); font-variation-settings: "wdth" 100; text-transform: uppercase; }
.irl-format__body { font: 500 15px/1.4 var(--font-display); color: var(--web-ash); }

/* Loot */
.irl-loot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@container web (min-width: 720px) { .irl-loot { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; } }
.irl-loot__item > div { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 8px 16px; border-radius: 26px; background: var(--web-coal); box-shadow: inset 0 0 0 1.5px var(--web-smoke); text-align: center; transition: translate .3s var(--ease-spring), box-shadow .3s; }
.irl-loot__item > div:hover { translate: 0 -6px; box-shadow: inset 0 0 0 2px var(--tier), 0 18px 50px rgba(0, 0, 0, .5); }
.irl-loot__item--common { --tier: #A9ABAE; } .irl-loot__item--uncommon { --tier: #4FD2BF; } .irl-loot__item--rare { --tier: #8CABFF; }
.irl-loot__item--epic { --tier: #C59BFF; } .irl-loot__item--legendary { --tier: #F4CB52; } .irl-loot__item--mythic { --tier: #FF7EB1; }
.irl-loot__medal { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--tier) 40%, transparent)); }
.irl-loot__item--mythic .irl-loot__medal { animation: irl-mythic 2.6s ease-in-out infinite; }
.irl-loot__tier { font: 900 17px/1 var(--font-web); font-variation-settings: "wdth" 96; text-transform: uppercase; color: var(--tier); }
.irl-loot__share { font: 600 12px/1.3 var(--font-text); color: var(--web-ash); }

/* Creators */
.irl-creators { position: relative; display: grid; gap: 24px; max-width: calc(var(--wmax) + 2 * var(--wg)); margin: 0 auto; padding: var(--ws) var(--wg) 0; }
@container web (min-width: 720px) { .irl-creators { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 48px; } }
.irl-creators__card { display: flex; flex-direction: column; gap: 16px; padding: clamp(26px, 4cqi, 56px); border-radius: 36px; background: radial-gradient(120% 140% at 0% 0%, #3A1B10 0%, var(--web-coal) 58%); box-shadow: inset 0 0 0 2px var(--flame); }
.irl-creators__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 6px; }
.irl-creators__note { font: 500 13px/1.3 var(--font-text); color: var(--web-ash); }
.irl-creators__stack { position: relative; height: clamp(330px, calc(250px + 18cqi), 520px); }
.irl-web .irl-creators__clip { position: absolute; width: clamp(140px, calc(100px + 9cqi), 230px); }
.irl-creators__clip--0 { left: 2%; top: 12%; --tilt: -9deg; }
.irl-creators__clip--1 { left: 33%; top: 0; z-index: 2; --tilt: 3deg; }
.irl-creators__clip--2 { right: 2%; top: 16%; --tilt: 10deg; }

/* Final call */
.irl-final { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: var(--ws); padding: calc(var(--ws) * .7) var(--wg); text-align: center; overflow: hidden; }
.irl-final .irl-mega { align-items: center; width: min(100%, 1180px); }
.irl-final .irl-lede { color: var(--web-bone); }
.irl-final .irl-stores { justify-content: center; }
.irl-final__glow { position: absolute; z-index: 0; left: 50%; top: 55%; width: max(700px, 110cqi); aspect-ratio: 1.6; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 107, 44, .5), rgba(196, 26, 12, .22) 50%, transparent 76%); animation: irl-breathe 5s ease-in-out infinite; pointer-events: none; }
.irl-final > :not(.irl-final__glow) { position: relative; z-index: 1; }

/* FAQ */
.irl-wsec--faq { max-width: calc(900px + 2 * var(--wg)); }
.irl-faq { display: flex; flex-direction: column; gap: 10px; }
.irl-web .irl-faq .irl-disc { border-radius: 22px; background: var(--web-coal); box-shadow: inset 0 0 0 1.5px var(--web-smoke); }
.irl-web .irl-faq .irl-disc__head { min-height: 64px; padding: 14px 20px; color: var(--web-bone); }
.irl-web .irl-faq .irl-disc__title { font: 800 17px/1.2 var(--font-display); letter-spacing: -.01em; }
.irl-web .irl-faq .irl-disc__chev { color: var(--flame); }
.irl-web .irl-faq .irl-disc__inner { padding: 0 20px; }
.irl-web .irl-faq__a { margin: 0 0 18px; font: 500 16px/1.5 var(--font-display); color: var(--web-ash); }

/* Footer */
.irl-wfoot { display: flex; flex-direction: column; gap: 28px; max-width: var(--wmax); margin: var(--ws) auto 0; padding: 48px var(--wg) calc(104px + env(safe-area-inset-bottom)); border-top: 1px solid var(--web-smoke); box-sizing: content-box; }
@container web (min-width: 720px) { .irl-wfoot { padding-bottom: 48px; } }
.irl-wfoot__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.irl-wfoot__brand { display: flex; flex-direction: column; gap: 12px; }
.irl-wfoot__tag { font: 900 22px/1 var(--font-web); font-variation-settings: "wdth" 110; text-transform: uppercase; }
.irl-wfoot__links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.irl-wfoot__links a { font: 600 15px/1.2 var(--font-display); text-decoration: none; }
.irl-wfoot__links a:hover { color: var(--flame); }
.irl-wfoot__fine { display: flex; flex-direction: column; gap: 4px; font: 500 13px/1.5 var(--font-text); color: var(--web-ash); }
.irl-wfoot__fine p { margin: 0; }

/* Get bar (phones only) and sparks (desktops only) */
.irl-getbar { position: fixed; left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 24px; background: rgba(21, 21, 23, .88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1.5px var(--web-smoke), 0 18px 40px rgba(0, 0, 0, .5); translate: 0 160%; transition: translate .45s var(--web-ease-blast); }
.irl-getbar.is-on { translate: 0 0; }
.irl-getbar__text { display: flex; align-items: center; gap: 10px; }
.irl-getbar__text > span { display: flex; flex-direction: column; gap: 2px; }
.irl-getbar__title { font: 900 16px/1 var(--font-web); font-variation-settings: "wdth" 110; text-transform: uppercase; }
.irl-getbar__note { font: 600 11px/1 var(--font-text); color: var(--web-ash); }
.irl-sparks { position: fixed; inset: 0; z-index: 80; pointer-events: none; }

/* Motion */
@keyframes irl-breathe { 0%, 100% { opacity: .85; scale: 1; } 50% { opacity: 1; scale: 1.06; } }
@keyframes irl-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes irl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes irl-flicker { 0% { opacity: 1; scale: 1; } 100% { opacity: .7; scale: 1.25; } }
@keyframes irl-menu-in { from { opacity: 0; clip-path: circle(0% at 90% 4%); } to { opacity: 1; clip-path: circle(150% at 90% 4%); } }
@keyframes irl-menu-link { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
@keyframes irl-mythic { 0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 126, 177, .35)); } 50% { filter: drop-shadow(0 0 26px rgba(255, 126, 177, .8)) drop-shadow(0 0 40px rgba(197, 155, 255, .45)); } }
.irl-web--still *, .irl-web--still *::before, .irl-web--still *::after { animation: none !important; transition: none !important; }
.irl-web--still .irl-reveal { opacity: 1; translate: none; scale: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .irl-web *, .irl-web *::before, .irl-web *::after { animation: none !important; transition-duration: .01ms !important; }
  .irl-web .irl-reveal { opacity: 1; translate: none; scale: none; filter: none; }
}
/* Web (under review): the three kinds of quest played on the page, the drop clock, your people and the privacy rules. */

/* Feature rows: big words and examples beside a live phone. Rows alternate sides on a desktop. */
.irl-features { display: flex; flex-direction: column; gap: clamp(72px, calc(40px + 6cqi), 150px); }
.irl-feature { display: grid; gap: 30px; align-items: center; }
@container web (min-width: 720px) {
  .irl-feature { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 56px; }
  .irl-feature--flip .irl-feature__text { order: 2; }
}
.irl-feature__text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.irl-web .irl-feature__kicker { display: inline-flex; align-items: center; gap: 8px; }
.irl-feature__words { width: 100%; }
.irl-web .irl-feature__body { color: var(--web-bone); opacity: .88; }
.irl-feature__examples { display: flex; flex-direction: column; gap: 8px; max-width: 470px; }
.irl-feature__stage { position: relative; display: flex; justify-content: center; padding: 18px 0 6px; min-width: 0; }
.irl-feature__glow { position: absolute; z-index: 0; inset: 4% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 107, 44, .34), rgba(196, 26, 12, .12) 55%, transparent 74%); pointer-events: none; animation: irl-breathe 6s ease-in-out infinite; }
/* The hint sits on the phone’s top edge, over the status bar, so it never covers the app. */
.irl-web .irl-feature__hint { position: absolute; z-index: 4; top: 4px; left: 50%; translate: -50% 0; pointer-events: none; }

/* Demos: a real app screen in a phone. */
.irl-demo { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }
.irl-demo .irl-phone__scaler { filter: drop-shadow(0 34px 50px rgba(0, 0, 0, .55)); }
.irl-demo .irl-phonewrap { margin: 0; }
.irl-playdemo { gap: 18px; }

/* Chips that pick a game */
.irl-wchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 440px; }
.irl-web .irl-wchip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--web-coal); color: var(--web-bone); box-shadow: inset 0 0 0 1.5px var(--web-smoke); font: 800 12px/1 var(--font-web); font-variation-settings: "wdth" 112; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s, translate .16s var(--ease-spring); }
.irl-web .irl-wchip:hover { translate: 0 -2px; box-shadow: inset 0 0 0 1.5px var(--flame); }
.irl-web .irl-wchip.is-on { background: var(--flame); color: var(--web-night); box-shadow: 0 0 0 2px var(--web-night), 0 4px 0 0 var(--ember); }

/* Drop clock */
.irl-clock { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.irl-clock__digits { display: flex; align-items: baseline; font: 900 clamp(60px, calc(32px + 7.2cqi), 132px)/.92 var(--font-web); font-variation-settings: "wdth" 100; letter-spacing: -.01em; }
.irl-clock__digits b { display: inline-block; width: .64em; text-align: center; font-weight: inherit; }
.irl-clock__digits i { font-style: normal; padding: 0 .03em; translate: 0 -.05em; }
.irl-clock--s .irl-clock__digits { font-size: 34px; }
.irl-clock__note { font: 600 13px/1.3 var(--font-text); color: var(--web-ash); }

/* Your people */
.irl-people { display: grid; gap: 16px; }
@container web (min-width: 720px) { .irl-people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; } }
.irl-people__card { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: clamp(24px, 3cqi, 40px); border-radius: 30px; background: var(--web-coal); box-shadow: inset 0 0 0 1.5px var(--web-smoke); box-sizing: border-box; }
.irl-people__icon { width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; background: var(--volt); color: var(--web-night); }
.irl-people__body { margin: 0; max-width: 34em; font: 500 17px/1.45 var(--font-display); color: var(--web-ash); }
.irl-people__app { margin-top: 4px; padding: 18px 16px; border-radius: 22px; background: var(--web-night); box-shadow: inset 0 0 0 1.5px var(--web-smoke); }
.irl-people__rows { display: flex; flex-direction: column; gap: 1px; padding: 0; overflow: hidden; background: var(--line); }
.irl-people__note { margin: auto 0 0; padding-top: 4px; font: 600 13px/1.4 var(--font-text); color: var(--web-ash); }

/* Private by default */
.irl-trust { display: grid; gap: 12px; }
@container web (min-width: 720px) {
  .irl-trust { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
  .irl-trust__item { grid-column: span 2; }
  .irl-trust__item--big { grid-column: span 3; }
}
.irl-trust__item { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; border-radius: 26px; background: var(--web-coal); box-shadow: inset 0 0 0 1.5px var(--web-smoke); box-sizing: border-box; }
.irl-trust__item--big { padding: clamp(24px, 3cqi, 38px); background: radial-gradient(130% 120% at 0% 0%, #3A1B10, var(--web-coal) 62%); box-shadow: inset 0 0 0 1.5px var(--flame); }
.irl-trust__icon { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--flame); color: var(--web-night); }
.irl-trust__title { font: 900 clamp(21px, calc(17px + .9cqi), 32px)/1 var(--font-web); font-variation-settings: "wdth" 92; text-transform: uppercase; text-wrap: balance; }
.irl-trust__body { font: 500 16px/1.45 var(--font-display); color: var(--web-ash); }
.irl-trust__item--big .irl-trust__body { font-size: 18px; color: var(--web-bone); opacity: .88; }

/* Launch alert (before launch): an email field and Notify me in one bone pill, in place of the store buttons. */
.irl-notify { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 520px; text-align: left; }
.irl-notify__row { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 999px; background: var(--web-bone); box-shadow: 0 0 0 2px var(--web-night), 0 6px 0 0 var(--flame); transition: box-shadow .16s; }
.irl-notify__row:focus-within { box-shadow: 0 0 0 3px var(--volt), 0 6px 0 0 var(--flame); }
.irl-web .irl-notify input { flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 8px 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--web-night); font: 600 17px/1 var(--font-display); outline: none; }
.irl-web .irl-notify input::placeholder { color: #66666B; opacity: 1; }
.irl-web .irl-notify input:focus-visible { outline: none; }
.irl-web .irl-notify .irl-notify__btn { flex: none; height: 50px; padding: 0 20px; box-shadow: none; }
.irl-web .irl-notify .irl-notify__btn:hover { translate: none; box-shadow: none; background: var(--flame-deep); }
.irl-web .irl-notify .irl-notify__btn:disabled { opacity: .7; cursor: default; }
.irl-notify--l { max-width: 560px; }
.irl-web .irl-notify--l input { height: 58px; font-size: 19px; padding-left: 22px; }
.irl-web .irl-notify--l .irl-notify__btn { height: 58px; padding: 0 26px; font-size: 16px; }
.irl-notify__msg { margin: 0; padding-left: 20px; font: 600 13px/1.35 var(--font-text); color: var(--web-ash); }
.irl-notify.is-wrong .irl-notify__msg { color: var(--flame-gold); }
.irl-notify--done { flex-direction: row; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 22px; background: var(--web-coal); box-shadow: inset 0 0 0 1.5px var(--flame); font: 700 16px/1.35 var(--font-display); color: var(--web-bone); }
.irl-notify__check { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #3FD68E; color: #06170E; }
.irl-final .irl-notify { margin: 0 auto; }
@container web (max-width: 719px) {
  .irl-web .irl-notify input { font-size: 16px; padding-left: 14px; }
  .irl-web .irl-notify .irl-notify__btn { padding: 0 14px; font-size: 12px; letter-spacing: .06em; }
}