/* Identité RoadiPlay — couleurs directement inspirées du logo. */
:root {
  --bg: #effbfc;
  --card: #fff;
  --soft: #e3f5f7;
  --text: #053944;
  --muted: #476d76;
  --line: #c3e5e8;
  --orange: #00adc3;
  --purple: #006a7c;
  --yellow: #ffc400;
  --green: #65b84f;
  --red: #ff6657;
  --shadow: 0 18px 46px #006a7c1a;
}

html[data-theme="dark"] {
  --bg: #061b20;
  --card: #0d2a31;
  --soft: #123841;
  --text: #f2fbfc;
  --muted: #a9c8ce;
  --line: #24515a;
  --orange: #21c2d4;
  --purple: #7fdae4;
  --yellow: #ffd32a;
  --green: #80cf66;
  --red: #ff796c;
  --shadow: 0 15px 40px #0006;
}

body {
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--yellow) 20%, transparent) 0 13rem, transparent 13.1rem),
    radial-gradient(circle at 0 22rem, color-mix(in srgb, var(--orange) 10%, transparent), transparent 18rem),
    var(--bg);
  font-family: "Avenir Next", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.app-icon { width: 1.35em; height: 1.35em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.brand-mark { display: grid; width: 52px; height: 50px; flex: 0 0 auto; place-items: start center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--orange) 25%, var(--line)); border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--orange) 13%, var(--card)), color-mix(in srgb, var(--yellow) 14%, var(--card))); box-shadow: 0 8px 22px #006a7c20; }
.brand-mark img { width: 76px; max-width: none; height: auto; transform: translateY(-2px); }
.brand-copy { min-width: 0; }

.logo strong { display: block; font-size: 1.05rem; line-height: 1; }

.language-picker {
  width: 60px;
  min-height: 44px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  font-size: .72rem;
  font-weight: 900;
}

.language-note {
  display: grid;
  gap: 5px;
  margin-top: 16px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--yellow) 55%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--yellow) 11%, var(--card));
}

.language-note small { color: var(--muted); line-height: 1.45; }
.setting-select { width: min(210px, 100%); }
.track b { background: linear-gradient(90deg, var(--orange), var(--yellow)); }
.card::before { background: linear-gradient(90deg, var(--orange), var(--yellow), var(--red)); }
.menu { box-shadow: 0 6px 20px #006a7c12; }
.primary, .secondary { color: #fff; }
.icons .fav {
  color: #8a6600;
  background: color-mix(in srgb, var(--yellow) 24%, var(--card));
}

.prefer-card {
  background: linear-gradient(145deg, var(--card), color-mix(in srgb, var(--red) 9%, var(--card)));
}

.prefer-options > div { color: var(--red); }
.prefer-options button { border-color: color-mix(in srgb, var(--red) 34%, var(--line)); }
.prefer-options button.chosen { border-color: var(--red); background: var(--red); color: #fff; }
.road-hero::after {
  background: repeating-linear-gradient(90deg, var(--orange) 0 42px, var(--yellow) 42px 52px, transparent 52px 64px);
}

.connection-status {
  position: fixed;
  z-index: 24;
  top: calc(env(safe-area-inset-top) + 78px);
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--green) 42%, var(--line));
  border-radius: 99px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  box-shadow: var(--shadow);
  color: var(--green);
  font-size: .65rem;
  font-weight: 900;
  backdrop-filter: blur(14px);
}

.connection-status.offline { color: var(--orange); border-color: var(--orange); }
.connection-status.update { color: #805f00; border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 22%, var(--card)); }
.connection-status button { padding: 3px 7px; border: 0; border-radius: 99px; background: var(--yellow); color: #4d3900; font-size: .62rem; font-weight: 900; }
.resume-panel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--yellow) 62%, var(--line));
  border-radius: 20px;
  background: color-mix(in srgb, var(--yellow) 13%, var(--card));
  box-shadow: var(--shadow);
}
.resume-panel > span { font-size: 1.55rem; }
.resume-panel b, .resume-panel small { display: block; }
.resume-panel small { margin-top: 3px; color: var(--muted); font-size: .67rem; line-height: 1.35; }
.age-advice { padding: 11px 13px; border-radius: 14px; background: color-mix(in srgb, var(--green) 10%, var(--card)); color: var(--green); font-size: .72rem; font-weight: 850; }
.five { grid-template-columns: repeat(5, 1fr); margin: 0; }
.turn-banner { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--yellow) 58%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--yellow) 13%, var(--card)); }
.turn-banner b { color: var(--text); }
.live-scores span.on-turn { border-color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); }
.award-grid button.expected { border-color: var(--green); background: color-mix(in srgb, var(--green) 13%, var(--card)); }
.game-controls { display: flex; gap: 6px; }
.badge.age { background: color-mix(in srgb, var(--green) 13%, transparent); color: var(--green); }
.version-label { margin: 18px 0 0; color: var(--muted); text-align: center; font-size: .68rem; }

.onboarding-card {
  display: grid;
  width: min(100%, 610px);
  min-height: min(720px, calc(100dvh - 120px));
  margin: 0 auto;
  padding: clamp(24px, 7vw, 48px);
  align-content: center;
  justify-items: center;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: linear-gradient(155deg, var(--card), color-mix(in srgb, var(--yellow) 9%, var(--card)));
  box-shadow: var(--shadow);
  text-align: center;
}
.onboarding-card > img { width: min(230px, 65%); margin-bottom: 20px; }
.onboarding-card .lede { min-height: 72px; margin-inline: auto; }
.tutorial-icon { display: grid; width: 72px; height: 72px; margin-bottom: 18px; place-items: center; border-radius: 24px; background: color-mix(in srgb, var(--orange) 13%, var(--card)); font-size: 2.2rem; }
.tutorial-dots { display: flex; gap: 7px; margin: 20px 0; }
.tutorial-dots i { width: 9px; height: 9px; border-radius: 99px; background: var(--line); }
.tutorial-dots i.on { width: 27px; background: var(--orange); }
.tutorial-actions { width: 100%; }
.tutorial-actions > * { flex: 1; }

.player-avatar { display: grid; width: 42px; height: 50px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font-size: 1.35rem; }
.six { grid-template-columns: repeat(6, 1fr); margin: 0; }
.team-editor { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.team-editor > section { padding: 12px; border: 1px solid var(--line); border-radius: 17px; background: var(--soft); }
.team-editor .field { margin-top: 0; }
.team-members { display: grid; gap: 6px; margin-top: 10px; }
.team-members button { min-height: 43px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); text-align: left; opacity: .45; }
.team-members button.on { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); opacity: 1; }
.four-actions { grid-template-columns: 1fr repeat(3, 56px); }
.report-action.reported { border-color: var(--green); background: color-mix(in srgb, var(--green) 13%, var(--card)); color: var(--green); }
.record-badge { display: inline-flex; margin: 8px auto 0; padding: 8px 12px; border-radius: 99px; background: color-mix(in srgb, var(--yellow) 25%, var(--card)); color: #846100; font-weight: 900; }
.favorite-start { margin-bottom: 16px; }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 16px; }
.stat-grid > div { display: grid; gap: 3px; padding: 16px 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); text-align: center; }
.stat-grid b { color: var(--orange); font-size: 1.6rem; }
.stat-grid small { color: var(--muted); font-size: .66rem; }
.family-ranking h2 { font-size: 1.1rem; }
.family-ranking > div { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.family-ranking strong { color: var(--orange); }
.badge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
.badge-grid > div { display: flex; align-items: center; gap: 9px; min-height: 60px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--card); }
.badge-grid i { font-size: 1.4rem; font-style: normal; }
.badge-grid .locked { filter: grayscale(1); opacity: .42; }
.history-title { margin: 24px 2px 0; font-size: 1.15rem; }

.install-status { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin-bottom: 14px; padding: 15px; border: 1px solid var(--yellow); border-radius: 18px; background: color-mix(in srgb, var(--yellow) 12%, var(--card)); }
.install-status > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; background: var(--yellow); color: #493700; font-size: 1.4rem; font-weight: 950; }
.install-status.installed { border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--card)); }
.install-status.installed > span { background: var(--green); color: #fff; }
.install-status b,.install-status small { display: block; }
.install-status small { margin-top: 3px; color: var(--muted); font-size: .7rem; }
.install-grid { display: grid; gap: 10px; margin-top: 14px; }
.install-grid .panel > i { font-size: 2rem; font-style: normal; }
.install-grid h2 { margin-top: 8px; font-size: 1.25rem; }
.install-grid ol { margin: 0; padding-left: 1.35rem; color: var(--muted); line-height: 1.55; }
.install-grid li + li { margin-top: 6px; }

/* RoadiPlay 1.4 — finition visuelle et démarrage rapide. */
.top { box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 65%, transparent); }
.round { border-radius: 15px; box-shadow: 0 8px 24px #006a7c14; }
.round .app-icon { font-size: 1.05rem; }
button { transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid color-mix(in srgb, var(--yellow) 72%, transparent); outline-offset: 3px; }

.road-hero { position: relative; padding: clamp(22px, 5vw, 36px); border: 0; background: linear-gradient(135deg, var(--card) 0 58%, color-mix(in srgb, var(--orange) 13%, var(--card)) 100%); box-shadow: 0 22px 60px #006a7c20; }
.hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) 116px; align-items: center; gap: 12px; }
.hero-copy { position: relative; z-index: 1; }
.hero-copy h1 { max-width: 620px; text-wrap: balance; }
.hero-copy .lede { font-size: .96rem; }
.hero-art { display: grid; min-height: 126px; place-items: center; overflow: hidden; border-radius: 25px; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--yellow) 24%, var(--card)), color-mix(in srgb, var(--orange) 9%, var(--card)) 64%, transparent 65%); }
.hero-art img { width: min(172px, 150%); max-width: none; filter: drop-shadow(0 14px 16px #006a7c26); }
.road-hero::after { height: 8px; margin-top: 20px; opacity: .8; }

.quick-start { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.quick-preset, .custom-preset { border-radius: 19px; text-align: left; }
.quick-preset { display: grid; grid-template-columns: 46px 1fr; align-items: center; min-height: 86px; padding: 12px 14px; border: 0; box-shadow: 0 12px 28px #006a7c1d; }
.quick-preset > span { display: grid; width: 42px; height: 42px; grid-row: 1 / 3; place-items: center; border-radius: 14px; background: #ffffff28; font-size: 1.18rem; }
.quick-preset b, .quick-preset small, .custom-preset b, .custom-preset small { display: block; }
.quick-preset b { font-size: .96rem; }
.quick-preset small { margin-top: 3px; font-size: .68rem; line-height: 1.3; opacity: .86; }
.quick-ten { background: linear-gradient(135deg, #00adc3, #008ca3); color: #fff; }
.quick-twenty { background: linear-gradient(135deg, #ffd223, #ffc400); color: #4d3900; }
.custom-preset { display: flex; grid-column: 1 / -1; align-items: center; gap: 12px; min-height: 68px; padding: 12px 16px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 86%, var(--soft)); color: var(--text); }
.custom-preset > .app-icon { color: var(--orange); font-size: 1.3rem; }
.custom-preset small { margin-top: 3px; color: var(--muted); font-size: .68rem; }
.edit-players-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 8px 2px; border: 0; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 850; }

.menu { min-height: 146px; overflow: hidden; box-shadow: 0 10px 30px #006a7c12; }
.menu::after { position: absolute; right: -28px; bottom: -42px; width: 104px; height: 104px; border-radius: 50%; background: color-mix(in srgb, var(--c) 9%, transparent); content: ""; }
.menu i { color: var(--c); }
.menu i .app-icon { font-size: 1.18rem; }
.menu strong { position: relative; z-index: 1; font-size: 1rem; }
.menu small, .content-choice small, .setting small, .row small { font-size: .72rem; }
.menu em { z-index: 1; }
.home-grid .menu:first-child { background: linear-gradient(135deg, var(--card), color-mix(in srgb, var(--orange) 14%, var(--card))); }

.content-choice i { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 13px; background: color-mix(in srgb, currentColor 8%, var(--card)); color: var(--orange); }
.content-choice i .app-icon { font-size: 1.02rem; }
.content-choice.on i { background: color-mix(in srgb, var(--purple) 13%, var(--card)); color: var(--purple); }
.content-choice b { font-size: .91rem; }
.setup-panel { box-shadow: 0 18px 48px #006a7c16; }
.player-form { background: color-mix(in srgb, var(--soft) 78%, var(--card)); }
.profile-pills span { box-shadow: 0 5px 16px #006a7c0d; }
.road-card { border: 0; box-shadow: 0 20px 58px #006a7c20; }
.road-card .copy h2 { text-wrap: balance; }
.award-grid button { background: color-mix(in srgb, var(--soft) 78%, var(--card)); }

#nav { box-shadow: 0 -8px 28px #006a7c12; }
#nav button { gap: 4px; font-size: 1rem; }
#nav .app-icon { font-size: 1.05rem; }
#nav small { font-size: .67rem; }
.connection-status[hidden] { display: none; }

.onboarding-card { overflow: hidden; border: 0; box-shadow: 0 24px 64px #006a7c20; }
.onboarding-card > img { width: min(215px, 58%); margin-bottom: 12px; filter: drop-shadow(0 14px 18px #006a7c1f); }
.tutorial-icon { color: var(--orange); }
.tutorial-icon .app-icon { font-size: 1.15rem; }

html[data-theme="dark"] .road-hero { background: linear-gradient(135deg, var(--card) 0 58%, color-mix(in srgb, var(--orange) 15%, var(--card)) 100%); }
html[data-theme="dark"] .hero-art { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--yellow) 18%, var(--card)), color-mix(in srgb, var(--orange) 12%, var(--card)) 64%, transparent 65%); }
html[data-theme="dark"] .quick-twenty { color: #3f3000; }
html[data-theme="dark"] .record-badge { color: var(--yellow); }
html[data-theme="dark"] .icons .fav, html[data-theme="dark"] .mini-action.fav { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 15%, var(--card)); }

@media (hover: hover) {
  button:not(:disabled):hover { transform: translateY(-2px); }
  .menu:hover, .quick-preset:hover { box-shadow: 0 16px 36px #006a7c24; }
}

@media (min-width: 650px) {
  .hero-layout { grid-template-columns: minmax(0, 1.45fr) minmax(190px, .55fr); gap: 24px; }
  .hero-art { min-height: 220px; }
  .hero-art img { width: min(280px, 125%); }
  .quick-start { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(180px, .8fr); }
  .custom-preset { grid-column: auto; }
}

@media (max-width: 480px) {
  .top { gap: 6px; padding-inline: 10px; }
  .brand-mark { width: 46px; height: 44px; border-radius: 14px; }
  .brand-mark img { width: 68px; }
  .logo strong { font-size: .88rem; }
  .logo small {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .language-picker { width: 54px; min-height: 42px; padding-inline: 4px; }
  .round { width: 44px; height: 44px; }
  .connection-status { top: calc(env(safe-area-inset-top) + 70px); }
  .resume-panel { grid-template-columns: auto 1fr; }
  .resume-panel button { grid-column: 1 / -1; width: 100%; }
  .five { grid-template-columns: repeat(2, 1fr); }
  .five .choice:first-child { grid-column: 1 / -1; }
  .six { grid-template-columns: repeat(3, 1fr); }
  .team-editor { grid-template-columns: 1fr; }
  .four-actions { grid-template-columns: 1fr repeat(3, 50px); }
  .stat-grid b { font-size: 1.25rem; }
  .game-controls .finish-button:first-child { font-size: 0; }
  .game-controls .finish-button:first-child::after { content: "⏸"; font-size: 1rem; }
  .road-hero { padding: 20px 18px; border-radius: 24px; }
  .hero-layout { grid-template-columns: minmax(0, 1fr) 96px; }
  .hero-art { min-height: 108px; border-radius: 20px; }
  .hero-art img { width: 140px; }
  .hero-copy h1 { font-size: clamp(1.9rem, 10vw, 2.55rem); }
  .quick-preset { grid-template-columns: 38px 1fr; min-height: 82px; padding: 11px; }
  .quick-preset > span { width: 34px; height: 40px; }
  .quick-preset b { font-size: .84rem; }
  .quick-preset small { font-size: .64rem; }
}

@media (max-width: 360px) {
  .logo small { display: none; }
  .brand-mark { width: 43px; }
  .brand-mark img { width: 64px; }
  .hero-layout { grid-template-columns: 1fr; }
  .hero-art { display: none; }
}