:root{font-family:system-ui,sans-serif;color:#26362f;background:#f6f3eb}*{box-sizing:border-box}body{margin:0}.banner{text-align:center;background:#294e40;color:white;padding:9px;font-size:12px;letter-spacing:1px}main{max-width:1050px;margin:auto;padding:32px 22px}header span{font-size:11px;letter-spacing:2px}h1{font:64px Georgia,serif;margin:14px 0}header p{color:#657269}.setup{display:flex;gap:16px;flex-wrap:wrap;align-items:end;margin:30px 0}label{display:grid;gap:8px;font-size:13px}select,button{font:inherit;padding:12px;border:1px solid #b6bcae;border-radius:7px;background:#fffdf7;color:#26362f}button{cursor:pointer}#new{background:#294e40;color:white}.layout{display:grid;grid-template-columns:minmax(0,570px) 1fr;gap:48px}#status{min-height:24px}#board{display:grid;aspect-ratio:1;border:9px solid #6f6651;box-shadow:0 10px 30px #23372c18}#board button{border:0;border-radius:0;padding:0;display:grid;place-items:center;background:#e9dfc6;position:relative}#board button.dark{background:#c0ad87}.piece{width:65%;height:65%;border-radius:50%;box-shadow:0 3px 5px #0004}.white{background:#fff9e9;border:2px solid #a99874}.black{background:#34453e;border:2px solid #182b23}.selected{outline:4px solid #cc7b24;outline-offset:-4px}.target:after{content:'';width:18%;height:18%;border-radius:50%;background:#397e59;position:absolute}.last{box-shadow:inset 0 0 0 3px #99702d}aside{line-height:1.65;padding-top:25px}h2{font:23px Georgia,serif}hr{border:0;border-top:1px solid #d4d8cb;margin:25px 0}button:focus-visible,select:focus-visible{outline:3px solid #2375aa;z-index:1}@media(max-width:720px){.layout{grid-template-columns:1fr;gap:12px}h1{font-size:48px}main{padding:22px 15px}aside{padding-top:0}}

.tools{margin-bottom:18px}.tools label{display:flex;align-items:center;gap:8px;margin-bottom:12px}.tools p{font-size:13px;color:#657269}#board button.threatened{outline:3px dashed #b94334;outline-offset:-5px}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}

#pending{color:#86501c}#captures{min-height:1.4em;color:#92402c;font-weight:600}#counts{font-weight:600}

.intro{max-width:640px;line-height:1.6;font-size:15px}.intro strong{color:#294e40;font-weight:600}

.history{max-width:680px;font-size:14px;line-height:1.6}.history summary{cursor:pointer;color:#294e40;text-decoration:underline;text-underline-offset:4px}.history p{color:#4d5e53}.history .sources{font-size:12px}.history a{color:#294e40}

main{padding-top:14px}h1{font-size:42px;margin:8px 0}header>span{font-size:10px}.setup{margin:16px 0;gap:10px}.tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}.tools label{margin:0}.tools p{margin:0}#pending:empty,#captures:empty,#level-info:empty{display:none}#status,#counts{margin:8px 0}#board{max-height:62vh;width:min(100%,62vh);margin:auto}#invitation{padding:10px;background:#e9eee7;margin-bottom:10px}#invite-link{width:100%;padding:8px}#invitation p{margin:0 0 6px}.history{margin-top:18px}@media(max-width:720px){h1{font-size:32px}.setup{margin:10px 0}.setup select,.setup button{padding:8px}aside{font-size:14px}}

.settings{margin:10px 0}.settings>summary{cursor:pointer;font-size:14px;color:#294e40;padding:8px 0}.layout{gap:24px}#board{width:min(100%,58vh);max-height:58vh}aside{padding-top:0}

@media(max-width:720px){select,button,input{font-size:16px}.setup select,.setup button,.settings>summary{min-height:44px}#board button{min-height:0;font-size:inherit;touch-action:manipulation}.settings>summary{display:flex;align-items:center}}
@media(orientation:landscape) and (max-height:550px){#board{width:min(100%,420px);max-height:none}.layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}main{padding-top:8px}}

#result{background:#294e40;color:white;border:2px solid #1c3b2e;border-radius:10px;padding:16px;margin:10px 0;font-size:22px;font-weight:700;line-height:1.4;box-shadow:0 4px 14px #23372c22}

#email-invite{display:inline-block;padding:12px;color:#294e40;text-underline-offset:3px}#invitation button{margin:5px 0}

.layout{grid-template-columns:minmax(0,1.4fr) minmax(290px,1fr);align-items:start}.settings{background:#fffdf7;border:1px solid #d4d8cb;border-radius:12px;padding:16px;margin:0 0 14px}.settings h2{margin:0 0 14px}.setup{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}.setup label{min-width:0;font-size:14px;font-weight:600}.setup select{width:100%;font-size:15px;min-height:44px}.setup #new{grid-column:1/-1;min-height:46px}.tools{margin-top:14px;display:grid;gap:10px}.tools #undo{width:100%}#invitation{border-radius:12px;padding:16px}#invitation a{display:inline-block;padding:12px;border:1px solid #b6bcae;border-radius:7px;margin:5px 0;background:white;color:#294e40;text-decoration:none}#invite-link{font-size:13px;min-width:0}#online-message,#share-help{overflow-wrap:anywhere}#board{width:min(100%,65vh);max-height:none}.email-help,#share-help{font-size:12px;line-height:1.5}@media(max-width:720px){.layout{grid-template-columns:1fr}.layout>section{order:0}.layout>aside{order:1}.setup select{font-size:16px}#board{width:min(100%,58vh)}}@media(orientation:landscape) and (max-height:550px){#board{width:min(100%,420px)}}

.rules{margin:24px auto 0;max-width:580px;line-height:1.65;color:#4d5e53}.rules h2{color:#26362f;margin:0 0 12px}.rules p{margin:10px 0}

#identity{font-weight:600;color:#294e40}#status{font-size:18px;font-weight:600;min-height:48px}#again{background:#294e40;color:white;margin-bottom:12px}#board button.last{background:#c5d8b4;box-shadow:inset 0 0 0 2px #58714a}#board button.selected{outline:4px solid #cf6b12;outline-offset:-4px}#board button.playable:hover{filter:brightness(1.12)}#board button .piece.arrival{animation:arrive .16s ease-out}@keyframes arrive{from{transform:scale(.9);opacity:.65}to{transform:scale(1);opacity:1}}.rules summary{cursor:pointer;font:22px Georgia,serif;color:#26362f}.sound{display:flex;align-items:center;gap:6px;font-size:13px;float:right}#progress:empty{display:none}@media(max-width:720px){.layout{display:flex;flex-direction:column}.layout>section{display:contents}.layout>aside{order:2;width:100%}.layout #board{order:1}.layout .rules{order:3;width:100%}.layout #identity,.layout #status,.layout #result,.layout #counts,.layout #captures,.layout #retry-ai,.layout #again{order:0}.target:after{width:25%;height:25%}}@media(prefers-reduced-motion:reduce){#board button .piece{animation:none}}

/* Jetons inspirés de matières antiques ; repères dans la palette du plateau. */
#board button.last{background:#d7bf94;box-shadow:inset 0 0 0 2px #977b4b}
#board button.dark.last{background:#b69b70}
.target:after{background:#735d3e;box-shadow:0 0 0 2px #f8edda99}
#board button.selected{outline:4px solid #81532d;outline-offset:-4px}
.piece{position:relative;width:72%;height:72%;border-radius:48%;box-shadow:0 4px 5px #36241255,inset 0 2px 2px #ffffff70,inset 0 -3px 3px #261c1940}
.piece:before{content:'';position:absolute;inset:16%;border-radius:50%;border:1px solid #5c3e2540;box-shadow:inset 0 1px 2px #3f281225,0 1px 1px #ffffff45}
.piece:after{content:'';position:absolute;left:44%;top:44%;width:12%;height:12%;border-radius:50%;background:#5d402a28;box-shadow:inset 0 1px 2px #3e291c40}
.piece.white{border:2px solid #b5a17b;background:radial-gradient(ellipse at 28% 22%,#fffaf0 0%,#ede0c4 48%,#c8b38c 100%)}
.piece.black{border:2px solid #573a2b;background:radial-gradient(ellipse at 28% 22%,#ad7959 0%,#785039 48%,#452d25 100%);box-shadow:0 4px 5px #25191266,inset 0 2px 2px #e6bd9160,inset 0 -3px 3px #20120d70}
.piece.black:before{border-color:#d5a57d55;box-shadow:inset 0 1px 2px #22140d80,0 1px 1px #d6a57a50}
.piece.black:after{background:#35221988}