/* PokéGenerator Forum — stile forum 2005 */
body {
  margin: 0;
  padding: 10px 16px;
  background: #e5e9f0 repeating-linear-gradient(0deg, #e5e9f0 0, #e5e9f0 2px, #dfe4ec 2px, #dfe4ec 4px);
  color: #000;
  font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
a { color: #22229c; }
a:hover { color: #ff4400; text-decoration: none; }
.small { font-size: 10px; color: #444; }
.center { text-align: center; }
.px { image-rendering: pixelated; image-rendering: crisp-edges; }

.wrap {
  width: 100%;
  max-width: 880px;
  background: #fff;
  border: 1px solid #0b198c;
  padding: 6px;
}

/* intestazione */
.header {
  background: linear-gradient(#5c7fc8, #1c3b8f 55%, #0b198c);
  border: 1px solid #0b198c;
  color: #fff;
}
.logo-cell { width: 100px; padding: 0 4px; }
.header h1 {
  margin: 0;
  font: bold 26px "Trebuchet MS", Verdana, sans-serif;
  letter-spacing: -1px;
  text-shadow: 2px 2px 0 #06104f;
}
.tagline { font-style: italic; color: #ffd94a; }
.header-links { text-align: right; padding: 0 10px; white-space: nowrap; vertical-align: bottom; padding-bottom: 8px; }
.header-links a { color: #fff; font-weight: bold; }
.header-links .small { color: #cfd9f5; }

.marquee {
  margin: 4px 0;
  padding: 3px 0;
  background: #fffbcc;
  border: 1px solid #d4c35a;
  color: #a00;
  font-weight: bold;
}
.breadcrumb {
  margin: 4px 0;
  padding: 5px 6px;
  background: #f5f5ff;
  border: 1px solid #b8c3e0;
}

/* riquadri in stile tabella del forum */
.box { background: #0b198c; margin: 8px 0; }
.box .cat {
  padding: 6px 8px;
  background: linear-gradient(#6f8fd6, #2b4ba6 50%, #1a358a);
  color: #fff;
  font: bold 12px Verdana, sans-serif;
  text-align: left;
}
.box .subhead td {
  padding: 3px 8px;
  background: linear-gradient(#f4f6fb, #c9d2e6);
  color: #0b198c;
  font-weight: bold;
  font-size: 10px;
}
.box .row td { padding: 8px; background: #f1f3fa; vertical-align: top; line-height: 1.6; }
.box .row td + td { background: #e6e9f4; }
.box .row td + td + td { background: #f1f3fa; }
.box .row td[colspan] { background: #f1f3fa; }

label { font-weight: bold; }
input, select {
  font: 11px Verdana, sans-serif;
  background: #fff;
  border: 1px solid #7f9db9;
  padding: 2px;
  margin: 2px 0;
}
input[type=number] { width: 48px; }
.quick { display: inline-block; margin-left: 4px; }

.btn {
  font: 11px Verdana, sans-serif;
  color: #000;
  background: linear-gradient(#fff, #d6d3ce);
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  outline: 1px solid #404040;
  padding: 3px 10px;
  margin: 3px 4px;
  cursor: pointer;
}
.btn:active { border-color: #808080 #fff #fff #808080; background: #d6d3ce; }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.btn.mini { padding: 1px 6px; margin: 2px 1px; }
.btn.big { font-weight: bold; font-size: 13px; padding: 5px 24px; }

.notice {
  margin: 8px 0;
  padding: 6px 8px;
  background: #fff4f4;
  border: 1px solid #c00;
  color: #a00;
  font-weight: bold;
}

/* risultati */
.results { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.empty { padding: 24px 0; color: #666; font-style: italic; }
.card {
  width: 152px;
  background: #fff;
  border: 1px solid #98aab1;
  text-align: center;
}
.card-head {
  padding: 2px 4px;
  background: linear-gradient(#f4f6fb, #c9d2e6);
  border-bottom: 1px solid #98aab1;
  color: #0b198c;
  font-size: 10px;
  text-align: left;
}
.card img { width: 144px; height: 144px; display: block; margin: 0 auto; }
.card .name { font: bold 13px "Trebuchet MS", Verdana, sans-serif; color: #0b198c; }
.card .types { margin: 3px 0; }
.type {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 1px;
  border: 1px solid rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .55);
}
.cx { padding: 3px 0 5px; border-top: 1px dotted #98aab1; margin-top: 4px; font-size: 10px; }
.bar { display: inline-block; vertical-align: middle; border: 1px solid #555; background: #fff; line-height: 0; padding: 1px; }
.bar i { display: inline-block; width: 6px; height: 8px; margin-right: 1px; background: #ddd; }
.bar i:last-child { margin-right: 0; }
.bar i.on { background: linear-gradient(#ffb347, #e05a00); }

/* piè di pagina */
.footer { margin-top: 10px; padding: 8px; text-align: center; font-size: 10px; color: #555; line-height: 1.7; }
.badge {
  display: inline-block;
  width: 86px;
  height: 14px;
  line-height: 14px;
  margin: 0 2px 4px;
  border: 1px solid #000;
  color: #fff;
  font: bold 9px/14px Verdana, sans-serif;
}
.b1 { background: linear-gradient(90deg, #f60 40%, #333 40%); }
.b2 { background: linear-gradient(90deg, #06c 40%, #333 40%); }
.b3 { background: linear-gradient(90deg, #090 40%, #333 40%); }
.b4 { background: linear-gradient(90deg, #c00 40%, #333 40%); }

/* schermi piccoli: le tre colonne vanno una sotto l'altra */
@media (max-width: 600px) {
  body { padding: 6px; }
  .header-links { display: none; }
  .header h1 { font-size: 19px; }
  .logo-cell, .logo-cell img { width: 56px; height: 56px; }
  .box .subhead { display: none; }
  .box .row, .box .row td { display: block; }
  .box .row td { width: auto; border-top: 1px solid #0b198c; }
  .card { width: 138px; }
  .card img { width: 96px; height: 96px; }
}

/* le schede dei risultati sono link alla pagina del Pokémon */
a.card { display: block; color: #000; text-decoration: none; cursor: pointer; }
a.card:hover { color: #000; border-color: #ff4400; background: #fffbe8; }
a.card:hover .name { color: #ff4400; text-decoration: underline; }

/* scheda Pokémon (pokemon.html): sprite a sinistra, dati a destra */
.profile .row td.profile-left { width: 300px; text-align: center; background: #e6e9f4; }
.profile .row td.profile-right { background: #f1f3fa; }
.avatar { background: #fff; border: 1px solid #98aab1; margin-bottom: 6px; }
.avatar img { display: block; margin: 0 auto; width: 288px; height: 288px; }
.profile-left .name { font: bold 18px "Trebuchet MS", Verdana, sans-serif; color: #0b198c; }
.profile-left .types { margin: 6px 0; }
.navlinks { margin-top: 8px; }
a.btn { display: inline-block; text-decoration: none; }
a.btn:hover { color: #000; }
.box .row .info th, .box .row .info td,
.box .row .stats th, .box .row .stats td {
  padding: 4px 6px;
  background: none;
  border-bottom: 1px dotted #98aab1;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.info th, .stats th { width: 130px; color: #0b198c; white-space: nowrap; }
.subtitle {
  margin: 12px 0 2px;
  padding: 3px 6px;
  background: linear-gradient(#f4f6fb, #c9d2e6);
  border: 1px solid #98aab1;
  color: #0b198c;
  font-weight: bold;
}
.box .row .stats td.num { width: 30px; text-align: right; font-weight: bold; }
.statbar { height: 10px; border: 1px solid #555; background: #fff; }
.statbar div { height: 100%; }
.statbar .low { background: linear-gradient(#ff8a7a, #c8321e); }
.statbar .mid { background: linear-gradient(#ffd45a, #d99a00); }
.statbar .high { background: linear-gradient(#8fd96a, #3a9a1e); }
.box .row .stats tr.total th, .box .row .stats tr.total td { border-bottom: 0; }

@media (max-width: 600px) {
  .profile .row td.profile-left { width: auto; }
  .avatar img { width: 192px; height: 192px; }
  .box .row .info, .box .row .stats { display: table; }
  .box .row .info tr, .box .row .stats tr { display: table-row; }
  .box .row .info th, .box .row .info td,
  .box .row .stats th, .box .row .stats td { display: table-cell; border-top: 0; }
  .info th, .stats th { width: 96px; white-space: normal; }
}

/* barra di navigazione sotto l'intestazione */
.navbar { margin: 4px 0; padding: 4px; background: linear-gradient(#f4f6fb, #c9d2e6); border: 1px solid #0b198c; text-align: center; }
.navbar a { display: inline-block; margin: 2px 3px; padding: 4px 12px; background: linear-gradient(#fff, #d6d3ce); border: 2px solid; border-color: #fff #808080 #808080 #fff; outline: 1px solid #404040; color: #000; font-weight: bold; text-decoration: none; }
.navbar a:hover { color: #ff4400; }

/* pagina di disegno (draw.html): riferimento a sinistra, tela a destra */
/* layout fisso: la tela ingrandita scorre dentro il suo riquadro invece di allargare la pagina */
.draw { table-layout: fixed; }
.draw th:first-child { width: 300px; }
.draw .row td.draw-left { width: 300px; text-align: center; background: #e6e9f4; }
.draw .row td.draw-right { background: #f1f3fa; }
.draw-left .name { font: bold 18px "Trebuchet MS", Verdana, sans-serif; color: #0b198c; }
.draw-left .types { margin: 6px 0; }
.draw-left .subtitle { text-align: left; }
.ref-wrap { position: relative; width: 288px; max-width: 100%; aspect-ratio: 1; margin: 0 auto 6px; background: #fff; border: 1px solid #98aab1; cursor: crosshair; touch-action: manipulation; }
.ref-wrap canvas { display: block; width: 100%; height: 100%; }
.ref-marker { position: absolute; box-sizing: border-box; border: 1px solid #f00; outline: 1px solid #fff; pointer-events: none; }

.swatch { display: inline-block; width: 18px; height: 18px; margin: 1px; border: 1px solid #000; outline: 1px solid #fff; vertical-align: middle; cursor: pointer; }
.swatch.big { width: 30px; height: 30px; cursor: default; }
.swatch.sel { outline: 2px solid #ff4400; }
.palette { margin-left: 6px; }
#custom { width: 40px; height: 30px; padding: 0; vertical-align: middle; }
.checks { margin: 4px 0; }
.score { margin: 6px 0; padding: 6px; background: #fff; border: 1px solid #98aab1; text-align: left; line-height: 1.6; }
.score .big { font: bold 20px "Trebuchet MS", Verdana, sans-serif; color: #0b198c; }
.legend { text-align: left; line-height: 1.9; }
.key { display: inline-block; width: 10px; height: 10px; border: 1px solid #000; vertical-align: middle; margin-left: 4px; }
.k-ok { background: #2fbf3a; } .k-color { background: #ff9a1a; } .k-miss { background: #ffe81a; } .k-extra { background: #e81a1a; }

.toolbar { margin-bottom: 4px; padding: 2px; background: #d6d3ce; border: 1px solid; border-color: #fff #808080 #808080 #fff; }
.toolbar .btn { margin: 2px; padding: 3px 7px; }
.btn.tool.on { border-color: #808080 #fff #fff #808080; background: #fff8c8; font-weight: bold; }
.opt { display: inline-block; margin: 3px 6px; font-weight: normal; white-space: nowrap; }
.opt input { vertical-align: middle; }

.viewport-wrap { position: relative; }
.mini-ref { position: absolute; top: 6px; right: 22px; z-index: 2; width: 96px; height: 96px; background: #fff; border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0, 0, 0, .4); pointer-events: none; }
.viewport { display: flex; height: 520px; max-height: 70vh; overflow: auto; background: #808080; border: 2px solid; border-color: #404040 #fff #fff #404040; }
.stage { position: relative; flex: none; margin: auto; background: #fff; box-shadow: 0 0 0 1px #000; touch-action: none; cursor: crosshair; }
.stage.checker { background: repeating-conic-gradient(#fff 0 25%, #cfcfcf 0 50%) 0 0 / 16px 16px; }
.stage .layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
#onion { opacity: .4; }
#diff { opacity: .8; }
.grid { background-image: linear-gradient(to right, rgba(0, 0, 0, .18) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, .18) 1px, transparent 1px); }
.axis { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-left: 1px dashed #0a0; pointer-events: none; }
.marquee-sel { position: absolute; box-sizing: border-box; border: 1px dashed #000; outline: 1px dashed #fff; outline-offset: -2px; pointer-events: none; }
.statusbar { margin: 4px 0; padding: 2px 6px; background: #d6d3ce; border: 1px solid; border-color: #808080 #fff #fff #808080; font-family: "Courier New", monospace; }

@media (max-width: 600px) {
  .draw .row td.draw-left, .draw th:first-child { width: auto; }
  .draw tr:first-child th + th { display: none; }
  .ref-wrap { width: 192px; }
}
/* dita: bottoni e colori più grandi */
@media (pointer: coarse) {
  .toolbar .btn, .draw-left .btn { padding: 8px 10px; }
  .swatch { width: 28px; height: 28px; margin: 2px; }
  .opt { margin: 8px 8px; }
}