/* Keep the same game and URLs; adapt to the available screen width. */
.bgm-volume{display:flex;align-items:center;gap:12px;width:100%;max-width:440px;margin:4px auto 0;text-align:left;font-size:.875rem;font-weight:650}
.bgm-volume>span{white-space:nowrap}
.bgm-volume input{flex:1;min-width:0;min-height:44px;margin:0;accent-color:var(--forest)}
.bgm-volume output{min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}
.bgm-volume:has(input:disabled) output{white-space:nowrap}
.bgm-volume-note,.wordle-audio .bgm-volume-note{margin:0 0 6px;color:var(--muted);font-size:.75rem;text-align:center}
.wordle-audio .bgm-volume{max-width:none}

@media(max-width:700px){
 .header-inner{padding-left:max(17px,env(safe-area-inset-left));padding-right:max(17px,env(safe-area-inset-right))}
 main{min-width:0;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));padding-bottom:max(24px,env(safe-area-inset-bottom))}
 .play-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
 .play-tab{padding:10px 6px;min-width:0;font-size:.9375rem}
 .mode-toolbar,.panel-top,.round-summary,.party-heading{flex-wrap:wrap}
 .round-summary{gap:6px 14px}
 .minigame-play-mode{gap:10px;padding-top:0}
 .minigame-play-mode .primary-button{width:100%;white-space:normal}
 .minigame-play-mode p{font-size:.875rem}
 input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px}
 dialog{max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overscroll-behavior:contain}
 .dialog-heading{gap:10px}
 .dialog-heading>div{min-width:0}
 .dialog-heading h2{overflow-wrap:anywhere}
 .close-dialog{width:44px;min-height:44px}
 .room-field select{width:100%;min-height:44px}
 .party-play-actions{flex-wrap:wrap}
 .party-invite .quiet-button{min-width:0;white-space:normal}
 .party-invite .party-leave{margin-left:0}
 .quiz-media.audio{min-width:0}
 .quiz-media audio{max-width:100%;min-width:0}
 .challenge-question-title{overflow-wrap:anywhere}
 .quiz-choices button span{min-width:0;overflow-wrap:anywhere}
 .cw-board-wrap,.party-grid-scroll{overscroll-behavior-x:contain}
}

@media(max-width:600px){
 .input-line{flex-direction:column}
 .input-line>.primary-button{width:100%;min-height:48px}
 .suggestions{min-width:0;max-width:none;width:100%;max-height:min(310px,45dvh)}
 .suggestion{min-width:0;gap:8px}
 .suggestion>div{min-width:0}
 .suggestion-name,.suggestion-detail{overflow-wrap:anywhere}
 .suggestion-arrow{flex-shrink:0}
 .attempt-setting small{font-size:.75rem;line-height:1.7}
 .quiz-choices{gap:8px}
 .quiz-choices button{font-size:.9375rem;line-height:1.6}
 .quiz-choices kbd{display:none}
 .challenge-question-actions{flex-wrap:wrap;gap:8px}
 .challenge-question-actions .quiet-button{font-size:.875rem;min-height:44px}
 .minigame-selector button{grid-template-columns:auto minmax(0,1fr);row-gap:2px}
 .minigame-selector button>span{grid-row:1/3}
 .minigame-selector small{grid-column:2}
 .se-input-row,.cw-input-row{flex-wrap:wrap}
 .se-input-row .primary-button,.cw-input-row .primary-button{width:100%;min-height:48px}
 .bgm-volume{gap:9px}
 .source-table{table-layout:fixed;width:100%}
 .source-table th,.source-table td{overflow-wrap:anywhere}
 .source-table td:nth-child(2){white-space:normal}
}

@media(max-width:380px){
 .mode-toolbar{flex-direction:column;align-items:stretch;gap:8px}
 .mode-toolbar .quiet-button{width:100%}
 .minigame-selector b{font-size:.875rem}
 .party-answer-form input{flex-basis:100%}
 .party-answer-form .primary-button{width:100%}
 .party-seat{flex-wrap:wrap}
 .party-seat>strong{margin-left:auto}
}

@media(max-width:700px){.gallery-link{grid-column:1/-1}}