:root{--page-bg:#f4f7fb;--card-radius:18px;--shadow:0 8px 28px rgba(15,23,42,.07);--cell:38px;--cell-gap:2px}
*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page-bg);overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}
.container{width:100%;padding-left:max(12px,3vw);padding-right:max(12px,3vw)}
.card,.clue{border-radius:var(--card-radius)!important}
.btn{min-height:42px}
.form-control,.form-select{min-height:44px}
.table-responsive{-webkit-overflow-scrolling:touch}

/* Student home */
.student-hero{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border-radius:0 0 28px 28px;padding:clamp(32px,7vw,64px) 0}
.student-hero h1{font-size:clamp(1.65rem,5vw,2.6rem);line-height:1.15}
.student-card{border:0;border-radius:18px;box-shadow:var(--shadow);height:100%;padding:clamp(18px,3vw,28px)}

/* Crossword */
.tts-card{padding:clamp(12px,2.5vw,28px)!important}
.tts-title{font-size:clamp(1.35rem,3.2vw,2rem);overflow-wrap:anywhere}
.board-wrap{width:100%;max-width:100%;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:clamp(4px,1vw,12px);border-radius:14px;background:#eef2f7}
.board{display:grid;grid-template-columns:repeat(var(--cols),var(--cell));gap:var(--cell-gap);justify-content:center;width:max-content;min-width:max-content;margin:auto}
.cell{width:var(--cell);height:var(--cell);position:relative;background:#151515;border-radius:4px;flex:none}
.cell.active{background:#fff;border:1px solid #aeb4bd}
.cell input{display:block;width:100%;height:100%;border:0;text-align:center;font-weight:800;font-size:clamp(14px,calc(var(--cell)*.52),21px);text-transform:uppercase;background:transparent;outline:0;padding:clamp(3px,calc(var(--cell)*.16),8px) 1px;border-radius:3px;caret-color:#4f46e5}
.cell input:focus{background:#eef2ff;box-shadow:inset 0 0 0 2px #818cf8}
.num{position:absolute;top:1px;left:3px;font-size:clamp(7px,calc(var(--cell)*.23),10px);color:#555;z-index:2;line-height:1;pointer-events:none}
.correct{background:#d1fae5!important}.wrong{background:#fee2e2!important}
.clue{border:0;background:#fff;padding:13px;margin-bottom:9px;box-shadow:0 2px 8px rgba(0,0,0,.04);overflow-wrap:anywhere}
.clue .answer-state{font-size:12px;margin-left:6px;white-space:nowrap}
.legend{font-size:clamp(.72rem,2vw,.8rem)}
.empty-board{padding:30px;text-align:center;background:#fff;border-radius:14px}
#result{overflow-wrap:anywhere}

/* Admin */
.admin-nav .container{padding-top:8px;padding-bottom:8px}
.admin-nav-content{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-card{border:0;box-shadow:var(--shadow);border-radius:18px!important}
.admin-table{min-width:680px}
.admin-table td,.admin-table th{vertical-align:middle}

@media (max-width: 991.98px){
  :root{--cell:34px}
  .board{justify-content:start;margin:0}
  .tts-grid{row-gap:1rem!important}
}
@media (max-width: 767.98px){
  :root{--cell:30px;--cell-gap:1px}
  .container{padding-left:12px;padding-right:12px}
  .student-hero{border-radius:0 0 20px 20px}
  .student-hero .admin-link{width:100%}
  .student-hero .admin-link .btn{width:100%}
  .tts-card{padding:12px!important}
  .board-wrap{padding:7px}
  .board{justify-content:start}
  .clue{padding:11px}
  .admin-actions{width:100%}
  .admin-actions .btn{flex:1 1 140px}
  .table-responsive{margin-left:-1px;margin-right:-1px}
}
@media (max-width: 420px){
  :root{--cell:27px}
  .btn{min-height:40px}
  .tts-title{font-size:1.3rem}
  .clue .answer-state{display:block;margin:4px 0 0}
  .form-control,.form-select{min-height:42px}
}
@media (max-width: 340px){
  :root{--cell:24px}
  .container{padding-left:9px;padding-right:9px}
}
@media (orientation:landscape) and (max-height:600px){
  .student-hero{padding:24px 0}
  .board-wrap{max-height:72vh}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}