.sg-layer{position:fixed;inset:0;z-index:9500;isolation:isolate;touch-action:manipulation}.sg-no-target{background:#070e23b8}.sg-spot{position:fixed;pointer-events:none;border:2px solid #ffe2a0;border-radius:9px;box-shadow:0 0 0 9999px #070e23c2,0 0 22px #edc97c99;transition:left .18s,top .18s,width .18s,height .18s}.sg-card{position:fixed;width:min(340px,calc(100vw - 24px));box-sizing:border-box;padding:16px;color:#f4edd9;border:1px solid #d1b574;border-radius:10px;background:linear-gradient(135deg,#22394cf9,#142336fd);box-shadow:0 8px 40px #000a;font-family:inherit}.sg-card header{display:flex;gap:12px;align-items:center}.sg-card header img{width:61px;height:84px;object-fit:cover;object-position:top;border-bottom:1px solid #dbc080}.sg-card header div{min-width:0}.sg-card header small{color:#e3c789;font-size:11px}.sg-card h2{font-size:17px;line-height:1.45;margin:6px 0 0}.sg-card p{font-size:14px;line-height:1.8;margin:12px 0 16px}.sg-card footer{display:flex;justify-content:space-between;gap:8px;align-items:center}.sg-card button{min-height:36px;padding:5px 9px;font-size:12px;white-space:nowrap}.sg-pagination{display:flex;align-items:center;gap:5px;font-size:11px;color:#bbc9d8;white-space:nowrap}.sg-pagination button{min-width:25px;padding:0}.sg-help{min-width:30px!important;width:30px;height:30px!important;min-height:30px!important;padding:0!important;border:1px solid #c9ad70!important;border-radius:50%!important;color:#f4d992!important;font-weight:bold!important;background:#182b42!important;flex:none;font-size:18px!important}.screen-guide-open #toast{display:none}
.g-starters{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:4px 0 8px}.g-starters article{display:flex;align-items:center;flex-direction:column;background:#20364c;border:1px solid #9b8a60;border-radius:5px;padding:5px 2px;min-width:0}.g-starters .portrait{width:48px;height:56px}.g-starters b{font-size:12px;margin-top:3px}.g-starters small{font-size:10px;color:#e8d6b4;text-align:center}.g-start-note{font-size:11px;color:#c4d3df;line-height:1.5}.g-modal:has(.g-starters) .g-speech footer{margin-top:5px}.g-modal:has(.g-starters) .g-speech p{font-size:13px;margin-bottom:7px}
@media(max-height:420px){.sg-card{width:304px;padding:12px}.sg-card header img{width:46px;height:63px}.sg-card h2{font-size:15px}.sg-card p{font-size:12px;line-height:1.75;margin:8px 0 12px}.sg-card header small{font-size:10px}.sg-card button{font-size:11px;min-height:34px}.sg-card footer{gap:5px}}
@media(max-height:340px){.sg-card{width:300px;padding:10px}.sg-card header img{width:38px;height:50px}.sg-card h2{font-size:14px;margin-top:3px}.sg-card p{margin:7px 0 10px;line-height:1.6}.sg-card button{min-height:32px}.g-starters .portrait{width:34px;height:38px}.g-starters{margin:2px 0 4px;gap:5px}.g-starters b{font-size:11px}.g-starters small{font-size:9px}.g-start-note{font-size:10px}.g-modal:has(.g-starters) .g-speech p{font-size:11px}.g-modal:has(.g-starters) .g-speech h2{font-size:16px}.g-modal:has(.g-starters) .g-speech footer{padding-top:3px}.g-modal:has(.g-starters) .g-speech button{font-size:10px;padding:4px 7px!important}}
@media(prefers-reduced-motion:reduce){.sg-spot{transition:none}}
/* Keep help beside the close button, with the title using the remaining width. */
.g-modal > header:has(.sg-help){justify-content:flex-end;gap:8px}.g-modal > header:has(.sg-help) > div{margin-right:auto}