.turn-flow-animation{width:80%;margin:1.5rem auto 3rem;padding:1.4rem;border:1px solid #000;border-radius:0;background:#fff;box-shadow:none;color:#000}.turn-flow-header h3{margin:0;color:#000;font-size:1.15rem;line-height:1.5}.turn-flow-header p{margin:.35rem 0 0;color:#000;font-size:.94rem}.turn-flow-board-wrap{width:fit-content;max-width:100%;margin:1.25rem auto 0;padding:.75rem;border:2px solid #000;border-radius:0;background:#fff;box-shadow:none;overflow-x:auto}.turn-flow-board{--turn-gap: 4px;--turn-cell: clamp(25px, 6.4vw, 46px);position:relative;display:grid;grid-template-columns:repeat(8,var(--turn-cell));grid-template-rows:repeat(8,var(--turn-cell));gap:var(--turn-gap);width:fit-content;margin:0 auto;user-select:none}.turn-cell{border:none;border-radius:0;background:transparent}.turn-player-label,.turn-piece,.turn-pass-stamp{z-index:2}.turn-player-label{display:grid;place-items:center;border:2px solid #000;border-radius:0;background:#fff;color:#000;font-weight:900;box-shadow:none}.turn-player-label.is-active{border:4px solid #000;background:#fff;color:#000;box-shadow:none}.turn-player-label-inner{display:grid;place-items:center;width:100%;height:100%;color:#000;font-size:clamp(13px,3.5vw,18px)}.turn-piece{position:relative;display:flex;align-items:center;justify-content:center;width:82%;height:94%;margin:auto;background:#000;clip-path:polygon(50% 0%,94% 16%,98% 100%,2% 100%,6% 16%);filter:none;box-shadow:none;outline:none;transition:none}.turn-piece:before{content:"";position:absolute;inset:2px;background:#fff;clip-path:polygon(50% 0%,94% 16%,98% 100%,2% 100%,6% 16%);z-index:0}.turn-piece-A{transform:rotate(0)}.turn-piece-B{transform:rotate(-90deg)}.turn-piece-C{transform:rotate(180deg)}.turn-piece-D{transform:rotate(90deg)}.turn-piece.is-current{background:#000;filter:none;box-shadow:none;outline:none;z-index:5}.turn-piece.is-current:before{inset:4px;background:#fff}.turn-piece.is-hidden-piece{background:#000;filter:none;box-shadow:none;outline:none}.turn-piece-value{position:relative;z-index:1;display:block;color:#000;font-size:clamp(17px,4.6vw,25px);font-weight:900;line-height:1;transform:translateY(1px)}.turn-piece.is-current .turn-piece-value{color:#000}.turn-piece.is-hidden-piece .turn-piece-value{opacity:.22}.turn-flow-animation[data-mode=pokemon] .turn-piece{width:94%}.turn-flow-animation[data-mode=pokemon] .turn-piece.pokemon-piece--king:before{background:#51428d}.turn-flow-animation[data-mode=pokemon] .turn-piece.pokemon-piece--major:before{background:#302b2c}.turn-flow-animation[data-mode=pokemon] .turn-piece.pokemon-piece--blue:before{background:#159bc4}.turn-flow-animation[data-mode=pokemon] .turn-piece.pokemon-piece--red:before{background:#e85049}.turn-flow-animation[data-mode=pokemon] .turn-piece.pokemon-piece--pawn:before{background:#f1f3f5}.turn-flow-animation[data-mode=pokemon] .turn-piece-value{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;padding:0 1px;color:#fff;font-size:clamp(8px,2vw,11px);font-weight:900;line-height:1.02;letter-spacing:0;white-space:nowrap;transform:translateY(1px)}.turn-flow-animation[data-mode=pokemon] .turn-piece-value-line{display:block;line-height:1.02;white-space:nowrap}.turn-flow-animation[data-mode=pokemon] .turn-piece.pokemon-piece--pawn .turn-piece-value{color:#374151}.turn-flow-animation[data-mode=pokemon] .turn-piece.is-current .turn-piece-value{color:#fff}.turn-flow-animation[data-mode=pokemon] .turn-piece.is-current.pokemon-piece--pawn .turn-piece-value{color:#374151}.turn-pass-stamp{display:grid;place-items:center;pointer-events:none;animation:none}.turn-pass-stamp-inner{padding:.3rem .8rem;border:4px double #000;border-radius:0;background:#fff;color:#000;font-size:clamp(20px,5vw,32px);font-weight:900;line-height:1.2;box-shadow:none}.turn-flow-controls{display:flex;align-items:center;justify-content:center;gap:.85rem;margin-top:.85rem;margin-bottom:1rem}.turn-flow-controls button{width:2.2rem;height:2.2rem;padding:0;border:1px solid #000;border-radius:0;background:#fff;color:#000;font-size:1rem;font-weight:800;line-height:1;cursor:pointer}.turn-flow-controls button:hover:not(:disabled),.turn-flow-controls button:focus-visible:not(:disabled){border:2px solid #000;color:#000}.turn-flow-controls button:disabled{background:#fff;color:#000;opacity:.35;cursor:default}.turn-step-count{min-width:4.5rem;color:#000;font-size:.95rem;font-weight:800;text-align:center}.turn-flow-text{min-height:8.5rem;margin-top:0;padding-top:1rem;border-top:1px solid #000;color:#000}.turn-step-heading{margin:0;color:#000;font-size:1rem;font-weight:800;line-height:1.65}.turn-step-label{margin-right:.65rem}.turn-center-message{color:#000}.turn-step-description{margin:.35rem 0 0;color:#000;font-size:.96rem;line-height:1.75}@media(max-width:640px){.turn-flow-animation{width:100%;margin:1.5rem 0 3rem;padding:.9rem}.turn-flow-board-wrap{width:fit-content;max-width:100%;margin:1.25rem auto 0;padding:.5rem;overflow-x:visible}.turn-flow-board{--turn-gap: 3px;--turn-cell: clamp(24px, 8.4vw, 36px);margin:0 auto}.turn-piece-value{font-size:clamp(16px,5.2vw,23px);transform:translateY(2px)}.turn-flow-animation[data-mode=pokemon] .turn-piece-value{font-size:clamp(7px,2.15vw,9px);line-height:1;transform:translateY(1px)}.turn-flow-animation[data-mode=pokemon] .turn-piece-value-line{line-height:1}.turn-flow-controls{margin-top:.75rem}.turn-flow-text{min-height:11rem}}body.turn-flow-modal-open{overflow:hidden}.turn-flow-popup-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;margin:1.5rem 0 2rem;padding:1rem 1.15rem;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:0 10px 24px #0f172a0f}.turn-flow-popup-card-text{min-width:0}.turn-flow-popup-label{margin:0 0 .3rem;color:#6b7280;font-size:.78rem;font-weight:800;letter-spacing:.04em}.turn-flow-popup-card h3{margin:0 0 .4rem;font-size:1.08rem}.turn-flow-popup-card p{margin:0;color:#555;line-height:1.7}.turn-flow-popup-open{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.72rem 1rem;border:1px solid #111827;border-radius:999px;background:#111827;color:#fff;font-weight:900;cursor:pointer;white-space:nowrap}.turn-flow-popup-open:hover,.turn-flow-popup-open:focus-visible{opacity:.88}.turn-flow-popup-open:focus-visible,.turn-flow-modal-close:focus-visible{outline:3px solid currentColor;outline-offset:3px}.turn-flow-modal[hidden]{display:none!important}.turn-flow-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:.2rem}.turn-flow-modal-backdrop{position:absolute;inset:0;background:#0f172a94}.turn-flow-modal-panel{position:relative;z-index:1;width:min(700px,calc(100vw - 1rem));max-height:min(92vh,920px);overflow:auto;border-radius:16px;background:#fff;box-shadow:0 24px 80px #00000059}.turn-flow-modal-close{position:absolute;top:.45rem;right:.45rem;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:2.15rem;height:2.15rem;border:2px solid #111827;border-radius:999px;background:#fff;color:#111827;font-size:1.2rem;font-weight:900;line-height:1;cursor:pointer}.turn-flow-modal-content{padding:.4rem 0 .45rem}.turn-flow-modal-content>:first-child{margin-top:0}.turn-flow-modal-content>:last-child{margin-bottom:0}.turn-flow-modal-content .turn-flow,.turn-flow-modal-content .turn-flow-animation{margin-top:0;margin-bottom:0}.turn-flow-modal-content :where(.turn-flow,.turn-flow-animation,.turn-flow-wrapper,.turn-flow-board,.turn-flow-step,.flow-board){max-width:none}.turn-flow-modal-content :where(.container,.content,.turn-flow-inner){width:100%;max-width:none;margin-left:0;margin-right:0;padding-left:.15rem;padding-right:.15rem}.turn-flow-modal .turn-flow-popup-card{display:none}.turn-flow-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:760px){.turn-flow-popup-card{grid-template-columns:1fr}.turn-flow-popup-open{width:100%}.turn-flow-modal{padding:.25rem}.turn-flow-modal-panel{width:calc(100vw - .5rem);max-height:96vh;border-radius:12px}.turn-flow-modal-content{padding:.3rem .15rem .35rem}.turn-flow-modal-close{top:.35rem;right:.35rem;width:2rem;height:2rem;font-size:1.1rem}}
