/* PokeHunt-Arena Official Cyber Portal Theme */
@font-face {
  font-family: 'Pixelify';
  src: url('art/pixelify.ttf') format('truetype'),
       url('/arena/portal/art/pixelify.ttf') format('truetype');
  font-display: swap;
}

* { box-sizing: border-box; }

:root {
  --ph-bg: #050d18;
  --ph-bg-card: rgba(6, 17, 28, 0.94);
  --ph-cyan: #00e5ff;
  --ph-cyan-glow: rgba(0, 229, 255, 0.35);
  --ph-gold: #ffd700;
  --ph-gold-glow: rgba(255, 215, 0, 0.35);
  --ph-blue-dark: #091a2c;
  --ph-blue-border: rgba(0, 229, 255, 0.4);
  --ph-text: #f0f6fc;
  --ph-text-dim: #8ba2b5;
  --ph-error: #ff5252;
}

html {
  min-height: 100%;
  background: var(--ph-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ph-text);
  font-family: 'Pixelify', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  background:
    radial-gradient(ellipse 90% 60% at 50% 10%, rgba(0, 180, 216, 0.15) 0%, transparent 70%),
    linear-gradient(180deg, rgba(5, 13, 24, 0.78) 0%, rgba(5, 13, 24, 0.94) 100%),
    url('art/title-background.png?v=stadium2') center/cover fixed,
    var(--ph-bg);
  min-height: 100dvh;
  font-size: 16px;
  line-height: 1.4;
}

button, input, a, select {
  font: inherit;
}

button, a {
  touch-action: manipulation;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

.account-shell {
  width: min(540px, 100%);
  margin: 0 auto;
  padding: max(24px, calc(env(safe-area-inset-top) + 16px)) 16px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  justify-content: center;
}

.brand {
  display: block;
  width: min(380px, 85%);
  margin: 0 auto 16px;
  text-align: center;
}

.brand img {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 16px rgba(0, 229, 255, 0.4));
  transition: transform 0.3s ease;
}

.brand img:hover {
  transform: scale(1.02);
}

/* Native Panel: PokeHunt Glassmorphic Neon Frame */
.native-panel {
  background: var(--ph-bg-card);
  border: 2px solid var(--ph-cyan);
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow:
    0 0 30px rgba(0, 229, 255, 0.22),
    inset 0 0 25px rgba(0, 229, 255, 0.06),
    0 16px 32px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
}

.panel-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(0, 229, 255, 0.2);
  padding-bottom: 14px;
}

.panel-heading img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 8px var(--ph-cyan));
}

.eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ph-cyan);
  text-transform: uppercase;
  font-weight: bold;
}

h1 {
  font-size: 26px;
  line-height: 1.15;
  margin: 2px 0 0;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
}

h2 {
  font-size: 20px;
  margin: 16px 0 6px;
  color: var(--ph-gold);
}

.portal-language {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--ph-text-dim);
}

#portal-language {
  background: var(--ph-blue-dark);
  color: var(--ph-cyan);
  border: 1px solid var(--ph-cyan);
  border-radius: 6px;
  padding: 6px 10px;
  min-height: 36px;
  outline: none;
  cursor: pointer;
}

#portal-language:focus-visible {
  box-shadow: 0 0 10px var(--ph-cyan);
}

.intro {
  margin: 10px 0 16px;
  color: var(--ph-text-dim);
  font-size: 14px;
  line-height: 1.45;
}

/* Tabs: PokeHunt Dual Mode */
.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.tabs > * {
  flex: 1;
}

.native-button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 46px;
  padding: 10px 18px;
  background: linear-gradient(180deg, #0e2238 0%, #061322 100%);
  border: 1px solid var(--ph-blue-border);
  border-radius: 8px;
  color: #c9e0f2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  font-weight: 500;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  transition: all 0.2s ease;
  image-rendering: auto;
}

.native-button:hover,
.native-button:focus-visible {
  border-color: var(--ph-cyan);
  color: #ffffff;
  box-shadow: 0 0 14px var(--ph-cyan-glow);
  transform: translateY(-1px);
}

.native-button[aria-pressed=true] {
  background: linear-gradient(180deg, #005c8a 0%, #003756 100%);
  border-color: var(--ph-cyan);
  color: #ffffff;
  box-shadow: 0 0 16px var(--ph-cyan-glow), inset 0 0 8px rgba(0, 229, 255, 0.2);
}

.native-button.primary {
  background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%);
  border: 1px solid #00e5ff;
  color: #ffffff;
  font-weight: bold;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
}

.native-button.primary:hover,
.native-button.primary:focus-visible {
  background: linear-gradient(135deg, #00e5ff 0%, #0096c7 100%);
  box-shadow: 0 0 25px rgba(0, 229, 255, 0.7);
}

.native-button:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* Fields & Inputs */
.account-field {
  margin: 12px 0;
  min-width: 0;
}

label {
  display: block;
  margin-bottom: 6px;
  color: var(--ph-text-dim);
  font-size: 13px;
  font-weight: 500;
}

.account-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 48px;
  padding: 2px 14px;
  background: rgba(3, 10, 18, 0.85);
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 8px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.account-input:focus-within {
  border-color: var(--ph-cyan);
  box-shadow: 0 0 14px var(--ph-cyan-glow), inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.account-input input {
  min-width: 0;
  width: 100%;
  height: 42px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: #ffffff;
  caret-color: var(--ph-cyan);
  font-size: 16px;
  outline: none;
}

.account-input input::placeholder {
  color: #4b657a;
}

.account-password {
  grid-template-columns: minmax(0, 1fr) 40px;
}

.password-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ph-cyan);
  cursor: pointer;
  transition: transform 0.15s;
}

.password-toggle:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px var(--ph-cyan));
}

.password-toggle span {
  display: block;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300e5ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}

.password-toggle[aria-pressed=true] span {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") center/contain no-repeat;
}

form > .primary {
  width: 100%;
  margin-top: 18px;
}

#status {
  margin: 14px 0 0;
  color: var(--ph-gold);
  font-size: 14px;
  min-height: 20px;
  text-align: center;
  font-weight: 500;
  text-shadow: 0 0 8px var(--ph-gold-glow);
}

#status[data-error=true] {
  color: var(--ph-error);
  text-shadow: 0 0 8px rgba(255, 82, 82, 0.4);
}

.save-summary {
  display: grid;
  gap: 4px;
  margin: 16px 0;
  padding: 12px;
  background: rgba(0, 229, 255, 0.05);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 8px;
  color: var(--ph-text-dim);
}

.save-summary strong {
  color: var(--ph-cyan);
}

.save-summary span {
  font-size: 13px;
}

.account-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.account-actions > * {
  flex: 1;
}

details {
  margin-top: 18px;
  padding: 10px 14px;
  background: rgba(3, 10, 18, 0.5);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 8px;
  color: var(--ph-text-dim);
}

summary {
  cursor: pointer;
  color: var(--ph-cyan);
  font-size: 14px;
  user-select: none;
}

#conflict-view {
  margin: 14px 0;
  padding: 14px;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid var(--ph-gold);
  border-radius: 8px;
}

#conflict-view p {
  margin: 0 0 10px;
  color: var(--ph-gold);
  font-size: 13px;
}

#conflict-view button {
  width: 100%;
  margin: 6px 0;
}

footer {
  text-align: center;
  color: var(--ph-text-dim);
  font-size: 12px;
  margin: 20px 0 0;
  text-shadow: 0 1px 2px #000;
  letter-spacing: 0.5px;
}

/* Modal Confirmation */
.native-confirm {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 10, 18, 0.85);
  backdrop-filter: blur(8px);
}

.native-confirm article {
  width: min(440px, 100%);
}

.native-confirm h2 {
  margin-top: 0;
  color: var(--ph-gold);
}

.native-confirm p {
  color: var(--ph-text);
  line-height: 1.5;
}

@media (max-width: 480px) {
  .account-shell {
    padding: 16px 10px;
  }
  .native-panel {
    padding: 18px 16px;
    border-radius: 10px;
  }
  h1 {
    font-size: 22px;
  }
  .panel-heading {
    grid-template-columns: 32px minmax(0, 1fr);
  }
  .panel-heading .portal-language {
    grid-column: 1 / -1;
  }
  .account-actions {
    flex-direction: column;
  }
}