/* Global mobile-safety: prevent horizontal scroll, allow word-wrap */
html,body{overflow-x:hidden;max-width:100%}
body,main{min-width:0}
img,svg,iframe,video{max-width:100%;height:auto}
pre,code,.url-option,.phish-card .from-line{word-break:break-word;overflow-wrap:anywhere}
input,textarea,select{max-width:100%}

/* Tablet */
@media (max-width:1024px){
  .container{padding:0 1.25rem}
  section{padding:3rem 0}
  .nav-list a{padding:.5rem .65rem;font-size:.9rem}
  .brand-sub{font-size:.7rem}
  .card-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}

/* Mobile (≤768px) */
@media (max-width:768px){
  .nav{padding:.65rem 0;gap:.5rem}
  .menu-toggle{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:var(--color-surface-2);color:var(--color-text)}
  .menu-toggle svg{width:22px;height:22px}
  .nav-list{position:fixed;top:var(--header-h,60px);left:0;right:0;background:var(--color-surface);border-bottom:1px solid var(--color-border);flex-direction:column;align-items:stretch;padding:.75rem;padding-bottom:calc(.75rem + env(safe-area-inset-bottom,0));gap:.25rem;transform:translateY(-120%);transition:transform 300ms ease;box-shadow:var(--shadow-lg);max-height:calc(100vh - var(--header-h,60px));max-height:calc(100dvh - var(--header-h,60px));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .nav-list.open{transform:translateY(0)}
  .nav-list a{padding:.85rem 1rem;border-radius:8px;font-size:1rem}
  .brand{gap:.5rem;min-width:0;flex-shrink:1}
  .brand-mark{width:38px;height:38px;font-size:.95rem}
  .brand-mark::after{width:11px;height:11px;transform:translate(11px,-11px)}
  .brand-name{font-size:.78rem;line-height:1.15;white-space:normal}
  .brand-sub{display:none}
  .lang-switch button{padding:.35rem .55rem;font-size:.75rem}
  .icon-btn{width:38px;height:38px}
  .icon-btn svg{width:18px;height:18px}

  /* Hero */
  .hero{padding:3rem 0 4rem}
  .hero h1{font-size:1.875rem;line-height:1.2}
  .hero .lead{font-size:1rem;margin-bottom:1.5rem}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:2rem}
  .hero-stat{padding:.85rem 1rem}
  .hero-stat-num{font-size:1.5rem}
  .hero-stat-lbl{font-size:.75rem}

  /* Tip banner */
  .tip-banner{margin-top:-2rem;flex-direction:column;text-align:center;align-items:center;padding:1.25rem;gap:.85rem}
  .tip-banner-icon{width:44px;height:44px}
  .tip-banner h4{font-size:1rem}
  .tip-banner p{font-size:.95rem}

  section{padding:2.5rem 0}
  h1{font-size:1.875rem}
  h2{font-size:1.5rem}
  h3{font-size:1.2rem}
  .lead{font-size:1rem}
  .section-head{margin-bottom:2rem}

  /* Cards */
  .card-grid,.case-grid,.quiz-list,.game-grid,.tips-grid{grid-template-columns:1fr;gap:1rem}
  .card{padding:1.25rem}
  .card-icon{width:42px;height:42px;margin-bottom:.75rem}
  .case-card{padding:1.25rem}

  /* Accordion */
  .accordion-trigger{padding:.95rem 1rem;font-size:.98rem;gap:.65rem}
  .accordion-trigger .acc-icon{width:32px;height:32px}
  .accordion-trigger .acc-icon svg{width:18px;height:18px}
  .accordion-content{padding:0 1rem 1.1rem;font-size:.95rem;line-height:1.7}
  .accordion-content h4{font-size:1rem;margin-top:.85rem}

  /* Quiz */
  .quiz-stage,.game-stage{padding:1.1rem;border-radius:var(--radius-md);margin:1.25rem auto}
  .quiz-question{font-size:1.05rem;line-height:1.4;margin-bottom:1.1rem}
  .quiz-option{padding:.85rem .9rem;font-size:.95rem;gap:.65rem}
  .quiz-option .opt-letter{width:28px;height:28px;font-size:.8rem}
  .quiz-feedback{font-size:.9rem;padding:.85rem .95rem}
  .quiz-actions{margin-top:1.1rem;flex-direction:column;gap:.6rem}
  .quiz-actions .btn{width:100%;justify-content:center}
  .score-ring{width:140px;height:140px}
  .score-ring .score-text{font-size:2rem}
  .score-actions{flex-direction:column}
  .score-actions .btn{width:100%}

  /* Footer */
  .footer-bottom{flex-direction:column;text-align:center;gap:.6rem}
  .footer-grid{gap:1.5rem}

  /* Games */
  .game-card-header{padding:1.5rem 1.25rem}
  .game-card-header svg{width:40px;height:40px}
  .game-hud{justify-content:space-around;gap:.5rem}
  .hud-label{font-size:.65rem}
  .hud-value{font-size:1.15rem}
  .phish-actions{grid-template-columns:1fr;gap:.6rem}
  .phish-btn{padding:.85rem;font-size:.95rem}
  .phish-card{padding:1rem;font-size:.88rem}
  .phish-card .subject{font-size:.98rem}
  .memory-grid{grid-template-columns:repeat(4,1fr);gap:.5rem}
  .memory-face{font-size:.7rem;padding:.4rem}
  .memory-face-front svg{width:24px;height:24px}
  .url-option{padding:.85rem 1rem;font-size:.92rem}
  .scenario-step{padding:1.1rem}
  .scenario-step h4{font-size:1.02rem}
  .scenario-choice{padding:.75rem .95rem;font-size:.92rem}

  /* Password lab */
  .psw-input{font-size:1rem;padding:.85rem 1rem}
  .psw-info{grid-template-columns:repeat(3,1fr);gap:.5rem}
  .psw-stat{padding:.65rem .75rem}
  .psw-stat-lbl{font-size:.65rem}
  .psw-stat-val{font-size:.92rem}
  .psw-tips li{font-size:.88rem}

  /* Leaderboard */
  .leaderboard{padding:1.1rem}
  .leaderboard-row{grid-template-columns:30px 1fr auto;gap:.5rem;font-size:.9rem}
  .lb-date{display:none}

  /* Forms */
  .form-control{font-size:1rem;padding:.7rem .85rem}
  .checklist{padding:1rem 1.1rem}

  /* Certificate */
  .certificate{padding:1.75rem 1rem}
  .certificate::before,.certificate::after{width:48px;height:48px}
  .cert-toolbar{flex-direction:column;gap:.5rem}
  .cert-toolbar .btn{width:100%}
  .cert-footer{flex-direction:column;gap:1.25rem}
}

/* Small mobile (≤480px) */
@media (max-width:480px){
  .container{padding:0 .9rem}
  .nav{gap:.35rem}
  .nav-actions{gap:.35rem}
  .lang-switch{padding:2px}
  .lang-switch button{padding:.3rem .45rem;font-size:.72rem}
  .icon-btn{width:36px;height:36px}
  .brand-mark{width:34px;height:34px;font-size:.85rem}
  .brand-name{font-size:.72rem}
  .hero{padding:2.5rem 0 3.5rem}
  .hero h1{font-size:1.625rem}
  .hero .lead{font-size:.95rem}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .hero-stat{padding:.7rem .85rem}
  .hero-stat-num{font-size:1.3rem}
  h1{font-size:1.625rem}
  h2{font-size:1.375rem}
  h3{font-size:1.1rem}
  .memory-grid{grid-template-columns:repeat(3,1fr)}
  .quiz-stage,.game-stage{padding:.95rem}
  .quiz-question{font-size:1rem}
  .quiz-option{font-size:.9rem;padding:.75rem .8rem}
  .game-hud{flex-wrap:wrap;justify-content:center}
  .hud-item{flex:1 1 40%}
  .url-option{font-size:.85rem;padding:.75rem .85rem}
  .psw-info{grid-template-columns:1fr 1fr}
}

/* Very small / older devices (≤360px) */
@media (max-width:360px){
  .brand-name{font-size:.65rem}
  .brand-mark{width:30px;height:30px;font-size:.78rem}
  .lang-switch button{padding:.28rem .35rem}
  .icon-btn{width:34px;height:34px}
  .icon-btn svg{width:16px;height:16px}
  .hero h1{font-size:1.5rem}
  .memory-grid{grid-template-columns:repeat(2,1fr)}
  .hero-stats{grid-template-columns:1fr 1fr}
}

/* Landscape phones — keep nav usable */
@media (max-width:920px) and (orientation:landscape) and (max-height:500px){
  .nav-list{max-height:calc(100vh - 60px)}
  .hero{padding:2rem 0 3rem}
  .hero-stats{grid-template-columns:repeat(4,1fr)}
}

/* Touch hover-fix: avoid stuck hover states */
@media (hover:none){
  .card:hover,.quiz-card:hover,.game-card:hover,.case-card:hover{transform:none}
  .btn-primary:hover,.btn-accent:hover{transform:none;box-shadow:none}
}