* {
    margin: 0;
    padding: 0;
}

h1, h2, h3 {
  font-family: 'Poppins', sans-serif;
}

body, p, li {
  font-family: 'Lato', sans-serif;
}

code, pre {
  font-family: 'Fira Code', monospace;
}

html {
    box-sizing: border-box;
    font-size: 16px;
    background: linear-gradient(135deg, #ffffff, #c3c3f3, #0046f6);
    background-size: 400% 400%;
}

header {
    top: 20px;
    background-color: #15256d;
    display: flex;
    justify-content: center;
    border-bottom: silver 5px solid;
}

.nav-bar {
    height: 3rem;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 1rem;
}

.nav-bar ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-bar li {
    display: inline-flex;
    flex-direction: column;
    padding: 0rem 1rem;
    color: white;
}

.nav-bar a {
    color: white;
    text-decoration: none;
}

.main-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.page-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 1rem;
    text-align: center;
}

.project-page-link h3 {
    display: flex;
    justify-content: center;
    padding-top: 2rem;
}

.gamestates-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 80%;
}

.temple-gamestate-blurb {
    width: 60%;
    max-width: 40rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.temple-gamestate-blurb h1, .temple-gamestate-blurb h3 {
    text-align: center;
}

.temple-gamestate-blurb ol {
    padding: 1rem;
}
.temple-gamestate-blurb li {
    padding: 0.25rem;
}

.temple-gamestate-header-image-container {
    padding: 1rem;
    display: flex;
}

.temple-gamestate-header-image-container img {
    max-width: 80%;
    height: auto;
    margin: 0 auto;
    border-radius: 25px;
    border:#15256d solid 10px;
}

.temple-gamestate-embed-header {
    display: flex;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60%;
}

.temple-gamestate-embed-header h2 {
    text-align: center;
}

.temple-gamestate-embed-header ol {
    padding: 1rem;
}

.temple-gamestate-embed-header li {
    padding: 0.25rem;
}

.temple-gamestate-embed {
    font-size: 0.75rem;
    height: 30rem; 
    overflow: auto; /* Enable scrollbars when content overflows */
    border: 3px solid #ccc; /* Optional: Add a border for visual clarity */
    padding: 1rem; /* Optional: Add padding inside the container */
    background-color: #f8f8f8; /* Optional: Light background for readability */
    margin: 1rem;
    width: 80%;
}

.temple-gamestate-list {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.temple-gamestate-list h2 {
    text-align: center;
}

.temple-gamestate-list ol {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
}

.temple-gamestate-list li {
    padding: 0.25rem;
}

.footer {
    display: flex;
    justify-content: center;
    align-content: center;
    height: 4em;
    background-color: #15256d;
    position: relative;
    border-top: silver 5px solid;
}

.copyright {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

.copyright p {
    color: silver;
    font-size: 1.25rem;
}

@media only screen and (max-width: 769px) {
    
    .temple-gamestate-blurb {
        width: 80%;
    }

    .temple-gamestate-embed-header {
        width: 80%;
    }


}

/* Footer at the bottom: on a short page it sits at the foot of the window, on a long page after the content */
body {
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
  padding-bottom: calc(4em + 5px); /* room for the footer, which is 4em tall plus its 5px border */
}

footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

/* ---- gs-visual-styles (moved from inline <style>) ---- */
.gs-section { width: calc(100% - 4rem); max-width: 1100px; margin: 1.5rem 2rem; padding: 2rem; background: #ffffff; border: #0046f6 5px solid; border-radius: 0.5rem; box-sizing: border-box; color: #1b2a5a; }
.gs-section h2 { text-align: center; color: #15256d; font-family: 'Poppins', sans-serif; margin-bottom: 0.75rem; }
.gs-section h3 { text-align: center; color: #15256d; font-family: 'Poppins', sans-serif; font-size: 1.15rem; margin: 2rem 0 1rem; }
.gs-intro, .gs-fine { max-width: 860px; margin: 0 auto 1rem; line-height: 1.6; }
.gs-fine { font-size: 0.88rem; color: #3b4a7a; margin-top: 1.5rem; }
.gs-flow { display: flex; gap: 0.5rem; justify-content: center; }
.gs-step { flex: 1 1 0; min-width: 0; padding: 0.75rem; background: #eef2ff; border: 2px solid slateblue; border-radius: 0.5rem; text-align: center; display: flex; flex-direction: column; gap: 0.3rem; }
.gs-step b { align-self: center; width: 1.6rem; height: 1.6rem; line-height: 1.6rem; border-radius: 50%; background: #0046f6; color: #fff; font-size: 0.9rem; }
.gs-step strong { color: #15256d; font-size: 0.92rem; }
.gs-step span { color: #2645c5; font-size: 0.8rem; line-height: 1.35; }
.gs-arrow { align-self: center; color: #0046f6; font-size: 1.4rem; font-weight: 700; }
.gs-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.gs-label { font-weight: 700; color: #15256d; margin-bottom: 0.5rem; }
.gs-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gs-btn { flex: 1 1 auto; padding: 0.65rem 0.9rem; min-height: 44px; border: 2px solid #0056b3; background: #ffffff; color: #0056b3; border-radius: 0.4rem; font-weight: 700; font-family: 'Lato', sans-serif; cursor: pointer; }
.gs-btn.active { background: #0056b3; color: #ffffff; }
.gs-btn.gs-b { border-color: #c2410c; color: #c2410c; } .gs-btn.gs-b.active { background: #c2410c; color: #fff; }
.gs-btn.gs-n { border-color: #475569; color: #475569; } .gs-btn.gs-n.active { background: #475569; color: #fff; }
.gs-stage { display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding: 1.5rem; background: #f6f7ff; border-radius: 0.5rem; flex-wrap: wrap; }
.gs-player { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; font-weight: 700; color: #15256d; }
.gs-token { width: 4rem; height: 4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; color: #fff; background: #0056b3; transition: background 0.2s; }
.gs-token.b { background: #c2410c; } .gs-token.n { background: #475569; }
.gs-walk { color: #0046f6; font-weight: 700; white-space: nowrap; }
.gs-walk span { font-size: 0.85rem; }
.gs-temple { flex: 1 1 18rem; max-width: 26rem; border: 4px solid #64748b; border-radius: 0.6rem; background: #ffffff; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; transition: border-color 0.2s; }
.gs-temple.u { border-color: #64748b; } .gs-temple.a { border-color: #0056b3; } .gs-temple.b { border-color: #c2410c; }
.gs-temple.x { border-color: #dc2626; animation: gs-pulse 1.2s ease-in-out infinite; }
@keyframes gs-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.45); } 50% { box-shadow: 0 0 0 10px rgba(220,38,38,0); } }
@media (prefers-reduced-motion: reduce) { .gs-temple.x { animation: none; } }
.gs-temple-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; color: #15256d; }
.gs-badge { padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: #fff; background: #0056b3; }
.gs-temple.u .gs-badge { background: #64748b; } .gs-temple.b .gs-badge { background: #c2410c; } .gs-temple.x .gs-badge { background: #dc2626; }
.gs-perf { margin: 0.6rem 0; padding: 0.5rem 0.75rem; background: #eef2ff; border-left: 4px solid #0046f6; border-radius: 0.3rem; font-size: 0.88rem; line-height: 1.45; }
.gs-temple-sub { font-size: 0.88rem; color: #3b4a7a; }
.gs-mine { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; border-radius: 0.4rem; background: #eef2ff; font-size: 0.9rem; font-weight: 700; color: #15256d; }
.gs-lock { padding: 0.15rem 0.5rem; border-radius: 0.3rem; font-size: 0.78rem; color: #fff; background: #15803d; }
.gs-lock.locked { background: #b91c1c; }
.gs-flip { padding: 0.65rem 0.9rem; min-height: 44px; border: 2px solid #dc2626; background: #fff; color: #b91c1c; border-radius: 0.4rem; font-weight: 700; cursor: pointer; }
.gs-flip[hidden] { display: none; }
.gs-out { margin-top: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.gs-row { padding: 0.85rem 1rem; border-radius: 0.5rem; background: #eef2ff; border-top: 4px solid #0046f6; font-size: 0.92rem; line-height: 1.5; }
.gs-row h4 { margin: 0 0 0.3rem; color: #15256d; font-family: 'Poppins', sans-serif; font-size: 0.95rem; }
.gs-row.deny { border-top-color: #b91c1c; background: #fef2f2; } .gs-row.ok { border-top-color: #16a34a; background: #f0fdf4; }
.gs-section code { font-family: 'Fira Code', monospace; font-size: 0.76rem; background: #ffffff; border: 1px solid #c3c3f3; padding: 0.05rem 0.3rem; border-radius: 0.2rem; overflow-wrap: anywhere; }
.gs-states, .gs-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
.gs-state { border: 3px solid; border-radius: 0.5rem; padding: 1rem 1.25rem; background: #fff; }
.gs-state.gs-s-u { border-color: #64748b; } .gs-state.gs-s-c { border-color: #0056b3; } .gs-state.gs-s-x { border-color: #dc2626; }
.gs-state h4, .gs-note h4 { margin: 0 0 0.5rem; color: #15256d; font-family: 'Poppins', sans-serif; font-size: 1rem; }
.gs-state ul { padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem; line-height: 1.45; }
.gs-note { padding: 1rem 1.25rem; background: #eef2ff; border-radius: 0.5rem; border-top: 4px solid #0046f6; font-size: 0.92rem; line-height: 1.5; }
.gs-seq { display: flex; flex-direction: column; gap: 1rem; max-width: 900px; margin: 0 auto; }
.gs-seq-step { display: flex; gap: 1rem; padding: 1rem 1.25rem; background: #eef2ff; border: 2px solid slateblue; border-radius: 0.5rem; }
.gs-seq-step > b { flex: 0 0 2rem; width: 2rem; height: 2rem; line-height: 2rem; text-align: center; border-radius: 50%; background: #0046f6; color: #fff; font-size: 1rem; }
.gs-seq-step h4 { margin: 0 0 0.4rem; color: #15256d; font-family: 'Poppins', sans-serif; font-size: 1.02rem; }
.gs-seq-step p, .gs-seq-step li { font-size: 0.93rem; line-height: 1.55; }
.gs-seq-step ul { padding-left: 1.1rem; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.gs-branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
.gs-branch { padding: 0.7rem 0.9rem; border-radius: 0.4rem; background: #fff; border-left: 5px solid; font-size: 0.88rem; line-height: 1.45; display: flex; flex-direction: column; gap: 0.2rem; }
.gs-branch strong { color: #15256d; }
.gs-branch.none { border-color: #94a3b8; } .gs-branch.temple { border-color: #0056b3; } .gs-branch.mine { border-color: #7c3aed; }
.gs-gate { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.gs-q { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; background: #fff; border: 2px solid #c3c3f3; border-radius: 0.4rem; font-weight: 700; color: #15256d; font-size: 0.92rem; flex-wrap: wrap; }
.gs-q span { flex: 0 0 1.6rem; width: 1.6rem; height: 1.6rem; line-height: 1.6rem; text-align: center; border-radius: 50%; background: #0046f6; color: #fff; font-size: 0.85rem; }
.gs-q em { margin-left: auto; font-style: normal; font-weight: 700; font-size: 0.82rem; color: #b91c1c; }
.gs-q.gs-yes { border-color: #16a34a; background: #f0fdf4; } .gs-q.gs-yes span { background: #15803d; } .gs-q.gs-yes em { color: #15803d; }
@media (max-width: 768px) { .gs-seq-step { padding: 0.85rem 0.75rem; gap: 0.7rem; } .gs-q em { margin-left: 0; flex-basis: 100%; padding-left: 2.35rem; } }
.gs-scenes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 1.25rem; }
.gs-scene { border: 3px solid slateblue; border-radius: 0.5rem; padding: 1rem 1.1rem; background: #fff; display: flex; flex-direction: column; gap: 0.75rem; }
.gs-scene h4 { margin: 0; color: #15256d; font-family: 'Poppins', sans-serif; font-size: 1.05rem; }
.gs-scene-note { font-size: 0.85rem; color: #3b4a7a; line-height: 1.45; }
.gs-map { position: relative; height: 15rem; border-radius: 0.5rem; background: #e8ecfb; border: 2px solid #c3c3f3; overflow: hidden; }
.gs-zone-label { position: absolute; top: 0.3rem; left: 0.5rem; font-size: 0.72rem; font-weight: 700; color: #15256d; }
.gs-zl-world { color: #475569; }
.gs-zone-temple { position: absolute; left: 30%; top: 14%; width: 62%; height: 74%; border: 3px dashed #0056b3; border-radius: 0.4rem; background: rgba(0,86,179,0.08); }
.gs-zone-mine { position: absolute; left: 36%; top: 38%; width: 56%; height: 54%; border: 3px solid #7c3aed; border-radius: 0.3rem; background: rgba(124,58,237,0.12); }
.gs-zone-mine .gs-zone-label { color: #5b21b6; }
.gs-dot { position: absolute; width: 2.1rem; height: 2.1rem; margin: -1.05rem 0 0 -1.05rem; border-radius: 50%; background: #0056b3; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,0.35); transition: left 0.6s ease, top 0.6s ease; z-index: 3; }
.gs-dot.b { background: #c2410c; } .gs-dot.n { background: #475569; }
@media (prefers-reduced-motion: reduce) { .gs-dot { transition: none; } }
.gs-map-btns { margin-top: 0; }
.gs-log { min-height: 4rem; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.86rem; line-height: 1.45; }
.gs-ev { padding: 0.5rem 0.7rem; border-radius: 0.35rem; background: #eef2ff; border-left: 4px solid #0046f6; }
.gs-ev.leave { border-left-color: #94a3b8; } .gs-ev.mine { border-left-color: #7c3aed; } .gs-ev.deny { border-left-color: #b91c1c; background: #fef2f2; } .gs-ev.ok { border-left-color: #16a34a; background: #f0fdf4; }
.gs-check { font-size: 0.9rem; font-weight: 700; color: #15256d; display: flex; gap: 0.5rem; align-items: center; }
.gs-check input { width: 1.2rem; height: 1.2rem; }
.gs-blocks { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; padding: 1rem; background: #1f2937; border-radius: 0.5rem; }
.gs-block { width: 3.4rem; height: 3.4rem; border: 0; border-radius: 0.3rem; cursor: pointer; background: linear-gradient(135deg,#6b7280 0 50%,#4b5563 50% 100%); position: relative; box-shadow: inset 0 0 0 3px rgba(255,255,255,0.12); transition: transform 0.25s, opacity 0.25s; }
.gs-block::after { content: ""; position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; background: #f59e0b; border-radius: 0.2rem; box-shadow: 0 0 6px rgba(245,158,11,0.8); }
.gs-block.broken { transform: scale(0.2) rotate(40deg); opacity: 0; pointer-events: none; }
.gs-block.shake { animation: gs-shake 0.4s; outline: 3px solid #ef4444; }
@keyframes gs-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .gs-block.shake { animation: none; } }
.gs-gates { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.86rem; }
.gs-gate-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; border-radius: 0.35rem; background: #eef2ff; font-weight: 700; color: #15256d; }
.gs-gate-row i { font-style: normal; flex: 0 0 1.4rem; width: 1.4rem; height: 1.4rem; line-height: 1.4rem; text-align: center; border-radius: 50%; background: #94a3b8; color: #fff; font-size: 0.8rem; }
.gs-gate-row.pass i { background: #15803d; } .gs-gate-row.fail i { background: #b91c1c; } .gs-gate-row.skip { opacity: 0.55; } .gs-gate-row.skip i { background: #64748b; }
.gs-banner { display: flex; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap; justify-content: center; margin: 0 auto 1.25rem; padding: 0.8rem 1rem; max-width: 900px; border-radius: 0.6rem; background: linear-gradient(90deg, #0046f6, #7c3aed); color: #fff; font-size: 0.95rem; }
.gs-banner a { color: #0b1f6b; background: #fff; text-decoration: none; font-weight: 700; padding: 0.4rem 0.8rem; border-radius: 999px; font-size: 0.85rem; min-height: 1rem; }
.gs-banner a:hover { background: #e0e7ff; }
.gs-pulse-dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #fde047; box-shadow: 0 0 0 0 rgba(253,224,71,0.8); animation: gs-ping 1.4s infinite; }
@keyframes gs-ping { 0% { box-shadow: 0 0 0 0 rgba(253,224,71,0.8); } 100% { box-shadow: 0 0 0 12px rgba(253,224,71,0); } }
.gs-tag { display: inline-block; vertical-align: middle; margin-left: 0.5rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: #7c3aed; color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; font-family: 'Lato', sans-serif; }
.gs-btn { transition: transform 0.12s, box-shadow 0.12s; }
.gs-btn:hover, .gs-block:hover, .gs-flip:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(21,37,109,0.25); }
.gs-btn:focus-visible, .gs-block:focus-visible, .gs-flip:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
.gs-nudge .gs-btn:not(.active) { animation: gs-glow 1.6s ease-in-out infinite; }
.gs-nudge .gs-block { animation: gs-glow 1.6s ease-in-out infinite; }
.gs-flip { animation: gs-glow-red 1.6s ease-in-out infinite; }
@keyframes gs-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); } 50% { box-shadow: 0 0 0 5px rgba(124,58,237,0.45); } }
@keyframes gs-glow-red { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); } 50% { box-shadow: 0 0 0 5px rgba(220,38,38,0.4); } }
.gs-tap { text-align: center; font-weight: 700; font-size: 0.85rem; color: #7c3aed; margin: 0 0 -0.4rem; animation: gs-bob 1s ease-in-out infinite; }
.gs-tap[hidden] { display: none; }
@keyframes gs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .gs-pulse-dot, .gs-nudge .gs-btn:not(.active), .gs-nudge .gs-block, .gs-flip, .gs-tap { animation: none; } .gs-nudge .gs-btn:not(.active), .gs-nudge .gs-block { outline: 2px dashed #7c3aed; outline-offset: 2px; } }
.gs-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; padding: 0.5rem 0.7rem; background: #f6f7ff; border: 2px solid #c3c3f3; border-radius: 0.5rem; font-size: 0.85rem; }
.gs-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.7rem; border-radius: 999px; color: #fff; font-weight: 700; background: #0056b3; }
.gs-chip.b { background: #c2410c; } .gs-chip.n { background: #475569; } .gs-chip.u { background: #64748b; } .gs-chip.x { background: #dc2626; }
.gs-status a { margin-left: auto; font-weight: 700; color: #0056b3; }
@media (max-width: 900px) { .gs-flow { flex-direction: column; } .gs-arrow { transform: rotate(90deg); } }
@media (max-width: 768px) {
  .gs-section { width: calc(100% - 1rem); margin: 1rem 0.5rem; padding: 1rem 0.75rem; border-width: 3px; }
  .gamestates-container { width: 100%; }
  .gs-walk span { display: none; }
  .gs-walk { font-size: 0; } .gs-walk::before { content: 'walks in \2193'; font-size: 0.9rem; }
  .gs-stage { flex-direction: column; padding: 1rem 0.75rem; }
  .gs-temple { flex: 0 0 auto; width: 100%; max-width: none; box-sizing: border-box; }
}

/* ---- walk-into-the-mine gate ---- */
.gs-stepn { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; margin-right: 0.45rem; border-radius: 50%; background: #0046f6; color: #fff; font-size: 0.85rem; vertical-align: middle; }
.gs-minegate { padding: 0.55rem 0.75rem; border-radius: 0.4rem; background: #eef2ff; border-left: 4px solid #7c3aed; font-size: 0.88rem; line-height: 1.5; color: #1b1f3a; }
.gs-scene.locked .gs-minegate { background: #f1f5f9; border-left-color: #64748b; }
.gs-gate-ok { font-weight: 700; color: #166534; } .gs-gate-lock { font-weight: 700; color: #475569; }
.gs-gogate { display: block; margin-top: 0.5rem; width: 100%; }
.gs-scene.locked .gs-blocks, .gs-scene.locked .gs-gates, .gs-scene.locked .gs-check, .gs-scene.locked .gs-tap, .gs-scene.locked #gs-reset { opacity: 0.4; pointer-events: none; filter: grayscale(0.7); }
.gs-scene.locked .gs-tap { display: none; }
.gs-scene { transition: border-color 0.3s, box-shadow 0.3s; }
.gs-scene:not(.locked)#gs-mine-scene { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }
.gs-ev a { font-weight: 700; }

/* ---- closing summary ---- */
.gs-summary { margin-top: 1.5rem; padding: 1rem 1.25rem; background: #eef2ff; border: 2px solid #0046f6; border-radius: 0.6rem; }
.gs-summary .gs-summary-h { margin: 0 0 0.5rem; color: #15256d; font-family: 'Poppins', sans-serif; font-size: 1.05rem; text-align: left; }
.gs-summary p { margin: 0; color: #1b1f3a; font-size: 0.95rem; line-height: 1.6; }

/* ---- temple / player / mine styling ---- */
.gs-ico { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; }
.gs-role { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 800; color: #fff; background: #15256d; }
.gs-stage { padding-top: 3rem; }
.gs-player { padding: 1rem 1.25rem; border-radius: 0.6rem; background: #fff; border: 2px solid #c3c3f3; box-shadow: 0 2px 8px rgba(21,37,109,0.1); }
.gs-token { border: 4px solid #fff; box-shadow: 0 0 0 3px #0056b3, 0 4px 10px rgba(0,0,0,0.25); }
.gs-token.b { box-shadow: 0 0 0 3px #c2410c, 0 4px 10px rgba(0,0,0,0.25); } .gs-token.n { box-shadow: 0 0 0 3px #475569, 0 4px 10px rgba(0,0,0,0.25); }
.gs-temple { --tc: #64748b; position: relative; border-color: var(--tc); border-top-width: 6px; background: repeating-linear-gradient(90deg, rgba(21,37,109,0.045) 0 14px, transparent 14px 34px), #fff; margin-top: 1.4rem; }
.gs-temple.u { --tc: #64748b; } .gs-temple.a { --tc: #0056b3; } .gs-temple.b { --tc: #c2410c; } .gs-temple.x { --tc: #dc2626; }
.gs-temple::before { content: ""; position: absolute; left: -10px; right: -10px; top: -2.6rem; height: 2.2rem; background: var(--tc); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.gs-temple::after { content: ""; position: absolute; left: -10px; right: -10px; bottom: -0.75rem; height: 0.75rem; background: var(--tc); border-radius: 0 0 0.3rem 0.3rem; }
.gs-role-temple { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 1.1rem; }
.gs-mine { position: relative; background: radial-gradient(circle at 12% 30%, #f5b301 0 3px, transparent 4px), radial-gradient(circle at 70% 70%, #f5b301 0 2.5px, transparent 3.500px), radial-gradient(circle at 88% 25%, #93c5fd 0 2.500px, transparent 3.500px), linear-gradient(135deg, #3b4252, #1f2430); color: #fff; border: 2px solid #7c3aed; }
.gs-mine-ico { display: inline-flex; width: 2rem; height: 2rem; border-radius: 0.35rem; align-items: center; justify-content: center; background: #7c3aed; color: #fff; }
.gs-mine #gs-mine-text { color: #fff; }
.gs-zone-label .gs-ico { margin-right: 0.15rem; }
.gs-zone-temple { background: repeating-linear-gradient(90deg, rgba(0,86,179,0.1) 0 10px, rgba(0,86,179,0.04) 10px 26px); }
.gs-zone-mine { background: radial-gradient(circle at 20% 30%, rgba(245,179,1,0.9) 0 2.5px, transparent 3.500px), radial-gradient(circle at 75% 65%, rgba(245,179,1,0.9) 0 2.5px, transparent 3.500px), linear-gradient(135deg, #5b5f77, #3a3d52); }
.gs-zone-mine .gs-zone-label { color: #fff; }
@media (max-width: 768px) { .gs-stage { padding-top: 2.8rem; } }
.gs-zone-mine .gs-zone-label .gs-ico { width: 1.7em; height: 1.7em; vertical-align: -0.45em; }
.gs-mine-ico .gs-ico { width: 1.5rem; height: 1.5rem; }

/* ---- mobile: number beside the heading, text uses the full card width ---- */
@media (max-width: 768px) {
  .gs-seq-step { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 0.7rem; row-gap: 0.5rem; align-items: center; }
  .gs-seq-step > div { display: contents; }
  .gs-seq-step > b { grid-column: 1; grid-row: 1; }
  .gs-seq-step h4 { grid-column: 2; grid-row: 1; margin: 0; }
  .gs-seq-step > div > *:not(h4) { grid-column: 1 / -1; min-width: 0; }
  .gs-seq-step ul { padding-left: 1.1rem; }
}
@media (max-width: 768px) {
  .gs-q { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: 0.7rem; row-gap: 0.15rem; align-items: center; }
  .gs-q em { grid-column: 2; padding-left: 0; flex-basis: auto; }
}

/* ---- performance note: a clear, evenly padded callout ---- */
.gs-seq-step .gs-perf { margin: 0.4rem 0; padding: 0.7rem 0.9rem; background: #fff; border: 1px solid #c3c3f3; border-left: 4px solid #0046f6; border-radius: 0.4rem; font-size: 0.9rem; line-height: 1.55; box-sizing: border-box; }
@media (max-width: 768px) { .gs-seq-step .gs-perf { margin: 0.1rem 0; padding: 0.65rem 0.75rem; font-size: 0.88rem; } }

/* Lead sentence at the top of each temple status card */
.gs-state-lead { margin: 0 0 0.6rem; font-size: 0.9rem; line-height: 1.45; font-weight: 600; }
#gs-dot { left: 8%; top: 72%; }