/* A tiny pixel-game field guide, isolated from the room's existing UI. */
.study-tutorial{--guide-ink:#304c3e;--guide-paper:#fff8e6;--guide-gold:#d79c43;box-sizing:border-box;position:fixed;inset:0;margin:0;padding:0;border:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;background:transparent;color:var(--guide-ink);overflow:hidden;font-family:ui-sans-serif,system-ui,-apple-system,"PingFang SC","Microsoft Yahei",sans-serif;overscroll-behavior:contain;z-index:10000}
.study-tutorial:not([open]){display:none}.study-tutorial[open]{display:block}.study-tutorial::backdrop{background:transparent}.study-tutorial *{box-sizing:border-box}.study-tutorial [hidden]{display:none!important}
.study-tutorial-shade{position:absolute;inset:0;background:#142b23b8}.study-tutorial.has-spotlight .study-tutorial-shade{background:transparent}.study-tutorial-spotlight{position:absolute;border:2px solid #ffdf8f;box-shadow:0 0 0 9999px #142b23b8,inset 0 0 0 2px #fff8e64d;pointer-events:none}.study-tutorial-spotlight:before,.study-tutorial-spotlight:after{content:"";position:absolute;width:10px;height:10px;border:3px solid var(--guide-paper)}.study-tutorial-spotlight:before{top:-5px;left:-5px;border-right:0;border-bottom:0}.study-tutorial-spotlight:after{bottom:-5px;right:-5px;border-left:0;border-top:0}
.study-tutorial-card{position:absolute;width:424px;max-width:calc(100% - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#aeb6a0 transparent;background:var(--guide-paper);border:3px solid var(--guide-ink);box-shadow:0 0 0 3px #f1deb7,0 0 0 6px var(--guide-ink),7px 9px 0 6px #10271e4d;padding:0 25px 15px;isolation:isolate;animation:study-guide-arrive .2s steps(4,end)}
.study-tutorial-card:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.3;background-image:radial-gradient(#d7c59a .6px,transparent .6px);background-size:5px 5px}
.study-tutorial-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #d8d6bd;margin:0 -25px 19px;padding:0 14px 0 24px;background:#eef0d9;min-height:40px}.study-tutorial-brand{font:9px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:2px;color:#607158}.study-tutorial button{font:inherit;cursor:pointer;border-radius:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.study-tutorial button:focus-visible{outline:3px solid #d39a3d;outline-offset:4px}.study-tutorial-close{border:0;background:transparent;color:#607158;font-size:23px!important;line-height:1!important;width:44px;min-height:44px;padding:0}.study-tutorial-close:hover{color:var(--guide-ink);background:#e2e6c8}
.study-tutorial-guide{display:flex;gap:13px;align-items:center;margin-bottom:19px}.study-tutorial-avatar{position:relative;width:65px;height:65px;flex:0 0 65px;display:grid;place-items:center;background:#e4eace;border:2px solid #8f9f7e;box-shadow:3px 3px 0 #d4d9b7;image-rendering:pixelated}.study-tutorial-pigeon{width:56px;height:56px;image-rendering:pixelated;animation:study-guide-bob 2.8s steps(2,end) infinite}.study-tutorial-avatar-spark{position:absolute;top:5px;right:5px;width:4px;height:4px;background:#d5a747;box-shadow:-3px 0 #d5a747,3px 0 #d5a747,0 -3px #d5a747,0 3px #d5a747}.study-tutorial-guide-name,.study-tutorial-zone{display:block}.study-tutorial-guide-name{font-size:12px;font-weight:750;letter-spacing:.04em;line-height:1.5}.study-tutorial-zone{font-size:10px;line-height:1.8;color:#71765d;margin-top:4px}.study-tutorial-counter{margin-left:auto;align-self:flex-start;padding-top:8px;white-space:nowrap;font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#727862}
.study-tutorial h2{font-size:23px;font-weight:800;letter-spacing:-.04em;line-height:1.5;margin:0 0 11px;text-wrap:balance;outline:none}.study-tutorial-copy p{margin:0;font-size:13px;line-height:1.95;color:#576451;text-wrap:pretty}.study-tutorial-map{display:flex;align-items:center;justify-content:space-between;position:relative;margin:23px 0 21px}.study-tutorial-map:before{content:"";position:absolute;left:10px;right:10px;top:50%;height:2px;background:repeating-linear-gradient(90deg,#c5c9a9 0 5px,transparent 5px 9px)}.study-tutorial-map-stop{position:relative;z-index:1;width:23px;height:23px;display:grid;place-items:center;background:#f3f0dc;color:#939880;border:2px solid #c9ccaf;font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.study-tutorial-map-stop[data-state="current"]{background:#f1ce83;color:#60451d;border-color:#956a28;box-shadow:0 0 0 3px #fff8e6,0 0 0 4px #d0b879;transform:translateY(-2px)}.study-tutorial-map-stop[data-state="done"]{background:#47624a;color:#fff8e6;border-color:#47624a}
.study-tutorial-tip{display:flex;align-items:flex-start;gap:10px;padding:13px 12px;background:#eeeed8;border-left:3px solid #a5b387}.study-tutorial-tip-mark{display:grid;place-items:center;flex:0 0 14px;width:14px;height:14px;margin-top:3px;border:1px solid #7b8866;font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#647451}.study-tutorial-tip p{margin:0;font-size:11px;line-height:1.9;color:#6b7259}.study-tutorial-status{min-height:0;margin:0;color:#797657;font-size:10px;line-height:1.6}.study-tutorial-status:not(:empty){margin-top:10px}.study-tutorial-actions{display:grid;grid-template-columns:1fr 1.22fr;gap:13px;margin-top:20px}.study-tutorial-actions button{min-height:45px;font-size:12px;font-weight:700;line-height:1.3;padding:10px 8px;border:2px solid var(--guide-ink);box-shadow:3px 3px 0 #d4d2b8}.study-tutorial-primary{background:var(--guide-ink);color:var(--guide-paper)}.study-tutorial-primary:hover{background:#45674e}.study-tutorial-secondary{background:var(--guide-paper);color:#627059;border-color:#b4bba1!important}.study-tutorial-secondary:hover{background:#e9edda}.study-tutorial-actions button:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 #d4d2b8}.study-tutorial-actions button:disabled{opacity:.6;cursor:wait}.study-tutorial-bottom{min-height:31px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:9px;color:#949780}.study-tutorial-bottom button{min-height:44px;padding:4px 0 4px 8px;border:0;background:none;font-size:10px;color:#777e68;text-decoration:underline;text-underline-offset:3px}.study-tutorial[data-step="done"] .study-tutorial-avatar{background:#f1d99d}.study-tutorial[data-step="done"] .study-tutorial-map-stop{background:#47624a;border-color:#47624a;color:#fff8e6}
@keyframes study-guide-arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}@keyframes study-guide-bob{0%,70%,100%{transform:translateY(0)}75%,90%{transform:translateY(-2px)}}
@media(max-width:679px){.study-tutorial-card{width:420px;max-width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:0 19px 11px;box-shadow:0 0 0 2px #f1deb7,0 0 0 4px var(--guide-ink),4px 5px 0 4px #10271e4d}.study-tutorial.has-spotlight .study-tutorial-card{max-height:min(70dvh,570px)}.study-tutorial-topline{margin:0 -19px 13px;padding-left:19px;min-height:34px}.study-tutorial-brand{font-size:8px;letter-spacing:1.4px}.study-tutorial-close{min-height:44px;width:44px}.study-tutorial-guide{margin-bottom:12px;gap:11px}.study-tutorial-avatar{width:52px;height:52px;flex-basis:52px}.study-tutorial-pigeon{width:46px;height:46px}.study-tutorial-guide-name{font-size:11px}.study-tutorial-zone{font-size:9px;margin-top:2px}.study-tutorial-counter{font-size:9px}.study-tutorial h2{font-size:20px;line-height:1.4;margin-bottom:9px}.study-tutorial-copy p{font-size:12px;line-height:1.8}.study-tutorial-map{margin:17px 0}.study-tutorial-map-stop{width:21px;height:21px}.study-tutorial-tip{padding:10px;gap:8px}.study-tutorial-tip p{font-size:10px;line-height:1.8}.study-tutorial-actions{margin-top:14px;gap:11px}.study-tutorial-bottom{margin-top:8px}.study-tutorial-bottom>span{font-size:8px}}
@media(max-height:590px) and (min-width:680px){.study-tutorial-card{width:460px;padding-bottom:10px}.study-tutorial-topline{margin-bottom:12px}.study-tutorial-guide{margin-bottom:10px}.study-tutorial-avatar{width:44px;height:44px;flex-basis:44px}.study-tutorial-pigeon{width:40px;height:40px}.study-tutorial h2{font-size:21px;margin-bottom:7px}.study-tutorial-copy p{font-size:12px;line-height:1.7}.study-tutorial-map{margin:15px 0}.study-tutorial-tip{padding:9px}.study-tutorial-actions{margin-top:14px}.study-tutorial-bottom{margin-top:7px}}
@media(prefers-reduced-motion:reduce){.study-tutorial *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keep phone controls clickable inside the native tutorial dialog. */
.study-tutorial.has-persistent-controls .study-tutorial-card{max-height:calc(100dvh - 96px)}