:root { color-scheme: dark; }
  input[type="radio"] { color-scheme: light; }
  * { box-sizing: border-box; }
  body { margin:0; background:#292929; color:#e8e8e8; font:14px Arial,Helvetica,sans-serif; }
  button, input, select { font:inherit; }
  button { cursor:pointer; }
  .panel { position:relative; width:850px; min-height:750px; height:auto; margin:38px auto 55px; background:#363636; }
  /* The rooms section participates in page layout so the gray panel grows with it. */
  #menuView { min-height:750px; padding:499px 0 45px; }
  .title { position:absolute; left:0; top:35px; width:100%; font-size:30px; font-weight:bold; text-align:center; letter-spacing:0; margin:0; line-height:36px; }
  .txt { background:#444; border:1px solid #6c6c6c; border-radius:4px; color:#eee; padding:7px 10px; outline:none; }
  .txt::placeholder { color:#ededed; opacity:1; }
  .txt:focus { border-color:#b3b3b3; }
  .btn { border:1px solid #747474; border-radius:3px; background:#444; color:#e6e6e6; min-height:34px; padding:0 14px; }
  .btn:hover { background:#4d4d4d; }
  .btn:focus-visible,.green:focus-visible { outline:2px solid #eee;outline-offset:2px; }
  .green { background:#00c700; border:1px solid #00c700; border-radius:3px; padding:0 14px; height:35px; color:#fff; }
  .green:hover { background:#00b800; }
  #nickname { position:absolute; top:89px; left:43px; width:230px; height:35px; }
  #accountButton { position:absolute; top:142px; left:317px; width:215px; }
  .modes { position:absolute; top:205px; left:43px; }
  .modes .heading { margin:0 0 10px; }
  .modes label { display:flex; align-items:center; height:21px; gap:8px; cursor:pointer; }
  .modes input { appearance:auto; accent-color:#168aff; margin:0 0 0 1px; width:14px; height:14px; cursor:pointer; }
  #startButton { position:absolute; left:43px; top:352px; min-width:82px; font-size:16px; box-shadow:0 2px 2px #232323; }
  #createButton { position:absolute; top:240px; left:529px; width:187px; height:36px; padding:0; }
  #chatButton { position:absolute; left:43px; top:438px; width:110px; }
  .rooms { position:relative; margin-left:43px; width:764px; }
  .rooms-label { margin-bottom:11px; }
  .room-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:12px; row-gap:12px; }
  .room { background:#393939; border:1px solid #707070; border-radius:3px; height:112px; padding:12px 11px; position:relative; overflow:hidden; }
  .room-name { font-size:14px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-bottom:10px; }
  .room-info,.room-owner,.room-players { font-size:12px; color:#c8c8c8; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .room-owner { margin-top:5px; }
  .room-players { position:absolute; bottom:15px; left:11px; right:75px; }
  .room .join { position:absolute; bottom:11px; right:12px; width:58px; height:26px; min-height:26px; padding:0; font-size:13px; }
  .room.owner-room .room-name { padding-right:23px; }
  .room .delete-room { position:absolute; top:7px; right:7px; width:20px; height:20px; min-height:0; padding:0; border:1px solid #8e2020; border-radius:2px; background:#b32626; color:white; font:bold 15px/17px Arial,Helvetica,sans-serif; text-align:center; }
  .room .delete-room:hover { background:#d13c3c; }
  .room .delete-room:focus-visible { outline:2px solid white; outline-offset:2px; }
  .room .delete-confirm { position:absolute; inset:0; z-index:3; background:#393939; padding:10px 11px; display:flex; flex-direction:column; gap:10px; justify-content:center; }
  .room .delete-confirm .prompt { font-size:12px; color:#eee; }
  .room .delete-confirm .confirm-actions { display:flex; gap:8px; }
  .room .delete-confirm .confirm-actions button { min-height:27px; height:27px; padding:0 11px; font-size:12px; }
  .room .delete-confirm .confirm-delete { background:#b32626; border:1px solid #8e2020; color:#fff; border-radius:2px; }
  .room .delete-confirm .confirm-delete:hover { background:#d13c3c; }
  .join-panel { position:absolute; z-index:1; inset:0; background:#393939; padding:10px; }
  .join-panel .code { width:105px; height:30px; }
  .join-panel .actions { display:flex; gap:7px; margin-top:10px; }
  .join-panel button { min-height:27px; }
  .empty-room { font-size:12px; color:#aaa; text-align:center; margin-top:33px; }
  .mini-label { font-size:12px; color:#c4c4c4; }
  .view { display:none; }
  .view.active { display:block; }
  .subhead { text-align:center; padding-top:78px; margin:0; font-size:21px; }
  .back { position:absolute; left:43px; top:40px; }
  .sub-form { margin:90px 43px 0; }
  .create-fields { display:flex; align-items:flex-end; gap:12px; }
  .field { display:flex; flex-direction:column; gap:6px; }
  .field label { color:#d7d7d7; font-size:13px; }
  .create-fields #roomName { width:300px; height:35px; }
  .create-fields #roomCode { width:125px; height:35px; letter-spacing:2px; }
  .create-fields #roomPrivacy { width:155px; height:35px; }
  .create-actions { margin-top:20px; display:flex; gap:12px; }
  .note { margin-top:18px; font-size:12px; color:#aaa; line-height:1.5; }
  .status { color:#e7c59c; font-size:12px; min-height:19px; margin-top:10px; }
  .login-form { width:370px; margin:85px auto 0; }
  .login-form .field { margin:0 0 16px; }
  .login-form .txt { width:100%; height:35px; }
  .account-switch { margin-top:14px; color:#ccc; text-decoration:underline; background:none; border:none; padding:0; }
  .chat-view { position:absolute; inset:0; background:#171717; }
  .chat-back { position:absolute; top:18px; right:20px; z-index:3; }
  .chat-side { position:absolute; left:0; top:0; bottom:0; width:32%; border-right:1px solid #444; padding:18px 16px; }
  .chat-modes { display:flex; gap:7px; padding-right:8px; }
  .chat-tab { border:1px solid #777; color:#ddd; background:#282828; padding:8px 14px; border-radius:0; }
  .chat-tab.active { background:#3b3b3b; border-color:#ddd; }
  .users-title { border-bottom:1px solid #444; color:#bbb; font-size:12px; margin-top:24px; padding-bottom:10px; }
  .chat-main { position:absolute; left:32%; top:0; right:0; bottom:0; display:flex; flex-direction:column; }
  .chat-feed { flex:1; display:flex; align-items:flex-end; padding:18px; color:#999; font-size:13px; }
  .chat-input-row { display:flex; border-top:1px solid #444; padding:10px 12px; gap:6px; }
  .chat-input-row input { background:#252525; border:1px solid #555; color:#aaa; flex:1; height:34px; padding:8px; }
  .chat-input-row button { min-width:40px; }
  .room-preview-label { font-size:11px; color:#969696; font-style:italic; margin-left:7px; }
  .toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:#181818; border:1px solid #666; color:#ddd; font-size:13px; padding:11px 16px; display:none; max-width:90vw; text-align:center; z-index:50; }
  @media(max-width:875px){
    .panel { width:calc(100% - 24px); min-height:750px; height:auto; margin:12px auto 30px; }
    .title { font-size:26px; }
    #nickname { left:5%; width:37%; }
    #accountButton { left:52%; width:40%; }
    .modes { left:5%; }
    #startButton,#chatButton { left:5%; }
    #createButton { right:5%; left:auto; width:41%; }
    .rooms { margin-left:5%; width:90%; }
    .room-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
    .room { padding:10px 7px; }
    .room-players { left:7px; right:54px; }
    .room .join { right:6px; width:46px; }
    .sub-form { margin-left:5%; margin-right:5%; }
    .create-fields { flex-wrap:wrap; }
    .create-fields #roomName { width:240px; max-width:76vw; }
  }
  @media(max-width:540px){
    .panel { min-height:990px; }
    #menuView { min-height:990px; padding-top:500px; }
    .title { font-size:21px; }
    #nickname { width:90%; left:5%; }
    #accountButton { top:145px; left:5%; width:60%; }
    .modes { top:215px; }
    #createButton { top:275px; width:42%; }
    #startButton { top:375px; }
    #chatButton { top:443px; }
    .rooms { top:auto; }
    .room-grid { grid-template-columns:1fr; }
    .room { height:105px; }
    .chat-side { width:38%; padding:12px 8px; }
    .chat-main { left:38%; }
    .chat-tab { padding:8px 5px; font-size:12px; }
  }

/* Chat behavior only: retain approved colors/layout and ensure feed can scroll. */
.chat-feed { display:flex; flex-direction:column; align-items:stretch; overflow-y:auto; overflow-x:hidden; min-height:0; height:100%; padding-top:42px; }
/* Push short conversations to the bottom while keeping long conversations scrollable. */
.chat-feed::before { content:""; flex:1 0 0px; }
.chat-line { flex:0 0 auto; margin:0 0 7px; line-height:1.4; overflow-wrap:anywhere; }
.chat-name { font-weight:bold; margin-right:5px; }
.chat-hint { color:#aaaaaa; margin-top:10px; line-height:1.5; font-size:12px; }
#onlineList { margin-top:10px; word-wrap:break-word; }
.online-user { padding:4px 0; }
.chat-input-row input:disabled { opacity:.65; }
#authUsername:disabled { opacity:.75; }

[hidden] { display:none !important; }
.account-logout { margin-top:15px; }

.rank-0 { color:#b9b9b9; }
.rank-1 { color:#bfd9a4; }
.rank-2 { color:#92c8e5; }
.rank-3 { color:#86d7da; }
.rank-4 { color:#e1c28f; }
.rank-5 { color:#bfa9ec; }
.rank-6 { color:#85b1f0; }
.rank-7 { color:#efc168; }
.rank-8 { color:#e98d72; }

/* Rank color treatment uses the existing approved chat layout. */
.rank-9 { color:#f0ce78; }
.head-admin-name { color:#f6b16b; }
.name-red { color:#f38686; }
.name-orange { color:#f5b16e; }
.name-yellow { color:#f7db76; }
.name-green { color:#a9df8c; }
.name-blue { color:#94c6fa; }
.name-purple { color:#c6a2ff; }
.name-pink { color:#f4a8c7; }
.name-white { color:#f1f1f1; }
.name-gray { color:#aaaaaa; }
.chat-private-notice { flex:0 0 auto; color:#d2c08f; font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5; margin:6px 0; }
.private-message { color:#b2dcf5; }
.maintenance-panel { border-top:1px solid #565656; padding-top:14px; margin-top:18px; font-size:12px; }
.maintenance-panel .heading { margin-bottom:10px; }
.maintenance-panel form { display:flex; gap:7px; }
.maintenance-panel input { min-width:0; flex:1; }
#maintenanceStatus { white-space:pre-wrap; overflow-wrap:anywhere; }