/*
 * Page styles: index
 * Only selectors specific to this page should live here.
 * Global spacing and shell sizes belong in ../takaradex-config.css.
 */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

body{
background: radial-gradient(circle at top, #2b2b2b, #111);
color:white;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
padding:15px;
overflow-x:hidden;
}

/* HEADER */
.header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:15px;
  position:relative;
}

.pokemon-title{
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 30px;
  text-align:center;
  letter-spacing:2px;
  color:#ffcb05;
  text-shadow:
    -3px -3px 0 #2a75bb,
     3px -3px 0 #2a75bb,
    -3px  3px 0 #2a75bb,
     3px  3px 0 #2a75bb,
     0px  5px 0 #1a4f8b;
}

.poke-icon{
  width:48px;
  height:48px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 6px rgba(255,204,0,0.6));
}

.flip{ transform: scaleX(-1); }

/* 🍔 MENU */
.hamburger{
  position:absolute;
  left:0;
  font-size:30px;
  cursor:pointer;
  color:#ffcc00;
  user-select:none;
  padding:5px 10px;
}

.side-menu{
  position:fixed;
  top:0;
  left:-280px;
  width:260px;
  height:100%;
  background:#1b1b1b;
  padding:20px;
  z-index:20;
  transition:0.3s ease;
  display:flex;
  flex-direction:column;
  gap:10px;
  border-right:2px solid rgba(127,29,29,0.65);
}

.side-menu h3{
  color:#ffcc00;
  margin-bottom:10px;
}

.side-menu button{
  background:#2a2a2a;
  color:white;
  border:none;
  padding:12px;
  border-radius:10px;
  text-align:left;
  cursor:pointer;
}

.overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  display:none;
  z-index:15;
}

/* UI */
h2{color:#ffcc00;margin-bottom:15px;}

.container{display:flex;flex-direction:column;gap:20px;}

.sidebar{width:100%;display:flex;flex-direction:column;gap:20px;}

.form-section,.stats-section{
background:#2a2a2a;
padding:18px;
border-radius:18px;
border:2px solid rgba(255,204,0,0.15);
box-shadow:0 8px 25px rgba(0,0,0,0.4);
}

input,select{
width:100%;
padding:16px;
margin-bottom:15px;
border:none;
border-radius:14px;
font-size:16px;
background:#1b1b1b;
color:white;
}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#ffcc00 50%),linear-gradient(135deg,#ffcc00 50%,transparent 50%);background-position:calc(100% - 22px) 21px,calc(100% - 15px) 21px;background-size:7px 7px,7px 7px;background-repeat:no-repeat;}

button{
width:100%;
padding:14px;
border:none;
border-radius:14px;
font-weight:bold;
font-size:16px;
cursor:pointer;
transition:0.2s ease;
text-transform:uppercase;
letter-spacing:1px;
}

button:hover{transform:scale(1.05);filter:brightness(1.1);}
button:active{transform:scale(0.97);}
button:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.manual-image-box{background:#1b1b1b;border:1px dashed rgba(255,204,0,.35);border-radius:16px;padding:14px;margin-bottom:15px;}
.manual-image-box label{display:block;color:#ffcc00;font-weight:bold;margin-bottom:8px;}
.manual-image-box p{color:#aaa;font-size:13px;margin-bottom:10px;line-height:1.4;}
.manual-preview{display:none;align-items:center;gap:12px;margin-top:10px;color:#bbb;font-size:13px;}
.manual-preview img{width:62px;max-height:86px;object-fit:contain;border-radius:10px;}

.manual-upload-btn{background:#3b82f6;color:white;margin-top:10px;}
.manual-upload-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(7px);justify-content:center;align-items:center;z-index:75;padding:18px;}
.manual-upload-card{background:#1f1f1f;border:2px solid rgba(255,204,0,.22);border-radius:20px;width:100%;max-width:430px;padding:20px;box-shadow:0 18px 45px rgba(0,0,0,.58);}
.manual-upload-card h2{color:#ffcc00;margin-bottom:8px;}
.manual-upload-card p{color:#bbb;font-size:14px;line-height:1.45;margin-bottom:14px;}
.manual-upload-actions{display:flex;gap:10px;margin-top:14px;}
.manual-upload-actions button{flex:1;}

.btn-edit{background:#3b82f6;color:white;}
.btn-delete{background:#ef4444;color:white;}
.btn-cardmarket{background:#2563eb;color:white;}
.btn-save{background:#22c55e;color:white;}
.btn-publish{background:#16a34a;color:white;}
.btn-cancel{background:#6b7280;color:white;}
.btn-main{background:#ffcc00;color:black;}

.actions{
display:flex;
flex-direction:column;
gap:10px;
align-items:center;
}

.actions button{
width:110px;
padding:12px;
font-size:14px;
border-radius:12px;
}

.table-section{
background:#2a2a2a;
border-radius:18px;
overflow-x:auto;
border:2px solid rgba(255,204,0,0.15);
}

table{width:100%;min-width:1250px;border-collapse:collapse;}

th{
background:#7f1d1d;
color:white;
padding:14px;
position:sticky;
top:0;
}

td{padding:14px;text-align:center;border-bottom:1px solid #444;}

img{
width:140px;
border-radius:4px;
box-shadow:0 0 10px rgba(255,204,0,0.2);
transition:0.3s;
}

img:hover{transform:scale(1.15);}

.empty{text-align:center;color:#aaa;padding:30px;}
.load-more-wrap{padding:16px;text-align:center;}
.load-more-wrap button{max-width:260px;background:#ffcc00;color:#111;}


/* AUTH */
.auth-screen{
  position:fixed;
  inset:0;
  background:radial-gradient(circle at top,#2b2b2b,#111);
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.auth-box{
  width:100%;
  max-width:420px;
  background:#2a2a2a;
  border:2px solid rgba(255,204,0,0.2);
  border-radius:22px;
  padding:24px;
  box-shadow:0 12px 35px rgba(0,0,0,0.55);
}
.auth-box h2{
  text-align:center;
  color:#ffcc00;
  margin-bottom:8px;
}
.auth-box p{
  text-align:center;
  color:#bbb;
  margin-bottom:18px;
  font-size:14px;
}
.auth-row{
  display:flex;
  gap:10px;
}
.auth-row button{
  flex:1;
}
.auth-error{
  color:#ff7777;
  text-align:center;
  min-height:20px;
  margin-top:12px;
  font-size:14px;
}
.user-bar{
  background:#1b1b1b;
  border:1px solid rgba(255,204,0,0.2);
  border-radius:14px;
  padding:10px 12px;
  margin-bottom:15px;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#ddd;
  font-size:14px;
}
.user-bar button{
  width:auto;
  padding:8px 12px;
  font-size:12px;
  border-radius:10px;
  background:#ef4444;
  color:white;
}
.loading-screen{
  position:fixed;
  inset:0;
  background:radial-gradient(circle at top,#2b2b2b,#111);
  z-index:120;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.loading-box{
  width:100%;
  max-width:360px;
  background:#2a2a2a;
  border:2px solid rgba(255,204,0,0.2);
  border-radius:22px;
  padding:28px;
  text-align:center;
  box-shadow:0 12px 35px rgba(0,0,0,0.55);
}
.loading-title{
  color:#ffcc00;
  font-weight:bold;
  font-size:22px;
  margin-bottom:10px;
}
.loading-text{
  color:#bbb;
  font-size:14px;
}
.spinner{
  width:42px;
  height:42px;
  border:4px solid rgba(255,204,0,0.2);
  border-top-color:#ffcc00;
  border-radius:50%;
  margin:0 auto 18px;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{
  to{ transform:rotate(360deg); }
}
body.auth-loading .container,
body.auth-loading .header,
body.auth-loading .user-bar,
body.auth-loading .auth-screen{
  display:none;
}
body.auth-loading .loading-screen{
  display:flex;
}


.password-modal{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:90;padding:18px;}
.password-box{width:100%;max-width:420px;background:#1f1f1f;border:2px solid rgba(255,204,0,.22);border-radius:20px;padding:20px;box-shadow:0 15px 40px rgba(0,0,0,.55);}
.password-box h2{color:#ffcc00;margin-bottom:8px;text-align:center;}
.password-box p{color:#bbb;font-size:14px;line-height:1.4;text-align:center;margin-bottom:15px;}
.password-box input{width:100%;padding:15px;margin-bottom:12px;border:none;border-radius:14px;font-size:16px;background:#111;color:white;}
.password-actions{display:flex;gap:10px;margin-top:8px;}
.password-actions button{flex:1;}
.password-status{min-height:20px;margin-top:12px;text-align:center;font-size:14px;color:#bbb;}

.account-player-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:10px 0;border-top:1px solid rgba(255,255,255,.08);}
.player-toggle{display:flex;align-items:center;gap:8px;background:#1f1f1f;border-radius:999px;padding:4px;border:1px solid rgba(255,204,0,.25);}
.player-toggle button{border:0;border-radius:999px;padding:7px 12px;background:transparent;color:#aaa;cursor:pointer;font-weight:700;}
.player-toggle button.active{background:#ffcc00;color:#111;}
.player-only-menu{display:none;}
body.is-player .player-only-menu{display:block;}

.user-actions{display:flex;gap:8px;align-items:center;}
.user-actions button.password-btn{background:#3b82f6;color:white;}
@media(max-width:520px){.user-bar{align-items:flex-start;}.user-actions{flex-direction:column;align-items:stretch;}.user-actions button{width:100%;}.password-actions{flex-direction:column;}}


/* ACCOUNT PROFILO MOBILE */
.profile-account{position:fixed;top:14px;right:14px;z-index:80;}
.profile-btn{width:46px;height:46px;border-radius:50%;padding:0;background:#ffcc00;color:#111;border:2px solid rgba(42,117,187,.75);font-size:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.45);text-transform:none;letter-spacing:0;}
.profile-btn:hover{transform:scale(1.04);}
.account-panel{position:absolute;top:56px;right:0;width:min(92vw,330px);background:#1f1f1f;border:2px solid rgba(255,204,0,.25);border-radius:18px;padding:14px;box-shadow:0 16px 40px rgba(0,0,0,.65);display:none;}
.account-panel.open{display:block;}
.account-title{color:#ffcc00;font-weight:900;margin-bottom:10px;font-size:16px;}
.account-label{color:#aaa;font-size:12px;margin:10px 0 6px;font-weight:bold;text-transform:uppercase;letter-spacing:.7px;}
.account-value{background:#111;border:1px solid rgba(255,204,0,.16);border-radius:12px;padding:11px;color:#eee;font-size:14px;word-break:break-all;}
.account-name-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;}
.account-name-row input{margin:0!important;background:#111!important;border:1px solid rgba(255,204,0,.16)!important;border-radius:12px!important;padding:11px!important;color:white!important;font-size:14px!important;}
.account-name-row button{width:auto!important;padding:11px 12px!important;font-size:12px!important;background:#22c55e!important;color:white!important;}
.account-status{min-height:18px;color:#bbb;font-size:12px;margin-top:7px;}
.account-password-row{display:flex;gap:8px;align-items:center;}
.account-password-row input{flex:1;margin:0!important;background:#111!important;border:1px solid rgba(255,204,0,.16)!important;border-radius:12px!important;padding:11px!important;color:white!important;font-size:14px!important;}
.eye-btn{width:46px!important;height:42px!important;padding:0!important;border-radius:12px!important;background:#2a2a2a!important;color:#ffcc00!important;font-size:18px!important;letter-spacing:0!important;text-transform:none!important;}
.account-actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:12px;}
.account-actions button{width:100%;font-size:13px;padding:11px;border-radius:12px;}
.account-actions .reset-btn{background:#3b82f6;color:white;}
.account-actions .logout-btn{background:#ef4444;color:white;}
.user-bar{display:none!important;}
body.auth-loading .profile-account{display:none!important;}
@media(max-width:650px){.profile-account{top:10px;right:10px}.profile-btn{width:42px;height:42px;font-size:20px}.account-panel{top:50px}}