@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;600;700&display=swap');

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

:root {
   --red-main: #f20d08;
   --red-dark: #b30000;
   --red-border: #1e0000;
   --panel-gray: #bcbcbc;
   --screen-gray: #d9d9d9;
   --field-bg: #e7e7e7;
   --field-border: #9a9a9a;
   --text: #364049;
   --blue-screen: #51e2ff;
   --shadow: rgba(0, 0, 0, 0.22);
}

body {
   background: #d6d6d6;
   font-family: 'Minecraft', sans-serif;
   color: var(--text);
}

.app {
   width: min(1400px, 100%);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 26px;
}

/* casco principal esquerdo */
.left-panel,
.right-panel,
.pokedex-top,
.curve-left,
.curve-right,
.hinge {
   position: absolute;
}

.pokedex-top {
   left: 4.5%;
   top: 2.8%;
   width: 46%;
   height: 14%;
   background: var(--red-main);
   border: 4px solid var(--red-border);
   border-radius: 28px 28px 12px 12px;
   box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.18);
   z-index: 3;
}

.curve-left {
   left: 4.5%;
   top: 7.8%;
   width: 46%;
   height: 81%;
   background: var(--red-main);
   border: 4px solid var(--red-border);
   border-radius: 0 0 18px 18px;
   z-index: 1;
}

.hinge {
   left: 47.8%;
   top: 3.2%;
   width: 7.4%;
   height: 86%;
   background: linear-gradient(90deg, #ff2b23 0%, #f20d08 35%, #ff2b23 100%);
   border: 4px solid var(--red-border);
   border-radius: 22px;
   z-index: 5;
}

.hinge::before,
.hinge::after {
   content: '';
   position: absolute;
   left: -4px;
   width: calc(100% + 8px);
   height: 10%;
   background: inherit;
   border: 4px solid var(--red-border);
   border-radius: 20px;
}

.hinge::before {
   top: 8%;
}

.hinge::after {
   bottom: 10%;
}

.curve-right {
   right: 4.5%;
   top: 6%;
   width: 42%;
   height: 78%;
   background: var(--red-main);
   border: 4px solid var(--red-border);
   border-radius: 18px 18px 22px 18px;
   z-index: 1;
}

.left-panel {
   left: 6.2%;
   top: 18%;
   width: 38.4%;
   height: 63%;
   z-index: 6;
}

.right-panel {
   right: 7.2%;
   top: 20%;
   width: 34.2%;
   height: 56%;
   z-index: 6;
}

/* topo esquerdo */
.lens {
   position: absolute;
   top: 16%;
   left: 5.2%;
   width: 9.5%;
   aspect-ratio: 1;
   background: #18c7e8;
   border: 4px solid #111;
   border-radius: 50%;
   box-shadow:
      inset -8px -8px 0 rgba(0, 0, 0, 0.08),
      0 0 0 8px #e9e9e9;
}

.lens::before {
   content: '';
   position: absolute;
   top: 14%;
   left: 18%;
   width: 38%;
   height: 24%;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.65);
   transform: rotate(-18deg);
}

.top-lights {
   position: absolute;
   top: 18%;
   left: 24%;
   display: flex;
   gap: 12px;
}

.light {
   width: 22px;
   height: 22px;
   border: 3px solid #111;
   border-radius: 50%;
   display: block;
}

.light.red {
   background: #ff1a1a;
}

.light.yellow {
   background: #f7ea1e;
}

.light.green {
   background: #32ef43;
}

/* miolo esquerdo */
.screen-shell {
   width: 100%;
   height: 100%;
   background: var(--panel-gray);
   border: 4px solid #111;
   border-radius: 20px 20px 18px 48px;
   padding: 18px 22px 14px;
   box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.18);
   display: flex;
   flex-direction: column;
}

.screen-leds {
   display: flex;
   justify-content: center;
   gap: 10px;
   margin-bottom: 10px;
}

.screen-leds span {
   width: 16px;
   height: 16px;
   background: #ff1a1a;
   border: 2px solid #111;
   border-radius: 50%;
}

.main-screen {
   flex: 1;
   background: var(--screen-gray);
   border: 3px solid #111;
   border-radius: 20px 20px 18px 48px;
   padding: 14px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   animation: pulse 2s linear infinite alternate;
}

.pokemon-card {
   display: flex;
   gap: 16px;
   min-height: 0;
}

.pokemon-visual {
   width: 42%;
   min-width: 42%;
   background: #d3d3d3;
   border: 3px solid #a0a0a0;
   border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 14px;
}

.poke-img {
   width: 100%;
   max-width: 170px;
   max-height: 190px;
   object-fit: contain;
   image-rendering: pixelated;
}

.pokemon-info {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.info-group {
   display: flex;
   flex-direction: column;
   gap: 4px;
   min-width: 0;
}

.info-group.small .info-value {
   min-height: 42px;
}

.info-label {
   font-size: 0.95rem;
   font-weight: 700;
   text-transform: uppercase;
}

.info-value {
   width: 100%;
   min-width: 0;
   min-height: 54px;
   border: 3px solid var(--field-border);
   border-radius: 14px;
   background: var(--field-bg);
   display: flex;
   align-items: center;
   padding: 8px 14px;
   font-size: 0.95rem;
   font-weight: 700;
   text-transform: uppercase;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.poke-types {
   gap: 8px;
}

.type-chip {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.info-divider {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 2px 0;
}

.info-divider::before,
.info-divider::after {
   content: '';
   flex: 1;
   height: 4px;
   background: #8e8e8e;
   border-radius: 999px;
}

.info-divider span {
   width: 14px;
   height: 14px;
   background: #8e8e8e;
   border-radius: 50%;
}

.buttons {
   display: flex;
   gap: 18px;
   align-items: center;
   margin-top: 14px;
}

.button {
   flex: 1;
   height: 54px;
   border: 3px solid #111;
   border-radius: 14px;
   background: linear-gradient(180deg, #3c3c3c 0%, #111 100%);
   color: #f4f4f4;
   font-family: inherit;
   font-size: 0.95rem;
   font-weight: 700;
   cursor: pointer;
   box-shadow: 0 4px 0 #000;
}

.button:active {
   transform: translateY(2px);
   box-shadow: 0 2px 0 #000;
}

.button-center-detail {
   width: 54px;
   height: 34px;
   background: #bcbcbc;
   border: 3px solid #8f8f8f;
   border-radius: 8px;
   flex-shrink: 0;
}

.screen-footer {
   margin-top: 8%;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.red-button {
   display: none;
   /* ATENCAO */
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: #ff160d;
   border: 3px solid #111;
}

/* tela direita */
.green-screen {
   width: 100%;
   height: 100%;
   background: var(--blue-screen);
   border: 4px solid #111;
   border-radius: 18px;
   box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.05);
   padding: 26px;
   overflow: hidden;
}

.blue-screen-panel {
   height: 100%;
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.blue-screen-tabs {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 8px;
}

.blue-tab {
   min-width: 0;
   height: 38px;
   border: 3px solid #111;
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.26);
   color: #111;
   font-family: inherit;
   font-size: 0.82rem;
   font-weight: 700;
   text-transform: uppercase;
   cursor: pointer;
}

.blue-tab.is-active {
   background: rgba(255, 255, 255, 0.62);
   box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12);
}

.blue-screen-content {
   flex: 1;
   min-height: 0;
}

.blue-tab-panel {
   display: none;
   height: 100%;
   min-height: 0;
   flex-direction: column;
   gap: 16px;
}

.blue-tab-panel.is-active {
   display: flex;
}

.blue-panel-title {
   width: 100%;
   border: 3px solid #111;
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.42);
   padding: 10px 14px;
   color: #111;
   font-size: 1.25rem;
   font-weight: 700;
   text-align: center;
   text-transform: uppercase;
}

.weakness-list,
.stats-list,
.abilities-list {
   flex: 1;
   min-height: 0;
   display: grid;
   align-content: start;
   overflow-y: auto;
   padding: 4px 8px 12px;
}

.weakness-list {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 18px 20px;
}

.weakness-list .type-chip {
   min-height: 48px;
}

.weakness-list .type-icon {
   width: 112px;
}

.stats-list {
   gap: 10px;
}

.stat-row {
   display: grid;
   grid-template-columns: 54px minmax(0, 1fr) 38px;
   align-items: center;
   gap: 10px;
   min-height: 32px;
   color: #111;
   font-size: 0.82rem;
   font-weight: 700;
}

.stat-name,
.stat-value {
   text-transform: uppercase;
}

.stat-value {
   text-align: right;
}

.stat-bar {
   height: 16px;
   border: 2px solid #111;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.34);
   overflow: hidden;
}

.stat-bar span {
   display: block;
   height: 100%;
   border-right: 2px solid rgba(0, 0, 0, 0.28);
   background: linear-gradient(90deg, #f7ea1e 0%, #32ef43 100%);
}

.abilities-list {
   gap: 12px;
}

.ability-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   min-height: 44px;
   border: 3px solid #111;
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.36);
   padding: 8px 12px;
   color: #111;
   font-size: 0.86rem;
   font-weight: 700;
   text-transform: uppercase;
}

.ability-item small {
   flex-shrink: 0;
   border: 2px solid #111;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.45);
   padding: 3px 6px;
   font-size: 0.58rem;
   font-weight: 700;
   text-transform: uppercase;
}

.screen-empty {
   grid-column: 1 / -1;
   align-self: start;
   border: 3px solid #111;
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.36);
   padding: 14px;
   color: #111;
   font-size: 0.95rem;
   font-weight: 700;
   text-align: center;
   text-transform: uppercase;
}

/* busca */
.form {
   width: min(980px, 82%);
   margin: 7px 0 0 50px;
}

.input-search {
   width: 100%;
   height: 50px;
   border-radius: 18px;
   border: 4px solid #6b6b6b;
   background: #dcdcdc;
   padding: 0 28px;
   font-family: inherit;
   font-size: 1.05rem;
   font-weight: 700;
   color: #444;
   outline: none;
   box-shadow: 0 5px 0 #7f7f7f;
}

.input-search::placeholder {
   color: #666;
}

.card-bg {
   position: absolute;
   width: 8%;
   object-fit: cover;
   z-index: 0;
   margin: 10px;
   opacity: 0.5;
}

@keyframes pulse {
   0% {
      opacity: 1;
   }

   25% {
      opacity: 0.8;
   }

   50% {
      opacity: 0.7;
   }

   75% {
      opacity: 0.8;
   }

   100% {
      opacity: 1;
   }
}

@media (max-width: 1100px) {

   .info-label,
   .info-value,
   .button {
      font-size: 0.8rem;
   }

   .info-value {
      min-height: 44px;
   }

   .type-icon {
      width: 66px;
   }

   .green-screen {
      padding: 18px;
   }

   .blue-screen-panel {
      gap: 10px;
   }

   .blue-tab {
      height: 34px;
      border-radius: 7px;
      font-size: 0.7rem;
   }

   .blue-tab-panel {
      gap: 12px;
   }

   .blue-panel-title {
      font-size: 0.95rem;
      padding: 8px 10px;
   }

   .weakness-list {
      gap: 14px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .weakness-list .type-icon {
      width: 88px;
   }

   .stat-row {
      grid-template-columns: 48px minmax(0, 1fr) 34px;
      gap: 8px;
      font-size: 0.72rem;
   }

   .ability-item {
      min-height: 38px;
      font-size: 0.72rem;
   }

   .button {
      height: 46px;
   }

   .input-search {
      height: 78px;
   }
}

@media (max-width: 820px) {
   body {
      padding: 14px;
   }

   .app {
      gap: 18px;
   }

   .pokemon-card {
      gap: 10px;
   }

   .main-screen {
      padding: 8px;
   }

   .info-label,
   .info-value,
   .button {
      font-size: 0.62rem;
   }

   .info-value {
      min-height: 32px;
      padding: 6px 8px;
      border-radius: 8px;
   }

   .type-icon {
      width: 46px;
   }

   .type-multiplier {
      right: -5px;
      bottom: -5px;
      min-width: 20px;
      padding: 2px 4px;
      font-size: 0.52rem;
      border-width: 1px;
   }

   .green-screen {
      padding: 10px;
      border-radius: 12px;
   }

   .blue-screen-panel {
      gap: 8px;
   }

   .blue-screen-tabs {
      gap: 4px;
   }

   .blue-tab {
      height: 26px;
      border-width: 2px;
      border-radius: 6px;
      font-size: 0.5rem;
   }

   .blue-tab-panel {
      gap: 8px;
   }

   .blue-panel-title {
      border-width: 2px;
      border-radius: 8px;
      padding: 6px 8px;
      font-size: 0.62rem;
   }

   .weakness-list {
      grid-template-columns: 1fr;
      gap: 8px;
      padding: 2px 4px 8px;
   }

   .weakness-list .type-chip {
      min-height: 32px;
   }

   .weakness-list .type-icon {
      width: 58px;
   }

   .stats-list,
   .abilities-list {
      gap: 6px;
      padding: 2px 4px 8px;
   }

   .stat-row {
      grid-template-columns: 38px minmax(0, 1fr) 26px;
      gap: 6px;
      min-height: 24px;
      font-size: 0.52rem;
   }

   .stat-bar {
      height: 11px;
      border-width: 1px;
   }

   .ability-item {
      min-height: 30px;
      border-width: 2px;
      border-radius: 8px;
      padding: 6px 8px;
      font-size: 0.54rem;
   }

   .ability-item small {
      border-width: 1px;
      padding: 2px 4px;
      font-size: 0.44rem;
   }

   .screen-empty {
      border-width: 2px;
      border-radius: 8px;
      padding: 8px;
      font-size: 0.58rem;
   }

   .button {
      height: 34px;
      border-radius: 10px;
   }

   .button-center-detail {
      width: 34px;
      height: 22px;
   }

   .speaker {
      width: 72px;
   }

   .red-button {
      width: 26px;
      height: 26px;
   }

   .input-search {
      height: 62px;
      font-size: 0.9rem;
      border-radius: 14px;
   }
}