/* ===== PANEL BUTTONS (above skill hud) ===== */
#panel-btns {
  position:fixed; bottom:92px; left:50%; transform:translateX(-50%);
  display:none; gap:8px; z-index:20; pointer-events:all;
}
.panel-btn {
  font-family:'Press Start 2P',monospace; font-size:7px;
  padding:7px 14px; background:rgba(0,0,0,0.88);
  border:1px solid var(--g1); color:var(--g3); cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px));
  transition:all .12s;
}
.panel-btn:hover { border-color:var(--white); color:var(--white); background:rgba(20,20,20,.95); }
.panel-btn.stats-btn { --pb-c:#ffaa00; }
.panel-btn.stats-btn:hover { border-color:var(--pb-c); color:var(--pb-c); box-shadow:0 0 10px color-mix(in srgb,var(--pb-c) 25%,transparent); }
.panel-btn.cards-btn { --pb-c:#9c27b0; }
.panel-btn.cards-btn:hover { border-color:var(--pb-c); color:var(--pb-c); box-shadow:0 0 10px color-mix(in srgb,var(--pb-c) 25%,transparent); }

/* ===== SETTINGS BUTTON ===== */
#btn-settings {
  position:fixed; top:12px; right:16px;
  font-family:'Press Start 2P',monospace; font-size:9px;
  background:rgba(0,0,0,0.85); border:1px solid var(--g1);
  color:var(--g3); padding:8px 12px; cursor:pointer;
  z-index:30; transition:all .12s; display:none;
}
#btn-settings:hover { border-color:var(--white); color:var(--white); }

/* ===== MAIN PANEL ===== */
#main-panel {
  position:fixed;
  bottom:90px; left:50%; transform:translateX(-50%);
  width:min(480px,92vw); max-height:68vh;
  background:rgba(7,7,7,0.98);
  border:2px solid var(--g1);
  z-index:35; flex-direction:column; overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  display:none;
}
#panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; border-bottom:1px solid var(--g1);
  background:rgba(0,0,0,0.6); flex-shrink:0;
}
#panel-title { font-size:9px; color:var(--white); letter-spacing:1px; }
#btn-close-panel {
  font-family:'Press Start 2P',monospace; font-size:7px;
  background:none; border:1px solid #333; color:#888;
  padding:4px 8px; cursor:pointer;
}
#btn-close-panel:hover { color:#fff; border-color:#fff; }

/* ===== STAT PANEL ===== */
#pane-stats {
  flex-direction:column; gap:0; overflow-y:auto; flex:1;
}
#sp-header {
  padding:10px 16px 6px; font-size:8px; color:var(--g3);
  display:flex; align-items:center; gap:8px; border-bottom:1px solid #1a1a1a;
}
#sp-pts { color:#ffee44; font-size:10px; }
#sp-rows { display:flex; flex-direction:column; padding:8px 10px; gap:8px; }
.sp-row {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.02); border:1px solid #1a1a1a;
  padding:8px 10px;
  clip-path:polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,4px 100%,0 calc(100% - 4px));
}
.sp-lbl { font-size:7px; width:56px; flex-shrink:0; }
.sp-bar-wrap { flex:1; height:8px; background:#111; border:1px solid #222; position:relative; }
.sp-bar { height:100%; transition:width .3s; }
.sp-lv { font-size:6px; width:44px; text-align:right; flex-shrink:0; }
.sp-gain { font-family:'Rajdhani',sans-serif; font-size:12px; color:#555; width:64px; font-weight:600; flex-shrink:0; }
.sp-btn {
  font-family:'Press Start 2P',monospace; font-size:6px;
  padding:5px 10px; background:rgba(0,0,0,0.8);
  border:1px solid var(--bc,#fff); color:var(--bc,#fff);
  cursor:pointer; flex-shrink:0; transition:all .12s;
  clip-path:polygon(0 0,calc(100% - 3px) 0,100% 3px,100% 100%,3px 100%,0 calc(100% - 3px));
}
.sp-btn:hover:not([disabled]) { background:var(--bc,#fff); color:#000; box-shadow:0 0 8px var(--bc,#fff); }
.sp-btn[disabled] { opacity:.35; cursor:not-allowed; }

/* ===== CARD PANEL ===== */
#pane-cards { flex-direction:column; flex:1; overflow:hidden; }
#mg-choose {
  flex-direction:column; align-items:center; padding:14px 16px; gap:10px; flex:1;
}
#mg-pts { font-size:8px; color:#9c27b0; }
.mg-choose-row { display:flex; gap:10px; }
.mg-game-btn {
  font-family:'Press Start 2P',monospace; font-size:7px;
  padding:10px 16px; background:rgba(0,0,0,0.85);
  border:1px solid var(--g1); color:var(--g4); cursor:pointer;
  transition:all .14s;
  clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px));
}
.mg-game-btn:hover { border-color:#9c27b0; color:#ce93d8; box-shadow:0 0 12px #9c27b033; }
.mg-sep { font-size:7px; color:#333; align-self:center; }
.mg-info-row { display:flex; gap:16px; align-items:flex-start; width:100%; }
#card-stack-wrap { position:relative; width:60px; height:70px; flex-shrink:0; }
.cs-card {
  position:absolute; width:54px; height:64px;
  background:#0a0a0a; border:1px solid #333;
  display:flex; align-items:center; justify-content:center; text-align:center;
  clip-path:polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,4px 100%,0 calc(100% - 4px));
}
#card-count { font-size:6px; color:var(--g3); margin-top:4px; text-align:center; }
.mg-note { font-family:'Rajdhani',sans-serif; font-size:13px; color:#555; text-align:center; line-height:1.7; font-weight:600; }

#mg-game {
  flex-direction:column; align-items:center; flex:1; padding:12px;
  gap:8px; position:relative;
}
#mg-prog { font-size:8px; color:var(--white); }
#mg-hint { font-size:7px; color:var(--g3); min-height:14px; }
#mg-game-area {
  flex:1; width:100%; position:relative;
  background:#050505; border:1px solid #1a1a1a;
  overflow:hidden; min-height:140px;
}
.mg-dot {
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffffff,#9c27b0);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:#fff; font-weight:700;
  box-shadow:0 0 12px #9c27b0; transform-origin:center;
  transition:none;
}
.mg-dot:hover { background:radial-gradient(circle at 35% 30%,#ffffff,#ff4dff); }
#keys-box { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; }
.key-disp {
  font-size:52px; color:#ffee44; font-family:'Press Start 2P',monospace;
  text-shadow:0 0 24px #ffee44; letter-spacing:0;
}
@keyframes keyPop { 0%{transform:scale(1.5)} 100%{transform:scale(1)} }
.key-bar-wrap { width:90%; height:8px; background:#111; border:1px solid #222; }
.key-bar { height:100%; width:100%; background:#ffee44; }

#mg-result { flex-direction:column; align-items:center; justify-content:center; padding:20px; gap:12px; flex:1; }
#mg-res-content { display:flex; flex-direction:column; align-items:center; gap:10px; }
.res-card {
  border:1px solid #333; background:#0a0a0a; padding:14px 18px;
  text-align:center; width:100%; max-width:280px;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
}
#btn-mg-retry {
  font-family:'Press Start 2P',monospace; font-size:7px;
  padding:9px 18px; background:none; border:1px solid #555; color:#888; cursor:pointer;
  transition:all .12s;
}
#btn-mg-retry:hover { border-color:#fff; color:#fff; }

/* ===== SETTINGS PANEL ===== */
#pane-settings { flex-direction:column; padding:18px; gap:10px; }
.settings-row { display:flex; flex-direction:column; gap:6px; }
.settings-label { font-size:7px; color:var(--g3); margin-bottom:2px; }
#settings-save-info { font-family:'Rajdhani',sans-serif; font-size:13px; color:#555; font-weight:600; }
.settings-btns { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.s-btn {
  font-family:'Press Start 2P',monospace; font-size:7px;
  padding:10px 16px; background:rgba(0,0,0,0.85);
  border:1px solid var(--g1); color:var(--g4); cursor:pointer;
  transition:all .12s;
  clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px));
}
.s-btn.primary { border-color:#4488cc; color:#4488cc; }
.s-btn.primary:hover { background:#4488cc22; box-shadow:0 0 12px #4488cc44; }
.s-btn.danger { border-color:#cc2222; color:#cc2222; }
.s-btn.danger:hover { background:#cc222222; }
.s-btn:hover { border-color:var(--white); color:var(--white); }

/* ===== CARD REVEAL (side fly-in) ===== */
#card-reveal {
  position:fixed; right:20px; top:50%; transform:translateY(-50%);
  width:170px; background:#070707; border:1px solid #333;
  padding:14px 16px; z-index:45; display:none; flex-direction:column; gap:6px;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
  animation:cardRevealAnim 3s ease-out forwards;
}
@keyframes cardRevealAnim {
  0%   { opacity:0; right:-200px; }
  15%  { opacity:1; right:20px; }
  75%  { opacity:1; right:20px; }
  100% { opacity:0; right:20px; }
}