@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@300;400;600&display=swap');
:root {
  --accent:#8b2035; --dark:#0d0d0d; --panel:#1a1a1a; --panel2:#222222;
  --border:#383838; --text:#cccccc; --muted:#787878;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{background:var(--dark);color:var(--text);font-family:'IBM Plex Sans',sans-serif;display:flex;flex-direction:column;}
header{background:var(--panel);border-bottom:2px solid var(--accent);flex-shrink:0;display:flex;flex-direction:column;}
.header-top{display:flex;align-items:center;gap:12px;padding:0 14px;height:44px;}
.header-nav{display:flex;align-items:center;gap:8px;padding:4px 14px;background:var(--panel2);border-top:1px solid var(--border);}
.header-title{flex:1;display:flex;align-items:center;gap:10px;min-width:0;}
header h1{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:3px;color:var(--accent);white-space:nowrap;}
.sub{font-family:'IBM Plex Mono',monospace;font-size:0.58rem;color:var(--muted);letter-spacing:1.2px;margin-top:1px;white-space:nowrap;}
.header-divider{width:1px;height:28px;background:var(--border);flex-shrink:0;}
.side-toggle{display:flex;flex-shrink:0;border-radius:6px;overflow:hidden;border:1px solid var(--border);}
.side-btn{background:var(--dark);border:none;color:var(--muted);font-family:'Bebas Neue',sans-serif;font-size:.9rem;letter-spacing:2px;padding:5px 18px;cursor:pointer;transition:all .18s;white-space:nowrap;}
.side-btn:not(:last-child){border-right:1px solid var(--border);}
#btnOff.active{background:#8b2035;color:#fff;letter-spacing:2px;}
#btnDef.active{background:#1e4d7a;color:#fff;letter-spacing:2px;}
.nav-controls{display:flex;gap:8px;align-items:center;flex:1;justify-content:center;}
.sel-wrap{position:relative;}
.sel-wrap::after{content:'▾';position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--accent);font-size:.65rem;pointer-events:none;}
.nav-select{background:var(--panel2);border:1px solid var(--border);color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:.65rem;letter-spacing:.6px;padding:5px 24px 5px 9px;border-radius:4px;cursor:pointer;appearance:none;-webkit-appearance:none;outline:none;transition:border-color .15s;}
.nav-select:focus,.nav-select:hover{border-color:var(--accent);}
.export-btn{background:#c0392b;color:white;border:none;border-radius:4px;padding:6px 13px;font-family:'IBM Plex Mono',monospace;font-size:0.68rem;font-weight:600;cursor:pointer;transition:background .13s;flex-shrink:0;white-space:nowrap;}
.export-btn:hover{background:#a93226;}
.main{position:relative;flex:1;overflow:hidden;}
.canvas-area{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#080c12;overflow:hidden;padding:4px;}canvas{display:block;transition:margin-left .25s ease;}
.info-panel{position:absolute;right:0;top:0;bottom:0;width:285px;background:var(--panel);border-left:1px solid var(--border);overflow-y:hidden;padding:0;display:flex;flex-direction:column;transition:transform .25s ease;z-index:5;}
.info-panel.collapsed{transform:translateX(285px);}
.panel-content{padding:12px 13px;display:flex;flex-direction:column;gap:8px;flex:1;overflow-y:hidden;}
.panel-minimize{width:100%;background:#8b2035;border:none;border-bottom:1px solid #6b1525;color:#fff;font-family:'Bebas Neue',sans-serif;font-size:.9rem;letter-spacing:2px;padding:8px 14px;cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .15s;flex-shrink:0;}
.panel-minimize:hover{background:#7a1b2d;}
.panel-tab{position:absolute;right:0;top:50%;transform:translateY(-50%);width:28px;height:72px;background:#8b2035;border:none;border-radius:8px 0 0 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Bebas Neue',sans-serif;font-size:1.3rem;font-weight:900;z-index:4;transition:background .15s;user-select:none;}
.panel-tab:hover{background:#7a1b2d;}
.info-panel:not(.collapsed) ~ .panel-tab{opacity:0;pointer-events:none;}
.info-panel.collapsed ~ .panel-tab{opacity:1;pointer-events:all;}
.play-title{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:2px;line-height:1.15;}
.play-sub{display:flex;gap:5px;margin-top:4px;flex-wrap:wrap;}
.tag{font-family:'IBM Plex Mono',monospace;font-size:.58rem;padding:2px 6px;border-radius:3px;letter-spacing:.5px;text-transform:uppercase;}
.tag-sit{background:rgba(139,32,53,.28);color:var(--accent);}
.sec-lbl{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:3px;padding-bottom:2px;border-bottom:1px solid var(--border);}
.play-goal{font-size:.78rem;color:var(--accent);font-weight:600;line-height:1.4;}
.steps{display:flex;flex-direction:column;gap:5px;}
.step{display:flex;gap:7px;align-items:flex-start;}
.step-num{font-family:'Bebas Neue',sans-serif;font-size:.95rem;color:var(--accent);line-height:1.2;min-width:13px;opacity:.7;}
.step p{font-size:.72rem;color:var(--text);line-height:1.45;}
.key-points{display:flex;flex-direction:column;gap:3px;}
.kp{font-size:.7rem;color:var(--muted);padding-left:11px;position:relative;line-height:1.4;}
.kp::before{content:'▸';position:absolute;left:0;color:var(--accent);font-size:.62rem;top:2px;}
.legend-box{background:var(--panel2);border:1px solid var(--border);border-radius:5px;padding:7px 10px;}
.legend-row{display:flex;align-items:center;gap:7px;margin-bottom:3px;font-size:.67rem;color:var(--muted);}
.legend-row:last-child{margin-bottom:0;}
.ld{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.la{width:16px;height:2px;flex-shrink:0;}

/* ── RESPONSIVE ── */
@media (max-width:767px){
  /* Header */
  .header-top{height:38px;padding:0 10px;}
  header h1{font-size:1.15rem;letter-spacing:2px;}
  .sub{display:none;}
  .header-nav{flex-wrap:wrap;gap:6px;padding:6px 10px;}
  .header-divider{display:none;}
  .side-toggle{order:0;}
  .side-btn{font-size:.8rem;padding:5px 14px;}
  .sel-wrap{flex:1;min-width:0;}
  .nav-select{width:100%;font-size:.62rem;padding:6px 22px 6px 8px;}

  /* Canvas — full width, leave room for bottom tab */
  canvas{margin-left:0 !important;transition:none !important;}

  /* Info panel — bottom sheet */
  .info-panel{
    right:0;left:0;top:auto;bottom:0;
    width:100%;height:48vh;
    border-left:none;border-top:2px solid var(--accent);
    transition:transform .25s ease;
  }
  .info-panel.collapsed{transform:translateY(100%);}
  .panel-content{overflow-y:auto;}

  /* Pull tab — bottom center */
  .panel-tab{
    right:auto;left:50%;top:auto;bottom:0;
    transform:translateX(-50%);
    width:80px;height:26px;
    border-radius:10px 10px 0 0;
    font-size:.9rem;
  }
}

@media (max-width:400px){
  header h1{font-size:1rem;}
  .side-btn{padding:5px 10px;font-size:.75rem;}
  .nav-select{font-size:.6rem;}
  .info-panel{height:52vh;}
}