/* ===== MAZE DUEL — Global Styles ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0a1a;--bg2:#12122a;--panel:#1a1a3a;
  --accent1:#d70035;--accent2:#1a1a5a;--danger:#ff0055;
  --purple:#2d1b69;--gold:#ffd700;
  --text:#e0e0ff;--text-dim:#8888aa;
  --font-title:'Orbitron',sans-serif;
  --font-body:'Noto Sans JP',sans-serif;
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-body)}
#game-container{width:100%;height:100%;position:relative}

/* ===== Screens ===== */
.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;z-index:300;pointer-events:none}
.screen.active{display:flex;pointer-events:auto}
/* Pause all animations/transitions on inactive screens to save GPU */
.screen:not(.active) *{animation-play-state:paused!important}

/* ===== Portal Choice Overlay ===== */
.portal-overlay{background:radial-gradient(circle at center, rgba(30,20,80,0.95), rgba(5,5,15,1));backdrop-filter:blur(8px);z-index:10000}
.portal-choice-content{text-align:center;padding:3rem;position:relative;animation:portalFloat 4s ease-in-out infinite}
.portal-choice-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;height:400px;border-radius:50%;border:4px dashed var(--accent1);box-shadow:0 0 50px var(--accent1), inset 0 0 30px var(--accent1);animation:portalSpin 20s linear infinite;opacity:0.3;z-index:-1}
.portal-choice-content h2{font-family:var(--font-title);font-size:2.5rem;color:var(--accent1);margin-bottom:1.5rem;text-shadow:0 0 20px rgba(255,68,68,0.5);letter-spacing:0.1em}
.portal-choice-content p{font-size:1.2rem;color:rgba(255,255,255,0.8);margin-bottom:3rem}
.portal-choice-btns{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap}
.portal-btn{padding:1.2rem 2.5rem;font-size:1.1rem;border-radius:15px;cursor:pointer!important;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);border:1px solid rgba(255,255,255,0.2);min-width:260px}
.portal-btn.hop{background:linear-gradient(135deg, var(--accent1), #00ccff);color:#050510;font-weight:bold;border:none;box-shadow:0 10px 30px rgba(0,255,136,0.3)}
.portal-btn.hop:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 15px 40px rgba(0,255,136,0.5)}
.portal-btn.stay{background:rgba(255,255,255,0.05);color:white;backdrop-filter:blur(4px)}
.portal-btn.stay:hover{background:rgba(255,255,255,0.15);transform:translateY(-3px);border-color:var(--accent1)}

@keyframes portalSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes portalFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
#title-screen{background:#050510;overflow:hidden}
.mode-selection-content{position:relative;z-index:500;width:100%;max-width:800px;text-align:center;animation:fadeInSlow 1.5s ease;pointer-events:auto!important;padding:2em}
.mode-select-title{font-family:var(--font-title);font-size:clamp(1.5rem,4vw,2.5rem);color:rgba(200,190,230,.7);margin-bottom:2em;letter-spacing:.3em;text-shadow:0 0 20px rgba(150,130,200,.3);pointer-events:none}

.mode-cards{display:flex;gap:2em;margin-bottom:3em;justify-content:center;flex-wrap:wrap;pointer-events:auto!important}
.mode-card{background:linear-gradient(135deg,rgba(30,25,50,0.6),rgba(15,12,30,0.8));border:1px solid rgba(150,130,200,0.3);border-radius:20px;padding:2.5em 2em;width:300px;cursor:pointer!important;transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);position:relative;overflow:hidden;pointer-events:auto!important;z-index:9999}
.mode-card:hover{transform:translateY(-10px) scale(1.02);border-color:var(--accent1);box-shadow:0 15px 40px rgba(0,0,0,0.6), 0 0 20px rgba(255,68,68,0.15)}
.mode-card-icon{font-size:3.5rem;margin-bottom:1rem;filter:drop-shadow(0 0 15px rgba(255,255,255,0.1))}
.mode-card h3{font-family:var(--font-title);font-size:1.4rem;color:var(--text);margin-bottom:0.8rem;letter-spacing:0.1em}
.mode-card p{font-size:0.9rem;color:var(--text-dim);line-height:1.5}

#btn-mode-item{border-color:rgba(255,107,53,0.3)}
#btn-mode-item:hover{border-color:var(--accent2);box-shadow:0 15px 40px rgba(0,0,0,0.6), 0 0 20px rgba(68,68,255,0.15)}
#btn-mode-item h3{color:var(--accent2)}
#btn-mode-normal h3{color:var(--accent1)}

.selection-footer{margin-top:2em}
.aux-buttons{display:flex;gap:1em;justify-content:center;flex-wrap:wrap}
.aux-btn{background:transparent;border:1px solid rgba(150,130,200,0.2);color:rgba(200,190,230,0.6);padding:0.6em 1.2em;border-radius:30px;font-size:0.9rem;cursor:pointer;transition:all 0.3s ease}
.aux-btn:hover{background:rgba(150,130,200,0.1);color:#fff;border-color:rgba(150,130,200,0.5)}

/* Fog layers */
.title-bg-effects{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fog-layer{position:absolute;inset:-50%;width:200%;height:200%;
  background:radial-gradient(ellipse at 50% 50%,rgba(60,50,100,.15) 0%,transparent 60%);
  animation:fogDrift 20s linear infinite;opacity:.6}
.fog-1{animation-duration:25s;animation-direction:normal}
.fog-2{animation-duration:18s;animation-direction:reverse;opacity:.4;
  background:radial-gradient(ellipse at 30% 60%,rgba(40,60,100,.12) 0%,transparent 50%)}
@keyframes fogDrift{0%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(5%,3%) rotate(2deg)}100%{transform:translate(0,0) rotate(0deg)}}

/* Floating orbs (mystery lights) */
.floating-orb{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);
  background:var(--color);border-radius:50%;
  box-shadow:0 0 15px var(--color),0 0 40px var(--color);
  animation:orbFloat 8s ease-in-out var(--delay) infinite}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1);opacity:.3}
  25%{transform:translate(15px,-25px) scale(1.4);opacity:.6}
  50%{transform:translate(-10px,-40px) scale(1);opacity:.2}
  75%{transform:translate(20px,-15px) scale(1.3);opacity:.5}}

/* Vignette */
.title-vignette{position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(0,0,0,.7) 100%);pointer-events:none}

/* Mystery buttons */
.mystery-btn{border-color:rgba(150,130,200,.3)!important;
  background:linear-gradient(135deg,rgba(30,25,50,.7),rgba(15,12,30,.9))!important;
  color:rgba(200,190,230,.8)!important;letter-spacing:.1em}
.mystery-btn:hover{border-color:rgba(200,180,255,.5)!important;color:#fff!important;
  box-shadow:0 0 25px rgba(150,130,200,.2),0 8px 30px rgba(0,0,0,.5)!important;
  text-shadow:0 0 10px rgba(200,180,255,.4)}
.primary-btn.mystery-btn{border-color:rgba(200,180,255,.4)!important}

@keyframes fadeInSlow{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* ===== Buttons ===== */
.menu-btn{display:block;width:280px;margin:.5em auto;padding:.9em 1.5em;border:2px solid var(--purple);border-radius:12px;
  background:linear-gradient(135deg,rgba(45,27,105,.5),rgba(26,26,58,.8));color:var(--text);
  font-family:var(--font-body);font-size:1rem;font-weight:700;cursor:pointer;
  transition:all .25s ease;letter-spacing:.05em;position:relative;overflow:hidden;
  pointer-events:auto!important;z-index:10}
.menu-btn:hover{border-color:var(--accent1);color:#fff;transform:translateY(-2px);
  box-shadow:0 0 20px rgba(0,255,136,.2),0 8px 25px rgba(0,0,0,.4)}
.menu-btn:active{transform:translateY(0)}
.primary-btn{border-color:var(--accent1);background:linear-gradient(135deg,rgba(0,255,136,.15),rgba(45,27,105,.6))}
.primary-btn:hover{background:linear-gradient(135deg,rgba(0,255,136,.3),rgba(45,27,105,.8));box-shadow:0 0 30px rgba(0,255,136,.4)}
.btn-icon{margin-right:.3em}
.menu-btn.small{width:auto;display:inline-block;padding:.6em 1.5em;font-size:.9rem}

/* ===== Panel ===== */
.panel{background:var(--panel);border:1px solid var(--purple);border-radius:16px;padding:2em;max-width:500px;width:90%;text-align:center}
.panel h2{font-family:var(--font-title);font-size:1.5rem;margin-bottom:1em;color:var(--gold)}

/* ===== Rules ===== */
.rules-content{text-align:left;margin-bottom:1.5em}
.rule-item{display:flex;align-items:flex-start;gap:.8em;margin-bottom:.7em;padding:.5em;border-radius:8px;background:rgba(255,255,255,.03)}
.rule-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--purple);color:var(--accent1);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.rule-item p{font-size:.9rem;line-height:1.5}

/* ===== Item Collection ===== */
.items-panel {
  max-width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.items-list {
  text-align: left;
  margin-bottom: 1.5em;
  overflow-y: auto;
  padding-right: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
/* Custom Scrollbar for items list */
.items-list::-webkit-scrollbar { width: 6px; }
.items-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 3px; }
.items-list::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 3px; }

.item-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(136, 85, 204, 0.2);
  border-radius: 12px;
  transition: all 0.3s ease;
}
.item-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent1);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.item-card-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
}
.item-card-content {
  flex-grow: 1;
}
.item-card-name {
  font-family: var(--font-title);
  font-size: 0.95rem;
  color: var(--accent1);
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}
.item-card-desc {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.4;
}

/* ===== Design Phase ===== */
#design-screen{background:var(--bg)}
.design-header{display:flex;justify-content:space-between;align-items:center;width:540px;max-width:95vw;margin-bottom:.8em;
  padding:.6em 1em;background:var(--panel);border-radius:10px;border:1px solid var(--purple)}
.design-player-label{color:var(--accent1);font-weight:700;font-size:1.1rem}
.design-timer{color:var(--gold);font-family:var(--font-title);font-size:1.2rem}
.design-wall-count{color:var(--text-dim);font-size:.95rem}
#design-canvas{border:2px solid var(--purple);border-radius:8px;cursor:pointer;max-width:95vw;background:#0d0d25}
.design-info{margin-top:.5em;color:var(--text-dim);font-size:.85rem}
.design-buttons{margin-top:1em;display:flex;gap:1em;justify-content:center}

/* ===== Entrance/Exit Selection ===== */
#entrance-exit-screen{background:var(--bg)}
.ee-header{text-align:center;margin-bottom:.8em;width:540px;max-width:95vw;
  padding:.8em 1em;background:var(--panel);border-radius:10px;border:1px solid var(--purple)}
.ee-title{font-family:var(--font-title);font-size:1.3rem;color:var(--gold);margin-bottom:.4em}
.ee-instruction{font-size:1rem;color:var(--accent1);font-weight:700;transition:color .3s}
.ee-instruction.placing-exit{color:var(--danger)}
.ee-instruction.complete{color:var(--gold)}
.ee-title-player{font-weight:900;transition:color .3s}
.ee-sub-info{font-size:.85rem;color:var(--text-dim);margin-top:.2em;font-style:italic}
.ee-sub-info span{font-weight:700;color:var(--text)}
#ee-canvas{border:2px solid var(--purple);border-radius:8px;cursor:pointer;max-width:95vw;background:#0d0d25;
  transition:border-color .3s}
#ee-canvas:hover{border-color:rgba(136,85,204,.7)}
.ee-info{margin-top:.5em;color:var(--text-dim);font-size:.85rem;text-align:center;max-width:540px}
.ee-buttons{margin-top:1em;display:flex;gap:1em;justify-content:center}
.ee-buttons .menu-btn[disabled]{opacity:.35;pointer-events:none}

/* ===== First Player Reveal ===== */
#first-player-screen{background:radial-gradient(ellipse at 50% 50%,#1a1040,var(--bg))}
.reveal-content{text-align:center;animation:fadeInUp .6s ease}
.reveal-label{font-size:1.3rem;color:var(--text-dim);margin-bottom:.5em}
.reveal-player{font-family:var(--font-title);font-size:clamp(2rem,5vw,3.5rem);font-weight:900;
  color:var(--accent1);margin-bottom:1em;animation:revealPulse 1.5s ease infinite}
@keyframes revealPulse{0%,100%{text-shadow:0 0 20px rgba(255,68,68,0.3)}50%{text-shadow:0 0 40px rgba(255,68,68,0.7)}}

.start-rule-badge {
  display: inline-block;
  font-family: var(--font-title);
  font-size: 1.1rem;
  color: var(--gold);
  margin-bottom: 2.5em;
  padding: 0.8em 2em;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(45, 27, 105, 0.4));
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 50px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(255, 215, 0, 0.1);
  animation: startRuleIn 0.8s cubic-bezier(0.17, 0.67, 0.45, 1.2) both;
  letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}
@keyframes startRuleIn {
  from { opacity: 0; transform: translateY(-30px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Play Phase ===== */
#play-screen{background:#000}
#three-container{width:100%;height:100%;position:fixed;top:0;left:0;z-index:-1;background:var(--bg);pointer-events:none}
.play-hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:.5em 1em;background:linear-gradient(180deg,rgba(0,0,0,.8),transparent);z-index:10;pointer-events:none}
.hud-player{font-family:var(--font-title);font-size:1.1rem;font-weight:700}
.hud-timer{font-family:var(--font-title);font-size:1.3rem;color:var(--gold)}
.hud-steps,.hud-misses{font-size:.9rem;color:var(--text-dim)}
.hud-observing{font-size:1rem;color:var(--accent2);font-weight:700;animation:observePulse 2s ease infinite}
@keyframes observePulse{0%,100%{opacity:.6}50%{opacity:1}}
.play-controls{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:2em;
  padding:.7em;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);z-index:10;
  color:var(--text-dim);font-size:.85rem;pointer-events:none}

/* Minimap */
#minimap-container{position:absolute;bottom:60px;left:15px;z-index:10;
  background:rgba(10,10,26,.85);border:1px solid var(--purple);border-radius:8px;padding:4px}
#minimap-canvas{display:block;border-radius:4px}

/* Overlays */
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.75);z-index:20;animation:fadeIn .3s ease}
.overlay-content{text-align:center;font-family:var(--font-title);animation:fadeInUp .4s ease}
.overlay-content>div:first-child{font-size:2.5rem;margin-bottom:.3em}
.overlay-content>div:nth-child(2){font-size:1.3rem;color:var(--text-dim);margin-bottom:.3em}
.overlay-content>div:nth-child(3){font-size:1.1rem;color:var(--accent1)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ===== Turn Change Overlay ===== */
.turn-change-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.85);animation:turnOverlayIn .4s ease;overflow:hidden}
@keyframes turnOverlayIn{0%{opacity:0}100%{opacity:1}}

.turn-change-stripe{position:absolute;inset:0;opacity:.15;
  background:linear-gradient(135deg,transparent 30%,var(--stripe-color,#00ff88) 50%,transparent 70%);
  animation:stripeSlide .6s ease-out forwards}
@keyframes stripeSlide{0%{transform:translateX(-100%) skewX(-15deg)}100%{transform:translateX(0) skewX(0deg)}}

.turn-change-content{text-align:center;z-index:2;animation:turnContentIn .5s cubic-bezier(.17,.67,.45,1.2) forwards}
@keyframes turnContentIn{0%{opacity:0;transform:scale(.7) translateY(20px)}100%{opacity:1;transform:scale(1) translateY(0)}}

.turn-change-reason{font-size:1.3rem;margin-bottom:.6em;color:var(--text-dim);font-family:var(--font-body);
  animation:reasonSlide .4s ease .1s both}
@keyframes reasonSlide{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}

.turn-change-icon{font-size:3rem;margin-bottom:.2em;animation:turnIconPop .5s ease .2s both}
@keyframes turnIconPop{0%{opacity:0;transform:scale(0) rotate(-180deg)}60%{transform:scale(1.2) rotate(10deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

.turn-change-label{font-family:var(--font-title);font-size:.9rem;letter-spacing:.3em;
  color:var(--text-dim);margin-bottom:.3em;text-transform:uppercase}

.turn-change-player{font-family:var(--font-title);font-size:clamp(2rem,6vw,3.5rem);font-weight:900;
  margin-bottom:.3em;animation:playerNameIn .5s ease .25s both;
  text-shadow:0 0 30px var(--player-glow,rgba(0,255,136,.5)),0 0 60px var(--player-glow,rgba(0,255,136,.3))}
@keyframes playerNameIn{0%{opacity:0;transform:translateX(-30px)}100%{opacity:1;transform:translateX(0)}}

.turn-change-player.p1{color:var(--accent1);--player-glow:rgba(215,0,53,.5)}
.turn-change-player.p2{color:var(--accent2);--player-glow:rgba(26,26,90,.5)}

.turn-change-sub{font-size:1rem;color:var(--text-dim);font-family:var(--font-body);
  animation:subFadeIn .4s ease .4s both}
@keyframes subFadeIn{0%{opacity:0}100%{opacity:.7}}

.turn-change-overlay.p1-turn{--stripe-color:#d70035}
.turn-change-overlay.p2-turn{--stripe-color:#1a1a5a}

/* ===== Battle Screen ===== */
#battle-screen{background:radial-gradient(ellipse at 50% 40%,#2a1050,var(--bg))}
.battle-container{text-align:center;width:90%;max-width:500px}
.battle-title{font-family:var(--font-title);font-size:2rem;color:var(--danger);margin-bottom:.5em;
  animation:battlePulse 1s ease infinite}
@keyframes battlePulse{0%,100%{text-shadow:0 0 15px rgba(255,0,85,.4)}50%{text-shadow:0 0 35px rgba(255,0,85,.8)}}
.battle-game-label{font-size:1.2rem;color:var(--gold);margin-bottom:1.5em}
.battle-arena{min-height:200px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1em}

/* Battle - Dice */
.dice-container{display:flex;gap:3em;align-items:center;justify-content:center}
.dice-player{text-align:center}
.dice-player-label{font-size:.9rem;color:var(--text-dim);margin-bottom:.5em}
.dice-value{font-size:4rem;width:100px;height:100px;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:2px solid var(--purple);border-radius:16px;margin:0 auto}
.dice-value.rolling{animation:diceRoll .1s linear infinite}
@keyframes diceRoll{0%{transform:rotate(0)}25%{transform:rotate(5deg)}75%{transform:rotate(-5deg)}100%{transform:rotate(0)}}

/* Battle - Reflex */
.reflex-signal{width:150px;height:150px;border-radius:50%;background:#333;margin:0 auto 1em;
  display:flex;align-items:center;justify-content:center;font-size:3rem;
  border:4px solid var(--purple);transition:all .15s}
.reflex-signal.go{background:var(--accent1);border-color:var(--accent1);box-shadow:0 0 40px var(--accent1)}
.reflex-signal.early{background:var(--danger);border-color:var(--danger)}
.reflex-instruction{font-size:1rem;color:var(--text-dim)}
.reflex-times{display:flex;gap:3em;justify-content:center;margin-top:1em}
.reflex-time{text-align:center}
.reflex-time-label{color:var(--text-dim);font-size:.85rem}
.reflex-time-value{font-family:var(--font-title);font-size:1.5rem;color:var(--gold)}

/* Battle - RPS */
.rps-container{display:flex;gap:2em;justify-content:center;flex-wrap:wrap}
.rps-choice{font-size:3rem;width:80px;height:80px;border:2px solid var(--purple);border-radius:16px;
  background:var(--panel);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s}
.rps-choice:hover{border-color:var(--accent1);transform:scale(1.1);box-shadow:0 0 15px rgba(0,255,136,.3)}
.rps-choice.selected{border-color:var(--gold);background:rgba(255,215,0,.15)}
.rps-vs{display:flex;gap:2em;align-items:center;justify-content:center;margin-top:1em}
.rps-show{font-size:4rem;animation:fadeInUp .3s ease}

/* Battle Result */
.battle-result{font-family:var(--font-title);font-size:1.5rem;margin-top:1em;padding:1em;
  border-radius:12px;background:var(--panel);border:1px solid var(--purple)}

/* ===== Result Screen ===== */
#result-screen{background:radial-gradient(ellipse at 50% 30%,#1a1040,var(--bg))}
.result-content{text-align:center;animation:fadeInUp .6s ease}
.result-title{font-family:var(--font-title);font-size:clamp(1.5rem,4vw,2.5rem);margin-bottom:1em;
  background:linear-gradient(135deg,var(--gold),var(--accent1));
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.result-stats{margin-bottom:2em;font-size:.95rem;color:var(--text-dim);line-height:2}

/* ===== Timer Warning ===== */
.timer-warning{color:var(--danger)!important;animation:timerBlink .5s ease infinite}
@keyframes timerBlink{0%,100%{opacity:1}50%{opacity:.4}}

/* ===== P1/P2 Colors ===== */
.p1-color{color:var(--accent1)!important}
.p2-color{color:var(--accent2)!important}

/* ===== Encounter Flash ===== */
.encounter-flash{position:absolute;inset:0;z-index:50;pointer-events:none;opacity:0}
.encounter-flash.active{animation:encounterFlash .8s ease-out forwards}
@keyframes encounterFlash{
  0%{opacity:1;background:rgba(255,255,255,1)}
  15%{opacity:1;background:rgba(255,60,60,.9)}
  30%{opacity:.8;background:rgba(255,0,85,.6)}
  50%{opacity:.5;background:rgba(200,0,100,.3)}
  100%{opacity:0;background:transparent}
}

/* Screen shake for encounter */
.screen-shake{animation:screenShake .5s ease-out}
@keyframes screenShake{
  0%{transform:translate(0,0)}
  10%{transform:translate(-8px,4px)}
  20%{transform:translate(6px,-6px)}
  30%{transform:translate(-4px,8px)}
  40%{transform:translate(8px,-2px)}
  50%{transform:translate(-6px,-4px)}
  60%{transform:translate(4px,6px)}
  70%{transform:translate(-2px,-8px)}
  80%{transform:translate(6px,2px)}
  90%{transform:translate(-4px,4px)}
  100%{transform:translate(0,0)}
}

/* ===== Battle Background Effects ===== */
.battle-bg-effects{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.battle-lightning{position:absolute;width:3px;height:0;background:linear-gradient(180deg,transparent,rgba(140,120,255,.8),rgba(200,180,255,.95),rgba(140,120,255,.6),transparent);
  opacity:0;filter:blur(1px)}
.battle-lightning.l1{left:20%;top:0;animation:lightningStrike 4s ease-in-out 1s infinite}
.battle-lightning.l2{right:25%;top:0;animation:lightningStrike 4s ease-in-out 2.8s infinite}
@keyframes lightningStrike{
  0%,90%,100%{opacity:0;height:0}
  92%{opacity:1;height:60vh;filter:blur(1px)}
  93%{opacity:0;height:60vh}
  95%{opacity:.8;height:75vh;filter:blur(2px);width:5px}
  97%{opacity:0;height:75vh}
}

.battle-spark-field{position:absolute;inset:0}
.battle-spark{position:absolute;width:4px;height:4px;border-radius:50%;pointer-events:none;
  animation:sparkFly 1s ease-out forwards}
@keyframes sparkFly{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(0)}
}

/* ===== Battle Title Animation ===== */
.battle-title.encounter-zoom{animation:encounterZoom 1s cubic-bezier(.17,.67,.45,1.4) forwards}
@keyframes encounterZoom{
  0%{transform:scale(3);opacity:0;filter:blur(10px)}
  50%{transform:scale(1.2);opacity:1;filter:blur(0)}
  70%{transform:scale(.95)}
  100%{transform:scale(1);opacity:1}
}

/* ===== Slot Machine ===== */
.slot-machine{margin:1.5em auto;perspective:600px;max-width:400px}
.slot-label{font-family:var(--font-title);font-size:1.1rem;color:var(--gold);margin-bottom:.8em;letter-spacing:.15em;
  text-shadow:0 0 12px rgba(255,215,0,.3)}

.slot-frame{display:flex;gap:8px;justify-content:center;align-items:center;padding:16px 20px;
  background:linear-gradient(145deg,#1a1040,#0e0825);
  border:2px solid rgba(140,100,220,.5);border-radius:16px;position:relative;
  box-shadow:0 0 30px rgba(100,60,200,.2),inset 0 0 30px rgba(0,0,0,.5)}
.slot-frame::before{content:'';position:absolute;inset:-3px;border-radius:18px;
  background:linear-gradient(135deg,rgba(255,215,0,.3),rgba(140,100,220,.3),rgba(0,255,136,.2));
  z-index:-1;filter:blur(3px)}

.slot-reel-window{width:90px;height:90px;overflow:hidden;position:relative;
  background:linear-gradient(180deg,#0a0618,#151030,#0a0618);
  border-radius:10px;border:2px solid rgba(100,80,180,.4);
  box-shadow:inset 0 5px 15px rgba(0,0,0,.6),inset 0 -5px 15px rgba(0,0,0,.4)}
.slot-reel-window::before,.slot-reel-window::after{content:'';position:absolute;left:0;right:0;height:25px;z-index:2;pointer-events:none}
.slot-reel-window::before{top:0;background:linear-gradient(180deg,rgba(10,6,24,.9),transparent)}
.slot-reel-window::after{bottom:0;background:linear-gradient(0deg,rgba(10,6,24,.9),transparent)}

.slot-reel{display:flex;flex-direction:column;transition:transform .1s linear;will-change:transform}
.slot-reel.spinning{transition:none}
.slot-reel.stopping{transition:transform .6s cubic-bezier(.3,1,.5,1)}

.slot-item{width:90px;height:90px;display:flex;align-items:center;justify-content:center;
  font-size:3rem;flex-shrink:0;
  text-shadow:0 0 15px rgba(255,255,255,.3)}

.slot-highlight-bar{position:absolute;left:8px;right:8px;top:50%;transform:translateY(-50%);
  height:92px;border:2px solid rgba(255,215,0,.4);border-radius:10px;
  box-shadow:0 0 15px rgba(255,215,0,.15),inset 0 0 15px rgba(255,215,0,.05);
  pointer-events:none;z-index:3;opacity:.6;transition:opacity .3s}
.slot-highlight-bar.active{opacity:1;border-color:rgba(255,215,0,.8);
  box-shadow:0 0 25px rgba(255,215,0,.4),inset 0 0 20px rgba(255,215,0,.1);
  animation:highlightPulse .6s ease infinite}
@keyframes highlightPulse{0%,100%{box-shadow:0 0 25px rgba(255,215,0,.4)}50%{box-shadow:0 0 40px rgba(255,215,0,.6)}}

.slot-game-names{display:flex;justify-content:space-around;margin-top:.8em;font-size:.8rem;color:var(--text-dim);letter-spacing:.05em}

/* Slot decided state */
.slot-decided .slot-reel-window{border-color:rgba(255,215,0,.6);
  box-shadow:inset 0 0 20px rgba(255,215,0,.15)}
.slot-decided .slot-item{animation:slotItemGlow .8s ease infinite}
@keyframes slotItemGlow{0%,100%{text-shadow:0 0 15px rgba(255,255,255,.3)}50%{text-shadow:0 0 30px rgba(255,215,0,.8),0 0 60px rgba(255,215,0,.3)}}

/* Slot machine hide (after game chosen) */
.slot-machine.hidden{animation:slotSlideUp .5s ease forwards}
@keyframes slotSlideUp{
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-40px) scale(.9);pointer-events:none}
}

/* ===== Battle Result Enhanced ===== */
.battle-result.winner-display{animation:winnerReveal .6s cubic-bezier(.17,.67,.45,1.4) forwards;
  border-color:var(--gold)!important;
  background:linear-gradient(135deg,rgba(255,215,0,.1),var(--panel))!important;
  box-shadow:0 0 30px rgba(255,215,0,.2)}
@keyframes winnerReveal{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}

.battle-result.draw-display{animation:drawReveal .5s ease forwards;
  border-color:var(--purple)!important;background:var(--panel)!important}
@keyframes drawReveal{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}

/* ===== Item Mode Toggle ===== */
.item-mode-toggle{display:flex;align-items:center;gap:.6em;margin-top:1.2em;
  padding:.6em 1em;border-radius:8px;background:rgba(255,255,255,.05);cursor:pointer;
  transition:background .2s}
.item-mode-toggle:hover{background:rgba(255,255,255,.1)}
.toggle-label{color:var(--text);font-size:.9rem}
.toggle-switch{width:44px;height:24px;border-radius:12px;background:rgba(255,255,255,.15);
  position:relative;transition:background .3s}
.toggle-switch.active{background:var(--accent1)}
.toggle-knob{width:20px;height:20px;border-radius:50%;background:#fff;
  position:absolute;top:2px;left:2px;transition:transform .3s;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.toggle-switch.active .toggle-knob{transform:translateX(20px)}
.toggle-state{font-size:.85rem;font-weight:700;color:var(--text-dim);min-width:2em}
.toggle-switch.active ~ .toggle-state{color:var(--accent1)}

/* ===== Item Inventory ===== */
.item-inventory{position:absolute;bottom:200px;left:15px;z-index:10;
  background:rgba(10,10,26,.85);border:1px solid var(--purple);border-radius:10px;
  padding:6px 10px;backdrop-filter:blur(4px)}
.inv-title{font-size:.7rem;color:var(--gold);text-align:center;margin-bottom:4px}
.inv-slots{display:flex;gap:6px}
.inv-slot{width:48px;height:48px;border:2px solid rgba(136,85,204,.4);border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  position:relative;background:rgba(45,27,105,.3);transition:all .2s;cursor:default}
.inv-slot.empty{opacity:.4}
.inv-slot:not(.empty){border-color:var(--gold);box-shadow:0 0 8px rgba(255,215,0,.2)}
.inv-slot:not(.empty):hover{transform:scale(1.1);box-shadow:0 0 14px rgba(255,215,0,.4)}
.inv-key{position:absolute;bottom:2px;right:4px;font-size:.55rem;color:var(--text-dim);
  font-family:var(--font-body)}
.inv-slot:not(.empty) .inv-key{color:var(--gold)}

/* ===== Item Notification ===== */
.item-notify{position:fixed;top:20%;left:50%;transform:translateX(-50%);z-index:50;
  background:rgba(10,10,26,.92);border:2px solid var(--gold);border-radius:12px;
  padding:.8em 1.5em;display:flex;align-items:center;gap:.6em;
  animation:itemNotifyIn .4s ease,itemNotifyOut .4s ease 1.6s forwards;
  box-shadow:0 0 20px rgba(255,215,0,.3)}
.item-notify-icon{font-size:2rem}
.item-notify-text{font-size:1rem;color:var(--text);font-weight:700}
@keyframes itemNotifyIn{0%{opacity:0;transform:translateX(-50%) translateY(-20px) scale(.8)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes itemNotifyOut{0%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-10px)}}

/* ===== Pause / Settings Menu ===== */
.pause-overlay{position:absolute;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.7);backdrop-filter:blur(6px);animation:fadeIn .2s ease}
.pause-panel{background:linear-gradient(135deg,rgba(26,26,58,.95),rgba(18,18,42,.95));
  border:1px solid var(--purple);border-radius:16px;padding:2em 2.5em;min-width:320px;max-width:90vw;
  box-shadow:0 0 40px rgba(45,27,105,.4),0 8px 32px rgba(0,0,0,.5);
  animation:pauseSlideIn .3s ease}
@keyframes pauseSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}100%{opacity:1;transform:translateY(0) scale(1)}}
.pause-title{font-family:var(--font-title);font-size:1.5rem;color:var(--gold);text-align:center;
  margin-bottom:1.5em;text-shadow:0 0 10px rgba(255,215,0,.3)}
.pause-section{margin-bottom:1.2em}
.pause-label{display:block;font-size:.9rem;color:var(--text);margin-bottom:.4em}
.pause-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;
  background:rgba(255,255,255,.12);outline:none;cursor:pointer}
.pause-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--gold);cursor:pointer;box-shadow:0 0 6px rgba(255,215,0,.4)}
.pause-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:none;
  background:var(--gold);cursor:pointer}
.pause-vol-val{display:inline-block;margin-left:.5em;font-size:.85rem;color:var(--text-dim);
  font-family:var(--font-title);min-width:3em}
.pause-buttons{display:flex;flex-direction:column;gap:.7em;margin-top:1.5em}
.pause-buttons .menu-btn{width:100%;text-align:center;font-size:1rem;padding:.65em 1em}
.pause-hint{text-align:center;margin-top:1em;color:var(--text-dim);font-size:.75rem}
.pause-toggle-section{display:flex;align-items:center;justify-content:space-between}
.pause-toggle-row{display:flex;align-items:center;gap:.5em}
.pause-toggle-row .toggle-state{font-size:.85rem;font-weight:700;color:var(--text-dim);min-width:2em}
.pause-toggle-row .toggle-state.active{color:var(--accent1)}

/* ===== Tutorial Assist ===== */
.tutorial-assist{position:absolute;bottom:25px;right:25px;z-index:250;
  display:flex;align-items:center;gap:.6em;padding:.6em 1.2em;
  background:linear-gradient(135deg,rgba(10,10,30,.88),rgba(20,15,45,.92));
  border:1px solid rgba(136,85,204,.5);border-radius:12px;
  box-shadow:0 0 20px rgba(100,60,200,.2),0 4px 16px rgba(0,0,0,.5);
  backdrop-filter:blur(6px);pointer-events:none;
  z-index:800;
  animation:tutorialFadeIn .5s ease;
  max-width:350px;transition:opacity .3s ease,transform .3s ease}
.tutorial-assist.hidden{opacity:0;transform:translateY(10px);pointer-events:none}
.tutorial-icon{font-size:1.3rem;flex-shrink:0;animation:tutorialPulse 2s ease-in-out infinite}
.tutorial-text{font-size:.85rem;color:var(--text);line-height:1.4;letter-spacing:.02em}
.tutorial-text kbd{display:inline-block;padding:.1em .4em;margin:0 .15em;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:4px;font-family:var(--font-title);font-size:.8em;color:var(--gold);
  box-shadow:0 1px 2px rgba(0,0,0,.3)}
@keyframes tutorialFadeIn{0%{opacity:0;transform:translateY(15px)}100%{opacity:1;transform:translateY(0)}}
@keyframes tutorialPulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
/* ===== Item Effects ===== */
.item-effect-overlay {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1000; opacity: 0; transition: opacity 0.3s;
  display: flex; align-items: center; justify-content: center;
}
.item-effect-overlay::before {
  content: attr(data-icon);
  font-size: 8rem;
  filter: drop-shadow(0 0 20px rgba(255,255,255,0.5));
  opacity: 0;
  line-height: 1;
}

/* Map Effect: Golden pulse and radar lines */
.effect-map {
  background: radial-gradient(circle, rgba(255,215,0,0.2) 0%, transparent 70%);
  animation: mapEffectActive 1.5s ease-out infinite;
}
.effect-map::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(255,215,0,0.15) 42px, transparent 44px);
  animation: scanMove 3s linear infinite;
}
@keyframes mapEffectActive {
  0% { opacity: 0; background-size: 50% 50%; }
  50% { opacity: 1; background-size: 150% 150%; }
  100% { opacity: 0; background-size: 200% 200%; }
}
@keyframes scanMove {
  from { transform: translateY(-100%); }
  to { transform: translateY(100%); }
}

/* Time Effect: Golden distort and clock flash */
.effect-time {
  background: rgba(255,215,0,0.1);
  backdrop-filter: contrast(110%) saturate(130%) brightness(120%);
  animation: timeDistort 0.8s ease-in-out forwards;
}
.effect-time::before { animation: timeMotion 0.8s ease-in-out forwards; }
@keyframes timeMotion {
  0% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  20% { opacity: 1; transform: scale(1.5) rotate(360deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(720deg); }
  100% { opacity: 0; transform: scale(2) rotate(1080deg); }
}

/* Shield Effect: Blue crystalline pulse */
.effect-shield {
  background: radial-gradient(circle, rgba(0,200,255,0.1) 0%, rgba(0,255,255,0.2) 100%);
  box-shadow: inset 0 0 80px rgba(0,255,255,0.5);
  animation: shieldPulse 1s ease-in-out infinite;
}
.effect-shield::before { animation: shieldMotion 0.8s ease-out forwards; }
@keyframes shieldPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}
@keyframes shieldMotion {
  0% { opacity: 0; transform: scale(0.2); }
  50% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Vampire Effect: Dark red bats and blood vignette */
.effect-vampire {
  background: radial-gradient(circle, transparent 30%, rgba(100,0,0,0.8) 100%);
  animation: vampireVignette 1s ease-in-out forwards;
}
.effect-vampire::before { animation: vampireMotion 1s ease-in-out forwards; }
@keyframes vampireVignette {
  0% { opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes vampireMotion {
  0% { opacity: 0; transform: translateY(100px) scale(0); }
  30% { opacity: 1; transform: translateY(0) scale(1.2); }
  100% { opacity: 0; transform: translateY(-100px) scale(2); }
}

/* Ghost Effect: Purple hazy border and orbs */
.effect-ghost {
  box-shadow: inset 0 0 100px rgba(136,85,204,0.6);
  background: radial-gradient(circle, transparent 20%, rgba(136,85,204,0.1) 100%);
  animation: ghostHaze 2s ease-in-out forwards;
}
.effect-ghost::before { animation: ghostMotion 2s ease-in-out forwards; }
@keyframes ghostMotion {
  0% { opacity: 0; transform: translateY(50px) scale(0.8); filter: blur(5px); }
  20% { opacity: 0.6; transform: translateY(0) scale(1.1); filter: blur(2px); }
  50% { opacity: 0.4; transform: translateY(-20px) scale(1); filter: blur(3px); }
  80% { opacity: 0.6; transform: translateY(-40px) scale(1.2); filter: blur(1px); }
  100% { opacity: 0; transform: translateY(-100px) scale(1.5); filter: blur(10px); }
}

/* Trap Effect: Red warning flash */
.effect-trap {
  background: rgba(255,0,85,0.05);
  border: 10px solid rgba(255,0,85,0.2);
  animation: trapSetFlash 0.5s ease-out forwards;
}
.effect-trap::before { animation: trapMotion 0.5s ease-out forwards; }
@keyframes trapMotion {
  0% { opacity: 0; transform: translateY(-200px) scale(2); }
  30% { opacity: 1; transform: translateY(0) scale(1); }
  50% { transform: scale(1.2, 0.8); }
  70% { transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Breaker Effect: Impact splash (shake handled in JS) */
.effect-breaker {
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 60%);
  animation: breakerImpact 0.4s ease-out forwards;
}
.effect-breaker::before { animation: breakerMotion 0.4s ease-out forwards; }
@keyframes breakerMotion {
  0% { opacity: 0; transform: translate(100px, -100px) rotate(45deg); }
  30% { opacity: 1; transform: translate(0, 0) rotate(-20deg); }
  50% { transform: translate(-10px, 10px) rotate(-30deg); }
  100% { opacity: 0; transform: translate(-50px, 50px) rotate(-45deg) scale(1.2); }
}

/* Curse Effect: Dark purple vignette and eerie pulse */
.effect-curse {
  background: radial-gradient(circle, transparent 30%, rgba(30,10,60,0.8) 100%);
  animation: curseVignette 1s ease-in-out forwards;
}
.effect-curse::before { animation: curseMotion 1s ease-in-out forwards; }
@keyframes curseMotion {
  0% { opacity: 0; transform: scale(0) rotate(0); }
  30% { opacity: 1; transform: scale(1.2) rotate(180deg); }
  70% { opacity: 1; transform: scale(1.1) rotate(180deg); }
  100% { opacity: 0; transform: scale(2) rotate(360deg); }
}

/* Door Interaction Effects */
.effect-door-wrong {
  background: rgba(255,0,85,0.08);
  box-shadow: inset 0 0 150px rgba(255,0,85,0.4);
  animation: doorWrongFlash 0.6s ease-out forwards;
}
@keyframes doorWrongFlash {
  0% { opacity: 0; transform: scale(1.05); }
  20% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

.effect-door-correct {
  background: rgba(0,255,136,0.05);
  box-shadow: inset 0 0 100px rgba(0,255,136,0.2);
  animation: doorCorrectFlash 0.5s ease-out forwards;
}
@keyframes doorCorrectFlash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

/* Bash Effect: Violent red flash and vignette */
.effect-bash {
  background: rgba(255,0,0,0.2);
  box-shadow: inset 0 0 200px rgba(150,0,0,0.8);
  animation: bashImpact 0.6s ease-out forwards;
}
@keyframes bashImpact {
  0% { opacity: 0; transform: scale(1.1); }
  10% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* Strong shake for impact */
.screen-shake-hard {
  animation: shakeHard 0.4s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shakeHard {
  10%, 90% { transform: translate3d(-4px, 0, 0) rotate(-1deg); }
  20%, 80% { transform: translate3d(8px, 0, 0) rotate(2deg); }
  30%, 50%, 70% { transform: translate3d(-12px, 0, 0) rotate(-3deg); }
  40%, 60% { transform: translate3d(12px, 0, 0) rotate(3deg); }
}

/* Smoke effect: Dense fog overlay */
.effect-smoke {
  background: radial-gradient(circle, rgba(20,20,25,0.7) 0%, rgba(50,50,60,0.95) 100%);
  animation: smokePulse 4s ease-in-out infinite;
}
.effect-smoke {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(4px);
  animation: smokeFade 2s ease-out forwards;
}
.effect-smoke::before { animation: smokeMotion 2s ease-out forwards; }
@keyframes smokeFade {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0.8; }
}
@keyframes smokeMotion {
  0% { opacity: 0; transform: scale(0.5); filter: blur(10px); }
  20% { opacity: 0.8; transform: scale(1.5); filter: blur(2px); }
  100% { opacity: 0.4; transform: scale(4); filter: blur(20px); }
}

/* Gravity effect: Purple distort and inverted look */
.effect-gravity {
  animation: gravityShake 0.5s ease-in-out infinite;
}
.effect-gravity::before { animation: gravityMotion 1s ease-in-out infinite; }
@keyframes gravityShake {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-5px); }
  75% { transform: translateY(5px); }
}
@keyframes gravityMotion {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.2) translateY(20px); }
}

.effect-warp {
  background: radial-gradient(circle, rgba(136,85,204,0.3), transparent 70%);
  animation: warpDistort 0.8s ease-in-out forwards;
}
.effect-warp::before { animation: warpMotion 0.8s ease-in-out forwards; }
@keyframes warpDistort {
  0% { clip-path: circle(0% at 50% 50%); }
  100% { clip-path: circle(100% at 50% 50%); }
}
@keyframes warpMotion {
  0% { opacity: 0; transform: scale(0) rotate(0); }
  50% { opacity: 1; transform: scale(2) rotate(360deg); }
  100% { opacity: 0; transform: scale(4) rotate(720deg); }
}

/* Foggy Room Effect: Minimap concealment */
.fog-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, #2a2a3a 20%, #1a1a2a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: rgba(255,255,255,0.2);
  z-index: 100;
  pointer-events: none;
  animation: fogFloat 4s ease-in-out infinite;
}
@keyframes fogFloat {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.05); }
}

/* ===== Design Phase Inventory ===== */
.design-inventory {
  margin-top: 10px;
  background: rgba(45,27,105,0.4);
  border: 1px solid var(--purple);
  border-radius: 12px;
  padding: 8px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.design-inv-title {
  font-size: 0.75rem;
  color: var(--gold);
  font-family: var(--font-title);
  letter-spacing: 0.1em;
}
.design-inv-slots {
  display: flex;
  gap: 15px;
}
.design-inv-slot {
  width: 50px;
  height: 50px;
  background: rgba(10,10,26,0.6);
  border: 2px solid rgba(136,85,204,0.3);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}
.design-inv-slot:hover {
  background: rgba(136,85,204,0.2);
  border-color: var(--gold);
}
.design-inv-slot.active {
  background: rgba(136,85,204,0.4);
  border-color: var(--accent1);
  box-shadow: 0 0 15px rgba(0,255,136,0.3);
  transform: scale(1.1);
}
.design-inv-stock {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--danger);
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 900;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.design-inv-slot.active::after {
  content: 'SELECT';
  position: absolute;
  bottom: -18px;
  font-size: 0.6rem;
  color: var(--accent1);
  font-weight: 900;
}

.design-item-desc {
  min-height: 1.2rem;
  font-size: 0.85rem;
  color: var(--text);
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 12px;
  border-radius: 6px;
  margin-top: 15px;
  text-align: center;
  max-width: 400px;
  transition: all 0.3s ease;
  border-left: 3px solid var(--purple);
}

.design-item-desc b {
  color: var(--accent1);
  margin-right: 5px;
}