:root{
      --primary: #f46636;
      --primary-hover: #e55a2b;
      --secondary: #31669c;
      --secondary-dark: #274f7a;
      --gray-50: #f9fafb;
      --gray-100: #f3f4f6;
      --gray-200: #e5e7eb;
      --gray-400: #9ca3af;
      --gray-500: #6b7280;
      --gray-600: #4b5563;
      --gray-700: #374151;
      --slate-700: #334155;
      --slate-800: #1e293b;
      --green-50: #f0fdf4;
      --green-500: #22c55e;
      --red-50: #fef2f2;
      --red-400: #f87171;
      --red-500: #ef4444;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html,body{
      height:100%;
      font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
      -webkit-font-smoothing: antialiased;
      background:var(--gray-50);
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .quiz-container{
      min-height:100%;
      display:flex;
      flex-direction:column;
      min-width:320px;
      padding-top: env(safe-area-inset-top, 0);
      padding-bottom: env(safe-area-inset-bottom, 0);
      padding-left: env(safe-area-inset-left, 0);
      padding-right: env(safe-area-inset-right, 0);
    }
    .quiz-title{font-size:clamp(1.125rem,5vw,1.25rem)}
    .quiz-question{font-size:clamp(1rem,4vw,1.25rem)}
    .quiz-option{font-size:clamp(0.875rem,3.5vw,1rem)}
    .quiz-small{font-size:clamp(0.75rem,3vw,0.875rem)}
    .quiz-result{font-size:clamp(2.5rem,12vw,3rem)}

    .header{background:white;border-bottom:1px solid var(--gray-100);padding:0.75rem 1rem}
    .header-inner{max-width:672px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
    .header-title{font-weight:700;color:var(--secondary)}
    .header-right{display:flex;align-items:center;gap:0.5rem}
    .header-subtitle{color:var(--gray-500);display:none}
    @media(min-width:640px){.header-subtitle{display:inline}.header-right{gap:0.75rem}}

    .lang-btn{display:flex;align-items:center;gap:0.25rem;padding:0.25rem 0.5rem;border-radius:0.5rem;background:var(--gray-100);border:none;cursor:pointer;font-weight:500;color:var(--gray-600);min-height:44px}
    .lang-btn:hover{background:var(--gray-200)}
    .icon{display:inline-block;vertical-align:middle}

    .progress-section{background:white;padding:0.5rem 1rem;border-bottom:1px solid var(--gray-100)}
    .progress-inner{max-width:672px;margin:0 auto}
    .progress-header{display:flex;justify-content:space-between;color:var(--gray-500);margin-bottom:0.25rem}
    .progress-bar{height:6px;background:var(--gray-100);border-radius:9999px;overflow:hidden}
    .progress-fill{height:100%;background:var(--secondary);transition:width 0.3s ease}

    /* timer disabled
    .timer-section{background:white;padding:0.5rem 1rem;border-bottom:1px solid var(--gray-100)}
    .timer-inner{max-width:672px;margin:0 auto}
    .timer-header{display:flex;justify-content:space-between;margin-bottom:0.25rem}
    .timer-text{font-weight:500;color:var(--primary)}
    .timer-text.warning{color:var(--red-500)}
    .timer-bar{height:8px;background:var(--gray-100);border-radius:9999px;overflow:hidden}
    .timer-fill{height:100%;background:var(--primary);transition:width 1s linear}
    .timer-fill.warning{background:var(--red-500)}
    */

    .main{flex:1;padding:1rem}
    @media(min-width:640px){.main{padding:1.5rem 1rem}}
    .main-inner{max-width:672px;margin:0 auto}

    /* Start screen */
    .start-container{min-height:100%;display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--gray-50)}
    .start-card{background:white;border-radius:1rem;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);max-width:28rem;width:100%;padding:2rem 1.5rem;text-align:center}
    .start-icon{font-size:3.5rem;margin-bottom:1rem}
    .start-title{font-size:1.5rem;font-weight:700;color:var(--secondary);margin-bottom:0.5rem}
    .start-description{color:var(--gray-600);margin-bottom:1.5rem;line-height:1.5}
    .start-rules{background:var(--gray-50);border-radius:0.75rem;padding:1rem;margin-bottom:1.5rem;text-align:left}
    .rule-item{display:flex;align-items:center;gap:0.75rem;padding:0.5rem 0}
    .rule-item:not(:last-child){border-bottom:1px solid var(--gray-100)}
    .rule-icon{font-size:1.25rem}
    .rule-text{color:var(--slate-700)}
    .start-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:1rem 1.5rem;background:var(--primary);color:white;border:none;border-radius:0.75rem;font-size:1.0625rem;font-weight:600;cursor:pointer;transition:background 0.15s;margin-bottom:1rem}
    .start-btn:hover{background:var(--primary-hover)}
    .lang-btn-start{display:inline-flex;align-items:center;gap:0.375rem;padding:0.5rem 0.75rem;background:var(--gray-100);border:none;border-radius:0.5rem;color:var(--gray-600);cursor:pointer;font-weight:500}
    .lang-btn-start:hover{background:var(--gray-200)}

    /* Result */
    .result-container{min-height:100%;display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--gray-50)}
    .result-card{background:white;border-radius:1rem;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);max-width:32rem;width:100%;padding:1.5rem;text-align:center}
    @media(min-width:640px){.result-card{padding:2rem}}
    .result-emoji{font-size:3.75rem;margin-bottom:1rem}
    .result-title{font-size:1.25rem;font-weight:700;color:var(--slate-800);margin-bottom:0.5rem}
    @media(min-width:640px){.result-title{font-size:1.5rem}}
    .result-percent{font-weight:700;color:var(--primary);margin-bottom:0.5rem}
    .result-score{color:var(--gray-500);margin-bottom:0.25rem}
    .result-message{color:var(--gray-600);margin-bottom:1.5rem}
    .result-buttons{display:flex;flex-direction:column;gap:0.75rem}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;font-weight:500;padding:0.75rem 1.5rem;border-radius:0.75rem;border:none;cursor:pointer;min-height:44px;text-decoration:none;transition:background-color 0.15s}
    .btn-primary{background:var(--primary);color:white}
    .btn-primary:hover{background:var(--primary-hover)}
    .btn-secondary{background:var(--secondary);color:white}
    .btn-secondary:hover{background:var(--secondary-dark)}
    .btn-ghost{background:var(--gray-100);color:var(--gray-700)}
    .btn-ghost:hover{background:var(--gray-200)}

    /* Anim */
    @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
    @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}
    @keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
    .shake{animation:shake .5s ease-in-out}
    .pulse{animation:pulse .8s ease-in-out infinite}
    .fade-in{animation:fadeIn .3s ease-out}
    .fade-out{opacity:0;transition:opacity .15s}
    .hidden{display:none !important}

    /* truth-or-myth specific */
    .statement-card{background:white;border-radius:0.75rem;padding:1.5rem;box-shadow:0 1px 3px rgba(0,0,0,0.1);margin-bottom:1rem}
    .statement-text{font-weight:600;color:var(--slate-800);line-height:1.6;text-align:center}
    .choices{display:flex;gap:0.75rem}
    @media(min-width:640px){.choices{gap:1rem}}
    .choice-btn{flex:1;padding:1rem;border-radius:0.75rem;border:3px solid var(--gray-200);background:white;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;min-height:80px;transition:all .15s}
    @media(min-width:640px){.choice-btn{padding:1.25rem;min-height:100px}}
    .choice-btn.truth{border-color:var(--green-500)}
    .choice-btn.truth:not(:disabled):hover{background:var(--green-50)}
    .choice-btn.myth{border-color:var(--red-400)}
    .choice-btn.myth:not(:disabled):hover{background:var(--red-50)}
    .choice-btn:disabled{cursor:default}
    .choice-btn.selected{border-color: var(--secondary); background: rgba(49,102,156,.05);}
    .choice-btn.correct{background:var(--green-50);border-color:var(--green-500)}
    .choice-btn.wrong{background:var(--red-50);border-color:var(--red-400)}
    .choice-btn.dimmed{opacity:.5}
    .choice-icon{font-size:1.75rem}
    .choice-label{font-weight:700;text-transform:uppercase;letter-spacing:.05em}
    .choice-btn.truth .choice-label{color:var(--green-500)}
    .choice-btn.myth .choice-label{color:var(--red-400)}
    
    /* quiz specific - two column layout with letters */
    #quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
    @media(min-width:640px){#quiz-options{gap:1rem}}
    .choice-btn.quiz-choice{flex:none;padding:0.75rem;min-height:64px;text-align:left;display:flex;flex-direction:row;align-items:flex-start;gap:0.75rem;position:relative}
    @media(min-width:640px){.choice-btn.quiz-choice{padding:1rem}}
    .choice-letter{width:32px;height:32px;min-width:32px;border-radius:50%;background-color:var(--gray-100);color:var(--slate-800);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.875rem;flex-shrink:0}
    .choice-btn.quiz-choice.correct .choice-letter{background-color:var(--green-500);color:white}
    .choice-btn.quiz-choice.wrong .choice-letter{background-color:var(--red-400);color:white}
    .choice-btn.quiz-choice:not(:disabled):hover .choice-letter{background-color:var(--secondary);color:white}
    .quiz-choice-content{display:flex;flex-direction:column;gap:0.5rem;flex:1;align-items:flex-start;height:100%;justify-content:center}
    .option-image{width:100%;display:flex;justify-content:center}
    .quiz-choice-label{color:var(--slate-800);text-transform:none;letter-spacing:0;line-height:1.5}
    .question-image{margin-top:1rem;width:100%;display:flex;justify-content:center}
    .explanation{margin-top:1rem;padding:0.75rem;border-radius:0.75rem;background:rgba(49,102,156,.03);border:1px solid rgba(49,102,156,.2)}
    @media(min-width:640px){.explanation{margin-top:1.5rem;padding:1rem}}
    .explanation-text{color:var(--gray-600);line-height:1.6}
    .timeout-text{color:var(--red-500);font-weight:500;margin-bottom:0.5rem}
    .next-btn{margin-top:0.75rem;display:inline-flex;align-items:center;gap:0.25rem;background:none;border:none;color:var(--primary);font-weight:500;cursor:pointer;padding:0}
    @media(min-width:640px){.next-btn{margin-top:1rem}}
    .next-btn:hover{color:var(--primary-hover)}