/* ── FlashArtist — Game-specific styles ────────────────────────────────────
   Base styles (body, btn, card, etc.) are in sdk/sdk.css
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Mode toggle ── */
.mode-toggle { display:flex; gap:3px; background:rgba(255,255,255,0.05); border-radius:10px; padding:3px; }
.mode-btn {
  padding:6px 14px; border-radius:8px; border:none; cursor:pointer;
  font-family:'Fredoka',sans-serif; font-size:13px; font-weight:600;
  color:var(--text-dim); background:transparent; transition:all 0.2s;
}
.mode-btn.active { background:rgba(249,211,66,0.2); color:var(--gold); }

/* ── Word choice cards ── */
.word-card {
  flex:1; max-width:200px; padding:28px 20px;
  background:var(--card-bg); border:2px solid var(--border);
  border-radius:20px; text-align:center; cursor:pointer;
  transition:all 0.25s;
}
.word-card:hover  { transform:translateY(-6px) scale(1.02); border-color:rgba(249,211,66,0.5); }
.word-card.chosen { border-color:var(--gold); background:rgba(249,211,66,0.1); transform:scale(1.05); }
.word-card-text   { font-size:22px; font-weight:700; }

/* ── Drawing header ── */
.draw-header {
  display:flex; justify-content:space-between; align-items:center;
  width:100%; max-width:720px; margin-bottom:10px; flex-wrap:wrap; gap:8px;
}
.draw-word-badge {
  padding:6px 16px; border-radius:20px; font-size:15px; font-weight:600;
  background:rgba(249,211,66,0.12); border:1px solid rgba(249,211,66,0.3); color:var(--gold);
}

/* ── Shape toolbar ── */
.shape-toolbar { display:flex; gap:8px; margin-bottom:10px; justify-content:center; flex-wrap:wrap; }
.shape-btn {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 14px; border-radius:12px; border:2px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.05); cursor:pointer;
  font-family:'Fredoka',sans-serif; color:var(--text);
  transition:all 0.2s; min-width:68px;
}
.shape-btn:hover:not(:disabled) { border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.1); }
.shape-btn.active  { border-color:var(--gold); background:rgba(249,211,66,0.15); color:var(--gold); }
.shape-btn:disabled { opacity:0.3; cursor:default; }
.shape-icon  { font-size:20px; line-height:1; }
.shape-name  { font-size:11px; font-weight:600; }
.shape-count { font-size:20px; font-weight:700; color:var(--gold); }

/* ── Free-mode drawing tools ── */
.tool-row { display:flex; align-items:center; gap:12px; margin-bottom:10px; justify-content:center; flex-wrap:wrap; }
.color-picker { display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:center; }
.color-dot { width:26px; height:26px; border-radius:50%; border:2px solid rgba(255,255,255,0.15); cursor:pointer; transition:all 0.2s; }
.color-dot:hover  { transform:scale(1.15); }
.color-dot.active { border:3px solid white; transform:scale(1.2); box-shadow:0 0 8px rgba(255,255,255,0.3); }
.tool-sep  { width:1px; height:26px; background:rgba(255,255,255,0.12); }
.size-picker { display:flex; gap:8px; align-items:center; }
.size-btn {
  border-radius:50%; background:white; border:2px solid rgba(255,255,255,0.2);
  cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.size-btn.active { border-color:var(--gold); box-shadow:0 0 8px rgba(249,211,66,0.4); }

/* ── Stroke actions ── */
.stroke-actions { display:none; gap:12px; width:100%; max-width:720px; margin-bottom:10px; }
.stroke-actions.visible { display:flex; }
.btn-validate {
  flex:1; padding:13px; font-size:17px; border-radius:14px;
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:white; border:none; cursor:pointer; font-family:'Fredoka',sans-serif;
  font-weight:700; transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-validate:hover { filter:brightness(1.1); transform:translateY(-1px); }
.btn-cancel-stroke {
  flex:1; padding:13px; font-size:17px; border-radius:14px;
  background:rgba(231,76,60,0.15); border:2px solid rgba(231,76,60,0.35);
  color:var(--red); cursor:pointer; font-family:'Fredoka',sans-serif;
  font-weight:700; transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-cancel-stroke:hover { background:rgba(231,76,60,0.25); transform:translateY(-1px); }

/* ── Canvas ── */
.canvas-wrap {
  width:100%; max-width:720px; aspect-ratio:4/3;
  border-radius:16px; overflow:hidden; position:relative;
  border:2px solid rgba(255,255,255,0.08); background:white;
}
.canvas-wrap canvas { width:100%; height:100%; display:block; touch-action:none; }
.canvas-wrap.active-border { border-color:rgba(249,211,66,0.4); }

/* ── Drawings grid ── */
/* ── Guessing: focus layout ── */
.guessing-layout {
  display:flex; gap:20px; align-items:flex-start; justify-content:center;
  width:100%; max-width:960px; flex-wrap:wrap;
}

/* Focus panel */
.focus-panel { display:flex; flex-direction:column; align-items:center; gap:10px; flex:1; min-width:280px; }

.focus-nav {
  display:flex; align-items:center; gap:10px; width:100%;
}

.focus-arrow {
  background:rgba(255,255,255,0.07); border:2px solid rgba(255,255,255,0.12);
  color:var(--text); font-size:32px; line-height:1; width:44px; height:44px;
  border-radius:12px; cursor:pointer; transition:all 0.15s; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-family:sans-serif;
}
.focus-arrow:hover { background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.28); }
.focus-arrow:disabled { opacity:0.25; cursor:default; }

.focus-canvas-wrap {
  flex:1; position:relative; border-radius:16px; overflow:hidden;
  border:2px solid rgba(255,255,255,0.12); background:#0d0d20;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  transition:border-color 0.2s, box-shadow 0.2s;
}
.focus-canvas-wrap.is-mine { border-color:rgba(52,152,219,0.5); box-shadow:0 8px 32px rgba(52,152,219,0.15); }
.focus-canvas-wrap.is-assigned { border-color:rgba(249,211,66,0.5); box-shadow:0 8px 32px rgba(249,211,66,0.15); }
#focusCanvas { display:block; width:100%; aspect-ratio:4/3; }

.focus-mine-tag {
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  background:rgba(52,152,219,0.85); color:#fff; font-size:13px; font-weight:700;
  padding:4px 14px; border-radius:20px; backdrop-filter:blur(4px); white-space:nowrap;
}

.focus-meta { position:relative; display:flex; align-items:center; justify-content:center; width:100%; padding:0 4px; }

.focus-assigned {
  font-size:16px; font-weight:700; color:var(--text-dim);
  padding:6px 20px; border-radius:10px; background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1); transition:all 0.2s; min-width:200px; text-align:center;
}
.focus-assigned.has-word { color:var(--gold); background:rgba(249,211,66,0.1); border-color:rgba(249,211,66,0.3); }

.focus-counter { position:absolute; right:4px; font-size:13px; color:var(--text-dim); white-space:nowrap; }

/* Words panel */
.words-panel { flex:0 0 190px; }
.words-panel-title { font-size:11px; color:var(--text-dim); margin-bottom:10px; text-align:center; letter-spacing:1px; font-weight:700; }

.word-guess-btn {
  display:block; width:100%; padding:10px 14px; margin-bottom:7px;
  text-align:left; border-radius:10px; border:2px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04); color:var(--text);
  cursor:pointer; font-family:'Fredoka',sans-serif; font-size:15px; font-weight:600; transition:all 0.15s;
}
.word-guess-btn:hover:not(:disabled) { border-color:rgba(255,215,64,0.45); background:rgba(255,215,64,0.07); transform:translateX(2px); }
.word-guess-btn.assigned { border-color:rgba(249,211,66,0.4); background:rgba(249,211,66,0.08); color:var(--gold); }
.word-guess-btn.focused-target { border-color:rgba(255,215,64,0.7); background:rgba(255,215,64,0.12); }
.word-guess-btn.is-my-word { opacity:0.38; cursor:not-allowed; border-color:rgba(52,152,219,0.2); color:rgba(52,152,219,0.7); font-style:italic; }

/* Thumbnails strip */
.thumbs-strip {
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  width:100%; max-width:960px; margin-top:16px; padding:0 4px;
  align-items:flex-start;
}
.thumb-card {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:pointer; transition:transform 0.15s;
}
.thumb-card:hover { transform:translateY(-3px); }
.thumb-canvas-wrap {
  border-radius:10px; overflow:hidden; border:2px solid rgba(255,255,255,0.1);
  background:#0d0d20; width:90px; transition:border-color 0.15s, box-shadow 0.15s;
}
.thumb-canvas-wrap canvas { display:block; width:90px; aspect-ratio:4/3; }
.thumb-card.active .thumb-canvas-wrap { border-color:var(--gold); box-shadow:0 0 12px rgba(249,211,66,0.35); }
.thumb-card.is-mine .thumb-canvas-wrap { border-color:rgba(52,152,219,0.5); cursor:default; }
.thumb-word {
  font-size:10px; font-weight:700; color:var(--text-dim); max-width:90px;
  text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  cursor:default;
}
.thumb-card.assigned .thumb-word { color:var(--gold); }

/* Legacy — kept for results screen */
.drawings-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.drawing-card {
  border-radius:12px; overflow:hidden; border:2px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03); cursor:pointer; transition:all 0.2s; position:relative;
}
.drawing-card canvas   { display:block; width:100%; aspect-ratio:4/3; }
.drawing-number {
  position:absolute; top:5px; left:6px; background:rgba(0,0,0,0.65); color:white;
  font-size:11px; font-weight:700; padding:2px 7px; border-radius:8px;
}
.drawing-label {
  padding:5px 8px; font-size:12px; font-weight:600; text-align:center;
  background:rgba(0,0,0,0.2); border-top:1px solid rgba(255,255,255,0.06);
  min-height:28px; color:var(--text-dim);
}
.drawing-label.assigned  { color:var(--gold); }
.drawing-label.mine-tag  { color:rgba(52,152,219,1); background:rgba(52,152,219,0.10); font-weight:700; }

/* ── Timer ── */
.timer-urgent { color:var(--red) !important; animation:tick 0.5s ease-in-out infinite; }
@keyframes tick { 0%,100% { transform:scale(1); } 50% { transform:scale(1.08); } }

/* ── Results ── */
.results-drawings-grid { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.result-card { border-radius:12px; overflow:hidden; border:2px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); width:220px; flex-shrink:0; }
.result-card canvas { display:block; width:100%; height:auto; aspect-ratio:4/3; max-width:100%; }
.result-card-info { padding:8px 10px; border-top:1px solid rgba(255,255,255,0.06); }
.result-word   { font-weight:700; color:var(--green); font-size:13px; }
.result-artist { color:var(--text-dim); font-size:11px; margin-top:2px; }
.result-score  { color:rgba(249,211,66,0.8); font-size:11px; }
.result-guesses { margin-top:6px; display:flex; flex-direction:column; gap:3px; }
.result-guess-row { display:flex; align-items:center; gap:5px; font-size:11px; padding:3px 5px; border-radius:6px; }
.result-guess-row.correct { background:rgba(46,204,113,0.10); }
.result-guess-row.wrong   { background:rgba(255,255,255,0.03); }
.result-guess-avatar { font-size:13px; line-height:1; flex-shrink:0; }
.result-guess-name   { color:var(--text-dim); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.result-guess-answer { font-size:11px; font-weight:600; white-space:nowrap; color:var(--text); }
.result-guess-row.correct .result-guess-answer { color:var(--green); }
.result-guess-row.wrong   .result-guess-answer { color:rgba(255,255,255,0.35); }

/* ── Score tokens ── */
.score-tokens { font-size:20px; font-weight:700; color:var(--gold); }

/* ── Stroke tooltip ── */
#strokeTooltip {
  position:fixed; z-index:180; pointer-events:none;
  background:rgba(10,10,26,0.92); color:var(--text);
  border:1px solid rgba(255,255,255,0.2); border-radius:8px;
  padding:5px 12px; font-size:13px; font-weight:600;
  box-shadow:0 4px 12px rgba(0,0,0,0.5); white-space:nowrap;
}

/* ── Timerbar ── */
#timerDisplay { font-size:22px; font-weight:700; color:var(--gold); text-align:center; margin-bottom:8px; }

@media (max-width: 480px) {
  .screen { padding:52px 14px 20px; }
  .drawings-grid { grid-template-columns:repeat(2,1fr); }
  .results-drawings-grid .result-card { width:calc(50% - 8px); }
}