/**
 * Scratch Blocks CSS - Authentic Scratch block styling
 * =====================================================
 *
 * Creates visual blocks that closely match the real Scratch editor.
 * Includes language toggle support (Romanian/English).
 *
 * Usage:
 *   <span class="sb sb-motion">mergi (10) pași</span>
 *   <span class="sb sb-control sb-hat">când <sb class="sb-sensing">atingi [marginea v]</sb></span>
 *
 * Categories (matching Scratch colors):
 *   sb-motion    - Blue (#4C97FF)
 *   sb-looks     - Purple (#9966FF)
 *   sb-sound     - Pink (#CF63CF)
 *   sb-events    - Yellow (#FFBF00)
 *   sb-control   - Orange (#FFAB19)
 *   sb-sensing   - Cyan (#5CB1D6)
 *   sb-operators - Green (#59C059)
 *   sb-variables - Orange-Red (#FF8C1A)
 *   sb-myblocks  - Red (#FF6680)
 *
 * Block types:
 *   sb-hat       - Hat block (rounded top)
 *   sb-cap       - Cap block (flat bottom, stops script)
 *   sb-reporter  - Reporter (rounded ends, returns value)
 *   sb-boolean   - Boolean (pointed ends, returns true/false)
 *   sb-stack     - Stack block (default, has notches)
 *   sb-c         - C-block (wraps other blocks)
 */

/* ============================================
   BASE BLOCK STYLES
   ============================================ */

.sb {
    display: inline-block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    padding: 4px 8px;
    margin: 2px;
    border-radius: 4px;
    color: white;
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    box-shadow:
        0 1px 0 rgba(0,0,0,0.2),
        inset 0 -2px 0 rgba(0,0,0,0.1);
    position: relative;
    white-space: nowrap;
    vertical-align: middle;
}

/* Stack block notches (top and bottom) */
.sb::before {
    content: '';
    position: absolute;
    left: 12px;
    top: -3px;
    width: 16px;
    height: 3px;
    background: inherit;
    border-radius: 0 0 4px 4px;
}

.sb::after {
    content: '';
    position: absolute;
    left: 12px;
    bottom: -3px;
    width: 16px;
    height: 3px;
    background: inherit;
    border-radius: 4px 4px 0 0;
}

/* ============================================
   CATEGORY COLORS (Official Scratch Palette)
   ============================================ */

.sb-motion {
    background: #4C97FF;
    border: 1px solid #3d7fd9;
}

.sb-looks {
    background: #9966FF;
    border: 1px solid #7d4fe0;
}

.sb-sound {
    background: #CF63CF;
    border: 1px solid #b54db5;
}

.sb-events {
    background: #FFBF00;
    border: 1px solid #dba600;
    color: #000;
    text-shadow: none;
}

.sb-control {
    background: #FFAB19;
    border: 1px solid #db9215;
    color: #000;
    text-shadow: none;
}

.sb-sensing {
    background: #5CB1D6;
    border: 1px solid #4a9bbf;
}

.sb-operators {
    background: #59C059;
    border: 1px solid #45a045;
}

.sb-variables {
    background: #FF8C1A;
    border: 1px solid #db7615;
}

.sb-myblocks {
    background: #FF6680;
    border: 1px solid #e04d66;
}

/* ============================================
   BLOCK TYPE VARIATIONS
   ============================================ */

/* Hat block - rounded top, no top notch */
.sb-hat {
    border-radius: 16px 16px 4px 4px;
    padding-top: 8px;
}

.sb-hat::before {
    display: none;
}

/* Cap block - flat bottom, no bottom notch */
.sb-cap::after {
    display: none;
}

/* Reporter block - pill shape, returns value */
.sb-reporter {
    border-radius: 12px;
    padding: 2px 10px;
}

.sb-reporter::before,
.sb-reporter::after {
    display: none;
}

/* Boolean block - pointed hexagon ends */
.sb-boolean {
    padding: 2px 12px;
    clip-path: polygon(
        8px 0%,
        calc(100% - 8px) 0%,
        100% 50%,
        calc(100% - 8px) 100%,
        8px 100%,
        0% 50%
    );
}

.sb-boolean::before,
.sb-boolean::after {
    display: none;
}

/* C-block - wraps other blocks */
.sb-c {
    padding: 4px 8px 20px 8px;
    min-height: 40px;
}

.sb-c-slot {
    display: block;
    background: rgba(0,0,0,0.15);
    border-radius: 4px;
    min-height: 24px;
    margin: 4px 0 4px 12px;
    padding: 4px;
}

/* ============================================
   NESTED ELEMENTS
   ============================================ */

/* Input slots (rounded rectangle) */
.sb-input {
    display: inline-block;
    background: white;
    color: #333;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
    text-shadow: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
    min-width: 20px;
    text-align: center;
}

/* Dropdown slots */
.sb-dropdown {
    display: inline-block;
    background: white;
    color: #333;
    padding: 1px 16px 1px 6px;
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
    text-shadow: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
    position: relative;
}

.sb-dropdown::after {
    content: '▾';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8px;
    color: #666;
}

/* Boolean slot (diamond shape) */
.sb-bool-slot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: white;
    transform: rotate(45deg);
    margin: 0 4px;
    vertical-align: middle;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}

/* ============================================
   BLOCK STACKS (Vertical arrangement)
   ============================================ */

.sb-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.sb-stack .sb {
    margin: 0;
}

.sb-stack .sb + .sb {
    margin-top: -3px;
}

/* ============================================
   LANGUAGE TOGGLE SYSTEM
   ============================================ */

/* Language toggle button */
.scratch-lang-toggle {
    display: inline-flex;
    background: var(--bg-card, #1a1a2e);
    border: 1px solid var(--border, #2d2d44);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.85rem;
    margin: 0.5rem 0;
}

.scratch-lang-toggle button {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
}

.scratch-lang-toggle button.active {
    background: var(--accent-cyan, #06b6d4);
    color: #000;
}

.scratch-lang-toggle button:hover:not(.active) {
    background: rgba(255,255,255,0.1);
}

/* Language-specific text */
[data-lang-ro],
[data-lang-en] {
    display: none;
}

/* Default: Show Romanian */
html:not([data-scratch-lang="en"]) [data-lang-ro],
html[data-scratch-lang="ro"] [data-lang-ro] {
    display: inline;
}

/* When English selected */
html[data-scratch-lang="en"] [data-lang-en] {
    display: inline;
}

/* ============================================
   BLOCK DEMO CONTAINER
   ============================================ */

.scratch-demo {
    background: linear-gradient(135deg, #4c97ff 0%, #3d7fd9 100%);
    border-radius: 16px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow:
        0 4px 6px rgba(0,0,0,0.1),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

.scratch-demo-title {
    color: white;
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.scratch-demo-blocks {
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 1rem;
    display: inline-block;
}

/* ============================================
   INLINE BLOCK (within text)
   ============================================ */

.sb-inline {
    font-size: 11px;
    padding: 2px 6px;
    vertical-align: baseline;
    margin: 0 2px;
}

.sb-inline::before,
.sb-inline::after {
    display: none;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .sb {
        font-size: 11px;
        padding: 3px 6px;
    }

    .scratch-demo {
        padding: 1rem;
    }

    .scratch-lang-toggle button {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 400px) {
    .sb {
        font-size: 10px;
        padding: 2px 5px;
    }

    .sb-stack {
        transform: scale(0.9);
        transform-origin: left top;
    }
}

/* ============================================
   ANIMATION FOR BLOCKS
   ============================================ */

.sb-highlight {
    animation: sb-pulse 1.5s ease-in-out infinite;
}

@keyframes sb-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); box-shadow: 0 0 10px rgba(255,255,255,0.3); }
}