/* Awful Deals Toys — shared game/tool styling.
   Works with the Awful Deals theme tokens, with fallbacks so the
   toys survive in any theme. */

.awful-toy {
  --ink: var(--ad-ink, #141414);
  --paper: var(--ad-paper, #f7f1e3);
  --red: var(--ad-red, #e02418);
  --yellow: var(--ad-yellow, #ffd400);
  --blue: var(--ad-blue, #2f7bd1);
  --white: var(--ad-white, #fffdf7);
  --mono: var(--ad-mono, 'Courier New', monospace);
  --display: var(--ad-display, 'Bangers', 'Arial Black', sans-serif);
  background: var(--white);
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 20px 22px;
  margin: 28px 0;
  font-size: 16px;
}
.awful-toy__title { font-family: var(--display); letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 4px; font-size: 1.5rem; }
.awful-toy__blurb { margin: 0 0 14px; font-style: italic; }

.awful-btn {
  display: inline-block; cursor: pointer;
  font-family: var(--display); font-size: 1.05rem; letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--yellow); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  padding: 8px 16px; margin: 4px 6px 4px 0;
  transition: transform .08s ease;
}
.awful-btn:hover { transform: translate(-1px,-1px) rotate(-1deg); }
.awful-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.awful-btn--red, .awful-toy .awful-btn--red { background: var(--red); color: #fff; }
.awful-btn--ghost { background: var(--white); }
.awful-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.awful-log {
  font-family: var(--mono); font-size: .82rem;
  background: var(--ink); color: #d7f7c8;
  padding: 12px 14px; margin-top: 12px;
  max-height: 220px; overflow-y: auto;
  border: 3px solid var(--ink);
}
.awful-log p { margin: 0 0 6px; }
.awful-log .bad { color: #ff8d85; }
.awful-log .good { color: #ffe98a; }

.awful-hpbar { background: var(--paper); border: 3px solid var(--ink); height: 24px; position: relative; margin: 4px 0 10px; }
.awful-hpbar__fill { height: 100%; background: var(--red); transition: width .4s ease; }
.awful-hpbar__fill--you { background: var(--blue); }
.awful-hpbar__label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: bold; font-size: .75rem; color: var(--ink);
  text-shadow: 0 0 4px rgba(255,255,255,.7);
}
.awful-fighters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.awful-fighter__name { font-family: var(--display); letter-spacing: 1px; font-size: 1.1rem; text-transform: uppercase; }
.awful-fighter__status { font-family: var(--mono); font-size: .72rem; color: #777; }
@media (max-width: 640px) { .awful-fighters { grid-template-columns: 1fr; } }

.awful-stat {
  display: inline-block; font-family: var(--mono); font-size: .78rem; font-weight: bold;
  border: 2px solid var(--ink); background: var(--paper);
  padding: 3px 10px; margin: 3px 6px 3px 0;
}
.awful-bigprice { font-family: var(--display); font-size: 2.4rem; letter-spacing: 2px; }
.awful-bigprice .down { color: var(--red); }
.awful-bigprice .up { color: #1c8a3c; }

.awful-verdict {
  border: 4px dashed var(--red); background: #fff3f2;
  padding: 14px 18px; margin-top: 12px;
  font-size: 1.05rem;
}
.awful-verdict--flash { animation: awful-flash .5s ease 2; }
@keyframes awful-flash { 50% { background: var(--yellow); } }

.awful-field { display: block; margin: 8px 0; }
.awful-field label { font-family: var(--mono); font-size: .78rem; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; display: block; margin-bottom: 3px; }
.awful-field select, .awful-field input[type="text"] {
  width: 100%; max-width: 420px; padding: 8px 10px;
  border: 3px solid var(--ink); background: var(--white);
  font-family: var(--mono); font-size: .95rem;
}
.awful-field input[type="range"] { width: 100%; max-width: 420px; accent-color: var(--red); }

/* gauge */
.awful-gauge { width: 260px; max-width: 100%; margin: 6px auto; display: block; }
.awful-gauge .needle { transform-origin: 130px 130px; transition: transform 1.2s cubic-bezier(.2,1.6,.4,1); }

/* board */
.awful-board-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 12px; }
.awful-board-member { border: 3px solid var(--ink); background: var(--paper); padding: 10px 12px; }
.awful-board-member .who { font-size: 1.6rem; }
.awful-board-member .role { font-family: var(--display); letter-spacing: 1px; text-transform: uppercase; }
.awful-board-member .bio { font-family: var(--mono); font-size: .74rem; }

/* review output */
.awful-review {
  border: 3px solid var(--ink); background: var(--paper);
  font-family: var(--mono); font-size: .86rem;
  padding: 14px; margin-top: 12px; white-space: pre-wrap;
}
.awful-stars { color: var(--red); font-size: 1.2rem; letter-spacing: 3px; }

/* clock */
.awful-clock { text-align: center; }
.awful-clock__digits { font-family: var(--display); font-size: clamp(2rem, 7vw, 3.6rem); letter-spacing: 3px; }
.awful-clock__digits .unit { font-size: .35em; color: #777; letter-spacing: 1px; }
.awful-clock__note { font-family: var(--mono); font-size: .74rem; color: #777; }

.awful-shake { animation: awful-shake .4s ease; }
@keyframes awful-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px) rotate(-1deg); }
  75% { transform: translateX(6px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .awful-shake, .awful-verdict--flash { animation: none !important; }
  .awful-gauge .needle { transition: none; }
}