/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,sans-serif;background:#0d0d0d;color:#e0e0e0;min-height:100vh;overflow-x:hidden}

/* ── Game wrapper ── */
#game-wrapper{display:flex;flex-direction:column;min-height:100vh;position:relative}

/* ── Top bar ── */
#top-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;background:#111;border-bottom:1px solid #222}
.top-left{display:flex;align-items:center;gap:12px}
.brand{font-weight:700;font-size:1rem;color:#FFC107;text-decoration:none;letter-spacing:-.3px;white-space:nowrap}
.game-controls{display:flex;gap:4px}
.ctrl-btn{background:none;border:1px solid #333;border-radius:6px;width:32px;height:32px;display:grid;place-items:center;cursor:pointer;transition:.2s}
.ctrl-btn svg{width:16px;height:16px;fill:#aaa}
.ctrl-btn:hover{border-color:#FFC107;background:rgba(255,193,7,.08)}
.ctrl-btn:hover svg{fill:#FFC107}

.stats{display:flex;gap:16px}
.stat-item{font-size:.8rem;color:#888;display:flex;align-items:center;gap:5px;white-space:nowrap}
.stat-value{font-weight:700;font-size:1rem;color:#FFC107}

/* ── Progress bar ── */
#progress-bar-container{height:3px;background:#1a1a1a}
#progress-bar{height:100%;width:0;background:linear-gradient(90deg,#FFC107,#ff9800);transition:width .4s ease}

/* ── Game content ── */
#game-content{flex:1;padding:20px 16px 40px;max-width:960px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:20px}

/* ── Problem statement ── */
#problem-section{background:#161620;border:1px solid #252535;border-radius:10px;padding:16px 20px}
#problem-label{font-size:.75rem;text-transform:uppercase;letter-spacing:1px;color:#888;margin-bottom:6px}
#problem-text{font-size:1.05rem;color:#f0f0f0;line-height:1.6}

/* ── Builder layout ── */
#builder-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;flex:1}

/* ── Left: Block zones ── */
#builder-left{display:flex;flex-direction:column;gap:16px}
.zone-section{display:flex;flex-direction:column;gap:6px;flex:1}
.zone-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.8px;color:#888;font-weight:600}
.zone-hint{font-size:.7rem;text-transform:none;letter-spacing:0;color:#666;font-weight:400}

.drop-zone{background:#111118;border:2px dashed #2a2a3a;border-radius:10px;padding:10px;min-height:120px;display:flex;flex-direction:column;gap:6px;transition:border-color .2s,background .2s}
.drop-zone.drag-over{border-color:#FFC107;background:rgba(255,193,7,.04)}

/* ── Code blocks ── */
.code-block{font-family:'Fira Code','Consolas',monospace;font-size:.85rem;padding:10px 14px;background:#1e1e2e;border:1px solid #333;border-radius:8px;color:#e0e0e0;cursor:grab;user-select:none;transition:transform .15s,box-shadow .15s,opacity .15s;position:relative;line-height:1.45}
.code-block:active{cursor:grabbing;transform:scale(1.02);box-shadow:0 6px 20px rgba(0,0,0,.4)}
.code-block.dragging{opacity:.35;transform:scale(.95)}
.code-block.drop-above::before{content:'';position:absolute;top:-4px;left:0;right:0;height:3px;background:#FFC107;border-radius:2px}
.code-block.drop-below::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:3px;background:#FFC107;border-radius:2px}
.code-block.correct-flash{border-color:#4caf50;background:rgba(76,175,80,.1);animation:flashCorrect .5s}
.code-block.wrong-flash{border-color:#f44336;background:rgba(244,67,54,.1);animation:flashWrong .5s}

@keyframes flashCorrect{0%,100%{background:rgba(76,175,80,.1)}50%{background:rgba(76,175,80,.2)}}
@keyframes flashWrong{0%,100%{background:rgba(244,67,54,.1)}50%{background:rgba(244,67,54,.2)}}

/* Drag placeholder */
.block-placeholder{border:2px dashed #FFC107;border-radius:8px;min-height:40px;background:rgba(255,193,7,.05);transition:min-height .2s}

/* ── Right: Code preview ── */
#builder-right{display:flex;flex-direction:column}
#preview-section{flex:1;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;border:1px solid #252535;background:#1e1e2e}
#preview-header{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#161620;border-bottom:1px solid #252535}
.code-dot{width:10px;height:10px;border-radius:50%}
.code-dot.red{background:#ff5f57}
.code-dot.yellow{background:#febc2e}
.code-dot.green{background:#28c841}
.code-filename{font-size:.75rem;color:#666;margin-left:6px;font-family:'Fira Code',monospace}

#preview-code{flex:1;padding:14px 16px;margin:0;overflow:auto;line-height:1.7;font-size:.82rem;font-family:'Fira Code','Consolas',monospace;color:#ccc;white-space:pre}
#preview-text{font-family:inherit;font-size:inherit;color:inherit}

/* Syntax colours */
.tok-keyword{color:#c678dd}
.tok-string{color:#98c379}
.tok-number{color:#d19a66}
.tok-comment{color:#5c6370;font-style:italic}
.tok-function{color:#61afef}
.tok-operator{color:#56b6c2}
.tok-variable{color:#e06c75}
.tok-punctuation{color:#abb2bf}
.tok-method{color:#61afef}
.tok-property{color:#e5c07b}
.tok-boolean{color:#d19a66}
.tok-builtin{color:#e5c07b}

/* Line numbers in preview */
.preview-line{display:flex;gap:0}
.line-num{display:inline-block;min-width:28px;text-align:right;padding-right:12px;color:#444;user-select:none;flex-shrink:0}
.line-code{flex:1}

/* ── Action buttons ── */
#actions-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{padding:10px 24px;border:none;border-radius:8px;font-family:'Inter',sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}
.btn-primary{background:#FFC107;color:#111;box-shadow:0 4px 12px rgba(255,193,7,.25)}
.btn-primary:hover{background:#ffcd38;transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,193,7,.3)}
.btn-primary:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.btn-secondary{background:#1e1e2e;color:#aaa;border:1px solid #333}
.btn-secondary:hover{border-color:#FFC107;color:#FFC107}

#next-btn{align-self:center;margin-top:4px}

/* ── Feedback ── */
#feedback-section{background:#161620;border:1px solid #252535;border-radius:10px;padding:16px 20px;animation:fadeSlideIn .3s ease}
#feedback-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-weight:700;font-size:1rem}
#feedback-icon{font-size:1.4rem}
#feedback-explanation{font-size:.9rem;color:#bbb;line-height:1.6}
#feedback-section.correct{border-color:#4caf50;background:rgba(76,175,80,.06)}
#feedback-section.correct #feedback-label{color:#4caf50}
#feedback-section.wrong{border-color:#f44336;background:rgba(244,67,54,.06)}
#feedback-section.wrong #feedback-label{color:#f44336}
#feedback-section code{font-family:'Fira Code',monospace;font-size:.82rem;background:#1a1a2e;padding:2px 6px;border-radius:4px;color:#e0e0e0}

/* ── Float score ── */
.float-score{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);font-size:3rem;font-weight:800;color:#FFC107;pointer-events:none;animation:floatUp .9s ease-out forwards;z-index:100;text-shadow:0 0 20px rgba(255,193,7,.4)}
@keyframes floatUp{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-120%) scale(1.5)}}

/* ── Screen overlays ── */
.screen-overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(10,10,14,.92);backdrop-filter:blur(10px);z-index:50;padding:24px;text-align:center;animation:fadeSlideIn .4s ease}
.screen-overlay.hidden{display:none}
.screen-title{font-size:2.2rem;font-weight:800;color:#fff;margin-bottom:10px}
.screen-subtitle{font-size:1rem;color:#aaa;max-width:440px;line-height:1.6;margin-bottom:28px}
.screen-score{font-size:3.4rem;font-weight:800;color:#FFC107;margin-bottom:4px}
.screen-score-label{font-size:.9rem;color:#888;margin-bottom:24px}
.screen-stats{display:flex;gap:32px;margin-bottom:30px}
.screen-stat{text-align:center}
.screen-stat-value{font-size:1.5rem;font-weight:700;color:#fff}
.screen-stat-label{font-size:.75rem;color:#777;margin-top:2px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

@keyframes fadeSlideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ── Hint highlight ── */
.hint-highlight{border-color:#FFC107 !important;box-shadow:0 0 12px rgba(255,193,7,.2);animation:hintPulse 1.2s ease-in-out infinite}
@keyframes hintPulse{0%,100%{box-shadow:0 0 12px rgba(255,193,7,.15)}50%{box-shadow:0 0 20px rgba(255,193,7,.35)}}

/* ── Toast ── */
.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);padding:10px 22px;border-radius:8px;font-size:.9rem;font-weight:600;z-index:200;animation:toastIn .3s ease,toastOut .3s ease 1.7s forwards;pointer-events:none}
.toast.correct{background:#4caf50;color:#fff}
.toast.wrong{background:#f44336;color:#fff}
.toast.info{background:#2196F3;color:#fff}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,-20px)}}

/* ── Hidden utility ── */
.hidden{display:none !important}

/* ── Responsive ── */
@media(max-width:768px){
  #builder-layout{grid-template-columns:1fr}
  #builder-right{max-height:220px}
  #preview-section{max-height:220px}
  #game-content{padding:16px 12px 32px}
  .screen-title{font-size:1.6rem}
}

@media(max-width:600px){
  .brand{font-size:.85rem}
  .ctrl-btn{width:28px;height:28px}
  .ctrl-btn svg{width:14px;height:14px}
  .stat-item{font-size:.72rem}
  .stat-value{font-size:.85rem}
  .stats{gap:10px}
  .code-block{font-size:.78rem;padding:8px 10px}
  #problem-text{font-size:.95rem}
  .btn{font-size:.82rem;padding:9px 18px}
}

@media(max-width:380px){
  #top-bar{padding:8px 10px}
  .brand{font-size:.78rem}
  .stats{gap:6px;width:100%;justify-content:center}
  .stat-item{font-size:.68rem}
  .stat-value{font-size:.78rem}
}