:root{--ink:#17384f;--cream:#fff7e8;--gold:#efb54d;--green:#76a84e;--panel:#f7ead0;--shadow:0 16px 40px rgba(25,45,54,.18)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;background:linear-gradient(#d9f1fb,#fff4dc);font-family:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",system-ui,sans-serif;color:var(--ink)}body{min-height:100dvh;overflow-x:hidden}.app-shell{min-height:100dvh;max-width:720px;margin:auto;padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;background:radial-gradient(circle at 20% 0%,rgba(255,255,255,.8),transparent 36%),linear-gradient(180deg,#bde8f4 0,#f9e7bd 100%)}
.topbar{display:flex;justify-content:space-between;align-items:center;min-height:62px}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.18em;color:#5b7b84}.topbar h1{font-size:clamp(22px,6vw,32px);margin:3px 0 0}.icon-btn{width:44px;height:44px;border:0;border-radius:50%;background:#fff7e5;box-shadow:0 6px 16px rgba(40,60,70,.15);font-size:20px}
.game-stage{display:grid;gap:10px;position:relative}.info-row{min-height:112px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}.success-slot{min-width:0;display:flex;align-items:center;justify-content:flex-start;min-height:96px}.success-badge-inline{opacity:0;pointer-events:none;transform:translateY(10px) scale(.78) rotate(-3deg);padding:11px 16px;border:4px solid #784c21;border-radius:18px;background:linear-gradient(#fff2a8,#f7b83e);box-shadow:0 8px 0 #9a5b25,0 13px 22px rgba(0,0,0,.18);font-size:clamp(20px,5.8vw,32px);font-weight:1000;letter-spacing:.03em;color:#74331f;text-shadow:0 2px #fff8d6;white-space:nowrap}.success-badge-inline small{display:block;text-align:center;font-size:.34em;letter-spacing:.11em;color:#925626;margin-top:2px}.success-badge-inline.show{animation:inlineBadgePop 5s ease forwards}
.model-card{appearance:none;position:relative;z-index:2;width:clamp(104px,28vw,148px);padding:5px;background:#fff7dc;border:3px solid #8b6636;border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.18);transform:rotate(1deg);cursor:zoom-in;color:inherit}.model-card:active{transform:rotate(0) scale(.96)}.model-label{text-align:center;font-size:10px;font-weight:1000;letter-spacing:.12em;color:#68461e;padding-bottom:4px}.model-label span{font-size:12px}.model-card img{display:block;width:100%;aspect-ratio:1;border-radius:8px;object-fit:cover}
.board-wrap{position:relative;aspect-ratio:1;border-radius:24px;padding:8px;background:linear-gradient(145deg,#c9984d,#6e4a28);box-shadow:var(--shadow),inset 0 2px rgba(255,255,255,.45);overflow:hidden}.board{width:100%;height:100%;display:grid;border-radius:17px;overflow:hidden;background:#624b31;touch-action:none}.tile{position:relative;background-repeat:no-repeat;cursor:pointer;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;border:1px solid rgba(31,30,22,.16)}.tile::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);pointer-events:none}.tile.selected{z-index:3;transform:scale(.94);filter:brightness(1.13) saturate(1.08);box-shadow:inset 0 0 0 4px #ffd75e}.tile.locked{cursor:default}.tile.locked::before{position:absolute;z-index:2;bottom:5px;left:5px;padding:3px 6px;border-radius:999px;background:rgba(24,44,52,.78);color:#fff;font-size:9px;font-weight:900;letter-spacing:.08em}.tile.start.locked::before{content:"DÉPART"}.tile.end.locked::before{content:"GARE"}.tile.hint{animation:hintPulse .9s ease 2}.tile.swapping{animation:swapPop .28s ease}.board.solved .tile{border-color:transparent}.success-glow{position:absolute;inset:8px;border-radius:17px;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 5px #ffe685,0 0 38px #ffda5b}.success-glow.on{animation:successGlow 2.2s ease forwards}
.status-panel{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,250,235,.92);border:1px solid rgba(105,77,42,.14);border-radius:18px;padding:12px 14px;box-shadow:0 6px 18px rgba(80,70,45,.10)}.status-copy{display:grid;gap:2px}.status-copy strong{font-size:15px}.status-copy span{font-size:12px;line-height:1.3;color:#5f7175}.moves{width:58px;height:58px;border-radius:50%;background:#17384f;color:white;display:grid;place-content:center;text-align:center;flex:none}.moves span{font-size:20px;font-weight:900;line-height:18px}.moves small{font-size:9px;text-transform:uppercase;letter-spacing:.08em}.toolbar{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:8px;margin-top:auto}.game-btn{border:0;border-radius:15px;min-height:50px;padding:9px 8px;font-weight:900;font-size:12px;box-shadow:0 6px 14px rgba(50,60,55,.13)}.game-btn.secondary{background:#fff8e9;color:#35566a}.game-btn.primary{background:linear-gradient(#f7bf52,#e3932e);color:#3e2b16}.game-btn:disabled{opacity:.42;box-shadow:none}
@keyframes hintPulse{50%{filter:brightness(1.35);transform:scale(.9);box-shadow:inset 0 0 0 5px #ffe25f}}@keyframes swapPop{50%{transform:scale(.89)}}@keyframes successGlow{0%{opacity:0}25%{opacity:1}100%{opacity:.25}}@keyframes inlineBadgePop{0%{opacity:0;transform:translateY(10px) scale(.65) rotate(-6deg)}8%{opacity:1;transform:translateY(0) scale(1.12) rotate(2deg)}15%{transform:scale(.97) rotate(-1deg)}24%,83%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:.12;transform:scale(.98)}}
.fireworks{position:fixed;inset:0;z-index:99;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .15s ease}.fireworks.on{opacity:1}.firework-burst{position:absolute;width:10px;height:10px;transform:translate(-50%,-50%)}.firework-core{position:absolute;inset:-8px;border-radius:50%;background:#fff7b0;box-shadow:0 0 22px #fff4a0;animation:corePop .9s ease-out forwards}.spark{position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50% 50% 48% 52%;background:var(--spark);box-shadow:0 0 10px var(--spark);transform:translate(-50%,-50%) rotate(var(--a)) translateX(0) scale(.35);animation:sparkFly 1.35s cubic-bezier(.08,.72,.23,1) forwards}.spark::after{content:"";position:absolute;right:7px;top:4px;width:20px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--spark),transparent);opacity:.8}.confetti{position:absolute;width:10px;height:18px;border-radius:3px;background:var(--c);animation:confettiFall 2.1s ease-in forwards;transform:rotate(var(--r))}
@keyframes corePop{0%{transform:scale(.2);opacity:0}25%{opacity:1}100%{transform:scale(2.1);opacity:0}}@keyframes sparkFly{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateX(0) scale(.3)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) scale(1)}}@keyframes confettiFall{0%{opacity:0;transform:translateY(-30px) rotate(var(--r)) scale(.6)}12%{opacity:1}100%{opacity:0;transform:translateY(78vh) rotate(calc(var(--r) + 720deg)) scale(1)}}
.model-viewer{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) 14px max(44px,env(safe-area-inset-bottom));visibility:hidden;opacity:0;transition:opacity .3s ease,visibility .3s;touch-action:none;overflow:hidden}.model-viewer.open{visibility:visible;opacity:1}.model-viewer.closing{opacity:0}.model-viewer-backdrop{position:absolute;inset:0;background:rgba(15,31,40,.88);backdrop-filter:blur(5px)}.model-viewer img{position:relative;z-index:2;display:block;width:min(92vw,680px);max-height:82dvh;object-fit:contain;border:5px solid #fff0c7;border-radius:20px;box-shadow:0 22px 70px rgba(0,0,0,.55);transform-origin:center center;will-change:transform}.model-viewer img.zoom-animate{transition:transform .32s cubic-bezier(.2,.8,.25,1)}.model-viewer-help{position:absolute;z-index:3;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:90vw;text-align:center;padding:9px 13px;border-radius:999px;background:rgba(255,247,226,.94);color:#244556;font-size:11px;font-weight:900;box-shadow:0 6px 18px rgba(0,0,0,.22)}
@media(max-width:420px){.app-shell{padding-left:10px;padding-right:10px}.info-row{min-height:100px;gap:8px}.board-wrap{border-radius:20px;padding:6px}.success-glow{inset:6px}.model-card{width:104px}.success-badge-inline{padding:9px 11px;font-size:19px;border-width:3px;box-shadow:0 6px 0 #9a5b25,0 10px 18px rgba(0,0,0,.16)}.toolbar{gap:6px}.game-btn{font-size:11px}.tile.locked::before{font-size:7px;padding:2px 4px}.model-viewer-help{font-size:10px}}
@media(min-width:650px){.app-shell{padding-left:26px;padding-right:26px}.model-card{width:132px}.info-row{min-height:122px}}