/*
 * Coding Ireland proprietary interactive activity
 * Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
 *
 * Part of the Coding Ireland online learning platform. Licensed for use only
 * as delivered on the platform. Copying, redistributing, or adapting this
 * file, in whole or in part, for use in any other product or service is not
 * permitted. Ref: CI-maths-shared
 */
/* The scored board of the Science Week rounds (sci-round.js). Built at one natural size with big touch
   targets; in competition the frame fit zooms it to the board, so nothing here is sized in vw. */

.sr-stage { font-family: 'Nunito', system-ui, sans-serif; max-width: 1000px; margin: 0 auto; }
.sr-stage[hidden] { display: none; }
body.sr-on .fs-stage, body.sr-on .som-stage, body.sr-on .fs-wrap, body.sr-on .som-wrap, body.sr-on .fs-your-turn, body.sr-on .som-your-turn { display: none !important; }

.sr-prompt {
    font-size: 30px; font-weight: 900; line-height: 1.2; color: #10243a;
    margin: 0 0 8px; text-align: center;
}
.sr-prompt[hidden] { display: none; }

/* ---- a picture and big answers ---- */
.sr-choice { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.sr-scene { background: #fff; border-radius: 26px; box-shadow: 0 10px 26px -14px rgba(15, 42, 80, .5); }
.sa-svg { width: 100%; height: auto; display: block; }
.sa-emoji { font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; }
.sr-options { display: grid; gap: 10px; grid-auto-rows: 1fr; }
.sr-opt {
    display: flex; align-items: center; gap: 14px; text-align: left;
    min-height: 62px; padding: 6px 18px 6px 10px; cursor: pointer;
    font: 800 25px/1.15 'Nunito', system-ui, sans-serif; color: #10243a;
    background: #fff; border: 3px solid #c3d4e6; border-radius: 18px;
    box-shadow: 0 4px 0 #c3d4e6; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.sr-opt:active { transform: translateY(2px); box-shadow: 0 2px 0 #c3d4e6; }
.sr-opt-key {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 13px; background: #e6eef7; color: #36506b; font-size: 24px; font-weight: 900;
}
.sr-opt-text { flex: 1 1 auto; }
.sr-opt.is-on { background: #fff4cf; border-color: #f0b429; box-shadow: 0 4px 0 #f0b429; }
.sr-opt.is-on .sr-opt-key { background: #f0b429; color: #fff; }
.sr-opt.is-right { background: #dcf5e1; border-color: #2e9e4f; box-shadow: 0 4px 0 #2e9e4f; }
.sr-opt.is-right .sr-opt-key { background: #2e9e4f; color: #fff; }
.sr-opt.is-wrong { background: #fde2e1; border-color: #d9423c; box-shadow: 0 4px 0 #d9423c; }
.sr-opt.is-wrong .sr-opt-key { background: #d9423c; color: #fff; }
.sr-opt.is-dim { opacity: .55; }
.sr-opt:disabled { cursor: default; }

/* ---- float or sink ---- */
.sr-float { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.sr-items { display: grid; gap: 8px; }
.sr-fitem {
    position: relative; display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 10px;
    padding: 6px 12px 6px 8px; background: #fff; border: 3px solid #c3d4e6; border-radius: 18px;
}
.sr-fitem.is-right { border-color: #2e9e4f; background: #eefaf0; }
.sr-fitem.is-wrong { border-color: #d9423c; background: #fdeeed; }
.sr-femoji { font: 44px/1 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; text-align: center; }
.sr-fname { font-size: 23px; font-weight: 800; color: #10243a; line-height: 1.1; }
.sr-ftoggle { display: inline-flex; gap: 8px; }
.sr-fbtn {
    min-width: 92px; min-height: 56px; padding: 4px 12px; cursor: pointer;
    font: 800 22px/1 'Nunito', system-ui, sans-serif; color: #36506b; background: #eef3f9;
    border: 3px solid #c3d4e6; border-radius: 14px; touch-action: manipulation;
}
.sr-fbtn--float.is-on { background: #d9ecff; border-color: #2f7fd6; color: #14508f; }
.sr-fbtn--sink.is-on { background: #ffe6cf; border-color: #d9822b; color: #8a4a0c; }
.sr-fbtn:disabled { cursor: default; }
.sr-fmark { position: absolute; right: -8px; top: -10px; font-size: 24px; font-weight: 900; width: 34px; height: 34px; line-height: 34px; text-align: center; border-radius: 50%; color: #fff; }
.sr-fitem.is-right .sr-fmark { background: #2e9e4f; }
.sr-fitem.is-wrong .sr-fmark { background: #d9423c; }
.sr-fmark:empty { display: none; }
.sr-tankwrap { background: #fff; border-radius: 26px; box-shadow: 0 10px 26px -14px rgba(15, 42, 80, .5); padding: 6px; }
.sr-tank { width: 100%; height: auto; display: block; }
.sr-tobj { font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; transition: transform .7s cubic-bezier(.3, .75, .4, 1); }
.sr-tobj.is-float { transition-timing-function: cubic-bezier(.3, .9, .45, 1.25); }

/* ---- the answer line ---- */
.sr-stage .maths-target-panel { margin-top: 8px; }
.sr-stage .sr-target-panel { background: none; border: 0; box-shadow: none; padding: 0; }
.sr-stage .maths-callout { box-sizing: border-box; padding: 6px 14px; min-height: calc(12px + 3.75em); line-height: 1.25; font-size: 22px; font-weight: 700; }
.sr-stage .maths-callout[hidden] { display: block; visibility: hidden; }

/* ---- particles in a box drift, wobble or fly ---- */
@keyframes sa-wob { from { transform: translate(-1.6px, -1.2px); } to { transform: translate(1.6px, 1.2px); } }
@keyframes sa-slide { from { transform: translate(-6px, -3px); } to { transform: translate(6px, 4px); } }
@keyframes sa-fly { from { transform: translate(-30px, -22px); } to { transform: translate(34px, 26px); } }
.sa-p-solid { animation: sa-wob .3s ease-in-out infinite alternate; }
.sa-p-liquid { animation: sa-slide 1.7s ease-in-out infinite alternate; }
.sa-p-gas { animation: sa-fly 2.1s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .sa-p { animation: none !important; } .sr-tobj { transition: none; } }

/* ---- Read the Data (Junior Cycle): a chart or table, four numbered answers ---- */
.sr-choice.sr-data { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; }
.sr-data-scene { padding: 8px 10px 4px; }
.sc-svg { width: 100%; height: auto; display: block; font-family: 'Nunito', system-ui, sans-serif; }
.sr-data-table { display: flex; align-items: center; justify-content: center; padding: 14px; }
.sc-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font: 800 21px/1.2 'Nunito', system-ui, sans-serif; color: #13253b;
    border: 2px solid #c3d4e6; border-radius: 14px; overflow: hidden;
}
/* Columns size to their words (auto layout); break-word only splits a word the cell cannot fit at all. */
.sc-table th, .sc-table td { text-align: center; padding: 9px 8px; overflow-wrap: break-word; }
.sc-table th { font-weight: 900; background: #e6eef7; border-bottom: 2px solid #c3d4e6; }
.sc-table td { border-top: 1px solid #e2e8f0; }
.sc-table th + th, .sc-table td + td { border-left: 1px solid #d5e0ec; }
.sc-table tbody tr:nth-child(even) td { background: #f6f9fc; }
.sr-opt.is-right-outline { background: #fff; border-color: #2e9e4f; box-shadow: 0 0 0 3px rgba(46, 158, 79, .35), 0 4px 0 #2e9e4f; }
.sr-opt.is-right-outline .sr-opt-key { background: #dcf5e1; color: #1d6b35; }

/* ---- Element Finder (Junior Cycle): the mini periodic table, elements 1-20 ----
   Sized in container units, so the table scales with its own width like a picture: it fills the
   board and shrinks to a phone without ever pushing the page sideways. */
.sr-element { display: flex; justify-content: center; }
/* Narrower than the stage, so the board's fit zooms it up and the question and the answer line grow with it. */
.pt-wrap { container-type: inline-size; width: 100%; max-width: 720px; }
.pt-grid { display: grid; grid-template-columns: 9cqi repeat(8, minmax(0, 1fr)); gap: 0.8cqi; align-items: stretch; }
/* No px floor anywhere in the table: in the competition frame a px size is multiplied by the fit's
   zoom while the cqi sizes are not, and a floored label outgrew its column on a phone. */
.pt-period {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    font-weight: 800; line-height: 1; color: #36506b; min-width: 0;
}
.pt-pword { font-size: 1.85cqi; }
.pt-pnum { font-size: 3.4cqi; font-weight: 900; margin-top: 0.3cqi; }
.pt-cell {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    aspect-ratio: 1 / 0.92; min-width: 0; padding: 0; margin: 0; cursor: pointer;
    font-family: 'Nunito', system-ui, sans-serif; color: #10243a;
    border: max(2px, 0.32cqi) solid; border-radius: 1.2cqi;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.pt-k-m { background: #dbeafe; border-color: #8db8ea; }
.pt-k-s { background: #fdefc6; border-color: #e3bd5c; }
.pt-k-n { background: #dcf3e1; border-color: #86c99a; }
.pt-s { font-size: 4.4cqi; font-weight: 900; line-height: 1; }
.pt-show-name .pt-s { font-size: 3.9cqi; }
.pt-n { font-size: 1.55cqi; font-weight: 700; line-height: 1; margin-top: 0.5cqi; white-space: nowrap; }
.pt-z { position: absolute; left: 0.8cqi; top: 0.5cqi; font-size: 1.9cqi; font-weight: 800; line-height: 1; color: #36506b; }
.pt-show-z .pt-s { margin-top: 1cqi; }
.pt-cell.is-on { background: #ffd84d; border-color: #b7791f; box-shadow: 0 0 0 0.6cqi rgba(183, 121, 31, .3); transform: translateY(-0.3cqi); z-index: 1; }
.pt-cell.is-right { background: #c9efd3; border-color: #2e9e4f; box-shadow: 0 0 0 0.6cqi rgba(46, 158, 79, .35); z-index: 1; }
.pt-cell.is-wrong { background: #fde2e1; border-color: #d9423c; box-shadow: 0 0 0 0.6cqi rgba(217, 66, 60, .3); z-index: 1; }
.pt-cell.is-answer { border-color: #2e9e4f; box-shadow: 0 0 0 0.7cqi #2e9e4f; z-index: 1; }
.pt-cell:disabled { cursor: default; }
.pt-cell:disabled:not(.is-right):not(.is-wrong):not(.is-answer) { opacity: .5; }
.pt-cell:focus-visible { outline: 3px solid #1565c0; outline-offset: 2px; }
.pt-key { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6cqi 3cqi; margin-top: 1.6cqi; font-size: max(2.1cqi, 6px); font-weight: 800; color: #36506b; }
.pt-key-item { display: inline-flex; align-items: center; gap: 0.8cqi; }
.pt-swatch { display: inline-block; width: max(2.6cqi, 7px); height: max(2.6cqi, 7px); border-width: 2px; border-style: solid; border-radius: 4px; }

@media (max-width: 760px) {
    .sr-choice, .sr-float, .sr-choice.sr-data { grid-template-columns: 1fr; }
}

/* Float or Sink and States of Matter pin their own page to one screen of flex columns for the
   teacher view. The scored board lays itself out, so give the page back to the normal flow. */
body.sr-on.maths-activity:not(.display-mode) .activity-container {
    display: block; height: auto; min-height: 100vh; overflow: visible;
}
html.mcr-compete body.sr-on.maths-activity:not(.display-mode) .activity-container {
    height: 100%; min-height: 100%; overflow: auto;
    padding: calc(var(--bu) * 0.5 / var(--mcr-fit, 1)) calc(var(--bu) * 0.8 / var(--mcr-fit, 1))
             calc((var(--mcr-bar) + var(--bu) * 0.5) / var(--mcr-fit, 1));
}