/* Island's account and co-op pages use the same coastal palette as the game. */
.online-identity{max-width:335px;margin:2px 0 0;color:#d2e3d4;font-size:.74rem;line-height:1.5}.menu-buttons .online-profile-button{text-align:left;background:#173c4499;font-size:.88rem}.online-dialog{color-scheme:light;width:min(670px,calc(100vw - 24px));max-height:92dvh;background:#f1f0e4;color:#24464b;border:1px solid #ccd4c6;border-radius:16px;padding:26px;box-shadow:0 24px 80px #08242c99;font-size:.92rem}.online-dialog::backdrop{background:#071e29aa;backdrop-filter:blur(4px)}.online-dialog .online-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.online-heading h2{margin:0;font-size:1.9rem;letter-spacing:-.035em}.online-dialog .online-kicker{font-size:.76rem;color:#5f7d75;margin:0 0 5px}.online-heading>button{padding:3px 12px;border:0;font-size:1.6rem;background:transparent;color:#34585c;align-self:start}.online-dialog p{line-height:1.55}.online-dialog button,.online-dialog .online-account-link{border:1px solid #91aaa2;border-radius:8px;background:#e2e8dc;color:#254e50;padding:10px 14px;font-size:.87rem;font-weight:600;min-height:42px}.online-dialog button:hover,.online-dialog .online-account-link:hover{background:#d3ded1}.online-dialog button:disabled{opacity:.5}.online-dialog .online-primary{color:#fffaf0;background:#2b6261;border-color:#2b6261}.online-dialog .online-primary:hover{background:#214f50}.online-dialog input:not([type=color]):not([type=checkbox]),.online-dialog select{border:1px solid #9eb4aa;border-radius:7px;background:#fffef6;color:#274b4c;width:100%;padding:10px 12px;min-height:43px;font:inherit}.online-dialog input::placeholder{color:#748b80}.online-dialog label{color:#3c5c57;font-size:.8rem;margin:13px 0 7px;display:block}.online-dialog :is(button,input,select,a,summary):focus-visible{outline:3px solid #237f82;outline-offset:3px}.online-mode-note{border-left:3px solid #4a8b7d;padding:10px 13px;background:#e3e9db;color:#365b51;font-size:.82rem}.online-feedback{font-size:.84rem;color:#8b382e;min-height:1.4em;overflow-wrap:anywhere}.online-profile-dialog{width:min(770px,calc(100vw - 24px))}.online-profile-layout{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start}.online-preview-side{position:sticky;top:0;text-align:center;background:linear-gradient(#c6d9ca,#dae5d5);border-radius:90px 90px 10px 10px;overflow:hidden;margin-top:20px}.online-preview-side canvas{display:block;width:100%;height:285px}.online-preview-side p{font-size:.72rem;color:#41655e;margin:0 10px 12px}.online-profile-fields>label:first-child{margin-top:4px}.online-colors{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin-top:13px}.online-colors label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;border-bottom:1px solid #c9d4c3;padding:8px 0}.online-colors input[type=color]{width:42px;height:34px;border:1px solid #91aaa2;border-radius:6px;background:#fffef6;padding:3px;cursor:pointer}.online-selects{display:grid;grid-template-columns:1fr 1fr;gap:14px}.online-field-label{display:block;font-size:.75rem;color:#577469;margin:15px 0 7px}.online-preset-row{display:flex;gap:7px}.online-preset-row button{flex:1;padding:7px;font-size:.75rem;min-height:35px}.online-profile-dialog #online-profile-save{width:100%;margin-top:3px}.online-account-links{border-top:1px solid #c5d2c2;padding-top:18px;margin-top:24px}.online-account-links h3{font-size:1rem;margin:0}.online-account-links p{font-size:.77rem;color:#577069}.online-provider-row{display:flex;flex-wrap:wrap;gap:8px}.online-dialog .online-account-link{display:inline-flex;align-items:center;font-size:.76rem;text-decoration:none}.online-small{font-size:.75rem!important;color:#61796e;line-height:1.5}.online-lobby-toolbar{display:flex;align-items:center;justify-content:space-between;margin-top:26px;gap:15px}.online-lobby-toolbar h3{margin:0;font-size:1rem}.online-lobby-toolbar button{min-height:35px;font-size:.75rem;padding:6px 10px}.online-lobby-list{margin:12px 0 20px;max-height:260px;overflow:auto;border-top:1px solid #c4d1c2}.online-lobby-row{display:flex;gap:16px;align-items:center;justify-content:space-between;border-bottom:1px solid #c4d1c2;padding:12px 0}.online-lobby-row>div{min-width:0}.online-lobby-row strong,.online-lobby-row span{display:block;overflow-wrap:anywhere}.online-lobby-row span{font-size:.72rem;color:#5e7970;margin-top:4px}.online-lobby-row button{flex-shrink:0;font-size:.77rem;padding:8px 12px}.online-empty{font-size:.85rem;color:#688175;padding:14px 4px}.online-join-form>div{display:flex;gap:9px}.online-join-form input{text-transform:uppercase;letter-spacing:.1em}.online-create{margin-top:24px;border-top:1px solid #c4d1c2;padding-top:17px}.online-create summary{cursor:pointer;font-weight:700;padding:4px 0}.online-create-options{display:flex;gap:22px;align-items:end}.online-create-options>div{width:100px}.online-dialog .online-checkbox{display:flex;align-items:center;justify-content:start;gap:8px;min-height:43px;margin:0}.online-checkbox input{width:18px;height:18px;accent-color:#357b70}.online-room-code{display:flex;align-items:center;justify-content:space-between;gap:15px;background:#dce7d8;padding:15px 17px;border-radius:9px}.online-room-code span,.online-room-code strong{display:block}.online-room-code span{font-size:.73rem;color:#4b7267}.online-room-code strong{font:700 1.8rem/1.4 'Avenir Next','Trebuchet MS',sans-serif;letter-spacing:.16em}.online-room-code button{font-size:.76rem}.online-members{list-style:none;padding:0;margin:19px 0}.online-members li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #c8d4c4}.online-members strong{font-size:.88rem;overflow-wrap:anywhere}.online-members small{font-size:.72rem;color:#648070;text-align:right}.online-member-swatch{width:23px;height:29px;display:block;border-radius:6px 6px 3px 3px;border:2px solid #fffaf0;box-shadow:0 0 0 1px #b8c8b5}.online-room-actions{display:flex;gap:9px;margin-top:20px}.online-room-actions button{flex:1}.online-dialog [hidden]{display:none!important}
@media(max-width:560px){.online-dialog{padding:19px;font-size:.84rem}.online-heading h2{font-size:1.55rem}.online-profile-layout{grid-template-columns:125px minmax(0,1fr);gap:14px}.online-preview-side canvas{height:242px}.online-preview-side{margin-top:8px}.online-preview-side p{font-size:.65rem}.online-colors{gap:5px 10px}.online-colors label{font-size:.7rem;display:grid;gap:4px}.online-colors input[type=color]{width:100%;height:31px}.online-selects{gap:8px;grid-template-columns:1fr}.online-selects label{margin-top:8px}.online-dialog label{font-size:.73rem}.online-preset-row{flex-wrap:wrap;gap:5px}.online-preset-row button{min-width:42px;min-height:32px;font-size:.7rem}.online-members li{grid-template-columns:23px minmax(0,1fr);gap:8px}.online-members small{grid-column:2;text-align:left;margin-top:-5px}.online-room-actions{flex-direction:column}.online-dialog .online-heading{gap:10px}.online-room-code{padding:12px}.online-room-code strong{font-size:1.35rem}.online-lobby-row{gap:8px}.online-lobby-row button{padding:8px;font-size:.7rem}}
@media(max-height:570px){.online-dialog{max-height:94dvh;padding:18px 23px}.online-profile-layout{grid-template-columns:170px 1fr}.online-preview-side canvas{height:235px}.online-dialog .online-heading{margin-bottom:8px}.online-mode-note{margin:8px 0;font-size:.77rem}.online-profile-dialog{width:min(740px,calc(100vw - 22px))}.online-lobby-list{max-height:170px}}
@media(prefers-reduced-motion:reduce){.online-dialog button{transition:none}}

/* Auswahl der Spielfigur. Sechs Karten, die auf dem Handy in zwei Spalten umbrechen. */
.online-character-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 6px;
  margin: 4px 0 10px;
}
.online-character {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 9px;
  text-align: left;
  line-height: 1.25;
  border: 1px solid #2f4d55;
  border-radius: 8px;
  background: #10262e;
  color: inherit;
  cursor: pointer;
}
.online-character strong { font-size: 14px; }
.online-character small { font-size: 11px; opacity: .72; }
.online-character:hover { border-color: #6fb4bd; }
.online-character.active {
  border-color: #7fd4c6;
  background: #17414a;
  box-shadow: inset 0 0 0 1px #7fd4c6;
}

/* Public rooms are the default; code entry is a separate, deliberate choice. */
.online-lobby-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 20px}.online-lobby-tabs button[aria-pressed=true]{background:#2b6261;color:#fffaf0;border-color:#2b6261}.online-guest-fields{padding:0 14px 8px;background:#e3e9db;border-radius:9px}.online-guest-fields label{padding-top:12px}.online-guest-fields p{margin:6px 0}.online-lobby-toolbar{margin-top:10px}.online-lobby-list{min-height:70px}.online-lobby-row button{min-height:44px}.online-create-options .online-checkbox{flex:1;min-width:0}.online-lobby-tabs button{line-height:1.35}.online-lobby-row strong{line-height:1.4}
@media(max-width:420px){.online-lobby-tabs{gap:6px}.online-lobby-tabs button{padding:10px 8px;font-size:.76rem}.online-join-form>div{flex-wrap:wrap}.online-join-form input{flex:1;min-width:140px}.online-create-options{gap:12px}.online-lobby-row button{max-width:110px}}
.online-members li:has(.online-member-remove){grid-template-columns:26px minmax(0,1fr) auto auto}.online-dialog .online-member-remove{color:#813f35;background:#f2e3d7;border-color:#ccaa94;font-size:.75rem;padding:8px 11px}.online-dialog .online-member-remove:hover{background:#ead0c2}
@media(max-width:560px){.online-members li:has(.online-member-remove){grid-template-columns:23px minmax(0,1fr) auto}.online-member-remove{grid-column:3;grid-row:1 / span 2}.online-members small{grid-column:2}}

/* Multiplayer: choose one action before showing its fields. */
.online-lobbies-dialog{width:min(720px,calc(100vw - 28px));padding:28px;border-radius:20px}
.online-lobbies-dialog .online-heading{margin-bottom:8px}
.online-lobbies-dialog .online-lobby-intro{margin:0 0 22px;color:#57736a;font-size:.88rem}
.online-action-icon{width:20px;height:20px;flex:none}
.online-lobbies-dialog .online-lobby-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:6px;border:1px solid #c5d2c3;border-radius:13px;background:#e4e9dc}
.online-lobbies-dialog .online-lobby-tabs button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:12px;border:1px solid transparent;background:transparent;color:#42645b;font-size:.91rem;border-radius:9px;transition:none}
.online-lobbies-dialog .online-lobby-tabs button[aria-pressed=true]{background:#244d50;color:#fff9e9;border-color:#244d50;box-shadow:0 2px 5px #163c4520}
.online-lobbies-dialog .online-lobby-tabs button:hover:not([aria-pressed=true]){background:#f9faef;border-color:#aebfb0}
.online-lobbies-dialog .online-lobby-toolbar{margin-top:24px;align-items:center}
.online-lobbies-dialog h3{font-size:1.04rem;letter-spacing:-.02em;margin:0 0 6px}
.online-lobbies-dialog .online-lobby-toolbar p{margin:0}
.online-lobbies-dialog #online-refresh{display:flex;align-items:center;gap:7px;min-height:42px;background:#fafbef;border-color:#b3c4b5;padding:9px 12px;flex:none}
.online-lobbies-dialog #online-refresh svg{width:16px;height:16px}
.online-lobbies-dialog .online-lobby-list{display:grid;gap:9px;margin:15px -3px 18px;padding:3px;max-height:292px;border:0}
.online-lobbies-dialog .online-lobby-row{padding:15px 16px;border:1px solid #c6d4c5;border-radius:11px;background:#fffdf4;gap:18px}
.online-lobbies-dialog .online-lobby-row strong{font-size:.96rem}
.online-lobbies-dialog .online-lobby-row span{font-size:.76rem;line-height:1.5;color:#5a7669}
.online-lobbies-dialog .online-lobby-row button{min-height:44px;padding:10px 16px;background:#dfeadd;color:#244f47;border-color:#a5bfae}
.online-lobbies-dialog .online-lobby-row button:hover{background:#cfdfcb;border-color:#678f78}
.online-lobbies-dialog .online-empty{margin:0;padding:29px 23px;text-align:center;border:1px dashed #aebfaf;border-radius:11px;background:#e9eee1;line-height:1.7;color:#4e6c5e}
.online-invitation{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:17px;border-top:1px solid #c9d5c5;font-size:.79rem;color:#637e70}
.online-lobbies-dialog #online-private-tab{display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid #acbfb0;min-height:42px;font-size:.8rem;padding:9px 12px}
.online-lobbies-dialog #online-private-tab:hover{background:#e1e9da;border-color:#6c967e}
.online-lobbies-dialog .online-create,.online-code-panel{margin:24px 0 0;padding:0;border:0}
.online-lobbies-dialog .online-create>p,.online-code-panel>p{margin:5px 0 20px}
.online-lobbies-dialog label{font-size:.82rem;font-weight:600;margin:16px 0 8px}
.online-lobbies-dialog input:not([type=checkbox]),.online-lobbies-dialog select{min-height:48px;padding:12px 14px;border-radius:9px;border-color:#a6bbab}
.online-lobbies-dialog .online-create-options{align-items:stretch;gap:16px;margin:18px 0}
.online-lobbies-dialog .online-create-options>div:first-child{width:138px;flex:none}
.online-lobbies-dialog .online-create-options>div:first-child>label{margin-top:0}
.online-lobbies-dialog .online-create-options>.online-visibility-choice{width:auto;flex:1;padding:12px 14px;background:#e5ecde;border:1px solid #c2d2be;border-radius:10px}
.online-lobbies-dialog .online-checkbox{margin:0;min-height:25px;gap:10px;font-weight:700}
.online-lobbies-dialog .online-checkbox input{width:20px;height:20px;flex:none}
.online-lobbies-dialog .online-visibility-choice p{margin:7px 0 0;color:#526f60}
.online-lobbies-dialog #online-create-form>.online-primary{width:100%;min-height:50px;background:#e8b581;border-color:#d5a06a;color:#233f3e;font-size:.95rem}
.online-lobbies-dialog #online-create-form>.online-primary:hover{background:#f1c79a;border-color:#bd8650}
.online-lobbies-dialog .online-back{display:flex;align-items:center;gap:8px;padding:8px 0;margin:0 0 16px;min-height:40px;border:0;background:transparent;color:#4e7162;font-size:.8rem}
.online-lobbies-dialog .online-back:hover{color:#183e39;background:transparent;text-decoration:underline;text-underline-offset:3px}
.online-lobbies-dialog .online-join-form{padding:17px;background:#e5ecde;border:1px solid #c3d3be;border-radius:11px}
.online-lobbies-dialog .online-join-form label{margin-top:0}
.online-lobbies-dialog .online-join-form>div{align-items:stretch}
.online-lobbies-dialog .online-join-form input{min-width:0;font-weight:650}
.online-lobbies-dialog .online-guest-fields{margin-top:20px;padding-top:16px;border-top:1px solid #c9d5c5}
.online-lobbies-dialog .online-guest-fields label{margin-top:0}
.online-lobbies-dialog .online-guest-fields p{margin-bottom:0}
.online-lobbies-dialog .online-feedback:empty{display:none}
.online-lobbies-dialog .online-feedback:not(:empty){margin:16px 0 0;padding:11px 13px;border-radius:8px;background:#efe2d4}
@media(max-width:560px){
 .online-lobbies-dialog{padding:21px 18px;width:calc(100vw - 24px);border-radius:16px}
 .online-lobbies-dialog .online-lobby-intro{font-size:.8rem;margin-bottom:18px}
 .online-lobbies-dialog .online-lobby-tabs{gap:4px;padding:4px}
 .online-lobbies-dialog .online-lobby-tabs button{font-size:.8rem;padding:10px 6px;gap:6px;min-height:50px}
 .online-lobbies-dialog .online-lobby-tabs svg{width:18px;height:18px}
 .online-lobbies-dialog .online-lobby-toolbar{gap:10px;margin-top:20px}
 .online-lobbies-dialog #online-refresh{padding:9px;font-size:.7rem;gap:5px}
 .online-lobbies-dialog .online-lobby-toolbar p{font-size:.7rem!important}
 .online-lobbies-dialog .online-lobby-row{padding:13px 11px;gap:10px}
 .online-lobbies-dialog .online-lobby-row button{font-size:.75rem;padding:9px 11px}
 .online-invitation{flex-direction:column;align-items:stretch;gap:9px;text-align:center}
 .online-lobbies-dialog .online-create-options{flex-direction:column;gap:14px}
 .online-lobbies-dialog .online-create-options>div:first-child{width:100%}
 .online-lobbies-dialog .online-create-options>div:first-child select{width:100%}
 .online-lobbies-dialog .online-join-form{padding:13px}
 .online-lobbies-dialog .online-join-form>div{flex-direction:column}
}
@media(max-height:520px) and (min-width:600px){
 .online-lobbies-dialog{padding:18px 24px}
 .online-lobbies-dialog .online-lobby-intro{margin-bottom:12px}
 .online-lobbies-dialog .online-lobby-tabs button{min-height:44px;padding:9px}
 .online-lobbies-dialog .online-lobby-list{max-height:170px}
}

.singleplayer-dialog{max-width:720px}.singleplayer-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:24px 0}.singleplayer-mode{border:1px solid #53635d;border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:12px}.singleplayer-mode h3{margin:0;font-size:1.35rem}.singleplayer-mode p{flex:1;line-height:1.5}.singleplayer-confirm{border:1px solid #c29d60;border-radius:12px;padding:18px}.singleplayer-confirm[hidden]{display:none}@media(max-width:540px){.singleplayer-modes{grid-template-columns:1fr}}