/* HOMEOSTASIS — thème « moniteur clinique » */
:root { --bg: #07111b; --pan: #0e1d2b; --pan2: #142a3d; --line: #1f4a66; --cy: #4fd1e8; --tx: #e8f4fa; --mut: #8fb0c2; --ok: #46c46e; --bad: #ff5d5d; --warn: #ffb347; --gold: #ffd24a; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
html, body { margin: 0; height: 100%; color: var(--tx); font-family: 'Segoe UI', Roboto, system-ui, sans-serif; font-size: 15px; overscroll-behavior: none; }
/* Fond médical : croix, cœur, tracé ECG, gélule, ADN, stéthoscope, seringue — en filigrane */
body { background: transparent; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280' fill='none' stroke='%234fd1e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.13'%3E%3Cpath d='M30 24h12v12h12v12H42v12H30V48H18V36h12z'/%3E%3Cpath d='M104 46h22l6-12 9 26 9-36 8 30 5-8h26'/%3E%3Cpath d='M236 70c-12-9-17-15-17-22 0-5 4-9 9-9 3 0 6 2 8 5 2-3 5-5 8-5 5 0 9 4 9 9 0 7-5 13-17 22z'/%3E%3Cg transform='rotate(-35 60 120)'%3E%3Crect x='34' y='110' width='52' height='20' rx='10'/%3E%3Cpath d='M60 110v20'/%3E%3C/g%3E%3Cpath d='M150 96c0 14 22 14 22 28s-22 14-22 28M172 96c0 14-22 14-22 28s22 14 22 28M153 104h16M153 124h16M153 144h16'/%3E%3Cpath d='M222 118v20a14 14 0 0 0 28 0v-20M236 152v10a16 16 0 0 0 16 16'/%3E%3Ccircle cx='258' cy='178' r='5'/%3E%3Cg transform='rotate(40 70 220)'%3E%3Crect x='40' y='212' width='44' height='16' rx='2'/%3E%3Cpath d='M84 220h18M30 220h10M34 212v16M52 212v6M62 212v6M72 212v6'/%3E%3C/g%3E%3Ccircle cx='160' cy='222' r='16'/%3E%3Cpath d='M152 222h16M160 214v16'/%3E%3Cpath d='M214 236h14l5-10 7 20 6-14 4 4h16'/%3E%3C/svg%3E") 0 0 / 280px 280px, radial-gradient(120% 80% at 50% 0%, #123049, var(--bg) 70%); }
button { font: inherit; color: var(--tx); background: var(--pan2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; cursor: pointer; touch-action: manipulation; }
button:active:not(:disabled) { transform: translateY(1px); filter: brightness(1.2); }
button:disabled { opacity: .4; cursor: default; }
button.big { display: block; width: 100%; padding: 14px; font-size: 17px; font-weight: 700; background: linear-gradient(#1b6f8a, #12506a); border-color: var(--cy); box-shadow: 0 0 14px rgba(79, 209, 232, .25); margin: 10px 0; }
button.big.alt { background: linear-gradient(#7a5b12, #5a400a); border-color: var(--gold); }
button.link { background: none; border: none; color: var(--mut); padding: 8px; }
button.go { background: linear-gradient(#1f8a4c, #156236); border-color: #5fe08f; font-weight: 700; }
button.warn { background: #5a1f1f; border-color: var(--bad); }
.hidden { display: none !important; }
.fine { color: var(--mut); font-size: 13px; line-height: 1.35; }
h1, h2, h3 { margin: 0 0 8px; font-family: 'Bahnschrift', 'Segoe UI', sans-serif; letter-spacing: .5px; }
#app { max-width: 980px; margin: 0 auto; min-height: 100%; }

/* icônes */
.si { display: inline-block; line-height: 1; }
.si svg { width: 1.15em; height: 1.15em; vertical-align: -0.22em; }
.df { display: inline-flex; align-items: center; justify-content: center; width: 1.35em; height: 1.35em; border-radius: .26em; vertical-align: -0.3em; background: linear-gradient(145deg, #fff, #cfd9e6); color: #17202e; box-shadow: 0 0 0 1px #17202e; }
.df i { font-style: normal; font-size: .8em; font-weight: 800; line-height: 1; font-family: 'Bahnschrift', 'Segoe UI', sans-serif; }
.df svg { width: .82em; height: .82em; }

/* accueil / panneaux */
.home, .panel { padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); max-width: 460px; margin: 0 auto; }
.logo { text-align: center; padding: 26px 0 18px; position: relative; }
.logo h1 { font-size: 40px; letter-spacing: 4px; color: var(--cy); text-shadow: 0 0 18px rgba(79, 209, 232, .6); margin: 0; }
.logo p { color: var(--mut); margin: 4px 0 0; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; }
.pulse { height: 34px; margin: 0 auto 6px; width: 220px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 34' fill='none' stroke='%234fd1e8' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpath d='M0 17h70l7-9 8 20 10-26 9 23 6-8h110'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px #4fd1e8); }
.fld { display: block; color: var(--mut); font-size: 13px; margin: 10px 0; }
.fld input { display: block; width: 100%; margin-top: 4px; padding: 11px; font: inherit; font-size: 17px; color: var(--tx); background: #0a1622; border: 1px solid var(--line); border-radius: 10px; outline: none; }
.fld input:focus { border-color: var(--cy); }
.row2 { display: flex; gap: 10px; } .row2 button { flex: 1; }
.seg { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; }
.seg > span { color: var(--mut); font-size: 13px; }
.seg > div { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.seg button { padding: 7px 10px; font-size: 13px; }
.seg button.on { background: #17607a; border-color: var(--cy); font-weight: 700; }
.stp { align-items: center; } .stp b { min-width: 26px; text-align: center; font-size: 17px; } .stp button { width: 36px; }
.code { font-family: 'Bahnschrift', monospace; font-size: 54px; letter-spacing: 10px; text-align: center; color: var(--gold); text-shadow: 0 0 16px rgba(255, 210, 74, .5); padding: 6px 0; }
.plist { list-style: none; padding: 0; margin: 12px 0; } .plist li { padding: 9px 12px; background: var(--pan); border: 1px solid var(--line); border-radius: 8px; margin: 5px 0; }

/* galerie */
.gallery { padding: 12px; } .ghead { display: flex; align-items: center; gap: 10px; } .gallery h3 { margin: 16px 0 8px; color: var(--cy); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.gc { position: relative; cursor: pointer; } .gc img { width: 100%; border-radius: 7px; display: block; }
.gc b { position: absolute; right: 4px; bottom: 4px; background: #000a; border-radius: 6px; padding: 1px 6px; font-size: 12px; }

/* partie */
.game { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
.top { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #0a1826; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.top button { padding: 6px 11px; } .status { flex: 1; text-align: center; font-size: 13px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .status b { color: var(--cy); }
.others { display: flex; gap: 6px; padding: 6px 8px 0; overflow-x: auto; }
.op { flex: 1 0 118px; max-width: 220px; background: var(--pan); border: 1px solid var(--line); border-radius: 10px; padding: 5px 7px; cursor: pointer; }
.op.active { border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 210, 74, .35); } .op.dead { opacity: .45; }
.opn { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .opi { font-size: 11px; color: var(--mut); margin-top: 2px; }
.opg .g { height: 13px; gap: 3px; } .opg .gi { font-size: 10px; width: 13px; } .opg .gv { font-size: 10px; width: 14px; } .opg .segs i { height: 5px; }

.arena { margin: 6px 8px 0; padding: 7px; background: var(--pan); border: 1px solid var(--line); border-radius: 12px; }
.who { text-align: center; font-family: 'Bahnschrift', sans-serif; letter-spacing: 2px; font-size: 13px; color: var(--mut); margin-bottom: 5px; }
.who.me { color: var(--gold); text-shadow: 0 0 8px rgba(255, 210, 74, .5); }
.arow { display: flex; gap: 9px; align-items: flex-start; }
.pcard { flex: none; width: 27%; max-width: 150px; cursor: zoom-in; } .pcard img { width: 100%; border-radius: 7px; display: block; box-shadow: 0 4px 12px #000a; }
.ainfo { flex: 1; min-width: 0; font-size: 13.5px; }
.atitle { font-weight: 800; font-size: 15px; margin-bottom: 3px; } .atitle.ok { color: var(--ok); }
.arow2 { display: flex; align-items: center; gap: 6px; padding: 3px 6px; margin: 2px 0; background: #3a1010; border-left: 3px solid var(--bad); border-radius: 5px; font-size: 15px; }
.arow2.ok { background: #0f3320; border-color: var(--ok); } .arow2 .rem { margin-left: auto; font-weight: 700; } .arow2 .sh { color: #9fd8ff; font-size: 13px; }
.afx { color: #ffd9a8; font-size: 12.5px; line-height: 1.3; margin-top: 3px; } .afx.warn { color: var(--warn); }
.next { margin-top: 4px; font-size: 12.5px; color: #cfa8ff; cursor: pointer; }
.odice { margin-top: 5px; display: flex; gap: 5px; }
.ticker { margin-top: 6px; max-height: 58px; overflow: hidden; font-size: 11.5px; color: var(--mut); line-height: 1.3; border-top: 1px dashed var(--line); padding-top: 4px; }
.l.bad { color: #ff9a9a; } .l.good { color: #8ee6a8; } .l.patho { color: #ffb0a0; font-weight: 600; } .l.turn { color: var(--cy); } .l.play { color: #d7e9f2; }

.board { margin: 6px 8px 0; padding: 7px 9px; background: var(--pan); border: 1px solid var(--line); border-radius: 12px; }
.board.mine { border-color: var(--cy); box-shadow: 0 0 12px rgba(79, 209, 232, .2); } .board.dead { opacity: .5; }
.bhead { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; } .bhead .tot { color: #ff9a9a; font-size: 13px; margin-right: auto; }
.mini { width: 30px; height: 42px; border-radius: 4px; overflow: hidden; cursor: zoom-in; flex: none; box-shadow: 0 0 0 1px #fff3; } .mini img { width: 100%; height: 100%; object-fit: cover; }
.mini.chr { box-shadow: 0 0 0 2px var(--bad); } .mini.chr.stab { transform: rotate(90deg); box-shadow: 0 0 0 2px var(--ok); margin: 0 6px; }
.atp { color: var(--gold); font-size: 13px; white-space: nowrap; } .atp i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--gold); margin-left: 2px; } .atp i.on { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.g { position: relative; display: flex; align-items: center; gap: 6px; height: 27px; }
.gi { width: 22px; text-align: center; font-size: 17px; } .gn { width: 62px; font-size: 13px; color: var(--mut); }
.segs { flex: 1; display: flex; gap: 2px; } .segs i { flex: 1; height: 13px; border-radius: 2px; background: #1a2c3b; transition: background .4s; }
.segs i.on { background: var(--sc); box-shadow: 0 0 5px var(--sc); } .segs i.hit { background: repeating-linear-gradient(45deg, var(--bad), var(--bad) 3px, #7a1c1c 3px, #7a1c1c 6px); animation: blink 1s infinite; }
.g.low .gv { color: var(--warn); } .g.necro .gv { color: var(--bad); } .g.necro .gi { filter: grayscale(1); opacity: .5; }
.gv { width: 46px; text-align: right; font-weight: 800; font-size: 16px; } .gv small { color: var(--mut); font-weight: 400; font-size: 11px; }
.gp { width: 26px; color: var(--bad); font-weight: 800; font-size: 13px; } .gc2 { font-size: 13px; }
.delta { position: absolute; right: 60px; top: -4px; font-weight: 900; font-size: 18px; pointer-events: none; animation: floatup 1.4s forwards; text-shadow: 0 0 4px #000; }
.delta.up { color: var(--ok); } .delta.down { color: var(--bad); }
@keyframes floatup { 0% { opacity: 0; transform: translateY(8px) scale(.8); } 15% { opacity: 1; transform: translateY(0) scale(1.25); } 100% { opacity: 0; transform: translateY(-22px); } }
@keyframes blink { 50% { opacity: .45; } }

.dice { display: flex; align-items: center; gap: 8px; margin: 6px 8px 0; flex-wrap: wrap; }
.die { position: relative; width: 62px; height: 62px; padding: 0; border-radius: 13px; background: none; border: none; font-size: 40px; }
.die .df { width: 100%; height: 100%; border-radius: 13px; box-shadow: 0 0 0 2px #17202e, 0 4px 0 #6f7c8d, 0 6px 10px #0009; vertical-align: top; }
.die.used .df { filter: grayscale(.8) brightness(.55); box-shadow: 0 0 0 2px #17202e; } .die.used { opacity: 1; }
.die small { position: absolute; left: 0; right: 0; bottom: 2px; font-size: 9.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }
.die.sel .df { box-shadow: 0 0 0 3px var(--gold), 0 0 14px var(--gold); }
.die.sm { width: 28px; height: 28px; font-size: 18px; display: inline-block; } .die.sm .df { border-radius: 6px; box-shadow: 0 0 0 1px #17202e; }
.dice.rolled .die:not(.used) { animation: roll .5s; }
@keyframes roll { 0% { transform: rotate(-200deg) scale(.4); opacity: 0; } 70% { transform: rotate(12deg) scale(1.1); } 100% { transform: none; } }
.res { margin-left: auto; display: flex; flex-direction: column; gap: 1px; font-size: 13px; color: var(--mut); text-align: right; } .res b { color: var(--tx); font-size: 16px; } .res .arm { color: var(--gold); font-weight: 700; }
.cmd { display: flex; gap: 6px; margin: 7px 8px 0; align-items: center; flex-wrap: wrap; } .cmd .go { margin-left: auto; } .cmd .hint { color: var(--gold); font-size: 13px; flex: 1; }

.hand { display: flex; gap: 7px; overflow-x: auto; padding: 10px 8px 12px; margin-top: auto; scroll-snap-type: x proximity; }
.hc { flex: none; width: 29vw; max-width: 150px; min-width: 104px; border-radius: 8px; cursor: pointer; scroll-snap-align: start; transition: transform .15s; opacity: .8; }
.hc img { width: 100%; display: block; border-radius: 8px; box-shadow: 0 4px 10px #000a; }
.hc.ok { opacity: 1; box-shadow: 0 0 0 2px var(--ok), 0 0 14px rgba(70, 196, 110, .5); } .hand.idle .hc { opacity: .7; }
.hc:hover { transform: translateY(-5px); } .empty { color: var(--mut); padding: 20px; }

/* feuilles / modales */
.sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.sheet-bg { position: absolute; inset: 0; background: #000b; }
.sheet-body { position: relative; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; background: var(--pan); border: 1px solid var(--cy); border-bottom: none; border-radius: 18px 18px 0 0; padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); animation: up .18s; }
@keyframes up { from { transform: translateY(30px); } }
.sheet-body .x { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; padding: 0; border-radius: 50%; z-index: 2; }
.sheet-body.full { max-width: 900px; height: 92vh; padding: 0; } .rules { width: 100%; height: 100%; border: 0; border-radius: 18px 18px 0 0; background: #fff; }
.sheet-body.zoomsheet { background: none; border: none; align-self: center; padding: 10px; } .zoom img { width: 100%; max-height: 82vh; object-fit: contain; border-radius: 14px; display: block; }
.opts { display: flex; flex-direction: column; gap: 7px; } .opts button { text-align: left; padding: 12px; font-size: 15px; } .opts button.pri { border-color: var(--cy); background: #14465a; } .opts small { color: var(--mut); }
.ol { color: var(--cy); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin: 10px 0 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; } .chips button { padding: 8px 11px; font-size: 14px; } .chips button.on { background: #17607a; border-color: var(--cy); font-weight: 700; }
.cs { display: flex; gap: 12px; } .csopt > :first-child { margin-top: 0; padding-right: 40px; min-height: 30px; } .sheet-body > h3 { padding-right: 40px; } .csimg { width: 42%; max-width: 210px; align-self: flex-start; flex: none; } .csopt { flex: 1; min-width: 0; }
.alloc .al { display: flex; align-items: center; gap: 6px; padding: 3px 0; } .al span { margin-left: auto; display: flex; align-items: center; gap: 6px; } .al span button { width: 34px; height: 34px; padding: 0; } .al b { width: 20px; text-align: center; } .al small { color: var(--mut); }
.block { color: var(--warn); font-size: 13px; margin: 8px 0; } .res2 { color: var(--mut); font-size: 12px; margin-top: 8px; }
.mini-hand { display: flex; gap: 6px; overflow-x: auto; padding: 6px 2px; } .mini-hand span { flex: none; width: 92px; border-radius: 6px; cursor: pointer; } .mini-hand img { width: 100%; border-radius: 6px; display: block; }
.mini-hand.pickable span.sel { box-shadow: 0 0 0 3px var(--gold); } .mini-hand.big4 span { width: 23%; min-width: 100px; }
.pcards { display: flex; gap: 8px; margin: 10px 0; overflow-x: auto; } .pcards > div { flex: none; width: 96px; text-align: center; font-size: 11px; color: var(--mut); cursor: zoom-in; } .pcards img { width: 100%; border-radius: 6px; }
.pcards .chr.stab img { filter: saturate(.5); outline: 2px solid var(--ok); }
.logfull { max-height: 64vh; overflow-y: auto; font-size: 13px; line-height: 1.45; } .logfull .l { padding: 2px 0; border-bottom: 1px solid #ffffff0d; }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 40; background: #123; border: 1px solid var(--cy); padding: 10px 16px; border-radius: 12px; max-width: 90vw; text-align: center; box-shadow: 0 6px 20px #000c; }
.toast.bad { border-color: var(--bad); color: #ffc9c9; }
.over { position: fixed; inset: 0; z-index: 15; background: #000c; display: flex; align-items: center; justify-content: center; padding: 16px; }
.obox { background: var(--pan); border: 1px solid var(--gold); border-radius: 18px; padding: 22px 18px; max-width: 460px; width: 100%; text-align: center; box-shadow: 0 0 40px rgba(255, 210, 74, .25); }
.obox h1 { font-size: 34px; color: var(--gold); } .obox table { width: 100%; font-size: 13px; margin: 10px 0; border-collapse: collapse; } .obox td { padding: 4px 2px; border-bottom: 1px solid #ffffff14; text-align: left; } .obox tr.dead { opacity: .5; }
.handoff { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; z-index: 30; } .handoff h1 { font-size: 44px; color: var(--gold); }

@media (min-width: 760px) {
  .game { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; column-gap: 4px; align-content: start; }
  .top, .others, .hand, .cmd, .dice { grid-column: 1 / -1; }
  .hc { width: 150px; } .pcard { width: 34%; }
}

/* agrandissement plein écran */
.zoomov { position: fixed; inset: 0; z-index: 50; background: #000e; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; cursor: zoom-out; }
.zoomov img { max-width: 100%; max-height: calc(100% - 34px); border-radius: 16px; box-shadow: 0 10px 40px #000; }
.zoomov span { color: var(--mut); font-size: 13px; }
.hc { position: relative; }
.hc .mag { position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: #07111bcc; border: 1px solid var(--cy); font-size: 15px; line-height: 1; }
.csimg { position: relative; cursor: zoom-in; } .csimg img { width: 100%; border-radius: 10px; display: block; }
.csimg span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px; text-align: center; font-size: 12px; background: #07111bcc; border-radius: 0 0 10px 10px; }
.aln { line-height: 1.25; } .aln .pv { display: block; } .pv { color: var(--mut); font-size: 12px; } .pv b { color: var(--ok); } .inc { color: #ff9a9a; } .lost { color: var(--warn); }
.chips .pv { display: block; }
.mini-btn { padding: 4px 9px; font-size: 12px; margin-left: 6px; }
.sheet-body.modal { border-color: var(--gold); }