/* Targeted prototype: Port / Boutique context and actual musical activity only. */
.context-bubble{position:fixed;z-index:1500;width:min(340px,calc(100vw - 20px));max-height:calc(100dvh - 160px);overflow:auto;margin:0;padding:10px 12px 12px;border:1px solid #efcd89;border-radius:16px 16px 16px 4px;background:linear-gradient(135deg,#173d53ed,#071e30fa 65%),url('/assets/premium-pass-one/naval-leather-v1.png') center/cover;color:#f4e4c2;box-shadow:inset 0 0 0 3px #071a2b,0 12px 35px #00101e99;animation:bubble-enter .18s ease-out;font:14px/1.4 'Carto Condensed',system-ui;overscroll-behavior:contain;scrollbar-width:thin}
.context-bubble>header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;border-bottom:1px solid #b9a16c66;padding:0 0 5px}.context-bubble h2{font-size:23px;line-height:1.05;color:#ffe4a9;margin:0;padding-right:37px}.context-bubble .bubble-close{position:absolute;right:-4px;top:-4px;width:44px;height:44px;min-height:44px;padding:0;font:30px/1 system-ui;border:0;border-radius:10px;background:radial-gradient(#9d3938c9,#3b1a25a6);color:#ff9d94;cursor:pointer}.context-bubble .bubble-close:hover,.context-bubble .bubble-close:focus-visible{background:#9b3c3c;color:white;outline:2px solid #ffdcac}.context-bubble p{font:13px/1.5 system-ui;margin:9px 0}.context-bubble small{font-size:11px;display:block;color:#bbd1dd}.context-bubble .btn{min-height:44px;padding:8px 10px;font-size:14px;margin:5px 0;width:100%;border-radius:8px}.context-bubble .text-btn{min-height:44px;font-size:13px;padding:6px 4px;color:#c1e9f7}.context-bubble .purchase-detail h3{font-size:21px;margin:5px 0}.context-bubble .purchase-detail p{margin:4px 0}.context-bubble .transaction-total{padding:8px 0;margin:0;border-block:1px solid #b9a16c55}.context-bubble .transaction-total strong{font-size:25px}.context-bubble .sale-note{font-size:12px}.context-bubble .price-note,.context-bubble .micro-note{font:10px/1.4 system-ui}.context-bubble .purchase-choices{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}.context-bubble .purchase-choices .btn{font-size:12px}.context-bubble label{display:flex;align-items:center;justify-content:space-between;font-size:12px}.context-bubble select{min-height:44px;max-width:155px;font:13px system-ui}.bubble-provenance{font-size:11px;border-bottom:1px solid #879d9c55}.bubble-provenance summary{min-height:36px;padding:8px 0;color:#a9d1e3}.bubble-error{padding:8px;background:#632936;border-radius:7px;color:#ffe9d1!important}.bubble-success{padding:8px;background:#124b46;border-radius:7px;color:#c5f3e4}.bubble-quest{padding:7px 0;border-bottom:1px solid #b19c6f55}.bubble-quest strong,.bubble-quest span{display:block}.bubble-quest span{font-size:12px;color:#bed7e3}.bubble-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.bubble-products button{min-width:0;padding:7px 3px;border:1px solid #b99d5e;border-radius:8px;background:linear-gradient(#16415a,#061725);color:#f6dfac}.bubble-products img{height:92px;max-width:100%;object-fit:contain;filter:drop-shadow(0 3px 5px #000a)}.bubble-products strong{display:block}
body[data-view=home] .home-air{isolation:isolate}.port-life{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}.harbor-waves{position:absolute;left:42%;right:-10%;top:32%;height:22%;transform:rotate(-9deg);opacity:.45}.harbor-waves i{position:absolute;display:block;width:80%;height:10px;border-top:2px solid #d8f7ff;border-radius:50%;animation:harbor-ripple 6s ease-in-out infinite;left:0;top:18%}.harbor-waves i:nth-child(2){top:45%;left:15%;animation-delay:-2s}.harbor-waves i:nth-child(3){top:70%;left:30%;animation-delay:-4s}.harbor-pennant{position:absolute;right:12%;top:19%;width:50px;height:80px;fill:#113953;stroke:#d1ab66;stroke-width:2;filter:drop-shadow(1px 2px 2px #001f3c66)}.pennant-cloth{transform-origin:9px 20px;animation:harbor-wind 3.6s ease-in-out infinite}.harbor-lantern{position:absolute;left:6%;bottom:31%;width:12px;height:20px;border:2px solid #b98b44;border-radius:6px;background:#ffeab9;box-shadow:0 0 18px 4px #ffd86b77;animation:harbor-lantern 4s ease-in-out infinite alternate}
.port-objects{position:absolute;inset:0;z-index:5;pointer-events:none}.port-object{position:absolute;width:62px;height:66px;border:0;background:radial-gradient(ellipse,#15333ca8,transparent 75%);padding:3px;color:#fff0c8;pointer-events:auto;filter:drop-shadow(0 3px 2px #04142699);transition:transform .15s ease-out}.port-object svg{width:41px;height:41px;fill:#503923d9;stroke:#ffe0a0;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.port-object span{display:block;width:max-content;max-width:105px;position:absolute;left:50%;transform:translateX(-50%);font:10px/1.2 'Carto Condensed';padding:3px 5px;border:1px solid #ad8c55aa;border-radius:5px;background:#0a273cc7;color:#ffedbd;white-space:nowrap}.port-object:active{transform:translateY(2px) scale(.94)}.port-object:focus-visible{outline:2px solid #a9e7ef;border-radius:10px}.port-object-music{left:6%;top:35%}.port-object-loot{right:9%;bottom:26%}.port-object-quests{left:7%;bottom:27%}.port-object-boosters{right:5%;top:43%}.port-object-music svg{fill:#123a50}.port-object-loot svg{fill:#7c4d23}.port-object-quests svg{fill:#d9c38e;stroke:#382c22}.port-object-boosters svg{fill:#1b6076}body[data-view=home] .port-pirate{cursor:pointer}body[data-view=home] .port-companion{z-index:4}body[data-view=boutique] .shop-product{transition:transform .15s ease,filter .15s ease}body[data-view=boutique] .shop-product:active{transform:scale(.96);filter:brightness(1.15)}
body[data-view=piano] .piano-audio-controls{position:absolute;bottom:calc(102px + env(safe-area-inset-bottom,0px));left:8px;right:8px;display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#081f33e8;padding:5px;border:1px solid #a28b56;border-radius:8px}body[data-view=piano] .piano-audio-controls button{min-height:44px;font-size:11px;padding:4px}body[data-view=piano] .piano-audio-controls small{grid-column:1/-1;font-size:10px;text-align:center;color:#c6ddec}body[data-view=piano] .piano-hint{font-size:10px;bottom:calc(180px + env(safe-area-inset-bottom,0px))}#app .layout.piano .piano-stage{bottom:calc(214px + env(safe-area-inset-bottom,0px))}body[data-view=piano] .piano-stage .piano-tile{display:flex;align-items:center;justify-content:center;font:18px 'Carto Condensed';color:#c8efff;pointer-events:none;will-change:transform}body[data-view=piano] .piano-lane{touch-action:none;-webkit-tap-highlight-color:transparent}body[data-view=piano] .piano-audio-controls~button[data-action=piano-exit]{position:absolute;bottom:calc(68px + env(safe-area-inset-bottom,0px));left:8px;right:8px;width:calc(100% - 16px);min-height:34px;font-size:11px;padding:5px}body[data-view=piano] .piano-result{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;background:#071d30d9;border:1px solid #d4b572;border-radius:10px}body[data-view=piano] .piano-result strong{display:block;font-size:28px}
@keyframes bubble-enter{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}@keyframes harbor-ripple{0%{opacity:0;transform:translateX(-12%) scaleX(.8)}40%{opacity:.8}100%{opacity:0;transform:translateX(18%) scaleX(1.1)}}@keyframes harbor-wind{0%,100%{transform:skewY(-4deg) scaleX(.95)}50%{transform:skewY(5deg) scaleX(1.03)}}@keyframes harbor-lantern{from{opacity:.75}to{opacity:1;box-shadow:0 0 23px 6px #ffd86b77}}
@media(max-height:710px){.port-object-music{top:31%}.port-object-boosters{top:40%}.port-object-loot{bottom:29%}.port-object-quests{bottom:28%}.context-bubble{max-height:calc(100dvh - 135px)}body[data-view=piano] .piano-audio-controls{bottom:calc(94px + env(safe-area-inset-bottom,0px))}#app .layout.piano .piano-stage{bottom:calc(198px + env(safe-area-inset-bottom,0px))}}
@media(prefers-reduced-motion:reduce){.port-life *,.context-bubble{animation:none!important}.port-object,body[data-view=boutique] .shop-product{transition:none}}body.reduced .port-life *,body.reduced .context-bubble{animation:none!important}
.context-bubble .purchase-detail{padding:6px 0;margin:0;min-height:0;text-align:left}.context-bubble .purchase-detail h3{margin:5px 0;font-size:20px;line-height:1.2}.context-bubble .purchase-detail>strong{font-size:12px}.context-bubble .purchase-detail>p{margin:4px 0;font-size:12px}.context-bubble .purchase-choices{padding:0}.context-bubble .sale-note{padding:0;margin:7px 0}.context-bubble .micro-note{padding:0;margin:6px 0 0}
.context-bubble .purchase-detail{display:block;gap:0}.context-bubble .purchase-detail h3{margin:4px 0}.context-bubble .transaction-total{padding:5px 0}.context-bubble .bubble-provenance{margin-top:4px}
body[data-view=home] .port-companion{z-index:6;left:5%;bottom:calc(290px + env(safe-area-inset-bottom,0px));width:96px;height:138px}
@media(max-height:710px){body[data-view=home] .port-companion{left:5%;bottom:calc(260px + env(safe-area-inset-bottom,0px));width:80px;height:110px}}
body[data-view=home] .port-companion{position:absolute;padding:0;top:auto}body[data-view=home] #port-companion-model{display:block;width:100%;height:100%;pointer-events:none}
/* Keep every control clear of the touch navigation on both phone heights. */
#app .layout.piano .piano-stage{bottom:calc(236px + env(safe-area-inset-bottom,0px))}
body[data-view=piano] .piano-hint{position:absolute;left:8px;right:8px;bottom:calc(196px + env(safe-area-inset-bottom,0px));margin:0;padding:4px 6px;line-height:1.25;max-height:38px;overflow:auto}
body[data-view=piano] .piano-audio-controls{bottom:calc(116px + env(safe-area-inset-bottom,0px))}
body[data-view=piano] .piano-audio-controls~button[data-action=piano-exit]{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
body[data-view=piano] #app .layout.piano .piano-hint{bottom:calc(196px + env(safe-area-inset-bottom,0px));padding:4px 6px;line-height:1.25}
.piano-feedback[data-judgement=miss]{color:#ffac96;text-shadow:0 2px 3px #531e29}