@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');

.dialect-battle-container {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.85);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
  font-family: 'Noto Sans KR', sans-serif;
}
.dialect-phone { height: 750px;
  background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%); border: 4px solid #334155;
  box-shadow: 0 0 40px rgba(0, 240, 255, 0.25);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; color: #fff;
}
.dialect-close { position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.5); border-radius: 50%; width: 40px; height: 40px; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; z-index: 10; display:flex; align-items:center; justify-content:center; }

.dialect-header { padding: 30px 20px 10px; text-align: center; }
.dialect-title {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 2.4rem; color: #ffe600;
  -webkit-text-stroke: 1.5px #000;
  text-shadow: 2px 2px 0 #000, 4px 4px 0 #ff0055;
  transform: rotate(-3deg); margin: 0; letter-spacing: -1px; line-height: 1.1;
}
.dialect-title small { font-size: 1rem; color: #fff; -webkit-text-stroke: 0; text-shadow: none; display:block; transform: rotate(3deg); letter-spacing: 0; }

.phase-briefing { display: flex; flex-direction: column; align-items: center; padding: 20px; height: 100%; justify-content: center; }
.brief-card { background: #fff; color: #000; border-radius: 20px; padding: 30px 20px; width: 100%; text-align: center; box-shadow: 8px 8px 0 #ff0055; margin-bottom: 20px; }
.brief-tag { background: #3b82f6; color: #fff; padding: 6px 16px; border-radius: 20px; font-weight: 800; display: inline-block; margin-bottom: 15px; }
.brief-title { font-size: 1.6rem; font-weight: 900; margin-bottom: 15px; word-break: keep-all;}
.brief-desc { font-size: 1rem; color: #444; margin-bottom: 25px; line-height: 1.4; word-break: keep-all;}
.btn-yellow { background: #ffe600; color: #000; font-family: 'Black Han Sans', sans-serif; font-size: 1.6rem; padding: 15px 40px; border: 3px solid #000; border-radius: 12px; box-shadow: 4px 4px 0 #000; cursor: pointer; transition: transform 0.1s; letter-spacing: 1px; }
.btn-yellow:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #000; }

.phase-record { display: flex; flex-direction: column; align-items: center; padding: 20px; height: 100%; justify-content: space-between; }
.record-prompt { text-align: center; margin-top: 20px; width: 100%; }
.record-prompt h2 { color: #00f0ff; font-weight: 900; margin-bottom: 15px; font-size: 1.5rem; }
.record-bubble { background:#fff; color:#000; padding:25px 20px; border-radius:20px; margin-bottom:20px; position:relative; }
.record-bubble::after { content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); border-width:10px 10px 0; border-style:solid; border-color:#fff transparent transparent transparent; }
.record-bubble p { font-size: 1.8rem; font-family: 'Black Han Sans', sans-serif; margin: 0; line-height: 1.2; word-break: keep-all; }
.visualizer { width: 100%; height: 100px; background: rgba(0,0,0,0.5); border-radius: 16px; border: 2px solid #00f0ff; margin-bottom: 20px; }
.mic-btn-wrap { display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; }
.mic-btn { width: 90px; height: 90px; border-radius: 50%; background: #ef4444; border: 4px solid #fff; box-shadow: 0 0 20px rgba(239, 68, 68, 0.6); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin-bottom: 10px; transition: transform 0.2s; }
.mic-btn.active { animation: pulse-red 1s infinite; transform: scale(0.95); }
.mic-hint { font-size: 0.9rem; color: #aaa; font-weight: 700; }
@keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 70% { box-shadow: 0 0 0 20px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }

.phase-skill { display: flex; flex-direction: column; align-items: center; padding: 20px; height: 100%; justify-content: center; }
.skill-card { background: #1e293b; border: 4px solid #ffe600; border-radius: 20px; padding: 30px 20px; width: 100%; text-align: center; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.skill-new { position: absolute; top: -15px; right: -10px; background: #ef4444; color: #fff; font-family: 'Black Han Sans', sans-serif; padding: 5px 15px; border-radius: 20px; transform: rotate(12deg); border: 2px solid #fff; font-size: 1.2rem; }
.skill-name { font-family: 'Black Han Sans', sans-serif; font-size: 2.4rem; color: #ffe600; -webkit-text-stroke: 1.5px #000; text-shadow: 3px 3px 0 #000; margin: 15px 0 25px; line-height: 1.1; }
.skill-stats { display: flex; flex-direction: column; gap: 12px; margin-bottom: 25px; text-align: left; background: #0f172a; padding: 20px; border-radius: 12px; }
.stat-row { display: flex; justify-content: space-between; font-weight: 700; color: #00f0ff; font-size: 1.1rem; }
.stat-row span:last-child { color: #fff; }

.phase-battle { display: flex; flex-direction: column; height: 100%; }
.battle-top { display: flex; justify-content: space-between; padding: 20px; background: rgba(0,0,0,0.7); border-bottom: 2px solid #00f0ff; z-index: 5; }
.hp-col { width: 45%; }
.hp-name { font-weight: 900; font-size: 1rem; margin-bottom: 5px; color: #00f0ff; }
.hp-name.enemy { color: #ff0055; text-align: right; }
.hp-bar { height: 14px; background: #333; border-radius: 7px; overflow: hidden; border: 2px solid #fff; }
.hp-fill { height: 100%; background: #00f0ff; transition: width 0.3s; }
.hp-bar.enemy .hp-fill { background: #ff0055; float: right; }
.battle-arena { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(circle at center, #1e1b4b, #000); overflow: hidden; }
.round-text { font-family: 'Black Han Sans', sans-serif; font-size: 3.5rem; color: #fff; -webkit-text-stroke: 2px #000; text-shadow: 0 0 20px #00f0ff; position: absolute; top: 15%; animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.battle-action { display: flex; flex-direction: column; align-items: center; gap: 20px; z-index: 2; width: 100%; position: absolute; top: 40%; }
.action-card { font-family: 'Black Han Sans', sans-serif; font-size: 2.2rem; color: #ffe600; background: #000; border: 4px solid #ffe600; padding: 20px 30px; border-radius: 16px; box-shadow: 6px 6px 0 #ff0055; transform: skewX(-5deg); animation: slideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-align: center; width: 90%; }
.action-card.enemy-card { color: #ff0055; border-color: #ff0055; box-shadow: -6px 6px 0 #ffe600; transform: skewX(5deg); animation: slideInRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

@keyframes popIn { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes slideIn { 0% { transform: translateX(-100%) skewX(-5deg); opacity: 0; } 100% { transform: translateX(0) skewX(-5deg); opacity: 1; } }
@keyframes slideInRight { 0% { transform: translateX(100%) skewX(5deg); opacity: 0; } 100% { transform: translateX(0) skewX(5deg); opacity: 1; } }

/* Keep the complete interaction usable on short windows and mobile screens. */
.dialect-battle-container{height:100dvh;padding:16px;box-sizing:border-box}
.dialect-battle-container *{box-sizing:border-box}
.dialect-phone{width:min(430px,100%);height:min(750px,calc(100dvh - 32px));border-radius:24px}
.dialect-battle-container button:focus-visible{outline:3px solid #7dd3fc;outline-offset:4px}
.dialect-battle-container button:disabled{opacity:.55;cursor:wait}
.dialect-battle-container .phase-record,.dialect-battle-container .phase-skill,.dialect-battle-container .phase-briefing{height:auto;min-height:100%;gap:16px}
.dialect-battle-container .mic-hint{color:#cbd5e1;text-align:center;line-height:1.5;max-width:320px}
@media(max-height:650px){.dialect-header{padding-top:18px}.dialect-title{font-size:1.8rem}.record-prompt{margin-top:0}.brief-card,.skill-card{padding:20px 16px}.mic-btn-wrap{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){.dialect-battle-container *{animation:none!important;transition:none!important}}