/* The Tool Bakery - Pokemon Original 151 Quiz
   Palette inspired by classic Pokémon colors:
   - Poké Ball Red / White / Black
   - Electric Yellow accents
   - Cerulean / Indigo Blues
   Aim: bright, playful, readable, and accessible contrasts. */

:root{
  /* Core palette */
  --po151q-red:    #E3350D;  /* Poké Ball red */
  --po151q-red-d:  #C62810;
  --po151q-yellow: #FFD400;  /* electric accent */
  --po151q-blue:   #2A75BB;  /* cerulean */
  --po151q-indigo: #3C5AA6;  /* classic logo blue */
  --po151q-white:  #FFFFFF;
  --po151q-black:  #1E1E1E;

  /* UI neutrals */
  --po151q-bg:     #FAFBFF;  /* very light cool bg */
  --po151q-card:   #FFFFFF;
  --po151q-border: #E6E7EC;
  --po151q-muted:  #6B7280;
  --po151q-shadow: rgba(0,0,0,0.08);

  /* Feedback / states */
  --po151q-right:  #2E7D32;  /* success */
  --po151q-wrong:  #B71C1C;  /* error */
  --po151q-focus:  #FFD400;  /* yellow focus ring */

  /* Text */
  --po151q-text:   #18202A;
}

/* Base wrapper */
.ttb-po151q-wrap{
  max-width: 760px;
  margin: 24px auto;
  padding: 0 12px;
  color: var(--po151q-text);
}

/* Card with subtle Poké-vibe: white panel, blue rim, soft shadow */
.ttb-po151q-card{
  background: var(--po151q-card);
  border: 2px solid var(--po151q-indigo);
  border-radius: 14px;
  box-shadow: 0 8px 24px var(--po151q-shadow);
  padding: 18px;
  position: relative;
}

/* Thin red top stripe like a nod to a Poké Ball band */
.ttb-po151q-card::before{
  content:"";
  position:absolute;
  left:12px; right:12px; top:10px;
  height:6px;
  background: linear-gradient(90deg, var(--po151q-red), #ff5a36);
  border-radius: 4px;
  opacity:.9;
}

/* Header */
.ttb-po151q-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  border-bottom: 1px solid var(--po151q-border);
  padding: 16px 0 12px;
  margin-top: 8px; /* make room for top stripe */
  margin-bottom: 14px;
}

.ttb-po151q-title{
  margin:0;
  font-size: 22px;
  letter-spacing: .3px;
  color: var(--po151q-blue);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

.ttb-po151q-progress{
  font-size: 14px;
  color: var(--po151q-muted);
}

/* Intro text */
.ttb-po151q-intro{
  margin: 6px 0 14px;
}

/* Fact box: blue edge + pale yellow background for energy */
.ttb-po151q-fact{
  background: #FFF7CF; /* soft electric yellow */
  border-left: 6px solid var(--po151q-blue);
  padding: 12px 12px 12px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
}

/* Options grid */
.ttb-po151q-options{
  display:grid;
  gap: 10px;
  grid-template-columns: 1fr;
  margin: 12px 0;
}

/* Option buttons: white chip with bold outline on hover/focus */
.ttb-po151q-option{
  display:flex;
  align-items:center;
  gap: 10px;
  background: var(--po151q-white);
  border: 2px solid var(--po151q-border);
  padding: 12px 14px;
  border-radius: 10px;
  cursor:pointer;
  font-size: 16px;
  color: var(--po151q-text);
  transition: transform .06s ease, box-shadow .06s ease, border-color .12s ease, background .12s ease;
  outline: none;
}
.ttb-po151q-option:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px var(--po151q-shadow);
  border-color: var(--po151q-indigo);
  background: var(--po151q-indigo);
}
.ttb-po151q-option:focus-visible{
  box-shadow: 0 0 0 3px var(--po151q-focus), 0 6px 14px var(--po151q-shadow);
}

/* Small key badge styled like a tiny Poké Ball */
.ttb-po151q-key{
  --size: 26px;
  position: relative;
  width: var(--size);
  height: var(--size);
  line-height: var(--size);
  border-radius: 999px;
  text-align:center;
  font-weight: 800;
  font-size: 12px;
  color: var(--po151q-black);
  border: 2px solid var(--po151q-black);
  background:
    linear-gradient(180deg, var(--po151q-red) 0 48%, var(--po151q-white) 52% 100%);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ttb-po151q-key::after{
  /* center circle */
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--po151q-white);
  border: 2px solid var(--po151q-black);
  z-index: -1;
}

/* Answer states */
.ttb-po151q-right{
  border-color: #BFE3C2 !important;
  background: #ECF8ED !important;
  box-shadow: inset 0 0 0 2px var(--po151q-right);
  color: #0D3B12;
}
.ttb-po151q-wrong{
  border-color: #F3C4C4 !important;
  background: #FFF0F0 !important;
  box-shadow: inset 0 0 0 2px var(--po151q-wrong);
  color: #4A1111;
}
.ttb-po151q-right:hover,
.ttb-po151q-wrong:hover{
  color: inherit;
}
.ttb-po151q-disabled{
  opacity: .72;
}

/* Actions */
.ttb-po151q-actions{
  margin-top: 6px;
  display:flex;
  justify-content:flex-end;
  gap: 8px;
}

/* Buttons */
.ttb-po151q-btn{
  border: 2px solid var(--po151q-black);
  background: var(--po151q-yellow);
  color: var(--po151q-black);
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
  transition: transform .06s ease, box-shadow .06s ease, filter .12s ease, background .12s ease;
}
.ttb-po151q-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px var(--po151q-shadow);
  filter: brightness(1.05);
}
.ttb-po151q-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--po151q-focus), 0 6px 14px var(--po151q-shadow);
}
.ttb-po151q-btn:disabled{
  opacity: .6;
  cursor: default;
  box-shadow: none;
}
.ttb-po151q-btn-primary{
  background: linear-gradient(180deg, var(--po151q-red), var(--po151q-red-d));
  color: var(--po151q-white);
  margin-top:10px;
}

/* Feedback text */
.ttb-po151q-feedback{
  margin-top: 8px;
  font-weight: 700;
  color: var(--po151q-indigo);
}

/* Score */
.ttb-po151q-score{
  margin: 8px 0 12px;
  font-size: 20px;
  color: var(--po151q-red);
  font-weight: 800;
}

/* Summary */
.ttb-po151q-summary{
  display: grid;
  gap: 10px;
}
.ttb-po151q-summary-row{
  background: var(--po151q-bg);
  border: 1px solid var(--po151q-border);
  border-radius: 10px;
  padding: 10px;
}
.ttb-po151q-summary-row.po151q-ok{
  border-left: 5px solid var(--po151q-right);
}
.ttb-po151q-summary-row.po151q-bad{
  border-left: 5px solid var(--po151q-wrong);
}
.ttb-po151q-summary-num{
  font-weight: 900;
  color: var(--po151q-blue);
}
.ttb-po151q-summary-fact{
  margin: 4px 0 6px;
}
.ttb-po151q-summary-ans strong{
  color: var(--po151q-text);
}

/* Footer tip */
.ttb-po151q-footnote{
  margin-top: 10px;
  font-size: 13px;
  color: var(--po151q-muted);
}

/* Mobile tweaks */
@media (max-width: 520px){
  .ttb-po151q-card{ padding: 14px; }
  .ttb-po151q-title{ font-size: 20px; }
  .ttb-po151q-option{ font-size: 15px; }
}

.ttb-po151q-z {
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #E3350D;
	z-index: 1;
}