/* Shared phone/tablet behavior; keep pinch zoom and native page scrolling. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
img,svg{max-width:100%}
button,input,select,textarea{font-size: max(16px,1em)}
button,a,summary,input,select{touch-action:manipulation}
button{min-width:44px;white-space:normal;overflow-wrap:anywhere}
input,select{max-width:100%;min-width:0}
.wrap,.privacy-wrap,.fa-wrap{overflow-wrap:anywhere}
.wrap :is(.controls,.modes,.mode-controls,.setup-controls,.board-controls)>*{min-width:0}
.rank-choices,.choices,.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.rank-choices button,.choices button,.choice-grid button{overflow-wrap:anywhere}
.table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.table-scroll:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}
.table-scroll table{min-width:320px}
.wrap summary{min-height:48px;align-content:center;padding:8px 0;line-height:1.4}
.board-controls label{flex:1 1 180px;max-width:100%}
.board-controls select{width:100%}
.explain p{overflow-wrap:anywhere;line-height:1.5}
.mobile-page-hidden *,.mobile-page-hidden *::before,.mobile-page-hidden *::after{animation-play-state:paused!important}
@media(hover:none) and (pointer:coarse){
 .fa-flip-unit::after{animation:none!important}
 .wrap button:not(:disabled):hover{background:var(--paper);color:var(--ink);box-shadow:none}
 .wrap button[aria-pressed=true]:hover{background:var(--learn-blue);color:#fff}
 .wrap button.primary:hover,.wrap .rank-next:hover,.wrap #next:hover,.wrap #reveal:hover,.wrap #flip:hover{background:var(--learn-teal);color:#fff}
}
@media(max-width:760px){
 .wrap{padding:16px 16px 32px}
 .learning-nav{gap:6px;margin-bottom:14px}
 .learning-nav a{min-height:44px;padding:7px 10px;line-height:1.3}
 .wrap .learning-note{font-size:16px;line-height:1.45;margin:10px 0 14px}
 .wrap .learning-note strong{margin-bottom:2px}
 .wrap button,.wrap input,.wrap select{font-size:17px;min-height:48px}
 .wrap .modes,.wrap .controls{gap:8px}
 .wrap .nav button{min-width:0}
 .fa-whatsapp a,.fa-submit>a{display:inline-flex;align-items:center;min-height:44px}
 .fa-group-invite a{white-space:normal}
 .fa-flip-unit span{font-size:11px}
 .privacy-wrap p>a{display:inline-block;min-height:44px;padding-block:8px}
 .rank-stats{gap:8px 16px;font-variant-numeric:tabular-nums}
 .ranked .rank-prompt{font-size:clamp(23px,5vw,32px);line-height:1.35;margin:14px 0;scroll-margin-top:16px}
 .rank-next{width:100%}
 .explain{padding:12px;font-size:17px}
}
@media(max-width:430px){
 .rank-choices,.choices,.choice-grid{grid-template-columns:minmax(0,1fr)}
 .wrap .choice-grid button{font-size:17px;line-height:1.35}
 .wrap .game-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .wrap .game-actions #flip{grid-column:1/-1;grid-row:1;width:100%}
 .wrap .game-actions #prev{grid-column:1;grid-row:2}
 .wrap .game-actions #next{grid-column:2;grid-row:2}
 .wrap .game-actions #position{grid-column:1/-1;grid-row:3}
 .wrap .game-actions #again{grid-column:1/-1}
 .wrap .setup-controls{grid-template-columns:70px minmax(0,1fr)!important}
 .wrap .setup-controls #reset{grid-column:1/-1}
 .wrap .table-scroll th,.wrap .table-scroll td{font-size:16px;padding:8px}
 .wrap .card{padding:18px 14px;min-height:170px;scroll-margin-top:16px}
 #study-panel{scroll-margin-top:16px}
}