/* VIDIŠ LI ME? — dot-plate shape finder, fitted to one screen. */
.see-me-screen {
  width: 100%; height: 100vh; height: 100dvh; min-height: 0; max-height: 100dvh;
  box-sizing: border-box; overflow: hidden; justify-content: flex-start;
  gap: clamp(4px, .9vh, 10px);
  padding: max(74px, calc(env(safe-area-inset-top) + 62px)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  color: #493766;
  background: radial-gradient(circle at 13% 14%, rgba(255,255,255,.8), transparent 29%), radial-gradient(circle at 88% 88%, rgba(255,255,255,.62), transparent 31%), linear-gradient(140deg, #fff2b5, #ffe0eb 53%, #c9f2ed);
}
.see-me-title { flex: 0 0 auto; margin: 0; color: #563681; font-size: clamp(26px, 4.6vh, 48px); font-weight: 800; line-height: 1; text-align: center; text-shadow: 0 2px 0 #fff, 0 5px 12px rgba(43,34,80,.14); }
.see-me-progress { flex: 0 0 auto; margin: 0; padding: 2px 14px; border: 2px solid rgba(255,255,255,.95); border-radius: 999px; color: #563681; background: rgba(255,255,255,.88); font-size: clamp(13px, 1.9vh, 18px); font-weight: 800; white-space: pre; }
.see-me-panel {
  flex: 1 1 0; min-height: 0; width: min(900px, 98vw); display: flex; flex-direction: column; align-items: center;
  gap: clamp(4px, 1vh, 10px); box-sizing: border-box; padding: clamp(6px, 1.3vh, 14px);
  border: 5px solid #fff; border-radius: clamp(22px, 3vw, 34px); background: rgba(255,255,255,.88); box-shadow: 0 12px 26px rgba(40,35,90,.17);
}
.see-me-question { flex: 0 0 auto; max-width: 100%; padding: 3px 18px; border: 3px solid #fff; border-radius: 999px; color: #fff; background: linear-gradient(145deg, #9a7be8, #7151c9); box-shadow: 0 4px 0 #533a9e; font: 800 clamp(17px, 2.9vh, 30px)/1.1 'Baloo 2', sans-serif; text-align: center; cursor: pointer; touch-action: manipulation; }
.see-me-question:focus-visible { outline: 4px solid #3a3a7a; outline-offset: 3px; }
.see-me-plate-wrap { flex: 1 1 0; min-height: 0; width: 100%; display: grid; place-items: center; }
.see-me-plate { display: block; height: 100%; max-height: 100%; max-width: 100%; aspect-ratio: 1; filter: drop-shadow(0 8px 10px rgba(60,45,100,.2)); }
.see-me-screen.is-see-me-success .see-me-plate { animation: see-me-plate-pop .6s cubic-bezier(.2,.8,.25,1); }
@keyframes see-me-plate-pop { 40% { transform: scale(1.05) rotate(-2deg); filter: drop-shadow(0 0 18px rgba(255,209,31,.9)); } 100% { transform: scale(1); } }
.see-me-options { flex: 0 0 auto; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1.4vw, 16px); }
.see-me-option {
  position: relative; min-width: 0; height: clamp(78px, 15vh, 150px); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; box-sizing: border-box; padding: clamp(4px, .8vh, 9px); border: 4px solid #fff; border-radius: clamp(18px, 2.6vw, 28px);
  color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--opt-color), white 12%), var(--opt-color));
  box-shadow: 0 7px 0 var(--opt-shade), 0 12px 18px rgba(40,35,90,.16);
  font-family: inherit; cursor: pointer; touch-action: manipulation; transition: transform .14s, box-shadow .14s, opacity .14s;
}
.see-me-option:hover:not(:disabled) { transform: translateY(-3px) rotate(-.5deg); box-shadow: 0 10px 0 var(--opt-shade), 0 16px 22px rgba(40,35,90,.2); }
.see-me-option:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 3px 0 var(--opt-shade); }
.see-me-option:focus-visible { outline: 5px solid #3a3a7a; outline-offset: 3px; }
.see-me-option:disabled:not(.is-correct) { opacity: .5; cursor: default; }
.see-me-option-icon { flex: 1 1 0; min-height: 0; width: 100%; filter: drop-shadow(0 3px 2px rgba(40,30,70,.2)); }
.see-me-option-name { flex: 0 0 auto; font-size: clamp(15px, 2.5vh, 26px); font-weight: 800; line-height: 1; text-shadow: 0 2px 0 rgba(0,0,0,.16); }
.see-me-option.is-correct { outline: 5px solid #ffd166; outline-offset: 2px; animation: sound-quiz-correct .45s ease-out; }
.see-me-option.is-wrong { animation: flashcards-snap-back .4s cubic-bezier(.35,.1,.25,1); }
.see-me-thumb { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: clamp(30px, 4.5vw, 46px); height: clamp(30px, 4.5vw, 46px); border: 3px solid #fff; border-radius: 50%; background: #fff1a8; box-shadow: 0 3px 7px rgba(30,20,55,.2); font-size: clamp(18px, 3vw, 30px); line-height: 1; }
.see-me-feedback { flex: 0 0 auto; min-height: 1.2em; margin: 0; color: #563681; font-size: clamp(16px, 2.7vh, 27px); font-weight: 800; line-height: 1.1; text-align: center; }
.see-me-screen.is-see-me-wrong .see-me-feedback { color: #b04d54; animation: sound-quiz-nudge .22s ease-in-out 2; }
.see-me-actions { flex: 0 0 auto; display: flex; justify-content: center; gap: 10px; }
.see-me-action { min-height: 42px; padding: 3px clamp(16px, 2.4vw, 28px); border-width: 3px; border-radius: 18px; font-size: clamp(16px, 2.3vh, 23px); box-shadow: 0 5px 0 var(--s), 0 8px 12px rgba(0,0,0,.13); }
.see-me-back { --c: #4cc9f0; --s: #258fb3; }
.see-me-action:focus-visible { outline: 4px solid #3a3a7a; outline-offset: 3px; }
@media (max-height: 560px) {
  .see-me-screen { gap: 3px; padding-top: max(56px, calc(env(safe-area-inset-top) + 48px)); padding-bottom: 4px; }
  .see-me-title { font-size: clamp(20px, 5vh, 30px); }
  .see-me-option { height: clamp(58px, 17vh, 90px); border-width: 3px; }
  .see-me-action { min-height: 32px; padding-block: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .see-me-option { transition: none; }
  .see-me-option.is-correct, .see-me-option.is-wrong, .see-me-screen.is-see-me-success .see-me-plate, .see-me-screen.is-see-me-wrong .see-me-feedback { animation: none; }
}