.setup-basics{display:grid;grid-template-columns:1fr;gap:0}
.setup-character-section{margin-top:12px;border:1px solid #dce5d8;border-radius:10px;overflow:hidden;background:#f5f8f0}
.setup-character-section .roles{gap:0;border-bottom:1px solid #dce5d8;padding:4px;background:#eaf0e4}
.setup-character-section .roles button{border:0;border-radius:6px;background:transparent;padding:9px}
.setup-character-section .roles button.active{background:#fcfdf8;color:#176d52;box-shadow:0 1px 4px #25453115}
.setup-character-section .character-grid{padding:8px}
@media(max-width:760px){
 #setup.setup{padding:14px;overscroll-behavior:contain}
 #setup.setup .modal-title h2{font-size:18px;margin:0;line-height:1.4}
 #setup.setup .modal-title{margin-bottom:10px}
 #setup .setup-basics{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
 #setup .setup-basics.joining{grid-template-columns:1fr}
 #setup .setup-basics>.field{display:flex;flex-direction:column;align-items:stretch;gap:5px;margin:0}
 #setup .setup-basics input,#setup .setup-basics .movement-mode-trigger{margin:0;height:36px;font-size:12px;padding:0 9px}
 #setup .themes{gap:8px}
 #setup .theme{padding:5px}
 #setup .theme-art{height:62px}
 #setup .theme strong{font-size:11px;margin:5px 0 1px}
 #setup .config-grid .field{margin-bottom:0}
 #setup .setup-character-section{margin-top:10px}
 #setup .setup-character-section .roles button{font-size:12px;padding:7px}
 #setup .character-portrait{height:66px;aspect-ratio:auto;object-fit:cover;object-position:top}
 #setup .character-card{padding:4px 3px}
 #setup .character-card small{font-size:8px;line-height:1.4}
 #setup #enter{margin-top:12px;padding:11px 14px}
 #setup .setup-footer{display:none}
}
.theme .theme-art{background-image:url('./assets/venue-realistic-options-20261031.png');background-size:240% auto;background-repeat:no-repeat;background-position:21% 12%}
.theme .ancient-art{background-position:96% 12%}
.theme .theme-art span,.theme .theme-art:after{display:none}
#setup .character-grid:has([data-character="energetic"]:not([hidden])){grid-template-columns:repeat(5,minmax(0,1fr))}
#setup .character-card{min-width:0}
.theme .theme-art{background-size:300% auto;background-position:19% 13%}
.theme .ancient-art{background-position:84% 13%}
@media(max-width:760px){#setup .character-grid:has([data-character="energetic"]:not([hidden])) .character-card strong{font-size:9px;white-space:nowrap}}
/* Five character cards keep four-character names and load prompts on one line. */
#setup .character-grid{container-type:inline-size;gap:5px}
#setup .character-grid .character-card{padding-left:2px;padding-right:2px}
#setup .character-grid .character-card strong{font-size:clamp(8px,calc(5cqw - 3px),11px);line-height:17px;white-space:nowrap;letter-spacing:0}
#setup .character-grid .character-card small{font-size:clamp(7px,calc(4cqw - 2px),8.5px);line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}

/* Wide create-game layout only for desktop mouse/trackpad windows. */
@media (min-width:820px) and (hover:hover) and (pointer:fine){
 #setup.setup:has(#create-fields:not([hidden])){display:grid;grid-template-columns:280px minmax(0,1fr);gap:12px 24px;align-items:start;left:50%;top:calc(50% + 20px);transform:translate(-50%,-50%);width:min(1000px,calc(100vw - 64px));max-width:none;max-height:calc(100dvh - 96px);padding:22px 24px;overflow:auto;border-radius:18px}
 #setup:has(#create-fields:not([hidden]))>.modal-title{grid-column:1/-1;grid-row:1;margin:0 0 3px}
 #setup:has(#create-fields:not([hidden]))>.modal-title h2{font-size:24px}
 #setup:has(#create-fields:not([hidden]))>.setup-basics{grid-column:1;grid-row:2;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
 #setup:has(#create-fields:not([hidden])) .setup-basics>.field{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:0;font-size:12px}
 #setup:has(#create-fields:not([hidden])) .setup-basics input,#setup:has(#create-fields:not([hidden])) .movement-mode-trigger{width:100%;min-width:0;margin:0;height:38px;padding:0 10px;font-size:13px}
 #setup:has(#create-fields:not([hidden]))>#create-fields{grid-column:1;grid-row:3}
 #setup:has(#create-fields:not([hidden])) #create-fields>.field{margin:0 0 7px;font-size:12px}
 #setup:has(#create-fields:not([hidden])) .themes{gap:10px}
 #setup:has(#create-fields:not([hidden])) .theme{padding:6px}
 #setup:has(#create-fields:not([hidden])) .theme-art{height:80px}
 #setup:has(#create-fields:not([hidden])) .theme strong{font-size:12px;margin-top:6px}
 #setup:has(#create-fields:not([hidden])) .config-grid{gap:8px;margin-top:10px}
 #setup:has(#create-fields:not([hidden])) .config-grid .field{margin:0;font-size:12px;min-width:0}
 #setup:has(#create-fields:not([hidden])) .config-grid select{height:38px;margin-top:6px;padding:0 7px;font-size:13px}
 #setup:has(#create-fields:not([hidden]))>.setup-character-section{grid-column:2;grid-row:2/4;margin:0;border-radius:12px}
 #setup:has(#create-fields:not([hidden])) .setup-character-section .roles button{padding:9px;font-size:13px}
 #setup:has(#create-fields:not([hidden])) .character-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px}
 #setup:has(#create-fields:not([hidden])) .character-card{padding:6px;border-radius:9px}
 #setup:has(#create-fields:not([hidden])) .character-portrait{width:100%;height:108px;aspect-ratio:auto;object-fit:contain;object-position:center;background:#e9eeea;border-radius:5px}
 #setup:has(#create-fields:not([hidden])) .character-card strong{font-size:14px;line-height:20px;margin-top:5px}
 #setup:has(#create-fields:not([hidden])) .character-card small{font-size:11px;line-height:15px}
 #setup:has(#create-fields:not([hidden])) #character-loading{grid-column:1/-1;grid-row:4;margin:0;padding:10px 12px}
 #setup:has(#create-fields:not([hidden])) #enter{grid-column:1/-1;grid-row:5;margin:0;height:44px;padding:10px 16px;font-size:15px}
 #setup:has(#create-fields:not([hidden])) .setup-footer{grid-column:1/-1;grid-row:6;margin:0;font-size:10px}
 #setup:has(#create-fields:not([hidden])):has([data-role="hunter"].active) .character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #setup:has(#create-fields:not([hidden])):has([data-role="hunter"].active) .character-portrait{height:210px}
}
@media (min-width:820px) and (hover:hover) and (pointer:fine) and (max-height:650px){
 #setup.setup:has(#create-fields:not([hidden])){padding:14px 20px;gap:8px 20px}
 #setup:has(#create-fields:not([hidden])) .character-portrait{height:76px}
 #setup:has(#create-fields:not([hidden])) .character-card strong{font-size:13px;line-height:18px;margin-top:3px}
 #setup:has(#create-fields:not([hidden])) .character-card small{font-size:10px;line-height:14px}
 #setup:has(#create-fields:not([hidden])):has([data-role="hunter"].active) .character-portrait{height:170px}
 #setup:has(#create-fields:not([hidden])) .theme-art{height:64px}
}
@media (min-width:820px) and (hover:hover) and (pointer:fine){
 #setup.setup:has(#create-fields:not([hidden])){grid-template-rows:auto 64px auto auto auto auto}
}

@media (max-width: 760px), (pointer: coarse) {
 #setup.setup:has(#join-tabs:not([hidden])) {
  top: 88px;
  max-height: calc(100dvh - 100px - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior-y: contain;
 }
}


#existing-rooms .room-item[aria-pressed='true'] { background: #dcebe4; box-shadow: inset 3px 0 #397653; }