* {
      box-sizing: border-box;
      user-select: none;
    }
    body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: 'Fredoka', sans-serif;
      background: #38bdf8;
      color: #1e1b2e;
    }
    .font-code {
      font-family: 'JetBrains Mono', monospace;
    }
    .cel-box {
      background: #fffdf7;
      border: 3px solid #1e1b2e;
      box-shadow: 0 5px 0 #1e1b2e;
      border-radius: 18px;
    }
    .cel-btn {
      background: #ffd166;
      color: #1e1b2e;
      border: 3px solid #1e1b2e;
      box-shadow: 0 4px 0 #1e1b2e;
      border-radius: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s;
    }
    .cel-btn:hover { background: #ffe08a; }
    .cel-btn:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 #1e1b2e;
    }
    .cel-btn.mint { background: #6ee7b7; }
    .cel-btn.mint:hover { background: #86efac; }
    .cel-btn.pink { background: #ff8fab; }
    .cel-btn.pink:hover { background: #ffa6bc; }
    .cel-btn.sky { background: #7dd3fc; }
    .cel-btn.sky:hover { background: #a5e1fd; }

    /* Visual Blockly-Style Coding Blocks */
    .scratch-block {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 10px;
      border: 2.5px solid #1e1b2e;
      box-shadow: 0 3px 0 #1e1b2e;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12.5px;
      font-weight: 700;
      cursor: grab;
      position: relative;
      transition: transform 0.12s ease;
    }
    .scratch-block::before {
      content: '';
      width: 14px;
      height: 5px;
      background: rgba(255,255,255,0.45);
      border-radius: 3px;
      position: absolute;
      top: 2px;
      left: 10px;
    }
    .scratch-block:hover {
      transform: translateY(-2px);
    }
    .scratch-block:active {
      cursor: grabbing;
      transform: scale(0.96);
    }
    .blk-yellow { background: #fde047; color: #1e1b2e; } /* Events */
    .blk-green  { background: #6ee7b7; color: #1e1b2e; } /* UI Controls */
    .blk-purple { background: #d8b4fe; color: #1e1b2e; } /* Variables / Math */
    .blk-blue   { background: #7dd3fc; color: #1e1b2e; } /* Control / Logic */
    .blk-coral  { background: #fda4af; color: #1e1b2e; } /* Functions / Strings */

    .c-block-wrapper {
      border-left: 6px solid #facc15;
      padding-left: 12px;
      margin: 4px 0;
    }
    .c-block-blue {
      border-left: 6px solid #38bdf8;
      padding-left: 12px;
      margin: 4px 0;
    }
    .c-block-green {
      border-left: 6px solid #34d399;
      padding-left: 12px;
      margin: 4px 0;
    }

    .code-slot {
      transition: all 0.15s ease;
      min-height: 30px;
    }
    .code-slot.drag-over {
      transform: scale(1.06);
      border-color: #ff8fab;
      background-color: rgba(255, 143, 171, 0.3);
    }
    .code-slot.active-slot {
      border-color: #ffd166;
      background-color: rgba(255, 209, 102, 0.25);
      border-style: solid;
    }

    @keyframes kawaiiBounce {
      0%, 100% { transform: translate(-50%, -100%) translateY(0px); }
      50% { transform: translate(-50%, -100%) translateY(-7px); }
    }
    .prompt-bubble {
      animation: kawaiiBounce 1.3s ease-in-out infinite;
    }
    .mcq-option {
      transition: transform 0.1s ease, background-color 0.15s ease;
    }
    .mcq-option:hover:not(:disabled) {
      transform: translateX(3px);
    }

    button:disabled {opacity:.5;cursor:not-allowed;}
    input:disabled,select:disabled{background:#e2e8f0;color:#475569;}
    #story-dialog {width:min(580px,calc(100vw - 28px));max-height:85vh;overflow-y:auto;padding:26px;border:3px solid #1e1b2e;border-radius:24px;background:#fffdf7;color:#1e1b2e;box-shadow:0 15px 65px #10142b66;}
    #story-dialog::backdrop {background:#10243bb3;backdrop-filter:blur(5px);}
    #story-dialog h2 {font-size:26px;margin:0;}
    #story-dialog h3 {font-size:17px;margin:18px 0 7px;}
    #story-dialog p,#story-dialog li {font-size:14px;line-height:1.65;}
    #story-dialog ol {list-style:decimal;padding-left:22px;margin:8px 0;}
    #story-dialog li {padding-left:3px;margin:6px 0;}
    .isles-emblem {display:block;width:27px;height:27px;}
    #submit-confirm-dialog {width:min(440px,calc(100vw - 32px));padding:26px;border:3px solid #1e1b2e;border-radius:24px;background:#fffdf7;color:#1e1b2e;box-shadow:0 12px 60px #10142b66;}
    #submit-confirm-dialog::backdrop {background:#10243bb3;backdrop-filter:blur(5px);}
    #submit-confirm-dialog h2 {font-size:24px;margin:0 0 14px;}
    #submit-confirm-dialog p {font-size:14px;line-height:1.6;margin:12px 0;}
    #submit-confirm-details {background:#e0f2fe;padding:14px;border-radius:14px;white-space:pre-line;}
    #achievement {position:fixed;left:50%;bottom:88px;transform:translate(-50%,30px) scale(.94);opacity:0;z-index:40;pointer-events:none;transition:opacity .5s,transform .65s cubic-bezier(.2,.9,.2,1.2);width:min(520px,90vw);text-align:center;color:#fff8d6;background:linear-gradient(135deg,#151637ee,#43225eee);border:2px solid #f9d879;border-radius:24px;padding:18px 24px;box-shadow:0 0 45px #ffd16655,0 12px 45px #10142b66;}
    #achievement.show {opacity:1;transform:translate(-50%,0) scale(1);}
    #achievement .eyebrow {letter-spacing:.2em;font-size:11px;color:#ffe6a2;text-transform:uppercase;}
    #achievement h2 {font-size:27px;margin:5px 0;color:#fff4bf;text-shadow:0 0 20px #f8c75c88;}
    #achievement p {font-size:13px;margin:6px 0;line-height:1.5;}
    #achievement .medal {font-size:36px;display:block;filter:drop-shadow(0 0 12px #ffd166);}
    #achievement-actions {display:none;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap;}
    #achievement.finale #achievement-actions {display:flex;pointer-events:auto;}
    #festival-confetti {position:fixed;inset:0;pointer-events:none;z-index:35;}
    @media(prefers-reduced-motion:reduce){#achievement{transition:opacity .3s;}}