.square-color{max-width:62rem}.square-color .square-grid{grid-template-columns:minmax(0,1fr) 16rem}.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}.hud .box{justify-content:center;text-align:center}.lives{font-size:1.3rem;letter-spacing:.12em;color:var(--terracotta)}.lives .path{opacity:.2;filter:grayscale(1)}.stage{position:relative;height:min(62vh,520px);min-height:380px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg,#ffffff06,#0000004d);touch-action:manipulation}.stage:after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;border-top:1px dashed rgba(212,88,60,.45);background:linear-gradient(0deg,rgba(212,88,60,.25),transparent);pointer-events:none}.stage.paused .body{animation-play-state:paused}.figurine{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;width:96px;padding:0;border:none;background:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.figurine:hover{color:inherit}.figurine:focus{outline:none}.figurine .inner{display:flex;flex-direction:column;align-items:center;animation:emerge .35s ease-out}@keyframes emerge{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}.shield{position:relative;margin-bottom:4px;padding:1px 10px;border:1px solid var(--terracotta);border-radius:6px;background:var(--surface);color:var(--light);font-size:1.2rem;letter-spacing:.04em;box-shadow:0 2px 6px #00000059}.shield:after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-5px;border:5px solid transparent;border-top-color:var(--terracotta);border-bottom:0}.figurine .body{display:block;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5));animation:hover 2.6s ease-in-out infinite;transition:transform .15s,filter .15s}@keyframes hover{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.base{width:62px;height:12px;margin-top:2px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%)}.figurine:hover .body,.figurine:focus-visible .body{transform:translateY(-10px) scale(1.08);filter:drop-shadow(0 0 10px rgba(220,171,75,.7))}.figurine.fixed{pointer-events:none}.figurine.correct .body{animation:cheer .5s ease-out forwards;filter:drop-shadow(0 0 14px #dcab4b)}@keyframes cheer{40%{transform:translateY(-22px) scale(1.3)}to{transform:translateY(-8px) scale(1.1)}}.figurine.correct .shield{border-color:var(--green)}.figurine.wrong .body{animation:wobble .4s;filter:drop-shadow(0 0 12px #d4583c)}.figurine.wrong .shield{border-color:var(--red)}.figurine.tilts{pointer-events:none;animation:tip-over .7s ease-in forwards}@keyframes tip-over{30%{transform:rotate(-8deg)}to{transform:translateY(60px) rotate(80deg);opacity:0}}.figurine.path{pointer-events:none;animation:fade-out .45s ease-in forwards}@keyframes fade-out{to{opacity:0;transform:scale(.4) translateY(30px)}}.plane{position:fixed;z-index:30;pointer-events:none;transition:transform .6s cubic-bezier(.5,-.3,.6,1),opacity .6s}.square-color .board-box h2{margin-bottom:.5rem;font-size:1rem;font-weight:400}.color-board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;border:2px solid var(--line)}.color-board div{transition:background-color .35s}.color-board .light{background:#f0d9b5}.color-board .dark{background:#b58863}.color-board.hidden-card div{background:#8080801f}.color-board.hidden-card div:nth-child(odd){background:#8080800f}.color-board div.showing.light{background:#f0d9b5!important}.color-board div.showing.dark{background:#b58863!important}.color-board div.showing{position:relative;z-index:2;animation:light-up .9s ease-out}@keyframes light-up{0%{box-shadow:0 0 #dcab4be6;transform:scale(1.6)}to{box-shadow:0 0 0 10px #dcab4b00;transform:scale(1)}}.coord{display:flex;justify-content:space-around;margin-top:3px;font-size:.7rem;color:var(--muted)}.help{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;font-size:.85rem;color:var(--muted);cursor:pointer}.memory-aid{margin-top:.6rem;font-size:.82rem;line-height:1.45;color:var(--muted)}.example{display:flex;justify-content:center;gap:1.4rem;margin:.8rem 0}.example div{display:flex;flex-direction:column;align-items:center}.example img{width:3.2rem;height:3.2rem}.example small{font-size:.78rem;color:var(--muted)}:root .stage{border-radius:16px;border-color:var(--border)}@media (max-width: 760px){.hud{grid-template-columns:repeat(2,1fr)}.square-color .board-box{max-width:18rem;width:100%;justify-self:center}}