body.count-page, body.count-page * { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
body.count-page main { min-height: 100dvh; background: radial-gradient(circle at 8% 18%, #fff 0 3px, transparent 4px), linear-gradient(#bfeaf2 0 300px, #fff8e7 300px); }
.count-game { width: min(940px, calc(100% - 40px)); margin: 28px auto 44px; position: relative; z-index: 1; }
.count-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; animation: count-rise .5s ease-out both; }
.count-heading > div:first-child > span { color: #2e7d87; font-size: 10px; letter-spacing: .16em; font-weight: 900; }
.count-heading h1 { margin: 7px 0; font-size: clamp(40px, 5vw, 62px); line-height: 1; letter-spacing: -.05em; }
.count-heading p { margin: 0; color: #526575; font-size: 13px; }
.count-score { min-width: 112px; padding: 9px 14px; border: 3px solid var(--ink); border-radius: 18px; background: #e8dcff; box-shadow: 5px 5px 0 var(--ink); display: flex; align-items: center; justify-content: center; gap: 8px; }
.count-score span { font-size: 30px; }
.count-score b { color: #725ac6; font-size: 38px; line-height: 1; }
.count-card { overflow: hidden; border: 3px solid var(--ink); border-radius: 27px; background: #fff; box-shadow: 10px 10px 0 var(--ink); animation: count-card-in .6s .08s cubic-bezier(.2,.8,.2,1) both; }
.count-board { display: grid; grid-template-columns: minmax(0, 1fr) 250px; min-height: 480px; }
.count-object-side { min-width: 0; padding: 25px; border-right: 3px solid var(--ink); background: #dff5e5; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.count-question-mark { margin-bottom: 14px; padding: 7px 15px; border: 2px solid var(--ink); border-radius: 999px; background: #fff2bd; box-shadow: 3px 3px 0 var(--ink); font-size: 13px; font-weight: 900; }
.count-object-grid { width: min(100%, 540px); min-height: 315px; padding: 22px; border: 4px dashed #4a8a66; border-radius: 28px; background: #fff; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); place-items: center; gap: 8px; }
.count-object { font-style: normal; font-family: "Apple Color Emoji","Segoe UI Emoji",sans-serif; font-size: clamp(52px, 8vw, 78px); line-height: 1; filter: drop-shadow(0 5px 0 #25304720); animation: count-object-pop .45s cubic-bezier(.22,1.3,.42,1) both; }
.count-actions { margin-top: 17px; display: flex; gap: 10px; }
.count-actions button { width: 58px; height: 48px; border: 2px solid var(--ink); border-radius: 14px; background: var(--blue); box-shadow: 3px 3px 0 var(--ink); font-size: 22px; cursor: pointer; }
.count-actions button:last-child { background: var(--yellow); }
.count-number-side { padding: 24px; background: #e8dcff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.count-number-side > span { margin-bottom: 10px; font-size: 39px; animation: count-point 1.4s ease-in-out infinite; }
.count-number-options { width: 100%; display: grid; gap: 15px; }
.count-number { min-height: 102px; border: 3px solid var(--ink); border-radius: 22px; background: #fff; box-shadow: 6px 6px 0 var(--ink); color: var(--ink); font-size: 58px; font-weight: 900; cursor: pointer; }
.count-number:nth-child(1) { background: #fff2bd; }
.count-number:nth-child(2) { background: #dff5e5; }
.count-number:nth-child(3) { background: #ffdce5; }
.count-number:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--ink); }
.count-number.is-correct { background: #75c98b; color: #fff; animation: count-correct .55s ease-out; }
.count-number.is-wrong { animation: count-wrong .36s ease-out; }
.count-toast { position: fixed; z-index: 2000; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 28px); padding: 13px 22px; border: 3px solid var(--ink); border-radius: 16px; background: var(--pink); color: #fff; box-shadow: 5px 5px 0 var(--ink); font-weight: 900; text-align: center; animation: count-toast-in .3s ease-out; }
.count-toast.is-warning { background: #f3a640; color: var(--ink); }
.count-page footer { padding-bottom: env(safe-area-inset-bottom); }
@keyframes count-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes count-card-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes count-object-pop { from { opacity: 0; transform: translateY(-30px) rotate(-12deg) scale(.45); } 72% { opacity: 1; transform: translateY(4px) rotate(3deg) scale(1.1); } to { opacity: 1; transform: none; } }
@keyframes count-point { 50% { transform: translateX(7px); } }
@keyframes count-correct { 45% { transform: scale(1.08) rotate(-2deg); } }
@keyframes count-wrong { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); } }
@keyframes count-toast-in { from { opacity: 0; transform: translate(-50%,-15px); } to { opacity: 1; transform: translateX(-50%); } }
@media (max-width: 760px) {
  .count-page .topbar { width: calc(100% - 22px); }
  .count-game { width: calc(100% - 22px); margin: 13px auto 27px; }
  .count-heading { align-items: center; gap: 8px; margin-bottom: 11px; }
  .count-heading h1 { margin-block: 4px; font-size: 31px; }
  .count-heading p { max-width: 220px; font-size: 10px; }
  .count-score { min-width: 78px; padding: 6px 8px; box-shadow: 3px 3px 0 var(--ink); }
  .count-score span { font-size: 22px; }
  .count-score b { font-size: 29px; }
  .count-card { border-radius: 20px; box-shadow: 7px 7px 0 var(--ink); }
  .count-board { grid-template-columns: minmax(0, 1fr) 112px; min-height: 420px; }
  .count-object-side { padding: 11px 8px; border-right-width: 2px; }
  .count-question-mark { margin-bottom: 9px; padding: 5px 9px; font-size: 10px; }
  .count-object-grid { min-height: 290px; padding: 9px; border-width: 2px; border-radius: 17px; gap: 3px; }
  .count-object { font-size: clamp(38px, 12vw, 58px); }
  .count-actions { margin-top: 10px; gap: 7px; }
  .count-actions button { width: 50px; height: 43px; }
  .count-number-side { padding: 12px 8px; }
  .count-number-side > span { margin-bottom: 7px; font-size: 29px; }
  .count-number-options { gap: 12px; }
  .count-number { min-height: 88px; border-width: 2px; border-radius: 17px; box-shadow: 3px 4px 0 var(--ink); font-size: 48px; }
  .count-page footer { width: calc(100% - 22px); min-height: 50px; }
}
@media (max-height: 700px) and (max-width: 760px) {
  .count-heading > div:first-child > span, .count-heading p { display: none; }
  .count-heading h1 { margin: 0; font-size: 27px; }
  .count-board { min-height: 355px; }
  .count-object-grid { min-height: 235px; }
  .count-number { min-height: 72px; font-size: 42px; }
  .count-page footer { min-height: 44px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .count-heading, .count-card, .count-object, .count-number-side > span, .count-number, .count-toast { animation: none !important; }
}