.sim-container{position:relative;width:100%;max-width:900px;margin:auto}
.sim-canvas-wrap{position:relative;border-radius:16px;overflow:hidden;border:2px solid var(--line);background:#0a3d62;min-height:320px;height:min(62vh,520px)}
.sim-canvas{display:block;width:100%;height:100%;min-height:320px;touch-action:none}
.sim-hud{display:flex;flex-wrap:wrap;gap:12px;padding:12px;background:#0d2639;border-radius:12px;margin:10px 0;font-size:.85rem}
.sim-hud span{color:var(--muted)}.sim-hud b{color:var(--accent)}
.sim-touch{display:none;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px}
.sim-touch button{padding:18px;border-radius:14px;border:1px solid var(--line);background:#17364c;color:var(--text);font-weight:700;min-height:56px}
.sim-touch .wide{grid-column:span 3}
.sim-scenario-list{display:grid;gap:10px;margin:16px 0}
.sim-scenario-item{text-align:left;padding:14px;border-radius:14px;border:1px solid var(--line);background:#0d2639;color:var(--text)}
.sim-scenario-item:hover{border-color:var(--accent)}
.sim-canvas:focus{outline:2px solid var(--accent);outline-offset:2px}
.sim-landscape-hint{display:none;padding:10px;background:#103a46;border-radius:12px;text-align:center;margin-bottom:10px;font-size:.85rem}
@media(max-width:768px){
  .sim-touch{display:grid;position:sticky;bottom:calc(4px + var(--safe-bottom, 0px));background:linear-gradient(transparent,rgba(6,19,31,.92) 20%);padding-top:12px;z-index:5}
  .sim-landscape-hint{display:block}
}
@media(orientation:landscape) and (max-height:500px){
  .sim-canvas{height:70vh}
  .sim-landscape-hint{display:none}
}
.cardinal-demo{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:16px 0}
.cardinal-demo canvas{border-radius:12px;border:1px solid var(--line)}
.sound-btn{padding:14px 20px;border-radius:12px;border:1px solid var(--line);background:#17364c;color:var(--text);margin:4px}
.sound-btn:active{background:var(--accent);color:#042021}
.recognition-timer{font-size:2rem;font-weight:800;color:var(--accent2);text-align:center;margin:12px 0}
.recognition-visual{display:flex;justify-content:center;padding:20px;background:#0a1628;border-radius:16px;margin:12px 0}