/* GPX PLAY — 幻の遊戯場 */
.play-wrap { max-width: 760px; margin: 0 auto; padding: 110px 20px 150px; position: relative; z-index: 2; }
.play-head { text-align: center; margin-bottom: 46px; }
.play-head .crest { width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 50%; border: 1px solid var(--gold); outline: 1px solid rgba(216,181,106,.3); outline-offset: 6px; background: rgba(5,5,7,.85); color: var(--gold); display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-weight: 800; font-size: 40px; }
.play-head h1 { font-family: 'Cinzel', serif; font-size: clamp(30px, 5vw, 44px); letter-spacing: .1em; }
.play-head h1 .jp { display: block; font-family: 'Yuji Syuku', serif; font-size: .52em; letter-spacing: .3em; color: var(--gold); margin-top: 10px; }
.play-head .lead { color: var(--muted); margin-top: 16px; line-height: 2; font-size: 14.5px; }
.play-panel { border: 1px solid rgba(216,181,106,.3); border-radius: 22px; padding: 28px 22px 34px; margin-bottom: 28px; background: linear-gradient(160deg, rgba(216,181,106,.05), rgba(5,5,7,.4) 55%); text-align: center; }
.play-kicker { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .42em; color: var(--gold); }
.play-panel h2 { font-family: 'Cinzel', serif; font-size: clamp(21px, 3.4vw, 28px); margin: 12px 0 4px; }
.play-panel h2 .jp { display: block; font-family: 'Yuji Syuku', serif; font-size: .58em; letter-spacing: .24em; color: var(--gold); margin-top: 7px; }
.play-copy { color: var(--muted); font-size: 13.5px; line-height: 2; margin: 10px auto 6px; max-width: 520px; }
.play-copy .jp { display: block; }

/* TAP */
.tap-stage { margin: 22px auto 4px; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; }
.tap-stamp { position: relative; width: 200px; height: 200px; border-radius: 50%; border: 0; background: radial-gradient(circle at 50% 40%, rgba(216,181,106,.16), rgba(5,5,7,.25) 70%); cursor: pointer; padding: 10px; transition: transform .06s ease; -webkit-tap-highlight-color: transparent; }
.tap-stamp svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
.tap-stamp.hit { transform: scale(.9) rotate(-2deg); }
.tap-stamp.god { animation: tapGod 1s ease; }
@keyframes tapGod { 0% { filter: brightness(1); } 30% { filter: brightness(1.9) drop-shadow(0 0 34px rgba(255,220,140,.9)); } 100% { filter: brightness(1); } }
.tap-spark { position: absolute; inset: 0; pointer-events: none; }
.tap-spark i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #ffe9a8; box-shadow: 0 0 8px 2px rgba(255,215,130,.6); animation: sparkFly .55s ease-out forwards; }
@keyframes sparkFly { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
.tap-count { font-family: 'Cinzel', serif; font-size: 40px; font-weight: 800; color: var(--gold); line-height: 1; }
.tap-count small { display: block; font-size: 10px; letter-spacing: .34em; color: var(--muted); margin-top: 6px; font-weight: 400; }
.tap-best { color: var(--muted); font-size: 12px; letter-spacing: .18em; margin-top: 8px; }
.tap-word { font-family: 'Shippori Mincho B1', serif; font-size: 15px; color: var(--text); margin-top: 14px; min-height: 24px; }

/* PUZZLE */
.pz-board { position: relative; width: min(320px, 82vw); aspect-ratio: 1; margin: 20px auto 6px; border: 1px solid rgba(216,181,106,.5); border-radius: 12px; overflow: hidden; background: #0a0a10; }
.pz-tile { position: absolute; width: 33.333%; height: 33.333%; background-image: url('assets/gpx-mark-1024.png'); background-size: 300% 300%; border: 1px solid rgba(5,5,7,.85); box-sizing: border-box; cursor: pointer; transition: left .16s ease, top .16s ease; border-radius: 4px; }
.pz-tile.blank { background: none; border: 1px dashed rgba(216,181,106,.25); cursor: default; }
.pz-board.won { box-shadow: 0 0 44px 6px rgba(216,181,106,.45); }
.pz-moves { font-family: 'Cinzel', serif; font-size: 26px; font-weight: 800; color: var(--gold); }
.pz-moves small { display: block; font-size: 10px; letter-spacing: .34em; color: var(--muted); font-weight: 400; margin-top: 4px; }
.pz-done { font-family: 'Yuji Syuku', serif; font-size: 19px; color: #ffe9a8; margin-top: 14px; letter-spacing: .1em; }
.play-panel .ritual-btn { margin-top: 16px; }

/* the offering bar */
.play-offer-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 780; display: flex; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(5,5,7,0), rgba(5,5,7,.92) 30%); }
.play-offer-bar a { flex: 1; text-align: center; text-decoration: none; border-radius: 999px; padding: 12px 10px; font-size: 14px; letter-spacing: .08em; }
.play-offer-bar a small { display: block; font-size: 10px; letter-spacing: .14em; opacity: .75; margin-top: 2px; }
.pob-shrine { background: var(--gold); color: #000; font-weight: 800; box-shadow: 0 0 22px rgba(216,181,106,.35); }
.pob-home { border: 1px solid rgba(216,181,106,.5); color: var(--text); background: rgba(5,5,7,.7); }
.play-foot { margin-top: 40px; text-align: center; color: var(--muted); font-size: 12px; letter-spacing: .2em; line-height: 2.2; }

/* the visitor's being in the tap room */
.tap-being { width: 104px; height: 104px; margin: 14px auto 0; }
.tap-being svg { width: 100%; height: 100%; display: block; transition: transform .5s ease; filter: drop-shadow(0 6px 12px rgba(0,0,0,.45)); }
.tap-being-note { color: var(--muted); font-size: 12px; letter-spacing: .1em; margin-top: 2px; min-height: 18px; }