/* Shared Wisp panel and eye presentation for the main screen and Portolan. */
.wisp-eye-canvas{display:block;width:94%;height:94%;object-fit:contain;border-radius:50%;pointer-events:none}
.wisp-medallion[aria-expanded="true"]{outline:2px solid rgba(90,104,90,.48);outline-offset:3px}
.wisp-medallion .sigil-tag{max-width:190px}

.wisp-panel{position:fixed;z-index:80;width:min(312px,calc(100vw - 24px));max-height:min(72dvh,470px);overflow:auto;overscroll-behavior:contain;padding:14px 14px 11px;border:1px solid rgba(176,150,104,.72);background:linear-gradient(142deg,rgba(25,27,23,.985),rgba(12,15,13,.985));box-shadow:0 16px 48px rgba(0,0,0,.48),inset 0 0 0 4px rgba(225,209,174,.035);color:#e2d8c3;scrollbar-width:thin;scrollbar-color:rgba(176,150,104,.52) transparent}
.wisp-panel::before{content:"";position:absolute;inset:5px;border:1px solid rgba(207,187,150,.13);pointer-events:none}
.wisp-panel[hidden]{display:none!important}
.wisp-panel .wisp-close{position:absolute;z-index:3;right:7px;top:6px;width:28px;height:28px;padding:0;border:0;background:transparent;color:#d5c6a8;font-size:22px;line-height:1;cursor:pointer}
.wisp-panel .wisp-close:hover,.wisp-panel .wisp-close:focus-visible{color:#b8ece2}
.wisp-panel h3{min-height:1.12em;margin:0 26px 8px;color:#e7ddc8;font-family:"Sixth Order",Georgia,serif;font-size:20px;font-weight:400;letter-spacing:.035em;line-height:1.08;text-align:center}
.wisp-description{position:relative;display:flex;min-height:clamp(106px,15vh,138px);flex-direction:column;justify-content:center;margin-top:0;padding:14px 13px;border:1px solid rgba(189,171,133,.42);background:linear-gradient(145deg,rgba(8,11,9,.78),rgba(17,21,17,.54));box-shadow:inset 0 0 0 3px rgba(225,209,174,.025),inset 0 8px 28px rgba(0,0,0,.2)}
.wisp-description::before{content:"";position:absolute;inset:5px;border:1px solid rgba(207,187,150,.09);pointer-events:none}
.wisp-dialogue{position:relative;margin:0;color:#ddd4c2;font-family:"WITNESS",Georgia,serif;font-size:11px;font-style:italic;line-height:1.55;text-align:center;text-wrap:pretty}
.wisp-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-items:center;gap:8px;margin:13px 2px 0;padding:0 10px}
.wisp-actions button{position:relative;display:grid;width:48px;height:48px;place-items:center;padding:3px;border:1px solid rgba(209,190,150,.42);border-radius:50%;background:radial-gradient(circle at 35% 28%,rgba(43,47,39,.95),rgba(8,11,9,.97) 72%);box-shadow:inset 0 0 0 3px rgba(225,209,174,.025),0 3px 12px rgba(0,0,0,.22);cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,opacity .18s ease,filter .18s ease}
.wisp-actions button img{display:block;width:100%;height:100%;object-fit:contain;opacity:.82;filter:drop-shadow(0 1px 2px rgba(0,0,0,.38));transition:opacity .18s ease,filter .18s ease}
.wisp-actions button:hover:not(:disabled),.wisp-actions button:focus-visible,.wisp-actions button.is-selected{border-color:#78c7b9;box-shadow:0 0 0 1px rgba(107,195,181,.25),0 0 16px rgba(69,175,160,.46),inset 0 0 0 3px rgba(127,209,196,.1),0 4px 14px rgba(0,0,0,.34)}
.wisp-actions button:hover:not(:disabled){transform:translateY(-1px)}
.wisp-actions button:hover:not(:disabled) img,.wisp-actions button:focus-visible img,.wisp-actions button.is-selected img{opacity:1;filter:drop-shadow(0 0 4px rgba(115,205,189,.38))}
.wisp-actions button:focus-visible{outline:2px solid #a0e2d7;outline-offset:4px}
.wisp-actions button:disabled{opacity:.43;filter:saturate(.55);cursor:not-allowed}
.wisp-actions button.is-selected:disabled{opacity:.66;filter:none}
.wisp-action-tag{position:absolute;z-index:4;left:50%;bottom:calc(100% + 7px);transform:translate(-50%,3px);padding:4px 6px;border:1px solid rgba(124,190,178,.46);background:rgba(8,12,10,.96);color:#e0eee5;font-family:"LEDGER",Georgia,serif;font-size:7px;font-weight:500;letter-spacing:.07em;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,transform .12s ease,visibility .12s ease}
.wisp-actions button:hover:not(:disabled) .wisp-action-tag,.wisp-actions button:focus-visible .wisp-action-tag,.wisp-actions button.is-selected .wisp-action-tag{transform:translate(-50%,0);opacity:1;visibility:visible}

.portolan-wisp-dock{position:absolute;z-index:21;left:clamp(15px,3vw,46px);bottom:clamp(115px,14vh,158px)}
.portolan-wisp-trigger{position:relative;display:grid;place-items:center;width:62px;height:62px;padding:2px;border:1px solid rgba(205,174,124,.55);border-radius:50%;background:radial-gradient(circle at 35% 27%,rgba(54,54,43,.96),rgba(10,13,11,.96) 70%);box-shadow:0 4px 17px rgba(0,0,0,.5),inset 0 0 0 3px rgba(212,185,133,.09);cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.portolan-wisp-trigger:hover,.portolan-wisp-trigger:focus-visible,.portolan-wisp-trigger[aria-expanded="true"]{border-color:#d1b77e;box-shadow:0 0 18px rgba(174,137,77,.28),0 5px 20px rgba(0,0,0,.5);transform:translateY(-1px)}
.portolan-wisp-trigger .wisp-eye-canvas{width:100%;height:100%}
.portolan-wisp-trigger::after{content:"WISP";position:absolute;left:70px;top:50%;transform:translateY(-50%);padding:5px 7px;border:1px solid rgba(215,192,146,.27);background:rgba(6,8,7,.9);color:#e4d8bf;font:700 7px "LEDGER",Georgia,serif;letter-spacing:.12em;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none}
.portolan-wisp-trigger:hover::after,.portolan-wisp-trigger:focus-visible::after{opacity:1;visibility:visible}

@media(max-width:700px){
  .wisp-panel{width:min(312px,calc(100vw - 24px));max-height:min(72dvh,470px);padding:12px 11px 9px}
  .wisp-panel h3{font-size:19px}
  .wisp-description{min-height:clamp(94px,15vh,126px);padding:12px 10px}
  .wisp-dialogue{font-size:10px}
  .wisp-actions{gap:5px;margin-top:11px;padding:0 7px}
  .wisp-actions button{width:44px;height:44px}
  .portolan-wisp-dock{left:12px;bottom:clamp(112px,15vh,144px)}
  .portolan-wisp-trigger{width:50px;height:50px}
  .portolan-wisp-trigger::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  .wisp-actions button,.wisp-actions button img,.wisp-action-tag,.portolan-wisp-trigger{transition:none}
}
