.ball-page{background:#1a140c url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><rect width='8' height='8' fill='%231a140c'/><rect width='1' height='1' fill='%23241812'/></svg>")}
.mystic-shell{background:#d4d0c8;color:#111827;border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #404040;border-bottom:2px solid #404040;padding:12px;margin:12px 0 28px}
.mystic-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.mystic-word{font:900 2rem -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Verdana, Roboto, Helvetica, Arial, sans-serif;letter-spacing:.02em;margin:0;line-height:1}
.mystic-word span{font-weight:900}
.c1{color:#e10600}.c2{color:#ffcc00}.c3{color:#1a3cff}.c4{color:#008a00}.c5{color:#ff6600}.c6{color:#7a00b4}.c7{color:#e10600}.c8{color:#1a3cff}
.mystic-word .yr{color:#111827;font-size:.72em}
.ask-badge{display:inline-block;background:#ff0;color:#111827;font:700 .75rem -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Verdana, Roboto, Helvetica, Arial, sans-serif;padding:2px 6px;border:2px solid #000;animation:ask-blink 1s steps(2,end) infinite}
@keyframes ask-blink{50%{visibility:hidden}}
.sphere-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin:14px 0}
.sphere{position:relative;width:min(280px,78vw);height:min(280px,78vw);border-radius:50%;border:0;padding:0;cursor:pointer;appearance:none;-webkit-appearance:none;background:radial-gradient(circle at 30% 24%,#fff 0 2%,rgba(255,255,255,.55) 3%,#4b5563 12%,#111827 42%,#020617 72%);box-shadow:inset -18px -22px 36px rgba(0,0,0,.8),0 18px 40px rgba(15,23,42,.28);touch-action:manipulation}
dialog{border:2px solid #000;background:#d4d0c8;color:#111827;padding:12px;max-width:min(420px,92vw)}
dialog label{display:block;margin:8px 0;font-weight:700}
dialog input{font:16px -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Verdana, Roboto, Helvetica, Arial, sans-serif;width:100%;min-height:44px;box-sizing:border-box}
.sphere.is-shaking{animation:wobble .7s ease-in-out}
@keyframes wobble{
 0%,100%{transform:rotate(0)}
 15%{transform:rotate(-14deg) translateX(-8px)}
 32%{transform:rotate(12deg) translateX(8px)}
 48%{transform:rotate(-9deg)}
 66%{transform:rotate(6deg)}
 82%{transform:rotate(-3deg)}
}
.face-8{position:absolute;left:50%;top:46%;width:42%;height:42%;transform:translate(-50%,-50%);border-radius:50%;background:#f4f4f4;color:#111;font:700 42px -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Verdana, Roboto, Helvetica, Arial, sans-serif;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 3px #111}
.sphere.is-revealed .face-8{display:none}
.window{position:absolute;left:50%;top:46%;width:58%;height:58%;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;opacity:0;background:radial-gradient(circle at 40% 35%,#1d4eaa 0%,#071433 62%,#020712 100%);box-shadow:inset 0 0 18px #000,0 0 0 3px #111}
.sphere.is-revealed .window{opacity:1}
.bub{position:absolute;border-radius:50%;background:rgba(150,196,255,.35);animation:bub 2.8s linear infinite}
.b1{width:10px;height:10px;left:18%;bottom:10%;animation-delay:0s}
.b2{width:6px;height:6px;left:62%;bottom:6%;animation-delay:.6s}
.b3{width:8px;height:8px;left:40%;bottom:0;animation-delay:1.1s}
.b4{width:5px;height:5px;left:74%;bottom:18%;animation-delay:1.6s}
@keyframes bub{0%{transform:translateY(0);opacity:.15}70%{opacity:.55}100%{transform:translateY(-70px);opacity:0}}
.tri{position:absolute;left:50%;bottom:6%;width:86%;height:74%;opacity:0;transform:translate(-50%,16px) rotate(-8deg)}
#triText{filter:drop-shadow(0 0 1px #9ec2ff)}
.sphere.is-revealed .tri{animation:rise .8s ease forwards}
@keyframes rise{from{opacity:0;transform:translate(-50%,22px) rotate(-12deg)}to{opacity:1;transform:translate(-50%,0) rotate(4deg)}}
.answer-line{min-height:1.4em;font:700 1.05rem -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Verdana, Roboto, Helvetica, Arial, sans-serif;text-align:center;color:#111827;letter-spacing:.04em}
.mode-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.mode-tabs button{flex:1 1 140px;min-height:44px;padding:8px 10px;font:700 .82rem -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Verdana, Roboto, Helvetica, Arial, sans-serif;background:#d4d0c8;color:#111827;cursor:pointer;border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #404040;border-bottom:2px solid #404040}
.mode-tabs button[aria-pressed="true"]{background:#000080;color:#fff;border-color:#111827}
.ask-grid,.custom-box{display:grid;gap:8px;margin:8px 0}
.ask-grid input,.ask-grid select,.custom-box input,.custom-box select{font:16px -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Verdana, Roboto, Helvetica, Arial, sans-serif;padding:8px 10px;min-height:44px;border:2px inset #808080;background:#fff;color:#111827;width:100%;box-sizing:border-box}
.check{display:flex;align-items:center;gap:8px;min-height:44px;font:700 .9rem -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Verdana, Roboto, Helvetica, Arial, sans-serif}
.check input{width:20px;height:20px}
.shake-row{display:flex;flex-wrap:wrap;gap:8px}
.shake-row .btn{min-height:44px}
.odds{font:700 .95rem -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Verdana, Roboto, Helvetica, Arial, sans-serif;background:#fff;border:2px inset #808080;padding:8px}
.odds b.yes{color:#008000}.odds b.maybe{color:#111827}.odds b.no{color:#a00000}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0}
table.log{width:100%;border-collapse:collapse;background:#fff;font:.9rem -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Verdana, Roboto, Helvetica, Arial, sans-serif}
table.log th,table.log td{border:2px solid #808080;padding:6px 8px;text-align:left;vertical-align:top}
table.log th{background:#000080;color:#fff}
.tone-yes{color:#006400;font-weight:700}.tone-maybe{color:#111827;font-weight:700}.tone-no{color:#a00000;font-weight:700}
.custom-list{list-style:none;margin:0;padding:0;max-height:180px;overflow:auto;background:#fff;border:2px inset #808080}
.custom-list li{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:6px 8px;border-bottom:1px solid #c0c0c0;min-height:44px}
.owner-only[hidden]{display:none}
.sync-banner{background:#ffffcc;color:#111827;border:2px solid #000;padding:8px;font-weight:700}
.hint{color:#374151;font-size:.85rem}
@media (max-width:768px){
  table.log,table.log tbody,table.log tr,table.log td{display:block;width:100%}
  table.log thead{display:none}
  table.log tr{margin:0 0 8px;border:2px inset #808080}
  table.log td{border:0;padding:4px 8px}
  table.log td::before{content:attr(data-label) ": ";font-weight:700}
}
@media (prefers-reduced-motion:reduce){
  .ask-badge,.sphere.is-shaking,.bub{animation:none}
  .sphere.is-revealed .tri{animation:none;opacity:1;transform:translate(-50%,0) rotate(0deg)}
}