/* Existing app layout stays intact; these rules style bubble jap only. */
.bbj-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 18px}
#app .bbj-modes button{display:flex;align-items:center;gap:9px;min-width:0;width:100%;min-height:82px;padding:13px 10px;border:1px solid #d9c5a1;border-radius:17px;background:linear-gradient(145deg,#fff9ed,#eee3cd);color:#64283a;text-align:left;box-shadow:0 3px 10px #5835200a;font:inherit}
#app .bbj-modes button[data-bbj-open]{background:linear-gradient(145deg,#672c40,#49273c);color:#fff0d1;border-color:#83526a}
.bbj-modes :is(svg,.bbj-entry-symbol){width:33px;height:33px;flex:0 0 33px}.bbj-modes svg{fill:none;stroke:#e3bc79;stroke-width:1.8}.bbj-modes .bbj-entry-symbol{font-size:26px}
.bbj-modes button>span:not(.bbj-entry-symbol){display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}.bbj-modes b{font-size:14px;line-height:1.5;color:inherit}.bbj-modes small{font-size:11px;line-height:1.65;color:inherit;opacity:.88}.bbj-modes i{font-size:22px;font-style:normal}
body.bbj-open{overflow:hidden}
#bbBubbleJap{--bbj-ink:#51293d;--bbj-muted:#756758;box-sizing:border-box;border:0;padding:0;margin:auto;width:min(100%,520px);max-width:100vw;height:min(880px,100dvh);max-height:100dvh;background:#fff6e6;color:var(--bbj-ink);border-radius:23px;font-family:inherit;box-shadow:0 20px 100px #1c122977;overflow:hidden}
#bbBubbleJap::backdrop{background:#170c27bb;backdrop-filter:blur(4px)}
#bbBubbleJap *{box-sizing:border-box}
#bbBubbleJap .bbj-shell{display:flex;flex-direction:column;height:100%;padding-top:env(safe-area-inset-top);background:radial-gradient(ellipse at 50% 48%,#fff9e8 0,#f8ead2 70%,#efe0c7 100%)}
#bbBubbleJap button{font:inherit;cursor:pointer;touch-action:manipulation;min-height:44px;border-radius:12px;max-width:100%;-webkit-tap-highlight-color:transparent}
#bbBubbleJap button:focus-visible{outline:3px solid #b97a26;outline-offset:3px}
#bbBubbleJap button:disabled{cursor:default;opacity:.55}
#bbBubbleJap :is(h2,h3,p){margin:0}
#bbBubbleJap .bbj-head{display:flex;align-items:center;gap:12px;flex:0 0 auto;background:#512638;color:#fff1d8;padding:12px 15px;border-bottom:1px solid #9c7155}
#bbBubbleJap .bbj-head>button{border:1px solid #a77a69;background:#ffffff0c;color:#fff1d8;padding:8px 10px;font-size:12px}
#bbBubbleJap #bbjClose{font-size:24px;padding:0;width:44px}
#bbBubbleJap .bbj-head>div{flex:1;min-width:0}#bbBubbleJap .bbj-head small{font-size:10px;color:#e8cba5;letter-spacing:.04em}#bbBubbleJap .bbj-head h2{color:#fff1d8;font-size:19px;line-height:1.65}
#bbBubbleJap .bbj-summary{flex:0 0 auto;padding:13px 18px 0;background:#fff9ecdf}
#bbBubbleJap .bbj-deity{display:flex;gap:10px;align-items:center}.bbj-deity img{object-fit:contain;flex:0 0 45px}#bbBubbleJap .bbj-deity>div{flex:1;min-width:0}#bbBubbleJap .bbj-deity b{display:block;font-size:17px;line-height:1.7}#bbBubbleJap .bbj-deity span{display:block;font-size:12px;line-height:1.7;color:#756758;overflow-wrap:anywhere;max-height:43px;overflow:auto}#bbBubbleJap #bbjChoose{border:1px solid #c8ae82;background:#fff8e7;color:#653249;font-size:12px;padding:7px 12px}
#bbBubbleJap .bbj-scoreline{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:9px 0 12px}#bbBubbleJap .bbj-scoreline>div>span{display:block;font-size:11px;color:#756758;line-height:1.8}#bbBubbleJap .bbj-scoreline strong{display:block;line-height:1.4;font-weight:700;color:#68283d}#bbBubbleJap #bbjCount{font-size:37px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}#bbBubbleJap .bbj-scoreline strong small{font-size:15px;color:#8a6a52}#bbBubbleJap .bbj-saved{text-align:right;max-width:48%;overflow-wrap:anywhere}#bbBubbleJap #bbjTotal{font-size:22px;color:#31594e;font-variant-numeric:tabular-nums}
#bbBubbleJap .bbj-progress{height:4px;overflow:hidden;border-radius:9px;background:#e6d6b7}#bbBubbleJap .bbj-progress i{display:block;height:100%;width:0;background:#9e6f27;transition:width .15s}
#bbBubbleJap .bbj-arena{flex:1;position:relative;min-height:180px;overflow:hidden;background:radial-gradient(ellipse at 50% 20%,#fff9e5,#f2dcb3);isolation:isolate}
#bbBubbleJap .bbj-arena:before{content:'✧';position:absolute;font:130px Georgia,serif;opacity:.035;top:35%;left:39%;pointer-events:none}
#bbBubbleJap .bbj-welcome,#bbBubbleJap .bbj-complete{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:15px;text-align:center;z-index:2}
#bbBubbleJap .bbj-welcome[hidden],#bbBubbleJap .bbj-complete[hidden],#bbjBubbles[hidden]{display:none!important}
#bbBubbleJap .bbj-welcome>span{display:grid;place-items:center;width:80px;height:80px;background:#f9eacb;border:1px solid #dcc08d;border-radius:50%;box-shadow:0 6px 25px #5d381419}#bbBubbleJap .bbj-welcome svg{fill:none;stroke:#7b3a51;stroke-width:1.5;width:51px;height:51px}#bbBubbleJap .bbj-welcome h3,#bbBubbleJap .bbj-complete h3{font-size:21px;color:#612b40}#bbBubbleJap .bbj-welcome p,#bbBubbleJap .bbj-complete p{font-size:13px;line-height:1.9;color:#79614a}#bbBubbleJap #bbjStart{border:1px solid #6b3045;background:#642d43;color:#fff3d8;padding:10px 23px;font-weight:700;box-shadow:0 4px 12px #642d4322}#bbBubbleJap .bbj-complete>span{font-size:54px;color:#ac7629}
#bbBubbleJap .bbj-bubbles{position:absolute;inset:0;overflow:hidden}
#bbBubbleJap .bbj-bubble{position:absolute;left:clamp(4px,var(--x),calc(100% - var(--size) - 5px));top:100%;width:var(--size);height:var(--size);min-height:58px;border:1px solid #ffffffb0;border-radius:50%;padding:8px;display:grid;place-items:center;color:#fff8ec;font-weight:700;font-size:16px;text-shadow:0 1px 3px #361a1a55;line-height:1.4;box-shadow:inset -5px -8px 14px #0002,inset 6px 7px 15px #fff5,0 3px 8px #54342315;background:radial-gradient(circle at 29% 23%,#ffffff99 0,#ffffff33 13%,#b44d71 50%,#722e50 100%);animation:bbj-rise var(--duration) linear var(--delay) infinite;will-change:transform;user-select:none}
#bbBubbleJap .bbj-bubble:before{content:'';position:absolute;width:27%;height:12%;border-radius:50%;background:#ffffff80;left:20%;top:16%;transform:rotate(-30deg);pointer-events:none}
#bbBubbleJap .bbj-tone-1{background:radial-gradient(circle at 29% 23%,#fff9 0,#fff3 13%,#c79030 55%,#936121 100%)}#bbBubbleJap .bbj-tone-2{background:radial-gradient(circle at 29% 23%,#fff9 0,#fff3 13%,#4c9381 55%,#286253 100%)}#bbBubbleJap .bbj-tone-3{background:radial-gradient(circle at 29% 23%,#fff9 0,#fff3 13%,#8175ae 55%,#514270 100%)}
#bbBubbleJap.bbj-paused .bbj-bubble{animation-play-state:paused}#bbBubbleJap .bbj-bubble.bbj-popped{visibility:hidden;pointer-events:none}
#bbBubbleJap .bbj-controls{flex:0 0 auto;background:#fff9ef;border-top:1px solid #dbc6a1;padding:11px 15px calc(12px + env(safe-area-inset-bottom))}#bbBubbleJap #bbjStatus{font-size:12px;min-height:38px;color:#5b634b;line-height:1.7;text-align:center}#bbBubbleJap .bbj-actions{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:8px;margin-top:7px}#bbBubbleJap .bbj-actions button{border:1px solid #c7ad83;background:#fff8e9;color:#612b40;padding:9px 6px;font-size:13px;font-weight:700}#bbBubbleJap #bbjSave{background:#642d43;color:#fff2d7;border-color:#642d43}#bbBubbleJap .bbj-note{font-size:10px;color:#796c5d;text-align:center;line-height:1.8;margin-top:8px}
@keyframes bbj-rise{from{transform:translate3d(0,75px,0)}to{transform:translate3d(-7px,-650px,0)}}
@media(max-width:550px){#bbBubbleJap{width:100%;height:100dvh;max-height:100dvh;border-radius:0}}
@media(max-height:600px){#bbBubbleJap .bbj-head{padding:6px 12px}#bbBubbleJap .bbj-summary{padding-top:6px}#bbBubbleJap .bbj-deity img{height:36px}#bbBubbleJap .bbj-scoreline{padding:3px 0 6px}#bbBubbleJap .bbj-arena{min-height:130px}#bbBubbleJap .bbj-controls{padding-top:6px}#bbBubbleJap .bbj-note{display:none}#bbBubbleJap #bbjCount{font-size:28px}}
@media(prefers-reduced-motion:reduce){#bbBubbleJap .bbj-bubble{animation:none;top:calc(12% + var(--row)*26%);transform:none;width:58px;height:58px}#bbBubbleJap .bbj-progress i{transition:none}}
