:root{--ink:#102a43;--muted:#627d98;--paper:#f7f3ea;--white:#fffdf8;--blue:#1877b8;--green:#23895c;--red:#d64c4c;--yellow:#efbd32;--line:#d9e2ec;--shadow:0 22px 60px rgba(16,42,67,.13)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;color:var(--ink);background:var(--paper);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.site-header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,5vw,78px);border-bottom:1px solid rgba(16,42,67,.12);background:rgba(247,243,234,.9)}
.brand{display:flex;gap:12px;align-items:center;color:var(--ink);font-size:21px;font-weight:800;text-decoration:none}
.brand small{display:block;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.brand-mark{width:34px;height:34px;display:grid;grid-template-columns:1fr 1fr;transform:rotate(45deg);overflow:hidden;border-radius:7px}
.brand-mark i:nth-child(1){background:var(--blue)}
.brand-mark i:nth-child(2){background:var(--red)}
.brand-mark i:nth-child(3){background:var(--yellow)}
.brand-mark i:nth-child(4){background:var(--green)}
main{min-height:calc(100vh - 132px)}
.hero{max-width:1220px;margin:auto;padding:clamp(58px,8vw,112px) clamp(24px,5vw,64px);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,8vw,110px);align-items:center}
.eyebrow{margin:0 0 16px;color:var(--green);font-size:12px;font-weight:800;letter-spacing:.17em;text-transform:uppercase}
.hero h1,.dashboard-title h1{margin:0;font-family:Georgia,serif;font-size:clamp(42px,5.4vw,76px);font-weight:500;line-height:1.04;letter-spacing:-.04em}
.intro{max-width:650px;margin:28px 0;color:var(--muted);font-size:18px;line-height:1.7}
.rule-pills{display:flex;gap:10px;flex-wrap:wrap}
.rule-pills span{padding:9px 13px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.45);font-size:13px;font-weight:700}
.auth-card,.panel,.rooms-section{background:var(--white);border:1px solid rgba(16,42,67,.1);box-shadow:var(--shadow)}
.auth-card{padding:30px;border-radius:5px}
.tabs{display:flex;margin-bottom:22px;border-bottom:1px solid var(--line)}
button,input{font:inherit}
.tab{flex:1;padding:13px 5px;border:0;border-bottom:3px solid transparent;color:var(--muted);background:transparent;cursor:pointer;font-weight:750}
.tab.active{border-color:var(--blue);color:var(--ink)}
.form-stack{display:grid;gap:17px}
.form-intro{display:grid;gap:4px;padding:0 0 4px}
.form-intro strong{font:600 19px Georgia,serif}
.form-intro span{color:var(--muted);font-size:12px}
.form-stack label{display:grid;gap:7px;font-size:12px;font-weight:800}
.form-stack input,.join-form input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:4px;background:white;color:var(--ink);outline:0}
.form-stack input:focus,.join-form input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(24,119,184,.12)}
label small{color:var(--muted);font-weight:500}
.primary,.ghost,.mode-card{border:0;cursor:pointer}
.primary{padding:13px 18px;border-radius:4px;background:var(--ink);color:white;font-weight:800}
.primary:hover{background:var(--blue)}
.message{min-height:20px;margin:14px 0 0;color:var(--red);font-size:13px}
.dashboard{max-width:1220px;margin:auto;padding:54px clamp(24px,5vw,64px) 80px}
.dashboard-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:42px}
.dashboard-title h1{font-size:clamp(38px,5vw,62px)}
.ghost{padding:10px 14px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:4px}
.dashboard-grid{display:grid;grid-template-columns:1.4fr 1fr .65fr;gap:18px}
.panel{position:relative;min-height:250px;padding:28px;border-radius:5px}
.panel-number{position:absolute;top:17px;right:20px;margin:0;color:#bcccdc;font-weight:800}
.panel h2,.rooms-section h2{margin:0 0 10px;font-family:Georgia,serif;font-size:25px}
.panel>p:not(.panel-number){color:var(--muted);line-height:1.5}
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:25px}
.mode-card{min-height:118px;display:grid;align-content:center;padding:15px;border:1px solid var(--line);background:white;color:var(--ink);text-align:left}
.mode-card:hover{border-color:var(--blue);transform:translateY(-2px)}
.mode-card.expert-card{border:2px solid rgba(112,74,44,.5);background:linear-gradient(145deg,#fff,#fff8e8)}
.mode-card.expert-card:hover{border-color:#704a2c;box-shadow:0 10px 24px rgba(112,74,44,.14)}
.mode-card strong{font:500 28px Georgia,serif}
.mode-card span{font-weight:800}
.mode-card small{margin-top:5px;color:var(--muted)}
.bot-card{border-color:rgba(35,137,92,.45);background:rgba(35,137,92,.04)}
.join-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:28px}
.join-form input{text-transform:uppercase;letter-spacing:.2em;font-weight:800}
.profile-panel dl{display:grid;gap:20px;margin-top:35px}
.profile-panel dl div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line)}
dt{color:var(--muted)}
dd{margin:0;font:500 27px Georgia,serif}
.rooms-section{margin-top:18px;padding:27px;border-radius:5px}
.section-heading{display:flex;align-items:center;justify-content:space-between}
.text-button{border:0;background:transparent;color:var(--blue);cursor:pointer;font-weight:800}
.rooms-list{display:grid;gap:10px}
.room{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.room-code{font-weight:900;letter-spacing:.17em}
.room-members{color:var(--muted);font-size:13px}
.empty{color:var(--muted)}
.account-chip{font-size:13px;font-weight:800}
.game-screen{max-width:1450px;margin:auto;padding:30px clamp(18px,3vw,48px) 70px}
.game-toolbar{display:grid;grid-template-columns:180px 1fr 100px;align-items:center;gap:28px;margin-bottom:24px}
.game-actions{display:grid;gap:8px}.game-actions .ghost{width:100%}
.turn-heading{text-align:center}
.turn-heading .eyebrow{margin-bottom:5px}
.turn-heading h1{margin:0;font:500 clamp(29px,4vw,46px) Georgia,serif}
.turn-heading p:last-child{margin:5px 0;color:var(--muted)}
.turn-timer{width:82px;height:82px;padding:7px;border-radius:50%;background:conic-gradient(var(--green) calc(var(--remaining)*1turn),#d9e2ec 0);transition:background .2s linear}
.turn-timer>div{height:100%;display:grid;place-content:center;border-radius:50%;background:var(--paper);text-align:center}
.turn-timer strong{font:600 22px Georgia,serif}
.turn-timer small{display:block;color:var(--muted);font-size:9px}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.board-shell{position:relative;width:min(100%,950px);margin:auto;aspect-ratio:1568/1377;overflow:hidden;border:8px solid var(--white);box-shadow:var(--shadow);background:white}
.game-screen.is-paused .board-shell::after{content:'PARTIE EN PAUSE';position:absolute;inset:0;z-index:20;display:grid;place-content:center;background:rgba(16,42,67,.48);color:white;font:700 clamp(24px,5vw,54px) Georgia,serif;letter-spacing:.05em}
.board-shell>img{width:100%;height:100%;object-fit:fill;display:block;filter:saturate(.88) contrast(1.03)}
.piece-layer{position:absolute;inset:0}
.game-piece{position:absolute;left:var(--x);top:var(--y);width:clamp(18px,2.25vw,30px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:3px solid white;box-shadow:0 3px 8px rgba(16,42,67,.45);z-index:2}
.game-piece.blue{background:var(--blue)}
.game-piece.yellow{background:var(--yellow)}
.game-piece.green{background:var(--green)}
.game-piece.red{background:var(--red)}
.game-piece.selectable{cursor:pointer;outline:4px solid rgba(255,255,255,.9);animation:pulse-piece 1s infinite alternate;z-index:4}
.game-piece.stack-1{margin-left:0}
.game-piece.stack-2{margin-left:0}
.game-piece.barrier-left{margin-left:-18px}
.game-piece.barrier-right{margin-left:18px}
.game-piece.barrier-up{margin-top:-18px}
.game-piece.barrier-down{margin-top:18px}
.game-piece.being-captured{animation:captured-warning .22s ease-in-out infinite alternate;z-index:8}@keyframes captured-warning{to{filter:brightness(1.7);transform:translate(-50%,-50%) scale(1.22)}}
@keyframes pulse-piece{to{box-shadow:0 0 0 7px rgba(24,119,184,.3),0 4px 10px rgba(16,42,67,.45)}
}
.game-sidebar{display:grid;gap:14px}
.game-card{padding:20px;background:var(--white);border:1px solid var(--line);box-shadow:0 12px 35px rgba(16,42,67,.09)}
.card-kicker{display:block;margin-bottom:12px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.assignment-line,.player-line{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.team-dot{display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:50%}
.die-face{display:grid;place-content:center;width:72px;height:72px;margin:6px auto 16px;border:2px solid var(--ink);border-radius:13px;background:white;font:700 34px Georgia,serif;box-shadow:inset 0 0 0 5px var(--paper)}
.roll-button{width:100%}
.roll-button:disabled{cursor:not-allowed;opacity:.42}
.game-message{min-height:36px;margin:13px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.player-line.active{margin:7px -10px;padding:12px 10px;border:2px solid var(--green);border-radius:10px;background:rgba(42,170,104,.12);color:var(--ink);font-weight:900;box-shadow:0 0 0 4px rgba(42,170,104,.08)}
.turn-marker{display:inline-block;margin-right:8px;padding:3px 6px;border-radius:999px;background:var(--green);color:white;font-size:9px;letter-spacing:.06em;animation:turn-pulse .8s ease-in-out infinite alternate}
.player-line.active.team-blue-yellow{border-color:var(--blue);background:rgba(33,133,208,.11);box-shadow:0 0 0 4px rgba(33,133,208,.07)}
.player-line.active.team-blue-yellow .turn-marker{background:var(--blue)}
.human-turn .turn-heading,.computer-turn .turn-heading{padding:10px 18px;border-radius:14px;border:3px solid var(--green);background:rgba(42,170,104,.08);box-shadow:0 8px 22px rgba(16,42,67,.09)}
.team-blue-yellow-turn .turn-heading{border-color:var(--blue);background:rgba(33,133,208,.08)}
.team-green-red-turn .turn-heading{border-color:var(--green);background:rgba(42,170,104,.08)}
@keyframes turn-pulse{to{transform:scale(1.06);filter:brightness(1.13)}}
.player-line em{font-style:normal;color:var(--muted)}
footer{height:50px;padding:16px clamp(24px,5vw,78px);color:var(--muted);font-size:12px}
@media(max-width:1000px){.game-layout{grid-template-columns:1fr}
.game-sidebar{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){.hero{grid-template-columns:1fr}
.dashboard-grid{grid-template-columns:1fr 1fr}
.create-panel{grid-column:1/-1}
.hero-copy{text-align:center}
.intro{margin-left:auto;margin-right:auto}
.rule-pills{justify-content:center}
.mode-grid{grid-template-columns:1fr 1fr}
.game-toolbar{grid-template-columns:1fr auto}
.game-toolbar>.game-actions{grid-column:1}
.turn-heading{grid-column:1;text-align:left;grid-row:2}
.turn-timer{grid-column:2;grid-row:1/3}
.game-sidebar{grid-template-columns:1fr}
}
@media(max-width:600px){.site-header{height:70px}
.hero,.dashboard{padding-left:18px;padding-right:18px}
.hero{padding-top:42px}
.hero h1{font-size:42px}
.auth-card{padding:22px}
.dashboard-title{align-items:start;gap:20px}
.dashboard-grid{grid-template-columns:1fr}
.create-panel{grid-column:auto}
.mode-grid{grid-template-columns:1fr}
.join-form{grid-template-columns:1fr}
.room{grid-template-columns:1fr;gap:6px}
.account-chip{display:none!important}
.game-screen{padding-left:8px;padding-right:8px}
.game-toolbar{padding:0 10px}
.board-shell{border-width:4px}
.game-piece{border-width:2px}
}
.board-shell{aspect-ratio:1;border-radius:18px;background:#d6a566}
.board-shell>img{display:none}
.digital-board{width:100%;height:100%;display:block;background:#d6a566}
.board-frame{fill:#d6a566;stroke:none}
.home-field{stroke:none}
.home-inset{fill:rgba(255,255,255,.16);stroke:rgba(255,255,255,.36);stroke-width:4}
.home-slot{fill:rgba(255,255,255,.28);stroke:rgba(16,42,67,.18);stroke-width:3}
.track-cell{stroke:#4f4a45;stroke-width:1.5}
.turn-cell{stroke-linejoin:round}
.final-cell{filter:saturate(.94)}
.cell-number{font:700 12px Inter,sans-serif;fill:#243b53;pointer-events:none}
.safe-star{font:700 22px serif;fill:#827a78;text-anchor:middle;pointer-events:none}
.center-base{fill:#fffdf7;stroke:#4f4a45;stroke-width:2}
.center-medallion{fill:#fff9e8;stroke:#704a2c;stroke-width:3}
.game-piece{width:clamp(20px,2.7vw,34px);box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),0 4px 9px rgba(16,42,67,.45);transition:left .075s linear,top .075s linear,margin .15s}
.die-face.rolling{animation:die-tumble .16s linear infinite;background:#eef5fa}
@keyframes die-tumble{0%{transform:rotate(-8deg) scale(.94)}50%{transform:rotate(10deg) scale(1.07)}100%{transform:rotate(-8deg) scale(.94)}}
@media(prefers-reduced-motion:reduce){.game-piece{transition:none}.die-face.rolling{animation:none}}
.victory-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:12;display:none}.victory-confetti.active{display:block}.victory-confetti i{position:absolute;left:var(--left);top:-8%;width:10px;height:18px;border-radius:2px;animation:confetti-fall var(--duration) var(--delay) cubic-bezier(.16,.75,.35,1) forwards}@keyframes confetti-fall{to{transform:translate3d(calc((50% - var(--left)) * .25),115vh,0) rotate(var(--spin))}}
.victory-confetti.defeat{background:radial-gradient(circle at center,transparent 42%,rgba(36,59,83,.13))}.victory-confetti.defeat i{width:12px;height:12px;border-radius:50%;filter:saturate(.65)}