/* ============================================================
   NIXIE PLANCK - Stylesheet
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: #0a0806;
    color: #ffb450;
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* ============================================================
   PAGE TITLE
   ============================================================ */
#page-title {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 16px;
    padding: 12px 0 4px;
}
#page-title h1 {
    font-size: 38px;
    letter-spacing: 8px;
    color: #ffb450;
    text-shadow: 0 0 16px rgba(255,160,50,0.4), 0 0 40px rgba(255,120,20,0.15);
}
#page-title p {
    font-size: 22px;
    letter-spacing: 3px;
    color: #c0a870;
    font-style: italic;
}

/* ============================================================
   TOOLBAR (top-right)
   ============================================================ */
#toolbar {
    position: fixed; top: 8px; right: 12px; z-index: 300;
    display: flex; gap: 6px; align-items: center;
}
#toolbar button {
    background: rgba(10,8,6,0.7); border: 1px solid #4a3a28;
    color: #a08060; font-size: 20px; cursor: pointer;
    border-radius: 4px; padding: 4px 10px; line-height: 1;
    transition: all 0.2s; backdrop-filter: blur(4px);
}
#toolbar button:hover { color: #ffb450; border-color: #ffb450; }
#manual-btn {
    background: rgba(10,8,6,0.7); border: 1px solid #4a3a28;
    color: #a08060; font-size: 16px; cursor: pointer; font-weight: bold;
    border-radius: 4px; padding: 4px 10px; line-height: 1;
    transition: all 0.2s; backdrop-filter: blur(4px);
    text-decoration: none; display: inline-block;
}
#manual-btn:hover { color: #ffb450; border-color: #ffb450; }

/* Dropdown menus */
#settings-wrap, #backup-wrap { position: relative; }
#settings-menu, #backup-menu {
    position: absolute; right: 0; top: 100%; margin-top: 6px;
    background: #141210; border: 1px solid #32281e; border-radius: 4px;
    padding: 6px 12px; display: flex; flex-direction: column; gap: 6px;
    z-index: 50; white-space: nowrap; font-size: 12px; color: #8c7050;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
#settings-menu.hidden, #backup-menu.hidden { display: none; }
#settings-menu label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
#settings-menu input[type="checkbox"] { accent-color: #ffb450; cursor: pointer; }
#backup-menu button {
    background: #1a1410; border: 1px solid #32281e; color: #8c7050;
    font-family: inherit; font-size: 12px; padding: 5px 14px;
    border-radius: 3px; cursor: pointer;
}
#backup-menu button:hover { border-color: #ffb450; color: #ffb450; }

/* Pause / Autoplay buttons */
#pause-btn { font-size: 16px !important; }
#autoplay-btn { font-size: 12px !important; letter-spacing: -4px; }
#restart-btn { font-size: 16px !important; }
#restart-btn:hover { color: #ff4444 !important; border-color: #ff4444 !important; }

/* AI Context overlay */
#ai-overlay {
    position: fixed; inset: 0; z-index: 500;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
}
#ai-panel {
    background: #141210;
    border: 1px solid #3a3020;
    border-radius: 8px;
    padding: 24px 32px;
    max-width: 640px;
    width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}
#ai-title {
    font-size: 18px;
    color: #ffcc66;
    letter-spacing: 4px;
    text-align: center;
    font-weight: bold;
}
#ai-desc {
    font-size: 12px;
    color: #bba880;
    text-align: center;
}
#ai-context {
    width: 100%;
    height: 300px;
    background: #0a0806;
    color: #c0a878;
    border: 1px solid #3a3020;
    border-radius: 4px;
    padding: 12px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.5;
    resize: vertical;
}
#ai-copy-btn {
    align-self: center;
    padding: 8px 28px;
    background: linear-gradient(180deg, #3a3020, #2a2010);
    border: 1px solid #5a4a30;
    border-radius: 4px;
    color: #ffcc66;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.2s;
}
#ai-copy-btn:hover {
    border-color: #ffb450;
    box-shadow: 0 0 8px rgba(255,160,50,0.3);
}
#ai-close {
    position: absolute;
    top: 8px; right: 12px;
    background: none; border: none;
    color: #8a7a60; font-size: 24px;
    cursor: pointer;
}
#ai-close:hover { color: #ffcc66; }

/* Pause overlay */
#autoplay-overlay,
#pause-overlay {
    position: fixed; inset: 0; z-index: 500;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
#autoplay-panel,
#pause-panel {
    position: relative;
    background: #141210;
    border: 1px solid #3a3020;
    border-radius: 8px;
    padding: 32px 40px;
    min-width: 480px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.8);
}
#autoplay-title,
#pause-title {
    font-size: 24px;
    letter-spacing: 6px;
    color: #ff8c20;
    text-shadow: 0 0 12px rgba(255,140,30,0.4);
}
#autoplay-close,
#pause-close {
    position: absolute;
    top: 8px; right: 12px;
    background: none; border: none;
    color: #9a8a60; font-size: 24px;
    cursor: pointer; line-height: 1;
    transition: color 0.2s;
}
#autoplay-close:hover,
#pause-close:hover { color: #ffb450; }
.overlay-footer {
    font-size: 11px;
    color: #ff8c20;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(255,140,30,0.4);
    opacity: 0.7;
}
#autoplay-ad,
#pause-ad {
    width: 100%;
    max-width: 640px;
    aspect-ratio: 16/9;
    background: #0a0806;
    border: 1px solid #2a2218;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2a2218;
    font-size: 12px;
}

/* ============================================================
   LAYOUT (instrument + console side by side)
   ============================================================ */
#layout {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    min-height: 100vh;
}

/* ============================================================
   SHOP (left column)
   ============================================================ */
#shop {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
    border-right: 1px solid #1a1510;
    padding-right: 0;
}
#shop-header {
    text-align: center;
    padding: 8px 12px 6px;
    border-bottom: 1px solid #3a3020;
}
#shop-header h3 {
    font-size: 12px; letter-spacing: 4px; color: #c0a060;
    margin-bottom: 4px;
    text-shadow: 0 0 6px rgba(200,160,80,0.3);
}
#boson-balance {
    font-size: 16px;
    font-weight: bold;
    color: #ffcc66;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(255,200,80,0.4);
}
#shop-columns {
    display: flex;
    flex-direction: row;
    gap: 0;
}
#shop-items, #shop-available, #shop-owned {
    width: 160px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
}
#shop-available {
    border-left: 1px solid #3a3020;
}
#shop-owned {
    border-left: 1px solid #3a3020;
}
#shop-items .shop-buy {
    opacity: 0.4;
    pointer-events: none;
}
#shop h4 {
    font-size: 10px; letter-spacing: 3px; color: #b09868;
    text-align: center; margin-bottom: 2px;
    text-transform: uppercase;
}
.shop-icon-farm { font-size: 22px; color: #ffcc33; }

/* Manual Fan */
#fan-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 6px 12px;
}
#fan-visual {
    width: 60px;
    height: 60px;
}
#fan-frame {
    width: 60px;
    height: 60px;
    background: #222;
    border: 2px solid #333;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 2px 4px rgba(0,0,0,0.5);
}
/* Corner mounts */
#fan-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 5px 5px, #444 2px, transparent 2px),
        radial-gradient(circle at calc(100% - 5px) 5px, #444 2px, transparent 2px),
        radial-gradient(circle at 5px calc(100% - 5px), #444 2px, transparent 2px),
        radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), #444 2px, transparent 2px);
    z-index: 2;
    pointer-events: none;
}
#fan-blades {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
}
.fan-blade {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40%;
    height: 6px;
    background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 50%, #333 100%);
    border-radius: 0 4px 4px 0;
    transform-origin: 0% 50%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.fan-blade:nth-child(1) { transform: rotate(0deg); }
.fan-blade:nth-child(2) { transform: rotate(51.4deg); }
.fan-blade:nth-child(3) { transform: rotate(102.8deg); }
.fan-blade:nth-child(4) { transform: rotate(154.3deg); }
.fan-blade:nth-child(5) { transform: rotate(205.7deg); }
.fan-blade:nth-child(6) { transform: rotate(257.1deg); }
.fan-blade:nth-child(7) { transform: rotate(308.6deg); }
#fan-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #555, #333 60%, #222);
    border: 1px solid #444;
    z-index: 1;
}
/* Fan lever pump */
#fan-lever-wrap {
    cursor: pointer;
    position: relative;
    width: 28px;
    height: 55px;
    user-select: none;
    -webkit-user-select: none;
}
#fan-lever-base {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 28px;
    height: 10px;
    background: linear-gradient(180deg, #666 0%, #444 50%, #333 100%);
    border: 1px solid #222;
    border-radius: 2px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.5);
    z-index: 2;
}
#fan-lever-arm {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 40px;
    background: linear-gradient(90deg, #888 0%, #bbb 30%, #aaa 50%, #777 100%);
    border: 1px solid #555;
    border-radius: 2px;
    z-index: 1;
    box-shadow:
        -1px 0 1px rgba(0,0,0,0.3),
        1px 0 1px rgba(255,255,255,0.1);
}
#fan-lever-arm.pumped {
    animation: lever-pump 0.25s ease-out;
}
@keyframes lever-pump {
    0%   { transform: translateX(-50%) translateY(0); }
    40%  { transform: translateX(-50%) translateY(12px); }
    100% { transform: translateX(-50%) translateY(0); }
}
#fan-lever-grip {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 10px;
    background: linear-gradient(180deg, #555 0%, #333 50%, #444 100%);
    border: 1px solid #222;
    border-radius: 3px;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.4);
}
#fan-lever-wrap:hover #fan-lever-grip {
    background: linear-gradient(180deg, #666 0%, #444 50%, #555 100%);
}
.shop-icon-fan { font-size: 20px; }

/* ---- RotaLepton (manual generator) ---- */
.shop-icon-rota { font-size: 20px; }

.rota-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}
.rota-crank-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.rota-dynamo-body {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #555, #888 30%, #aaa 50%, #888 70%, #555);
    border-radius: 50%;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.6),
        inset 0 1px 2px rgba(255,255,255,0.3),
        inset 0 -1px 2px rgba(0,0,0,0.3);
    z-index: 3;
}
.rota-crank-wheel {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid #666;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.5),
        inset 0 1px 2px rgba(255,255,255,0.1);
}
.rota-spoke {
    position: absolute;
    left: 50%;
    top: 2px;
    width: 2px;
    height: 44px;
    margin-left: -1px;
    background: linear-gradient(180deg, #777, #555);
    border-radius: 1px;
}
.rota-spoke-2 { transform: rotate(60deg); }
.rota-spoke-3 { transform: rotate(120deg); }
.rota-crank-handle {
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #aa6622, #cc8833 40%, #ddaa55 60%, #cc8833);
    border-radius: 50%;
    border: 1px solid #885511;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.5),
        inset 0 1px 1px rgba(255,255,255,0.3);
    transition: transform 0.1s;
}
.rota-crank-handle.pumped {
    animation: rota-pump 0.15s ease-out;
}
@keyframes rota-pump {
    0%   { transform: translateY(-50%) scale(1); }
    50%  { transform: translateY(-50%) scale(1.3); }
    100% { transform: translateY(-50%) scale(1); }
}
.rota-axle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at 35% 35%, #ccc, #888 50%, #555);
    border-radius: 50%;
    z-index: 4;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.rota-crank-wrap:hover .rota-crank-handle {
    background: linear-gradient(135deg, #cc8833, #ddaa55 40%, #eebb66 60%, #ddaa55);
}
.rota-crank-wrap:active .rota-crank-handle {
    transform: translateY(-50%) scale(0.9);
}

/* Farm units container */
#farm-units {
    display: flex;
    flex-direction: column;
}
#shop-owned h3 {
    color: #60a060;
    text-shadow: 0 0 6px rgba(80,160,80,0.3);
}
.shop-sell {
    padding: 5px 18px;
    background: linear-gradient(180deg, #102a18, #081a10);
    border: 1px solid #2a4a30;
    border-radius: 3px;
    color: #60d080;
    font-family: inherit; font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.shop-sell:hover {
    border-color: #50ff80; color: #50ff80;
    box-shadow: 0 0 6px rgba(50,255,100,0.2);
}
.shop-sell:active {
    transform: scale(0.95);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}
#shop-items .shop-item, #shop-available .shop-item, #shop-owned .shop-item, #bonus .bonus-item {
    display: none;
}
#shop-items .shop-item.shown, #shop-available .shop-item.shown, #shop-owned .shop-item.shown, #bonus .bonus-item.shown {
    display: block;
}
.shop-item {
    background: linear-gradient(180deg, #2a2520 0%, #1e1a16 100%);
    border: 1px solid #55483a;
    border-radius: 5px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color 0.2s;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 4px rgba(0,0,0,0.5);
}
.shop-item:hover { border-color: #7a6848; }
.shop-icon {
    font-size: 26px;
    color: #cc2222;
    text-shadow: 0 0 8px rgba(200,20,20,0.4);
}
.shop-icon-blue {
    color: #2255aa;
    text-shadow: 0 0 8px rgba(40,80,200,0.4);
}
.shop-icon-prime {
    font-family: 'Georgia', serif;
    font-style: italic;
    color: #88aa44;
    text-shadow: 0 0 8px rgba(130,170,60,0.4);
}
.shop-item.prime-off .shop-icon-prime {
    color: #444;
    text-shadow: none;
}
.shop-item.prime-off .shop-name,
.shop-item.prime-off .shop-desc {
    opacity: 0.45;
}
.shop-icon-deca {
    color: #ff4422;
    text-shadow: 0 0 10px rgba(255,50,20,0.6), 0 0 20px rgba(255,20,10,0.3);
}
.shop-name {
    font-size: 13px; color: #c0a070;
    letter-spacing: 1px; font-weight: bold;
}
.shop-desc {
    font-size: 10px; color: #bba880;
    text-align: center; line-height: 1.3;
}
.shop-price {
    font-size: 11px; color: #ff9955;
    letter-spacing: 0.5px;
    font-weight: bold;
}
.shop-buy {
    padding: 5px 18px;
    background: linear-gradient(180deg, #2a2010, #1a1408);
    border: 1px solid #4a3a20;
    border-radius: 3px;
    color: #e8c080;
    font-family: inherit; font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.shop-buy:hover {
    border-color: #ffb450; color: #ffb450;
    box-shadow: 0 0 6px rgba(255,160,50,0.2);
}
.shop-buy:active {
    transform: scale(0.95);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}
.shop-buy.disabled {
    opacity: 0.3; cursor: not-allowed;
    pointer-events: none;
}
.shop-item.owned {
    border-color: #2a4a30;
}
.shop-item.recyclable {
    position: relative;
}
.shop-item.recyclable::before {
    content: '♻';
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 13px;
    color: #30b050;
    z-index: 1;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    filter: drop-shadow(0 0 2px rgba(40,180,60,0.3));
}
.shop-item.owned .shop-buy { display: none; }
.shop-item.owned::after {
    content: none;
}

/* ============================================================
   BONUS (left of shop)
   ============================================================ */
#bonus {
    width: 160px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    border-right: 1px solid #1a1510;
    padding-right: 12px;
}
#bonus h3 {
    font-size: 12px; letter-spacing: 4px; color: #c0a060;
    text-align: center; margin-bottom: 4px;
    text-shadow: 0 0 6px rgba(200,160,80,0.3);
}
.bonus-item {
    position: relative;
}
.bonus-item.locked {
    pointer-events: none;
}
.shop-icon-decamatic {
    font-size: 24px;
    transition: color 0.4s, text-shadow 0.4s;
}
.bonus-item.locked .shop-icon-decamatic {
    color: #886644;
    text-shadow: 0 0 4px rgba(120,80,40,0.3);
}
.bonus-item.unlocked .shop-icon-decamatic {
    color: #44cc88;
    text-shadow: 0 0 8px rgba(60,200,120,0.5);
}
.bonus-status {
    font-size: 11px;
    letter-spacing: 0.5px;
    text-align: center;
    font-weight: bold;
}
.bonus-item.locked .bonus-status {
    color: #ff9955;
}
.bonus-unlock-hint {
    font-size: 8px;
    color: #ccbb88;
    font-style: normal;
    text-align: center;
    line-height: 1.3;
}
.bonus-item.unlocked .bonus-unlock-hint {
    display: none;
}
.bonus-item.unlocked .bonus-status {
    color: #44cc88;
}
.shop-icon-multiplanck {
    font-size: 28px;
    transition: color 0.4s, text-shadow 0.4s;
}
.bonus-item.locked .shop-icon-multiplanck {
    color: #886644;
    text-shadow: 0 0 4px rgba(120,80,40,0.3);
}
.bonus-item.unlocked .shop-icon-multiplanck {
    color: #ff6644;
    text-shadow: 0 0 8px rgba(255,80,40,0.5);
}
.shop-icon-multilock {
    font-size: 24px;
    transition: color 0.4s, text-shadow 0.4s;
}
.bonus-item.locked .shop-icon-multilock {
    color: #886644;
    text-shadow: 0 0 4px rgba(120,80,40,0.3);
}
.bonus-item.unlocked .shop-icon-multilock {
    color: #44aacc;
    text-shadow: 0 0 8px rgba(60,160,200,0.5);
}
.shop-icon-constboost {
    font-size: 26px;
    font-family: 'Georgia', serif;
    font-style: italic;
    transition: color 0.4s, text-shadow 0.4s;
}
.bonus-item.locked .shop-icon-constboost {
    color: #886644;
    text-shadow: 0 0 4px rgba(120,80,40,0.3);
}
.bonus-item.unlocked .shop-icon-constboost {
    color: #cc88ff;
    text-shadow: 0 0 8px rgba(200,120,255,0.5);
}

/* ============================================================
   DECAMATIC SWITCH (bat-handle toggle, industrial style)
   ============================================================ */
/* DecaPulse content: dot-matrix + switch side by side */
#decapulse-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
#decamatic-switch-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0 6px;
}
#decamatic-switch-wrap.locked {
    pointer-events: none;
}
#decamatic-switch-wrap.locked #decamatic-plate,
#decamatic-switch-wrap.locked .decamatic-label-auto {
    opacity: 0.5;
}
.decamatic-label-auto {
    font-family: 'Segoe Script', 'Comic Sans MS', cursive;
    font-style: italic;
    font-size: 9px;
    font-weight: bold;
    color: #777;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 -0.5px 0 rgba(0,0,0,0.3);
    margin-bottom: 4px;
}
/* Metal faceplate */
#decamatic-plate {
    position: relative;
    width: 22px;
    height: 34px;
    background: linear-gradient(180deg, #c8c0b0 0%, #b0a890 40%, #a09878 100%);
    border: 1px solid #6a6050;
    border-radius: 2px;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 0 rgba(0,0,0,0.15);
    cursor: pointer;
    overflow: visible;
}
/* Collar / bezel around the bat pivot */
#decamatic-collar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 40%, #999, #555);
    border: 1px solid #444;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
    z-index: 1;
}
/* Bat shadow on the plate */
#decamatic-bat-shadow {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translateX(-50%) rotate(180deg);
    transform-origin: bottom center;
    width: 4px;
    height: 18px;
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
    filter: blur(2px);
    z-index: 0;
}
/* The bat lever — pivot at bottom (collar), extends upward by default */
#decamatic-bat {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translateX(-50%) rotate(180deg);
    transform-origin: bottom center;
    width: 5px;
    height: 18px;
    background: linear-gradient(90deg, #aaa 0%, #ddd 30%, #ccc 50%, #999 100%);
    border-radius: 2px;
    box-shadow:
        -1px 0 1px rgba(0,0,0,0.3),
        1px 0 1px rgba(255,255,255,0.2);
    z-index: 2;
}
/* Bat tip (flattened end) */
#decamatic-bat-tip {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 6px;
    background: linear-gradient(180deg, #c0c0c0 0%, #aaa 50%, #888 100%);
    border-radius: 2px 2px 1px 1px;
    border: 1px solid #777;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
/* Active state (AUTO): bat flipped up — rotate back to 0deg (pointing up) */
#decamatic-switch-wrap.active #decamatic-bat {
    transform: translateX(-50%) rotate(0deg);
}
#decamatic-switch-wrap.active #decamatic-bat-shadow {
    transform: translateX(-50%) rotate(0deg);
}
/* Label */
#decapulse-label, #decamatic-switch-label {
    display: none;
}
#decamatic-switch-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* DecaMatic jewel pilot light */
#decamatic-led {
}
.jewel-bezel {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ccc 0%, #aaa 20%, #888 50%, #999 80%, #bbb 100%);
    border: 1px solid #555;
    padding: 2px;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 0 rgba(0,0,0,0.2);
}
.jewel-gem {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: background 0.2s, box-shadow 0.2s;
}
/* Off state */
#decamatic-led.off .jewel-gem {
    background: radial-gradient(circle at 40% 35%, #553322, #331108 60%, #220800 100%);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}
/* Facet highlight (always visible) */
.jewel-gem::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 2px;
    width: 5px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.3), transparent);
}
.jewel-gem::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 1px;
    right: 1px;
    bottom: 3px;
    background:
        linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%),
        linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);
}
/* On state */
#decamatic-led.on .jewel-gem {
    background: radial-gradient(circle at 40% 35%, #ff8844, #ee4411 40%, #cc2200 70%, #881100 100%);
    box-shadow:
        inset 0 1px 2px rgba(255,200,150,0.3),
        0 0 6px rgba(255,80,20,0.7),
        0 0 14px rgba(255,60,10,0.4),
        0 0 24px rgba(255,40,0,0.2);
}
}

/* ============================================================
   OPTION INDICATORS (between indicators and multiplanck)
   ============================================================ */
#instrument #sect-options {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px;
    width: 100%;
    flex-wrap: nowrap !important;
}
/* Shimmer animations (used by joker flags) */
@keyframes icon-shimmer-red {
    0%, 100% { text-shadow: 0 0 6px rgba(255,30,30,0.7), 0 0 14px rgba(255,0,0,0.3); }
    50% { text-shadow: 0 0 10px rgba(255,50,50,1), 0 0 22px rgba(255,10,10,0.5); }
}
@keyframes icon-shimmer-blue {
    0%, 100% { text-shadow: 0 0 6px rgba(40,100,255,0.7), 0 0 14px rgba(20,60,255,0.3); }
    50% { text-shadow: 0 0 10px rgba(60,130,255,1), 0 0 22px rgba(30,80,255,0.5); }
}
@keyframes joker-consume {
    0% { transform: scale(1); }
    30% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 0.5; }
}

/* ============================================================
   INSTRUMENT (metal lab enclosure)
   ============================================================ */
#instrument {
    background: linear-gradient(180deg, #6e6e6e 0%, #5c5c5c 2%, #4e4e4e 50%, #444 98%, #383838 100%);
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    padding: 0;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 8px 32px rgba(0,0,0,0.7);
    position: relative;
    overflow: visible;
    width: 420px;
    flex-shrink: 0;
}
#instrument::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 4px);
    pointer-events: none; z-index: 1;
    border-radius: 6px;
    overflow: hidden;
}

/* Panels — industrial rack-mount look */
.panel {
    position: relative;
    border-bottom: 2px solid #222;
    border-top: 1px solid rgba(255,255,255,0.06);
    z-index: 2;
}
.panel:first-child { border-top: none; }
.panel:last-child { border-bottom: none; }

/* UnitOrder: drag-and-drop reordering */
.unit-order-enabled > .panel:not(.hidden) { cursor: grab; }
.unit-order-enabled > .panel:not(.hidden):active { cursor: grabbing; }

.panel-dragging-source {
    opacity: 0;
    pointer-events: none;
    height: 0 !important;
    overflow: hidden;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.panel-ghost {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.85;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,180,60,0.3);
    border-radius: 2px;
    transform: scale(1.02);
}

.panel-placeholder {
    border: 2px dashed rgba(255,180,60,0.45);
    background: rgba(255,180,60,0.05);
    border-radius: 2px;
    box-sizing: border-box;
}

.shop-icon-unitorder {
    font-size: 1.3em;
    line-height: 1;
}

/* UnitOrder panel */
#unitorder-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 4px 8px;
}

/* Vintage slider switch */
#unitorder-switch {
    cursor: pointer;
    padding: 4px;
}

#unitorder-track {
    position: relative;
    width: 44px;
    height: 24px;
    background: linear-gradient(180deg, #3a3530 0%, #2a2520 40%, #1a1510 100%);
    border: 1px solid #555;
    border-radius: 3px;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.7),
        inset 0 -1px 0 rgba(255,255,255,0.05),
        0 1px 2px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
}

#unitorder-knob {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 22px;
    height: 18px;
    border-radius: 2px;
    background: linear-gradient(180deg, #d0c8b8 0%, #b8b0a0 25%, #a8a090 50%, #989080 75%, #b0a898 100%);
    border: 1px solid #6a6050;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.5),
        inset 0 -1px 0 rgba(0,0,0,0.15);
    transition: left 0.15s ease-in-out;
}

/* Knob grip lines */
#unitorder-knob::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 10px;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0,0,0,0.15) 2px,
        rgba(0,0,0,0.15) 3px
    );
}

/* ON state */
#unitorder-switch.on #unitorder-knob {
    left: 18px;
}

/* UnitOrder LED */
#unitorder-led {
    flex-shrink: 0;
}

#unitorder-led.off .jewel-gem {
    background: radial-gradient(circle at 40% 35%, #335533, #112211 60%, #081008 100%);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}

#unitorder-led.on .jewel-gem {
    background: radial-gradient(circle at 40% 35%, #66ff66, #22cc22 40%, #11aa11 70%, #008800 100%);
    box-shadow:
        inset 0 1px 2px rgba(150,255,150,0.3),
        0 0 6px rgba(50,220,50,0.7),
        0 0 14px rgba(30,200,30,0.4),
        0 0 24px rgba(20,180,20,0.2);
}

#panel-jokers {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}
#panel-jokers #sect-options {
    flex-wrap: nowrap;
}

/* Screws — positioned in corners with variable rotation */
.screw {
    width: 10px; height: 10px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #999, #444);
    border: 1px solid #333;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.05);
    position: absolute;
    z-index: 5;
}
.screw::after {
    content: ''; position: absolute; top: 50%; left: 1px; right: 1px;
    height: 1px; background: #333;
    transform: translateY(-50%) rotate(var(--rot, 0deg));
}
.screw::before {
    content: ''; position: absolute; top: 50%; left: 1px; right: 1px;
    height: 1px; background: #555;
    transform: translateY(-50%) rotate(calc(var(--rot, 0deg) + 90deg));
}
.screw.tl { top: 5px; left: 6px; }
.screw.tr { top: 5px; right: 6px; }
.screw.bl { bottom: 5px; left: 6px; }
.screw.br { bottom: 5px; right: 6px; }

/* Screw hole (visible when unscrewed) */
.screw-hole {
    width: 10px; height: 10px; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #1a1816 0%, #2a2520 60%, #3a3530 100%);
    border: 1px solid #222;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8), inset 0 0 1px rgba(0,0,0,0.9);
    position: absolute;
    z-index: 4;
    display: none;
}
.screw-hole.tl { top: 5px; left: 6px; }
.screw-hole.tr { top: 5px; right: 6px; }
.screw-hole.bl { bottom: 5px; left: 6px; }
.screw-hole.br { bottom: 5px; right: 6px; }
.screw-hole.visible { display: block; }

/* Screw animations */
@keyframes screw-out {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-720deg); }
}
@keyframes screw-in {
    from { transform: rotate(-720deg); }
    to   { transform: rotate(0deg); }
}

/* ============================================================
   LEPTON FARM (power system)
   ============================================================ */
.farm-unit {
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.06);
    z-index: 2;
    background: linear-gradient(180deg, #5a4a3a 0%, #4a3a2a 50%, #3a2a1a 100%);
}
.farm-unit:first-child {
    border-top: 2px solid #222;
}
/* Producer pipe connector — horizontal pipe joint from unit to bus */
.producer-connector {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 12px;
    background: linear-gradient(180deg, #4a4a4a, #888 20%, #aaa 40%, #bbb 50%, #aaa 60%, #888 80%, #4a4a4a);
    border-radius: 6px;
    box-shadow:
        0 2px 3px rgba(0,0,0,0.5),
        inset 0 2px 2px rgba(255,255,255,0.2),
        inset 0 -1px 2px rgba(0,0,0,0.3);
    z-index: 9;
    overflow: hidden;
}
/* Fluid flowing through connector */
.producer-connector::before {
    content: '';
    position: absolute;
    top: 3px; bottom: 3px;
    left: 0;
    width: 200%;
    background:
        repeating-linear-gradient(90deg,
            rgba(30,200,70,0.5) 0px,
            rgba(80,255,120,0.2) 4px,
            rgba(20,160,50,0.55) 8px,
            rgba(60,240,100,0.15) 12px,
            rgba(30,200,70,0.5) 16px);
    border-radius: 3px;
    animation: pipe-flow-right 0.8s linear infinite;
}
/* Joint collar where connector meets the unit */
.producer-connector::after {
    content: '';
    position: absolute;
    right: -2px;
    top: -3px;
    width: 6px;
    height: 18px;
    background: linear-gradient(180deg, #555, #999, #ccc, #999, #555);
    border-radius: 3px;
    box-shadow: 1px 0 2px rgba(0,0,0,0.4);
}
@keyframes pipe-flow-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
.farm-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 8px 12px;
}
.farm-gauges {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

/* Galvanometer — square panel meter style */
.galvanometer {
    width: 80px;
    height: 80px;
    background: #111;
    border: 2px solid #333;
    border-radius: 2px;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.05);
    padding: 4px;
}
.galva-svg, .thermo-svg {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 1px;
    transition: background 0.5s;
}
.galva-svg.gauge-off, .thermo-svg.gauge-off {
    background: #999;
    box-shadow: none;
}
.galva-svg.gauge-alert, .thermo-svg.gauge-alert {
    background: #ffbbbb;
    box-shadow: inset 0 0 12px rgba(255,0,0,0.35);
}
.galva-svg.gauge-blink, .thermo-svg.gauge-blink {
    animation: gauge-red-blink 0.6s ease-in-out infinite;
}
@keyframes gauge-red-blink {
    0%, 100% { background: #ffbbbb; box-shadow: inset 0 0 12px rgba(255,0,0,0.35); }
    50%      { background: #ff8888; box-shadow: inset 0 0 18px rgba(255,0,0,0.55); }
}

/* Thermometer (gauge style) */
.thermometer {
    width: 80px;
    height: 80px;
    background: #111;
    border: 2px solid #333;
    border-radius: 2px;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.05);
    padding: 4px;
}

/* Farm status */
.farm-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
/* Farm LEDs — always visible, never affected by power-off */
.farm-led.farm-ok .jewel-gem {
    background: radial-gradient(circle at 40% 35%, #66ff66, #22cc22 40%, #11aa11 70%, #008800 100%) !important;
    box-shadow:
        inset 0 1px 2px rgba(150,255,150,0.3),
        0 0 6px rgba(50,220,50,0.7),
        0 0 14px rgba(30,200,30,0.4) !important;
}
.farm-led.farm-tripped .jewel-gem {
    background: radial-gradient(circle at 40% 35%, #ff4444, #cc1111 40%, #991111 70%, #660000 100%) !important;
    box-shadow:
        inset 0 1px 2px rgba(255,150,150,0.3),
        0 0 6px rgba(255,50,50,0.7),
        0 0 14px rgba(255,30,30,0.4) !important;
}
.farm-led.farm-off .jewel-gem {
    background: radial-gradient(circle at 40% 35%, #555, #333 40%, #222 70%, #111 100%) !important;
    box-shadow: none !important;
}

/* Photon Farm — flexible solar panel on top of stack */
.shop-icon-photon { color: #ffaa22; font-size: 22px; }

#photon-farm-unit {
    position: relative;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.solar-panel-full {
    position: relative;
    width: 100%;
    min-height: 85px;
    background: #0a0e18;
    overflow: hidden;
}
/* Individual cells — dark blue/purple with slight variation */
.solar-cells {
    position: absolute;
    inset: 0;
    background:
        /* Cell fill — subtle gradient per cell via repeating */
        repeating-linear-gradient(180deg,
            #101c38 0px, #142244 6px, #162848 8px, #142040 12px, #101c38 14px),
        repeating-linear-gradient(90deg,
            rgba(20,30,55,1) 0px, rgba(25,38,65,1) 10px, rgba(20,32,58,1) 18px, rgba(18,28,50,1) 22px);
    /* Thin gaps between cells */
    mask-image:
        repeating-linear-gradient(0deg, black 0px, black 13px, transparent 13px, transparent 14px),
        repeating-linear-gradient(90deg, black 0px, black 21px, transparent 21px, transparent 22px);
    mask-composite: intersect;
    -webkit-mask-image:
        repeating-linear-gradient(0deg, black 0px, black 13px, transparent 13px, transparent 14px),
        repeating-linear-gradient(90deg, black 0px, black 21px, transparent 21px, transparent 22px);
    -webkit-mask-composite: source-in;
}
/* Silver bus bars — thin vertical ribbons across cells */
.solar-busbars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg,
            transparent 0px, transparent 6px,
            rgba(180,195,215,0.12) 6px, rgba(180,195,215,0.12) 7px,
            transparent 7px, transparent 22px);
}
/* Reflection — angled gloss sweep */
.solar-reflection {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(125deg,
            transparent 0%,
            transparent 25%,
            rgba(80,120,200,0.07) 30%,
            rgba(120,160,230,0.1) 35%,
            rgba(160,200,255,0.08) 40%,
            rgba(100,150,220,0.05) 45%,
            transparent 50%,
            transparent 100%);
}
/* Secondary softer reflection */
.solar-reflection::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(145deg,
            transparent 55%,
            rgba(60,100,180,0.04) 65%,
            rgba(80,130,200,0.06) 72%,
            transparent 80%);
}
/* Photon impact sparkles */
.photon-impacts {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.photon-impact {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200,220,255,0.9), rgba(120,160,255,0.4) 50%, transparent 70%);
    box-shadow: 0 0 3px rgba(150,190,255,0.6);
    animation: photon-flash 0.5s ease-out forwards;
}
@keyframes photon-flash {
    0%   { transform: scale(0); opacity: 1; }
    30%  { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(0.3); opacity: 0; }
}
/* Overlay: galva on top of solar cells */
.photon-overlay {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 6px 8px;
}
.photon-galva-wrap {
    width: 70px;
    height: 70px;
    background: rgba(8,8,8,0.85) !important;
    border: 1.5px solid rgba(50,50,50,0.5) !important;
    border-radius: 2px !important;
    box-shadow:
        0 2px 5px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

/* City selector in settings */
#opt-city-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
#opt-city {
    background: #222;
    color: #ccc;
    border: 1px solid #444;
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 11px;
}

/* Rocker switch — green capsule with integrated LED */
/* ---- VocaPlanck speaker ---- */
.voca-speaker {
    display: flex;
    align-items: center;
    justify-content: center;
}
.voca-chassis {
    position: relative;
    width: 96px;
    height: 68px;
    background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
    border-radius: 4px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 2px 6px rgba(0,0,0,0.6);
    border: 1px solid #222;
}
.voca-screw {
    position: absolute;
    width: 7px;
    height: 7px;
    background: radial-gradient(circle at 35% 35%, #999, #555 60%, #333);
    border-radius: 50%;
    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
    z-index: 3;
}
.voca-screw::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 5px; height: 1px;
    background: #333;
    transform: translate(-50%,-50%) rotate(var(--rot, 30deg));
    border-radius: 0.5px;
}
.voca-screw-tl { top: 3px; left: 3px; --rot: 45deg; }
.voca-screw-tr { top: 3px; right: 3px; --rot: 120deg; }
.voca-screw-bl { bottom: 3px; left: 3px; --rot: 80deg; }
.voca-screw-br { bottom: 3px; right: 3px; --rot: 160deg; }
.voca-surround {
    position: absolute;
    top: 6px; left: 8px; right: 8px; bottom: 6px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%, #1a1a1a 60%, #333 80%, #444 90%, #333 100%);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.8),
        inset 0 -1px 3px rgba(255,255,255,0.05);
}
.voca-cone {
    position: absolute;
    top: 5px; left: 6px; right: 6px; bottom: 5px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 45% 40%,
        #4a4540 0%, #3a3530 20%, #2e2a25 40%, #252220 60%, #1e1b18 80%, #181614 100%);
    box-shadow: inset 0 1px 3px rgba(255,255,255,0.06);
}
.voca-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
}
.voca-ring-1 { top: 12%; left: 14%; right: 14%; bottom: 12%; }
.voca-ring-2 { top: 28%; left: 28%; right: 28%; bottom: 28%; }
.voca-ring-3 { top: 40%; left: 38%; right: 38%; bottom: 40%; }
.voca-dome {
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 12px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at 40% 35%, #555 0%, #333 40%, #222 100%);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.1),
        0 1px 3px rgba(0,0,0,0.5);
}
/* Speaking animation */
.voca-speaking .voca-cone {
    animation: voca-pump 0.1s ease-in-out infinite alternate;
}
@keyframes voca-pump {
    0%   { transform: scale(1); }
    100% { transform: scale(1.015); box-shadow: inset 0 1px 3px rgba(255,255,255,0.1); }
}
.voca-speaking .voca-dome {
    animation: voca-dome-pump 0.08s ease-in-out infinite alternate;
}
@keyframes voca-dome-pump {
    0%   { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -50%) scale(1.06); }
}
#vocaplanck-unit {
    min-height: 0;
    background: linear-gradient(180deg, #6e6e6e 0%, #5c5c5c 2%, #4e4e4e 50%, #444 98%, #383838 100%);
}
#vocaplanck-unit .sect-farm { padding: 6px 8px; }
#vocaplanck-unit .farm-row { gap: 12px; }

#main-switch-unit { min-height: 0; }
#main-switch-unit .sect-farm { padding: 4px 8px; }
.rota-unit .farm-row { padding: 8px 32px; }
#main-switch-unit .farm-row { gap: 8px; }

.rocker-switch {
    width: 36px;
    height: 44px;
    align-self: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rocker-body {
    position: relative;
    width: 30px;
    height: 38px;
    background: linear-gradient(135deg, #222 0%, #1a1a1a 40%, #111 100%);
    border: 1.5px solid #444;
    border-radius: 3px;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.rocker-button {
    position: relative;
    width: 24px;
    height: 32px;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    transition: transform 0.15s ease-out, background 0.2s, box-shadow 0.2s;
}
.rocker-divider {
    width: 18px;
    height: 1px;
    background: rgba(255,255,255,0.1);
}
.rocker-label-on, .rocker-label-off {
    font-size: 8px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    line-height: 1;
    transition: color 0.2s;
}
.rocker-led {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    transition: background 0.2s, box-shadow 0.2s;
}
/* OFF: very dark, bottom tilted down */
.rocker-switch.switch-off .rocker-button {
    background: linear-gradient(to bottom, #1a2a1a, #111a11 50%, #0a120a);
    box-shadow:
        inset 0 -2px 4px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 -1px 2px rgba(0,0,0,0.4);
    transform: perspective(50px) rotateX(-8deg);
}
.rocker-switch.switch-off .rocker-label-on,
.rocker-switch.switch-off .rocker-label-off {
    color: rgba(255,255,255,0.2);
}
.rocker-switch.switch-off .rocker-led {
    background: #0a150a;
    border: 0.5px solid rgba(255,255,255,0.05);
}
.rocker-switch.switch-off .rocker-divider {
    background: rgba(255,255,255,0.05);
}
/* ON: bright green, top tilted down */
.rocker-switch.switch-on .rocker-button {
    background: linear-gradient(to bottom, #30aa42, #28993a 50%, #22883a);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.3),
        inset 0 -1px 0 rgba(255,255,255,0.12),
        0 0 10px rgba(40,180,60,0.35),
        0 1px 2px rgba(0,0,0,0.3);
    transform: perspective(50px) rotateX(8deg);
}
.rocker-switch.switch-on .rocker-label-on,
.rocker-switch.switch-on .rocker-label-off {
    color: rgba(255,255,255,0.85);
}
.rocker-switch.switch-on .rocker-divider {
    background: rgba(255,255,255,0.2);
}
.rocker-led.rocker-led-on {
    background: radial-gradient(circle at 40% 35%, #aaffaa, #44ff44 50%, #22cc22);
    box-shadow: 0 0 4px rgba(80,255,80,0.8), 0 0 10px rgba(40,220,40,0.4);
    border: none;
}
/* Hover */
.rocker-switch:hover .rocker-body {
    border-color: #555;
}
/* Electric arc flash on breaker trip */
.rocker-switch.arc-flash {
    animation: arc-flash 0.4s ease-out;
}
.rocker-switch.arc-flash .rocker-body {
    animation: arc-body 0.4s ease-out;
}
@keyframes arc-flash {
    0%   { filter: brightness(1); }
    5%   { filter: brightness(4) drop-shadow(0 0 20px #88ccff) drop-shadow(0 0 40px #4488ff); }
    15%  { filter: brightness(1.2); }
    25%  { filter: brightness(3) drop-shadow(0 0 15px #88ccff) drop-shadow(0 0 30px #4488ff); }
    35%  { filter: brightness(1); }
    45%  { filter: brightness(2.5) drop-shadow(0 0 10px #6699ee); }
    60%  { filter: brightness(1); }
    100% { filter: brightness(1); }
}
@keyframes arc-body {
    0%   { box-shadow: inset 0 0 0 transparent; }
    5%   { box-shadow: inset 0 0 12px rgba(100,160,255,0.8), 0 0 24px rgba(80,140,255,0.6), 0 0 48px rgba(60,120,255,0.3); }
    15%  { box-shadow: inset 0 0 0 transparent; }
    25%  { box-shadow: inset 0 0 8px rgba(100,160,255,0.6), 0 0 16px rgba(80,140,255,0.4); }
    35%  { box-shadow: inset 0 0 0 transparent; }
    45%  { box-shadow: inset 0 0 6px rgba(100,160,255,0.4), 0 0 10px rgba(80,140,255,0.2); }
    60%  { box-shadow: inset 0 0 0 transparent; }
    100% { box-shadow: inset 0 0 0 transparent; }
}

/* Crazy mode — subtle: only block clicks during spasm */
/* crazy-active: no longer blocks interactions — anomalies overlay on top */

/* Power bus — vertical conduit on the right side of the instrument */
/* Center column — wraps instrument + farm stack */
#center-column {
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
}

/* Producer bus — container for dynamic pipe segments */
#producer-bus {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    z-index: 7;
    pointer-events: none;
}
/* Vertical pipe segment between T-joints */
.bus-pipe-v {
    position: absolute;
    left: 3px;
    width: 14px;
    background: linear-gradient(90deg, #4a4a4a, #777 15%, #999 35%, #aaa 50%, #999 65%, #777 85%, #4a4a4a);
    box-shadow:
        -1px 0 3px rgba(0,0,0,0.4),
        1px 0 2px rgba(0,0,0,0.3),
        inset 3px 0 4px rgba(255,255,255,0.18),
        inset -2px 0 3px rgba(0,0,0,0.35);
    overflow: hidden;
}
.bus-pipe-v::before {
    content: '';
    position: absolute;
    left: 4px; right: 4px;
    top: 0; height: 200%;
    background: repeating-linear-gradient(180deg,
        rgba(30,200,70,0.5) 0px, rgba(80,255,120,0.2) 5px,
        rgba(20,160,50,0.55) 10px, rgba(60,240,100,0.15) 15px,
        rgba(30,200,70,0.5) 20px);
    border-radius: 2px;
}
.bus-pipe-v.flow-down::before {
    animation: pipe-flow-down 1.2s linear infinite;
}
.bus-pipe-v.flow-up::before {
    animation: pipe-flow-up 1.2s linear infinite;
}
@keyframes pipe-flow-down {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}
@keyframes pipe-flow-up {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
/* No production: gray, no animation */
.bus-pipe-v.flow-off::before {
    background: repeating-linear-gradient(180deg,
        rgba(100,100,100,0.3) 0px, rgba(130,130,130,0.15) 5px,
        rgba(90,90,90,0.3) 10px, rgba(120,120,120,0.1) 15px,
        rgba(100,100,100,0.3) 20px);
    animation: none;
}
/* T-joint — metallic junction piece */
.bus-tjoint {
    position: absolute;
    left: 0;
    width: 20px;
    height: 18px;
    transform: translateY(-50%);
    z-index: 10;
}
.bus-tjoint-ring {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 18px;
    height: 16px;
    background: linear-gradient(135deg, #888, #bbb 30%, #ddd 50%, #bbb 70%, #777);
    border-radius: 4px;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.3),
        0 1px 3px rgba(0,0,0,0.5);
}
/* Center hole of the T — shows the fluid behind */
.bus-tjoint-hole {
    position: absolute;
    left: 5px; top: 5px;
    width: 10px; height: 8px;
    background: radial-gradient(ellipse, rgba(30,180,60,0.4), rgba(20,80,30,0.6));
    border-radius: 2px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
/* Cap / plug at dead-end pipe */
.bus-cap {
    position: absolute;
    left: 2px;
    width: 16px;
    height: 8px;
    background: linear-gradient(90deg, #555, #999 20%, #bbb 40%, #ccc 50%, #bbb 60%, #999 80%, #555);
    border-radius: 4px;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.5),
        inset 0 1px 1px rgba(255,255,255,0.3),
        inset 0 -1px 1px rgba(0,0,0,0.2);
    z-index: 11;
}
.bus-cap::after {
    content: '';
    position: absolute;
    left: 4px; right: 4px;
    top: 2px; height: 2px;
    background: rgba(255,255,255,0.15);
    border-radius: 1px;
}

/* Consumer bus — right side, dynamic container */
#power-bus {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    z-index: 7;
    pointer-events: none;
}
/* Consumer pipe segments — orange/amber fluid */
.cbus-pipe-v {
    position: absolute;
    right: 3px;
    width: 14px;
    background: linear-gradient(90deg, #4a4a4a, #777 15%, #999 35%, #aaa 50%, #999 65%, #777 85%, #4a4a4a);
    box-shadow:
        -1px 0 3px rgba(0,0,0,0.4),
        1px 0 2px rgba(0,0,0,0.3),
        inset 3px 0 4px rgba(255,255,255,0.18),
        inset -2px 0 3px rgba(0,0,0,0.35);
    overflow: hidden;
}
.cbus-pipe-v::before {
    content: '';
    position: absolute;
    left: 4px; right: 4px;
    top: 0; height: 200%;
    background: repeating-linear-gradient(180deg,
        rgba(30,120,220,0.5) 0px, rgba(60,160,255,0.2) 5px,
        rgba(20,100,200,0.55) 10px, rgba(50,140,240,0.15) 15px,
        rgba(30,120,220,0.5) 20px);
    border-radius: 2px;
    animation: pipe-flow-up 1.2s linear infinite;
}
/* Switch off: gray, no animation */
.cbus-pipe-v.flow-off::before {
    background: repeating-linear-gradient(180deg,
        rgba(100,100,100,0.3) 0px, rgba(130,130,130,0.15) 5px,
        rgba(90,90,90,0.3) 10px, rgba(120,120,120,0.1) 15px,
        rgba(100,100,100,0.3) 20px);
    animation: none;
}
/* Consumer T-joint */
.cbus-tjoint {
    position: absolute;
    right: 0;
    width: 20px;
    height: 18px;
    transform: translateY(-50%);
    z-index: 10;
}
.cbus-tjoint-ring {
    position: absolute;
    right: 1px;
    top: 1px;
    width: 18px;
    height: 16px;
    background: linear-gradient(135deg, #888, #bbb 30%, #ddd 50%, #bbb 70%, #777);
    border-radius: 4px;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.3),
        0 1px 3px rgba(0,0,0,0.5);
}
.cbus-tjoint-hole {
    position: absolute;
    right: 5px; top: 5px;
    width: 10px; height: 8px;
    background: radial-gradient(ellipse, rgba(30,120,220,0.4), rgba(10,60,140,0.6));
    border-radius: 2px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
/* Consumer cap */
.cbus-cap {
    position: absolute;
    right: 2px;
    width: 16px;
    height: 8px;
    background: linear-gradient(90deg, #555, #999 20%, #bbb 40%, #ccc 50%, #bbb 60%, #999 80%, #555);
    border-radius: 4px;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.5),
        inset 0 1px 1px rgba(255,255,255,0.3),
        inset 0 -1px 1px rgba(0,0,0,0.2);
    z-index: 11;
}
.cbus-cap::after {
    content: '';
    position: absolute;
    left: 4px; right: 4px;
    top: 2px; height: 2px;
    background: rgba(255,255,255,0.15);
    border-radius: 1px;
}

/* Power connectors on panels — horizontal pipe to consumer bus */
.power-connector {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 12px;
    background: linear-gradient(180deg, #4a4a4a, #888 20%, #aaa 40%, #bbb 50%, #aaa 60%, #888 80%, #4a4a4a);
    border-radius: 6px;
    box-shadow:
        0 2px 3px rgba(0,0,0,0.5),
        inset 0 2px 2px rgba(255,255,255,0.2),
        inset 0 -1px 2px rgba(0,0,0,0.3);
    z-index: 9;
    overflow: hidden;
}
.power-connector::before {
    content: '';
    position: absolute;
    top: 3px; bottom: 3px;
    left: 0; width: 200%;
    background: repeating-linear-gradient(90deg,
        rgba(30,120,220,0.5) 0px, rgba(60,160,255,0.2) 4px,
        rgba(20,100,200,0.55) 8px, rgba(50,140,240,0.15) 12px,
        rgba(30,120,220,0.5) 16px);
    border-radius: 3px;
    animation: pipe-flow-right 0.8s linear infinite;
}
.power-connector::after {
    content: '';
    position: absolute;
    left: -2px;
    top: -3px;
    width: 6px;
    height: 18px;
    background: linear-gradient(180deg, #555, #999, #ccc, #999, #555);
    border-radius: 3px;
    box-shadow: -1px 0 2px rgba(0,0,0,0.4);
}

/* Full power-off: displays go dark (no glow, dimmed) but stay visible */
#instrument.power-off .digit,
#instrument.power-off .colon {
    color: #1a1510 !important;
    text-shadow: none !important;
    transition: color 0.5s, text-shadow 0.5s;
}
#instrument.power-off .indicator,
#instrument.power-off .joker-flag {
    color: #333 !important;
    background: linear-gradient(180deg, #181818, #101010) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.6) !important;
    text-shadow: none !important;
    transition: all 0.5s;
}
#instrument.power-off .roller-cell {
    color: #999 !important;
}
#instrument.power-off #roller-window {
    background: #666 !important;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.6) !important;
}
#instrument.power-off #roller-window::before,
#instrument.power-off #roller-window::after {
    background: none !important;
}
#instrument.power-off #roller-strip {
    opacity: 0.2 !important;
}
#instrument.power-off #streak-window {
    background: #444 !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5) !important;
}
#instrument.power-off .vu-led {
    background: #222 !important;
    box-shadow: none !important;
}
#instrument.power-off .led-seg {
    opacity: 0.05 !important;
    transition: opacity 0.5s;
}
#instrument.power-off .dot {
    background: #1a0800 !important;
    box-shadow: none !important;
    transition: all 0.5s;
}
#instrument.power-off .vu-led {
    background: #1a1a1a !important;
    box-shadow: none !important;
    transition: all 0.5s;
}
#instrument.power-off #magic-eye-glow {
    opacity: 0 !important;
    transition: opacity 0.5s;
}
#instrument.power-off .roman-group {
    color: transparent !important;
    filter: none !important;
    background: #555 !important;
    -webkit-background-clip: text !important;
    transition: all 0.5s;
}
#instrument.power-off .roman-sep {
    color: #555 !important;
    text-shadow: none !important;
    animation: none !important;
}
#instrument.power-off .seg,
#instrument.power-off .seg.on,
#instrument.power-off .seg14-colon-dot.on {
    background: transparent !important;
    box-shadow: none !important;
}
#instrument.power-off #scope-canvas {
    opacity: 0.1 !important;
    transition: opacity 0.5s;
}
#instrument.power-off .panel .jewel-gem {
    background: radial-gradient(circle at 40% 35%, #222, #111 60%, #080808) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.6) !important;
    transition: all 0.5s;
}

/* Sections */
#instrument section {
    padding: 10px 14px;
    position: relative; z-index: 2;
}

/* ============================================================
   SECTION 1: CLOCK
   ============================================================ */
#clock-frame {
    background: linear-gradient(135deg, #3c1e0a 0%, #7a4020 15%, #a06030 30%, #7a4020 50%, #5a2e10 70%, #3c1e0a 100%);
    border: 2px solid #2a1508;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow:
        inset 0 1px 0 rgba(200,140,60,0.3),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        0 4px 16px rgba(0,0,0,0.6);
    position: relative;
}
#clock-frame::before {
    content: ''; position: absolute; inset: 4px;
    border: 1px solid #1a0c04; border-radius: 4px; pointer-events: none;
}
#clock-frame::after {
    content: ''; position: absolute; inset: 5px;
    border: 1px solid #503018; border-radius: 3px; pointer-events: none;
}
#clock {
    display: flex; align-items: center; justify-content: center;
    background: #050302; border-radius: 4px;
    padding: 8px 4px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.9);
}
.digit-group { display: flex; gap: 2px; }
.digit {
    font-size: 64px; width: 46px; text-align: center;
    color: #ff8c20;
    text-shadow: 0 0 8px rgba(255,140,30,0.6), 0 0 20px rgba(255,100,10,0.3), 0 0 40px rgba(255,80,0,0.15);
    line-height: 1; position: relative;
}
.digit::after {
    content: '8'; position: absolute; inset: 0;
    color: rgba(255,140,30,0.04); text-shadow: none; pointer-events: none;
}
.colon {
    font-size: 52px; color: #ff8c20;
    text-shadow: 0 0 8px rgba(255,140,30,0.5);
    width: 18px; text-align: center; line-height: 1;
    transition: opacity 0.3s;
}
.colon.off { opacity: 0.08; }

/* Barcode clock display — sticker label */
#clock-barcode {
    position: relative;
    background: #f5f3ee;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 6px 8px;
    height: 90px;
    transform: rotate(-1.2deg);
    box-shadow:
        1px 2px 6px rgba(0,0,0,0.35),
        0 0 0 1px rgba(255,255,255,0.15);
}
#clock-barcode::before {
    content: ''; position: absolute; inset: 0;
    border-radius: 3px;
    background: repeating-linear-gradient(
        90deg,
        transparent 0, transparent 3px,
        rgba(0,0,0,0.008) 3px, rgba(0,0,0,0.008) 4px
    );
    pointer-events: none;
}
.bc-bars {
    display: flex; align-items: stretch;
    position: absolute;
    inset: 6px 8px;
    background: #fff;
}
.bc-bar {
    background: #111;
    flex-shrink: 0;
}
.bc-space {
    background: #fff;
    flex-shrink: 0;
}
.bc-label {
    position: absolute;
    bottom: 2px; left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'OCR-B', 'Courier New', monospace;
    font-size: 16px;
    letter-spacing: 4px;
    color: #222;
    text-align: center;
    background: #fff;
    padding: 1px 12px;
    z-index: 1;
}
.hidden { display: none !important; }

/* BCD Binary clock display */
#clock-binary {
    display: flex; align-items: center; justify-content: center;
    gap: 4px;
    background: #050302; border-radius: 4px;
    padding: 12px 16px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.9);
}
.bcd-col {
    display: flex; flex-direction: column; gap: 6px;
}
.bcd-col.bcd-sep {
    margin-left: 24px;
}
.bcd-bulb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 40%, #1a1208, #0a0804);
    border: 1px solid #2a2018;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
    transition: all 0.15s;
}
.bcd-bulb.on {
    background: radial-gradient(circle at 40% 35%, #ffcc66, #ff8c20, #cc6010);
    border-color: #aa6020;
    box-shadow:
        0 0 4px rgba(255,140,30,0.7),
        0 0 12px rgba(255,100,10,0.4),
        0 0 24px rgba(255,80,0,0.15),
        inset 0 -1px 2px rgba(200,80,0,0.3);
}
.bcd-bulb.bcd-unused {
    opacity: 0;
}

/* Roman numeral clock display — stone engraving style */
#clock-roman {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0;
    padding: 12px 18px;
    border-radius: 4px;
    max-width: 88%;
    margin: 0 auto;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%),
        linear-gradient(180deg, #8a8070 0%, #7a7060 15%, #6a6050 50%, #7a7060 85%, #8a8070 100%);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.4),
        inset 0 -1px 0 rgba(255,255,255,0.08),
        0 1px 3px rgba(0,0,0,0.3);
    /* subtle stone texture */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='1' y='1' fill='rgba(0,0,0,0.06)'/%3E%3Crect width='1' height='1' x='3' y='3' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #8a8070 0%, #7a7060 15%, #6a6050 50%, #7a7060 85%, #8a8070 100%);
}

.roman-group {
    font-family: 'Times New Roman', 'Palatino Linotype', 'Georgia', serif;
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 2px;
    color: transparent;
    background: linear-gradient(180deg, #3a3020 0%, #2a2015 60%, #3a3020 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.15),
        0 -1px 0 rgba(0,0,0,0.5);
    filter: drop-shadow(0 1px 0 rgba(200,190,170,0.25));
    min-width: 60px;
    text-align: center;
    display: inline-block;
}

.roman-sep {
    font-family: 'Times New Roman', serif;
    font-size: 26px;
    font-weight: bold;
    color: #3a3020;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.15),
        0 -1px 0 rgba(0,0,0,0.5);
    margin: 0 4px;
    animation: roman-blink 1s step-end infinite;
}

@keyframes roman-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.15; }
}

.shop-icon-roman {
    font-family: 'Times New Roman', serif;
    font-size: 22px;
    font-weight: bold;
    color: #c0b090;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Amharic 14-segment clock display */
#clock-amharic {
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    background: #050302; border-radius: 4px;
    padding: 10px 14px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.9);
}
.seg14-sep {
    margin: 0 4px;
    display: flex; align-items: center;
}
.seg14-colon {
    display: flex; flex-direction: column; gap: 14px;
    transform: skewX(-6deg);
}
.seg14-colon-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #0a2e0a;
    border: 1px solid #0a3a0a;
    transition: all 0.15s;
}
.seg14-colon-dot.on {
    background: radial-gradient(circle at 40% 35%, #aaffaa, #30cc30, #10aa10);
    box-shadow: 0 0 6px rgba(50,200,50,0.7), 0 0 12px rgba(30,180,30,0.4);
}
.seg14-digit {
    position: relative;
    width: 32px; height: 52px;
    transform: skewX(-6deg);
}
.seg14-digit .seg {
    position: absolute;
    background: #081408;
    transition: all 0.15s;
}
.seg14-digit .seg.on {
    background: #30cc30;
    box-shadow: 0 0 5px rgba(50,200,50,0.7), 0 0 12px rgba(30,180,30,0.3);
}
/* Top segments A1 (left half) and A2 (right half) */
.seg14-digit .seg-a1 { top: 0; left: 3px; width: 12px; height: 5px;
    clip-path: polygon(2px 0, 10px 0, 12px 2.5px, 10px 5px, 2px 5px, 0 2.5px); }
.seg14-digit .seg-a2 { top: 0; left: 17px; width: 12px; height: 5px;
    clip-path: polygon(2px 0, 10px 0, 12px 2.5px, 10px 5px, 2px 5px, 0 2.5px); }
/* Bottom segments D1 (left half) and D2 (right half) */
.seg14-digit .seg-d1 { bottom: 0; left: 3px; width: 12px; height: 5px;
    clip-path: polygon(2px 0, 10px 0, 12px 2.5px, 10px 5px, 2px 5px, 0 2.5px); }
.seg14-digit .seg-d2 { bottom: 0; left: 17px; width: 12px; height: 5px;
    clip-path: polygon(2px 0, 10px 0, 12px 2.5px, 10px 5px, 2px 5px, 0 2.5px); }
/* Middle segments — split with gap, pointed both sides */
.seg14-digit .seg-g1 { top: 23.5px; left: 4px; width: 11px; height: 5px;
    clip-path: polygon(0 2.5px, 1px 0, 9px 0, 11px 2.5px, 9px 5px, 1px 5px); }
.seg14-digit .seg-g2 { top: 23.5px; left: 17px; width: 11px; height: 5px;
    clip-path: polygon(0 2.5px, 2px 0, 10px 0, 11px 2.5px, 10px 5px, 2px 5px); }
/* Vertical side segments — pointed hexagons */
.seg14-digit .seg-f  { top: 5px; left: 0; width: 5px; height: 19px;
    clip-path: polygon(2.5px 0, 5px 2px, 5px 17px, 2.5px 19px, 0 17px, 0 2px); }
.seg14-digit .seg-b  { top: 5px; right: 0; width: 5px; height: 19px;
    clip-path: polygon(2.5px 0, 5px 2px, 5px 17px, 2.5px 19px, 0 17px, 0 2px); }
.seg14-digit .seg-e  { bottom: 5px; left: 0; width: 5px; height: 19px;
    clip-path: polygon(2.5px 0, 5px 2px, 5px 17px, 2.5px 19px, 0 17px, 0 2px); }
.seg14-digit .seg-c  { bottom: 5px; right: 0; width: 5px; height: 19px;
    clip-path: polygon(2.5px 0, 5px 2px, 5px 17px, 2.5px 19px, 0 17px, 0 2px); }
/* Center verticals — narrow tapered */
.seg14-digit .seg-j  { top: 5px; left: 13.5px; width: 5px; height: 19px;
    clip-path: polygon(1px 0, 4px 0, 3.5px 100%, 1.5px 100%); }
.seg14-digit .seg-m  { bottom: 5px; left: 13.5px; width: 5px; height: 19px;
    clip-path: polygon(1.5px 0, 3.5px 0, 4px 100%, 1px 100%); }
/* Diagonals — wide tapered wedges */
.seg14-digit .seg-h  { top: 5px; left: 5px; width: 10px; height: 19px;
    clip-path: polygon(0 0, 4px 0, 10px 15px, 10px 19px, 8px 19px); }
.seg14-digit .seg-k  { top: 5px; right: 5px; width: 10px; height: 19px;
    clip-path: polygon(6px 0, 10px 0, 2px 19px, 0 19px, 0 15px); }
.seg14-digit .seg-l  { bottom: 5px; left: 5px; width: 10px; height: 19px;
    clip-path: polygon(8px 0, 10px 0, 10px 4px, 4px 19px, 0 19px); }
.seg14-digit .seg-n  { bottom: 5px; right: 5px; width: 10px; height: 19px;
    clip-path: polygon(0 0, 2px 0, 0 4px, 6px 19px, 10px 19px); }

.shop-icon-amharic {
    font-size: 20px;
    color: #30cc30;
    text-shadow: 0 0 8px rgba(50,200,50,0.5);
}

/* QR Code clock display — sticker label */
#clock-qrcode {
    position: relative;
    background: #f5f3ee;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 10px;
    width: fit-content;
    margin: 0 auto;
    transform: rotate(1.5deg);
    box-shadow:
        1px 2px 6px rgba(0,0,0,0.35),
        0 0 0 1px rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
}
#clock-qrcode::before {
    content: ''; position: absolute; inset: 0;
    border-radius: 3px;
    background: repeating-linear-gradient(
        90deg,
        transparent 0, transparent 3px,
        rgba(0,0,0,0.008) 3px, rgba(0,0,0,0.008) 4px
    );
    pointer-events: none;
}
#qr-canvas {
    image-rendering: pixelated;
    width: 100px; height: 100px;
}

/* Shop icons */
.shop-icon-binary {
    font-family: monospace; font-size: 20px;
    color: #ff8c20;
    text-shadow: 0 0 8px rgba(255,140,30,0.5);
}
.shop-icon-barcode {
    font-size: 18px; letter-spacing: -4px;
    color: #888;
    text-shadow: none;
}
.shop-icon-qrcode {
    font-size: 22px;
    color: #888;
    text-shadow: none;
}

/* ============================================================
   SECTION 2: INDICATORS (backlit vintage buttons)
   ============================================================ */
/* Detection nameplate — vertical label on left edge */
.detection-nameplate {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 22px;
    background: linear-gradient(90deg, #282018, #1e1810 40%, #161210);
    border-right: 1px solid #3a3020;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Georgia', serif;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #8a7858;
    text-shadow: 0 1px 0 rgba(0,0,0,0.6);
    z-index: 1;
}
#panel-indicators {
    position: relative;
    padding-left: 28px !important;
}
#indicators {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 6px;
    padding: 4px 0;
}
.indicator {
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 11px; letter-spacing: 0.5px;
    cursor: default; user-select: none;
    position: relative;
    transition: all 0.15s;

    /* Button body: dark translucent lens */
    background: linear-gradient(180deg, #1a1612 0%, #100e0c 60%, #0c0a08 100%);
    color: #8a7a60;

    /* Metallic border (bezel) */
    border: 1.5px solid #3a3530;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 1px 2px rgba(0,0,0,0.5);
}

.indicator.indicator-disabled {
    opacity: 0.25;
    pointer-events: none;
}

.indicator-pts {
    font-size: 9px;
    color: #b09870;
    margin-left: 4px;
    vertical-align: super;
}
.indicator.lit .indicator-pts {
    color: #ffcc80;
}

/* Lit state: backlit lamp effect */
.indicator.lit {
    cursor: pointer;
    color: #ffe0a0;
    background:
        radial-gradient(ellipse at 50% 60%, rgba(255,170,50,0.35) 0%, rgba(255,120,20,0.12) 40%, transparent 70%),
        linear-gradient(180deg, #1a1612 0%, #100e0c 60%, #0c0a08 100%);
    border-color: #6a5030;
    box-shadow:
        inset 0 1px 0 rgba(255,200,100,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.2),
        0 0 6px rgba(255,160,50,0.25),
        0 0 16px rgba(255,120,20,0.1),
        0 1px 2px rgba(0,0,0,0.5);
    text-shadow: 0 0 6px rgba(255,160,50,0.5);
    animation: indicator-glow 0.4s ease-out;
}
.indicator.lit::before {
    content: ''; position: absolute; inset: 0; border-radius: 8px;
    background: radial-gradient(ellipse at 50% 80%, rgba(255,160,50,0.15) 0%, transparent 60%);
    pointer-events: none;
}
/* Hot spot reflection on top of lens */
.indicator.lit::after {
    content: ''; position: absolute;
    top: 1px; left: 15%; right: 15%; height: 30%;
    border-radius: 2px 2px 50% 50%;
    background: linear-gradient(180deg, rgba(255,220,150,0.12) 0%, transparent 100%);
    pointer-events: none;
}
.indicator.lit:hover {
    border-color: #ffb450;
    box-shadow:
        inset 0 1px 0 rgba(255,200,100,0.1),
        0 0 10px rgba(255,160,50,0.4),
        0 0 24px rgba(255,120,20,0.15),
        0 1px 2px rgba(0,0,0,0.5);
    transform: scale(1.05);
}
.indicator.lit:active {
    transform: scale(0.95) translateY(1px);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.6),
        0 0 4px rgba(255,160,50,0.15),
        0 0 0 rgba(0,0,0,0.5);
    border-color: #4a3820;
}

/* Captured flash */
.indicator.captured {
    animation: indicator-flash 0.3s ease-out;
}
@keyframes indicator-glow {
    0% { box-shadow: 0 0 0 rgba(255,160,50,0), 0 1px 2px rgba(0,0,0,0.5); }
    40% { box-shadow: 0 0 14px rgba(255,160,50,0.5), 0 0 30px rgba(255,120,20,0.2), 0 1px 2px rgba(0,0,0,0.5); }
    100% { box-shadow: 0 0 6px rgba(255,160,50,0.25), 0 0 16px rgba(255,120,20,0.1), 0 1px 2px rgba(0,0,0,0.5); }
}
@keyframes indicator-flash {
    0% { background: radial-gradient(ellipse at 50% 60%, rgba(255,180,60,0.6), rgba(255,120,20,0.2) 50%, #100e0c); transform: scale(1.1); }
    100% { background: linear-gradient(180deg, #1a1612, #100e0c 60%, #0c0a08); transform: scale(1); }
}

/* Indicator caught state: pale green (pattern clicked at least once) */
.indicator.indicator-caught {
    border-color: #2a5a30;
    color: #6a9a60;
}
.indicator.indicator-caught .indicator-pts {
    color: #6a9a60;
}
/* Caught + lit: bright green */
.indicator.indicator-caught.lit {
    color: #b0ffa0;
    background:
        radial-gradient(ellipse at 50% 60%, rgba(80,220,80,0.35) 0%, rgba(40,180,40,0.12) 40%, transparent 70%),
        linear-gradient(180deg, #1a1612 0%, #100e0c 60%, #0c0a08 100%);
    border-color: #30aa40;
    text-shadow: 0 0 6px rgba(80,220,80,0.5);
}
.indicator.indicator-caught.lit .indicator-pts {
    color: #b0ffa0;
}

/* Legacy bonus */
.shop-icon-legacy {
    font-size: 26px;
}
.bonus-item.locked .shop-icon-legacy {
    color: #886644;
    text-shadow: 0 0 4px rgba(120,80,40,0.3);
}
.bonus-item.unlocked .shop-icon-legacy {
    color: #ffcc33;
    text-shadow: 0 0 10px rgba(255,200,50,0.6);
}

/* ============================================================
   SECTION 3: MODULES ROW (MultiPlanck + DecaPulse)
   ============================================================ */
#instrument #sect-multi {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#multi-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
/* TTL Extender Unit */
#ttl-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 4px 8px;
}
/* Magic eye tube (EM84 / 6E5 style) */
#magic-eye-bezel {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(160deg, #d0ccc4 0%, #b0a898 30%, #908878 60%, #b0a898 100%);
    border: 1px solid #666;
    padding: 4px;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -1px 0 rgba(0,0,0,0.2);
}
#magic-eye {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #020502;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 0 8px rgba(0,0,0,0.9),
        inset 0 0 2px rgba(0,0,0,1);
    border: 1px solid #111;
}
/* Green phosphor ring */
#magic-eye-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        transparent 0%,
        transparent 22%,
        #11cc11 26%,
        #33ee33 35%,
        #44ff44 42%,
        #33ee33 52%,
        #22cc22 62%,
        #11aa11 72%,
        #0a660a 82%,
        #042804 90%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.15s;
}
#magic-eye.active #magic-eye-glow {
    opacity: 1;
}
/* Dark shadow sector — symmetric V from bottom, grows upward */
#magic-eye-shadow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 2;
    /* --half-shadow set by JS: 0deg = no shadow (full green), 180deg = full shadow */
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        transparent calc(180deg - var(--half-shadow, 0deg)),
        #020502 calc(180deg - var(--half-shadow, 0deg)),
        #020502 calc(180deg + var(--half-shadow, 0deg)),
        transparent calc(180deg + var(--half-shadow, 0deg)),
        transparent 360deg
    );
}
/* Thin dark electrode lines at 3 and 9 o'clock */
#magic-eye-shadow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #020502;
    transform: translateY(-50%);
    z-index: 1;
}
/* Center anode disc — subtle metal visible when dark, green reflections when lit */
#magic-eye-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%,
        #403a34 0%,
        #2e2a26 35%,
        #1e1b18 60%,
        #100e0c 100%
    );
    z-index: 3;
    box-shadow: 0 0 3px rgba(0,0,0,0.8);
    border: 0.5px solid rgba(80,72,62,0.5);
    transition: box-shadow 0.3s, border-color 0.3s, background 0.3s;
}
/* Specular highlight on the metal */
#magic-eye-center::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 3px;
    width: 6px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(150,140,120,0.4), transparent);
}
/* Green reflection when eye is active */
#magic-eye.active #magic-eye-center {
    background: radial-gradient(circle at 38% 32%,
        #1e2e1e 0%,
        #152215 35%,
        #0e180e 60%,
        #080e08 100%
    );
    border-color: rgba(50,90,50,0.4);
    box-shadow:
        0 0 3px rgba(0,0,0,0.8),
        0 0 6px rgba(40,180,40,0.2),
        inset 0 0 4px rgba(30,120,30,0.15);
}
#magic-eye.active #magic-eye-center::before {
    background: radial-gradient(ellipse, rgba(80,200,80,0.25), transparent);
}
/* Outer glow when active */
#magic-eye.active {
    box-shadow:
        inset 0 0 8px rgba(0,0,0,0.9),
        inset 0 0 2px rgba(0,0,0,1),
        0 0 10px rgba(40,220,40,0.25),
        0 0 20px rgba(30,180,30,0.1);
}

.shop-icon-ttl {
    font-size: 20px;
}

/* Flag indicator panel (3x3 grid) with metallic bezel */
/* MultiPlanck roller indicator */
#roller-bezel {
    display: flex;
    align-items: center;
    gap: 0;
    background: linear-gradient(180deg, #6a6a6a 0%, #555 20%, #4a4a4a 80%, #3a3a3a 100%);
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    padding: 4px 6px;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.3);
}
#roller-window {
    width: 52px;
    height: 28px;
    overflow: hidden;
    background: #e8e4dc;
    border-radius: 2px;
    border: 1px solid #333;
    box-shadow:
        inset 0 3px 8px rgba(0,0,0,0.5),
        inset 0 -3px 8px rgba(0,0,0,0.5);
    position: relative;
}
/* Curved roller shadow — top and bottom darken to simulate cylinder */
#roller-window::before,
#roller-window::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 10px;
    z-index: 2;
    pointer-events: none;
}
#roller-window::before {
    top: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.1) 60%, transparent);
}
#roller-window::after {
    bottom: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0.1) 60%, transparent);
}
#roller-strip {
    position: absolute;
    left: 0; right: 0;
    transition: transform 0.4s cubic-bezier(0.22, 0.9, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.roller-cell {
    width: 100%;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Georgia', serif;
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
    color: #1a1a1a;
    flex-shrink: 0;
    background: linear-gradient(180deg,
        #d8d4cc 0%,
        #e8e4dc 15%,
        #f0ece4 40%,
        #f2eee6 50%,
        #f0ece4 60%,
        #e8e4dc 85%,
        #d8d4cc 100%
    );
    border-bottom: 1px solid rgba(0,0,0,0.08);
    letter-spacing: 1px;
}
.roller-unit {
    display: none;
}

/* Joker flag panel (replaces option-indicator) */
#joker-bezel {
    background: linear-gradient(180deg, #6a6a6a 0%, #555 20%, #4a4a4a 80%, #3a3a3a 100%);
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    padding: 3px;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.3);
}
#joker-panel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    background: #0a0806;
    border-radius: 2px;
    padding: 3px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.9);
}
.joker-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    font-family: 'Georgia', serif;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 0.5px;
    color: #333;
    background: linear-gradient(180deg, #181818 0%, #101010 100%);
    border: 1px solid #1a1a1a;
    border-radius: 1px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
    transition: all 0.3s;
}
.joker-flag-icon {
    font-size: 12px;
}
.joker-flag-label {
    font-size: 8px;
    white-space: nowrap;
}
.joker-flag.active.joker-flag-red {
    color: #ffe0d0;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(255,80,50,0.7) 0%, rgba(200,30,10,0.4) 50%, transparent 80%),
        linear-gradient(180deg, #2a1008 0%, #1a0804 100%);
    border-color: rgba(255,80,50,0.5);
    box-shadow:
        inset 0 1px 0 rgba(255,100,80,0.2),
        0 0 6px rgba(255,50,30,0.5),
        0 0 14px rgba(255,30,10,0.2);
}
.joker-flag.active.joker-flag-red .joker-flag-icon {
    color: #ff4433;
    text-shadow: 0 0 6px rgba(255,30,30,0.8);
    animation: icon-shimmer-red 1.8s ease-in-out infinite;
}
.joker-flag.active.joker-flag-blue {
    color: #d0e0ff;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(40,100,255,0.7) 0%, rgba(20,60,200,0.4) 50%, transparent 80%),
        linear-gradient(180deg, #081028 0%, #040818 100%);
    border-color: rgba(60,120,255,0.5);
    box-shadow:
        inset 0 1px 0 rgba(80,140,255,0.2),
        0 0 6px rgba(40,100,255,0.5),
        0 0 14px rgba(20,60,255,0.2);
}
.joker-flag.active.joker-flag-blue .joker-flag-icon {
    color: #4488ff;
    text-shadow: 0 0 6px rgba(40,100,255,0.8);
    animation: icon-shimmer-blue 2.5s ease-in-out infinite;
}
.joker-flag.consumed {
    animation: joker-consume 0.5s ease-out;
}

/* Streak LCD display (3 digits, 7-seg calculator style) */
#streak-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#streak-display {
    position: relative;
    background: linear-gradient(180deg, #5a5a5a 0%, #484848 100%);
    border: 1px solid #333;
    border-radius: 4px;
    padding: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
}
#streak-window {
    background: linear-gradient(180deg, #9aa878 0%, #8a9868 50%, #7a8858 100%);
    border-radius: 2px;
    padding: 5px 6px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    gap: 2px;
}
#streak-right-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    margin-left: 1px;
}
#streak-lcd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    gap: 0;
}
#streak-lcd-unit span {
    font-size: 4px;
    font-weight: bold;
    color: #2a3018;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
    display: block;
}
#streak-display.maxed #streak-lcd-unit span {
    color: rgba(50,60,30,0.12);
}
@keyframes lcd-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.15; }
}
#streak-display.urgent #streak-lcd-unit {
    animation: lcd-blink 0.6s ease-in-out infinite;
}
/* Reuse seg-digit but smaller for streak */
#streak-window .seg-digit {
    width: 14px;
    height: 24px;
    transform: skewX(-8deg);
}
#streak-window .seg-a, #streak-window .seg-d, #streak-window .seg-g {
    left: 2px; width: 10px; height: 2px;
}
#streak-window .seg-a { top: 0; }
#streak-window .seg-g { top: 11px; }
#streak-window .seg-d { bottom: 0; }
#streak-window .seg-b, #streak-window .seg-c,
#streak-window .seg-e, #streak-window .seg-f {
    width: 2px; height: 10px;
}
#streak-window .seg-f { left: 0; top: 1.5px; }
#streak-window .seg-b { right: 0; top: 1.5px; }
#streak-window .seg-e { left: 0; top: 12.5px; }
#streak-window .seg-c { right: 0; top: 12.5px; }
/* LCD segments: dark on olive background, no glow */
#streak-window .seg {
    background: rgba(50,60,30,0.12);
    border-radius: 1px;
    box-shadow: none;
}
#streak-window .seg.on {
    background: #2a3018;
    box-shadow: none;
}
/* Off state: display blank */
#streak-display.maxed #streak-window .seg,
#streak-display.maxed #streak-window .seg.on {
    background: rgba(50,60,30,0.08);
    box-shadow: none;
}

/* Lock indicator in streak LCD (right of digits, top half) */
#streak-lock {
    position: relative;
    width: 8px;
    height: 12px;
}
.lock-shackle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 4px;
    border: 2px solid rgba(50,60,30,0.12);
    border-bottom: none;
    border-radius: 3px 3px 0 0;
}
.lock-body {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 6px;
    background: rgba(50,60,30,0.12);
    border-radius: 1px;
}
#streak-lock.on .lock-shackle {
    border-color: #2a3018;
}
#streak-lock.on .lock-body {
    background: #2a3018;
}

/* DecaPulse dot-matrix LED display */
#instrument #sect-decapulse {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#decapulse-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
#decapulse-label {
    font-size: 6px;
    color: #666;
    letter-spacing: 0.5px;
    text-align: center;
}
#decapulse-display {
    background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
    border: 1px solid #1a1a1a;
    border-radius: 4px;
    padding: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
}
#decapulse-display.active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06),
                0 0 12px rgba(255,20,20,0.15);
}
#decapulse-window {
    background: #080202;
    border-radius: 2px;
    padding: 4px 5px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
    display: grid;
    grid-template-columns: repeat(11, 5px);
    grid-template-rows: repeat(7, 5px);
    gap: 2px;
}
.dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #1a0808;
    box-shadow: inset 0 0 1px rgba(0,0,0,0.4);
    transition: background 0.12s, box-shadow 0.12s;
}
.dot.on {
    background: radial-gradient(circle at 40% 35%, #ff4a3a, #cc1010);
    box-shadow:
        0 0 3px rgba(255,30,20,0.9),
        0 0 8px rgba(255,10,10,0.5),
        0 0 14px rgba(255,0,0,0.2);
}

/* Nameplate */
.machine-nameplate {
    padding: 3px 10px;
    background: linear-gradient(180deg, #c0b090 0%, #a89870 50%, #8a7850 100%);
    border: 1px solid #5a4a30;
    border-radius: 2px;
    font-size: 7px; letter-spacing: 2px; color: #2a2010; line-height: 10px;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
    flex-shrink: 0;
    align-self: center;
}
/* DecaPulse: screwed silver metal plate, engraved text */
#sect-decapulse .machine-nameplate {
    position: relative;
    padding: 5px 16px;
    background: linear-gradient(180deg, #d0d0d0 0%, #b8b8b8 30%, #a0a0a0 70%, #888 100%);
    border: 1px solid #666;
    font-family: 'Segoe Script', 'Comic Sans MS', cursive;
    font-style: italic;
    letter-spacing: 1px;
    color: #333;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.5),
        inset 0 -1px 0 rgba(0,0,0,0.2);
    text-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 -0.5px 0 rgba(0,0,0,0.15);
    margin-right: 10px;
}
#sect-decapulse .machine-nameplate::before,
#sect-decapulse .machine-nameplate::after {
    content: '';
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #aaa, #666);
    border: 0.5px solid #555;
    box-shadow: inset 0 0.5px 1px rgba(0,0,0,0.4);
    top: 50%;
    transform: translateY(-50%);
}
#sect-decapulse .machine-nameplate::before { left: 3px; }
#sect-decapulse .machine-nameplate::after { right: 3px; }
.nameplate-sub {
    font-size: 6px;
    letter-spacing: 4px;
    color: #3a3018;
}
}

/* Knob */
}

/* ============================================================
   SECTION 4: LED SCORE DISPLAY (CSS 7-segment)
   ============================================================ */
#instrument #sect-score {
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    padding-bottom: 20px;
}
.led-label {
    font-size: 8px; color: #663333;
    letter-spacing: 2px; text-transform: uppercase;
}

/* Metallic bezel around LED display */
#led-bezel {
    background: linear-gradient(180deg, #6a6a6a 0%, #555 20%, #4a4a4a 80%, #3a3a3a 100%);
    border: 1px solid #2a2a2a;
    border-radius: 5px;
    padding: 4px;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.3);
    width: 100%;
}
#led-window {
    background: #0c0202;
    border-radius: 3px;
    padding: 10px 10px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.95);
    display: flex;
    justify-content: center;
    gap: 6px;
}

/* Single 7-seg digit — skewed but inside a straight bezel */
.seg-digit {
    position: relative;
    width: 22px;
    height: 38px;
    flex-shrink: 0;
    transform: skewX(-6deg);
}

/* Segment base (ghost / off) */
.seg-digit .seg {
    position: absolute;
    background: rgba(255,10,10,0.06);
    border-radius: 1.5px;
    transition: background 0.08s, box-shadow 0.08s;
}

/* Horizontal segments */
.seg-digit .seg-a, .seg-digit .seg-d, .seg-digit .seg-g {
    left: 3px; width: 16px; height: 3px;
}
.seg-digit .seg-a { top: 0; }
.seg-digit .seg-g { top: 17.5px; }
.seg-digit .seg-d { bottom: 0; }

/* Vertical segments */
.seg-digit .seg-b, .seg-digit .seg-c, .seg-digit .seg-e, .seg-digit .seg-f {
    width: 3px; height: 16px;
}
.seg-digit .seg-f { left: 0; top: 2px; }
.seg-digit .seg-b { right: 0; top: 2px; }
.seg-digit .seg-e { left: 0; top: 20px; }
.seg-digit .seg-c { right: 0; top: 20px; }

/* Decimal point */
.seg-digit .seg-dp {
    width: 3px; height: 3px;
    border-radius: 50%;
    right: -5px; bottom: 0;
}

/* Lit segment — bright red with glow */
.seg-digit .seg.on {
    background: #ff1a1a;
    box-shadow:
        0 0 3px rgba(255,30,30,0.8),
        0 0 8px rgba(255,10,10,0.5),
        0 0 18px rgba(255,0,0,0.2);
}

/* Incrementing animation — extra brightness */
#led-window.incrementing .seg.on {
    background: #ff5050;
    box-shadow:
        0 0 5px rgba(255,60,60,1),
        0 0 12px rgba(255,20,20,0.7),
        0 0 24px rgba(255,0,0,0.3);
}

/* ============================================================
   CONSOLE (right column)
   ============================================================ */
#console {
    width: 400px;
    align-self: stretch;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 10px;
    padding: 4px;
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: #32281e #0a0806;
    border-left: 1px solid #1a1510;
}
#console::-webkit-scrollbar { width: 4px; }
#console::-webkit-scrollbar-track { background: #0a0806; }
#console::-webkit-scrollbar-thumb { background: #32281e; border-radius: 2px; }
.console-line {
    display: flex; gap: 6px; align-items: baseline;
    padding: 1px 2px; border-radius: 2px;
    animation: console-fade-in 0.3s ease-out;
}
.console-line .time { color: #8a7a60; flex-shrink: 0; font-size: 10px; font-weight: bold; }
.console-line .msg { flex: 1; }
.console-line.hit .msg { color: #ffb450; }
.console-line.gain .msg { color: #66cc55; }
.console-line.streak .msg { color: #44ccdd; }
.console-line.shop .msg { color: #cc66ee; }
.console-line.joker-red .msg { color: #cc2222; }
.console-line.joker-blue .msg { color: #4488ff; }
.console-line.miss .msg { color: #6b3020; }
@keyframes console-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   SECTION 5: PLANCKOSCOPE
   ============================================================ */
#instrument #sect-scope {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-bottom: 20px;
}
#scope-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
}
#scope-frame {
    position: relative;
    flex: 1;
    background: #080808;
    border: 1px solid #1a1a1a;
    border-radius: 3px;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.8);
    overflow: hidden;
}
#scope-canvas {
    display: block;
    width: 100%;
    height: 60px;
}
/* VU-meter LED bargraph */
#scope-vumeter {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1px;
    padding: 3px 3px;
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
    border-radius: 3px;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.8);
}
.vu-led {
    width: 8px;
    flex: 1;
    border-radius: 1px;
    background: #1a1a1a;
    box-shadow: inset 0 0 1px rgba(0,0,0,0.5);
    transition: background 0.15s, box-shadow 0.15s;
}
/* LED colors when lit — bottom green, mid yellow, top red */
.vu-led.on[data-level="1"],
.vu-led.on[data-level="2"],
.vu-led.on[data-level="3"],
.vu-led.on[data-level="4"] {
    background: radial-gradient(ellipse at 50% 40%, #ff3322, #aa1108);
    box-shadow: 0 0 4px rgba(255,30,20,0.6), 0 0 8px rgba(255,10,10,0.3);
}
.vu-led.on[data-level="5"],
.vu-led.on[data-level="6"] {
    background: radial-gradient(ellipse at 50% 40%, #ffcc22, #bb8800);
    box-shadow: 0 0 4px rgba(255,200,30,0.6), 0 0 8px rgba(255,180,10,0.3);
}
.vu-led.on[data-level="7"],
.vu-led.on[data-level="8"],
.vu-led.on[data-level="9"],
.vu-led.on[data-level="10"] {
    background: radial-gradient(ellipse at 50% 40%, #44dd22, #228808);
    box-shadow: 0 0 4px rgba(60,220,30,0.6), 0 0 8px rgba(40,200,10,0.3);
}
.shop-icon-scope {
    font-size: 24px;
    color: #44aacc;
    text-shadow: 0 0 8px rgba(60,160,200,0.4);
}

/* ============================================================
   SECTION 6: PLANCKTEST
   ============================================================ */
.shop-icon-test {
    font-size: 24px;
    color: #cc8822;
    text-shadow: 0 0 8px rgba(200,130,30,0.4);
}
#instrument #sect-test {
    padding: 16px 50px;
}
#test-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}
/* DYMO embossed red label */
#test-label {
    padding: 3px 12px;
    background: linear-gradient(180deg, #cc2222 0%, #aa1818 50%, #881010 100%);
    border: 1px solid #660a0a;
    border-radius: 2px;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #cc2222;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.6), 0 1px 0 rgba(255,100,100,0.15);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 1px 2px rgba(0,0,0,0.4);
    /* Embossed: lighter raised text */
    -webkit-text-stroke: 0.3px rgba(255,200,200,0.3);
}
/* Vintage push-button */
#test-push-btn {
    padding: 6px 22px;
    border-radius: 4px;
    border: 1px solid #555;
    background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 50%, #1a1a1a 100%);
    box-shadow:
        0 3px 6px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.12);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: box-shadow 0.05s, transform 0.05s;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #cc3322;
    text-shadow: 0 0 6px rgba(200,40,20,0.4);
}
#test-push-btn:hover {
    border-color: #888;
    color: #ff4433;
    text-shadow: 0 0 8px rgba(255,50,30,0.5);
}
#test-push-btn:active {
    transform: translateY(2px);
    box-shadow:
        0 1px 2px rgba(0,0,0,0.6),
        inset 0 2px 4px rgba(0,0,0,0.4);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ---- Hamburger hidden on desktop ---- */
#hamburger-btn { display: none; }
#toolbar-items { display: contents; }

@media (max-width: 800px) {
    /* ---- Hamburger menu ---- */
    #hamburger-btn {
        display: block;
        background: none; border: 1px solid #4a3a20; border-radius: 4px;
        color: #c0a060; font-size: 22px; padding: 2px 8px;
        cursor: pointer;
    }
    #toolbar-items {
        display: none;
        position: absolute; top: 100%; right: 0;
        background: #141210; border: 1px solid #3a3020; border-radius: 6px;
        padding: 8px; margin-top: 4px;
        flex-direction: column; gap: 4px;
        z-index: 400;
        min-width: 44px;
    }
    #toolbar-items.mobile-open {
        display: flex;
    }
    #toolbar-items > a,
    #toolbar-items > button,
    #toolbar-items > div {
        width: 100%;
    }
    #toolbar { position: fixed; top: 6px; right: 8px; z-index: 300; }

    /* ---- Page title ---- */
    #page-title {
        flex-direction: column;
        gap: 2px;
        padding-top: 6px;
    }
    #page-title h1 { font-size: 22px; letter-spacing: 4px; }
    #page-title p { font-size: 11px; }

    /* ---- Layout: grid for mobile (bonus+shop side by side, then stack, then console) ---- */
    #layout {
        display: grid;
        grid-template-columns: min-content 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "bonus shop"
            "instrument instrument"
            "console console";
        padding: 8px 0;
        gap: 6px;
        width: 100%;
        box-sizing: border-box;
    }
    #bonus { grid-area: bonus; margin-left: 4px; }
    #shop { grid-area: shop; margin-right: 4px; overflow: hidden; }
    #center-column { grid-area: instrument; padding-left: 22px; padding-right: 22px; box-sizing: border-box; min-width: 0; }
    #console { grid-area: console; margin: 0 4px; }

    /* ---- Bonus + Shop side by side, narrower ---- */
    #bonus {
        width: 80px;
        min-width: 80px;
        padding-right: 4px;
        font-size: 10px;
    }
    #bonus .shop-item { padding: 6px 6px; }
    #bonus .shop-icon { font-size: 18px; }
    #bonus .shop-name { font-size: 10px; }
    #bonus .shop-desc { font-size: 8px; }
    #bonus .bonus-unlock-hint { font-size: 7px; }
    #bonus .bonus-status { font-size: 9px; }

    #shop {
        border-right: none;
    }
    #shop-header { padding: 4px 6px 3px; }
    #shop-header h3 { font-size: 10px; letter-spacing: 3px; }
    #boson-balance { font-size: 13px; }

    #shop-columns { flex-wrap: nowrap; overflow-x: auto; }
    #shop-items, #shop-available, #shop-owned {
        width: 80px;
        min-width: 70px;
        flex-shrink: 1;
        padding: 4px 4px;
        gap: 5px;
    }
    #shop h4 { font-size: 8px; letter-spacing: 2px; }
    #shop .shop-item { padding: 5px 5px; }
    #shop .shop-icon { font-size: 18px; }
    #shop .shop-name { font-size: 9px; letter-spacing: 0; }
    #shop .shop-desc { font-size: 7px; }
    #shop .shop-price { font-size: 9px; }
    #shop .shop-buy { font-size: 9px; padding: 3px 8px; }
    #shop .shop-sell { font-size: 9px; padding: 3px 8px; }

    /* ---- Instrument: fill container, bus stays in padding ---- */
    #instrument { width: 100%; box-sizing: border-box; overflow: visible; }
    #farm-stack { overflow: visible; }

    /* ---- Console: bottom, full width ---- */
    #console {
        width: 100%;
        height: 120px;
        border-left: none;
        border-top: 1px solid #1a1510;
        font-size: 9px;
    }

    /* ---- Clock ---- */
    .digit { font-size: 42px; width: 30px; }
    .colon { font-size: 36px; width: 12px; }
    #clock-frame { padding: 6px 8px; }

    /* ---- Indicators ---- */
    .indicator { font-size: 8px; padding: 3px 5px; }

    /* ---- Galvanometers & gauges ---- */
    .galvanometer, .thermometer { width: 65px; height: 65px; }

    /* ---- Score LED ---- */
    #led-window { padding: 4px 4px; gap: 1px; }
    .seg-digit { width: 14px; height: 24px; }
    .seg-digit .seg-a, .seg-digit .seg-d, .seg-digit .seg-g { left: 2px; width: 10px; }
    .seg-digit .seg-g { top: 11px; }
    .seg-digit .seg-b, .seg-digit .seg-c,
    .seg-digit .seg-e, .seg-digit .seg-f { height: 10px; }
    .seg-digit .seg-e, .seg-digit .seg-c { top: 12.5px; }

    /* ---- DecaPulse ---- */
    #decapulse-window {
        grid-template-columns: repeat(11, 4px);
        grid-template-rows: repeat(7, 4px);
        gap: 1px; padding: 3px 4px;
    }
    .dot { width: 4px; height: 4px; }

    /* ---- Binary clock ---- */
    .bcd-bulb { width: 10px; height: 10px; }
    .bcd-col { gap: 3px; }
    .bcd-col.bcd-sep { margin-left: 6px; }
    #clock-binary { padding: 6px 8px; }

    /* ---- Barcode ---- */
    #clock-barcode { height: 60px; padding: 4px 6px; }
    .bc-label { font-size: 11px; letter-spacing: 2px; }

    /* ---- Farm rows ---- */
    .farm-row { padding: 6px 8px; gap: 10px; }
    .rota-unit .farm-row { padding: 6px 16px; }
    .machine-nameplate { font-size: 10px; }
    .nameplate-sub { font-size: 8px; }

    /* ---- RotaLepton crank ---- */
    .rota-crank-wrap { transform: scale(0.85); }

    /* ---- VocaPlanck speaker ---- */
    .voca-chassis { width: 76px; height: 54px; }

    /* ---- Overlays ---- */
    #pause-panel, #autoplay-panel { min-width: 0; width: 92vw; padding: 16px; }
    #ai-panel { width: 95vw; max-width: 95vw; padding: 16px 12px; }
    #ai-context { height: 200px; font-size: 10px; }
}