/* SPDX-License-Identifier: GPL-3.0-or-later. Independent classroom guide shell. */
#tutorial{position:fixed;inset:0;box-sizing:border-box;width:min(660px,calc(100vw - 24px));max-width:660px;height:min(860px,calc(100svh - 24px));max-height:calc(100svh - 24px);padding:12px;margin:auto!important;border:1px solid #e0d8ea;border-radius:24px;background:#fffaf6;color:#433b52;font:400 16px/1.5 system-ui,-apple-system,sans-serif;letter-spacing:normal;word-break:keep-all;box-shadow:0 16px 48px #44305b22;overflow:hidden}
#tutorial[open]{display:flex;flex-direction:column;gap:4px}#tutorial:not([open]){display:none!important}#tutorial::backdrop{background:#20233d77;backdrop-filter:blur(3px)}
#tutorial [data-guide-part=header]{display:flex;align-items:center;justify-content:space-between;gap:12px;height:44px;min-height:44px;margin:0;padding:0}
#tutorial h2{font:800 18px/1.3 system-ui,-apple-system,sans-serif;letter-spacing:-.03em;color:#433b52;margin:0;padding:0}
#guide-close{font:700 15px/1.25 system-ui,-apple-system,sans-serif;background:#fff;color:#69528e;border:1px solid #d7cde8;border-radius:12px;min-height:44px;min-width:64px;margin:0;padding:8px 12px;box-shadow:none}
#tutorial #pg-guide{display:grid;grid-template-rows:44px 32px 40px minmax(234px,1fr) 52px 44px 52px;gap:4px;flex:1;min-height:0;margin:0;padding:0;overflow:auto}
#tutorial .pg-progress{display:flex;align-items:center;justify-content:space-between;gap:6px;height:44px;margin:0;color:#76678f;font:700 13px/1.25 system-ui,-apple-system,sans-serif}
#tutorial #pg-counter{min-width:38px;white-space:nowrap}#tutorial #pg-dots{display:flex;gap:4px;margin:0;padding:0;align-items:center;justify-content:center}
#tutorial #pg-guide button{font:700 16px/1.25 system-ui,-apple-system,sans-serif;letter-spacing:normal;min-height:44px;padding:8px 12px;margin:0;border:1px solid #dbd3e6;border-radius:12px;background:#fff;color:#493c62;box-shadow:none;touch-action:manipulation;transform:none}
#tutorial #pg-guide #pg-dots button{width:44px;min-width:44px;min-height:44px;border-radius:50%;padding:0;background:#f5f1fc;color:#76678f;font-size:14px}#tutorial #pg-guide #pg-dots button[aria-current=step]{background:#6e56b9;color:#fff;border-color:#6e56b9}
#tutorial #pg-title{font:800 25px/1.3 system-ui,-apple-system,sans-serif;letter-spacing:-.04em;display:flex;align-items:center;height:32px;color:#342d49;margin:0;padding:0}
#tutorial #pg-say{font:400 15px/1.6 system-ui,-apple-system,sans-serif;display:flex;align-items:center;height:40px;color:#6f657c;margin:0;padding:0}
#tutorial #pg-board{min-height:234px;height:100%;margin:0;padding:6px;border:1px solid #e9e0ef;border-radius:20px;background:linear-gradient(135deg,#faf7fd,#f4faf5);display:grid;place-items:center;align-content:center;gap:8px;overflow:auto}#tutorial #pg-board svg{display:block;width:min(100%,220px);height:auto}
#tutorial #pg-input{height:52px;min-height:52px;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:6px;margin:0;padding:4px 0;overflow:auto}
#tutorial #pg-caption{height:44px;min-height:44px;margin:0;padding:6px 10px;border:0;border-radius:12px;background:#f3eef9;color:#665079;text-align:center;font:750 14px/1.4 system-ui,-apple-system,sans-serif;display:flex;align-items:center;justify-content:center}#tutorial #pg-caption.pg-success{background:#e2f2df;color:#3e6c43}
#tutorial .pg-tools{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-height:44px;margin:0;padding:0}#tutorial #pg-guide .pg-tools button{font-size:12px;padding:8px;min-width:82px;background:transparent;border-color:transparent;color:#796b8c}
#tutorial #pg-guide .pg-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;height:52px;margin:0;padding:0;position:sticky;bottom:0;background:#fffaf6;z-index:10}#tutorial #pg-guide .pg-footer button{min-width:144px;min-height:52px;padding:12px 16px;font-size:17px;border-radius:14px}#tutorial #pg-guide .pg-footer button:is([data-guide-part="next"],[data-guide-part="start"]){background:#6e56b9;color:#fff;border-color:#6e56b9}
#tutorial #pg-guide button:hover:not(:disabled){filter:brightness(.96)}#tutorial #pg-guide button:disabled{opacity:.45;cursor:default}#tutorial :focus-visible{outline:3px solid #db9b30;outline-offset:2px}
#tutorial #pg-details{min-height:44px;margin:0;padding:0;border:0;border-top:1px solid #e9e0ef;overflow:auto;font:400 13px/1.6 system-ui,-apple-system,sans-serif}#tutorial #pg-details summary{min-height:44px;margin:0;padding:10px 0;color:#7c7289;font-weight:700;cursor:pointer}#tutorial #pg-details[open]{max-height:35svh;flex-shrink:0}
@media(max-width:600px){#tutorial{padding:12px;border-radius:20px}#tutorial h2{font-size:16px}#tutorial #pg-guide{grid-template-rows:88px 56px 72px minmax(180px,1fr) 96px 64px 56px}#tutorial .pg-progress{flex-wrap:wrap;height:88px;justify-content:center;column-gap:8px}#tutorial #pg-title{height:56px;font-size:22px}#tutorial #pg-say{height:72px;font-size:14px}#tutorial #pg-caption{height:64px;font-size:13px}#tutorial #pg-guide .pg-footer button{min-width:0;padding:10px;font-size:15px}}

#tutorial #pg-input button{font-size:15px;padding:8px}

#tutorial #pg-guide .pg-footer button{width:180px;min-width:180px;flex:0 0 180px}
@media(max-width:600px){#tutorial #pg-guide .pg-footer button{width:auto;min-width:0;flex:1}}

/* Real screens use original pixels and manual navigation. */
dialog[data-game-guide-style] #pg-guide{grid-template-rows:44px auto auto minmax(220px,1fr) 0 auto 52px}
dialog[data-game-guide-style] #pg-title,dialog[data-game-guide-style] #pg-say,dialog[data-game-guide-style] #pg-caption{height:auto;min-height:0}
dialog[data-game-guide-style] #pg-say,dialog[data-game-guide-style] #pg-caption{font-size:16px;line-height:1.5}
dialog[data-game-guide-style] #pg-input{height:0;min-height:0;padding:0}
dialog[data-game-guide-style] #pg-board{display:block;overflow:auto;align-content:start;padding:6px;min-height:220px}
.screen-capture{display:block;width:min(100%,362px);margin:auto;text-align:center;color:#665079;font:700 14px/1.5 system-ui;text-decoration:underline}
.screen-capture img{display:block;width:100%;height:auto;border:1px solid #ded4e8;border-radius:8px;margin-top:8px}
dialog[data-game-guide-style] .pg-footer{position:static}
@media(max-width:600px){dialog[data-game-guide-style] #pg-guide{grid-template-rows:88px auto auto minmax(200px,1fr) 0 auto 56px}}

dialog[data-game-guide-style] #pg-counter,dialog[data-game-guide-style] #pg-details summary,dialog[data-game-guide-style] #pg-details li{font-size:14px;color:#665079}