/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V3 */
/* Hallmark · macrostructure: Tarot-master hero + triptych pédagogique + score-signal · genre: playful · tone: ludique-premium · anchor: felt green · theme: locked design.md · contrast: pass (40–41) · nav: locked product header · footer: Ft2 · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) · structure: pass (58–60) · anchors: pass (61) · text: pass (62–63) · touch: pass (64) */
/* Tokens remain exclusively owned by the canonical app.css registry. */
.rami-public-main { padding-block-end: clamp(var(--spacing-lg), 5vw, calc(var(--spacing-xl) * 2)); }
.rami-public { width: min(100%, 76rem); margin-inline: auto; padding-inline: 20px; }
.rami-home { display: grid; gap: clamp(var(--spacing-xl), 7vw, calc(var(--spacing-xl) * 2.4)); }
.rami-home h2, .rami-guide h1, .rami-guide h2 { margin: 0; color: var(--color-cream); font-family: var(--font-display); font-style: italic; font-weight: 800; letter-spacing: -.03em; line-height: 1.06; overflow-wrap: anywhere; }
.rummy-game button, .rummy-compose summary, .rummy-meld__actions summary { min-height: 48px; border: 2px solid var(--color-ink); border-radius: var(--radius-cta-secondary); background: var(--color-cream); padding: var(--spacing-xs) var(--spacing-md); color: var(--color-ink); font: inherit; font-weight: 800; cursor: pointer; box-shadow: var(--shadow-cta-secondary); }
.rummy-game button:not(:disabled):active, .rummy-compose summary:active, .rummy-meld__actions summary:active { box-shadow: none; transform: translateY(2px); }
.rummy-game :is(button, summary, select, input):focus-visible { outline: 3px solid var(--color-focus-gold); outline-offset: 3px; }
.rami-home__fan { margin-inline: auto; }
.rami-home__fan img { position: absolute; top: 8px; left: 50%; width: 34%; height: auto; border-radius: var(--radius-cta-secondary); box-shadow: var(--shadow-card); transform-origin: 50% 100%; }
.rami-home__fan img:nth-child(1) { transform: translateX(-118%) rotate(-12deg); }
.rami-home__fan img:nth-child(2) { z-index: 2; transform: translateX(-72%) rotate(-4deg); }
.rami-home__fan img:nth-child(3) { z-index: 2; transform: translateX(-28%) rotate(4deg); }
.rami-home__fan img:nth-child(4) { transform: translateX(18%) rotate(12deg); }
.rami-home__rule, .rami-home__score { display: grid; min-width: 0; gap: var(--spacing-xl); border: 2px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-cream); padding: clamp(var(--spacing-md), 5vw, calc(var(--spacing-xl) * 2)); color: var(--color-ink); box-shadow: var(--shadow-card); }
.rami-home__rule h2, .rami-home__score h2 { color: var(--color-ink); font-size: clamp(2rem, 5vw, 3.3rem); }
.rami-home__rule p, .rami-home__score p { max-width: 65ch; line-height: 1.6; }
.rami-home__rule ol { display: grid; margin: 0; padding: 0; border-block: 1px solid var(--color-ink-line); list-style: none; }
.rami-home__rule li { display: grid; gap: var(--spacing-xs); padding-block: var(--spacing-md); }
.rami-home__rule li + li { border-top: 1px solid var(--color-ink-line); }
.rami-home__rule li strong { font-family: var(--font-display); font-size: 1.4rem; }
.rami-home__score { background: var(--color-gold); }
.rami-home__score-mark { align-self: center; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(5rem, 22vw, 10rem); font-style: italic; font-weight: 800; line-height: .8; font-variant-numeric: tabular-nums; }
.rami-home__score a, .rami-guide a { display: inline-flex; min-height: 44px; align-items: center; color: var(--color-ink); font-weight: 800; text-underline-offset: .25em; }
.rami-home__learn { display: grid; min-width: 0; border-block: 1px solid var(--color-panel-border); }
.rami-home__learn a { display: grid; min-width: 0; min-height: 72px; align-content: center; gap: 2px; padding: var(--spacing-sm); color: var(--color-cream); text-decoration: none; }
.rami-home__learn a + a { border-top: 1px solid var(--color-panel-border); }
.rami-home__learn strong { font-family: var(--font-display); font-size: 1.25rem; font-style: italic; }
.rami-home__learn span { font-size: .875rem; }
.rami-guide { display: grid; gap: var(--spacing-lg); width: min(100%, 62rem); margin-inline: auto; }
.rami-guide > header { display: grid; gap: var(--spacing-sm); max-width: 48rem; padding-block: var(--spacing-lg); color: var(--color-cream); }
.rami-guide > header > p:first-child { margin: 0; font-weight: 800; }
.rami-guide h1 { max-width: 14ch; font-size: clamp(2.6rem, 7vw, 4.75rem); }
.rami-guide > header > p:last-child { max-width: 62ch; margin: 0; font-size: 1.05rem; line-height: 1.6; }
.rami-guide__toc { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-md); border-block: 1px solid var(--color-panel-border); }
.rami-guide__toc a { color: var(--color-cream); white-space: nowrap; }
.rami-guide > section, .rami-guide__steps > li { display: grid; min-width: 0; gap: var(--spacing-sm); border: 2px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-cream); padding: clamp(var(--spacing-md), 4vw, var(--spacing-xl)); color: var(--color-ink); box-shadow: var(--shadow-card); }
.rami-guide > section h2, .rami-guide__steps h2 { color: var(--color-ink); font-size: clamp(1.7rem, 4vw, 2.6rem); }
.rami-guide > section :is(p, li), .rami-guide__steps p { max-width: 68ch; margin-block: 0; line-height: 1.65; }
.rami-guide__split { display: grid; gap: var(--spacing-lg); }
.rami-guide__split h3 { font-size: 1.25rem; }
.rami-guide__steps { display: grid; gap: var(--spacing-lg); margin: 0; padding: 0; list-style: none; counter-reset: rami-step; }
.rami-guide__steps li { counter-increment: rami-step; }
.rami-guide__steps li::before { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; background: var(--color-gold); color: var(--color-ink); content: counter(rami-step); font-weight: 900; font-variant-numeric: tabular-nums; }
.rami-guide > footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-lg); padding-block: var(--spacing-lg) calc(var(--spacing-xl) * 2.4); }
.rami-guide > footer form { margin: 0; }
.rummy-game { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 100%; height: 100dvh; overflow: hidden; background: radial-gradient(115% 100% at 50% 28%, rgb(255 255 255 / .05), transparent 45%, rgb(0 0 0 / .38)), radial-gradient(120% 95% at 50% 24%, var(--color-felt-600), var(--color-felt-700) 40%, var(--color-felt-800) 62%, var(--color-felt-950)); color: var(--color-cream); }
.rummy-game::before { position: absolute; inset: 0; background-image: var(--felt-grain); background-size: var(--felt-grain-size); content: ""; opacity: var(--felt-grain-opacity); pointer-events: none; }
.rummy-game > * { position: relative; z-index: 1; }
.rummy-game__bar { display: grid; grid-template-columns: minmax(5rem, 1fr) auto minmax(5rem, 1fr); align-items: center; gap: var(--spacing-xs); padding: max(var(--spacing-xs), env(safe-area-inset-top)) max(var(--spacing-sm), env(safe-area-inset-right)) var(--spacing-xs) max(var(--spacing-sm), env(safe-area-inset-left)); border-bottom: 1px solid var(--color-panel-border); background: var(--color-panel-soft); }
.rummy-game__bar > a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; }
.rummy-game__bar img { width: 92px; height: auto; }
.rummy-game__bar p { display: grid; margin: 0; text-align: center; font-size: .75rem; line-height: 1.2; }
.rummy-game__bar p strong { font-variant-numeric: tabular-nums; }
.rummy-game__bar form { justify-self: end; }
.rummy-game__bar button { min-width: 72px; border-color: var(--color-panel-border); background: var(--color-panel-soft); color: var(--color-cream); box-shadow: none; }
.rummy-game__table { display: grid; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; }
.rummy-players { display: flex; min-width: 0; gap: var(--spacing-xs); margin: 0; padding: var(--spacing-xs); overflow-x: auto; overscroll-behavior-inline: contain; list-style: none; scrollbar-width: thin; }
.rummy-player { display: grid; min-width: min(12rem, 72vw); grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--spacing-xs); border: 1px solid var(--color-panel-border); border-radius: var(--radius-panel); background: var(--color-panel-soft); padding: var(--spacing-xs); opacity: .78; }
.rummy-player.is-active { border-color: var(--color-gold); opacity: 1; }
.rummy-player > span { display: grid; min-width: 0; }
.rummy-player strong, .rummy-player small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rummy-player small { color: var(--color-cream); font-size: .7rem; }
.rummy-player > b { display: grid; min-width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 50%; background: var(--color-gold); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.rummy-game__status { display: grid; min-height: 42px; place-items: center; padding-inline: var(--spacing-sm); color: var(--color-gold-hover); text-align: center; }
.rummy-game__status small { color: var(--color-cream); }
.rummy-game__center { display: grid; min-height: 0; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-sm); padding: var(--spacing-xs) var(--spacing-sm); overflow: hidden; }
.rummy-piles { display: flex; align-items: center; align-self: center; gap: var(--spacing-xs); }
.rummy-piles form { margin: 0; }
.rummy-pile { position: relative; display: grid; width: clamp(56px, 9vw, 76px); min-height: 0 !important; aspect-ratio: 317 / 548; place-items: center; overflow: hidden; padding: 0 !important; border-radius: 8px !important; }
.rummy-pile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rummy-pile--stock { border-color: var(--color-cream) !important; background: repeating-linear-gradient(45deg, var(--color-felt-800) 0 7px, var(--color-gold) 7px 9px) !important; color: var(--color-cream) !important; }
.rummy-pile--stock span { font-size: .7rem; }
.rummy-pile:disabled, .rummy-game button:disabled { opacity: .4; box-shadow: none; cursor: not-allowed; }
.rummy-melds { display: grid; min-width: 0; min-height: 0; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); align-content: start; gap: var(--spacing-xs); overflow: auto; overscroll-behavior: contain; }
.rummy-meld { display: grid; min-width: 0; gap: var(--spacing-xs); border: 1px solid var(--color-panel-border); border-radius: var(--radius-panel); background: var(--color-panel-soft); padding: var(--spacing-xs); }
.rummy-meld > header { display: flex; justify-content: space-between; gap: var(--spacing-xs); font-size: .75rem; }
.rummy-meld__cards { display: flex; min-width: 0; overflow-x: auto; padding-block: 2px; }
.rummy-meld__card { position: relative; width: 50px; min-width: 50px; aspect-ratio: 317 / 548; overflow: hidden; border-radius: 5px; background: var(--color-cream); }
.rummy-meld__card + .rummy-meld__card { margin-inline-start: -18px; }
.rummy-meld__card img { display: block; width: 100%; height: auto; }
.rummy-melds__empty { place-self: center; max-width: 26ch; text-align: center; }
.rummy-meld__actions summary, .rummy-compose summary { display: flex; align-items: center; justify-content: center; min-height: 44px; padding-block: 6px; font-size: .75rem; list-style: none; }
.rummy-meld__actions summary::-webkit-details-marker, .rummy-compose summary::-webkit-details-marker { display: none; }
.rummy-meld__actions form, .rummy-compose form { display: grid; gap: var(--spacing-xs); padding-block-start: var(--spacing-xs); }
.rummy-meld__actions fieldset, .rummy-compose fieldset { min-width: 0; max-height: 9rem; margin: 0; overflow: auto; border: 1px solid var(--color-panel-border); border-radius: var(--radius-field); }
.rummy-meld__actions label, .rummy-compose label { display: flex; min-height: 44px; align-items: center; gap: var(--spacing-xs); padding-inline: var(--spacing-xs); }
.rummy-meld__actions input, .rummy-compose input { min-width: 20px; min-height: 20px; accent-color: var(--color-gold); }
.rummy-meld__actions select { min-height: 44px; border: 1px solid var(--color-ink-line); border-radius: var(--radius-field); background: var(--color-cream); color: var(--color-ink); }
.rummy-game .rummy-joker-face { position: absolute; inset: 0; display: grid; place-items: center; background: var(--color-cream); color: var(--color-terra-deep); font-family: var(--font-display); font-size: clamp(.55rem, 1vw, .8rem); font-weight: 800; letter-spacing: .08em; writing-mode: vertical-rl; }
.rummy-hand-zone { min-width: 0; border-top: 1px solid var(--color-panel-border); background: var(--color-panel-soft); padding-block-end: max(var(--spacing-xs), env(safe-area-inset-bottom)); }
.rummy-hand { justify-content: center; overflow: visible; }
.rummy-hand form { flex: 0 0 auto; }
.rummy-card { position: relative; display: block; width: 100%; min-width: 44px; min-height: 44px; overflow: hidden; border: 0; border-radius: 7px; background: var(--color-cream); padding: 0; box-shadow: var(--shadow-card); }
.rummy-card img { display: block; width: 100%; height: auto; }
.rummy-compose { width: min(100% - var(--spacing-md), 48rem); margin-inline: auto; }
.rummy-compose > summary { background: var(--color-gold); }
.rummy-compose[open] { position: absolute; inset-inline: max(var(--spacing-xs), env(safe-area-inset-left)) max(var(--spacing-xs), env(safe-area-inset-right)); bottom: max(var(--spacing-xs), env(safe-area-inset-bottom)); z-index: 40; max-height: 74dvh; overflow: auto; border: 2px solid var(--color-ink); border-radius: var(--radius-panel); background: var(--color-panel); padding: var(--spacing-sm); box-shadow: var(--shadow-panel); }
.rummy-compose form > div { display: grid; gap: var(--spacing-xs); }
.rummy-result { position: fixed; inset: 0; z-index: 50; display: grid; width: min(92%, 28rem); height: fit-content; max-height: 84dvh; margin: auto; gap: var(--spacing-sm); overflow: auto; border: 2px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-gold); padding: var(--spacing-lg); color: var(--color-ink); box-shadow: var(--shadow-panel); }
.rummy-result > p, .rummy-result h2 { margin: 0; }
.rummy-result h2 { font-family: var(--font-display); font-size: 2rem; font-style: italic; }
.rummy-result dl { display: grid; margin: 0; }
.rummy-result dl div { display: flex; justify-content: space-between; gap: var(--spacing-md); border-top: 1px solid var(--color-ink-line); padding-block: var(--spacing-xs); }
.rummy-result dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.rummy-game--waiting { place-items: center; align-content: center; gap: var(--spacing-sm); padding: var(--spacing-lg); text-align: center; }
.rummy-game--waiting img { width: min(18rem, 72vw); height: auto; }
@media (hover: hover) and (pointer: fine) { .rummy-game button:not(:disabled):hover { box-shadow: var(--shadow-cta-secondary-hover); transform: translate(-2px, -4px) rotate(-.8deg); } }
@media (min-width: 40rem) {
    .rami-public { padding-inline: 64px; }
    .rami-home__rule { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
    .rami-home__score { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
    .rami-home__learn { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rami-home__learn a + a { border-top: 0; border-inline-start: 1px solid var(--color-panel-border); }
    .rami-guide__split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rummy-compose form > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 47.999rem) {
    .rummy-game__center { grid-template-columns: 1fr; }
    .rummy-piles { justify-content: center; order: 2; }
    .rummy-melds { grid-template-columns: 1fr; max-height: 30dvh; }
    .rummy-game__bar img { width: 76px; }
}
@media (max-height: 35rem) and (orientation: landscape) {
    .rummy-game__status { display: none; }
    .rummy-game__center { grid-template-columns: auto minmax(0, 1fr); }
    .rummy-piles { order: 0; }
    .rummy-melds { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
    .rummy-game button, .rummy-compose summary, .rummy-meld__actions summary { transition: none; }
    .rummy-game button:not(:disabled):is(:hover, :active), .rummy-compose summary:active, .rummy-meld__actions summary:active { transform: none; }
}