:root{
  --page:#fff;
  --line:#999;
  --link:#1646b8;
  --dark:#202020;
  --darkText:#d7d7d7;
  --accent:#800000;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;padding:0;background:#efefef;color:#222;font-family:"MS PGothic","ＭＳ Ｐゴシック",sans-serif;font-size:16px;line-height:1.45}
button,input,select,textarea{font:inherit}
@media(max-width:768px){
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important}
}
a{color:var(--link);text-decoration:underline;cursor:pointer}
a[onclick]:not([href]):focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{outline:2px solid #b00020;outline-offset:2px}
.page{width:100%;max-width:470px;margin:0 auto;background:var(--page);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.dev-environment-notice{padding:6px 8px;background:#7a0018;color:#fff;font-weight:bold;text-align:center}
.logo{margin:8px;padding:13px 6px 10px;border:2px solid #9b0000;border-radius:7px;background:#fff7a8;color:#9b0000;text-align:center;line-height:1.05;box-shadow:inset 0 0 0 2px #fff}
.logo-main{font-size:27px;font-weight:bold;letter-spacing:1px}
.logo-sub{margin-top:6px;color:#6d3d00;font-size:14px}
.section{margin:8px;border:1px solid var(--line);background:#fafafa}
.section-title{padding:5px 7px;border-bottom:1px solid var(--line);background:#e9e9e9;color:var(--accent);font-weight:bold;text-align:center}
.section-body{padding:7px}
.notice{margin:6px 8px;padding:7px;border:1px solid #aaa;background:#fff9d8;line-height:1.55}
.big-link{display:block;margin:7px 8px;padding:8px 4px;border:2px outset #ddd;background:#eee;color:#0000cc;font-weight:bold;font-size:16px;text-align:center}
.menu a{display:block;padding:8px 7px;border-bottom:1px solid #aaa;background:#f7f7f7;font-weight:bold}
.menu a:last-child{border-bottom:0}
.field{margin-bottom:8px}
.field label{display:block;margin-bottom:3px;font-weight:bold}
.field input,.field select,.field textarea{width:100%;padding:6px;border:1px solid #888;background:#fff}
.field textarea{min-height:78px;resize:vertical}
#crDescription,#adminRoomDescription,#contactBody,#promoText{white-space:pre-wrap;text-align:left!important}
.actions{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.actions button{flex:1;min-width:90px;padding:7px}
.small{font-size:14px;line-height:1.55}
.hidden{display:none!important}
.footer{padding:12px 6px 18px;border-top:1px solid #999;color:#555;font-size:14px;line-height:1.6;text-align:center}
.footer a{display:inline-block;min-height:40px;padding:10px 6px}
.policy-view{padding-bottom:8px}
.policy-text{line-height:1.7}
.policy-text h2{margin:14px 0 5px;padding-bottom:2px;border-bottom:1px solid #aaa;color:#800000;font-size:15px}
.policy-text p{margin:7px 0}
.policy-text ul{margin:6px 0;padding-left:23px}
.policy-text li{margin:4px 0}
.policy-text .policy-prohibited-list{list-style:none;padding-left:0}
.policy-text p,
.policy-text li,
.policy-text h2{text-align:left}
.policy-text .policy-prohibited-list li{padding-left:1em;text-indent:-1em}
.policy-text .policy-prohibited-list li::before{content:"・"}
.policy-date{margin-top:14px!important;color:#666;font-size:14px;text-align:right}
.room{padding:8px 4px;border-bottom:1px dotted #999;line-height:1.5}
.room:last-child{border-bottom:0}
.room-meta{font-size:14px;color:#555;line-height:1.5}
.clock{text-align:center;color:#c00;font-weight:bold;letter-spacing:1px}
.room-created{text-align:center;color:#bfc8d2;font-size:14px;line-height:1.5;padding:3px 0}
.current-room-name{padding:7px 4px;color:inherit;font-size:15px;font-weight:bold;line-height:1.5;text-align:center;overflow-wrap:anywhere}
.join-room-name{margin:0 0 12px;border:1px solid #aa8;background:#fff9d8;color:#222}
.description-content{display:block;width:100%;background:#202020;color:#d7d7d7;contain:paint;overflow:hidden}
.nav{text-align:center;font-size:14px;line-height:2;padding:7px 0}.nav a{display:inline-block;padding:3px 7px;margin:2px;border:1px solid #888;background:#f3f3f3;text-decoration:none}.dark .nav a{background:#2b2b2b;border-color:#777;color:#9fc4e8}
.badge{display:inline-block;padding:2px 6px;border:1px solid #aaa;background:#eee;font-size:13px}
.search-row{display:flex;gap:5px}
.search-row input{min-width:0;flex:1}
.search-row button{width:auto!important;min-width:64px!important;min-height:40px!important;padding:7px 10px!important}
.search-again{margin:0 0 10px;padding:8px;border:1px solid #bbb;background:#f5f5f5}
.search-again .small{min-height:1.4em;margin-top:3px;color:#8b0000;text-align:left}
.trip-box{padding:7px;border:1px solid #aa8;background:#fffde9;line-height:1.6}
.live-list{max-height:none;overflow:visible}
.live-item{display:flex;gap:7px;padding:8px 2px;border-bottom:1px solid #aaa;min-height:108px}
.live-avatar,.chat-avatar{width:90px;height:90px;flex:0 0 90px;border:1px solid #888;background:#eee;object-fit:cover}
.promo-avatar{width:52px;height:52px;flex:0 0 52px;border:1px solid #888;background:#eee;object-fit:cover}
.avatar-picker-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.join-avatar-preview{width:64px;height:64px;border:1px solid #888;background:#eee;object-fit:cover}
.live-main,.chat-main,.promo-main{min-width:0;flex:1}
.live-meta,.chat-meta,.promo-meta{font-size:14px;line-height:1.5;color:#555}
.live-text{white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;text-align:left}
.chat-text{display:block;white-space:pre-wrap;overflow:visible;overflow-wrap:anywhere;text-align:left}

/* room / chat */
.dark{background:var(--dark);color:var(--darkText);padding:10px 0 18px}
.dark.room-custom-colors{background:var(--room-bg,var(--dark));color:var(--room-text,var(--darkText))}
.dark.room-custom-colors .room-head,
.dark.room-custom-colors .room-created,
.dark.room-custom-colors .presence,
.dark.room-custom-colors .chat-meta,
.dark.room-custom-colors .typing,
.dark.room-custom-colors .locked{color:var(--room-text,var(--darkText))}
.dark.room-custom-colors .chat-log,
.dark.room-custom-colors .description-content,
.dark.room-custom-colors .room-desc-wrap .description-content{background:var(--room-bg,var(--dark));color:var(--room-text,var(--darkText))}
.dark.room-custom-colors .room-promo-name{color:var(--room-text,var(--darkText))}
.dark.room-custom-colors .latest-chat-mini,
.dark.room-custom-colors .latest-chat-mini-text{color:var(--room-text,var(--darkText))}
.dark.room-custom-colors .chat-form textarea{background:color-mix(in srgb,var(--room-bg) 88%,white);color:var(--room-text,var(--darkText))}
.dark .section{width:calc(100% - 32px);max-width:390px;margin:8px auto;border:0;background:transparent}
.dark a{color:#9fc4e8}
.dark-line{height:2px;background:#eee;margin:10px 0}
.room-promo{display:flex;gap:6px;align-items:flex-start;min-height:0;max-height:none;overflow:hidden;padding:5px;border-top:1px solid #ddd;border-bottom:1px solid #ddd;font-size:14px;line-height:19px}
.room-promo.is-link{cursor:pointer}
.room-promo img,.room-promo .promo-avatar{width:32px;height:32px;flex:0 0 32px}
.room-promo img{object-fit:cover}
.room-promo-name{display:block;color:#fff;font-weight:bold}
.room-promo-body{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere}
.room-desc-wrap{margin:0}
.room-desc-wrap .description-content{display:block;width:100%;background:#202020;color:#d7d7d7;contain:paint;overflow:hidden}
.presence{padding:6px 0;color:#bfc8d2;font-size:14px;line-height:1.55}
.chat-form textarea{width:100%;min-height:72px;padding:6px;background:#2c2c2c;color:#eee;border:1px solid #777}
.chat-form select,.chat-form input{width:100%;padding:5px;margin-bottom:5px}
.chat-form button{border:2px outset #eee;background:#ddd;color:#111}
.typing{min-height:20px;color:#e6cf63;font-size:14px;line-height:1.5}
.whisper-live-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 0 5px;font-size:14px;line-height:1.5}
.whisper-live-status{color:#9fb7a5;white-space:nowrap}
.whisper-live-status.is-offline{color:#d79a9a}
.chat-log{height:auto;max-height:none;overflow:visible;border-top:2px solid #eee;border-bottom:2px solid #eee;background:#202020}
.chat-item{display:flex;gap:7px;padding:9px 0;border-bottom:1px solid #666}
.chat-meta{color:#8fa4b8}
.chat-time{margin-right:.35em}
.read-count{margin-left:6px;color:#b7c3cf;font-size:13px;white-space:nowrap}
.whisper{color:#ffc7e8}
.locked{padding:28px 10px;text-align:center;color:#ddd;font-size:15px}
#leaveConfirmView,#roomDeleteConfirmView{padding:20px 0 24px}
#leaveConfirmView .section,#roomDeleteConfirmView .section{width:calc(100% - 32px);max-width:520px;margin:0 auto;border:2px solid #888;background:#fff;color:#222}
#leaveConfirmView .section-title,#roomDeleteConfirmView .section-title{padding:10px;border-bottom:1px solid #999;background:#e9e9e9;color:#800000;font-size:18px;font-weight:bold}
#leaveConfirmView .section-body,#roomDeleteConfirmView .section-body{padding:16px}
#leaveConfirmView .notice,#roomDeleteConfirmView .notice{margin:0 0 14px;padding:14px;border:1px solid #aa9;background:#fffbe6;color:#111;font-size:16px;font-weight:bold;line-height:1.7}
#leaveConfirmView .actions button,#roomDeleteConfirmView .actions button{display:inline-block!important;width:auto!important;min-width:100px!important;min-height:44px!important;height:auto!important;margin:4px 8px!important;padding:9px 24px!important;border:2px outset #ddd!important;background:#eee!important;color:#111!important;font-size:16px!important;font-weight:bold!important;line-height:1.25!important;text-decoration:none!important}
#leaveConfirmView .actions button:first-child,#roomDeleteConfirmView .actions button:first-child{color:#8b0000!important}
.admin-box{padding:7px;border:1px solid #aa8;background:#fffde9}
.admin-member-list{margin-top:7px;border-top:1px dotted #999}
.admin-member-row{display:flex;align-items:center;gap:7px;padding:7px 3px;border-bottom:1px dotted #999;text-align:left}
.admin-member-row input{width:auto!important;margin:0}
.admin-member-state{margin-left:auto;font-size:13px;color:#555}
.captcha-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.72)}
.captcha-panel{width:min(390px,100%);padding:18px;border:2px solid #777;background:#fff;color:#222;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.captcha-panel h2{margin:0 0 8px;color:#800000;font-size:18px}
.captcha-panel p{margin:7px 0;line-height:1.5}
#turnstileWidget{display:flex;min-height:68px;align-items:center;justify-content:center;margin-top:12px}
.age-gate-overlay{position:fixed;inset:0;z-index:2100;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.82)}
.age-gate-panel{width:min(410px,100%);max-height:calc(100vh - 36px);overflow:auto;padding:17px;border:2px solid #777;background:#fff;color:#222;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.age-gate-panel h2{margin:0 0 9px;color:#800000;text-align:center;font-size:19px}
.age-gate-panel p{line-height:1.55;text-align:center}
.age-gate-summary{margin:10px 0;padding:8px;border:1px solid #aa8;background:#fff9d8;font-size:14px;line-height:1.6}
.age-gate-panel label{display:block;margin:9px 0;line-height:1.4}
.age-gate-panel input{width:auto;margin-right:5px}
.age-gate-panel button{display:block;width:100%;margin:12px 0 8px;padding:9px;font-weight:bold}
.operator-list{border-top:1px dotted #777}
.operator-item{padding:8px 3px;border-bottom:1px dotted #777;line-height:1.5}
.operator-item:last-child{border-bottom:0}
.operator-meta{color:#9fb0c0;font-size:13px;line-height:1.5}
.operator-text{margin:4px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.operator-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.operator-actions button{min-width:0!important;flex:0 1 auto!important;padding:4px 7px!important}
.operator-danger{color:#8b0000}
.report-link{display:inline-block;margin-left:7px;padding:2px 3px;color:#f0b9b9!important;font-size:13px;line-height:1.4}

/* modal */
.modal{position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.6);padding:15px 8px;overflow:auto}
.modal-panel{max-width:470px;margin:0 auto;background:#fff;border:2px solid #777}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:7px;background:#e9e9e9;border-bottom:1px solid #999}
.owned-room-admin-list{border:1px solid #aaa;background:#fff}
.owned-room-admin-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 7px;border-bottom:1px dotted #999}
.owned-room-admin-item:last-child{border-bottom:0}
.owned-room-admin-name{min-width:0;font-weight:bold;overflow-wrap:anywhere}
.owned-room-admin-item button{flex:0 0 auto;padding:5px 8px}
.promo-item{display:flex;gap:8px;padding:8px 3px;border-bottom:1px dotted #999}
.promo-body{white-space:pre-wrap;overflow-wrap:anywhere;text-align:left}

/* 長い名前や管理表示が画面幅を押し広げないようにする */
.chat-meta,
.room-meta,
.live-meta,
.promo-meta,
.presence,
.admin-member-row,
.current-room-name,
.latest-chat-mini-name{overflow-wrap:anywhere;word-break:break-word}

/* 白背景の一覧・空表示は淡色を使わず、確実に読める色にする */
#roomListView .room b{color:#222!important}
#roomListView .empty,
#realtimeView .empty,
#promoView .empty{color:#555!important}

/* 初回表示や再読み込み時は、必要なデータが揃うまで空の画面を見せない。 */
.app-loading-overlay{position:fixed;inset:0;z-index:1900;display:flex;align-items:center;justify-content:center;padding:18px;background:#efefef}
.app-loading-panel{width:min(390px,100%);padding:18px;border:2px solid #777;background:#fff;color:#222;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.2)}

.retro-clock{
  margin:4px 0 8px;
  color:#ff6a6a;
  font-size:14px;
  text-align:center;
  letter-spacing:1px;
}


/* center alignment patch */
.section,
.section-body,
.notice,
.room,
.live-item,
.promo-item,
.admin-box,
.field,
.nav{
  text-align:center;
}
.room-meta,
.live-meta,
.promo-meta,
.small{
  text-align:center;
}
.field label{
  text-align:center;
}
.field input,
.field textarea,
.field select{
  text-align:center;
}
.room-promo,
.chat-item,
.message,
.live-item,
.promo-item{
  justify-content:center;
}
.chat-main,
.live-main,
.promo-main{
  text-align:center;
}
.room-promo{
  text-align:center;
}
.presence,
.clock,
.retro-clock,
.typing{
  text-align:center;
}


/* compact room controls */
.dark .actions{
  justify-content:center;
  gap:4px;
}
.dark .chat-form select{
  width:auto;
  max-width:150px;
  min-width:110px;
  display:block;
  margin:0 auto 5px;
  height:22px;
  padding:1px 6px;
  font-size:11px;
}
.dark .chat-form{
  text-align:center;
}


/* room controls: only reduce height */
.dark .actions button{
    padding:1px 8px !important;
    height:22px;
    line-height:18px;
    font-size:15px;
}
.dark .chat-form textarea{
    min-height:72px !important;
}


/* non-room pages match the top-page look */
#roomListView,
#realtimeView,
#promoView,
#adminView,
#createRoomView,
#tripView,
#joinView{
  background:#fff !important;
  color:#222 !important;
  padding:0 !important;
}
#roomListView .section,
#realtimeView .section,
#promoView .section,
#adminView .section,
#createRoomView .section,
#tripView .section,
#joinView .section{
  width:auto !important;
  margin:8px !important;
  border:1px solid #999 !important;
  background:#fafafa !important;
}
#roomListView .section-title,
#realtimeView .section-title,
#promoView .section-title,
#adminView .section-title,
#createRoomView .section-title,
#tripView .section-title,
#joinView .section-title{
  padding:5px 7px !important;
  border-top:0 !important;
  border-bottom:1px solid #999 !important;
  background:#e9e9e9 !important;
  color:#800000 !important;
  font-size:16px !important;
  letter-spacing:0 !important;
}
#roomListView .section-body,
#realtimeView .section-body,
#promoView .section-body,
#adminView .section-body,
#createRoomView .section-body,
#tripView .section-body,
#joinView .section-body{
  padding:7px !important;
}
#roomListView .notice,
#realtimeView .notice,
#promoView .notice,
#adminView .notice,
#createRoomView .notice,
#tripView .notice,
#joinView .notice{
  margin:6px 8px !important;
  padding:7px !important;
  border:1px solid #aaa !important;
  background:#fff9d8 !important;
  color:#222 !important;
  font-size:15px !important;
  line-height:1.6 !important;
}
#roomListView .nav,
#realtimeView .nav,
#promoView .nav,
#adminView .nav,
#createRoomView .nav,
#tripView .nav,
#joinView .nav{
  border-top:0 !important;
  padding:7px 0 !important;
  color:#222 !important;
}
#roomListView .nav a,
#realtimeView .nav a,
#promoView .nav a,
#adminView .nav a,
#createRoomView .nav a,
#tripView .nav a,
#joinView .nav a{
  background:#eee !important;
  color:#1646b8 !important;
  border:1px solid #aaa !important;
}
#roomListView .field label,
#realtimeView .field label,
#promoView .field label,
#adminView .field label,
#createRoomView .field label,
#tripView .field label,
#joinView .field label{
  color:#222 !important;
  font-size:15px !important;
}
#roomListView .field input,
#roomListView .field textarea,
#roomListView .field select,
#realtimeView .field input,
#realtimeView .field textarea,
#realtimeView .field select,
#promoView .field input,
#promoView .field textarea,
#promoView .field select,
#adminView .field input,
#adminView .field textarea,
#adminView .field select,
#createRoomView .field input,
#createRoomView .field textarea,
#createRoomView .field select,
#tripView .field input,
#tripView .field textarea,
#tripView .field select,
#joinView .field input,
#joinView .field textarea,
#joinView .field select{
  background:#fff !important;
  color:#222 !important;
  border:1px solid #888 !important;
  font-size:16px !important;
}
#roomListView .actions button,
#realtimeView .actions button,
#promoView .actions button,
#adminView .actions button,
#createRoomView .actions button,
#tripView .actions button,
#joinView .actions button{
  background:#eee !important;
  color:#111 !important;
  border:2px outset #ddd !important;
  font-size:15px !important;
}
#roomListView .room,
#realtimeView .live-item,
#promoView .promo-item{
  color:#222 !important;
  border-bottom:1px dotted #999 !important;
  background:#fff !important;
}
#roomListView .room a{
  color:#1646b8 !important;
}
#roomListView .room-meta,
#realtimeView .live-meta,
#promoView .promo-meta{
  color:#666 !important;
}
#realtimeView .live-text,
#promoView .promo-main{
  color:#222 !important;
}
#adminView .admin-box{
  border:1px solid #aa8 !important;
  background:#fffde9 !important;
  color:#222 !important;
}
#realtimeView .retro-clock{
  color:#c00 !important;
  font-size:14px !important;
}


/* トップの部屋カード設定はここだけで管理する。 */
#topRoomGrid{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:0 !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
  border:1px solid #777 !important;
  background:#fff !important;
}
#topRoomGrid .card{
  width:100% !important;
  min-width:0 !important;
  min-height:104px !important;
  margin:0 !important;
  padding:3px !important;
  border:0 !important;
  border-right:1px solid #777 !important;
  border-bottom:1px solid #777 !important;
  border-radius:0 !important;
  background:#fff !important;
  overflow:hidden !important;
  text-align:center !important;
  box-sizing:border-box !important;
}
#topRoomGrid .card:nth-child(5n){
  border-right:0 !important;
}
#topRoomGrid .card:nth-child(n+11){
  border-bottom:0 !important;
}
#topRoomGrid .card img{
  width:48px !important;
  height:48px !important;
  display:block !important;
  margin:0 auto 3px !important;
  object-fit:cover !important;
}
#topRoomGrid .card b{
  display:block !important;
  height:12px;
  margin:0 0 3px !important;
  font-size:9px !important;
  line-height:11px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#topRoomGrid .card > div:last-child{
  margin:0 !important;
  font-size:9px !important;
  line-height:12px !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  overflow:hidden !important;
}

/* スマホでは部屋名と発言が読める3列表示にする */
@media(max-width:768px){
  #topRoomGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;background:#fff!important}
  #topRoomGrid .card{min-height:120px!important;padding:5px 4px!important;border-right:1px solid #777!important;border-bottom:1px solid #777!important}
  #topRoomGrid .card:nth-child(5n){border-right:1px solid #777!important}
  #topRoomGrid .card:nth-child(3n){border-right:0!important}
  #topRoomGrid .card:nth-child(n+11){border-bottom:1px solid #777!important}
  #topRoomGrid .card img{width:48px!important;height:48px!important;margin-bottom:4px!important}
  #topRoomGrid .card b{height:auto!important;min-height:36px!important;font-size:14px!important;line-height:19px!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important;text-overflow:clip!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important}
  #topRoomGrid .card > div:last-child{font-size:14px!important;line-height:19px!important;-webkit-line-clamp:3!important}
  .current-room-name{font-size:16px}
}

/* 操作ボタンは、押せることが分かる四角い見た目と十分な高さにする */
button{
  -webkit-appearance:auto !important;
  appearance:auto !important;
  display:inline-block !important;
  width:auto !important;
  min-width:44px !important;
  min-height:36px !important;
  flex:0 0 auto !important;
  margin:2px 4px !important;
  padding:7px 12px !important;
  border:2px outset #ddd !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:#eee !important;
  color:#111 !important;
  text-decoration:none !important;
  cursor:pointer !important;
}
.dark button{background:#eee!important;color:#111!important;border-color:#ddd!important}
button.operator-danger{background:#fff0f0!important;color:#8b0000!important;border-color:#c99!important}
button:disabled{
  color:#555 !important;
  cursor:default !important;
  opacity:.72;
}
.age-gate-panel #ageConsentButton{display:block!important;width:100%!important;min-height:44px!important;margin:12px 0 8px!important;font-size:16px!important;font-weight:bold!important}
#sendChatButton{min-width:100px!important;min-height:42px!important;height:auto!important;padding:8px 16px!important;font-size:15px!important;line-height:1.4!important}
/* 部屋内の入室者表示を、周囲に合わせて小さくする */
.dark .presence{
  font-size:14px !important;
  line-height:1.5 !important;
  font-weight:normal !important;
}
.dark .presence b{font-size:inherit !important}

/* 部屋内だけ、宣伝と発言者のアイコンを少し大きくする */
.dark .room-promo{
  min-height:0 !important;
  max-height:none !important;
}
.dark .room-promo img,
.dark .room-promo .promo-avatar{
  width:38px !important;
  height:38px !important;
  flex:0 0 38px !important;
}
.dark .chat-item .chat-avatar{
  width:90px !important;
  height:90px !important;
  flex:0 0 90px !important;
}

/* 部屋の閲覧中・入室中だけ、サイト名の大見出しを表示しない */
.page:has(#roomPreviewView:not(.hidden)) > .logo,
.page:has(#chatView:not(.hidden)) > .logo{
  display:none !important;
}

/* 説明文と発言欄の間に表示する、最新コメントの小窓 */
.latest-chat-mini{
  display:flex;
  align-items:center;
  gap:6px;
  height:48px;
  margin:5px 0;
  padding:3px 5px;
  border-top:1px solid #777;
  border-bottom:1px solid #777;
  background:#292929;
  color:#d7d7d7;
  font-size:14px;
  line-height:1.35;
  overflow:hidden;
  box-sizing:border-box;
}
.latest-chat-mini-avatar{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border:1px solid #777;
  background:#eee;
  object-fit:cover;
  box-sizing:border-box;
}
.latest-chat-mini-text{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.2;
  overflow:hidden;
}
.latest-chat-mini-meta,
.latest-chat-mini-message{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.latest-chat-mini-name{color:#9fc4e8;font-weight:bold}
.latest-chat-mini-link{color:#9fc4e8;font-weight:bold;text-align:center;text-decoration:underline}
.latest-chat-mini.is-link{cursor:pointer}
.latest-chat-mini.is-link:focus-visible{outline:2px solid #9fc4e8;outline-offset:2px}

/* リアルタイム一覧は、アイコンが無い行に大きな空白を作らない */
#realtimeView .live-item{min-height:0;align-items:flex-start;cursor:pointer}
#realtimeView .live-room-name{color:#1646b8;font-weight:bold;text-decoration:underline}
#realtimeView .live-item:hover .live-room-name{text-decoration-thickness:2px}
#realtimeView .live-item:focus-visible{outline:2px solid #800000;outline-offset:-2px}

/* 検索結果・部屋一覧の20件ページ分け */
.search-results-list{border-top:1px dotted #999}
.search-result-item{padding:10px 5px;border-bottom:1px dotted #999;line-height:1.7;overflow-wrap:anywhere}
.room-description-summary{margin-top:4px;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}
.room-list-item{padding:11px 7px!important}
.room-list-title{font-size:15px;font-weight:bold;line-height:1.5;overflow-wrap:anywhere}
.room-list-title a{display:inline-block;padding:2px 0}
.room-list-item .room-meta{margin-top:3px;color:#555!important;font-size:14px;line-height:1.55}
.room-list-item .room-description-summary{margin-top:5px;color:#333;font-size:15px;line-height:1.6}
.pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px;min-height:28px;padding:9px 5px;text-align:center}
.pagination button{min-width:32px!important;min-height:32px!important;margin:2px!important;padding:5px 7px!important;font-weight:normal!important}
.pagination-current{display:inline-block;min-width:20px;padding:2px 4px;color:#222;font-weight:bold;text-decoration:none}
.pagination-separator{color:#666}

/* スマホは本文13px・補助情報12pxを基準にする。 */
@media(max-width:768px){
  html,body{font-size:13px;line-height:1.5}
  .small{font-size:12px;line-height:1.5}
  .footer{font-size:12px;line-height:1.5}
  .footer a{min-height:34px;padding:7px 5px}
  .nav{font-size:12px;line-height:1.9}
  .nav a{min-height:32px;padding:4px 8px;margin:1px 2px}
  #promoView .promo-meta a{display:inline-block;min-height:32px;padding:7px 9px}
  #createRoomView input[type="checkbox"]{width:20px!important;height:20px!important;min-width:20px;min-height:20px;vertical-align:middle}
  #createRoomView .field label:has(input[type="checkbox"]){display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:6px 0}
  #topRoomGrid .card b a{display:inline-block;min-height:32px;padding:7px 2px}
  .room-list-title a{min-height:32px;padding:5px 2px}
  .room-meta,
  .live-meta,
  .chat-meta,
  .promo-meta{font-size:12px;line-height:1.5}
  .chat-meta{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;column-gap:0;row-gap:0;text-align:center}
  .chat-meta .chat-time,
  .chat-meta .chat-name,
  .chat-meta .read-count,
  .chat-meta .whisper,
  .chat-meta .report-link{margin:0!important;padding:0!important;white-space:nowrap}
  .chat-meta .chat-name,
  .chat-meta .read-count{margin-left:-5px!important}
  .chat-meta .whisper,
  .chat-meta .report-link{margin-left:2px!important}
  .room-created{font-size:12px}
  .current-room-name{font-size:13px}
  .badge{font-size:12px}
  .room-promo{padding:4px;font-size:13px;line-height:18px}
  .presence{font-size:12px;line-height:1.5}
  .typing,
  .whisper-live-row{font-size:12px;line-height:1.5}
  .read-count,
  .admin-member-state,
  .operator-meta,
  .report-link{font-size:12px}
  #roomListView .section-title,
  #realtimeView .section-title,
  #promoView .section-title,
  #adminView .section-title,
  #createRoomView .section-title,
  #tripView .section-title,
  #joinView .section-title{font-size:14px!important}
  #roomListView .notice,
  #realtimeView .notice,
  #promoView .notice,
  #adminView .notice,
  #createRoomView .notice,
  #tripView .notice,
  #joinView .notice{font-size:13px!important;line-height:1.55!important}
  #roomListView .field label,
  #realtimeView .field label,
  #promoView .field label,
  #adminView .field label,
  #createRoomView .field label,
  #tripView .field label,
  #joinView .field label{font-size:13px!important}
  #roomListView .actions button,
  #realtimeView .actions button,
  #promoView .actions button,
  #adminView .actions button,
  #createRoomView .actions button,
  #tripView .actions button,
  #joinView .actions button{font-size:13px!important}
  #realtimeView .retro-clock{font-size:12px!important}
  #topRoomGrid .card b{font-size:13px!important;line-height:18px!important}
  #topRoomGrid .card > div:last-child{font-size:12px!important;line-height:17px!important}
  #sendChatButton{min-height:38px!important;font-size:13px!important}
  .dark .actions button{font-size:13px!important}
  .dark .presence{font-size:12px!important;line-height:1.5!important}
  .latest-chat-mini{height:46px;font-size:13px;line-height:1.3}
  .latest-chat-mini-avatar{width:36px;height:36px;flex-basis:36px}
  .room-list-item .room-meta{font-size:12px!important;line-height:1.5}
  .room-list-item .room-description-summary{font-size:13px;line-height:1.55}
}

/* 画面幅に合わせ、スマホでは従来幅、パソコンでは読みやすく広げる。 */
/* 768px以下のスマホ指定と、隙間なく対になるパソコン指定。 */
@media not all and (max-width:768px){
  html,body{font-size:16px}
  .page{width:calc(100% - 32px);max-width:960px}
  .dark .section{width:calc(100% - 48px);max-width:860px}
  .logo{padding:18px 10px 14px}
  .logo-main{font-size:34px}
  .logo-sub{font-size:14px}
  .notice{padding:10px;font-size:16px;line-height:1.65}
  .section{margin:12px}
  .section-title{padding:8px 10px;font-size:17px}
  .section-body{padding:11px}
  .menu a{padding:11px 10px;font-size:16px}
  .big-link{padding:10px 6px;font-size:18px}
  .small{font-size:14px}
  .footer{padding:15px 8px 20px;font-size:14px}
  .nav{font-size:14px;line-height:2.1}
  .nav a{padding:3px 8px}
  .field{margin-bottom:12px}
  .field label{font-size:15px}
  .field input,
  .field textarea,
  .field select{padding:9px;font-size:16px}
  .search-row{max-width:640px;margin-right:auto;margin-left:auto}
  .search-row button,
  button{font-size:15px!important}
  .search-results-list,
  #roomList{max-width:820px;margin-right:auto;margin-left:auto}
  .search-result-item,
  .room{padding:13px 8px;font-size:16px}
  .room-list-title{font-size:17px}
  .room-list-item .room-meta{font-size:14px}
  .room-list-item .room-description-summary{font-size:15px}
  .room-meta,
  .live-meta,
  .chat-meta,
  .promo-meta{font-size:14px}
  .pagination{font-size:15px}
  #topRoomGrid .card{min-height:146px!important;padding:7px!important}
  #topRoomGrid .card img{width:64px!important;height:64px!important;margin-bottom:6px!important}
  #topRoomGrid .card b{height:auto;font-size:14px!important;line-height:19px!important}
  #topRoomGrid .card > div:last-child{font-size:14px!important;line-height:19px!important}

  #roomListView .section-title,
  #realtimeView .section-title,
  #promoView .section-title,
  #adminView .section-title,
  #createRoomView .section-title,
  #tripView .section-title,
  #joinView .section-title{padding:8px 10px!important;font-size:17px!important}
  #roomListView .notice,
  #realtimeView .notice,
  #promoView .notice,
  #adminView .notice,
  #createRoomView .notice,
  #tripView .notice,
  #joinView .notice{padding:10px!important;font-size:15px!important}
  #roomListView .field label,
  #realtimeView .field label,
  #promoView .field label,
  #adminView .field label,
  #createRoomView .field label,
  #tripView .field label,
  #joinView .field label{font-size:15px!important}
  #roomListView .field input,
  #roomListView .field textarea,
  #roomListView .field select,
  #realtimeView .field input,
  #realtimeView .field textarea,
  #realtimeView .field select,
  #promoView .field input,
  #promoView .field textarea,
  #promoView .field select,
  #adminView .field input,
  #adminView .field textarea,
  #adminView .field select,
  #createRoomView .field input,
  #createRoomView .field textarea,
  #createRoomView .field select,
  #tripView .field input,
  #tripView .field textarea,
  #tripView .field select,
  #joinView .field input,
  #joinView .field textarea,
  #joinView .field select{padding:9px!important;font-size:16px!important}
  #joinView #joinColor{display:block;width:180px!important;height:52px!important;margin:6px auto 0!important;padding:4px!important;border:2px solid #666!important;background:#fff!important;cursor:pointer}
  #joinView #joinColor::-webkit-color-swatch-wrapper{padding:2px}
  #joinView #joinColor::-webkit-color-swatch{border:1px solid #555}
  #joinView #joinColor::-moz-color-swatch{border:1px solid #555}
  #createRoomView #crBackgroundColor,
  #createRoomView #crRoomTextColor{display:block;width:180px!important;height:52px!important;margin:6px auto 0!important;padding:4px!important;border:2px solid #666!important;background:#fff!important;cursor:pointer}
  #createRoomView #crBackgroundColor::-webkit-color-swatch-wrapper,
  #createRoomView #crRoomTextColor::-webkit-color-swatch-wrapper{padding:2px}
  #createRoomView #crBackgroundColor::-webkit-color-swatch,
  #createRoomView #crRoomTextColor::-webkit-color-swatch{border:1px solid #555}
  #createRoomView #crBackgroundColor::-moz-color-swatch,
  #createRoomView #crRoomTextColor::-moz-color-swatch{border:1px solid #555}
  #roomListView .actions button,
  #realtimeView .actions button,
  #promoView .actions button,
  #adminView .actions button,
  #createRoomView .actions button,
  #tripView .actions button,
  #joinView .actions button{font-size:15px!important}
  #realtimeView .live-text,
  #promoView .promo-main{font-size:16px!important}
  #realtimeView .retro-clock{font-size:15px!important}

  .dark .section{font-size:16px}
  .dark .clock{font-size:17px}
  .dark .room-created{font-size:14px}
  .current-room-name{padding:9px 6px;font-size:17px}
  .dark .presence{font-size:14px!important}
  .dark .typing{font-size:14px}
  .dark .chat-form select{width:260px;max-width:100%;height:34px;padding:5px 8px;font-size:15px}
  .dark .chat-form textarea{min-height:110px!important;padding:10px;font-size:16px}
  .dark #sendChatButton{height:36px!important;padding:4px 18px!important;font-size:16px!important;line-height:24px}
  .dark .chat-item{gap:12px;padding:13px 0}
  .dark .chat-text{font-size:16px;line-height:1.65}
  .dark .chat-item .chat-avatar{width:100px!important;height:100px!important;flex-basis:100px!important}
  .dark .room-promo{min-height:0!important;max-height:none!important;padding:6px;font-size:14px;line-height:18px}
  .dark .room-promo img,
  .dark .room-promo .promo-avatar{width:50px!important;height:50px!important;flex-basis:50px!important}
  .latest-chat-mini{height:50px;padding:5px 8px;font-size:14px}
  .latest-chat-mini-avatar{width:38px;height:38px;flex-basis:38px}
}

@media(max-width:359px){
  .captcha-overlay{padding:8px}
  .captcha-panel{padding:10px}
  #turnstileWidget{justify-content:flex-start;overflow-x:auto}
}

@media(min-width:1200px){
  .page{max-width:1080px}
  .dark .section{max-width:960px}
  .search-results-list,
  #roomList{max-width:920px}
}