/* OPTIONS PANEL */
#mid-top-bar{padding:6px 8px 7px;display:flex;justify-content:flex-start;flex-shrink:0;border-bottom:1px solid #2a1020;gap:6px;}
#mid-top-bar #achievements-btn{margin-left:auto;}
#cylinder-name-header{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:18px;font-weight:700;color:#c090a8;cursor:pointer;border-bottom:1px solid #2a1020;transition:color 0.15s;user-select:none;}
#cylinder-name-header .cylinder-name-text{flex:1;min-width:0;}
#cylinder-name-header .opt-close-btn{margin-left:auto;flex-shrink:0;}
#cylinder-owner-name{font-size:22px;text-decoration:underline;}
#cylinder-name-header:hover{color:#f0c0d0;}
#shop-version{position:absolute;bottom:0;right:0;font-size:11px;color:#5a3050;padding:12px 16px;font-weight:700;}
#options-btn{background:linear-gradient(135deg,#2a1040,#1a0828);border:1.5px solid #5a2080;border-radius:8px;padding:5px 14px 6px;font-size:12px;font-weight:700;color:#c090e0;cursor:pointer;transition:background 0.15s,border-color 0.15s,color 0.15s;letter-spacing:0.02em;}
#options-btn:hover{background:linear-gradient(135deg,#3a1860,#240a3c);border-color:#8040c0;color:#e0b0ff;}
#options-panel{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:14px;min-height:0;font-family:'Exo 2',Calibri,sans-serif;}
.opt-section{background:#1e0c18;border:0.5px solid #3a1530;border-radius:10px;padding:12px 14px;}
#mm-options-scroll .opt-section{background:transparent;border-color:transparent;}
#mm-options-scroll{zoom:1.1;}
.opt-section-title{font-size:16px;font-weight:700;color:#c090a8;margin-bottom:10px;letter-spacing:0.04em;}
.opt-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.opt-row:last-child{margin-bottom:0;}
.opt-label{font-size:14px;font-weight:700;color:#a07088;min-width:90px;}
.opt-close-btn{background:#3a0808;border:1px solid #7a1010;border-radius:6px;color:#ff6060;font-size:17px;font-weight:700;cursor:pointer;padding:3px 9px;line-height:1;transition:background 0.12s,border-color 0.12s;margin-left:auto;}
.opt-close-btn:hover{background:#5a0c0c;border-color:#cc2020;}
.opt-header{display:flex;align-items:center;margin-bottom:14px;}
.opt-header-title{font-size:18px;font-weight:700;color:#f0c0d0;}
.opt-export-box{width:100%;background:#110608;border:0.5px solid #4a2035;border-radius:6px;padding:7px 10px;font-size:12px;color:#c090a8;font-family:monospace;resize:none;height:56px;cursor:text;}
.opt-copy-btn{background:#2a1040;border:0.5px solid #7040c0;border-radius:6px;padding:5px 12px;font-size:13px;font-weight:700;color:#c0a0f0;cursor:pointer;white-space:nowrap;flex-shrink:0;}
.opt-copy-btn:hover{background:#4020a0;}
.opt-import-btn{background:#10302a;border-color:#30a080;color:#80f0c0;}
.opt-import-btn:hover{background:#206050;}
.moan-row{display:flex;align-items:center;gap:10px;margin-bottom:0;}
.moan-radio{accent-color:#c060a0;width:15px;height:15px;cursor:pointer;flex-shrink:0;}
.moan-label-a{font-size:16px;font-weight:500;color:#4080e0;}
.moan-label-b{font-size:16px;font-weight:500;color:#e04040;}
.moan-label-x{font-size:16px;font-weight:500;color:#888;}
.moan-slider{flex:1;accent-color:#c060a0;cursor:pointer;}
.moan-vol{font-size:13px;color:#a07088;min-width:32px;text-align:right;}
/* Radius must reach past the top of the viewport on narrow/short windows.
   The center sits ~100%+50px below the column's bottom edge, which on small
   viewports pushed the circle's upper edge back into the column mid-way —
   the same fix was already applied to .mm-sunburst (see menu.css). */
/* The ray pattern is now pre-baked into a bitmap once at load (see
   _bakeSunbursts in display.js) and applied as a static background-image, so
   the rotate animation composites a cached texture instead of re-rasterizing a
   40-stop conic-gradient over a multi-thousand-pixel layer every frame.
   Size cut 500vmax→250vmax (¼ the layer memory) so the browser actually GPU-
   promotes the layer, and will-change:transform makes the rotation compositor-
   only. Radius 125vmax still covers the column from the off-screen center. */
.col-sunburst{position:absolute;top:calc(100% + 50px);width:250vmax;height:250vmax;pointer-events:none;z-index:0;
  background-size:100% 100%;background-repeat:no-repeat;
  will-change:transform;
  border-radius:50%;
}
.col-sunburst--left{left:50%;animation:sunburstRotate 25s linear infinite, sunburstPulse 4s ease-in-out infinite;}
.col-sunburst--mid{left:calc(-50% - 8px);animation:sunburstRotate 25s linear infinite, sunburstPulseMid 4s ease-in-out infinite;}
.col-sunburst--right{left:calc(-150% - 16px);animation:sunburstRotate 25s linear infinite, sunburstPulseRight 4s ease-in-out infinite;}
@keyframes sunburstRotate{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}
/* Dropped filter:blur() from these three — sunbursts are ~250vmax, so a
   blur filter animation forces a full-viewport repaint every frame.
   Opacity-only pulse composites on the GPU and looks nearly identical. */
@keyframes sunburstPulse{0%,100%{opacity:0.6;}50%{opacity:1;}}
@keyframes sunburstPulseMid{0%,100%{opacity:0.3;}50%{opacity:0.5;}}
@keyframes sunburstPulseRight{0%,100%{opacity:0.15;}50%{opacity:0.25;}}
#censor-japanese canvas{width:100%;height:100%;image-rendering:pixelated;}
/* SHOP ADS */
#shop-ad-slot{flex-shrink:0;}
.shop-ad{position:relative;margin:6px 8px;border-radius:10px;padding:14px 30px 14px 14px;animation:fadeInScale 0.3s ease;overflow:hidden;}
.shop-ad-close{position:absolute;top:6px;right:7px;background:#3a0808;border:1px solid #7a1010;border-radius:6px;color:#ff6060;font-size:14px;font-weight:700;cursor:pointer;padding:3px 9px;line-height:1;z-index:2;transition:background 0.12s,border-color 0.12s;}
.shop-ad-close:hover{background:#5a0c0c;border-color:#cc2020;}
.shop-ad-tag{position:absolute;top:5px;left:8px;font-size:9px;font-weight:700;color:rgba(255,255,255,0.35);letter-spacing:0.08em;text-transform:uppercase;}
.shop-ad-headline{font-size:16px;font-weight:700;margin-top:8px;line-height:1.3;}
.shop-ad-headline-grass{font-size:19px;}
.shop-ad-body{font-size:13px;font-weight:700;margin-top:5px;line-height:1.5;opacity:0.85;}
.shop-ad-cta{display:inline-block;margin-top:8px;padding:4px 14px;border-radius:6px;font-size:13px;font-weight:700;cursor:pointer;border:none;transition:filter 0.15s;}
.shop-ad-cta:hover{filter:brightness(1.2);}
.shop-ad-emoji{font-size:36px;margin-bottom:4px;}
.opt-section-divider{border:none;border-top:1px solid #3a1530;margin:8px 0 10px;opacity:0.6;}
.opt-toggle-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.opt-toggle-row:last-child{margin-bottom:0;}
.opt-toggle-label{font-size:14px;color:#c090a8;flex:0 0 150px;font-weight:700;}
.opt-toggle-btn{background:#2a1040;border:0.5px solid #6040a0;border-radius:6px;padding:4px 12px;font-size:13px;font-weight:700;color:#a080c0;cursor:pointer;transition:all 0.15s;min-width:50px;text-align:center;}
.opt-toggle-btn:hover{background:#3a1560;}
.opt-toggle-btn.active{background:#5020b0;border-color:#a080e0;color:#f0e0ff;}
.opt-seg-group{display:flex;gap:0;border-radius:6px;overflow:hidden;border:0.5px solid #6040a0;flex-shrink:0;}
.opt-seg-group .opt-seg-btn{flex-shrink:0;}
.opt-seg-btn{background:#2a1040;border:none;border-right:0.5px solid #6040a0;padding:4px 10px;font-size:13px;font-weight:700;color:#a080c0;cursor:pointer;transition:all 0.15s;}
.opt-seg-btn:last-child{border-right:none;}
.opt-seg-btn:hover{background:#3a1560;}
.opt-seg-btn.active{background:#5020b0;color:#f0e0ff;}
.opt-seg-btn-trace-active{color:#fff!important;box-shadow:0 0 8px 2px rgba(255,40,40,0.7),0 0 18px 5px rgba(255,40,40,0.3);background:#cc1111!important;}
.opt-trace-warning{font-size:13px;font-weight:700;color:#ff6464;text-shadow:0 0 6px rgba(255,40,40,0.5);letter-spacing:0.02em;white-space:nowrap;}
.cheater-section{background:#1a0808;border:0.5px solid #5a1010;border-radius:10px;padding:12px 14px;}
.cheater-title{font-size:16px;font-weight:500;color:#e04040;margin-bottom:10px;letter-spacing:0.04em;}
.cheat-btn{background:#2a0808;border:0.5px solid #8a2020;border-radius:6px;padding:6px 12px;font-size:14px;color:#e05050;cursor:pointer;transition:background 0.15s;width:100%;margin-bottom:6px;text-align:left;}
.cheat-btn:hover{background:#4a1010;}
.cheat-btn:last-child{margin-bottom:0;}
.reset-btn{background:#3a0505;border:1.5px solid #cc1010;border-radius:8px;padding:9px 14px;font-size:16px;font-weight:500;color:#ff4040;cursor:pointer;transition:all 0.15s;width:100%;margin-top:4px;}
.reset-btn:hover{background:#5a0808;border-color:#ff2020;}

/* DEBUG SECTION */
.dbg-subhead{font-size:13px;font-weight:700;color:#b090c8;margin:6px 0 3px;letter-spacing:0.03em;}
.dbg-group{background:#130a1c;border:0.5px solid #2a1540;border-radius:6px;padding:5px 8px;margin-bottom:2px;}
.dbg-row{display:flex;justify-content:space-between;align-items:center;padding:2px 0;font-size:13px;border-bottom:0.5px solid #1e0e28;}
.dbg-row:last-child{border-bottom:none;}
.dbg-label{color:#806090;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dbg-val{font-family:monospace;font-size:13px;color:#d0a0f0;min-width:70px;text-align:right;flex-shrink:0;}
.dbg-indent .dbg-label{color:#5a4068;padding-left:10px;}
.dbg-subtotal .dbg-label,.dbg-subtotal .dbg-val{color:#c0a0e0;font-weight:700;}
.dbg-total .dbg-label,.dbg-total .dbg-val{color:#f0d0ff;font-weight:700;font-size:14px;}
.dbg-pos{color:#60e880!important;}
.dbg-neg{color:#ff6060!important;}
.dbg-neutral{color:#666680!important;}