.tutorial-entry{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:25px 30px;margin:0 0 35px;border:1px solid #b6bc3966;border-left:4px solid var(--yellow);background:linear-gradient(100deg,#252a1b,#10191e);position:relative;overflow:hidden}
.tutorial-entry h2{font-size:24px;margin:8px 0}.tutorial-entry p{margin:0;color:#bac6cd;font-size:14px;line-height:1.7}.tutorial-entry>.primary{min-width:205px;display:flex;justify-content:space-between;gap:20px;padding:17px 20px}
.tutorial-coach{flex-shrink:0;padding:17px;border:1px solid #d4d44988;background:linear-gradient(145deg,#192524,#11171e);box-shadow:0 8px 25px #0005;max-height:66dvh;overflow:auto;scrollbar-width:thin}
.tutorial-top{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--yellow);font:10px var(--mono,monospace);letter-spacing:1px}.tutorial-top button{padding:3px 8px;background:transparent;border:0;color:#bfc8d0;font-size:16px}
.tutorial-progress{display:flex;gap:4px;margin:13px 0 10px}.tutorial-progress span{height:4px;flex:1;background:#324047}.tutorial-progress .on{background:var(--yellow);box-shadow:0 0 6px #e9e55f33}
.tutorial-coach>small{color:#b6c5ca;font-size:11px}.tutorial-coach h2{font-size:23px;line-height:1.35;margin:12px 0;color:#fafbf3;word-break:keep-all}.tutorial-coach p{font-size:14px;line-height:1.8;color:#cbd5da;word-break:keep-all;margin:0 0 15px}.tutorial-coach>.primary,.tutorial-coach>.quiet{width:100%;padding:12px 10px;margin-top:5px;font-size:14px}
.tutorial-task{padding:12px;border:1px solid #e5dc5666;background:#e4dc5010;font-size:12px;line-height:1.8;color:#fff18b;display:flex;align-items:center;gap:10px}.tutorial-foot{font-size:10px;line-height:1.6;color:#81939b;margin-top:12px}.tutorial-summary{font-size:13px;line-height:1.8;color:var(--cyan);padding:12px 0}.tutorial-hide{display:none!important}
.tutorial-target{outline:2px solid #fff265!important;outline-offset:3px;box-shadow:0 0 20px #ffed5355!important;animation:tutorial-edge 1.8s ease-in-out infinite!important;position:relative;z-index:3}
@keyframes tutorial-edge{50%{outline-color:#fff9be;box-shadow:0 0 28px #ffec5388}}
.tutorial-mode .side-panel{gap:8px}.tutorial-mode .inspector{min-height:0;flex:1;overflow-y:auto}.tutorial-mode .inspect-art{max-height:130px;width:auto;max-width:100%;object-fit:contain}.tutorial-mode .inspector h3{font-size:16px}.tutorial-mode .inspector .rules-text{font-size:12px}.tutorial-mode .inspect-zoom{display:block;margin:auto}.tutorial-mode .table-legend{display:none}.tutorial-mode .fixer-focus .side-panel{opacity:1;pointer-events:auto}.tutorial-mode .modal-backdrop{backdrop-filter:none;background:#03080dbb}.tutorial-mode .modal .description{font-size:15px;line-height:1.8;color:#e3e8db}.tutorial-mode .decision-shell{max-height:90dvh}.tutorial-mode .modal .choice-grid:has(>.choice:only-child){grid-template-columns:minmax(0,1fr)}.tutorial-mode .modal .choice:only-child img{max-height:155px;width:auto;margin:0 auto 8px}.tutorial-mode .modal .choice:only-child .note{max-height:95px;overflow:auto}.tutorial-mode .effect-origin{max-width:220px}
.tutorial-mode .game-card.action-ready:not(.tutorial-target){animation:none;box-shadow:none}
.tutorial-mode .modal-cards .play-lock{display:none}.tutorial-mode .modal{position:relative}.tutorial-dialog-exit{float:right;border:0;background:transparent;color:#99afb9;font-size:11px;padding:0 0 9px 10px}
@media(max-width:900px){.tutorial-entry{padding:20px;flex-direction:column;align-items:stretch}.tutorial-entry h2{font-size:21px}.tutorial-mode .table-battle{display:flex;flex-direction:column}.tutorial-mode .side-panel{display:contents}.tutorial-coach{order:-1;position:sticky;top:0;z-index:20;max-height:40dvh;padding:12px 16px}.tutorial-coach h2{font-size:18px;margin:7px 0}.tutorial-coach p{font-size:12px;line-height:1.65;margin-bottom:8px}.tutorial-foot{display:none}.tutorial-progress{margin:7px 0}.tutorial-mode .board{flex-shrink:0}.tutorial-mode .inspector{max-height:300px}.tutorial-mode .tutorial-task{padding:7px;font-size:11px}.tutorial-mode .decision-shell .effect-origin{display:none}}
@media(prefers-reduced-motion:reduce){.tutorial-target{animation:none!important}}

/* One consistent beacon follows the area currently being explained. */
#tutorial-focus-layer{position:fixed;inset:0;pointer-events:none;z-index:19;overflow:hidden}
.tutorial-focus-ring{position:absolute;border:2px solid #fff071;border-radius:7px;box-shadow:0 0 0 4px #ffe96122,0 0 25px #ffdf5555;animation:tutorial-beacon 1.3s ease-in-out infinite}
.tutorial-focus-ring>span{position:absolute;top:-25px;left:8px;white-space:nowrap;background:#fff078;color:#171a18;border:1px solid #fff7c7;padding:3px 8px;border-radius:3px;font-size:11px;font-weight:800;box-shadow:0 3px 12px #0007}
.tutorial-focus-ring.is-card{border-color:#8bffe5;box-shadow:0 0 20px #6effdc66}.tutorial-focus-ring.is-card>span{top:auto;bottom:-24px;background:#a9ffe9;border-color:#d1fff6}
@keyframes tutorial-beacon{50%{border-color:#fffbd5;box-shadow:0 0 0 7px #ffe9610c,0 0 36px #ffdf5599}}
.tutorial-target{animation:tutorial-edge 1.3s ease-in-out infinite!important}
.tutorial-mode .modal-backdrop{background:#03080d77}
.tutorial-mode .payment-guide-backdrop{align-items:flex-start;justify-content:flex-start;padding:24px;background:#03080d30}
.tutorial-mode .payment-guide-backdrop .decision-shell{width:min(490px,47vw);max-height:calc(100dvh - 48px);margin:0;display:block}
.tutorial-mode .payment-guide-backdrop .modal{width:100%;max-width:none;padding:22px;border:1px solid #8debd2;box-shadow:0 18px 65px #000c;background:#101c22f8;overflow:auto}
.tutorial-payment h2{font-size:24px;line-height:1.3;margin:10px 0 14px}.tutorial-payment .eyebrow{color:#a8f4df;font-size:10px}
.payment-track{display:flex;gap:5px;margin:14px 0}.payment-token{flex:1;min-width:0;display:grid;gap:5px;text-align:center;padding:8px 3px;background:#17282d;border:1px solid #32484d;border-radius:5px;color:#9daeb5}.payment-token b{font:14px var(--mono,monospace)}.payment-token span{font-size:10px;line-height:1.4;word-break:keep-all}.payment-token strong{font-size:12px}.payment-token.current{border-color:#ffe575;color:#fff39d;box-shadow:0 0 14px #ffe36e33}.payment-token.paid{background:#153a36;border-color:#56bc9d;color:#a4f3d8}.payment-token.waiting{opacity:.65}
.tutorial-mode .tutorial-payment .description{font-size:14px;margin:14px 0;line-height:1.7}
.payment-demonstration{display:flex;align-items:center;justify-content:center;gap:34px;min-height:180px;padding:14px 12px;background:linear-gradient(120deg,#081319,#1a3031);border:1px solid #314c4f;border-radius:7px;margin-bottom:15px}
.payment-card{width:96px;height:138px;flex:0 0 96px;border-radius:6px;box-shadow:0 6px 18px #0008;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s;position:relative}
.payment-card>img,.payment-card .official-back,.payment-card .official-back img{width:100%;height:100%;object-fit:cover;border-radius:6px;margin:0}.payment-card.is-ready{outline:2px solid #ffe77a;outline-offset:4px;animation:tutorial-edge 1.3s infinite}.payment-card.is-spending,.payment-card.is-spent{transform:rotate(90deg);filter:saturate(.65)}.payment-card.is-spending{animation:none}
.payment-result{display:grid;gap:10px;min-width:0;max-width:205px}.payment-result small{font-size:11px;color:#92b7bd}.payment-result strong{font-size:16px;line-height:1.5}.payment-result span{font-size:12px;color:#e2ecd6}.payment-result b{font-size:17px;color:#a0f4d9}
.payment-confirm{width:100%;min-height:45px;font-size:14px;white-space:normal}.payment-confirm:disabled{opacity:.65}.payment-caption{font-size:11px;line-height:1.6;color:#a1babd;margin:10px 0 0;text-align:center}
.tutorial-power-table{border-collapse:collapse;width:100%;margin:6px 0 10px;font-size:13px}.tutorial-power-table caption{text-align:left;color:#94b9c1;font-size:11px;padding-bottom:8px}.tutorial-power-table th,.tutorial-power-table td{padding:8px 6px;border-bottom:1px solid #3c4d4c;text-align:left}.tutorial-power-table th{font-size:11px;color:#acbdc2}.tutorial-power-table .current{background:#fff26c17;color:#fff28d;font-weight:700}.tutorial-coach p.tutorial-tier-note{font-size:11px;color:#abc5c3;margin-bottom:12px}
.tutorial-complete-backdrop .decision-shell{width:min(670px,94vw)}.tutorial-complete-backdrop .modal{width:100%;padding:32px}.tutorial-completion{text-align:center}.completion-emblem{display:grid;place-items:center;margin:8px auto 20px;width:82px;height:82px;clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);background:linear-gradient(130deg,#fcf56e,#8df2ce);color:#132526;font:900 48px var(--mono,monospace)}.tutorial-completion h2{font-size:32px;margin:10px 0 15px}.completion-flow{display:flex;justify-content:center;align-items:center;gap:10px;margin:22px 0}.completion-flow span{padding:9px 10px;border:1px solid #45605d;border-radius:4px;font-size:13px;color:#b7f1dc}.completion-flow i{font-style:normal;color:#698d8a}.completion-rule{font-size:13px;line-height:1.9;color:#bfccd0}.completion-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0 15px}.completion-actions button{padding:14px 8px;font-size:14px}.tutorial-completion>small{font-size:11px;line-height:1.6;color:#93a8b0}
@media(max-width:900px){.tutorial-mode .payment-guide-backdrop{padding:12px;align-items:center;justify-content:center}.tutorial-mode .payment-guide-backdrop .decision-shell{width:min(490px,100%);max-height:92dvh}.tutorial-mode .payment-guide-backdrop .modal{padding:17px}.payment-demonstration{min-height:158px;gap:26px}.payment-card{width:82px;height:118px;flex-basis:82px}.payment-result{max-width:170px}.tutorial-focus-ring>span{font-size:10px}.tutorial-complete-backdrop .modal{padding:22px}.completion-actions{grid-template-columns:1fr}.completion-flow{gap:6px}.completion-flow span{font-size:11px;padding:8px}.tutorial-power-table td{padding:5px 6px}}
@media(prefers-reduced-motion:reduce){.tutorial-target,.tutorial-focus-ring,.payment-card.is-ready{animation:none!important}.payment-card{transition:none}}

/* Draw attention to the one actionable continuation without moving the layout. */
.tutorial-coach [data-action="tutorial-next"],.tutorial-coach [data-action="tutorial-finish"],.tutorial-mode .payment-confirm:not(:disabled){position:relative;overflow:hidden;border:1px solid #fff6a2;animation:tutorial-button-beacon 1.65s ease-in-out infinite}
.tutorial-coach [data-action="tutorial-next"]::after,.tutorial-coach [data-action="tutorial-finish"]::after,.tutorial-mode .payment-confirm:not(:disabled)::after{content:"";position:absolute;inset:-20% auto -20% -45%;width:35%;background:linear-gradient(100deg,transparent,#fffbc7b0,transparent);transform:skewX(-18deg);pointer-events:none;animation:tutorial-button-sweep 2.8s ease-in-out infinite}
@keyframes tutorial-button-beacon{0%,100%{box-shadow:0 0 0 1px #fff5ac66,0 0 9px #ffed5444}50%{box-shadow:0 0 0 3px #fff5ac99,0 0 23px #ffed5488;filter:brightness(1.07)}}
@keyframes tutorial-button-sweep{0%,28%{left:-45%}72%,100%{left:125%}}
@media(prefers-reduced-motion:reduce){.tutorial-coach [data-action="tutorial-next"],.tutorial-coach [data-action="tutorial-finish"],.tutorial-mode .payment-confirm:not(:disabled){animation:none;box-shadow:0 0 0 2px #fff5ac88,0 0 14px #ffed5466}.tutorial-coach [data-action="tutorial-next"]::after,.tutorial-coach [data-action="tutorial-finish"]::after,.tutorial-mode .payment-confirm:not(:disabled)::after{animation:none;display:none}}