/* Shared responsive layout for every Dersoru crossword page. */
html,body{max-width:100%;overflow-x:hidden}
.game{width:100%;grid-template-columns:minmax(0,1fr)}
.board-panel{min-width:0;border-right:0}
.scroll{max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;scrollbar-color:var(--teal) #ded6c7;scrollbar-width:thin}
.scroll:focus-within{outline:2px solid var(--mint);outline-offset:3px}
.board{max-width:none;transform-origin:top left}
.current,.message,.leaderboard{overflow-wrap:anywhere}

@media(max-width:980px){
  .hero{padding:42px 24px 38px}
  .hero:after{width:190px;height:190px;right:-70px;top:-105px}
  h1{max-width:850px;font-size:clamp(44px,9vw,82px);letter-spacing:-.045em;overflow-wrap:anywhere}
  .subtitle{max-width:720px}
  .game{border-inline:0}
  .board-panel{padding:28px 24px 32px}
  .current{min-height:106px;margin-bottom:20px;padding:18px 20px}
  .current p{font-size:19px}
  .scroll{margin-inline:-24px;padding:6px 24px 18px;scroll-padding-inline:24px}
  .actions{position:sticky;bottom:0;z-index:8;margin:0 -24px -32px;padding:14px 24px 18px;background:linear-gradient(180deg,rgba(251,248,241,.88),var(--cream) 35%);backdrop-filter:blur(8px)}
  .leaderboard{padding:36px 24px}
}

@media(max-width:600px){
  .topbar{padding:14px 16px;gap:14px}
  .topbar .back{white-space:nowrap}
  .hero{padding:30px 16px 28px}
  .eyebrow{gap:7px;font-size:10px;letter-spacing:.11em;flex-wrap:wrap}
  h1{margin-top:12px;font-size:clamp(36px,12vw,56px);line-height:.94;letter-spacing:-.035em}
  .subtitle{font-size:16px;line-height:1.45}
  .game-stats{gap:7px;margin-top:17px}
  .stat-chip{flex:1 1 145px;padding:9px 10px;text-align:center;font-size:11px}
  .progress-wrap{margin-top:20px}
  .board-panel{padding:18px 14px 28px}
  .current{min-height:104px;margin-bottom:15px;padding:15px 16px;box-shadow:5px 5px 0 var(--mint)}
  .current p{margin:6px 0;font-size:17px;line-height:1.3}
  .current small{display:block;line-height:1.35}
  .scroll{margin-inline:-14px;padding:5px 14px 16px;scroll-padding-inline:14px}
  .cell input{font-size:16px}
  .actions{gap:8px;margin:0 -14px -28px;padding:13px 14px 16px}
  .actions button{min-height:46px;padding:11px 9px;font-size:13px;touch-action:manipulation}
  .actions .primary{flex:1 1 100%}
  .actions button:not(.primary){flex:1 1 calc(50% - 4px)}
  .leaderboard{padding:30px 16px}
  .leaderboard h2{font-size:27px}
  .record{grid-template-columns:36px minmax(0,1fr) auto;padding:11px 10px}
  .finish-card{padding:27px 20px}
  .finish-card h2{font-size:36px}
  footer{padding:24px 16px 38px}
}

@media(max-width:380px){
  h1{font-size:36px}
  .topbar{font-size:13px}
  .topbar .back{font-size:11px}
  .actions button{font-size:12px}
}

@media(hover:none){
  .cell input{font-size:16px}
  .actions button{cursor:default}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}