.hosted-page.student-page.classic-phone-page { display: grid; place-items: start center; align-content: start; min-height: 100svh; padding: 24px 16px max(24px, env(safe-area-inset-bottom)); }
.student-device-card.classic-phone-card { width: min(100%, 460px); gap: 18px; padding: 24px; border: 1px solid #ddd8ed; border-top: 5px solid #7775e8; border-radius: 8px; background: #fffefa; box-shadow: 0 8px 24px #4338a514; color: #111827; }
.classic-phone-card header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.classic-phone-card .classic-phone-score { color: #313951; font-size: 13px; }
.classic-phone-card .classic-phone-team { color: #4145ad; font-size: 20px; line-height: 1.25; font-weight: 800; overflow-wrap: anywhere; }
.classic-phone-card .classic-phone-role { color: #313951; font-size: 14px; font-weight: 650; }
.student-device-card.classic-phone-card h1 { font-size: 28px; line-height: 1.15; color: #111827; overflow-wrap: anywhere; }
.classic-phone-secret { padding-block: 7px; color: #34318c; border-block: 1px solid #ddd8ed; font-size: 38px; line-height: 1.1; font-weight: 850; overflow-wrap: anywhere; }
.classic-phone-card .classic-phone-points { font-size: 16px; color: #313951; font-weight: 650; }
.classic-phone-points strong { color: #4145ad; font-size: 28px; font-variant-numeric: tabular-nums; }
.classic-phone-card .classic-phone-instruction { font-size: 17px; line-height: 1.45; font-weight: 600; color: #111827; }
.classic-phone-card .classic-phone-moon, .classic-phone-card .classic-phone-feedback { font-size: 15px; color: #4145ad; font-weight: 750; }
.classic-phone-card footer { display: flex; justify-content: space-between; gap: 16px; color: #313951; font-size: 13px; }
.classic-phone-card footer span { min-width: 0; overflow-wrap: anywhere; }
.classic-phone-card footer span:first-child { flex-shrink: 0; }
.classic-phone-card .participant-special-actions { display: grid; margin: 0; padding: 0; border: 0; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.classic-phone-card .participant-special-actions.has-play.has-pass { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.classic-phone-card .participant-special-actions > div:has([data-classic-special="moon"]) { grid-column: 1 / -1; }
.classic-phone-card .participant-special-actions > div { min-width: 0; }
.classic-phone-card .participant-special-actions .button { min-height: 46px; font-size: 16px; }
.classic-phone-card .participant-special-actions .button-primary { background: #5755bf; color: white; }
.classic-phone-card .info-dot { color: #4145ad; background: #fff4d6; }
.classic-phone-card button:focus-visible { outline: 3px solid #6354c4; outline-offset: 3px; }
@media (max-width: 360px) { .hosted-page.student-page.classic-phone-page { padding: 16px 12px max(16px, env(safe-area-inset-bottom)); } .student-device-card.classic-phone-card { padding: 16px; gap: 10px; } .student-device-card.classic-phone-card h1 { font-size: 24px; } .classic-phone-secret { font-size: 32px; } .classic-phone-card .participant-special-actions > div { gap: 4px; } .classic-phone-card .participant-special-actions .button { padding-inline: 8px; } }
.classic-phone-stars-win { display: flex; align-items: center; justify-content: center; gap: 8px; color: #34318c; font-weight: 800; }
.classic-phone-stars-win svg { width: 24px; height: 24px; fill: #fff0a3; stroke: currentColor; stroke-width: 1.5; }