/* 딴짓의 종이 위에 붙인, 톡톡 튀는 놀이 스티커. */
:root {
  --yellow: #ffe277;
  --green: #b9eccf;
  --peach: #ffc5ab;
  --blue: #bfdefa;
  --lavender: #d9cafa;
  --mint: #a9e7c7;
  --pop-edge: #385565;
  --pop-shadow: #38556524;
  --spring: cubic-bezier(.2, 1.6, .45, 1);
}

/* Clear silhouettes, playful color, readable ink. */
.primary { box-shadow: 0 5px 0 #182e42; }
.secondary { border: 1.5px solid #8ba69c; box-shadow: 0 4px 0 #b9d0bf; }
.primary:active:not(:disabled), .secondary:active:not(:disabled) { box-shadow: 0 1px 0 var(--pop-edge); }
.student-header .student-avatar { background: var(--yellow); border: 1.5px solid var(--pop-edge); box-shadow: 2px 3px 0 #c2d4bd; }
.student-status-banner { border: 1.5px solid #89b399; background: #def4e3; }
.student-status-banner.lesson { background: #ece0ff; border-color: #a98acb; }
.student-status-banner > svg { color: #2e6d55; }
.student-status-banner.lesson > svg { color: #684596; }
.student-hero {
  isolation: isolate; background: #ffeb8f; border: 2px solid var(--pop-edge);
  border-radius: 28px 23px 30px 23px; box-shadow: 5px 6px 0 #c7dec5;
}
.student-hero::before {
  content: ''; position: absolute; z-index: -1; width: 220px; height: 220px;
  border-radius: 50%; right: -38px; top: -51px; background: #ffc6a5;
  border: 2px dashed #38556530; pointer-events: none;
}
.student-hero::after {
  content: ''; position: absolute; z-index: -1; width: 65px; height: 65px;
  right: 170px; bottom: -33px; border-radius: 50%; background: #b9e9ce;
  border: 2px solid #38556535; pointer-events: none;
}
.student-hero h1 { color: var(--ink); }
.student-hero h1 > span {
  display: inline-block; position: relative; z-index: 0;
}
.student-hero h1 > span::before {
  content: ''; position: absolute; z-index: -1; inset: 42% -5px -2px;
  border-radius: 5px; background: #fffefb; transform: rotate(-4deg); pointer-events: none;
}
.student-hero > img {
  padding: 13px; background: #fffefb; border: 2px solid var(--pop-edge);
  border-radius: 27px; box-shadow: 4px 5px 0 #bc9475;
  transform: rotate(7deg); animation: rabbit-hello .6s var(--spring) both;
}
.student-hero .hero-spark { color: #305c50; top: 12px; right: 26px; font-size: 31px; z-index: 1; }
.student-home-head h2 { position: relative; }
.student-home-head h2::after {
  content: ''; position: absolute; left: 2px; bottom: -4px; width: 43px; height: 4px;
  border-radius: 5px; background: #ffbd91; transform: rotate(-4deg);
}
.play-tabs button { border: 1.5px solid #879c98; box-shadow: 0 3px 0 #d6dfd0; color: #385565; }
.play-tabs button.active { background: var(--yellow); border-color: var(--pop-edge); color: var(--ink); box-shadow: 0 4px 0 #b5c8ac; }
.student-main .activity-grid { gap: 20px; }
.student-main .activity-card {
  border: 2px solid #68877e; border-radius: 25px 21px 25px 21px;
  box-shadow: 0 6px 0 var(--card-shadow, #b5d7c3);
  --card-press: #d3eacd;
}
.student-main .activity-card.green { background: #e1f5e6; --card-shadow: #91bea2; }
.student-main .activity-card.yellow { background: #fff3bf; --card-shadow: #d8be69; }
.student-main .activity-card.peach { background: #ffe6d9; --card-shadow: #d6aa92; }
.student-main .activity-card.blue { background: #e2effe; --card-shadow: #a5bcd8; }
.student-main .activity-card .card-icon {
  border: 1.5px solid #567364; background: var(--green); box-shadow: 3px 3px 0 #38556520;
  border-radius: 19px 15px 20px 16px; transform: rotate(-7deg);
  transition: transform .35s var(--spring);
}
.student-main .activity-card.yellow .card-icon { background: var(--yellow); }
.student-main .activity-card.peach .card-icon { background: var(--peach); }
.student-main .activity-card.blue .card-icon { background: var(--blue); }
.student-main .activity-card[data-open='sudoku'] .card-icon { background: var(--lavender); transform: rotate(7deg); }
.student-main .activity-card h3 { color: #263f55; }
.student-main .activity-card p { color: #45606c; }
.student-main .activity-card .card-meta { color: #3f5e55; }
.student-main .activity-card .card-meta > svg {
  background: #fffefb; border: 1.5px solid #759687; width: 28px; height: 28px; color: #305e4a;
}
.student-main .activity-card:active:not(:disabled) {
  background: var(--card-press, #d3eacd); border-color: var(--ink);
  box-shadow: 0 1px 0 var(--card-shadow); transform: translateY(4px) scale(.96);
}
.student-main .activity-card.yellow { --card-press: #ffe892; }
.student-main .activity-card.peach { --card-press: #ffd2bb; }
.student-main .activity-card.blue { --card-press: #cfe5ff; }
.student-nav-item { border: 1.5px solid transparent; }
.student-nav-item.active { background: #b9e9cf; border-color: #6c9c7f; box-shadow: 0 3px 0 #99bca0; color: #244f40; }
.student-nav-item.active > svg { transform: rotate(-7deg); }
.student-bottom-nav { border-top: 2px solid #d0dfcc; }
.student-waiting { background: #ffefad; border: 2px solid var(--pop-edge); box-shadow: 5px 6px 0 #c5dbc0; }
.student-waiting .card-icon { border: 1.5px solid var(--pop-edge); transform: rotate(-8deg); box-shadow: 3px 4px 0 #aec89e; }
.calculator-keypad .calc-key, .sudoku-pad button { border: 1.5px solid #829689; box-shadow: 0 4px 0 #b8c7ad; }
.calculator-keypad .calc-key.accent, .sudoku-pad button { background: #ffedaa; }
.calculator-keypad .calc-key.equals { background: #abe2c0; border-color: #648871; }
.quiz-option.chosen { border: 2px solid #387a56; box-shadow: 0 4px 0 #a0c3a3; }

/* Teacher gets the same character with a quieter teaching desk. */
.teacher-shell .nav-item.active { background: #c2e8cf; border: 1.5px solid #91b49b; box-shadow: 0 3px 0 #d4dfc7; }
.teacher-stat { border: 1.5px solid #a8bdad; box-shadow: 0 4px 0 #d6dfca; }
.teacher-stat > span:first-child { border: 1px solid #799b76; background: #cae9b9; transform: rotate(-5deg); }
.teacher-stat:nth-child(2) > span:first-child { background: var(--yellow); }
.teacher-stat:nth-child(3) > span:first-child { background: var(--lavender); transform: rotate(5deg); }
.teacher-stage { border: 1.5px solid #a0b69d; box-shadow: 0 4px 0 #dde5ce; }
.teacher-stage-head { background: #d7ebc2; }
.teacher-shell button.tool-panel { border: 1.5px solid #98b09d; box-shadow: 0 4px 0 #d0ddc5; }
.teacher-shell button.tool-panel .card-icon { border: 1px solid #648770; background: var(--yellow); transform: rotate(-5deg); }
.teacher-shell button.tool-panel[data-launch='timer'] .card-icon { background: var(--green); }
.teacher-shell button.tool-panel[data-launch='bingo'] .card-icon { background: var(--peach); transform: rotate(5deg); }
.teacher-shell button.tool-panel[data-launch='quiz'] .card-icon { background: var(--blue); }
.teacher-shell button.tool-panel .launch-arrow { background: #fff0ac; border: 1px solid #99ad87; color: #395c49; }
.teacher-invite { background: #ffefaf !important; border: 1.5px solid #bba86f !important; box-shadow: 4px 5px 0 #ded7ad; }
.teacher-invite .qr-code { border: 1.5px solid #9ca783; box-shadow: 3px 3px 0 #d5c994; }
.teacher-question-preview { border: 1.5px solid #b7a3d2; box-shadow: 0 4px 0 #e4d9ed; }
.entry-shell .join-card { border: 2px solid #809f87; box-shadow: 7px 8px 0 #d2e4bb; }
.entry-shell .join-tabs button.active { background: #b6e8c8; border: 1px solid #7ca78c; box-shadow: 0 3px 0 #9dc3a1; }
.entry-shell .hero-copy h1 > span { text-decoration: underline; text-decoration-color: #f3c559; text-decoration-thickness: 9px; text-underline-offset: -3px; text-decoration-skip-ink: none; }

/* Short bursts happen only after a completed tap, never in a loop. */
.tap-ripple { background: #ffd65c78; animation-duration: .6s; }
.activity-card .tap-ripple, .tool-panel .tap-ripple { background: #fffefba6; }
.is-tapped { animation: pop-spring .43s var(--spring); }
.student-main .activity-card.is-tapped { animation: pop-spring .43s var(--spring); }
.screen-enter { animation: pop-screen .32s var(--spring); }
.toast { border: 2px solid #182f40; box-shadow: 4px 5px 0 #c3d8a8; }
.toast:not(.hidden) { animation: toast-pop .38s var(--spring); }
.touch-pop { position: fixed; width: 0; height: 0; pointer-events: none; z-index: 150; }
.touch-pop > i {
  position: absolute; width: 8px; height: 8px; left: -4px; top: -4px;
  background: var(--bit-color); border-radius: 50%; pointer-events: none;
  animation: pop-bits .64s cubic-bezier(.1, .65, .25, 1) both;
}
.touch-pop > i:nth-child(odd) { width: 12px; height: 12px; border-radius: 0; clip-path: polygon(50% 0, 62% 35%, 100% 50%, 62% 65%, 50% 100%, 38% 65%, 0 50%, 38% 35%); }
.celebration i { width: 12px; height: 20px; box-shadow: 1px 2px 0 #38556520; }
@keyframes sticker-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes rabbit-hello { from { transform: rotate(-6deg) scale(.88); } to { transform: rotate(7deg) scale(1); } }
@keyframes pop-screen { from { opacity: .65; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pop-spring { 0% { transform: scale(1); } 30% { transform: scale(.93); } 65% { transform: scale(1.045); } 100% { transform: scale(1); } }
@keyframes toast-pop { from { opacity: 0; translate: 0 12px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes pop-bits { from { opacity: 1; transform: translate(0, 0) scale(.6); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(90deg) scale(.8); } }
@media (hover: hover) and (pointer: fine) {
  .student-main .activity-card:hover:not(:disabled) { background: var(--card-press); border-color: #385565; transform: translateY(-5px); box-shadow: 0 10px 0 var(--card-shadow); }
  .student-main .activity-card:hover .card-icon { transform: rotate(5deg) scale(1.07); }
  .teacher-shell button.tool-panel:hover:not(:disabled) { background: #f4fae9; border-color: #5f8a6c; box-shadow: 0 7px 0 #cbd9bf; }
}
@media (max-width: 540px) {
  .student-hero { border-radius: 23px 19px 25px 19px; box-shadow: 4px 5px 0 #c7dec5; }
  .student-hero::before { width: 153px; height: 153px; right: -43px; top: -24px; }
  .student-hero::after { right: 78px; width: 43px; height: 43px; bottom: -21px; }
  .student-hero > img { padding: 7px; border-radius: 18px; box-shadow: 3px 4px 0 #bc9475; }
  .student-hero .hero-spark { font-size: 23px; right: 20px; top: 11px; }
  .student-main .activity-grid { gap: 18px 14px; }
  .student-main .activity-card { border-radius: 21px 17px 23px 17px; }
  .student-nav-item.active { box-shadow: 0 3px 0 #99bca0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .touch-pop, .tap-ripple, .celebration { display: none; }
  .student-main .activity-card, .student-main .activity-card:hover, .student-main .activity-card:active,
  .student-main .activity-card .card-icon, .teacher-shell button.tool-panel,
  .teacher-shell button.tool-panel:hover, .teacher-shell button.tool-panel:active,
  .student-hero > img, .student-nav-item > svg, .teacher-stat > span:first-child { transform: none !important; }
}

.student-main .activity-card h3,
.student-main .activity-card p { word-break: keep-all; }