Pythagoras Theorem Map Game — Interactive Lesson (Ages 13–16)

:root {
–primary: #22ad91;
–primary-glow: rgba(34, 173, 145, 0.6);
–bg-dark: #0f172a;
–text-light: #f1f5f9;
}
/* FULL SCREEN VIEWPORT WITH YOUR IMAGE */
#game-viewport {
position: relative;
width: 100vw;
left: 50%; right: 50%;
margin-left: -50vw; margin-right: -50vw;
height: 90vh;
min-height: 700px;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
font-family: ‘Poppins’, sans-serif;
/* YOUR IMAGE INSERTED HERE */
background-image:
linear-gradient(rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.75)),
url(‘https://skoolmaths.com/wp-content/uploads/2026/02/Oceans-world-map.png’);
background-size: cover;
background-position: center;
background-attachment: fixed; /* Parallax feel */
}
/* Suble Grid Overlay (optional, gives it a ‘map’ feel) */
#game-viewport::before {
content: “”;
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 30px 30px;
pointer-events: none;
}
.hud-top {
position: absolute; top: 110px; left: 50%;
transform: translateX(-50%);
display: flex; align-items: center; gap: 30px;
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(15px); padding: 10px 30px;
border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.1);
z-index: 100; box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
#game-canvas {
position: relative; width: 85%; max-width: 1200px; height: 70%; z-index: 10;
}
#path-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.path-line {
fill: none; stroke: rgba(255, 255, 255, 0.15);
stroke-width: 5; stroke-linecap: round;
stroke-dasharray: 12, 12; transition: all 1s ease;
}
.path-line.active {
stroke: var(–primary); stroke-dasharray: 0;
filter: drop-shadow(0 0 12px var(–primary));
}
.node {
position: absolute; width: 54px; height: 54px;
transform: translate(-50%, -50%);
background: #1e293b; border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%; color: #94a3b8;
display: flex; align-items: center; justify-content: center;
font-weight: 700; cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.node.current {
background: #fff; border-color: var(–primary);
color: var(–primary); transform: translate(-50%, -50%) scale(1.25);
box-shadow: 0 0 35px var(–primary-glow);
}
.node.done { background: var(–primary); border-color: var(–primary); color: white; }
/* MODAL STYLING */
.modal-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(12px); z-index: 2000;
align-items: center; justify-content: center;
}
.q-card {
background: #1e293b; color: white;
padding: 30px; border-radius: 30px;
width: 95%; max-width: 450px;
text-align: center; border: 1px solid rgba(255, 255, 255, 0.1);
}
.q-visual {
background: rgba(255,255,255,0.05);
border-radius: 20px; padding: 20px; margin-bottom: 20px;
border: 1px dashed var(–primary);
}
input {
width: 100%; padding: 15px; margin: 15px 0;
background: #0f172a; border: 2px solid #334155;
border-radius: 15px; color: var(–primary);
font-size: 1.8rem; text-align: center; outline: none;
}
.btn-unlock {
background: var(–primary); color: white; border: none;
width: 100%; padding: 15px; border-radius: 15px;
font-weight: 700; cursor: pointer;
}

skoolmaths
Expedition Progress: 0 / 10

SOLVE & CONTINUE

Designed for ages 13–16 (UK Year 9–11 / US 8th Grade–10th Grade). Aligned to the UK National Curriculum; adaptable to US state standards.