.ip-root { position: fixed; inset: 0; z-index: 2000; overflow: auto; overscroll-behavior: contain; background: #f5f3ea; color: #173d40; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); font-family: system-ui, sans-serif; }
/* This activity keeps its light palette in both host themes. Override global dark text rules. */
body.dark-mode .ip-root h1, body.dark-mode .ip-root p { color: #173d40; }
body.dark-mode .ip-root .ip-note { color: #466365; }
.ip-panel { max-width: 760px; min-height: 85%; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.ip-title { font-size: clamp(1.5rem, 4vw, 2.5rem); line-height: 1.2; margin: 8px 0; color: #173d40; }
.ip-copy { font-size: 1.15rem; line-height: 1.6; max-width: 560px; margin: 0; }
.ip-note { font-size: .95rem; color: #466365; line-height: 1.5; max-width: 520px; margin: 0; }
.ip-root button { font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ip-root button:focus-visible { outline: 4px solid #135fb2; outline-offset: 4px; }
.ip-root button:disabled { cursor: default; opacity: .45; }
.ip-primary, .ip-secondary, .ip-link { border-radius: 18px; padding: 16px 24px; min-height: 56px; border: 2px solid #17665f; }
.ip-primary { color: white; background: #17665f; font-weight: 700 !important; }
.ip-secondary { color: #173d40; background: white; }
.ip-link { color: #173d40; background: transparent; border-color: transparent; text-decoration: underline; }
.ip-controls { display: flex; gap: 24px; }
.ip-sound, .ip-help { border: 2px solid #bdd1ca; border-radius: 50%; background: white; height: 70px; width: 70px; font-size: 2rem !important; }
.ip-choices { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; width: 100%; }
.ip-choice { min-width: 100px; width: 130px; height: 140px; background: white; color: #173d40; border: 3px solid #9bbdb3; border-bottom-width: 8px; border-radius: 24px; font-size: 4.5rem !important; font-weight: 650 !important; text-transform: none !important; line-height: 1; }
.ip-choice.ip-hint { border-color: #936800; background: #fff2b3; box-shadow: 0 0 0 5px #efd67d; }
.ip-choice.ip-correct { opacity: 1; border-color: #26704d; background: #d4f0df; }
.ip-letter-prompt { font-size: 5rem; line-height: 1; text-transform: none !important; }
.ip-status { min-height: 30px; margin: 0; font-size: 1.1rem; }
.ip-progress { color: #466365; font-weight: 600; }
.ip-sticker { width: 170px; height: 170px; border: 8px solid white; outline: 3px dashed #aa750d; border-radius: 50%; display: grid; place-items: center; color: #805500; background: #ffdc72; font-size: 6rem; transform: rotate(-8deg); }
.ip-sticker-name { font-size: 1.5rem; font-weight: 750; margin: 10px 0; }
@media (max-width: 480px) { .ip-panel { gap: 12px; } .ip-choices { gap: 12px; } .ip-choice { min-width: 80px; width: 95px; height: 110px; font-size: 3.5rem !important; } }
@media (max-height: 550px) and (min-width: 600px) { .ip-panel { gap: 8px; } .ip-choice { height: 92px; } .ip-letter-prompt { font-size: 3rem; } .ip-sound, .ip-help { width: 52px; height: 52px; } }