@import url('https://fonts.googleapis.com/css2?family=Biryani:wght@200;300;400;600;700;800;900&family=Edu+NSW+ACT+Foundation:wght@400..700&family=Edu+QLD+Hand:wght@400..700&family=Edu+SA+Hand:wght@400..700&family=Edu+VIC+WA+NT+Hand:wght@400..700&family=Nunito+Slab:wght@100..900&family=Nunito:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Grand+Hotel&family=Bebas+Neue&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root {
    --bs-body-font-family: 'Nunito', sans-serif !important;
    --navy-50:  #E6EEF4;
    --navy-100: #C0D5E4;
    --navy-200: #9ABBD3;
    --navy-300: #74A1C2;
    --navy-400: #4E87B1;
    --navy-500: #115A88;
    --navy-600: #0E4A70;
    --navy-700: #0B3A58;
    --navy-800: #082A40;
    --navy-900: #051A28;
    --orange-50:  #FFF1E0;
    --orange-100: #FFE0B8;
    --orange-200: #FFCE8F;
    --orange-300: #FFBC66;
    --orange-400: #FFA93D;
    --orange-500: #FF7D00;
    --orange-600: #D96A00;
    --orange-700: #B35700;
    --orange-800: #8C4400;
    --orange-900: #663100;
    --red-50:  #FFE8EA;
    --red-100: #FFC6CB;
    --red-200: #FFA3AB;
    --red-300: #FF808C;
    --red-400: #FF5D6C;
    --red-500: #FF4F58;
    --red-600: #D9444C;
    --red-700: #B33A40;
    --red-800: #8C2F33;
    --red-900: #662427;
    --purple-50:  #F1E9FF;
    --purple-100: #DCCBFF;
    --purple-200: #C7ADFF;
    --purple-300: #B28FFF;
    --purple-400: #9D71FF;
    --purple-500: #8A4FFF;
    --purple-600: #713FCE;
    --purple-700: #58309E;
    --purple-800: #3F206E;
    --purple-900: #26103E;
    --green-50:  #E8F8ED;
    --green-100: #C8EFD2;
    --green-200: #A7E5B7;
    --green-300: #86DB9C;
    --green-400: #65D181;
    --green-500: #4CC76A;
    --green-600: #3FA958;
    --green-700: #328B46;
    --green-800: #256D34;
    --green-900: #184F22;
    --lightblue-50:  #E7F4FF;
    --lightblue-100: #C9E7FF;
    --lightblue-200: #ABD9FF;
    --lightblue-300: #8DCBFF;
    --lightblue-400: #6FBDFF;
    --lightblue-500: #3FA9F5;
    --lightblue-600: #2E8AD1;
    --lightblue-700: #216CA8;
    --lightblue-800: #164E7F;
    --lightblue-900: #0C3056;
    --aqua-50:  #E4FAF9;
    --aqua-100: #C0F2F0;
    --aqua-200: #9BEAE7;
    --aqua-300: #76E2DE;
    --aqua-400: #51DAD5;
    --aqua-500: #2ECFCB;
    --aqua-600: #25ABA8;
    --aqua-700: #1C8784;
    --aqua-800: #136360;
    --aqua-900: #0A3F3C;
    --yellow-50:  #FFF9E5;
    --yellow-100: #FFF0BF;
    --yellow-200: #FFE699;
    --yellow-300: #FFDD73;
    --yellow-400: #FFD34D;
    --yellow-500: #FFD93D;
    --yellow-600: #D9B634;
    --yellow-700: #B3932B;
    --yellow-800: #8C7022;
    --yellow-900: #664D19;
}

body {
    font-family: 'Nunito';
    background-color: var(--navy-700) !important;
    padding: 0 20px 20px 20px;
}

#top-navbar {
    transition: opacity 0.4s ease;
    opacity: 1;
}
#top-navbar.faded {
    opacity: 0.4;
}
/* Hide navbar + teacher controls when printing (Reveal.js print mode) */
@media print {
    #top-navbar,
    #teacher-controls {
        display: none !important;
        visibility: hidden !important;
    }
}

.slide-background.answer-slide {
    background-color: #edffe9 !important;
}

.reveal .slides section .scale-wrapper {
    display: block;
    width: 100%;
    transform-origin: center;
}

.slide-title-subject {
    font-size: 300%;
    font-family: 'Bebas Neue', sans-serif;
    line-height: 0.8 !important;
    text-align: center;
    color: var(--orange-500);
    text-shadow: 3px 3px 0px var(--orange-700), 2px 2px var(--orange-700), 5px 5px rgba(0, 0, 0, 0.2);
}

.slide-subtitle {
    font-family: 'Grand Hotel', sans-serif;
    font-size: 300%;
    color: var(--lightblue-100);
    line-height: 0.2 !important;
    text-shadow: 0px 4px var(--navy-700);
}

.slide-strands {
    background: #fff;
    color: var(--navy-500);
    padding: 20px 30px;
    border-radius: 15px;
    box-shadow: 0 5px var(--navy-700);
    width:60%;
}

.pp-slide-header {
    background-color: var(--lightblue-50) !important;
    padding: 15px 20px;
    border-radius: 15px;
    font-family: 'Bebas Neue', sans-serif;
    color: var(--navy-500);
    font-size: 120%;
}

.reveal section svg {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    max-width: 100vw;
}
.reveal section {
    height: 100%;
    display: flex;
}

.reveal {
    border-radius: 20px;
}

.reveal .progress {
    background: rgba(0, 0, 0, 0.2);
    color: var(--orange-500) !important;
}

#slideshowContainer {
    width:100%;
    height:calc(100vh - 80px);
    border-radius: 20px;
}

.question-slide {
    display: flex !important;
    align-items: center !important;
}

.answer-slide {
    display: flex !important;
    align-items: center !important;
}

#teacher-controls {
    position: fixed;
    bottom: 40px;
    left: 25px;
}



.btn-blue {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: var(--lightblue-500) !important;
    --bs-btn-border-color: var(--lightblue-500) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--lightblue-600) !important;
    --bs-btn-hover-border-color: var(--lightblue-600) !important;
    --bs-btn-focus-shadow-rgb: 217,164,6;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--lightblue-600) !important;
    --bs-btn-active-border-color: var(--lightblue-600) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: var(--lightblue-500) !important;
    --bs-btn-disabled-border-color: var(--lightblue-500) !important;
}
.btn-yellow {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: var(--yellow-500) !important;
    --bs-btn-border-color: var(--yellow-500) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--yellow-600) !important;
    --bs-btn-hover-border-color: var(--yellow-600) !important;
    --bs-btn-focus-shadow-rgb: 217,164,6;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--yellow-600) !important;
    --bs-btn-active-border-color: var(--yellow-600) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: var(--yellow-500) !important;
    --bs-btn-disabled-border-color: var(--yellow-500) !important;
}
.btn-green {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: var(--green-500) !important;
    --bs-btn-border-color: var(--green-500) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--green-600) !important;
    --bs-btn-hover-border-color: var(--green-600) !important;
    --bs-btn-focus-shadow-rgb: 217,164,6;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--green-600) !important;
    --bs-btn-active-border-color: var(--green-600) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: var(--green-500) !important;
    --bs-btn-disabled-border-color: var(--green-500) !important;
}
.btn-red {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: var(--red-500) !important;
    --bs-btn-border-color: var(--red-500) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--red-600) !important;
    --bs-btn-hover-border-color: var(--red-600) !important;
    --bs-btn-focus-shadow-rgb: 217,164,6;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--red-600) !important;
    --bs-btn-active-border-color: var(--red-600) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: var(--red-500) !important;
    --bs-btn-disabled-border-color: var(--red-500) !important;
}
.btn-black-transparent {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: rgba(0,0,0,0.3) !important;
    --bs-btn-border-color: rgba(0,0,0,0) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: rgba(0,0,0,0.5) !important;
    --bs-btn-hover-border-color: rgba(0,0,0,0) !important;
    --bs-btn-focus-shadow-rgb: 217,164,6;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: rgba(0,0,0,0.3) !important;
    --bs-btn-active-border-color: rgba(0,0,0,0) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: rgba(0,0,0,0.3) !important;
    --bs-btn-disabled-border-color: rgba(0,0,0,0) !important;
}



/* ============================================================
   QUESTION LAYOUT & STYLES
   ============================================================ */

p.question-content {
    font-family: 'Edu QLD Hand', cursive;
    font-size: 30pt;
    font-weight: 600;
    color: #1982c4;
    margin-bottom: 20px;
}

p.answer-content {
    font-size: 30pt;
    font-weight: 600;
}

div.question-content svg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
    max-width: 700px; /* adjust to taste */
}

/* MULTIPLE CHOICE LAYOUT */
.mc-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
    width: 100%;
    margin-top: 10px;
}

.multiplechoice {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.multiplechoice .question-content {
    margin-top: 10px;
}

.multiplechoice svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Ensure the question text above spans full width */
.mc-options ~ p.question-content,
p.question-content:first-child {
    text-align: center;
    width: 100%;
}
/* ============================================================
   ICONS
   ============================================================ */
.handsignal-1,
.handsignal-2,
.handsignal-3,
.handsignal-4 {
    width: 75px;
    height: 75px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block
}
.handsignal-1 {
    background-image: url(/slides/img/hand1.png);
}
.handsignal-2 {
    background-image: url(/slides/img/hand2.png);
}
.handsignal-3 {
    background-image: url(/slides/img/hand3.png);
}
.handsignal-4 {
    background-image: url(/slides/img/hand4.png);
}
.num-pattern svg {
    vertical-align: middle;
}

#response-indicator-global {
    position: fixed;
    top: 70px;
    right: 35px;
    font-size: 3rem;
    color: var(--navy-500);
    opacity: 1;
    z-index: 9999;
    pointer-events: auto;
}

svg text,
.question-content,
.answer-content {
    font-family: 'Nunito';
}






























span.q-missing-value {
    background-color: #000;
    color: #fff;
    padding: 5px 15px;
    border-radius: 7px;
}

span.q-number {
    font-weight: 600;
}    






























/* ################################
# NUMBER.JS                       #
################################# */

/* NUMBER.JS - PLACE VALUE CHART */
.pv-grid {
    display: grid;
    gap: 0;
    white-space: nowrap;
    overflow: hidden;
    margin: auto;
    width: max-content;
    max-width: 100%;
}
.pv-group {
    text-align: center;
    font-weight: 600;
    border: 1px solid #444;
    background: #fff;
    padding: 5px 50px;
    font-size: clamp(10px, 1.2vw, 16px);
}
.pv-label {
    text-align: center;
    border: 1px solid #444;
    background: #efefef;
    padding: 4px 0;
    font-size: clamp(9px, 1vw, 14px);
}
.pv-digit {
    text-align: center;
    border: 1px solid #444;
    background: #fff;
    padding: 6px 0;
    font-weight: bold;
    font-size: clamp(14px, 2vw, 24px);
}
.pv-spacer-label,
.pv-spacer-digit {
    text-align: center;
    border: 1px solid #444;
    background: #e0e0e0;
    font-size: clamp(16px, 2vw, 28px);
    font-weight: bold;
}

/* NUMBER.JS - TENS FRAMES */
.tf-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}
.tf-frame {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);

    width: min(600px, 100%);
    min-width: 180px;
    min-height: calc(180px * 2 / 5);

    aspect-ratio: 5 / 2;

    border: 2px solid #000;
    background: white;
}
.tf-cell {
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tf-dot {
    width: 60%;
    height: 60%;
    background: #1e88e5;
    border-radius: 50%;
}

/* NUMBER.JS - TALLIES */
.tally-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 100%;
    justify-content: center;
}
.tally-group {
    position: relative;
    display: inline-block;
}
.tally-line {
    position: absolute;
    width: 4px;
    background: #000;
    border-radius: 2px;
}
.tally-slash {
    position: absolute;
    height: 4px;
    background: #000;
    border-radius: 2px;
    transform-origin: left center;
    pointer-events: none;
}

/* NUMBER.JS NUMBER PATTERNS */
.num-pattern {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 32px;
    font-weight: bold;
    color: #222;
    align-items: center;
    justify-content: center;
}
.num-pattern-item {
    display: flex;
    align-items: center;
}
.num-pattern-comma {
    margin-right: 0.5rem;
}
.num-pattern-missing {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background: #ff595e;
    color: #fff;
    border-radius: 4px;
    font-size: 20px;
    font-weight: bold;
}



/* ################################
# NUMBERLINE.JS                   #
################################# */
.nl-wrapper {
    position: relative;
    width: 100%;
    height: 140px;
    box-sizing: border-box;
}
.nl-line {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 45px;
    height: 2px;
    background: #6b6b6b;
}
.nl-tick-wrapper {
    position: absolute;
    left: 0;
    width: 0;
    transform: translateX(-50%);
}
.nl-tick,
.nl-tick--highlight {
    position: absolute;
    top: 30px;
    margin: 0 auto;
}
.nl-tick {
    width: 2px;
    height: 30px; 
    background: #6b6b6b;
}
.nl-tick--highlight {
    width: 4px;
    height: 40px;
    background: #ff0000;
}
.nl-label {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: #444;
}
.nl-missing-box {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    background: #ff0000;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nl-missing-q {
    color: #fff;
    font-weight: bold;
    font-size: 20px;
}
.nl-marker {
    position: absolute;
    top: -10px;
    transform: translateX(-50%);
    text-align: center;
    z-index: 5;
    width: 40px;
}
.nl-marker-label {
    font-weight: 600;
    height: 20px;
    font-size: 30px;
    color: #ce0000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.nl-marker-triangle {
    width: 0;
    height: 0;
    margin: 0 auto;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 16px solid #ff0000;
}



/* ################################
# OPERATIONS.JS                   #
################################# */
/* OPERATIONS.JS INLINE EQUATIONS & EXPRESSIONS */
.op-inline,
.op-expression,
.op-equation {
    display: inline-block;
    line-height: 1.2;
    font-size: inherit;      /* inherit from parent */
    vertical-align: middle;
}
.op-num,
.op-var {
    display: inline-block;
    padding: 0 2px;
    font-size: 1em;
}
.op-op {
    display: inline-block;
    padding: 0 4px;
    font-weight: 600;
    font-size: 1em;
}
.op-bin,
.op-eq {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.q-missing-value {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.1em;
    height: 1.1em;
    border: 2px solid #444;
    border-radius: 4px;
    font-weight: 600;
    font-size: 1em;
    line-height: 1;
    margin: 0 2px;
    padding: 10px;
    background-color: #000;
    color: #fff;
}
.op-frac,
.op-mixed {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}
.op-frac svg,
.op-mixed svg {
    height: 1.1em;           /* scales with text */
    width: auto;
    vertical-align: middle;
}
.op-frac svg *,
.op-mixed svg * {
    vector-effect: non-scaling-stroke;
}
/* OPERATIONS.JS PART-PART-WHOLE DIAGRAMS */
.ppw-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.ppw-row {
    display: flex;
    gap: 40px;
    align-items: center;
}
.ppw-connector {
    width: 2px;
    height: 30px;
    background: #333;
}
.ppw-circle {
    width: 70px;
    height: 70px;
    border: 3px solid #333;
    border-radius: 50%;
    background: white;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 28px;
    font-weight: bold;
    color: #222;
}
.ppw-missing {
    width: 70px;
    height: 70px;
    border-radius: 6px;
    background: black;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 40px;
    font-weight: bold;
    color: white;
}
.ppw-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* OPERATIONS.JS VERTICAL ALGORITHMS */
.va {
    display: inline-grid;
    grid-auto-rows: auto;
    justify-items: end;
    font-family: monospace;
    font-size: 28px;
    line-height: 1;
    /* FIX: force consistent column count */
    grid-template-columns: auto repeat(var(--va-cols), 22px);
    white-space: nowrap;
}
.va-row {
    display: contents;
}
.va-op {
    display: inline-block;
    width: 22px;      /* ← FIX: operator column now has real width */
    text-align: center;
    padding-right: 6px;
}
.va-cell {
    width: 22px;
    text-align: center;
}
.va-missing {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 28px;
    background: #000;
    color: #fff;
    border-radius: 4px;
    font-size: 20px;
    font-weight: bold;
}
.va-sup {
    position: relative;
}
.va-sup::after {
    content: attr(data-sup);
    position: absolute;
    top: 5px;
    right: -2px;
    font-size: 14px;
    color: red;
}
.va-borrow-full {
    color: red;
    font-weight: 600;
}
.va-carry-full {
    color: red;
    font-weight: 600;
}
.va-divider {
    grid-column: 1 / -1;
    border-bottom: 3px solid #000;
    width: 100%;
    margin: 4px 0;
    display: block;
    min-height: 3px;
}
.va-strike {
    position: relative;
    display: inline-block;
}
.va-strike::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: red;
    transform: rotate(-10deg);
}
/* OPERATIONS.JS DIVISION BUS STOP */
.longdiv {
    display: inline-grid;
    grid-template-columns: auto auto 1fr;
    grid-auto-rows: auto;
    font-family: monospace;
    font-size: 28px;
    line-height: 1;
    white-space: nowrap;
}
.longdiv-cell {
    text-align: center;
    min-width: 22px;
}
.longdiv-op {
    text-align: center;
    padding-right: 4px;
}
.longdiv-quotient {
    grid-column: 2 / 4;
    text-align: right;
    padding-right: 4px;
}
.longdiv-divisor {
    border-right: 3px solid #000;
    padding-right: 4px;
}
.longdiv-dividend {
    border-top: 3px solid #000;
    border-left: 3px solid #000;
    padding-left: 4px;
    text-align: left;
}



/* ################################
# FRACTIONS.JS                    #
################################# */

/* FRACTIONS.JS FRACTION NUMERICAL DISPLAY */
.q-frac-mixed {
  display: inline-flex;
  align-items: center;
  gap: 0.1em;
}
.q-frac-mixed .q-frac-whole {
  display: inline-block;
}
.q-frac-mixed .q-frac {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
.q-frac-mixed .q-frac .q-frac-top,
.q-frac-mixed .q-frac .q-frac-bottom {
  display: block;
  padding: 0 0.15em;
}
.q-frac-mixed .q-frac .q-frac-top {
  border-bottom: 1px solid currentColor;
  margin-bottom: 0.05em;
}
.q-frac {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.q-frac .q-frac-top,
.q-frac .q-frac-bottom {
  display: block;
  padding: 0 0.15em;
}
.q-frac .q-frac-top {
  border-bottom: 1px solid currentColor;
  margin-bottom: 0.05em;
}

/* FRACTIONS.JS CIRCLE MODEL */
.fraction-circle {
    width: 200px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #000;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    height: auto;
}
.fraction-circle,
.fraction-circle * {
    transform: none !important;
}

.fraction-fill {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.fraction-lines {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}
.fraction-line {
    position: absolute;
    width: 2px;
    height: 50%;
    background: #000;
    left: 50%;
    top: 50%;
    transform-origin: center bottom;
    pointer-events: none;
}
.fraction-container {
    display: flex;
    gap: 12px;
    align-items: center;
}


/* FRACTIONS.JS BAR & RECTANGLE MODELS */
.rect-fraction {
    display: grid;
    border: 2px solid #000;
    aspect-ratio: 2 / 1; /* wide rectangle */
    width: 140px;        /* scales responsively */
}
.rect-cell {
    border-right: 1px solid #000;
    background: #fff;
}
.rect-cell.shaded {
    background: #90caf9;
}
.rect-cell:last-child {
    border-right: none;
}
.rect-container {
    display: flex;
    gap: 12px;
    align-items: center;
}
.fbar-fraction {
    display: grid;
    border: 2px solid #000;
    aspect-ratio: 6 / 1; /* long bar */
    width: 200px;
}
.fbar-cell {
    border-right: 1px solid #000;
    background: #fff;
}
.fbar-cell.shaded {
    background: #90caf9;
}
.fbar-cell:last-child {
    border-right: none;
}
.fbar-container {
    display: flex;
    gap: 12px;
    align-items: center;
}
.collection-grid {
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
    gap: 6px;
}
.collection-cell {
    aspect-ratio: 1 / 1;
    border: 1px solid #444;
    background: #fff;
    border-radius: 4px; /* optional */
}
.collection-cell.shaded {
    background: #90caf9;
}


/* ################################
# ARRAYGRID.JS                    #
################################# */

/* ARRAYGRID.JS ARRAYS */
.array-grid {
    display: grid;
    border: 2px solid #000;
    background: #fff;
}
.array-cell {
    border: 1px solid #ccc;
    position: relative;
    background: #f8f9fa;
}
.array-dot {
    width: 10px;
    height: 10px;
    background: #666;
    border-radius: 50%;
    position: absolute;
    inset: 0;
    margin: auto;
}
.array-emoji {
    font-size: 24px;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.array-container {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* ARRAYGRID.JS HUNDREDS CHART */
.hc-grid {
    display: grid;
    width: 100%;
    max-width: 400px;
    border: 2px solid #000;
    margin: auto;
}
.hc-cell {
    border: 1px solid #444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(10px, 1.5vw, 18px);
    background: #fff;
    color: #444;
    aspect-ratio: 1 / 1;
}
.hc-missing {
    background: #000 !important;
    color: #000 !important;
}
.hc-highlight {
    background: #ffe082 !important;
    color: #000 !important;
}

/* ARRAYGRID.JS MULTIPLICATION CHART */
.mc-grid {
    display: grid;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1 / 1; /* always a perfect square */
    border: 2px solid #000;
}
.mc-cell {
    border: 1px solid #b7b7b7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(10px, 1.4vw, 14px);
    background: #fff;
    color: #444;
}
.mc-header {
    background: #eeeeee !important;
    font-weight: bold;
}
.mc-highlight {
    background: #ffe082 !important;
    color: #000 !important;
}



/* ################################
# MONEY.JS                        #
################################# */
.money-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}
.money-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-start;
}
.coin-outer {
    aspect-ratio: 1 / 1;
    position: relative;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.coin-inner {
    aspect-ratio: 1 / 1;
    width: 93%;
    height: 93%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--coin-fill);
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(255,255,255,0.6);
    color: #444;
}
.money-coin-50c {
    clip-path: polygon(
        50% 0%,
        79% 10%,
        100% 35%,
        100% 65%,
        79% 90%,
        50% 100%,
        21% 90%,
        0% 65%,
        0% 35%,
        21% 10%
    );
}
.coin-outer:not(.money-coin-50c),
.coin-inner:not(.money-coin-50c) {
    border-radius: 50%;
}
.money-small  { width: 60px; }
.money-medium { width: 80px; }
.money-large  { width: 100px; }
.money-count {
    position: absolute;
    right: -10px;
    bottom: -5px;
    font-size: 0.9rem;
    background: #fff;
    padding: 2px 6px;
    border: 2px solid #444;
    border-radius: 6px;
}
.money-note {
    aspect-ratio: 2 / 1;
    border-radius: 10px;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(255,255,255,0.6);
    border: 3px solid #000;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.7),
        rgba(255,255,255,0.1) 40%,
        var(--note-fill)
    );
}



/* ################################
# CLOCK.JS & CLOCKDUAL.JS         #
################################# */
.clock-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.clock {
    position: relative;
    background: white;
    border-radius: 180px;
    border: 10px solid black;
    box-sizing: content-box;
}
.clock-wrapper {
    width: 100%;
}
.clock-responsive {
    width: min(100%, 250px);
    aspect-ratio: 1 / 1;
    position: relative;
}
.clock-responsive .clock {
    width: 340px;
    height: 340px;
    position: absolute;
    inset: -10px -5px;
    transform-origin: top left;
    transform: scale(calc(100% / 340));
}
.minutes, .fiveminutes {
    position: absolute;
    width: 3px;
    height: 15px;
    top: 0px;
    left: 49.5%;
    background: grey;
    transform-origin: 50% 170px;
}
.fiveminutes {
    height: 25px;
    background: black;
    z-index: 1;
}
.hand.hour {
    position: absolute;
    width: 8px;
    height: 130px;
    top: 70px;
    left: 49%;
    border-radius: 7px;
    background: black;
    transform-origin: 49% 100px;
}
.hand.min {
    position: absolute;
    width: 8px;
    height: 160px;
    top: 40px;
    left: 48.5%;
    border-radius: 7px;
    background: black;
    transform-origin: 48.5% 131px;
}
.centerpoint {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background-color: black;
    position: absolute;
    left: 158px;
    top: 158px;
}
.numbers {
    position: absolute;
    font-size: 30px;
}
.one    { top: 36px;  left: 223px; }
.two    { top: 81px;  left: 273px; }
.three  { top: 149px; left: 293px; }
.four   { top: 214px; left: 273px; }
.five   { top: 259px; left: 228px; }
.six    { top: 274px; left: 160px; }
.seven  { top: 259px; left: 93px; }
.eight  { top: 214px; left: 48px; }
.nine   { top: 149px; left: 28px; }
.ten    { top: 81px;  left: 43px; }
.eleven { top: 36px;  left: 98px; }
.twelve { top: 21px;  left: 153px; }
.clock-digital {
    background: #222;
    color: #e0f7fa;
    padding: 8px 16px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 28px;
    border: 2px solid #555;
}
.clock-label {
    font-size: 18px;
    color: #444;
}
.arrow-line {
    width: 100%;
    max-width: 120px;
    height: 3px;
    background: #444;
    position: relative;
}
.arrow-line::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-left: 10px solid #444;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}




/* ################################
# TIMETABLE.JS                    #
################################# */
.timetable-responsive {
    width: 100%;
    overflow-x: auto;
}
.timetable-outer {
    border: 3px solid #444;  
    border-radius: 12px;        
    overflow: hidden;   
    display: inline-block;   
    width: 100%;                
}
.timetable-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 1rem;
}
.timetable-table th {
    background: #f5f5f5;
    font-weight: 600;
    border: 1px solid #999;
    white-space: nowrap;
    padding: 8px 12px;
}
.timetable-table td {
    border: 1px solid #999;
    padding: 8px 12px;
    white-space: nowrap;
}
.timetable-table tbody tr:nth-child(even) td {
    background: #fafafa;
}
.timetable-highlight {
    background-color: #fff59d !important;
}




/* ################################
# PATTERN.JS                      #
################################# */
.pattern-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.pattern-item {
    min-width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 5px;
}
.pattern-highlight {
    background-color: var(--green-500);
    border-radius: 8px;
    padding: 5px;
}
.pattern-number {
    font-size: 22px;
    font-weight: 700;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    color: #000000;
}
.pattern-colour {
    border-radius: 50%;
    border: 2px solid #000000;
}
.pattern-missing {
    background: #000;
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    border-radius: 4px;
    border: 2px solid #000000;
}














.missing-value {
    background: #000;
    color: #ffffff;
    font-weight: 700;
    border-radius: 4px;
    border: 2px solid #000000;
    padding: 5px;
}