:root{color-scheme:dark;--bg:#070c14;--panel:#101b29;--line:#27384c;--ink:#edf7ff;--muted:#b0c0d2;--blue:#54d7ff;--gold:#ffd48a;--size:270px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 60% 40%,#132841 0,transparent 65%),var(--bg);color:var(--ink);font:16px/1.55 system-ui,sans-serif}a{color:var(--blue)}button,select{font:inherit;color:var(--ink);background:#152337;border:1px solid #405572;border-radius:10px;padding:10px 15px;cursor:pointer;min-height:44px}button:hover{background:#244360;border-color:var(--blue)}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:4px}button:disabled{opacity:.5;cursor:default}.primary{background:var(--blue);color:#041620;border-color:var(--blue);font-weight:700}header{max-width:1320px;margin:auto;display:flex;gap:20px;align-items:center;justify-content:space-between;padding:22px 28px;border-bottom:1px solid var(--line)}header span,.eyebrow{font-size:12px;letter-spacing:.15em;color:var(--blue)}.brand{text-decoration:none;font-weight:750;letter-spacing:.06em}main{max-width:1280px;padding:25px 28px;margin:auto}.heading{display:flex;justify-content:space-between;gap:20px;align-items:center}.eyebrow{margin-bottom:8px}h1{font-size:clamp(28px,3.3vw,44px);letter-spacing:-.04em;line-height:1.1;margin:0 0 14px}.heading p{color:var(--muted)}.stats{text-align:center;border-left:1px solid var(--line);padding-left:28px}.stats strong{font-size:40px;display:block;font-weight:500}.stats span{color:var(--muted)}.layout{display:grid;grid-template-columns:265px 1fr;gap:24px;margin-top:18px}aside{border:1px solid var(--line);background:#0e1825;border-radius:16px;padding:22px;height:fit-content}aside h2{font-size:22px;line-height:1.2}aside p{color:var(--muted)}aside label{display:block;margin-bottom:10px}aside select,aside button{width:100%;margin-bottom:10px}aside .small{font-size:13px;line-height:1.5}.legend{border-block:1px solid var(--line);padding:8px 0}.legend p{margin:8px 0}.legend b{display:inline-block;width:25px}.legend i{display:inline-block;background:var(--blue);width:17px;height:4px;margin-right:8px;vertical-align:middle}.source-color{color:var(--blue)}.target-color{color:var(--gold)}.play-area{border:1px solid var(--line);border-radius:16px;background:linear-gradient(140deg,#101e2eee,#080f19ee);padding:16px;min-width:0}.toolbar{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}.toolbar>div{display:flex;gap:8px;flex-wrap:wrap}.toolbar button{font-size:14px}#viewport{height:450px;display:flex;align-items:center;justify-content:center;perspective:1000px;touch-action:none;cursor:grab}#cube{width:var(--size);height:var(--size);position:relative;transform-style:preserve-3d;transform:rotateX(-18deg) rotateY(-28deg)}.face{position:absolute;width:var(--size);height:var(--size);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);background:#0b1522;border:2px solid #5988ab;backface-visibility:hidden;transform-style:preserve-3d}.tile{display:block;border:1px solid #263f56;border-radius:0;background:#102238;padding:0;position:relative;min-width:0;min-height:0;cursor:pointer;backface-visibility:hidden;color:#5f7897}.tile:hover{background:#1a3650}.tile.lit{color:#68e5ff;background:#163d51}.tile.endpoint{cursor:default}.tile.target{box-shadow:inset 0 0 0 3px var(--gold)}.tile.source{box-shadow:inset 0 0 0 3px var(--blue)}.tile.hinted{box-shadow:inset 0 0 0 4px #efffff}.tile svg{display:block;width:100%;height:100%;overflow:visible}.tile .mark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-weight:800;font-size:21px;text-shadow:0 1px 3px #000}.tile .coord{position:absolute;bottom:3px;left:5px;font-size:10px;color:#c2d6e7;line-height:1}.camera{display:flex;align-items:center;justify-content:center;gap:8px}.camera span{font-size:13px;text-align:center;color:var(--muted);padding:0 8px}.camera button{padding:8px 14px}#faces{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:18px 0 10px}#faces button{font-size:14px;padding:6px 11px}#faces button[aria-pressed=true]{border-color:var(--blue);background:#1a4356}#message{min-height:26px;text-align:center;font-size:15px;color:var(--blue)}#victory{border:1px solid var(--blue);border-radius:12px;padding:20px;background:#133d4b;text-align:center}#victory h2{margin:0}#victory a{display:inline-block;margin:12px}footer{padding:20px;text-align:center;color:var(--muted);font-size:14px}footer a{margin-left:14px}dialog{max-width:600px;width:calc(100% - 30px);max-height:85vh;color:var(--ink);background:#132234;border:1px solid #4a6989;border-radius:18px;padding:28px}dialog::backdrop{background:#02060de0}dialog h2{line-height:1.2}dialog li{margin-bottom:14px}dialog ol{padding-left:22px}#viewport.flat{height:auto;min-height:450px;padding:30px 0;perspective:none;touch-action:pan-y}#viewport.flat #cube{width:100%;height:auto;transform:none!important;display:grid;grid-template-columns:repeat(3,1fr);gap:30px 16px}#viewport.flat .face{position:relative;width:100%;height:auto;aspect-ratio:1;transform:none!important;backface-visibility:visible}#viewport.flat .face::before{content:attr(data-name);position:absolute;top:-24px;left:0;font-size:13px;color:var(--muted)}#viewport.flat .tile .mark{font-size:17px}@media(max-width:900px){.layout{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}aside .legend,aside .small{grid-column:1/-1}aside .legend{display:flex;flex-wrap:wrap;gap:15px}aside h2{margin:8px 0}aside #mission{margin-top:8px}header span{display:none}}@media(max-width:520px){:root{--size:220px}header,main{padding:16px}header{gap:10px}header button{font-size:14px}aside{display:block;padding:16px}.layout{gap:14px}.stats{padding-left:12px}.stats strong{font-size:30px}#viewport{height:370px}.play-area{padding:10px}.camera{gap:4px}.camera span{font-size:11px;padding:0}.camera button{padding:8px 12px}#viewport.flat #cube{grid-template-columns:repeat(2,1fr);gap:32px 12px}.toolbar button{font-size:13px;padding:9px}.tile .coord{font-size:9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

[hidden]{display:none!important}

/* Gestes tactiles : le plateau 3D suit le doigt, la vue à plat reste défilable. */
#viewport:not(.flat),#viewport:not(.flat) .tile{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.tile svg,.tile .coord{pointer-events:none}