/* The teaching panel occupies its own space below the existing game table. */
.tutorial-page{padding-bottom:var(--tutorial-panel-height,240px)}
.tutorial-page .game-table{min-height:calc(100dvh - var(--tutorial-panel-height,240px));padding-bottom:35px}
.tutorial-page .action-hint{display:none!important}
.tutorial-page .game-toolbar{padding-right:0}
.tutorial-page .toolbar-actions .game-menu{margin-left:4px;position:relative;z-index:30}
.tutorial-page .toolbar-actions .game-menu-content{left:auto;right:0}
.tutorial-page .card{opacity:.55}
.tutorial-page .tutorial-focus.card,.tutorial-page .tutorial-focus .card,.tutorial-page #game_view.tutorial-focus .card{opacity:1}
.tutorial-page .tutorial-focus:not(#game_view){outline:2px solid var(--accent);outline-offset:6px;border-radius:8px}
.tutorial-page .tutorial-target{outline:3px dashed var(--accent);outline-offset:5px;position:relative}
.tutorial-page .tutorial-target:after{content:'Нажмите здесь';position:absolute;z-index:10;bottom:calc(100% + 8px);left:0;transform:none;padding:3px 7px;background:var(--accent);color:var(--ink);border-radius:5px;font:700 11px/1.3 system-ui;white-space:nowrap;pointer-events:none}
.tutorial-page .card.is-selected{transform:translateY(-5px)}
.tutorial-page .card.is-selected:before{content:'Выбрано';position:absolute;z-index:11;bottom:-23px;left:50%;transform:translateX(-50%);background:#fff;color:var(--ink);padding:2px 6px;border-radius:5px;font:700 11px/1.3 system-ui;pointer-events:none}
.tutorial-panel{position:fixed;bottom:0;left:0;right:0;z-index:45;padding:18px max(20px,calc((100vw - 1080px)/2));padding-bottom:max(18px,env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line);max-height:48dvh;overflow-y:auto;box-shadow:0 -4px 20px #102d2429}
.tutorial-copy{max-width:75ch}.tutorial-copy h2{font-size:21px;margin:2px 0 8px}.tutorial-copy>p{font-size:15px;line-height:1.5}#tutorial-progress{font-size:12px;color:var(--muted)}#tutorial-cue{font-size:13px;font-weight:650;margin-top:8px}
.tutorial-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}.tutorial-controls a{margin-left:auto;font-size:14px}.tutorial-controls button{min-height:44px}
.demo-entry{margin-bottom:22px}
@media(max-width:760px){.tutorial-panel{padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));max-height:49dvh}.tutorial-copy h2{font-size:18px;margin-bottom:5px}.tutorial-copy>p{font-size:14px}.tutorial-controls{gap:8px;margin-top:10px}.tutorial-controls button{padding:8px 12px}.tutorial-page .game-table{padding:12px 12px 30px}.tutorial-page .tutorial-target:after{font-size:10px}.tutorial-controls a{font-size:12px}}
@media(prefers-reduced-motion:reduce){.tutorial-page *{scroll-behavior:auto!important}}

html:has(.tutorial-page){scroll-padding-bottom:calc(var(--tutorial-panel-height,240px) + 35px)}
#tutorial-title:focus{outline:none}
.tutorial-page .own-heading{margin-bottom:28px}.tutorial-page .opponent-section .zone-heading{display:none}
.tutorial-page .shared-zone{padding-top:25px}

.tutorial-page .temp-slot:last-child .tutorial-target:after,.tutorial-page .hand-cards .tutorial-target:last-child:after,.tutorial-page .build-slot:last-child .tutorial-target:after{left:auto;right:0}
/* Separate scrollable table and bottom instructions: cards cannot sit under the panel. */
.tutorial-page{height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) auto;padding-bottom:0;overflow:hidden}
.tutorial-page .shell{min-height:0;overflow:auto;scroll-padding-block:30px}
.tutorial-panel{position:static}
.tutorial-page .shell{width:100%;height:100%;margin:0}