@font-face {  font-family: 'PressStart2P';  src: url('fonts/PressStart2P-Regular.ttf') format('truetype');  font-weight: normal;  font-style: normal;  }

html { background: url('images/bg1.gif') no-repeat center center fixed;  background-size: cover;  }
body { min-width: 400px;  margin: 0;  padding: 0;  font-family: 'PressStart2P', monospace;  color: #FFD700;  text-align: center;  display: flex;  flex-direction: column;  align-items: center;  min-height: 100vh;  justify-content: flex-start;  image-rendering: pixelated;  }
* { font-family: 'PressStart2P', monospace; }
.d-none {  display: none !important;  }
.d-flex {  flex: 1;  }
.p-20 { padding: 20px; }
.pixel-btn { display: inline-flex; align-items: center; min-width: 100px; font-size: 14px;  padding: 15px 25px;  background: #ed7614;  color: #0a0a0a;  border: none;  cursor: pointer;  text-transform: uppercase;  box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 5px #8e251d, 0 0 0 8px #0a0a0a, 0 6px 0 #8e251d;  transition: transform .05s, box-shadow .05s, background .1s;  }
.pixel-btn:hover {  background: #ff5000;  box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 5px #ff5000, 0 0 0 8px #0a0a0a, 0 0 15px #ff5000, 0 6px 0 #8e251d;  transform: scale(1.05);  }
.pixel-btn:active {  transform: translateY(6px);  box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 5px #8e251d, 0 0 0 8px #0a0a0a, 0 0 0 #8e251d;  }
.pixel-btn img { height: 30px; }
.pixel-icon { width: 20px; height: 20px; image-rendering: pixelated; image-rendering: crisp-edges; }
.small-btn { padding: 9px 12px; font-size: 12px; }
.pixel-icon { width: 20px; height: 20px; image-rendering: pixelated; }
.pixel-btn[data-difficulty="easy"] { background: #4caf50; }
.pixel-btn[data-difficulty="medium"] { background: #ff9800; }
.pixel-btn[data-difficulty="hard"] { background: #f44336; }
.container { display:flex; justify-content:space-between; height: 100%; }
.disabled { filter: grayscale(80%); cursor: not-allowed; }



/* ================================= */
/* =========     HEADER    ========= */
/* ================================= */
header {  position: fixed;  top: 0;  left: 0;  width: 100%;  padding: 20px 0;  background: rgba(0,0,0,0.7);  text-shadow: 2px 2px #ff5000, -1px -1px #00ffea;  z-index: 999999;  }
header h1 {  margin: 0;  font-size: 32px;  color: #FF7434;  animation: pixel-glitch 3s infinite;  }
header p {  margin: 5px 0 0;  font-size: 14px;  color: #FFD700;  animation: pixel-glitch 4s infinite;  }
@keyframes pixel-glitch {  0% { text-shadow: 2px 2px #ff5000, -1px -1px #00ffea; }  25% { text-shadow: 2px 1px #ff7434, -1px -1px #00ffaa; }  50% { text-shadow: 1px 2px #ff5000, -1px -1px #00ffea; }  75% { text-shadow: 2px 2px #ff7434, -1px -1px #00ffaa; }  100% { text-shadow: 2px 2px #ff5000, -1px -1px #00ffea; }  }


/* ================================= */
/* =========     FOOTER    ========= */
/* ================================= */
footer { }
footer a { font-size: 8px; color: #ff7434; }


/* ================================= */
/* =========     MAIN      ========= */
/* ================================= */
main {  width: 100%;  max-width: 900px;  margin-top: 50px;  padding: 20px;  }
#gameContainer { position: relative; max-width: 900px; min-height: 400px; margin-top: 120px; border: 6px solid #ff7434; box-shadow: 0 0 20px #ff793b, inset 0 0 15px #2aff7a33; background: rgba(42, 47, 78, 0.9); display: flex; align-items: stretch; justify-content: center; }
.gamebox {  position: relative; width: 100%;  min-height: 400px;  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  }


/* ================================= */
/* =======   NOT CONNECTED  ======== */
/* ================================= */
#no-connected {  width: 100%;  height: 100%;  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  text-align: center; padding: 20px;  }
.no-connected-text p {  margin: 10px 0;  font-size: 14px;  color: #FFD700;  text-shadow: 1px 1px #000;  }
.no-connected-text span {  color: #ff5000;  font-weight: bold;  animation: highlight-pulse 2s infinite;  }
@keyframes highlight-pulse {  0% { text-shadow: 1px 1px #000; }  50% { text-shadow: 2px 2px #ff5000; }  100% { text-shadow: 1px 1px #000; }  }


/* ================================= */
/* =========     NO RONIN     ====== */
/* ================================= */
#no-ronin { width: 100%; height: 400px; display: flex; flex-direction: column; overflow: hidden; position: relative; }
#dashboard-ronin-top-bar { height: 38px; flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background: rgb(42 47 78 / 90%); border-bottom: 4px solid #ff7434; z-index: 999; font-size: 14px; }
#ronin-cards-container { padding-top:90px !important; flex: 1 1 auto;  overflow-y: auto; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; padding: 10px; box-sizing: border-box; margin-top: 0; }
.ronin-tier { font-weight: bold; color: #FFD700; margin-bottom: 5px; }
.get-btn { font-size: 12px; padding: 6px; width: 100%; }
.ronin-carousel { position: relative; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-top: 50px; }
.carousel-track-container { overflow: hidden; width: 70%; border: 3px solid rgb(255, 116, 52); box-shadow: rgb(255, 121, 59) 0px 0px 10px; }
.carousel-track { display: flex; gap: 16px; transition: transform 0.3s ease-in-out; padding: 20px 0; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: #ed7614; color: #0a0a0a; font-size: 24px; border: 3px solid #0a0a0a; padding: 10px; cursor: pointer; z-index: 10; box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 5px #8e251d; image-rendering: pixelated; }
.left-btn { left: 40px; }
.right-btn { right: 40px; }
.carousel-btn:hover { background: #ff5000; }


/* ================================= */
/* ========    DASHBOARD     ======= */
/* ================================= */
.top-bar {position: absolute; top: 0; width: calc(100% - 40px); background: rgb(42 47 78 / 90%); display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-bottom: 4px solid #ff7434; box-shadow: 0 0 10px #ff793b; font-size: 14px;  }
.top-bar-left img { height: 30px; margin-right: 10px; cursor: pointer; }
.top-bar-left span { margin-right: 20px; font-weight: bold; color: #FFD700; vertical-align: super; }
.top-bar-right * { vertical-align: top; }
.dashboard-content { margin-top: 56px; display: flex; flex-direction: column; height: 100%; width:100%; display: flex; align-items: center; justify-content: center; }
.action-buttons, .avatar-buttons { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }
#view-stats { height: 100%; width:100%; }
#view-pvp { width:100%; height: 100%; }
.pvp-container { height: 100%; }
.dash-view { height: 400px !important; }
.stats-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; padding: 25px 15px; height: calc(100% - 42px); }
.col-middle{ display:flex; flex-direction:column; gap:12px; }
.col-right .action-buttons{ display:flex; flex-direction:column; gap:12px; height:100%; }
.col-right{ display:flex; flex-direction:column; justify-content:center; }
.col-right .action-buttons{ display:inline-block; flex-direction:column; gap:12px; width:100%; }
.dashboard-content-placeholder { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(42, 47, 78, 1); z-index: 10; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.tier-badge { position: absolute; top: -6px; right: -6px; background: #ff5000; color: #FFD700; font-size: 10px; font-weight: bold; padding: 2px 4px; border: 2px solid #0a0a0a; border-radius: 4px; box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 3px #ff7434; text-shadow: 1px 1px #000; pointer-events: none; }
#avatar-profile { font-size: 10px; height: calc(100% - 24px); }
#avatar-bg-img { margin:20px 0px; margin-top: 10px; }
#avatar-bg-2-img { height: 100px;  display: flex; align-items: center; justify-content: center; position: relative; }
.avatar-sprite { position: absolute; bottom:40px; width: 96px; height: 96px; background-repeat: no-repeat; image-rendering: pixelated; image-rendering: crisp-edges; will-change: background-position; }
#avatar-stats { margin: 0 auto; margin-bottom: 25px; }
#avatar-stats tbody tr td { text-align: right; }
#avatar-stats tbody tr td:first-child { padding-right: 15px;}
#avatar-stats tbody tr td:last-child { text-align: left; padding:5px 5px; }
.stat-add { color:lightgreen; }
.avatar-buttons { margin-bottom: 20px; }
.avatar-stat { text-align: right !important; }
#player-wallet { margin: 0; padding-bottom: 0px; margin-bottom: 10px; margin-top: 10px; }
.rune-btn { z-index: 1; width: 20px; height: 20px; padding: 0; background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .05s, box-shadow .05s, background .1s; }
.rune-btn:hover { transform: scale(1.1); }
.rune-btn:active { transform: translateY(3px); }
.pixel-btn-bg { height: 103px; width: 100%; margin-bottom: 25px; text-align: left; font-size: 14px;  padding: 15px 25px;  background: #ed7614;  color: white;  border: none;  cursor: pointer;  text-transform: uppercase;  box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 5px #ff7434, 0 0 0 8px #0a0a0a, 0 6px 0 #ff7434;  transition: transform .05s, box-shadow .05s, background .1s;  }
.pixel-btn-bg:hover {  background: #ff5000;  box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 5px #ff5000, 0 0 0 8px #0a0a0a, 0 0 15px #ff5000, 0 6px 0 #8e251d;  transform: scale(1.05);  }
.pixel-btn-bg:active {  transform: translateY(6px);  box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 5px #8e251d, 0 0 0 8px #0a0a0a, 0 0 0 #8e251d;  }
.pixel-btn-bg { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
#btn-battle-pve { background: url('images/bg-pve.png'); background-size: cover; }
#btn-battle-pvp { background: url('images/bg-pvp.png'); background-size: cover; }
#btn-dojo { background: url('images/bg-cd.png'); background-size: cover; }
.icon-btn{width:38px;height:38px;padding:0;border:none;cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;background:#ed7614;box-shadow:0 0 0 2px #0a0a0a,0 0 0 4px #ff7434,0 0 0 6px #0a0a0a,0 4px 0 #8e251d;transition:transform .06s, box-shadow .06s, background .1s}
.icon-btn:hover{background:#ff5000;box-shadow:0 0 0 2px #0a0a0a,0 0 0 4px #ff7434,0 0 0 6px #0a0a0a,0 0 8px #ff5000,0 4px 0 #8e251d;transform:scale(1.12)}
.icon-btn:active{transform:translateY(4px);box-shadow:0 0 0 2px #0a0a0a,0 0 0 4px #8e251d,0 0 0 6px #0a0a0a,0 0 0 #000}
.icon-btn img{ height: 90%; width:90%;image-rendering:pixelated;filter:drop-shadow(1px 1px 0 #000)}
.loading-text { text-align: center; }
.pve-pixel-card { position: relative; }
.pve-pixel-card .lock-overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);  display: flex; justify-content: center; align-items: center; font-size: 2em; color: white; pointer-events: none; }


/* ============================= */
/* ====== TRANSACTION POPUP ===== */
/* ============================= */
.tx-popup { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 9999999999; image-rendering: pixelated; }
.tx-popup-box { overflow: hidden; width: 360px; background: rgba(42,47,78,0.95); border: 6px solid #ff7434; box-shadow: 0 0 20px #ff793b, inset 0 0 10px #2aff7a33; padding: 20px; text-align: center; font-family: 'PressStart2P', monospace; color: #FFD700; image-rendering: pixelated; }
.tx-popup-box h2 { margin-bottom: 15px; font-size: 16px; color: #FF7434; text-shadow: 1px 1px #000, -1px -1px #00ffea; animation: pixel-glitch 3s infinite; }
.tx-popup-box p { padding-bottom: 10px; font-size: 12px; text-shadow: 1px 1px #000; line-height: 20px; }
#tx-popup-manual .tx-popup-box { width:80% !important; max-height: 400px; overflow-y: auto; }
#tx-close.pixel-btn { font-size: 12px; padding: 8px 12px;  min-width: 80px; box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 5px #8e251d, 0 0 0 8px #0a0a0a, 0 6px 0 #8e251d; transition: transform .05s, box-shadow .05s, background .1s; }
#tx-close.pixel-btn:hover { background: #ff5000; box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 5px #ff5000, 0 0 0 8px #0a0a0a, 0 0 15px #ff5000, 0 6px 0 #8e251d; transform: scale(1.05); }
#tx-close.pixel-btn:active { transform: translateY(6px); box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 5px #8e251d, 0 0 0 8px #0a0a0a, 0 0 0 #8e251d; }
@keyframes pixel-glitch { 0% { text-shadow: 2px 2px #ff5000, -1px -1px #00ffea; } 25% { text-shadow: 2px 1px #ff7434, -1px -1px #00ffaa; } 50% { text-shadow: 1px 2px #ff5000, -1px -1px #00ffea; } 75% { text-shadow: 2px 2px #ff7434, -1px -1px #00ffaa; } 100% { text-shadow: 2px 2px #ff5000, -1px -1px #00ffea; } }


/* ================================= */
/* ========    BATTLE     ========== */
/* ================================= */
.hitstop * { animation-play-state: paused !important; }
.shake { animation: shake 0.18s linear; }
@keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-4px); } 100% { transform: translateX(0); } }


/* ================================= */
/* ===========    PVP     ========== */
/* ================================= */
.pvp-col-left { margin: 20px; align-self: center; }
.top10-col { padding: 20px; }
.top10-container{ width:500px; height:100%; display:block; background:#2b304f; border:4px solid #ff7434; box-shadow: 0 0 10px #ff793b, inset 0 0 6px #2aff7a33; padding:10px; box-sizing:border-box; }
.top10-table { width: 100%; height: 100%; border-collapse: collapse; font-family: 'PressStart2P', monospace; color: #FFD700; font-size: 12px; }
.top10-table th, .top10-table td { padding: 6px 8px; text-align: left; border-bottom: 1px dashed #ff7434; box-sizing: border-box; }
.top10-table thead th { color: #ff5000; text-shadow: 1px 1px #000; font-size: 12px; }
.top10-table .top-rank { color: #ffb84d; text-shadow: 1px 1px #000, 0 0 4px #ff5000; font-weight: bold; }
.top10-table td.address { color: #00ffaa; font-weight: bold; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top10-table td.points { color: #ff7434; text-align: center; }
.top10-table td.reward { text-align: center; }
.top10-table td.reward img { height: 20px;  }
.top10-table tbody tr:hover { background: #ff500033; cursor: pointer; transition: all 0.1s; }
.top10-table td { height: 53px; border-right: 1px dashed #ff7434; }
.top10-table td:last-child { border-right: none; }
.top10-table .highlight-my-wallet { background: #00ffaa33; color: #000;  font-weight: bold; text-shadow: 1px 1px #000, 0 0 4px #00ffaa; }
.top10-table .top-three { color: #ffd700; text-shadow: 1px 1px #000, 0 0 3px #ff7434; }
.top10-table .separator-row td { font-size: 10px; color: #ff5000; text-shadow: 1px 1px #000; }
#btn-opponent-action { position: relative; }
.col-id { width: 35px; }
.col-ronin { width: 150px; }
.col-wl { width: 140px; }


/* =============================== */
/* ===== PVP MATCHMAKING BOX ===== */
/* =============================== */
.pvp-matchmaking-box{ margin: 0 auto; width:260px; padding:14px; background:#1b1f3a; border:4px solid #ff7434; box-shadow: 0 0 0 2px #0a0a0a, 0 0 15px #ff7434, inset 0 0 10px #2aff7a22; display:flex; flex-direction:column; gap:10px; position:relative; }
.pvp-matchmaking-box::after{ content:""; position:absolute; inset:0; pointer-events:none; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,0,0,0.25) 3px ); opacity:.35; }
.pvp-box-title{ background:#111; padding:10px; font-size:11px; border:2px solid #ff7434; color:#ffd700; text-shadow:2px 2px #000; box-shadow: inset 0 0 6px #ff7434; animation:pvpGlow 2s infinite alternate; }
@keyframes pvpGlow{ from{ box-shadow: inset 0 0 4px #ff7434; } to{ box-shadow: inset 0 0 10px #ff5000; } }
.pvp-stat{ display:flex; justify-content:space-between; align-items:center; padding:10px; border:2px dashed #ff7434; font-size:12px; color:#00ffaa; }
.pvp-stat strong{ color:#ffd700; font-size:12px; }
.pvp-stat.timer{ animation:timerPulse 1.5s infinite; }
@keyframes timerPulse{ 0%{ transform:scale(1); } 50%{ transform:scale(1.03); } 100%{ transform:scale(1); } }
.pvp-join-btn{ margin-top:8px; width:100%; justify-content:center; font-size:12px; }


/* =============================== */
/* ========= RETRO TOOLTIP ======= */
/* =============================== */
#retro-tooltip{ position: fixed; pointer-events: none; z-index: 99999; font-size: 10px; line-height: 1.4; padding: 6px 10px; max-width: 220px; color: #FFD700; background: #2a2f4e; border: 2px solid #0a0a0a; box-shadow: 0 0 0 2px #ff7434, 0 0 0 4px #0a0a0a, 0 4px 0 #8e251d; text-shadow: 1px 1px #000; opacity: 0; transform: translateY(-4px); transition: opacity .08s linear, transform .08s linear; }
#retro-tooltip.show{ opacity: 1; transform: translateY(0); }


/* ================================= */
/* ========= PIXEL SCROLL ========== */
/* ================================= */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: #2a2f4e; border: 2px solid #0a0a0a; box-shadow: inset 0 0 0 2px #ff7434, inset 0 0 0 4px #0a0a0a; }
::-webkit-scrollbar-thumb { background: #ed7614; border: 2px solid #0a0a0a; box-shadow: 0 0 0 2px #ff7434, 0 3px 0 #8e251d; }
::-webkit-scrollbar-thumb:hover { background: #ff5000; }
::-webkit-scrollbar-thumb:active { background: #8e251d; transform: translateY(1px); }
::-webkit-scrollbar-corner { background: #2a2f4e; }
* { scrollbar-color: #ed7614 #2a2f4e; }


/* ================================= */
/* =============== MANUAL ========== */
/* ================================= */
.manual-list { display: flex; flex-direction: column; gap: 10px; }
.manual-row { min-height: 32px; display: grid; grid-template-columns: 70px 180px 1fr; align-items: center; text-align: left; border-bottom: 1px dashed #ff7434; padding-bottom: 6px; }
.manual-row img { width: 32px; }


/* =============================== */
/* ===== POPUP CLOSE BUTTON ====== */
/* =============================== */
.tx-popup-box { position: relative; }
.popup-close { position: absolute; top: 20px; right: 20px; width: 28px; height: 28px; font-family: 'PressStart2P', monospace; font-size: 14px; line-height: 28px; background: #ed7614; color: #0a0a0a; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 4px #ff7434, 0 3px 0 #8e251d; transition: transform .05s, box-shadow .05s, background .1s; }
.popup-close:hover { background: #ff5000; transform: scale(1.1); }
.popup-close:active { transform: translateY(3px); box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 4px #8e251d, 0 0 0 #000; }


/* =============================== */
/* ===== DISCLAIMER / TERMS ====== */
/* =============================== */
.disclaimer-box { line-height: 30px; }
.disclaimer { font-size: 8px; opacity: 0.6; margin-top: 8px; text-align: center; line-height: 14px; text-shadow: none !important; }
.terms-check { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 14px; color: #e6e6e6; }
.terms-check input { display: none; }
.checkmark { width: 18px; height: 18px; background: #111; border: 2px solid #444; box-shadow: inset 0 0 0 2px #000, 0 0 0 1px #222; position: relative; image-rendering: pixelated; }
.terms-check:hover .checkmark { border-color: #ffd700; }
.terms-check input:checked + .checkmark { background: #ffd700; border-color: #ffd700; }
.terms-check input:checked + .checkmark::after { content: ""; position: absolute; left: 4px; top: 0px; width: 6px; height: 10px; border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.terms-text a { color: #4da6ff; text-decoration: none; }
.terms-text a:hover { text-decoration: underline; }


/* =============================== */
/* ======== LEADERBOARDS ========= */
/* =============================== */
.leaderboard-block{ margin-bottom:12px; }
.leaderboard-title{ background:#111; border:3px solid #ff7434; padding:6px; margin-bottom:6px; color:#ffd700; text-shadow:2px 2px #000; box-shadow: 0 0 0 2px #0a0a0a, 0 0 8px #ff7434 inset; }
.leaderboard-title.hof{ color:#00ffaa; box-shadow: 0 0 0 2px #0a0a0a, 0 0 8px #00ffaa inset; }
.leaderboard-divider{ height:4px; margin:10px 0; background: repeating-linear-gradient( 90deg, #ff7434, #ff7434 6px, transparent 6px, transparent 12px ); }


/* ============================= */
/* ========= PVP TABS ========== */
/* ============================= */
.pvp-tabs{ display:flex; gap:6px; margin-bottom:8px; }
.pvp-tab{ flex:1; background:#111; border:3px solid #ff7434; color:#ffd700; padding:6px; cursor:pointer; font-size:10px; text-shadow:1px 1px #000; }
.pvp-tab.active{ background:#ff7434; color:#000; }
.pvp-pool-info{ margin-bottom:8px; padding:6px; border:2px dashed #ff7434; font-size:10px; color:#00ffaa; text-shadow:1px 1px #000; }


/* =============================== */
/* ========== DOJO REFERRAL ======= */
/* =============================== */
.dojo-container{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:15px; }
.dojo-container p { line-height: 20px; }
.referral-box{ width:80%; max-width:600px; padding:20px; background:#1b1f3a; border:4px solid #ff7434; box-shadow: 0 0 0 2px #0a0a0a, 0 0 12px #ff7434, inset 0 0 10px #2aff7a22; }
.referral-box input{ width: calc(100% - 20px); padding:10px; margin:10px 0; background:#111; border:2px solid #ff7434; color:#00ffaa; font-family:'PressStart2P', monospace; font-size:10px; }
#copy-feedback{ color:#00ffaa; font-size:10px; margin-top:10px; }







/* =============================== */
/* ======= BATTLE RESULT ========= */
/* =============================== */

.battle-result {
    display: inline-block;
    font-size: 22px;
    letter-spacing: 2px;
    padding: 10px 14px;
    border: 4px solid #000;
    text-shadow: 2px 2px #000;
    animation: resultPop 0.25s ease-out;
}

/* VICTORY */
.battle-result.victory {
    color: #00ff88;
    background: #003322;
    box-shadow:
        0 0 0 2px #0a0a0a,
        0 0 0 5px #00ff88,
        0 0 15px #00ff88,
        0 6px 0 #007744;
}

/* DEFEAT */
.battle-result.defeat {
    color: #ff4444;
    background: #330000;
    box-shadow:
        0 0 0 2px #0a0a0a,
        0 0 0 5px #ff4444,
        0 0 15px #ff0000,
        0 6px 0 #8e251d;
}

/* Small arcade pop animation */
@keyframes resultPop {
    0% { transform: scale(0.6); }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); }
}