/* Tutorial adds guidance and course navigation to the ordinary game surface.
   Table/seat/hand/card geometry and artwork belong only to the shared game CSS. */
.tutorial-dialog { position:fixed; inset:0; margin:0; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; padding:0; box-sizing:border-box; overflow:hidden; border:0; border-radius:0; color:var(--ui-text,#f5e7bd); background:#020805; }
.tutorial-dialog::backdrop { background:#020805; }
body.tutorial-session-active > main.app { display:none!important; }
.tutorial-dialog[open] { display:block; }
.tutorial-dialog [hidden] { display:none!important; }
.tutorial-dialog img[hidden] { display: none; }
#mainMenuPanel #howToPlayBtn.tutorial-rules-entry { display:flex!important; }
.tutorial-dialog button { min-height:44px; }
.tutorial-header { display:flex; height:52px; padding:6px 12px; gap:12px; box-sizing:border-box; align-items:center; }
.tutorial-header img { width:64px; height:44px; object-fit:contain; }
.tutorial-header h2 { margin:0; font-size:19px; }
.tutorial-header button { margin-left:auto; }
.tutorial-workspace, .tutorial-play { position:absolute; inset:0; min-height:0; min-width:0; }
.tutorial-ingame .tutorial-header { display:none; }
.tutorial-game-home { width:100%!important; height:100dvh!important; margin:0!important; min-height:0!important; }
#tutorialGameRoot { width:100%; height:100%; }
#tutorialHandTitle { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.tutorial-dialog .tutorial-mentor { position:fixed; right:10px; bottom:10px; z-index:510; width:110px; pointer-events:none; }
.tutorial-mentor > :not(#tutorialActions) { display:none; }
#tutorialActions { display:flex; flex-direction:column; gap:6px; pointer-events:auto; }
#tutorialActions button { width:100%; padding:7px; min-height:44px; font-size:12px; }
#tutorialTools { position:fixed; z-index:950; top:6px; right:6px; bottom:6px; width:min(380px,88vw); padding:12px; box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain; background:var(--ui-surface,#0a1d16); border:1px solid var(--ui-gold,#b28a3c); border-radius:14px; box-shadow:0 0 0 100vmax #0009; }
#tutorialToolsClose { position:sticky; top:0; z-index:1; width:100%; min-height:44px; background:#183d2a; }
#tutorialTools p, #tutorialTools li { font-size:13px; line-height:1.45; }
#tutorialTools button { min-height:44px; }
.tutorial-lessons { padding-left:22px; }
.tutorial-lessons button { width:100%; margin:3px 0; text-align:left; }
.tutorial-voice summary, #tutorialAssessment summary { min-height:44px; cursor:pointer; padding:10px 0; box-sizing:border-box; }
.tutorial-voice label, .tutorial-voice small { display:block; font-size:12px; }
.tutorial-voice .checkline { display:flex; align-items:center; gap:8px; min-height:44px; }
.tutorial-voice input[type=range] { width:100%; min-height:44px; }
.tutorial-actions { display:flex; gap:6px; flex-wrap:wrap; }
.tutorial-error { color:#ffc5a7; }
.tutorial-confirmation { color:#b6e0bb; }
.tutorial-guide-target { outline:3px solid var(--ui-gold,#ffe096)!important; outline-offset:3px; }
#tutorialCoach { position:fixed; z-index:800; left:80px; top:70px; width:300px; max-width:calc(100vw - 20px); max-height:calc(100dvh - 20px); box-sizing:border-box; display:grid; grid-template-columns:35px minmax(0,1fr); gap:8px; padding:12px; border:1px solid var(--ui-gold,#b28a3c); border-radius:var(--ui-radius,14px); color:var(--ui-text,#f5e7bd); background:var(--ui-surface,#0b2019); box-shadow:var(--ui-shadow,0 12px 38px #0009); font-family:var(--ui-font,system-ui,sans-serif); }
#tutorialCoach > img { width:35px; height:48px; object-fit:contain; }
#tutorialCoach::after { content:""; position:absolute; width:10px; height:10px; transform:rotate(45deg); background:var(--ui-surface,#0b2019); border:solid var(--ui-gold,#b28a3c); border-width:0; pointer-events:none; }
#tutorialCoach[data-side=left]::after { left:-6px; top:var(--coach-arrow-y); border-width:0 0 1px 1px; }
#tutorialCoach[data-side=right]::after { right:-6px; top:var(--coach-arrow-y); border-width:1px 1px 0 0; }
#tutorialCoach[data-side=top]::after { top:-6px; left:var(--coach-arrow-x); border-width:1px 0 0 1px; }
#tutorialCoach[data-side=bottom]::after { bottom:-6px; left:var(--coach-arrow-x); border-width:0 1px 1px 0; }
#tutorialCoach > div { min-width:0; min-height:0; overflow-y:auto; overscroll-behavior:contain; }

#tutorialCoachStep { display:block; color:var(--ui-gold,#e9d398); font-size:10px; }
#tutorialCoachTitle { margin:4px 0; font-size:15px; line-height:1.2; }
#tutorialCoachText { margin:6px 0; font-size:13px; line-height:1.35; }
#tutorialCoachAction { margin:6px 0; font-size:12px; line-height:1.35; color:#d5d4b0; }

#tutorialDealResult { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:450; box-sizing:border-box; width:min(460px,68vw); max-height:calc(100dvh - 100px); overflow-y:auto; padding:12px; border:1px solid var(--ui-gold,#b28a3c); border-radius:14px; color:#f5e7bd; background:#0b2019f5; }
#tutorialDealResult h3 { margin:0 0 7px; font-size:16px; text-align:center; }
#tutorialDealResult table { width:100%; border-collapse:collapse; font-size:12px; }
#tutorialDealResult th, #tutorialDealResult td { padding:4px; text-align:center; }
#tutorialDealResult th:first-child { text-align:left; }
#tutorialDealResult .is-you { color:#ffe096; background:#b28a3c22; }
.tutorial-dialog .tutorial-allowed-choice:focus-visible { outline:3px solid var(--ui-gold,#ffe096); outline-offset:-3px; }
.tutorial-winning-card .card { outline:2px solid var(--ui-gold,#ffe096); }
.tutorial-card-fallback { position:absolute; inset:0; display:grid; align-content:center; justify-items:center; color:#201c12; background:#f8edcc; line-height:1.05; }
.tutorial-card-fallback strong { font-size:22px; }
.tutorial-card-fallback small { font-size:16px; }
.tutorial-red-suit { color:#a32120; }
.tutorial-joker-fallback small { font-size:9px; }
.tutorial-image-ready > .tutorial-card-fallback, .tutorial-image-ready > .tutorial-award-fallback { visibility:hidden; }
.tutorial-dialog .card-art { position:relative; }
.tutorial-drag-card { position:fixed!important; z-index:900; transform:translate(-50%,-50%) rotate(5deg); pointer-events:none; opacity:1!important; }
.tutorial-dialog .joker-choice fieldset { display:flex; flex-wrap:wrap; gap:5px; border:0; padding:0; margin:6px 0; min-width:0; }
.tutorial-dialog .joker-choice fieldset button { flex:1; min-width:44px; }
.tutorial-dialog .joker-choice legend { font-size:12px; }
.tutorial-dialog .joker-choice [aria-pressed=true] { outline:2px solid #ffe096; }
.tutorial-welcome .tutorial-workspace { position:absolute; top:56px; display:grid; place-items:center; overflow-y:auto; }
.tutorial-welcome .tutorial-play { display:none; }
.tutorial-welcome .tutorial-mentor { position:static; width:min(600px,92vw); padding:20px; box-sizing:border-box; pointer-events:auto; border:1px solid #b28a3c; border-radius:16px; background:#0b2019; }
.tutorial-welcome .tutorial-mentor > :not(#tutorialMentor) { display:block; }
.tutorial-welcome .tutorial-coach-avatar { float:left; width:75px; height:90px; object-fit:contain; margin-right:12px; }
.tutorial-welcome #tutorialActions { display:flex; flex-direction:row; }
.tutorial-welcome #tutorialActions button { width:auto; flex:1; }
.tutorial-welcome #tutorialHint { display:none; }
.tutorial-welcome #tutorialToolsToggle, .tutorial-welcome #tutorialMentorTextToggle { display:none!important; }
.tutorial-completion-panel { position:absolute; inset:68px 14px 65px; z-index:450; max-width:800px; margin:auto; overflow-y:auto; padding:12px; box-sizing:border-box; }
.tutorial-completion-hero { display:grid; grid-template-columns:140px minmax(0,1fr); gap:16px; align-items:center; }
.tutorial-award-art { position:relative; display:block; width:100%; aspect-ratio:1; }
.tutorial-award-art img { position:relative; width:100%; }
.tutorial-award-fallback { position:absolute; inset:0; display:grid; place-content:center; border:1px solid #b28a3c; border-radius:50%; color:#ffde8c; background:#102d20; font-size:44px; }
.tutorial-completion-actions { display:flex; flex-wrap:wrap; gap:7px; }
.tutorial-completion-actions button { flex:1 1 120px; min-height:44px; }
.tutorial-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.tutorial-rotate { display:none; }
@media (max-height:550px) and (orientation:landscape) {
  #tutorialCoach { width:240px; max-height:calc(100dvh - 130px); grid-template-columns:24px minmax(0,1fr); padding:8px; gap:6px; }
  #tutorialCoach > div { display:flex; flex-direction:column; max-height:calc(100dvh - 148px); overflow:hidden; }
  #tutorialCoach > div > :not(#tutorialCoachText) { flex:0 0 auto; }
  #tutorialCoachText { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
  #tutorialCoach > img { width:24px; height:34px; }
  #tutorialCoachTitle { font-size:13px; }
  #tutorialCoachText, #tutorialCoachAction { font-size:11px; margin:4px 0; }
  #tutorialActions button { font-size:11px; }
  .tutorial-completion-hero { grid-template-columns:68px minmax(0,1fr); gap:8px; }
  .tutorial-completion-hero h3 { font-size:17px; margin:0; }
  .tutorial-completion-panel p { font-size:12px; margin:5px 0; }
  .tutorial-completion-panel { inset:62px 14px 54px; padding:6px; }
}
@media (orientation:portrait) and (max-width:900px) {
  .tutorial-dialog .tutorial-workspace { display:none!important; }
  .tutorial-dialog .tutorial-header { display:none; }
  .tutorial-rotate { position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
  #tutorialCoach { display:none; }
}

/* Notices never take input or require acknowledgement. */
#tutorialCoach { pointer-events:none; }
#tutorialCoach[data-kind=result] { position:static; width:100%; max-width:none; max-height:none; margin:0 0 8px; padding:6px; box-shadow:none; border:0; background:none; }
#tutorialCoach[data-kind=result] > img, #tutorialCoach[data-kind=result]::after { display:none; }
#tutorialCoach[data-kind=result] { grid-template-columns:minmax(0,1fr); }
#tutorialCoach[data-kind=result] > div { max-height:none; overflow:visible; }
#tutorialCoach[data-kind=result] #tutorialCoachText { overflow:visible; }
#tutorialDealResult { max-height:calc(100dvh - 24px); }
.hand.tutorial-guide-target { outline-offset:-3px; }
@media (max-height:550px) and (orientation:landscape) {
 #tutorialCoach:is([data-kind=bid],[data-kind=trump]) { width:min(420px,calc(100vw - 120px)); max-height:94px; }
 #tutorialCoach:is([data-kind=bid],[data-kind=trump]) > div { max-height:76px; }
 #tutorialCoach:is([data-kind=bid],[data-kind=trump]) #tutorialCoachTitle { margin:2px 0; }
 #tutorialCoach:is([data-kind=bid],[data-kind=trump]) #tutorialCoachText { margin:2px 0; }
}