/* HRM Connect Four - styles extracted from original single-file HTML. */
:root{
  --bg:#eef2f7;
  --panel:#ffffff;
  --panel-soft:#f8fafc;
  --blue:#1e40af;
  --blue-dark:#0f2f7f;
  --panel-line:#e5e7eb;
  --soft-blue:#eff6ff;
  --soft-green:#ecfdf5;
  --soft-red:#fef2f2;
  --soft-yellow:#fffbeb;
  --red:#ef4444;
  --yellow:#facc15;
  --green:#22c55e;
  --ink:#111827;
  --muted:#6b7280;
  --border:#d1d5db;
  --focus:#0f766e;
  --shadow:0 14px 32px rgba(15,23,42,.18);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --app-pad:clamp(4px,1vmin,10px);
  --panel-pad:clamp(6px,1vmin,10px);
  --gap:clamp(4px,.75vmin,8px);
  --cell:52px;
  --disc-gap:clamp(3px,.75vmin,7px);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-width:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(135deg,#e0e7ff 0%,#eef2f7 42%,#f8fafc 100%);color:var(--ink)}
body{min-height:100dvh;overflow:hidden}
button,input,select{font:inherit}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.app{width:100%;height:100dvh;padding:calc(var(--app-pad) + var(--safe-top)) calc(var(--app-pad) + var(--safe-right)) calc(var(--app-pad) + var(--safe-bottom)) calc(var(--app-pad) + var(--safe-left));display:grid;grid-template-columns:minmax(360px,52dvw) minmax(300px,1fr);gap:var(--gap);overflow:hidden}
.left,.right{background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.75);border-radius:clamp(12px,2vmin,18px);box-shadow:var(--shadow);padding:var(--panel-pad);min-width:0;min-height:0;overflow:hidden}
.left{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:var(--gap)}
.right{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--gap)}
.topbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto;gap:var(--gap);align-items:center;min-width:0}
h1{font-size:clamp(17px,2.1vmin,29px);margin:0;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.small-btn,#reset{border:0;border-radius:8px;background:#111827;color:#fff;font-size:clamp(10px,1.35vmin,12px);line-height:1;padding:clamp(5px,.8vmin,6px) clamp(6px,1vmin,9px);min-height:clamp(24px,3.2vmin,28px);cursor:pointer;white-space:nowrap}
#saveScoreBtn{border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--blue-dark);font-size:clamp(10px,1.35vmin,12px);line-height:1;padding:clamp(6px,.95vmin,9px) clamp(10px,1.2vmin,13px);min-height:clamp(30px,4.2vmin,36px);cursor:pointer;white-space:nowrap;font-weight:850;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;justify-self:stretch;width:100%}
.small-btn:hover,#reset:hover{background:#374151}
#saveScoreBtn:hover{background:#f8fafc;color:var(--blue-dark);border-color:#9ca3af;box-shadow:0 1px 0 rgba(15,23,42,.04)}
.small-btn[aria-pressed="true"]{background:#0f766e}
#status{width:100%;min-height:clamp(20px,3.2vmin,28px);display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(12px,1.75vmin,17px);font-weight:700;color:var(--blue-dark);padding:1px 6px;line-height:1.15;overflow:hidden}
.board-wrap{display:flex;align-items:center;justify-content:center;min-height:0;width:100%;height:100%;overflow:hidden}
.board{position:relative;display:grid;grid-template-columns:repeat(7,var(--cell));grid-template-rows:repeat(6,var(--cell));gap:var(--disc-gap);padding:calc(var(--disc-gap)*1.6);background:linear-gradient(180deg,#2563eb 0%,var(--blue) 100%);border:1px solid rgba(255,255,255,.24);border-radius:clamp(12px,2vmin,18px);box-shadow:inset 0 -7px 0 rgba(0,0,0,.12),0 10px 18px rgba(30,64,175,.20);max-width:100%;max-height:100%}
.cell{position:relative;width:var(--cell);height:var(--cell);border-radius:50%;background:#fff;border:0;cursor:pointer;box-shadow:inset 0 5px 10px rgba(0,0,0,.25),inset 0 -2px 4px rgba(255,255,255,.45);transition:transform .12s ease,background .2s ease,box-shadow .16s ease,outline-color .16s ease;overflow:hidden}
.cell::after{content:"";position:absolute;inset:16% 20% auto 20%;height:22%;border-radius:999px;background:rgba(255,255,255,.34);filter:blur(.2px);pointer-events:none}
.board.ready-to-place .cell.playable-column:not(.red):not(.yellow){box-shadow:inset 0 5px 10px rgba(0,0,0,.25),0 0 0 2px rgba(255,255,255,.16)}
.cell.column-preview:not(.red):not(.yellow){background:#e0f2fe;transform:scale(1.03);box-shadow:inset 0 5px 10px rgba(0,0,0,.22),0 0 0 3px rgba(255,255,255,.35),0 0 16px rgba(147,197,253,.45)}
.cell.column-landing:not(.red):not(.yellow){background:#fee2e2;outline:clamp(2px,.55vmin,4px) dashed rgba(239,68,68,.9);outline-offset:calc(-1 * clamp(4px,.9vmin,7px))}
.cell:hover{transform:scale(1.04)}
.cell[aria-disabled="true"]{cursor:not-allowed}
.cell.red{background:var(--red)}
.cell.yellow{background:var(--yellow)}
.cell.winning{outline:clamp(2px,.8vmin,5px) solid var(--green);animation:winningPulse .9s ease-in-out infinite alternate;z-index:2}
.cell.drop-in{animation:tokenDrop .46s cubic-bezier(.17,.84,.44,1.1) both}
@keyframes tokenDrop{0%{transform:translateY(var(--drop-distance,-320px)) scale(.92)}72%{transform:translateY(0) scale(1.03)}86%{transform:translateY(calc(var(--cell) * -.08)) scale(.98)}100%{transform:translateY(0) scale(1)}}
@keyframes winningPulse{from{filter:brightness(1);box-shadow:inset 0 5px 10px rgba(0,0,0,.25),0 0 0 rgba(34,197,94,0)}to{filter:brightness(1.08);box-shadow:inset 0 5px 10px rgba(0,0,0,.22),0 0 18px rgba(34,197,94,.65)}}
@media (prefers-reduced-motion:reduce){.cell.drop-in,.cell.winning{animation:none}}
.player-card{min-height:0;background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);border:1px solid var(--panel-line);border-radius:14px;padding:clamp(6px,1vmin,9px);overflow:hidden}
.player-card-title{margin:0 0 clamp(3px,.6vmin,6px);font-size:clamp(10px,1.35vmin,12px);font-weight:850;color:var(--blue-dark);letter-spacing:.02em;text-transform:uppercase}
.player-table{width:100%;border-collapse:separate;border-spacing:0 var(--gap);table-layout:fixed}
.player-table .label-cell{width:28%;padding:0 var(--gap) 0 0;text-align:left;vertical-align:middle;background:transparent;border:0}
.player-table td{padding:0;vertical-align:middle;border:0}
.player-table .value-cell{width:auto}
.player-table .action-cell{width:clamp(82px,13vmin,112px);padding-left:var(--gap)}
.field-label{font-size:clamp(10px,1.35vmin,12px);font-weight:800;color:var(--muted);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.player-card input,#difficulty,#questionDifficulty,#language{width:100%;min-width:0}
input,select{width:100%;border:1px solid var(--border);border-radius:12px;background:#fff;padding:clamp(6px,.95vmin,9px) clamp(8px,1.1vmin,11px);font-size:clamp(12px,1.55vmin,13px);min-height:clamp(30px,4.2vmin,36px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);transition:border-color .16s ease,box-shadow .16s ease}
input:hover,select:hover{border-color:#9ca3af}
#score{font-variant-numeric:tabular-nums;font-weight:900;color:var(--blue-dark)}
#questionCounter,#scoreBadge,#timer{background:#eef2ff;border-color:#c7d2fe;color:var(--blue-dark);font-weight:850}
#leaderboardTable td:nth-child(3),#leaderboardTable td:nth-child(7),#leaderboardTable td:nth-child(8),#leaderboardTable td:nth-child(9),#leaderboardTable th:nth-child(3),#leaderboardTable th:nth-child(7),#leaderboardTable th:nth-child(8),#leaderboardTable th:nth-child(9){text-align:right;font-variant-numeric:tabular-nums}
#leaderboardTable td:nth-child(3){font-weight:900;color:var(--blue-dark)}
.saved-flash{background:var(--soft-green)!important;border-color:#86efac!important;color:#166534!important}
.quiz-card{min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:var(--gap);overflow:hidden}
.badge-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(4px,.8vmin,8px);color:var(--muted);font-size:clamp(9px,1.35vmin,12px);font-weight:700;min-width:0}
.badge{background:#f3f4f6;border:1px solid var(--border);border-radius:999px;padding:clamp(3px,.65vmin,5px) clamp(6px,1vmin,9px);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
#question{font-size:clamp(14px,2.05vmin,23px);line-height:1.14;font-weight:850;margin:0;min-height:0;overflow:hidden;overflow-wrap:anywhere;background:var(--soft-blue);border:1px solid #bfdbfe;border-radius:14px;padding:clamp(7px,1.1vmin,12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.answers{display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(0,1fr);gap:clamp(4px,.8vmin,7px);overflow:hidden;min-height:0;padding-right:0}
.answer-btn{width:100%;height:100%;min-height:0;text-align:left;border:1px solid var(--border);background:#fff;border-radius:14px;padding:clamp(6px,1vmin,10px) clamp(8px,1.2vmin,12px);cursor:pointer;font-size:clamp(11px,1.55vmin,16px);line-height:1.14;overflow:hidden;overflow-wrap:anywhere;box-shadow:0 1px 0 rgba(15,23,42,.04);transition:background .16s ease,border-color .16s ease,transform .12s ease,box-shadow .16s ease}
.answer-btn:hover{background:#f8fafc;border-color:#93c5fd;box-shadow:0 3px 10px rgba(30,64,175,.10);transform:none}
.answer-btn:disabled{cursor:default;transform:none}
.answer-btn.correct{background:var(--soft-green);border-color:#22c55e;color:#14532d}
.answer-btn.wrong{background:var(--soft-red);border-color:#f87171;color:#7f1d1d}
.answer-btn.show-correct{background:var(--soft-yellow);border-color:#f59e0b;color:#111827;font-weight:800}
.answer-btn.correct::before,.answer-btn.wrong::before,.answer-btn.show-correct::before{content:attr(data-feedback-prefix);font-weight:800}
.message{min-height:clamp(30px,5.5vmin,48px);font-size:clamp(10px,1.45vmin,13px);line-height:1.18;color:var(--muted);font-weight:700;overflow:auto}
.footer{display:flex;justify-content:space-between;gap:var(--gap);font-size:clamp(9px,1.3vmin,12px);line-height:1.15;color:var(--muted);min-width:0;overflow:hidden}
.footer span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-backdrop{position:fixed;inset:0;background:rgba(17,24,39,.62);display:none;align-items:center;justify-content:center;padding:clamp(8px,3vmin,24px);z-index:50;overflow:hidden}
.modal-backdrop.open{display:flex}
.modal{width:min(820px,94dvw);max-width:94dvw;max-height:94dvh;display:grid;grid-template-rows:auto minmax(0,1fr);background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:clamp(12px,2.5vmin,22px);font-size:clamp(11px,1.55vmin,14px)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(6px,1.2vmin,12px)}
.modal h2{margin:0;font-size:clamp(17px,2.4vmin,24px)}
.modal h3{margin:clamp(8px,1.5vmin,14px) 0 4px;font-size:clamp(13px,1.9vmin,18px)}
.modal-body{overflow:auto;min-height:0;padding-right:4px}
.close{border:0;background:#e5e7eb;border-radius:10px;padding:clamp(6px,1vmin,8px) clamp(9px,1.4vmin,12px);cursor:pointer;font-weight:700}
.modal ul{margin:0 0 0 1.1em;padding:0}
.modal li{margin:clamp(3px,.65vmin,8px) 0;line-height:1.25}
table{width:100%;border-collapse:collapse;font-size:clamp(10px,1.45vmin,14px)}
th,td{border-bottom:1px solid var(--border);text-align:left;padding:clamp(4px,.9vmin,8px) clamp(3px,.75vmin,6px);vertical-align:top}
th{background:#f8fafc}
.empty-leaderboard{color:var(--muted);padding:10px 0;font-weight:700}
.report-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.report-card{border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);padding:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;white-space:nowrap;box-shadow:0 1px 0 rgba(15,23,42,.04)}
.report-card:nth-child(1){background:var(--soft-blue);border-color:#bfdbfe}
.report-card:nth-child(2){background:var(--soft-green);border-color:#bbf7d0}
.report-card:nth-child(3){background:var(--soft-yellow);border-color:#fde68a}
.report-card:nth-child(4){background:#f5f3ff;border-color:#ddd6fe}
.report-card span{flex:0 0 auto;font-size:.78em;font-weight:850;color:var(--muted);letter-spacing:.02em;text-transform:uppercase}
.report-card strong{display:inline;font-size:1.18em;text-align:right;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-variant-numeric:tabular-nums}
.report-section{border:1px solid var(--panel-line);border-radius:14px;background:#fff;padding:clamp(7px,1.25vmin,11px);margin:7px 0;box-shadow:0 1px 0 rgba(15,23,42,.04)}
.report-section h3{margin-top:0;margin-bottom:4px;font-size:clamp(12px,1.7vmin,16px);letter-spacing:.01em}
.report-section p:last-child,.report-section ol:last-child,.report-section table:last-child{margin-bottom:0}
@media (max-width:900px){
  :root{--app-pad:clamp(3px,.9vmin,8px);--panel-pad:clamp(5px,.9vmin,8px)}
  .app{grid-template-columns:minmax(0,50dvw) minmax(0,1fr)}
  .topbar{grid-template-columns:minmax(0,1fr) auto auto auto auto}
  h1{font-size:clamp(15px,2.2vmin,18px)}
}
@media (max-width:700px){
  body{overflow-x:hidden;overflow-y:auto}
  .app{height:auto;min-height:100dvh;grid-template-columns:1fr;grid-template-rows:minmax(0,46dvh) minmax(480px,1fr);overflow:visible}
  .left,.right{overflow:hidden}
  .footer{display:none}
  .topbar{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto}
  .topbar h1{grid-column:1/-1;text-align:center}
  .topbar .small-btn,.topbar #reset{width:100%;min-height:24px;font-size:clamp(9px,2.45vmin,11px);padding:4px 3px}
  #soundToggle{grid-column:auto}
  .badge-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .badge-row{font-size:clamp(8px,2.15vmin,11px)}
  #question{font-size:clamp(12px,3vmin,17px)}
  .answer-btn{font-size:clamp(10px,2.6vmin,14px);line-height:1.08}
  .message{font-size:clamp(9px,2.4vmin,12px)}
  .report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:460px){
  .player-table .label-cell{width:34%}
  .player-table .action-cell{width:auto}
  #saveScoreBtn{width:100%;justify-self:stretch}
  .modal{font-size:10px}
}
@media (orientation:landscape) and (max-height:520px){
  body{overflow:hidden}
  .app{height:100dvh;min-height:0;grid-template-columns:minmax(0,48dvw) minmax(0,1fr);grid-template-rows:1fr;overflow:hidden}
  .right{grid-template-rows:auto auto minmax(0,1fr)}
  .topbar{grid-template-columns:minmax(0,1fr) auto auto auto auto;grid-template-rows:auto}
  .topbar h1{grid-column:auto;text-align:left}
  .topbar .small-btn,#reset{font-size:clamp(8px,1.9vmin,11px);padding:4px 5px;min-height:22px}
  .footer{display:none}
  .message{min-height:22px}
}
/* Mobile-first hardening: keeps the board playable on narrow and short screens. */
html{height:100%;-webkit-text-size-adjust:100%}
body{touch-action:manipulation}
.board,.cell,.answer-btn,.small-btn,#reset,#saveScoreBtn{-webkit-tap-highlight-color:transparent}
.answers{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.answer-btn{display:flex;align-items:center;min-height:clamp(42px,8dvh,72px)}
#question{max-height:22dvh;overflow:auto;overscroll-behavior:contain}
.modal-body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#leaderboardTable{overflow:auto;-webkit-overflow-scrolling:touch}
#leaderboardTable table{min-width:760px}
.report-section{overflow:auto}
.report-section table{min-width:520px}

@media (hover:none){
  .cell:hover{transform:none}
  .answer-btn:hover{background:#fff;border-color:var(--border);box-shadow:0 1px 0 rgba(15,23,42,.04)}
}

@media (max-width:700px){
  :root{--app-pad:6px;--panel-pad:7px;--gap:6px;--disc-gap:clamp(3px,1.1vmin,6px)}
  body{overflow-y:auto}
  .app{min-height:100dvh;grid-template-rows:minmax(260px,44dvh) minmax(560px,auto);padding-bottom:calc(10px + var(--safe-bottom))}
  .left{min-height:260px}
  .right{min-height:560px;grid-template-rows:auto minmax(430px,1fr)}
  .player-card{overflow:visible}
  .player-table{border-spacing:0 6px}
  .player-table .label-cell{width:35%}
  .field-label{font-size:clamp(9px,2.4vw,11px);white-space:normal;line-height:1.05}
  input,select,#saveScoreBtn{min-height:36px;font-size:clamp(11px,3.1vw,14px)}
  .badge-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .badge{border-radius:12px;white-space:normal;line-height:1.08;min-height:28px;display:flex;align-items:center}
  #scoreBadge{grid-column:auto}
  #timer{grid-column:auto}
  #question{max-height:120px;overflow:auto;font-size:clamp(13px,3.6vw,18px);line-height:1.16}
  .answers{grid-auto-rows:minmax(48px,auto);overflow:visible}
  .answer-btn{height:auto;min-height:48px;font-size:clamp(12px,3.4vw,15px);line-height:1.16}
  .message{min-height:42px;max-height:92px;overflow:auto}
  .modal-backdrop{align-items:flex-start;padding:calc(8px + var(--safe-top)) calc(8px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(8px + var(--safe-left));overflow:auto}
  .modal{width:100%;max-width:100%;max-height:none;min-height:auto;border-radius:14px}
}

@media (max-width:420px){
  .app{grid-template-rows:minmax(238px,42dvh) minmax(590px,auto)}
  .left{min-height:238px}
  .topbar{gap:5px}
  .topbar .small-btn,.topbar #reset{font-size:10px;min-height:30px;padding:5px 4px}
  #status{font-size:12px;min-height:30px}
  .player-table,.player-table tbody,.player-table tr,.player-table td{display:block;width:100%}
  .player-table tr{display:grid;grid-template-columns:minmax(92px,35%) minmax(0,1fr);gap:4px 6px;margin-bottom:6px;align-items:center}
  .player-table .label-cell{width:auto;padding:0}
  .player-table .value-cell{width:auto}
  .player-table .action-cell{grid-column:1/-1;width:auto;padding-left:0}
  #saveScoreBtn{width:100%}
  .report-grid{grid-template-columns:1fr}
  .report-card{white-space:normal}
}

@media (orientation:landscape) and (max-height:560px){
  :root{--app-pad:4px;--panel-pad:5px;--gap:5px;--disc-gap:clamp(2px,.9vmin,5px)}
  html,body{height:100%;overflow:hidden}
  .app{height:100dvh;min-height:0;grid-template-columns:minmax(300px,47dvw) minmax(330px,1fr);grid-template-rows:1fr;overflow:hidden}
  .left{grid-template-rows:auto auto minmax(0,1fr)}
  .right{grid-template-rows:auto minmax(0,1fr);overflow:hidden}
  .player-card{max-height:34dvh;overflow:auto;padding:5px}
  .player-card-title{display:none}
  .player-table{border-spacing:0 4px}
  .player-table .label-cell{width:30%}
  .field-label{font-size:9px;line-height:1.05;white-space:normal}
  input,select,#saveScoreBtn{min-height:26px;font-size:11px;padding:4px 7px;border-radius:9px}
  .quiz-card{grid-template-rows:auto minmax(44px,auto) minmax(0,1fr) auto;min-height:0;overflow:hidden}
  .badge-row{grid-template-columns:repeat(5,minmax(0,1fr));font-size:9px;gap:4px}
  .badge{padding:3px 5px;border-radius:10px;white-space:nowrap}
  #question{font-size:clamp(11px,2.6vmin,15px);line-height:1.08;max-height:16dvh;overflow:auto;padding:6px 8px;border-radius:10px}
  .answers{grid-auto-rows:minmax(34px,auto);overflow:auto;padding-right:2px}
  .answer-btn{min-height:34px;height:auto;font-size:clamp(10px,2.25vmin,13px);line-height:1.08;padding:5px 8px;border-radius:10px}
  .message{min-height:24px;max-height:44px;overflow:auto;font-size:10px;line-height:1.12}
  .footer{display:none}
  .modal-backdrop{align-items:flex-start;overflow:auto;padding:8px}
  .modal{max-height:none;width:min(900px,98dvw);max-width:98dvw;border-radius:12px;padding:10px}
  .modal h2{font-size:16px}
  .modal-body{max-height:none}
}

@media (orientation:landscape) and (max-height:390px){
  .app{grid-template-columns:minmax(280px,44dvw) minmax(360px,1fr)}
  .topbar{grid-template-columns:minmax(0,1fr) repeat(4,auto)}
  .topbar h1{font-size:14px}
  .topbar .small-btn,#reset{font-size:9px;min-height:20px;padding:3px 5px}
  #status{font-size:11px;min-height:20px}
  .player-card{max-height:30dvh}
  .badge-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  #question{max-height:14dvh}
}

@media (min-width:701px) and (max-width:1100px) and (orientation:portrait){
  .app{grid-template-columns:1fr;grid-template-rows:minmax(360px,48dvh) minmax(520px,1fr);height:auto;min-height:100dvh;overflow:visible}
  body{overflow-y:auto}
  .footer{display:none}
  .right{min-height:520px}
}

/* Player settings modal layout: frees the quiz panel for learning content. */
.topbar{grid-template-columns:minmax(0,1fr) repeat(5,auto)}
.right{grid-template-rows:minmax(0,1fr) auto}
.quiz-card{height:100%;min-height:0}
.player-settings-modal{width:min(560px,94dvw)}
.player-settings-modal .modal-body{overflow:visible;padding-right:0}
.player-settings-modal .player-card{box-shadow:none;border-color:var(--panel-line);overflow:visible}
.player-settings-modal .player-card-title{display:none}
.player-settings-modal .player-table{margin:0}

@media (max-width:700px){
  html,body{height:100%;overflow:hidden}
  .app{height:100dvh;min-height:0;grid-template-columns:1fr;grid-template-rows:minmax(220px,42dvh) minmax(0,1fr);overflow:hidden;padding-bottom:calc(var(--app-pad) + var(--safe-bottom))}
  .left{min-height:0;overflow:hidden}
  .right{min-height:0;grid-template-rows:minmax(0,1fr);overflow:hidden}
  .footer{display:none}
  .topbar{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;gap:5px}
  .topbar h1{grid-column:1/-1;text-align:center;min-width:0}
  .topbar .small-btn,.topbar #reset{width:100%;min-height:28px;font-size:clamp(9px,2.25vw,11px);padding:4px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #status{min-height:26px;font-size:clamp(11px,2.7vw,13px)}
  .board-wrap{min-height:0}
  .quiz-card{grid-template-rows:auto minmax(56px,auto) minmax(0,1fr) auto;min-height:0;overflow:hidden}
  .badge-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;font-size:clamp(8px,1.9vw,10px)}
  .badge{min-height:22px;padding:3px 4px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:1.2}
  #question{max-height:17dvh;min-height:0;overflow:auto;font-size:clamp(12px,3.1vw,16px);line-height:1.12;padding:7px 9px}
  .answers{grid-auto-rows:minmax(0,1fr);overflow:hidden;min-height:0}
  .answer-btn{height:100%;min-height:0;font-size:clamp(10px,2.7vw,14px);line-height:1.12;padding:6px 8px;overflow:auto}
  .message{min-height:28px;max-height:48px;overflow:auto;font-size:clamp(9px,2.3vw,12px)}
  .modal-backdrop{align-items:center;justify-content:center;overflow:hidden;padding:calc(8px + var(--safe-top)) calc(8px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(8px + var(--safe-left))}
  .modal{width:min(560px,96dvw);max-width:96dvw;max-height:92dvh;min-height:auto;overflow:hidden;border-radius:16px}
  .modal-body{overflow:auto;min-height:0}
  .player-settings-modal .player-table,.player-settings-modal .player-table tbody,.player-settings-modal .player-table tr,.player-settings-modal .player-table td{display:block;width:100%}
  .player-settings-modal .player-table tr{display:grid;grid-template-columns:minmax(98px,34%) minmax(0,1fr);gap:5px 8px;margin-bottom:8px;align-items:center}
  .player-settings-modal .player-table .label-cell{width:auto;padding:0}
  .player-settings-modal .player-table .value-cell{width:auto}
  .player-settings-modal .player-table .action-cell{grid-column:1/-1;width:auto;padding-left:0}
}

@media (max-width:420px){
  .app{grid-template-rows:minmax(210px,40dvh) minmax(0,1fr)}
  .topbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topbar h1{grid-column:1/-1}
  .topbar .small-btn,.topbar #reset{font-size:10px;min-height:26px}
  .badge-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  #question{max-height:15dvh}
  .message{max-height:42px}
}

@media (orientation:landscape) and (max-height:560px){
  html,body{height:100%;overflow:hidden}
  .app{height:100dvh;min-height:0;grid-template-columns:minmax(300px,45dvw) minmax(360px,1fr);grid-template-rows:1fr;overflow:hidden}
  .right{min-height:0;grid-template-rows:minmax(0,1fr);overflow:hidden}
  .topbar{grid-template-columns:minmax(0,1fr) repeat(5,auto);grid-template-rows:auto;gap:4px}
  .topbar h1{grid-column:auto;text-align:left;font-size:clamp(12px,2.6vmin,16px)}
  .topbar .small-btn,.topbar #reset{width:auto;min-height:22px;font-size:clamp(8px,1.75vmin,10px);padding:4px 5px}
  .quiz-card{grid-template-rows:auto minmax(42px,auto) minmax(0,1fr) auto;min-height:0;overflow:hidden}
  .badge-row{grid-template-columns:repeat(5,minmax(0,1fr));font-size:8.5px;gap:3px}
  .badge{padding:3px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #question{max-height:15dvh;font-size:clamp(10px,2.25vmin,14px);line-height:1.08;padding:6px 8px}
  .answers{grid-auto-rows:minmax(0,1fr);overflow:hidden;min-height:0}
  .answer-btn{min-height:0;height:100%;font-size:clamp(9px,2vmin,12px);line-height:1.06;padding:5px 7px;overflow:auto}
  .message{min-height:22px;max-height:40px;overflow:auto;font-size:9.5px}
  .modal-backdrop{align-items:center;justify-content:center;overflow:hidden;padding:8px}
  .modal{max-height:92dvh;width:min(620px,96dvw);max-width:96dvw}
  .modal-body{overflow:auto;min-height:0}
}

@media (orientation:landscape) and (max-height:390px){
  .app{grid-template-columns:minmax(270px,42dvw) minmax(360px,1fr)}
  .topbar h1{font-size:12px}
  .topbar .small-btn,.topbar #reset{font-size:8px;min-height:19px;padding:3px 4px}
  #status{font-size:10px;min-height:19px}
  #question{max-height:13dvh}
  .message{max-height:34px}
}

@media (min-width:701px) and (max-width:1100px) and (orientation:portrait){
  html,body{height:100%;overflow:hidden}
  .app{height:100dvh;min-height:0;grid-template-columns:1fr;grid-template-rows:minmax(340px,48dvh) minmax(0,1fr);overflow:hidden}
  .right{min-height:0;grid-template-rows:minmax(0,1fr)}
  .footer{display:none}
}