/* Shared You-Draw-It chart styles (editor / quiz / share) */

.ydi-chart-wrap {
  margin-bottom: 0;
  position: relative;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 16px;
}

.ydi-chart-wrap h2 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.4;
  text-align: center;
}

.ydi-chart-wrap svg {
  display: block;
  margin: 0 auto;
  overflow: visible;
  font: 600 13px/1.2 'Klee One', cursive;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.ydi-grid line {
  stroke: #e0e0e0;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.ydi-chart-wrap .axis path,
.ydi-chart-wrap .axis line {
  stroke: #ccc;
  shape-rendering: crispEdges;
}
.ydi-chart-wrap .axis text {
  fill: #888;
  font-size: 12px;
}

.ydi-known-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ydi-actual-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ydi-user-line {
  fill: none;
  stroke-width: 3;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
}

.ydi-drag-rect {
  fill: transparent;
  cursor: pointer;
  touch-action: none;
  pointer-events: all;
}

.ydi-flash-rect {
  fill: rgba(255, 200, 0, 0.7);
  fill-opacity: 0;
}
.ydi-flash-rect.ydi-pending {
  animation: ydi-flash 0.6s ease-in-out alternate infinite;
}

@keyframes ydi-flash {
  from { fill-opacity: 0; }
  to   { fill-opacity: 0.5; }
}

.ydi-annotations rect { pointer-events: none; }
.ydi-annotations text { pointer-events: none; }

.ydi-value-label {
  font-size: 13px;
  font-weight: 700;
}

.ydi-draw-prompt {
  font-size: 15px;
  font-weight: 600;
  fill: #999;
  text-anchor: middle;
  pointer-events: none;
  transition: opacity 0.3s;
}

.ydi-endpoint {
  transition: opacity 0.3s;
}

.ydi-drag-started .ydi-draw-prompt {
  opacity: 0;
}
.ydi-drag-started .ydi-flash-rect.ydi-pending {
  animation: ydi-flash 0.4s ease-in-out alternate infinite;
}

.ydi-button-area {
  text-align: center;
  padding: 16px 0;
  transition: opacity 0.3s;
}
.ydi-button {
  display: inline-block;
  padding: 10px 28px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #333;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.25;
  pointer-events: none;
  transition: opacity 0.3s, background 0.2s;
}
.ydi-ready .ydi-button {
  opacity: 1;
  pointer-events: auto;
}
.ydi-button:hover {
  background: #555;
}

.ydi-after-reveal {
  text-align: center;
  padding: 24px 0 16px;
  font-size: 0.95rem;
  color: #555;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.5s 0.6s, max-height 0.5s 0.6s;
}
.ydi-guessed .ydi-button-area {
  display: none;
}
.ydi-guessed .ydi-after-reveal {
  opacity: 1;
  max-height: 300px;
}
.ydi-guessed .ydi-drag-rect {
  pointer-events: none;
}

.ydi-score {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 14px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.9rem;
}
.ydi-score-good { background: #d4edda; color: #155724; }
.ydi-score-ok   { background: #fff3cd; color: #856404; }
.ydi-score-off  { background: #f8d7da; color: #721c24; }

.ydi-divider {
  stroke: #ccc;
  stroke-width: 1;
  stroke-dasharray: 4 3;
  shape-rendering: crispEdges;
}

.ydi-legend {
  opacity: 0;
  transition: opacity 0.5s 0.8s;
}
.ydi-guessed .ydi-legend {
  opacity: 1;
}
.ydi-legend-label {
  font-size: 12px;
  font-weight: 600;
}

.ydi-chart-wrap.ydi-sketchy {
  background: #fffdf7;
  border-radius: 4px;
  box-shadow: 2px 3px 12px rgba(0,0,0,0.1);
  transform: rotate(-0.3deg);
}
.ydi-chart-wrap.ydi-sketchy h2 { font-family: 'Klee One', cursive; font-size: 1.3rem; }
.ydi-chart-wrap.ydi-sketchy svg { font: 300 14px/1.2 'Klee One', cursive; }
.ydi-chart-wrap.ydi-sketchy .ydi-grid line { stroke: #c8ddf0; stroke-width: 0.8; opacity: 0.6; }
.ydi-chart-wrap.ydi-sketchy .axis path,
.ydi-chart-wrap.ydi-sketchy .axis .domain { display: none; }
.ydi-chart-wrap.ydi-sketchy .axis .tick line { stroke: #bbb; stroke-width: 0.5; }
.ydi-chart-wrap.ydi-sketchy .axis text { fill: #555; font-size: 14px; font-family: 'Klee One', cursive; }
.ydi-chart-wrap.ydi-sketchy .ydi-value-label { font-family: 'Klee One', cursive; font-size: 14px; }
.ydi-chart-wrap.ydi-sketchy .ydi-legend-label { font-family: 'Klee One', cursive; font-size: 13px; }
.ydi-chart-wrap.ydi-sketchy .ydi-draw-prompt { font-family: 'Klee One', cursive; }

@media (max-width: 768px) {
  .ydi-chart-wrap h2 { font-size: 1.05rem; }
  .ydi-chart-wrap.ydi-sketchy h2 { font-size: 1.2rem; }
}

@media (max-width: 480px) {
  .ydi-chart-wrap h2 { font-size: 1rem; }
  .ydi-chart-wrap.ydi-sketchy h2 { font-size: 1.1rem; }
  .ydi-draw-prompt { font-size: 13px; }
  .ydi-value-label { font-size: 11px; }
  .ydi-chart-wrap.ydi-sketchy .ydi-value-label { font-size: 12px; }
}