:root{
  color-scheme: dark;
  --bg: #101717; --panel: #182120; --panel2: #1f2a25; --line: #34403a; --text: #eef1e7; --soft: #c9d2c8; --muted: #a0ada4;
  --lime: #d5ed91; --on-lime: #142019; --track: #303b34;
  --good: #9fdc8a; --info: #7cc3c0; --decision: #d5ed91; --warn: #f2b45c; --grave: #f07a6a; --rest: #9aa8f0;
  --good-bg: #9fdc8a24; --info-bg: #7cc3c01f; --warn-bg: #f2b45c26; --grave-bg: #f07a6a2e; --rest-bg: #9aa8f024; --decision-bg: #d5ed9124;
  --shadow: 0 10px 40px #0009;
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg: #f2f4e9; --panel: #ffffff; --panel2: #edf2e5; --line: #c9d2c1; --text: #1e2b21; --soft: #3d4d3e; --muted: #5d6b5b;
  --lime: #486726; --on-lime: #ffffff; --track: #dce4d4;
  --good: #2f7d32; --info: #1f6f6c; --decision: #486726; --warn: #a45d00; --grave: #b3261e; --rest: #4251a8;
  --good-bg: #2f7d3218; --info-bg: #1f6f6c14; --warn-bg: #a45d001c; --grave-bg: #b3261e18; --rest-bg: #4251a814; --decision-bg: #48672618;
  --shadow: 0 10px 35px #23371926;
}
.app button{ font: inherit; cursor: pointer; border: 1px solid var(--line); background: transparent; color: inherit; padding: 11px 16px; border-radius: 8px; touch-action: manipulation; }
.app button:hover:not(:disabled){ border-color: var(--lime); background: var(--panel2); }
.app button:disabled{ opacity: .45; cursor: not-allowed; }
.app button:focus-visible,.app a:focus-visible{ outline: 2px solid var(--lime); outline-offset: 3px; }
.app a{ color: var(--lime); }
.app small,.app .label{ font-size: 10px; letter-spacing: 2px; color: var(--muted); font-weight: 500; }
.app .label{ margin: 22px 0 10px; }
.app .label:first-child{ margin-top: 0; }
.app h1{ font: 500 clamp(38px, 6vw, 66px)/1.05 'Space Grotesk', sans-serif; letter-spacing: -2px; margin: 18px 0; }
.app h2{ font-family: 'Space Grotesk', sans-serif; font-weight: 500; }
.app em{ font-style: normal; color: var(--lime); }
.app .muted{ font-size: 12px; color: var(--muted); line-height: 1.65; }
.app .small{ font-size: 11px; }
.app .tcenter{ text-align: center; }
.app .primary{ background: var(--lime); color: var(--on-lime); font-weight: 700; border-color: var(--lime); }
.app .primary:hover:not(:disabled){ background: var(--lime); filter: brightness(1.08); }
.app .warntext{ color: var(--warn); }
.app .tag{ color: var(--lime); }
.app .countdown{ margin: 10px 0; padding: 10px 14px; border-radius: 12px; background: var(--grave-bg); color: var(--grave); font-weight: 600; }
.app .countdown b{ font-family: 'Space Grotesk', sans-serif; font-size: 30px; margin-right: 8px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.app .note{ border-left: 2px solid var(--lime); padding: 8px 14px; background: var(--decision-bg); font-size: 13px; }
.app .sectiontitle{ display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 28px 0 14px; }
.app .sectiontitle h2{ margin: 0; font-size: 22px; }
.app .stage{ max-width: 760px; margin: 30px auto; text-align: center; padding: 46px 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.app .stageactions{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.app .stageactions.left{ justify-content: flex-start; }
.app .wheel{ margin: 40px 0 26px; min-height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.app .wheelname{ font: 600 clamp(52px, 11vw, 112px)/1 'Space Grotesk', sans-serif; letter-spacing: -3px; margin: 0; color: var(--lime); }
.app .wheelname.dim{ color: var(--muted); }
.app .wheelname.landed{ animation: land .5s ease-out; }
.app .wheelpct{ margin: 14px 0 0; font-size: 14px; letter-spacing: 2px; color: var(--muted); }
@keyframes land{ from { transform: scale(1.12); } to { transform: scale(1); } }
.app .idcard{ display: flex; gap: 26px; align-items: center; text-align: left; margin: 26px 0 10px; }
.app .idcard h1{ font-size: clamp(32px, 5vw, 48px); margin: 0 0 12px; }
.app .avatar{ width: 56px; height: 56px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); overflow: hidden; flex: none; display: grid; place-items: center; }
.app .avatar svg{ width: 100%; height: 100%; display: block; }
.app .avatar.big{ width: 132px; height: 132px; border-radius: 18px; }
.app .avatar.mini{ width: 38px; height: 38px; border-radius: 9px; }
.app .avatar.pet{ font-size: 22px; }
.app .facts{ display: grid; gap: 6px; margin: 0; }
.app .facts > div{ display: grid; grid-template-columns: 90px 1fr; gap: 10px; font-size: 14px; }
.app .facts dt{ color: var(--muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding-top: 2px; }
.app .facts dd{ margin: 0; }
.app .facts.small > div{ font-size: 13px; grid-template-columns: 74px 1fr; }
.app .story{ font-size: 17px; line-height: 1.7; text-align: left; border-left: 2px solid var(--lime); padding-left: 16px; color: var(--soft); }
.app .rules{ text-align: left; max-width: 560px; margin: 24px auto; padding: 0; list-style: none; display: grid; gap: 12px; }
.app .rules li{ padding: 12px 16px; background: var(--panel2); border-radius: 10px; line-height: 1.6; }
.app #picker{ max-width: 1100px; margin: 10px auto; }
.app .pickhead{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.app .pickhead h2{ margin: 6px 0 0; font-size: 28px; }
.app .timer strong{ font: 600 56px/1 'Space Grotesk', sans-serif; color: var(--lime); }
.app .timer span{ color: var(--muted); margin-left: 4px; }
.app .pickcount{ font-size: 18px; color: var(--muted); }
.app .pickcount strong{ font-size: 34px; color: var(--text); }
.app .timebar{ height: 6px; background: var(--track); border-radius: 4px; margin: 16px 0 22px; overflow: hidden; }
.app .timebar div{ height: 100%; background: var(--lime); transition: width .1s linear; }
.app .timebar div.late{ background: var(--warn); }
.app .cloud{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; padding: 26px 18px; background: radial-gradient(ellipse at center, var(--panel2), var(--panel) 75%); border: 1px solid var(--line); border-radius: 18px; min-height: 300px; }
.app .word{ border: 1px solid transparent; border-radius: 999px; padding: 4px 12px; line-height: 1.2; transform: rotate(var(--tilt)); font-family: 'Space Grotesk', sans-serif; transition: transform .12s, background .12s; }
.app .word:hover:not(:disabled){ transform: rotate(0) scale(1.06); }
.app .word.s1{ font-size: 14px; font-weight: 500; }
.app .word.s2{ font-size: 18px; }
.app .word.s3{ font-size: 23px; font-weight: 600; }
.app .word.s4{ font-size: 30px; font-weight: 600; letter-spacing: -.5px; }
.app .word.t0{ color: var(--text); }
.app .word.t1{ color: var(--lime); }
.app .word.t2{ color: var(--info); }
.app .word.t3{ color: var(--soft); }
.app .word.t4{ color: var(--warn); }
.app .word.on{ background: var(--lime); color: var(--on-lime); border-color: var(--lime); transform: rotate(0); }
.app .word.on{ text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.app .word:disabled{ opacity: .3; }
.app .topbar{ position: sticky; top: 0; z-index: 15; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "clock speed" "status status" "progress progress"; gap: 6px 20px; align-items: center; padding: 14px 18px 0; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.app .clockblock{ grid-area: clock; }
.app .clockline{ display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.app .clockline strong{ font: 600 34px/1.1 'Space Grotesk', sans-serif; color: var(--lime); }
.app .clockline span{ font-size: 13px; color: var(--soft); }
.app .speedbar{ grid-area: speed; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.app .speedbar .speeds{ display: flex; gap: 4px; flex-wrap: wrap; }
.app .speedbar button{ padding: 7px 10px; font-size: 13px; }
.app .speeds button[aria-pressed=true]{ background: var(--lime); color: var(--on-lime); border-color: var(--lime); }
.app .runstatus{ grid-area: status; margin: 0; font-size: 12px; color: var(--lime); }
.app .progress{ grid-area: progress; height: 3px; background: var(--line); margin: 6px -18px 0; }
.app .progress div{ height: 100%; background: var(--lime); }
.app .actionzone{ margin: 14px 0 18px; }
.app .actionzone .label{ margin: 0 0 8px; }
.app .actions{ display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.app .action{ border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--panel); }
.app .action > button{ width: 100%; font-weight: 700; }
.app .action dl{ margin: 8px 0 0; display: grid; gap: 2px; font-size: 12px; }
.app .action dl div{ display: grid; grid-template-columns: 46px 1fr; gap: 6px; }
.app .action dt{ color: var(--muted); }
.app .action dd{ margin: 0; }
.app .action .why{ margin: 6px 0 0; font-size: 12px; color: var(--warn); }
.app .dash{ display: grid; grid-template-columns: 260px minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.app .panel{ background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.app .meter{ margin: 10px 0 14px; }
.app .meterlabel{ display: flex; justify-content: space-between; font-size: 14px; }
.app .track{ height: 7px; background: var(--track); margin-top: 6px; border-radius: 5px; overflow: hidden; }
.app .track > div{ height: 100%; background: var(--lime); }
.app .track > div.mid{ background: var(--warn); }
.app .track > div.low{ background: var(--grave); }
.app .track.thin{ height: 4px; margin-top: 6px; }
.app .hint{ display: block; margin-top: 4px; font-size: 11px; letter-spacing: 0; color: var(--warn); }
.app .hungerline{ font-size: 12px; color: var(--muted); margin: 0; }
.app .stock{ display: grid; grid-template-columns: 1fr auto; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.app .stock small{ grid-column: 1 / -1; letter-spacing: 0; font-size: 11px; }
.app .conditions p{ margin: 4px 0; font-size: 13px; }
.app .inventory{ list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.app .inventory li{ display: grid; font-size: 13px; padding: 8px 10px; background: var(--panel2); border-radius: 8px; }
.app .inventory small{ letter-spacing: 0; font-size: 11px; }
.app .card{ border: 1px solid var(--line); padding: 24px; background: var(--panel); border-radius: 12px; }
.app .situation h2{ font-size: 26px; margin: 10px 0 12px; }
.app .situation p{ line-height: 1.7; color: var(--soft); }
.app .needs{ margin: 0 0 12px; padding-left: 18px; color: var(--soft); line-height: 1.7; }
.app .feed{ margin-top: 6px; }
.app .log{ max-height: 560px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.app .entry{ display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
.app .entry > i{ width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--c, var(--muted)); }
.app .entry p{ margin: 2px 0 0; line-height: 1.55; font-size: 14px; }
.app .entry small{ font-size: 9px; }
.app .fact{ margin: 10px 0 2px; padding: 10px 12px; border: 1px dashed var(--info); border-radius: 8px; background: var(--info-bg); }
.app .fact small{ color: var(--info); font-size: 9px; }
.app .fact p{ font-size: 13px; margin: 4px 0; }
.app .fact a{ font-size: 11px; }
.app .sev-good{ --c: var(--good); --cb: var(--good-bg); }
.app .sev-info{ --c: var(--info); --cb: var(--info-bg); }
.app .sev-decision{ --c: var(--decision); --cb: var(--decision-bg); }
.app .sev-warn{ --c: var(--warn); --cb: var(--warn-bg); }
.app .sev-grave{ --c: var(--grave); --cb: var(--grave-bg); }
.app .sev-rest{ --c: var(--rest); --cb: var(--rest-bg); }
.app .sev-calm{ --c: var(--muted); --cb: transparent; }
.app .entry[class*="sev-"]{ border-left-color: var(--c); }
.app .entry[class*="sev-"] > i{ color: var(--c); background: var(--cb); border: 1px solid var(--c); }
.app .entry.sev-grave{ background: var(--grave-bg); }
.app .tag[class*="sev-"]{ color: var(--c); }
.app .whohead{ display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.app .whohead h2{ margin: 0; font-size: 20px; }
.app .avatar:not(.big):not(.mini){ width: 64px; height: 64px; }
.app .relations{ display: grid; gap: 10px; }
.app .person{ display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 10px; background: var(--panel2); }
.app .person.ally{ outline: 1px solid var(--good); }
.app .pbody{ flex: 1; min-width: 0; }
.app .pbody b{ font-size: 14px; }
.app .person small{ display: block; letter-spacing: 0; font-size: 11px; }
.app .socials{ display: grid; gap: 6px; margin-top: 8px; }
.app .socials button{ text-align: left; padding: 6px 10px; font-size: 12px; }
.app .socials button span{ display: block; font-size: 11px; color: var(--muted); }
.app .gridhead{ display: flex; justify-content: space-between; align-items: baseline; margin-top: 22px; }
.app .gridhead .label{ margin: 0 0 8px; }
.app .hours{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.app .cell{ aspect-ratio: 1; padding: 0; border-radius: 4px; font-size: 10px; font-weight: 700; line-height: 1; border: 1px solid var(--line); background: var(--cb, var(--panel2)); color: var(--c, var(--muted)); }
.app .cell.past[class*="sev-"],.app .cell.now{ border-color: var(--c); }
.app .cell.sev-calm{ background: var(--panel2); }
.app .cell.future{ background: transparent; border-style: dashed; opacity: .55; }
.app .cell.now{ outline: 2px solid var(--text); outline-offset: 1px; }
.app .cell[aria-current=true]{ box-shadow: 0 0 0 2px var(--lime); }
.app .hourdetail{ margin-top: 10px; padding: 10px 12px; background: var(--panel2); border-radius: 8px; font-size: 12px; min-height: 70px; }
.app .hourdetail p{ margin: 0 0 4px; }
.app .hourdetail ul{ margin: 4px 0; padding-left: 16px; }
.app .legend{ list-style: none; display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 0; margin: 12px 0 0; font-size: 11px; color: var(--muted); }
.app .legend i{ display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; margin-right: 4px; font-style: normal; font-size: 9px; font-weight: 700; background: var(--cb); color: var(--c); border: 1px solid var(--c); vertical-align: -3px; }
.app .legend i.future{ border: 1px dashed var(--line); }
.app .modal{ width: min(680px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: auto; padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.app .modal::backdrop{ background: #050908c7; backdrop-filter: blur(2px); }
.app .mhead h2{ font-size: 28px; margin: 8px 0 10px; line-height: 1.15; }
.app .mtext{ line-height: 1.7; color: var(--soft); }
.app .choices{ display: grid; gap: 10px; margin-top: 18px; }
.app .choice{ text-align: left; display: grid; gap: 4px; padding: 14px 16px; background: var(--panel2); }
.app .choice > b{ font-size: 16px; }
.app .choice .hint{ font-size: 12px; color: var(--muted); }
.app .eff{ font-size: 12px; line-height: 1.5; padding-left: 10px; border-left: 2px solid var(--line); }
.app .eff.certain{ border-color: var(--lime); }
.app .eff.rel{ border-color: var(--info); color: var(--info); }
.app .eff.risk{ border-color: var(--warn); color: var(--warn); }
.app .eff.risk.deadly{ border-color: var(--grave); color: var(--grave); }
.app .eff.miss{ border-color: var(--good); color: var(--good); }
.app .choice .why{ font-size: 12px; color: var(--warn); }
.app .riskresult{ padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.app .riskresult.hit{ background: var(--grave-bg); border-left: 3px solid var(--grave); }
.app .riskresult.miss{ background: var(--good-bg); border-left: 3px solid var(--good); }
.app .deltas{ list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.app .deltas li{ padding: 4px 10px; border-radius: 999px; font-size: 13px; border: 1px solid var(--line); }
.app .deltas li.up{ color: var(--good); border-color: var(--good); }
.app .deltas li.down{ color: var(--grave); border-color: var(--grave); }
.app .deltas li.up::before{ content: '+ '; }
.app .deltas li.down::before{ content: '− '; }
.app .cause{ font-size: 15px; line-height: 1.7; }
.app .endstats{ grid-template-columns: repeat(2, 1fr); margin: 16px 0; }
@media (max-width: 1100px){.app .dash{ grid-template-columns: 250px minmax(0, 1fr); }
.app .right{ grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.app .right .who,.app .right > .label:first-of-type,.app .right .relations{ grid-column: 1; }
.app .right .gridhead,.app .right .hours,.app .right .hourdetail,.app .right .legend{ grid-column: 2; }
.app .right .gridhead{ grid-row: 1; margin-top: 0; }}
@media (max-width: 760px){.app .stage{ padding: 30px 18px; margin: 10px auto; }
.app .idcard{ flex-direction: column; text-align: center; }
.app .idcard .facts > div{ text-align: left; }
.app .avatar.big{ width: 104px; height: 104px; }
.app .pickhead{ flex-wrap: wrap; }
.app .timer strong{ font-size: 42px; }
.app .cloud{ padding: 16px 8px; gap: 4px 6px; min-height: 0; }
.app .word.s1{ font-size: 13px; }
.app .word.s2{ font-size: 15px; }
.app .word.s3{ font-size: 18px; }
.app .word.s4{ font-size: 22px; }
.app .topbar{ grid-template-columns: 1fr; grid-template-areas: "clock" "speed" "status" "progress"; padding: 10px 12px 0; border-radius: 0 0 12px 12px; margin: 0 -16px; border-top: 0; }
.app .clockline strong{ font-size: 28px; }
.app .speedbar{ justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.app .speedbar .speeds{ flex-wrap: nowrap; }
.app .speedbar button{ padding: 7px 9px; flex: none; }
.app .progress{ margin: 4px -12px 0; }
.app .actions{ grid-template-columns: 1fr 1fr; }
.app .action dl{ font-size: 11px; }
.app .action dl div{ grid-template-columns: 1fr; gap: 0; }
.app .dash{ display: flex; flex-direction: column; gap: 14px; }
.app .dash > .center{ order: 1; }
.app .dash > .left{ order: 2; }
.app .dash > .right{ order: 3; display: block; }
.app .dash > *{ width: 100%; }
.app .right .gridhead{ margin-top: 22px; }
.app .card,.app .panel{ padding: 16px; }
.app .log{ max-height: 420px; }
.app .modal{ padding: 18px; }
.app .mhead h2{ font-size: 23px; }
.app .endstats{ grid-template-columns: 1fr; }}
@media (max-width: 380px){.app .actions{ grid-template-columns: 1fr; }}
@media (prefers-reduced-motion: reduce){.app .wheelname.landed{ animation: none; }
.app .word,.app .timebar div{ transition: none; }}
/* Raccords avec l'accueil validé (home.css) */
.app { line-height: 1.5; }
body[data-screen]:not([data-screen="home"]) main { max-width: 1320px; }
body[data-screen]:not([data-screen="home"]) .floatingnav { position: absolute; }
body[data-screen="game"] header { height: 64px; min-height: 64px; }
.app .avatar { margin: 0; font-size: inherit; color: inherit; }
.app .entry p, .app .fact p { border: 0; padding: 0; }
.app .choice span { margin-top: 0; }
.launchdock button { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; }
.launchdock button span { font-size: 11px; font-weight: 400; opacity: .85; }
.savenotice { flex-basis: 100%; margin: 0 0 4px; font-size: 12px; color: var(--warn); }
@media (max-width: 760px) { .app .topbar { margin: 0; border-top: 1px solid var(--line); border-radius: 12px; } }

/* Nuage : la taille traduit la probabilité d'avoir l'objet à portée de main */
.app .cloudlegend { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.app .cloudlegend span { font-family: var(--display, 'Space Grotesk'), sans-serif; color: var(--text); }
.app .cloudlegend .s1 { font-size: 12px; } .app .cloudlegend .s2 { font-size: 14px; } .app .cloudlegend .s3 { font-size: 16px; font-weight: 600; } .app .cloudlegend .s4 { font-size: 19px; font-weight: 700; }
.app .sizescale { display: flex; justify-content: center; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 6px 0 4px; }
.app .sizescale .word { transform: none; cursor: default; color: var(--lime); }
.app .word { transform: none; }
.app .word.s1 { font-size: 13px; font-weight: 500; opacity: .85; } .app .word.s2 { font-size: 17px; font-weight: 500; } .app .word.s3 { font-size: 23px; font-weight: 600; } .app .word.s4 { font-size: 32px; font-weight: 700; letter-spacing: -.5px; }
.app .avatar svg { width: 100%; height: 100%; }
@media (max-width: 760px) { .app .word.s1 { font-size: 12px; } .app .word.s2 { font-size: 15px; } .app .word.s3 { font-size: 19px; } .app .word.s4 { font-size: 25px; } }

.app .realfacts { text-align: left; margin: 16px 0 0; padding: 12px 16px; border: 1px dashed var(--line); border-radius: 12px; }
.app .realfacts summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.app .realfacts .fact { margin: 10px 0 0; }
.app .cloud { align-content: center; row-gap: 10px; }

/* Résultat d'une décision : bandeau non bloquant */
.app .toast { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 50; width: min(420px, calc(100vw - 32px)); padding: 16px 18px; background: var(--panel); border: 1px solid var(--lime); border-radius: 14px; box-shadow: var(--shadow); }
.app .toast p { margin: 6px 0; font-size: 14px; line-height: 1.5; color: var(--soft); }
.app .toast .riskresult { font-size: 13px; }
.app .toast .deltas { margin: 8px 0 0; }
.app .toastclose { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 20px; padding: 4px 8px; line-height: 1; }
@media (max-width: 760px) { .app .toast { left: 16px; right: 16px; width: auto; } }

/* ---------- Rythme, tension et rejouabilité ---------- */
.app #game.danger{ box-shadow: inset 0 0 0 4px var(--grave), inset 0 0 120px var(--grave-bg); border-radius: 18px; }
.app .meter.flashdown .track > div{ animation: flashdown 1.2s ease-out; }
.app .meter.flashup .track > div{ animation: flashup 1.2s ease-out; }
@keyframes flashdown{ 0%, 40%{ background: var(--grave); box-shadow: 0 0 12px var(--grave); } }
@keyframes flashup{ 0%, 40%{ background: var(--good); box-shadow: 0 0 12px var(--good); } }
.app .urgency{ margin: 12px 0; }
.app .urgency p{ margin: 6px 0 0; color: var(--grave); font-weight: 600; }
.app .urgency b{ font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-variant-numeric: tabular-nums; }
.app .urgbar{ height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; }
.app .urgbar > div{ height: 100%; width: 100%; background: var(--grave); transition: width .2s linear; }
.app dialog.shake[open]{ animation: shake .45s ease-in-out 1; }
@keyframes shake{ 20%{ transform: translateX(-8px); } 40%{ transform: translateX(7px); } 60%{ transform: translateX(-5px); } 80%{ transform: translateX(3px); } }
.app .toast.alert{ border-color: var(--grave); box-shadow: 0 0 0 2px var(--grave), var(--shadow); }
.app .scorebox{ display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 14px 0; padding: 14px 16px; border-radius: 14px; background: var(--decision-bg); }
.app .scorebox > div{ display: grid; }
.app .scorebox strong{ font-family: 'Space Grotesk', sans-serif; font-size: 44px; line-height: 1; color: var(--lime); }
.app .scorebox span{ font-weight: 600; }
.app .scorebox ul{ margin: 0; padding: 0; list-style: none; font-size: 14px; columns: 2; column-gap: 18px; }
.app .journal .newend{ color: var(--good); }
@media (prefers-reduced-motion: reduce){ .app dialog.shake[open], .app .meter .track > div{ animation: none; } }

/* ---------- Priorités et pastilles d'effets ---------- */
.app .priorities{ display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.app .prio{ display: grid; grid-template-columns: 1fr; gap: 3px; align-items: center; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); cursor: pointer; }
.app .prio b{ font-size: 15px; }
.app .prio .pgain, .app .prio .pcost{ font-size: 12.5px; line-height: 1.3; }
.app .prio .pgain::before{ content: '+ '; }
.app .prio .pcost::before{ content: '− '; }
.app .prio .pgain{ color: var(--good); }
.app .prio .pcost{ color: var(--muted); }
.app .prio.on{ border-color: var(--lime); background: var(--decision-bg); box-shadow: inset 0 0 0 1px var(--lime); }
.app .chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.app .chip{ font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--track); font-variant-numeric: tabular-nums; }
.app .chip.up{ color: var(--good); }
.app .chip.down{ color: var(--grave); }
@media (max-width: 600px){ .app .priorities{ grid-template-columns: 1fr 1fr; } .app .prio .pcost{ display: none; } }
.app .temps{ margin: 4px 0 8px; color: var(--muted); }
.app .inventory{ font-size: 13px; color: var(--soft); margin: 0; }
.app .scorebox .journal{ margin: 0; line-height: 1.5; }
.app .toast .chips{ margin-top: 4px; }
.app .prio.locked{ opacity: .55; cursor: default; border-style: dashed; }
.app .prio .plock{ font-size: 12.5px; color: var(--muted); }

/* ---------- Fin de partie : récapitulatif animé et statistiques ---------- */
.app .recap{ list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 12px; }
.app .rcard{ padding: 14px 16px; border-radius: 14px; background: var(--panel2); border-left: 4px solid var(--lime); opacity: 0; animation: rcard .6s ease-out forwards; }
.app .rcard.fatal{ border-left-color: var(--grave); background: var(--grave-bg); }
.app .rcard small{ color: var(--muted); letter-spacing: .08em; }
.app .rcard h3{ margin: 4px 0 6px; font-size: 18px; }
.app .rcard p{ margin: 4px 0; }
.app .rcard .same{ color: var(--soft); font-size: 14px; }
.app .fataltxt{ color: var(--grave); }
.app .bars{ list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.app .bars li{ display: grid; grid-template-columns: minmax(0, 1fr) 90px 44px; gap: 8px; align-items: center; color: var(--muted); }
.app .bars li.you{ color: var(--text); font-weight: 600; }
.app .bars span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .bars i{ display: block; height: 6px; border-radius: 99px; background: var(--muted); min-width: 2px; }
.app .bars li.you i{ background: var(--lime); }
.app .bars b{ text-align: right; font-weight: 600; }
@keyframes rcard{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: none; } }
.app .tiles{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 14px 0; }
.app .tile{ padding: 10px 12px; border-radius: 12px; background: var(--panel2); display: grid; gap: 4px; }
.app .tile small{ color: var(--muted); font-size: 12px; }
.app .tile b{ font-size: 18px; }
@media (prefers-reduced-motion: reduce){ .app .rcard{ animation: none; opacity: 1; } }
.app .tile small{ letter-spacing: 0; text-transform: none; }

/* ---------- Téléphone : bandeau compact et toujours utile ---------- */
.app .minimeters{ display: none; }
@media (max-width: 760px){
  .app .topbar{ position: sticky; top: 0; padding: 10px 12px; gap: 6px; box-shadow: 0 6px 18px #0002; }
  .app .clockline strong{ font-size: 30px; }
  .app .clockline span{ font-size: 13px; }
  .app .speedbar{ display: grid; grid-template-columns: auto auto 1fr; gap: 6px; overflow: visible; }
  .app .speedbar .speeds{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .app .speedbar button{ min-height: 40px; padding: 6px 4px; font-size: 13px; }
  .app .runstatus{ font-size: 12px; margin: 0; }
  .app .minimeters{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .app .mini{ display: grid; grid-template-columns: 1fr auto; font-size: 12px; row-gap: 3px; }
  .app .mini span{ color: var(--muted); }
  .app .mini i{ grid-column: 1 / -1; display: block; height: 5px; border-radius: 99px; background: var(--lime); }
  .app .mini.mid i{ background: var(--warn); }
  .app .mini.low i{ background: var(--grave); }
  .app .mini.low b{ color: var(--grave); }
  .app .dash > .left #meters{ display: none; }
  .app .dash > .left > h2:first-child{ display: none; }
  .app .actionzone{ margin: 12px 0; }
  .app .actionzone .label{ font-size: 10px; }
  .app .priorities{ display: flex; overflow-x: auto; gap: 8px; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
  .app .prio{ flex: 0 0 64%; scroll-snap-align: start; min-height: 64px; }
  .app .prio .pcost{ display: none; }
  .app .log{ max-height: none; overflow: visible; }
  .app .situation h2{ font-size: 24px; }
  .app dialog{ width: calc(100vw - 16px); max-height: calc(100dvh - 16px); margin: auto; padding: 18px; }
  .app .choice{ min-height: 56px; }
  .app #ending .stageactions button{ flex: 1 1 100%; }
  .app .tiles{ grid-template-columns: 1fr 1fr; }
}
.app .logmore{ display: block; width: 100%; padding: 12px; border: 0; border-top: 1px solid var(--line); background: var(--panel2); color: var(--text); font-weight: 600; cursor: pointer; }
@media (max-width: 760px){
  .app #identity .stageactions, .app #briefing .stageactions{ position: sticky; bottom: 0; z-index: 5; margin: 0 -18px -30px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); border-radius: 0 0 16px 16px; }
  .app #identity .stageactions button, .app #briefing .stageactions button{ flex: 1 1 auto; min-height: 48px; }
}