.demo-main { max-width: 1400px; margin: auto; padding: 56px clamp(18px, 4vw, 64px) 100px; }
.demo-intro { max-width: 820px; margin: 0 auto 38px; text-align: center; }
.demo-intro h1 { margin: 8px 0 15px; font: 700 clamp(2.8rem, 5.4vw, 5.2rem)/1.05 Fraunces, Georgia, serif; letter-spacing: -.045em; }
.demo-intro > p:last-child { max-width: 710px; margin: auto; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.demo-stage { display: grid; grid-template-columns: minmax(330px, 1.08fr) minmax(360px, .92fr); min-height: 650px; overflow: hidden; background: #fffaf0; border: 1px solid #d9cbb4; border-radius: 16px; box-shadow: 0 18px 42px #604d2b1f; }
.demo-board-panel { min-width: 0; padding: 18px 18px 10px; background: #e8e1cf; }
.demo-panel-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 0 2px 12px; color: #304638; }
.demo-panel-heading strong { font: 700 1.1rem Fraunces, Georgia, serif; }
.demo-panel-heading span { font-size: .8rem; font-weight: 700; }
.demo-board-viewport { height: 568px; overflow: auto; border: 5px solid #fffaf0; border-radius: 9px; box-shadow: 0 4px 14px #54472f40; scrollbar-width: thin; }
.demo-board-surface { position: relative; width: max(100%, 760px); line-height: 0; }
.demo-board-surface img { display: block; width: 100%; height: auto; }
.demo-pawn, .demo-square-ring { position: absolute; z-index: 2; transform: translate(-50%, -50%); transition: left .45s ease, top .45s ease; }
.demo-square-ring { width: 9%; aspect-ratio: 1; border: 5px solid #c33626; border-radius: 50%; background: #fff7dc50; box-shadow: 0 0 0 4px #fff9e9cc, 0 2px 15px #302416aa; }
.demo-pawn { width: 33px; height: 33px; border: 3px solid #fff9e9; border-radius: 50%; background: #b93f31; color: white; box-shadow: 0 2px 8px #34251a; font: 800 15px/27px DM Sans, sans-serif; text-align: center; }
.demo-board-caption { margin: 10px 2px 0; color: #516051; font-size: .77rem; line-height: 1.45; }
.demo-story { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(28px, 3.4vw, 54px); }
.demo-step-label { margin: 0 0 22px; color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .16em; }
.demo-event-kind { margin: 0 0 8px; color: #a34832; font-size: .74rem; font-weight: 700; letter-spacing: .16em; }
.demo-story h2 { margin: 0 0 18px; font: 700 clamp(2rem, 2.8vw, 3rem)/1.1 Fraunces, Georgia, serif; letter-spacing: -.035em; }
.demo-action { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 8px 9px 8px 14px; border: 1px solid #d6c8aa; border-radius: 9px; background: #f5eddb; font-size: .82rem; font-weight: 700; }
.demo-action[hidden], .demo-card[hidden] { display: none; }
.demo-action strong { display: grid; place-items: center; width: 39px; height: 39px; border: 2px solid #365545; border-radius: 7px; background: #fffdf6; color: #244131; font-size: 1.4rem; box-shadow: 2px 2px 0 #d4c6a5; }
.demo-instruction { margin: 0; color: #37493d; font-size: 1.04rem; line-height: 1.62; }
.demo-card { align-self: center; width: min(310px, 85%); margin: 16px 0 2px; padding: 0; border: 0; background: transparent; cursor: zoom-in; filter: drop-shadow(0 6px 10px #3f352a3d); }
.demo-card svg { display: block; width: 100%; height: auto; }
.demo-card.expanded { position: fixed; z-index: 30; top: 50%; left: 50%; width: min(430px, 82vw); max-height: 88vh; margin: 0; transform: translate(-50%, -50%); cursor: zoom-out; filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 70px #15231cee); }
.demo-card.expanded svg { max-height: 88vh; }
.demo-effects { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; min-height: 32px; }
.demo-effects span { padding: 6px 10px; border-radius: 999px; background: #e6eddc; color: #365442; font-size: .76rem; font-weight: 700; }
.demo-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin-top: auto; border-top: 1px solid #ddcfb9; border-bottom: 1px solid #ddcfb9; }
.demo-stats div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 9px; }
.demo-stats div + div { border-left: 1px solid #ddcfb9; }
.demo-stats span { color: #526052; font-size: .75rem; font-weight: 700; }
.demo-stats strong { color: #293e30; font-size: 1.25rem; }
.demo-note { margin: 14px 0 0; color: #697567; font-size: .82rem; line-height: 1.5; }
.demo-controls { display: flex; align-items: center; gap: 22px; padding: 22px 3px 14px; }
.demo-transport { display: flex; gap: 7px; }
.demo-transport button { min-height: 43px; padding: 8px 12px; border: 1px solid #b9ad9c; border-radius: 8px; background: #fffaf0; color: var(--ink); font-weight: 700; cursor: pointer; }
.demo-transport button:hover:not(:disabled) { background: #ecdfc8; }
.demo-transport button:disabled { opacity: .4; cursor: default; }
.demo-transport .demo-toggle { min-width: 133px; border-color: var(--ink); background: var(--ink); color: white; }
.demo-transport .demo-toggle:hover { background: #40584a; }
.demo-steps { display: flex; justify-content: center; gap: 12px; flex: 1; }
.demo-steps button { width: 14px; height: 14px; padding: 0; border: 1px solid #829783; border-radius: 50%; background: transparent; cursor: pointer; }
.demo-steps button.active { background: #a7523e; border-color: #a7523e; transform: scale(1.2); }
.demo-timing { color: var(--muted); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.demo-source { margin: 0 0 62px; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.demo-finish { display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: clamp(28px, 4vw, 50px); border-radius: 14px; background: #dce5d6; }
.demo-finish h2 { margin: 8px 0 10px; font: 700 clamp(2.2rem, 3.4vw, 3.4rem)/1.1 Fraunces, Georgia, serif; letter-spacing: -.035em; }
.demo-finish p:last-child { max-width: 570px; margin: 0; color: #405347; line-height: 1.6; }
.demo-finish-links { display: flex; flex-wrap: wrap; gap: 10px; flex-shrink: 0; }
@media(max-width: 900px) { .demo-stage { grid-template-columns: 1fr; } .demo-board-viewport { height: 430px; } .demo-story { min-height: 460px; } .demo-finish { display: block; } .demo-finish-links { margin-top: 24px; } }
@media(max-width: 600px) { .demo-main { padding: 38px 14px 65px; } .demo-intro h1 { font-size: 2.75rem; } .demo-intro > p:last-child { font-size: .95rem; } .demo-stage { border-radius: 10px; } .demo-board-panel { padding: 12px; } .demo-board-viewport { height: 365px; } .demo-story { min-height: 430px; padding: 24px; } .demo-story h2 { font-size: 2.1rem; } .demo-controls { flex-wrap: wrap; justify-content: center; gap: 15px; } .demo-steps { order: 3; flex-basis: 100%; } .demo-source { margin-bottom: 44px; } .demo-finish { padding: 25px; } .demo-finish-links { display: grid; } }
@media(prefers-reduced-motion: reduce) { .demo-pawn, .demo-square-ring { transition: none; } }