#tutorial-shade {position:fixed;inset:0;z-index:900;pointer-events:none}
#tutorial-guide {position:fixed;z-index:910;width:min(390px,calc(100vw - 24px));box-sizing:border-box;padding:20px 22px 18px;border:1px solid #77d8d3;border-radius:16px;background:#071e26 url('./assets/tutorial/message-panel.png') center/100% 100% no-repeat;box-shadow:0 16px 60px #000b;color:#edf9f8;font:14px/1.45 system-ui,sans-serif;max-height:calc(100dvh - 24px);overflow:auto}
#tutorial-guide[hidden],#tutorial-shade[hidden],#tutorial-resume[hidden]{display:none}
#tutorial-guide .guide-progress{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:1px;color:#a1cbc9}
#tutorial-guide .guide-line{height:2px;flex:1;background:linear-gradient(90deg,#65d7cc 25%,#33565b 25%)}
#tutorial-guide h2{font:600 21px/1.2 system-ui,sans-serif;color:#fff;margin:12px 0 8px;letter-spacing:0;text-transform:none}
#tutorial-guide p{margin:8px 0;color:#e0eeee;font:inherit}
#tutorial-guide #guide-hint,#tutorial-guide #guide-card-keys{color:#a6c5ca;font-size:12px}
#tutorial-guide .guide-actions{display:flex;gap:8px;margin-top:16px}
#tutorial-guide button{min-height:38px;border:1px solid #39676e;border-radius:8px;padding:7px 10px;background:#061b23;color:#e4f4f3;font:12px system-ui,sans-serif;cursor:pointer;flex:1;white-space:nowrap}
#tutorial-guide button:hover{border-color:#95eee1;background:#12353e}
#tutorial-guide button:focus-visible{outline:2px solid #fff;outline-offset:3px}
#tutorial-guide button:disabled{opacity:.4;cursor:default}
#tutorial-guide #guide-next{background:linear-gradient(#73ded6,#27969f);border-color:#8ee9dd;color:#04242b;font-weight:700}
#tutorial-guide kbd{font:11px system-ui,sans-serif;border:1px solid #6b949a;border-radius:3px;padding:0 3px;margin-left:3px;background:transparent;color:inherit}
#tutorial-guide .guide-keys{font-size:10px;color:#9dbabc;margin-top:12px;text-align:center}
#tutorial-guide #guide-error{color:#ffcf92}
#tutorial-resume{position:fixed;right:16px;bottom:90px;z-index:910;background:#12353e;color:white;border:1px solid #77d8d3;border-radius:8px;padding:10px}
.tutorial-guide-available #tutorial-coach,.tutorial-guide-available #tutorial-choice-help{display:none!important}
.has-tutorial-guide #choice-popup{width:min(900px,calc(100vw - 32px));max-height:calc(100dvh - 290px);top:40%;bottom:auto;transform:translate(-50%,-50%);overflow:auto}
@media(max-height:650px){#tutorial-guide{width:330px;padding:12px 16px}#tutorial-guide h2{font-size:18px}.has-tutorial-guide #choice-popup{width:calc(100vw - 380px);left:16px;top:50%;transform:translateY(-50%);max-height:calc(100dvh - 40px)}}
@media(max-width:600px){.has-tutorial-guide #choice-popup{width:calc(100vw - 24px);left:12px;top:16px;transform:none;max-height:calc(100dvh - 310px)}}
/* Small optional abilities read as one focused decision card. */
#choice-popup.choice-popup--ability {
  width:min(380px,calc(100vw - 32px));left:50%;top:38%;bottom:auto;
  transform:translate(-50%,-50%);padding:24px;max-height:calc(100dvh - 32px);
  border:1px solid #497778;border-radius:16px;
  background:linear-gradient(145deg,#102c34,#071820);box-shadow:0 18px 60px #0009;
}
#choice-popup.choice-popup--ability .tray__head {margin:0 0 10px;padding:0;border:0}
#choice-popup.choice-popup--ability .tray__prompt {font:600 20px/1.3 system-ui,sans-serif;color:#f0faf8;text-transform:none}
#choice-popup.choice-popup--ability .tray__description {font:14px/1.55 system-ui,sans-serif;color:#b8d1d2;margin:0 0 20px}
#choice-popup.choice-popup--ability #tray-close {display:none}
#choice-popup.choice-popup--ability #affordances {display:flex;gap:10px}
#choice-popup.choice-popup--ability #affordances > button {flex:1;min-height:42px;padding:10px 12px;border:1px solid #3c666d;border-radius:8px;background:#0a2028;color:#d7e8e8;font:600 13px system-ui,sans-serif;box-shadow:none}
#choice-popup.choice-popup--ability #affordances > .act--primary {background:linear-gradient(#75ded4,#369da5);border-color:#87e4db;color:#05252a}
#choice-popup.choice-popup--ability #affordances > button:hover {filter:brightness(1.12)}
@media(max-height:650px){.has-tutorial-guide #choice-popup.choice-popup--ability {left:24px;top:50%;width:min(360px,calc(100vw - 390px));transform:translateY(-50%)}}
/* One surface owns both gameplay choices and tutorial instruction. */
.unified-interactions #tray,.unified-interactions #choice-popup,.unified-interactions #tray-restore {display:none!important}
#tutorial-guide {transition:left .22s ease,top .22s ease,width .18s ease;max-height:calc(100dvh - 24px)}
#guide-content .tray__head,#guide-content #decision-description,#guide-content #tutorial-choice-help {display:none!important}
#guide-content #affordances {display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#guide-content #actionfoot {display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#guide-content #affordances>.hint {font:12px/1.45 system-ui,sans-serif;color:#a6c5ca;flex-basis:100%}
#guide-content button.act--primary {background:linear-gradient(#73ded6,#27969f);color:#04242b;border-color:#8ee9dd}
#tutorial-guide.guide--presentation #guide-content {display:none}
#tutorial-guide.guide--regular.guide--presentation #guide-content {display:block}
#tutorial-guide.guide--regular.guide--presentation #affordances {display:none}
#tutorial-guide.guide--regular .guide-progress,#tutorial-guide.guide--regular #guide-hint,#tutorial-guide.guide--regular #guide-card-keys,#tutorial-guide.guide--regular .guide-actions,#tutorial-guide.guide--regular .guide-keys {display:none}
#tutorial-guide.guide--intro #guide-content {display:none}
#tutorial-guide.guide--gallery {width:min(680px,calc(100vw - 24px))}
#guide-content .options--cards {display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;max-height:38dvh;overflow:auto;margin-top:12px}
#guide-content #options[hidden] {display:none}
#guide-content .options--cards .option {width:100%;min-width:0;height:auto;max-height:32dvh;padding:4px;white-space:normal}
#guide-content .options--cards img {width:100%;height:100%;max-height:29dvh;object-fit:contain}
#guide-content #option-search {width:100%;box-sizing:border-box}
#tutorial-guide.guide--your-turn {width:min(330px,calc(100vw - 24px));padding:14px 18px}
#tutorial-guide.guide--your-turn #guide-hint,#tutorial-guide.guide--your-turn .guide-keys {display:none}
#tutorial-guide #guide-card-keys {font-size:11px;line-height:1.45;margin:8px 0;color:#91b4ba}
#tutorial-shade.shade--your-turn svg>rect {fill-opacity:.35}
@media(prefers-reduced-motion:reduce){#tutorial-guide{transition:none}}
#tutorial-guide.guide--your-turn #affordances > span.hint {display:none}
#tutorial-guide #guide-content button {white-space:normal}
#tutorial-guide #guide-content #actionfoot .hint {align-self:center;font:11px system-ui,sans-serif;color:#aac5c6}
/* Regular matches use the same decision card, with gameplay controls only. */
#tutorial-guide.guide--regular {width:min(390px,calc(100vw - 24px));padding:20px 22px}
#tutorial-guide.guide--regular h2 {margin-top:0;font-size:20px}
#tutorial-guide.guide--regular #guide-text {color:#bfd7d9;font-size:14px;line-height:1.5}
#tutorial-guide.guide--regular.guide--gallery {width:min(680px,calc(100vw - 24px))}
#tutorial-guide.guide--regular #guide-content :is(#affordances,#actionfoot):empty {display:none}
#tutorial-guide.guide--regular #guide-content :is(.act,button.option) {min-height:40px;font-size:13px}
/* Keep fallback decision surfaces consistent during setup and view changes. */
body.match-shell :is(#choice-popup,#tray) {
  border:1px solid #77d8d3;border-radius:16px;
  background:#071e26 url('./assets/tutorial/message-panel.png') center/100% 100% no-repeat;
  box-shadow:0 16px 60px #000b;color:#edf9f8;font:14px/1.45 system-ui,sans-serif;
}
body.match-shell :is(#choice-popup,#tray) .tray__head {border:0;padding-bottom:0;margin-bottom:12px}
body.match-shell :is(#choice-popup,#tray) .tray__prompt {font:600 20px/1.3 system-ui,sans-serif;color:#fff;text-transform:none}
body.match-shell :is(#choice-popup,#tray) .tray__description {font:14px/1.5 system-ui,sans-serif;color:#bfd7d9}
body.match-shell :is(#choice-popup,#tray) button.act {border:1px solid #39676e;border-radius:8px;background:#061b23;color:#e4f4f3;font:13px system-ui,sans-serif;min-height:40px}
body.match-shell :is(#choice-popup,#tray) button.act--primary {background:linear-gradient(#73ded6,#27969f);border-color:#8ee9dd;color:#04242b}

/* Landscape battlefield choices need room for readable rules and art. */
#tutorial-guide.guide--battlefield,#tutorial-guide.guide--regular.guide--battlefield{width:min(1400px,calc(100vw - 36px));box-sizing:border-box}
#tutorial-guide.guide--battlefield #guide-content .options--cards{grid-template-columns:repeat(3,minmax(0,1fr));max-height:65dvh;gap:16px}
#tutorial-guide.guide--battlefield #guide-content .option{max-height:none;padding:6px;display:block}
#tutorial-guide.guide--battlefield #guide-content .option__art{width:100%;height:auto;aspect-ratio:auto;display:block}
#tutorial-guide.guide--battlefield #guide-content .option__art img{width:100%;height:auto;max-height:none;object-fit:contain}
@media(max-width:700px){#tutorial-guide.guide--battlefield #guide-content .options--cards{grid-template-columns:1fr;max-height:62dvh}#tutorial-guide.guide--battlefield #guide-content .option{max-width:480px;margin:auto}}

/* Opening-hand cards should be readable before the player commits. */
#tutorial-guide.guide--mulligan,#tutorial-guide.guide--regular.guide--mulligan{
 width:min(1320px,calc(100vw - 36px));box-sizing:border-box;
}
#tutorial-guide.guide--mulligan #guide-content .options--cards{
 grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-height:calc(100dvh - 220px);padding:8px;
}
#tutorial-guide.guide--mulligan #guide-content .option{
 max-height:none;padding:6px;gap:0;
}
#tutorial-guide.guide--mulligan #guide-content .option__art{
 width:100%;height:auto;aspect-ratio:744 / 1039;
}
#tutorial-guide.guide--mulligan #guide-content .option__art img{
 width:100%;height:100%;max-height:none;object-fit:contain;
}
#tutorial-guide.guide--mulligan #guide-content #affordances{gap:12px}
#tutorial-guide.guide--mulligan #guide-content #affordances button{min-height:48px;font-size:16px}
@media(max-width:700px){
 #tutorial-guide.guide--mulligan #guide-content .options--cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}

#affordances button[data-choice-key]{display:inline-flex;align-items:center;justify-content:center;gap:12px}
#affordances button[data-choice-key]::after{content:attr(data-choice-key);font:600 11px/1 system-ui,sans-serif;border:1px solid currentColor;border-radius:4px;padding:4px 6px;opacity:.8}

/* Grow busy choice panels, then wrap instead of squeezing labels. */
#tutorial-guide.guide--many-options,#tutorial-guide.guide--regular.guide--many-options{
 width:min(var(--choice-panel-width,720px),calc(100vw - 36px));box-sizing:border-box;
}
#tutorial-guide #guide-content #affordances>button{
 flex:1 1 140px;min-width:min(140px,100%);max-width:100%;height:auto;
 white-space:normal;overflow-wrap:anywhere;line-height:1.35;padding:10px 14px;
}
#tutorial-guide.guide--many-options #affordances{
 max-height:60dvh;overflow-y:auto;padding:3px;align-items:stretch;
}

#options .option-shortcut{position:absolute;top:8px;left:50%;transform:translateX(-50%);padding:4px 9px;border:1px solid #e6c770;border-radius:5px;background:#071e26;color:#fff1c5;font:700 14px/1 system-ui;pointer-events:none}
#actionfoot button[data-choice-key]{display:inline-flex;align-items:center;justify-content:center;gap:12px}
#actionfoot button[data-choice-key]::after{content:attr(data-choice-key);font:600 11px/1 system-ui;border:1px solid currentColor;border-radius:4px;padding:4px 6px;opacity:.8}
#tutorial-guide.guide--collapsed{width:auto!important;max-width:230px;inset:80px 16px auto auto!important;padding:10px}
#tutorial-guide.guide--collapsed>:not(#guide-collapse){display:none!important}
#tutorial-guide #guide-collapse{font-size:12px;padding:5px 10px;min-height:28px;margin-bottom:6px;color:#ace8e6}
#board-choice-dock{position:fixed;z-index:910;width:min(520px,calc(100vw - 24px));max-height:38dvh;overflow:auto;box-sizing:border-box;padding:8px 10px;border:1px solid #8d7950;border-radius:8px;background:#071923f5;color:#e8edf0;box-shadow:0 6px 18px #0008;font:13px/1.4 system-ui}
#board-choice-dock[hidden]{display:none}
#board-choice-expand{float:right;font:11px system-ui;padding:4px 8px;border:1px solid #718785;border-radius:4px;background:#122d37;color:#cbebe9;cursor:pointer}
#board-choice-content #prompt,#board-choice-content #decision-description,#board-choice-content .target-help,#board-choice-content .trigger-help{display:none}
#board-choice-content :is(#affordances,#actionfoot,#options){display:flex;flex-wrap:wrap;gap:6px;clear:both}
#board-choice-content :is(#affordances,#actionfoot,#options)[hidden]{display:none}
#board-choice-content :is(button,.act){min-width:70px;min-height:32px;padding:6px 9px;border:1px solid #55767e;border-radius:5px;background:#122b36;color:#eef7f5;cursor:pointer;white-space:normal}
#board-choice-content button:disabled{opacity:.45;cursor:default}
#board-choice-content button:focus-visible{outline:2px solid #b4fff7;outline-offset:2px}
#board-choice-content .act--primary{background:#86d8cf;color:#082626}
#board-choice-content .option{width:110px;position:relative}
#board-choice-content .option img{width:100%;max-height:115px;object-fit:contain}
#board-choice-content .hint{font-size:11px;align-self:center}
#board-choice-content #option-search{max-width:100%;box-sizing:border-box}
#board-choice-content #tray-close{display:none}
#board-choice-content #prompt{display:block;font-size:12px;margin:0 0 6px;color:#ddc78f}