html,body{background:#1a1a1a;color:#f0f0f0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh;min-height:100dvh;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;overflow-x:hidden}#app{max-width:480px;width:100%;margin:0 auto;padding:clamp(12px,3vw,20px);display:flex;flex-direction:column;min-height:100dvh}h1{font-size:clamp(22px,6vw,28px);letter-spacing:1px;text-align:center}.section-title{font-size:clamp(14px,4vw,16px);color:#888;text-transform:uppercase;letter-spacing:1.5px;margin-top:8px}.error-banner{color:#f77;font-size:clamp(13px,3.5vw,15px);text-align:center;min-height:18px}.muted{color:#888;font-size:clamp(13px,3.5vw,15px);text-align:center}.home-header{text-align:center}.island-card{background:#2a2a2a;border-radius:12px;padding:14px 16px;border:1.5px solid #333}.island-name{font-size:clamp(18px,5vw,22px);font-weight:600}.island-theme{font-size:clamp(11px,3vw,12px);color:#aaa;text-transform:uppercase;letter-spacing:1px;margin-top:4px}.island-desc{font-size:clamp(13px,3.5vw,14px);color:#ccc;margin-top:8px;line-height:1.4}#levels-list{display:flex;flex-direction:column;gap:8px}.level-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#2a2a2a;border:1.5px solid #333;border-radius:12px;color:#f0f0f0;cursor:pointer;text-align:left;width:100%;transition:background .15s ease,border-color .15s ease}.level-card:hover{background:#333;border-color:#444}.level-num{width:36px;height:36px;border-radius:50%;background:#444;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.level-body{flex:1;min-width:0}.level-title{font-size:clamp(14px,4vw,16px);font-weight:600}.level-card .level-meta{font-size:clamp(11px,3vw,12px);color:#888;margin-top:2px}.level-arrow{font-size:22px;color:#aaa;flex-shrink:0}.level-card.done{border-color:#2a7d5c;background:#1f2f25}.level-card.done .level-arrow{color:#5cf}.user-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#2a2a2a;border-radius:12px;border:1px solid #333;flex-wrap:wrap}.user-pseudo{font-size:clamp(13px,3.5vw,15px)}.user-avatar{font-size:clamp(11px,3vw,12px);color:#aaa;margin-left:4px;text-transform:uppercase;letter-spacing:1px}.ghost-btn{margin-left:auto;padding:6px 12px;background:transparent;border:1px solid #555;color:#ddd;border-radius:8px;cursor:pointer;font-size:clamp(11px,3vw,13px)}.ghost-btn:hover{background:#333;color:#fff}.signin-wrap{display:flex;flex-direction:column;gap:10px;align-items:center;padding:14px;background:#2a2a2a;border-radius:12px;border:1px solid #333}.profile-card{background:#2a2a2a;border-radius:12px;padding:14px 16px;border:1px solid #333;display:flex;flex-direction:column;gap:12px}.profile-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.profile-row .label{font-size:clamp(11px,3vw,12px);color:#888;text-transform:uppercase;letter-spacing:1px}#profile-pseudo{flex:1;max-width:240px;padding:6px 10px;background:#1a1a1a;border:1px solid #444;border-radius:8px;color:#f0f0f0;font-size:clamp(13px,3.5vw,15px);font-family:inherit}.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}.avatar-btn{padding:10px 6px;background:#2a2a2a;border:1.5px solid #333;border-radius:10px;color:#ccc;font-size:clamp(11px,3vw,12px);cursor:pointer;text-transform:capitalize;transition:background .15s ease,border-color .15s ease}.avatar-btn:hover{background:#333;border-color:#444}.avatar-btn.selected{background:#1f2f25;border-color:#2a7d5c;color:#5cf}.island-title{font-size:clamp(20px,5.5vw,26px);text-align:center;font-weight:700;letter-spacing:1px;color:#ffeac4;text-shadow:0 2px 4px rgba(0,0,0,.5)}.island-map{position:relative;width:100%;aspect-ratio:5 / 11;border-radius:18px;background:radial-gradient(ellipse at 50% 100%,#b58a4e,#7c5a30 40%,#4d3a1f);overflow:hidden;border:2px solid #3b2c14;box-shadow:inset 0 0 60px #00000073}.island-paths{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.island-paths .path-line{stroke:#f0e0c0;stroke-width:.18;stroke-linecap:round;fill:none;opacity:.85;stroke-dasharray:.3 .18}.island-map .decor{position:absolute;width:clamp(38px,12vw,70px);transform:translate(-50%,-55%);pointer-events:none;user-select:none;filter:drop-shadow(0 4px 4px rgba(0,0,0,.45))}.level-node{position:absolute;width:clamp(34px,9vw,48px);height:clamp(34px,9vw,48px);border-radius:50%;transform:translate(-50%,-50%);background:#2a2a2a;border:3px solid #f0e0c0;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;padding:0;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 3px #00000080}.level-node:hover:not(:disabled){transform:translate(-50%,-50%) scale(1.1);box-shadow:0 4px #0009,0 0 0 4px #ffffff26}.level-node:disabled,.level-node.locked{background:#1a1a1a;border-color:#555;cursor:not-allowed;opacity:.7}.level-node.done{background:#2a7d5c;border-color:#5cf}.level-node .node-num{font-size:clamp(13px,3.5vw,16px);font-weight:700}.pet-viewer{width:100%;max-width:280px;aspect-ratio:1;margin:0 auto;background:radial-gradient(circle at 50% 60%,#2a2a2a,#1a1a1a 90%);border-radius:16px;border:1px solid #333;overflow:hidden}.pet-viewer canvas{display:block;width:100%!important;height:100%!important}#room.slide-out{animation:roomSlideOut .35s ease forwards}#room.slide-in{animation:roomSlideIn .35s ease forwards}@keyframes roomSlideOut{to{transform:translate(-110%);opacity:0}}@keyframes roomSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}*{box-sizing:border-box;margin:0;padding:0}html,body{overflow-x:hidden;max-width:100%}body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:#1a1a1a;color:#f0f0f0;min-height:100vh;min-height:100dvh;display:flex;justify-content:center;padding:clamp(8px,3vw,20px);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}#app{max-width:480px;width:100%;display:flex;flex-direction:column}.view{display:none;flex-direction:column;gap:clamp(12px,3vw,20px)}.view.active{display:flex}#view-level{touch-action:none}h1{font-size:clamp(22px,6vw,28px);margin-bottom:6px;letter-spacing:1px;text-align:center}.label{font-size:clamp(10px,2.8vw,11px);text-transform:uppercase;letter-spacing:1.5px;color:#888;text-align:center}#room{position:relative;background:#222;border:clamp(5px,1.6vw,7px) solid #4a4a4a;border-radius:16px;padding:clamp(10px,3vw,16px);margin:clamp(14px,4vw,20px) clamp(14px,4vw,20px);width:auto;overflow:visible;box-shadow:0 2px #0006 inset,0 -2px #ffffff0a inset}.door{position:absolute;border:3px solid #1a1a1a;z-index:3;background:#444;display:none;box-shadow:0 0 0 1px #ffffff26}.door.active{display:block}.door-top{top:clamp(-16px,-4vw,-12px);left:50%;transform:translate(-50%);width:clamp(60px,22vw,100px);height:clamp(14px,4vw,20px);border-radius:10px 10px 4px 4px}.door-right{right:clamp(-16px,-4vw,-12px);top:50%;transform:translateY(-50%);width:clamp(14px,4vw,20px);height:clamp(60px,22vw,100px);border-radius:4px 10px 10px 4px}.door.reachable{border-color:#fff;animation:doorPulse 1.4s ease-in-out infinite}@keyframes doorPulse{0%,to{box-shadow:0 0 0 1px #ffffffd9,0 0 12px 3px #ffffff73}50%{box-shadow:0 0 0 1px #fff,0 0 22px 7px #ffffffbf}}.door.reachable:after{position:absolute;font-size:clamp(10px,2.8vw,12px);font-weight:700;color:#fff;text-shadow:0 0 4px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.95);white-space:nowrap;pointer-events:none;letter-spacing:.5px}.door-top.reachable:after{content:"↑ sortie";bottom:100%;left:50%;transform:translate(-50%);margin-bottom:6px}.door-right.reachable:after{content:"→ sortie";left:100%;top:50%;transform:translateY(-50%);margin-left:8px}#board{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,2.5vw,12px);position:relative;width:100%}.card{aspect-ratio:1;border-radius:12px;cursor:grab;border:3px solid transparent;transition:transform .15s ease,border-color .15s ease,opacity .2s ease;user-select:none;position:relative;touch-action:none;min-width:0}.card:active{cursor:grabbing}.card.dragging{opacity:.25;transform:scale(.95)}.card.locked{cursor:not-allowed;filter:grayscale(.4) brightness(.7)}.card.preview{border-color:#fff;box-shadow:0 0 0 4px #ffffff40}.card.preview:after{content:"";position:absolute;inset:0;border-radius:9px;border:2px dashed rgba(255,255,255,.5);pointer-events:none}.card.empty{visibility:hidden}.unlink-btn{position:absolute;top:4px;left:4px;width:clamp(24px,7vw,30px);height:clamp(24px,7vw,30px);border-radius:50%;background:#0009;border:1.5px solid rgba(255,255,255,.75);color:#fff;padding:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:transform .1s ease,background .15s ease;touch-action:none}.unlink-btn svg{width:100%;height:100%;display:block}.unlink-btn:hover{background:#000c}.unlink-btn:active{transform:scale(.88)}#milestones{display:flex;flex-direction:column;align-items:center;gap:6px}#milestones:empty{display:none}.milestones-row{display:flex;gap:clamp(6px,2vw,10px);flex-wrap:wrap;justify-content:center}.milestone{width:clamp(22px,6.5vw,28px);height:clamp(22px,6.5vw,28px);border-radius:50%;border:2px solid #444;position:relative;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}.milestone.validated{border-color:#5cf;box-shadow:0 0 8px #5ccfffa6;transform:scale(1.08)}.milestone.hidden{background:#2a2a2a;border-style:dashed;border-color:#555}.milestone.hidden:after{content:"?";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#888;font-weight:700;font-size:clamp(11px,3.5vw,14px);line-height:1}.milestone.validated:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-weight:700;font-size:clamp(11px,3.5vw,14px);text-shadow:0 0 3px rgba(0,0,0,.85);line-height:1}#status{text-align:center;min-height:50px}#message{font-size:clamp(14px,4vw,16px);padding:4px;line-height:1.4}#message.success{color:#5cf;font-weight:700}#message.fail{color:#f77;font-weight:700}#hint{font-size:clamp(11px,3vw,13px);color:#777;margin-top:4px}#controls{display:flex;gap:clamp(6px,2vw,12px);justify-content:center;flex-wrap:wrap}#controls button{flex:1 1 0;min-width:0;padding:clamp(10px,3vw,12px) clamp(10px,3vw,24px);font-size:clamp(13px,3.8vw,16px);border:none;border-radius:8px;background:#444;color:#fff;cursor:pointer;transition:background .15s ease;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#controls button:hover:not(:disabled){background:#555}#controls button:disabled{opacity:.4;cursor:not-allowed}#btn-next{background:#2a7d5c}#btn-next:hover:not(:disabled){background:#34a173}#ghost{position:fixed;width:clamp(56px,18vw,80px);height:clamp(56px,18vw,80px);border-radius:12px;pointer-events:none;border:3px solid #fff;transform:translate(-50%,-50%);z-index:100;display:none;box-shadow:0 8px 20px #00000080;opacity:.92}#ghost.visible{display:block}@media (max-width: 360px){.view{gap:10px}#board{gap:6px;padding:8px}#controls button{padding:10px 8px;font-size:13px}}.home-header{text-align:center;margin-bottom:4px}.score-line{font-size:clamp(12px,3.5vw,14px);color:#888;margin-top:4px}#chapter-list{display:flex;flex-direction:column;gap:8px}.chapter-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#2a2a2a;border:1.5px solid #333;border-radius:12px;color:#f0f0f0;cursor:pointer;text-align:left;width:100%;transition:background .15s ease,border-color .15s ease}.chapter-item:hover:not(:disabled){background:#333;border-color:#444}.chapter-item:disabled,.chapter-item.locked{opacity:.45;cursor:not-allowed}.chapter-item.done{border-color:#2a7d5c;background:#1f2f25}.chapter-num{width:36px;height:36px;border-radius:50%;background:#444;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.chapter-item.done .chapter-num{background:#2a7d5c}.chapter-body{flex:1;min-width:0}.chapter-title{font-size:clamp(14px,4vw,16px);font-weight:600}.chapter-subtitle{font-size:clamp(11px,3vw,12px);color:#888;margin-top:2px}.chapter-progress{font-size:clamp(10px,2.5vw,11px);color:#5cf;margin-top:4px}.chapter-status{font-size:18px;color:#aaa}.chapter-item.done .chapter-status{color:#5cf}.home-footer{display:flex;justify-content:center;margin-top:8px}.ghost-btn{padding:8px 16px;background:transparent;border:1px solid #555;color:#aaa;border-radius:8px;cursor:pointer;font-size:13px}.ghost-btn:hover{background:#2a2a2a;color:#f0f0f0}.tutorial-card{background:#2a2a2a;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:14px}.tutorial-card h2{font-size:clamp(18px,5vw,22px);letter-spacing:.5px}#tut-body{display:flex;flex-direction:column;gap:12px}#tut-body p{font-size:clamp(13px,3.8vw,15px);line-height:1.5;color:#ddd}#tut-body strong{color:#5cf;font-weight:600}.tutorial-actions{display:flex;justify-content:space-between;gap:10px;margin-top:8px}.primary-btn{flex:1;padding:12px 20px;background:#2a7d5c;color:#fff;border:none;border-radius:8px;font-size:clamp(14px,3.8vw,16px);font-weight:600;cursor:pointer}.primary-btn:hover{background:#34a173}.level-header{display:flex;align-items:center;gap:10px;text-align:left}.home-btn{padding:8px 14px;height:36px;border-radius:18px;background:#333;border:1px solid #555;color:#f0f0f0;font-size:clamp(12px,3.5vw,14px);font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;white-space:nowrap}.home-btn:hover{background:#444;border-color:#666}.level-meta{flex:1}#chapter-label{font-size:clamp(14px,4vw,16px);font-weight:600}#level-num{font-size:clamp(11px,3vw,13px);color:#888;margin-top:2px}#timer{font-variant-numeric:tabular-nums;font-weight:700;font-size:clamp(15px,4.5vw,18px);padding:6px 12px;border-radius:14px;background:#2a2a2a;border:1px solid #444;color:#f0f0f0;flex-shrink:0;min-width:56px;text-align:center}#timer.low{color:#ffb84d;border-color:#ffb84d}#timer.out{color:#f77;border-color:#f77}.tolerance-info{font-size:clamp(11px,3vw,13px);font-weight:600;margin-top:4px}.tolerance-info.positive{color:#5cf}.tolerance-info.negative{color:#f77}.side-panel{display:flex;flex-direction:row;gap:12px;justify-content:space-around;flex-wrap:wrap}#quests,#forbidden{display:flex;flex-direction:column;align-items:center;gap:6px}#quests:empty,#forbidden:empty{display:none}.quests-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.quest{display:flex;flex-direction:column;align-items:center;gap:3px;position:relative}.quest-dot{width:clamp(26px,7vw,32px);height:clamp(26px,7vw,32px);border-radius:50%;border:2px solid #444;transition:opacity .3s,border-color .3s}.quest-effect{font-size:clamp(9px,2.5vw,11px);color:#aaa;font-weight:600}.quest-points .quest-effect{color:#ffd166}.quest-tolerance .quest-effect{color:#5cf}.quest-unlock .quest-effect{color:#c9a0ff}.quest-time .quest-effect{color:#6ee7b7}.quest-reveal .quest-effect{color:#fdba74}.quest.validated .quest-dot{opacity:.35;border-color:#555}.quest.validated .quest-dot:after{content:"";position:absolute;top:50%;left:0;right:0;border-top:2px solid #f77;transform:rotate(-15deg)}.quest.validated .quest-effect{text-decoration:line-through;color:#555}.forbidden-swatch{width:clamp(36px,10vw,44px);height:clamp(36px,10vw,44px);border-radius:8px;border:2px solid #f77;position:relative}.forbidden-swatch:after{content:"✗";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:24px;color:#f77;font-weight:700;text-shadow:0 0 4px rgba(0,0,0,.9)}.badge{position:absolute;top:4px;left:4px;width:clamp(20px,6vw,26px);height:clamp(20px,6vw,26px);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(11px,3vw,14px);font-weight:700;pointer-events:none;z-index:4;background:#0000008c;color:#fff;text-shadow:0 0 3px rgba(0,0,0,.9)}.lock-badge{background:#000000bf}.alt-badge{background:#c8c800d9;color:#1a1a1a}.bonus-badge{background:#3cb464e6;color:#fff}.malus-badge{background:#dc5050e6;color:#fff}