/* SaoSystem 2.5 | Independent mascot UI. Never clip the head/body of character art. */
.sao-mascot[hidden],.sao-mascot-reopen[hidden],.sao-mascot-dialog[hidden]{display:none!important}
.sao-mascot{position:fixed;right:12px;bottom:max(10px,env(safe-area-inset-bottom));width:268px;height:227px;z-index:70;overflow:visible;user-select:none;-webkit-user-select:none;isolation:isolate}
.sao-mascot-stage{position:absolute;bottom:0;left:0;width:220px;height:207px}
.sao-mascot-character{display:block;position:relative;width:220px;height:207px;padding:0;margin:0;border:0;background:transparent;cursor:grab;touch-action:none;appearance:none;outline-offset:3px}
.sao-mascot-character:focus-visible{outline:2px solid #43c9ff;border-radius:16px}
.sao-mascot.is-dragging .sao-mascot-character{cursor:grabbing}
.sao-mascot-character canvas{width:220px;height:202px;display:block;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 6px 6px rgba(5,28,56,.27));pointer-events:none}
.sao-mascot-character .sao-mascot-avatar{display:none}
.sao-mascot-tools{position:absolute;right:0;top:18px;width:39px;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateX(9px);visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility .2s}
.sao-mascot:hover .sao-mascot-tools,.sao-mascot:focus-within .sao-mascot-tools,.sao-mascot.is-open .sao-mascot-tools{opacity:1;transform:none;visibility:visible;pointer-events:auto}
.sao-mascot-tools button,.sao-mascot-reopen{width:39px;height:39px;display:grid;place-items:center;margin:0;padding:0;border:0;clip-path:polygon(24% 0,76% 0,100% 24%,100% 76%,76% 100%,24% 100%,0 76%,0 24%);background:linear-gradient(145deg,#2566a0,#0b2b51 78%);color:#f7fdff;font-size:21px;line-height:1;box-shadow:inset 0 0 0 2px #90dbff;cursor:pointer;transition:filter .14s ease,transform .14s ease}
.sao-mascot-tools button:hover,.sao-mascot-tools button:focus-visible,.sao-mascot-reopen:hover{filter:brightness(1.35);transform:translateY(-1px)}
.sao-mascot-tools button:focus-visible,.sao-mascot-reopen:focus-visible{outline:2px solid #31ccff;outline-offset:2px}
.sao-mascot-dialog{position:absolute;right:231px;bottom:140px;width:206px;max-width:min(206px,calc(100vw - 245px));min-height:43px;z-index:5;padding:10px 25px 10px 12px;line-height:1.6;font-size:12px;color:#173956;background:#f7fbff;border:1px solid #81c8eb;border-radius:10px;box-shadow:0 10px 24px rgba(4,33,57,.21);overflow-wrap:anywhere}
.sao-mascot-dialog:after{content:'';position:absolute;right:-6px;bottom:12px;width:10px;height:10px;background:#f7fbff;border-right:1px solid #81c8eb;border-top:1px solid #81c8eb;transform:rotate(45deg)}
.sao-mascot-dialog button{position:absolute;right:5px;top:4px;width:22px;height:22px;border:0;background:transparent;color:#456a83;font-size:17px;cursor:pointer}
.sao-mascot[data-dock=left] .sao-mascot-dialog{right:auto;left:231px}
.sao-mascot[data-dock=left] .sao-mascot-dialog:after{right:auto;left:-6px;transform:rotate(225deg)}
.sao-mascot-reopen{position:fixed;right:14px;bottom:max(16px,env(safe-area-inset-bottom));z-index:70;width:43px;height:43px;font-size:22px;box-shadow:0 5px 20px rgba(4,32,59,.26)}
/* SAO-inspired but still an obvious arrow tip. Links keep the native hand; input keeps I-beam. */
@media(hover:hover) and (pointer:fine){html,body{cursor:url('../img/cursor-sao-readable.png') 2 2,auto}a,button,[role=button],summary,select,label[for]{cursor:pointer}input,textarea,[contenteditable]{cursor:text}.sao-mascot-character{cursor:grab}}
@media(max-width:700px){
 .sao-mascot{right:6px;bottom:max(8px,env(safe-area-inset-bottom));width:136px;height:120px}
 .sao-mascot-stage,.sao-mascot-character{width:103px;height:117px;touch-action:manipulation}
 .sao-mascot-character canvas{width:103px;height:95px}
 .sao-mascot-tools{top:5px;width:30px;gap:3px}
 .sao-mascot-tools button{width:30px;height:30px;font-size:17px}
 .sao-mascot-dialog{right:105px;bottom:67px;width:153px;max-width:calc(100vw - 158px);padding:7px 21px 7px 9px;font-size:11px}
 .sao-mascot.is-compact{width:54px;height:54px;right:8px;bottom:max(11px,env(safe-area-inset-bottom))}
 .sao-mascot.is-compact .sao-mascot-stage,.sao-mascot.is-compact .sao-mascot-character{width:54px;height:54px}
 .sao-mascot.is-compact .sao-mascot-character{border:2px solid #80e4ff;border-radius:50%;overflow:hidden;background:linear-gradient(155deg,#235e9b,#081e39);box-shadow:0 6px 20px rgba(0,34,68,.28)}
 .sao-mascot.is-compact canvas{display:none!important}
 .sao-mascot.is-compact .sao-mascot-avatar{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
 .sao-mascot.is-compact .sao-mascot-tools,.sao-mascot.is-compact .sao-mascot-dialog{display:none!important}
 .sao-mascot-reopen{right:10px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){.sao-mascot-tools,.sao-mascot-tools button,.sao-mascot-reopen{transition:none!important}}