/** components.tokyo-yield-modal.css
 * Styles for the Tokyo yield decision modal component.
 * Component: src/components/tokyo-yield-modal/tokyo-yield-modal.component.js
 */
#kot-yield-modal.modal { position:fixed; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.55); z-index:999998 !important; }
#kot-yield-modal.hidden { display:none; }
#kot-yield-modal .modal-content { background:linear-gradient(145deg,#1d1f27,#262a33); color:#f2f5f7; border:1px solid #333; border-radius:14px; padding:20px 26px 24px; box-shadow:0 10px 32px -4px rgba(0,0,0,.55); font-family:inherit; opacity:0; transform:translateY(6px) scale(.96); animation:yieldModalIn .32s cubic-bezier(.33,.85,.4,1) forwards; position:relative; z-index:999999 !important; }
#kot-yield-modal.closing .modal-content { animation:yieldModalOut .22s cubic-bezier(.5,.15,.4,1) forwards; }
#kot-yield-modal .yield-header h2 { margin:0 0 4px; font-size:20px; letter-spacing:.5px; }
#kot-yield-modal .yield-context { font-size:13px; opacity:.85; margin-bottom:12px; }
#kot-yield-modal .yield-question { margin:0 0 14px; font-size:15px; }
#kot-yield-modal .damage-preview { display:flex; gap:18px; font-size:13px; margin:4px 0 14px; }
#kot-yield-modal .damage-preview .label { text-transform:uppercase; font-size:11px; letter-spacing:.5px; opacity:.7; margin-right:4px; }
#kot-yield-modal .damage-preview .value.damage { color:#ff6464; font-weight:600; }
#kot-yield-modal .damage-preview .value.health { color:#7dd87d; font-weight:500; }
#kot-yield-modal .advisory { background:#2c313d; border:1px solid #3a4250; padding:8px 10px; border-radius:8px; font-size:12px; line-height:1.35; margin:4px 0 16px; }
#kot-yield-modal .yield-actions { display:flex; gap:12px; }
/** components.tokyo-yield-modal.css
 * Styles for the Tokyo yield decision modal component.
 * Component: src/components/tokyo-yield-modal/tokyo-yield-modal.component.js
 * NOTE: Base styles only - themed styles in components.tokyo-yield-modal-themes.css
 */
#kot-yield-modal.modal { position:fixed; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.55); z-index:999998 !important; }
#kot-yield-modal.hidden { display:none; }

/* Base modal styling - overridden by themes */
#kot-yield-modal .modal-content { 
  background:linear-gradient(145deg,#1d1f27,#262a33); 
  color:#f2f5f7; 
  border:1px solid #333; 
  border-radius:14px; 
  padding:20px 26px 24px; 
  box-shadow:0 10px 32px -4px rgba(0,0,0,.55); 
  font-family:inherit; 
  opacity:0; 
  transform:translateY(6px) scale(.96); 
  animation:yieldModalIn .32s cubic-bezier(.33,.85,.4,1) forwards; 
  position:relative; 
  z-index:999999 !important;
  text-align: center;
}

/* Apply theme-specific styles to actual modal */
#kot-yield-modal[data-yield-theme="destruction"] .modal-content {
  background: linear-gradient(145deg, #1a0505, #2d0a0a);
  color: #ff8888;
  border: 3px solid #880000;
  box-shadow: 0 0 40px rgba(136, 0, 0, 0.6), 0 10px 32px -4px rgba(0,0,0,0.8);
}

#kot-yield-modal[data-yield-theme="fantasy"] .modal-content {
  background: linear-gradient(145deg, #0a1f2e, #1a2d4a);
  color: #d5f5ff;
  border: 2px solid #33ddff;
  box-shadow: 0 0 40px rgba(51, 221, 255, 0.4), 0 10px 32px -4px rgba(0,0,0,0.55);
}

#kot-yield-modal[data-yield-theme="demon"] .modal-content {
  background: linear-gradient(145deg, #1a0000, #330000);
  color: #ffccaa;
  border: 3px solid #ff4400;
  box-shadow: 0 0 50px rgba(255, 68, 0, 0.6), 0 10px 32px -4px rgba(0,0,0,0.9), inset 0 0 60px rgba(0, 0, 0, 0.8);
}

#kot-yield-modal.closing .modal-content { animation:yieldModalOut .22s cubic-bezier(.5,.15,.4,1) forwards; }
#kot-yield-modal .yield-header h2 { margin:0 0 4px; font-size:48px !important; letter-spacing:.5px; }

/* Theme-specific header colors */
#kot-yield-modal[data-yield-theme="destruction"] .yield-header h2 {
  color: #ff3333;
  text-shadow: 0 0 15px rgba(255, 51, 51, 0.8);
  font-size: 48px !important;
}

#kot-yield-modal[data-yield-theme="fantasy"] .yield-header h2 {
  color: #ffdd77;
  text-shadow: 0 0 12px rgba(255, 221, 119, 0.6);
  font-size: 48px !important;
}

#kot-yield-modal[data-yield-theme="demon"] .yield-header h2 {
  color: #ff3300;
  text-shadow: 0 0 20px rgba(255, 51, 0, 0.9), 0 0 40px rgba(255, 100, 0, 0.7);
  font-size: 48px !important;
}

#kot-yield-modal .yield-context { font-size:13px; opacity:.85; margin-bottom:12px; }

/* Theme-specific context colors */
#kot-yield-modal[data-yield-theme="destruction"] .yield-context {
  color: #ffaaaa;
}

#kot-yield-modal[data-yield-theme="fantasy"] .yield-context {
  color: #c4f5ff;
}

#kot-yield-modal[data-yield-theme="demon"] .yield-context {
  color: #ffaa88;
}

#kot-yield-modal .yield-question { margin:0 0 14px; font-size:15px; }

/* Yield modal image */
#kot-yield-modal .yield-modal-image {
  text-align: center;
  margin: 0 0 16px;
}

#kot-yield-modal .yield-modal-image img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Default monster image with red background */
#kot-yield-modal .yield-modal-image.yield-modal-default-monster {
  position: relative;
  display: inline-block;
  background: rgba(255, 0, 0, 0.5);
  border-radius: 8px;
  padding: 0;
  line-height: 0;
}

/* Theme-specific question colors */
#kot-yield-modal[data-yield-theme="destruction"] .yield-question {
  color: #ffcccc;
}

#kot-yield-modal[data-yield-theme="fantasy"] .yield-question {
  color: #ddffff;
}

#kot-yield-modal[data-yield-theme="demon"] .yield-question {
  color: #ffccaa;
}

#kot-yield-modal .damage-preview { display:flex; gap:18px; font-size:13px; margin:4px 0 14px; justify-content: center; }
#kot-yield-modal .damage-preview .label { text-transform:uppercase; font-size:11px; letter-spacing:.5px; opacity:.7; margin-right:4px; }
#kot-yield-modal .damage-preview .value.damage { color:#ff6464; font-weight:600; }
#kot-yield-modal .damage-preview .value.health { color:#7dd87d; font-weight:500; }
#kot-yield-modal .advisory { background:#2c313d; border:1px solid #3a4250; padding:8px 10px; border-radius:8px; font-size:12px; line-height:1.35; margin:4px 0 16px; }

/* Theme-specific advisory colors */
#kot-yield-modal[data-yield-theme="destruction"] .advisory {
  background: rgba(136, 0, 0, 0.3);
  border-color: rgba(255, 51, 51, 0.5);
  color: #ffcccc;
}

#kot-yield-modal[data-yield-theme="fantasy"] .advisory {
  background: rgba(17, 136, 170, 0.3);
  border-color: rgba(51, 221, 255, 0.5);
  color: #d5f5ff;
}

#kot-yield-modal[data-yield-theme="demon"] .advisory {
  background: rgba(51, 0, 0, 0.4);
  border-color: rgba(255, 68, 0, 0.6);
  color: #ffccaa;
}

#kot-yield-modal .yield-actions { display:flex; gap:12px; }
#kot-yield-modal .yield-actions button { 
  flex:1; 
  padding:10px 14px; 
  font-size:16px; 
  border-radius:10px; 
  cursor:pointer; 
  transition:background .15s,border-color .15s; 
  font-weight:600; 
  letter-spacing:2px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* Standard theme buttons (default) */
#kot-yield-modal[data-yield-theme="standard"] .yield-actions button.btn-stay,
#kot-yield-modal:not([data-yield-theme]) .yield-actions button.btn-stay,
#kot-yield-modal .yield-actions button.btn-stay { 
  background:#4a5261; 
  border:1px solid #4a5261;
  color:#f2f5f7;
}
#kot-yield-modal[data-yield-theme="standard"] .yield-actions button.btn-stay:hover,
#kot-yield-modal:not([data-yield-theme]) .yield-actions button.btn-stay:hover,
#kot-yield-modal .yield-actions button.btn-stay:hover { 
  background:#545d6e; 
}
#kot-yield-modal[data-yield-theme="standard"] .yield-actions button.btn-yield,
#kot-yield-modal:not([data-yield-theme]) .yield-actions button.btn-yield,
#kot-yield-modal .yield-actions button.btn-yield { 
  background:#565c68; 
  border:1px solid #565c68;
  color:#f2f5f7;
}
#kot-yield-modal[data-yield-theme="standard"] .yield-actions button.btn-yield:hover,
#kot-yield-modal:not([data-yield-theme]) .yield-actions button.btn-yield:hover,
#kot-yield-modal .yield-actions button.btn-yield:hover { 
  background:#5f6672; 
}

/* Destruction theme buttons */
#kot-yield-modal[data-yield-theme="destruction"] .yield-actions button.btn-stay {
  background: linear-gradient(135deg, #661111, #881111);
  border: 2px solid #aa1111;
  color: #ffdddd;
  text-transform: uppercase;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(136, 17, 17, 0.5);
}

#kot-yield-modal[data-yield-theme="destruction"] .yield-actions button.btn-stay:hover {
  background: linear-gradient(135deg, #771111, #991111);
  box-shadow: 0 6px 16px rgba(136, 17, 17, 0.7);
  transform: translateY(-2px);
}

#kot-yield-modal[data-yield-theme="destruction"] .yield-actions button.btn-yield {
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
  border: 2px solid #444444;
  color: #cccccc;
  text-transform: uppercase;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

#kot-yield-modal[data-yield-theme="destruction"] .yield-actions button.btn-yield:hover {
  background: linear-gradient(135deg, #252525, #353535);
  border-color: #555555;
  transform: translateY(-2px);
}

/* Fantasy theme buttons */
#kot-yield-modal[data-yield-theme="fantasy"] .yield-actions button.btn-stay {
  background: linear-gradient(135deg, #1188aa, #22aadd);
  border: 1px solid #33ccff;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(51, 204, 255, 0.5);
  font-style: italic;
}

#kot-yield-modal[data-yield-theme="fantasy"] .yield-actions button.btn-stay:hover {
  background: linear-gradient(135deg, #2299bb, #33bbee);
  box-shadow: 0 6px 16px rgba(51, 204, 255, 0.7);
  transform: translateY(-2px);
}

#kot-yield-modal[data-yield-theme="fantasy"] .yield-actions button.btn-yield {
  background: linear-gradient(135deg, #334455, #445566);
  border: 1px solid #556677;
  color: #dddddd;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  font-style: italic;
}

#kot-yield-modal[data-yield-theme="fantasy"] .yield-actions button.btn-yield:hover {
  background: linear-gradient(135deg, #445566, #556677);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
  transform: translateY(-2px);
}

/* Demon theme buttons */
#kot-yield-modal[data-yield-theme="demon"] .yield-actions button.btn-stay {
  background: linear-gradient(135deg, #660000, #aa1100);
  border: 2px solid #ff3300;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 800;
  box-shadow: 0 0 20px rgba(255, 51, 0, 0.7), inset 0 -2px 10px rgba(0, 0, 0, 0.8);
}

#kot-yield-modal[data-yield-theme="demon"] .yield-actions button.btn-stay:hover {
  background: linear-gradient(135deg, #770000, #bb2200);
  box-shadow: 0 0 30px rgba(255, 51, 0, 0.9), inset 0 -2px 10px rgba(0, 0, 0, 0.8);
  transform: translateY(-2px);
}

#kot-yield-modal[data-yield-theme="demon"] .yield-actions button.btn-yield {
  background: linear-gradient(135deg, #110000, #220000);
  border: 2px solid #660000;
  color: #cc8866;
  text-transform: uppercase;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
}

#kot-yield-modal[data-yield-theme="demon"] .yield-actions button.btn-yield:hover {
  background: linear-gradient(135deg, #1a0000, #2a0000);
  border-color: #770000;
  transform: translateY(-2px);
}

#kot-yield-modal .yield-actions button:focus-visible { outline:2px solid #ffd053; outline-offset:2px; }
@media (max-width:640px){
  #kot-yield-modal .modal-content { width:94%; padding:18px 20px 22px; }
  #kot-yield-modal .yield-actions { flex-direction:column; }
}

@media (max-width:1024px){
  #kot-yield-modal .damage-preview { display:none; }
}

@media (prefers-reduced-motion: reduce){
  #kot-yield-modal .modal-content { animation:none; opacity:1; transform:none; }
}

@keyframes yieldModalIn {
  0% { opacity:0; transform:translateY(10px) scale(.94); }
  60% { opacity:1; transform:translateY(-2px) scale(1.005); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}

@keyframes yieldModalOut {
  0% { opacity:1; transform:translateY(0) scale(1); }
  100% { opacity:0; transform:translateY(6px) scale(.965); }
}