.interactive-puzzle { --puzzle-brass: #b9aa76; --puzzle-line: #62704d; margin: 20px 0 4px; }
.interactive-puzzle .puzzle-rule-tag { display: flex; align-items: center; justify-content: center; gap: 13px; margin: 0 0 20px; color: #bebc95; font: 13px/1.7 var(--display); letter-spacing: .13em; }
.puzzle-rule-tag::before, .puzzle-rule-tag::after { content: ''; width: 24px; height: 1px; background: #687553; }
.interactive-puzzle .puzzle-instruction { margin: 18px auto 0; max-width: 360px; line-height: 1.9; font-size: 10px; color: #94a489; }
.puzzle-action-status { min-height: 20px; text-align: center; font-size: 10px; color: #b0ba9b; line-height: 1.8; margin: 15px 0 2px; }
.interactive-puzzle .puzzle-reset { display: flex; margin: 6px auto 0; font-size: 10px; color: #899d7c; min-height: 32px; text-decoration: underline; text-underline-offset: 4px; }
.interactive-puzzle button { touch-action: manipulation; }
.interactive-puzzle button.selected { border-color: #d2bf83; background-color: #4f5830; box-shadow: 0 0 0 3px #b9aa761a; }
.interactive-puzzle button:focus-visible { outline-offset: 4px; }
.interactive-puzzle .cipher-wheels { margin: 24px 0 15px; gap: 14px; }
.cipher-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cipher-notch { color: #a3a277; font-size: 11px; line-height: 1; }
.cipher-number { color: #788d70; font: 10px/1.4 var(--display); }
.cipher-wheels input { box-shadow: inset 0 7px 10px #0003, inset 0 -7px 10px #0003; background: linear-gradient(#2a3421, #17261a 25%, #1f2e1d 75%, #2a3421); border-color: #7b8055; }

.nine-board-shell { display: grid; grid-template-columns: minmax(0, 1fr) 24px; column-gap: 10px; row-gap: 9px; width: min(100%, 279px); margin: 0 auto; padding-left: 24px; }
.nine-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 8px; background: #08130e; border: 1px solid #6d7550; outline: 1px solid #33452e; outline-offset: 4px; }
.nine-tile { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border: 1px solid #69734d; border-radius: 0; color: #d7c894; background: #2b3a24; font: 28px/1 var(--display); box-shadow: inset 0 0 0 3px #4a543019, 0 2px 1px #0003; transition: background .15s, border-color .15s, transform .15s; }
.nine-tile:hover:not(:disabled) { background: #3a4a2c; border-color: #a8a16a; transform: translateY(-1px); }
.nine-tile.fixed { color: #919a72; background: #172719; border-style: double; border-width: 3px; box-shadow: none; opacity: 1; }
.nine-row-sums { display: grid; grid-template-rows: repeat(3, 1fr); padding: 7px 0; }
.nine-row-sums span, .nine-column-sums span { display: grid; place-items: center; color: #7f9274; font: 10px/1 var(--utility); }
.nine-column-sums { display: grid; grid-template-columns: repeat(3, 1fr); padding: 1px 8px; }
.nine-diagonals { display: flex; justify-content: center; gap: 24px; margin: 12px 0 4px; color: #7f9274; font: 10px/1.5 var(--utility); }

.mask-line { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; padding: 0 2px 15px; border-bottom: 1px solid #3c5033; }
.mask-slot { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 9px; }
.mask-position { text-align: center; color: #8fa17c; font: 11px/1.3 var(--display); }
.mask-tile { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 5px 9px; background: #17281c; border: 1px solid #3b5135; border-radius: 0; transition: background .15s, border-color .15s; }
.mask-tile:hover { border-color: #899969; background: #263a23; }
.mask-tile svg { display: block; width: 100%; height: auto; max-width: 53px; overflow: visible; }
.mask-name { font: 11px/1.6 var(--display); letter-spacing: .12em; color: #c7c4a0; white-space: nowrap; }

.interactive-puzzle .melody-sequence { margin: 0 0 21px; min-height: 60px; }
.melody-sequence span { width: 34px; height: 34px; font-size: 19px; }
.melody-sequence .selected { background: #35452a; border-color: #969c67; }
.interactive-puzzle .bronze-chimes { align-items: flex-start; gap: 12px; margin: 18px 0 8px; padding-top: 9px; border-top: 3px solid #65704c; }
.bronze-chimes .note-button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 52px; min-height: 96px; height: 96px; border: 1px solid #92915c; border-top-width: 3px; border-bottom-width: 4px; border-radius: 4px 4px 8px 8px; color: #d0c18d; background: linear-gradient(90deg, #293e28, #3e4d2c 50%, #293e28); box-shadow: inset 0 0 0 4px #c2b87c07, 0 3px 4px #0003; }
.bronze-chimes .note-button:nth-child(even) { min-height: 84px; height: 84px; }
.bronze-chimes .note-button:hover { border-color: #d0be81; background: #4b5b33; }
.bronze-chimes .note-button:active { transform: rotate(3deg); }
.chime-hook { position: absolute; width: 7px; height: 14px; border: 1px solid #8b9261; border-radius: 5px 5px 0 0; left: calc(50% - 3px); top: -15px; }
.chime-glyph { font: 24px/1 var(--display); }
.chime-mark { font-size: 10px; color: #a4a671; }

.concentric-compass { position: relative; width: min(100%, 258px); aspect-ratio: 1; margin: 0 auto 20px; isolation: isolate; }
.compass-ring { position: absolute; display: block; top: 50%; left: 50%; padding: 0; border: 1px solid #99925b; border-radius: 50%; color: #c8bc87; background: repeating-conic-gradient(from 0deg, #8e915512 0deg 1deg, transparent 1deg 11.25deg), #263a25; box-shadow: inset 0 0 0 4px #17291e, inset 0 0 0 5px #686f42; transform: translate(-50%, -50%) rotate(var(--ring-turn, 0deg)); transition: transform .35s ease, background-color .2s; }
.compass-ring:hover { background-color: #3c4c2e; border-color: #c8b77a; }
.compass-ring.ring-0 { width: 100%; height: 100%; z-index: 1; }
.compass-ring.ring-1 { width: 73%; height: 73%; z-index: 2; color: #b8c1a0; background-color: #1a352b; border-color: #769477; box-shadow: inset 0 0 0 3px #10271e, inset 0 0 0 4px #426b50; }
.compass-ring.ring-2 { width: 47%; height: 47%; z-index: 3; background-color: #3a4025; }
.ring-number { position: absolute; display: block; line-height: 1; font: 12px/1 var(--utility); transform: translate(-50%, -50%) rotate(calc(-1 * var(--ring-turn, 0deg))); transition: transform .35s ease; }
.ring-1 .ring-number { font-size: 10px; }
.ring-2 .ring-number { font-size: 9px; }
.compass-core { position: absolute; z-index: 4; left: 50%; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #9a9561; border-radius: 50%; background: #15261a; color: #c9bd8d; font: 21px/1 var(--display); transform: translate(-50%, -50%); pointer-events: none; }
.compass-pointer { position: absolute; z-index: 5; left: 50%; top: -12px; transform: translateX(-50%); color: #d2b777; font-size: 13px; line-height: 1; pointer-events: none; text-shadow: 0 2px 4px #0008; }
.ring-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.ring-control { display: grid; grid-template-columns: 27px minmax(20px, 1fr) 27px; gap: 1px; align-items: center; padding: 8px 5px; background: #0f2117; border: 1px solid #3e593a; }
.ring-label { grid-column: 1 / -1; text-align: center; margin: 0 0 6px; font-size: 10px; color: #9ba888; letter-spacing: .15em; }
.ring-adjust { width: 27px; min-height: 32px; padding: 0; color: #b4bc96; border: none; background: #253923; font: 15px/1 var(--body); }
.ring-adjust:hover { background: #435331; color: #e3d7a8; }
.ring-value { text-align: center; color: #d0c493; font: 18px/1 var(--utility); }

.guardian-diamond { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); align-items: center; justify-items: center; column-gap: 7px; row-gap: 0; width: min(100%, 300px); margin: -4px auto 2px; position: relative; }
.guardian-diamond::before { content: ''; position: absolute; width: 58%; height: 58%; left: 21%; top: 21%; border: 1px solid #5d7146; transform: rotate(45deg); pointer-events: none; }
.guardian-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; z-index: 1; }
.guardian-north { grid-column: 2; grid-row: 1; }
.guardian-east { grid-column: 3; grid-row: 2; }
.guardian-south { grid-column: 2; grid-row: 3; }
.guardian-west { grid-column: 1; grid-row: 2; }
.guardian-position { color: #849c75; font-size: 9px; letter-spacing: .14em; }
.guardian-button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 71px; height: 79px; padding: 8px 4px 6px; border: 1px solid #6f8052; outline: 1px solid #344d31; outline-offset: 3px; color: #b5c0a0; background: #203e2d; transition: background .2s, border-color .2s; }
.guardian-button:hover { border-color: #c2b477; background: #3b4d2c; }
.guardian-glyph { font: 31px/1.1 var(--display); text-shadow: 0 1px 0 #0006; }
.guardian-name { font-size: 9px; letter-spacing: .15em; }
.guardian-turn { position: absolute; top: 4px; right: 4px; font-size: 10px; color: #b5bf9277; }
.guardian-button[data-animal="朱雀"] { background: #492b25; color: #d0a58c; border-color: #8b6750; }
.guardian-button[data-animal="白虎"] { background: #b3b095; color: #303b2a; border-color: #c3b68b; }
.guardian-button[data-animal="玄武"] { background: #16251e; color: #a2b89b; border-color: #506b48; }
.guardian-core { grid-column: 2; grid-row: 2; color: #8a9e70; text-align: center; position: relative; z-index: 1; border: 1px solid #5f7446; width: 43px; height: 43px; display: flex; flex-direction: column; justify-content: center; background: #14261a; }
.guardian-core > span { font: 20px/1.1 var(--display); }
.guardian-core small { font: 8px/1.3 var(--display); }

@media (max-width: 600px) {
  .interactive-puzzle { margin-top: 17px; }
  .interactive-puzzle .puzzle-rule-tag { font-size: 11px; gap: 9px; margin-bottom: 18px; }
  .puzzle-rule-tag::before, .puzzle-rule-tag::after { width: 16px; }
  .interactive-puzzle .puzzle-instruction { font-size: 9px; }
  .cipher-wheels input { width: 43px; height: 55px; font-size: 27px; }
  .interactive-puzzle .cipher-wheels { gap: 11px; }
  .nine-board-shell { width: min(100%, 252px); padding-left: 17px; grid-template-columns: minmax(0, 1fr) 17px; column-gap: 8px; }
  .nine-board { gap: 6px; padding: 7px; }
  .nine-tile { font-size: 25px; }
  .nine-row-sums span, .nine-column-sums span { font-size: 9px; }
  .mask-line { gap: 6px; padding-bottom: 12px; }
  .mask-tile { padding: 8px 3px 6px; gap: 7px; }
  .mask-name { font-size: 9px; }
  .mask-position { font-size: 10px; }
  .interactive-puzzle .bronze-chimes { gap: 9px; }
  .bronze-chimes .note-button { width: 38px; min-height: 84px; height: 84px; }
  .bronze-chimes .note-button:nth-child(even) { min-height: 73px; height: 73px; }
  .chime-glyph { font-size: 21px; }
  .concentric-compass { width: min(100%, 230px); }
  .ring-controls { gap: 6px; }
  .ring-control { grid-template-columns: minmax(21px, 1fr) minmax(19px, 1fr) minmax(21px, 1fr); padding: 7px 3px; }
  .ring-adjust { width: 100%; }
  .ring-label { font-size: 9px; }
  .ring-value { font-size: 16px; }
  .guardian-diamond { width: min(100%, 268px); column-gap: 5px; }
  .guardian-button { width: 61px; height: 71px; }
  .guardian-glyph { font-size: 28px; }
  .guardian-name { font-size: 8px; }
  .guardian-position { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .interactive-puzzle *, .interactive-puzzle *::before, .interactive-puzzle *::after { transition: none !important; animation: none !important; }
}