/* Approved concept boards 04 + 06. Presentation only; social, room and
   purchase controllers retain their existing elements and event handlers. */
html.island-ui :is(#friends-panel,#server-browser-panel,#server-create-panel,#store-panel,#journal-panel) {
  --cs-line:#268ca3;
  --cs-soft-line:#1c6073;
  --cs-text:#effbff;
  --cs-muted:#b5d8e3;
  --cs-deep:#002633;
  --cs-card:linear-gradient(115deg,#0b4b5e,#023240);
  --cs-gold:linear-gradient(180deg,#ffdd69,#ffce46);
  --cs-mint:linear-gradient(135deg,#70f0cd,#3bcdaa);
  color:var(--cs-text)!important;
  background:radial-gradient(ellipse at 45% 0,#07566b 0,transparent 72%),linear-gradient(120deg,#003b4b,#002733)!important;
  border:1px solid var(--cs-line)!important;
  border-radius:20px!important;
  box-shadow:inset 0 1px #81d9ee25,0 18px 56px #0007!important;
  text-shadow:none;
}
html.island-ui :is(#friends-panel,#server-browser-panel,#server-create-panel,#store-panel,#journal-panel) button {
  border:1px solid var(--cs-line);
  background:linear-gradient(125deg,#08475a,#002b3a);
  color:var(--cs-text);
  border-radius:8px;
  box-shadow:inset 0 1px #82dff021,0 2px 4px #00131c3b;
  text-shadow:none;
  clip-path:none;
  min-height:44px;
  letter-spacing:0;
}
html.island-ui :is(#friends-panel,#server-browser-panel,#server-create-panel,#store-panel,#journal-panel) button:focus-visible {
  outline:3px solid #a1ffe3;
  outline-offset:2px;
}
html.island-ui :is(#friends-panel,#server-browser-panel,#server-create-panel,#store-panel,#journal-panel) :is(input:not([type=checkbox]),select) {
  border:1px solid #39a9bf!important;
  background:linear-gradient(180deg,#002a38,#003b4a)!important;
  color:var(--cs-text)!important;
  box-shadow:inset 0 2px 6px #00172040;
  border-radius:7px;
  min-width:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-weight:500!important;
}
html.island-ui :is(#friends-panel,#server-browser-panel,#server-create-panel,#store-panel,#journal-panel) > :is(header,footer) {
  border-color:var(--cs-soft-line)!important;
}
html.island-ui :is(#friends-panel,#server-browser-panel,#server-create-panel,#store-panel,#journal-panel) > header b {
  color:var(--cs-text)!important;
  font-weight:850!important;
  letter-spacing:-.02em!important;
}
html.island-ui :is(#friends-panel,#server-browser-panel,#server-create-panel,#store-panel,#journal-panel) > header small {
  color:var(--cs-muted)!important;
  font-size:11px!important;
}
html.island-ui :is(#friends-panel,#server-browser-panel,#server-create-panel,#store-panel,#journal-panel) :is(.play,.primary),
html.island-ui #friends-panel :is(#friends-done,#friends-add-submit),
html.island-ui #server-browser-panel #server-create-open,
html.island-ui #journal-panel #journal-done {
  background:var(--cs-gold)!important;
  border-color:#ffe67f!important;
  color:#002b3a!important;
  font-weight:800!important;
  box-shadow:inset 0 1px #fff7,0 2px 5px #00172038!important;
  margin-top:0;
}
html.island-ui :is(#friends-close,#server-browser-close,#server-create-close,#store-close,#journal-close) {
  border-radius:50%!important;
  background:linear-gradient(145deg,#045368,#002633)!important;
}
html.island-ui :is(#friends-panel,#server-browser-panel,#server-create-panel,#store-panel,#journal-panel) :is(nav,.friends-list,.server-list,.server-detail,.server-create-body,#store-content,#journal-content) {
  scrollbar-color:#69b6c7 #003440;
  scrollbar-width:thin;
}

/* Friends: dense, individually sized rows leave the list as the scroll owner. */
html.island-ui #friends-panel {gap:9px;padding:14px 18px!important}
html.island-ui #friends-panel > header {min-height:44px;padding:0 0 6px!important}
html.island-ui #friends-panel .friends-account-card {
  background:linear-gradient(110deg,#003849,#06485a)!important;
  border:1px solid var(--cs-soft-line)!important;
  border-radius:9px;
  gap:9px;
  padding:5px 8px!important;
}
html.island-ui #friends-panel .friends-account-avatar,
html.island-ui #friends-panel .friend-avatar {
  background:linear-gradient(140deg,#195d73,#004050);
  border:1px solid #50a7bb;
  border-radius:7px;
  color:#d6f3fa;
}
html.island-ui #friends-panel .friends-tabs {gap:7px}
html.island-ui #friends-panel .friends-tabs button {background:linear-gradient(120deg,#04465a,#002b3a);border-color:var(--cs-line);color:#e2f3f7!important;font-size:12px!important}
html.island-ui #friends-panel .friends-tabs button.selected {
  background:var(--cs-mint)!important;
  border-color:#95ffe1!important;
  color:#002d36!important;
  box-shadow:inset 0 1px #fff7,0 0 10px #4bd8ba24!important;
}
html.island-ui #friends-panel .friends-tabs em {background:#123e4b;color:#cde8f0;border-radius:12px;padding:2px 5px;font-weight:800}
html.island-ui #friends-panel [data-friends-tab=requests] em:not(:empty) {background:#fc5852;color:#fff}
html.island-ui #friends-panel .friends-tabs button.selected em {background:#003848;color:#fff}
html.island-ui #friends-panel .friends-list {gap:7px;padding:2px 6px 4px 1px!important;min-height:70px!important}
html.island-ui #friends-panel .friend-card {
  min-height:70px;
  grid-template-columns:44px minmax(0,1fr) auto;
  gap:10px;
  padding:7px 10px!important;
  background:var(--cs-card)!important;
  border:1px solid var(--cs-line)!important;
  border-radius:9px;
}
html.island-ui #friends-panel .friend-card b {color:var(--cs-text);font-size:15px!important}
html.island-ui #friends-panel .friend-card small {color:var(--cs-muted);font-size:11px!important}
html.island-ui #friends-panel .friend-card em {display:flex;align-items:center;gap:6px;font-size:11px!important;font-style:normal;color:#66e9c0;background:transparent;border:0;padding:0;line-height:1.3}
html.island-ui #friends-panel .friend-card em::before {content:'';width:8px;height:8px;flex:none;border-radius:50%;background:#5eedbe;box-shadow:0 0 6px #4be4b842}
html.island-ui #friends-panel .friend-card em[data-presence=in_game] {color:#ffde55}
html.island-ui #friends-panel .friend-card em[data-presence=in_game]::before {background:#ffdc50;box-shadow:0 0 6px #ffdc5033}
html.island-ui #friends-panel .friend-card em[data-presence=offline] {color:#b4cad3}
html.island-ui #friends-panel .friend-card em[data-presence=offline]::before {background:#819fac;box-shadow:none}
html.island-ui #friends-panel .friend-card em[data-presence=away]::before {background:#ebc66e;box-shadow:none}
html.island-ui #friends-panel .friend-card-actions {gap:6px;align-items:center!important;max-width:360px;flex-wrap:nowrap}
html.island-ui #friends-panel .friend-card-actions button {font-size:12px!important;padding:7px 10px!important;max-width:146px}
html.island-ui #friends-panel .friend-card-actions .primary {min-width:94px}
html.island-ui #friends-panel .friend-card-actions :is([data-friend-action=remove],[data-friend-action=block],[data-friend-action=decline]),
html.island-ui #friends-panel .friends-delete-account {
  border-color:#b65250!important;
  color:#ff827c!important;
  background:linear-gradient(120deg,#163f4b,#082e3a)!important;
}
html.island-ui #friends-panel .friends-add-box,
html.island-ui #friends-panel .friends-profile-tools[open] > div {
  background:linear-gradient(125deg,#074e62,#002d3c)!important;
  border:1px solid #3ea6bd!important;
  border-radius:12px;
  box-shadow:0 8px 24px #00121a66;
}
html.island-ui #friends-panel .friends-profile-tools > summary {border-color:var(--cs-line);background:#033a4b}
html.island-ui #friends-panel .friends-empty {width:min(370px,100%);max-width:100%;height:auto;min-height:0;flex:none;margin:auto;padding:14px!important;border:1px solid var(--cs-soft-line);border-radius:9px;background:linear-gradient(125deg,#084b5e,#002d3b);box-shadow:none}
html.island-ui #friends-panel .friends-empty > span {display:block;width:auto;height:auto;margin:0 0 6px;padding:0;border:0;background:none;color:#76d9cf;font-size:25px;line-height:1}
html.island-ui #friends-panel .friends-empty b {display:block;color:var(--cs-text);font-size:14px!important;line-height:1.35}
html.island-ui #friends-panel .friends-empty small {display:block;color:var(--cs-muted);font-size:11px!important;line-height:1.4;margin-top:5px}
html.island-ui #friends-panel > header {gap:8px}
html.island-ui #friends-panel > header > div:first-child {flex:1;min-width:0}
html.island-ui #friends-panel > header .friends-profile-tools {position:static;flex:none}
html.island-ui #friends-panel > header .friends-profile-tools > summary {min-width:72px;padding:0 10px;font:600 11px/1.2 -apple-system,sans-serif;justify-content:center}
html.island-ui #friends-panel > header .friends-profile-tools[open] > div {position:fixed;z-index:9;top:68px;right:max(calc(28px + var(--safe-r)),calc((100vw - 960px)/2));display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:480px;max-width:calc(100vw - 56px);max-height:calc(100dvh - 92px);overflow-y:auto;padding:12px;touch-action:pan-y;overscroll-behavior:contain;align-content:start}
html.island-ui #friends-panel > header .friends-profile-tools[open] > div > button {width:100%!important;min-width:0;max-width:none;height:auto!important;min-height:44px;font-size:12px!important;padding:8px 10px!important;line-height:1.3!important;text-align:center;overflow-wrap:normal}
html.island-ui #friends-panel .friends-profile-tools .friends-account-card {position:static;width:100%;flex-basis:100%;grid-column:1/-1;grid-template-columns:36px minmax(0,1fr) auto;gap:8px;padding:8px!important}
html.island-ui #friends-panel .friends-profile-tools .friends-account-card > div:nth-child(2) {display:flex;flex-direction:column;align-items:start;gap:4px;min-width:0}
html.island-ui #friends-panel .friends-profile-tools .friends-account-card #friends-player-name {font-size:14px!important;line-height:1.3!important;letter-spacing:0!important}
html.island-ui #friends-panel .friends-profile-tools .friends-account-card #friends-copy-id {width:max-content!important;min-width:44px!important;max-width:100%;height:auto;min-height:44px;flex:none;white-space:nowrap;font-size:11px!important;padding:8px 10px!important}
html.island-ui #friends-panel .friends-profile-tools :is(.friends-account-editor,.friends-profile-switcher) {flex-basis:100%;grid-column:1/-1;width:100%;font-size:12px;background:#033848;border:1px solid var(--cs-line);border-radius:8px;padding:10px}
html.island-ui #friends-panel .friends-profile-tools :is(.friends-account-editor,.friends-profile-switcher) button {width:auto!important;height:auto!important;min-width:0;min-height:44px;font-size:12px!important}
html.island-ui #friends-panel .friends-profile-tools .friends-account-editor > label {font:600 11px/1.3 -apple-system,sans-serif;color:var(--cs-text)}
html.island-ui #friends-panel .friends-profile-tools .friends-account-editor > div {display:grid!important;grid-template-columns:20px minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center;margin:8px 0}
html.island-ui #friends-panel .friends-profile-tools .friends-account-editor > div > span {grid-column:1;grid-row:1;font:600 16px/1 -apple-system,sans-serif}
html.island-ui #friends-panel .friends-profile-tools #friends-username-input {grid-column:2/4;grid-row:1;width:100%;min-height:44px;font-size:16px!important}
html.island-ui #friends-panel .friends-profile-tools #friends-username-save {grid-column:2;grid-row:2}
html.island-ui #friends-panel .friends-profile-tools #friends-username-cancel {grid-column:3;grid-row:2}
html.island-ui #friends-panel .friends-profile-tools .friends-account-editor > small {font:11px/1.4 -apple-system,sans-serif!important;color:var(--cs-muted)!important}
html.island-ui #friends-panel .friends-profile-tools #friends-profile-list {display:grid;gap:8px;width:100%;min-height:0;max-height:160px;overflow-y:auto;touch-action:pan-y}
html.island-ui #friends-panel .friends-profile-switcher>footer {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:8px}
html.island-ui #friends-panel .friends-profile-switcher>footer>input {min-width:0;width:100%;font-size:16px}
html.island-ui #friends-panel .friends-profile-name-suggestions {grid-column:1/-1;padding:8px;border:1px solid #f0c94d;border-radius:8px;background:#143d42}
html.island-ui #friends-panel .friends-profile-name-suggestions[hidden] {display:none!important}
html.island-ui #friends-panel .friends-profile-name-suggestions>small {display:block;margin-bottom:7px;color:#ffe783;font:700 10px/1.3 -apple-system,sans-serif}
html.island-ui #friends-panel .friends-profile-name-suggestions>div {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:visible;padding:0}
html.island-ui #friends-panel .friends-profile-name-suggestions button {width:100%!important;min-height:44px!important;padding:7px!important;border-color:#86ead0!important;background:#07556a!important;color:#fff!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:480px){html.island-ui #friends-panel .friends-profile-switcher>footer {grid-template-columns:1fr}html.island-ui #friends-panel .friends-profile-name-suggestions {grid-column:1}html.island-ui #friends-panel .friends-profile-name-suggestions>div {grid-template-columns:1fr}}
/* Profile editors remain reachable when the visual viewport shrinks for a keyboard. */
html.island-ui #friends-panel.keyboard-open:has(.friends-profile-tools[open]) > header {display:flex!important;min-height:44px}
html.island-ui #friends-panel.keyboard-open > header .friends-profile-tools[open] > div {top:calc(var(--friends-visible-top,0px) + 64px);max-height:calc(var(--friends-visible-height,100dvh) - 76px);padding:8px}
html.island-ui #friends-panel :is(#friends-account-state,#friends-status,.friends-search) {color:var(--cs-muted)!important}
html.island-ui #friends-panel .friends-search,html.island-ui #friends-panel #friends-search {min-height:44px!important;height:44px}
html.island-ui #friends-panel > footer {padding-top:5px!important}
html.island-ui #friends-panel .concept-add-friend {width:auto!important;min-width:128px;height:44px;min-height:44px;padding:7px 12px!important;font-size:13px!important;background:var(--cs-gold)!important;border-color:#ffe785!important;color:#002b3a!important;font-weight:800!important;border-radius:8px!important;flex:none}
html.island-ui #friends-panel .concept-friend-tools {position:relative;flex:none}
html.island-ui #friends-panel .concept-friend-more {display:grid;place-items:center;list-style:none;width:44px;min-width:44px;height:44px;border:1px solid var(--cs-line);border-radius:7px;background:linear-gradient(135deg,#085268,#002b3b);color:var(--cs-text);font:800 22px/1 -apple-system,sans-serif;cursor:pointer;touch-action:manipulation}
html.island-ui #friends-panel .concept-friend-more::-webkit-details-marker {display:none}
html.island-ui #friends-panel .concept-friend-more:focus-visible {outline:3px solid #a1ffe3;outline-offset:2px}
html.island-ui #friends-panel .concept-friend-tools[open] .concept-friend-more {border-color:#7bf6d5;background:#065151}
html.island-ui #friends-panel .concept-friend-actions {position:fixed;z-index:8;top:clamp(95px,30dvh,160px);right:max(calc(28px + var(--safe-r)),calc((100vw - 960px)/2));display:flex;flex-direction:column;gap:8px;width:220px;max-width:calc(100vw - 64px);max-height:calc(100dvh - clamp(95px,30dvh,160px) - 24px);overflow-y:auto;padding:12px;border:1px solid #45b7c9;border-radius:11px;background:linear-gradient(125deg,#095269,#002d3b);box-shadow:0 10px 28px #00141caa;touch-action:pan-y}
html.island-ui #friends-panel .concept-friend-actions button {width:100%;min-width:0;max-width:none;text-align:left;flex:none}

/* Rooms: original rendered island scenes, intact full names and visible rules. */
html.island-ui #server-browser-panel {padding:12px;width:min(1100px,calc(100vw - var(--safe-l) - var(--safe-r) - 24px));height:min(740px,calc(100dvh - var(--safe-t) - var(--safe-b) - 20px));gap:8px}
html.island-ui #server-browser-panel > header {padding:0 0 6px;border-width:1px;min-height:44px}
html.island-ui #server-browser-panel .server-tabs {border:0;background:transparent;gap:7px}
html.island-ui #server-browser-panel .server-tabs > * {padding:8px 10px;border:1px solid var(--cs-soft-line);border-radius:7px;font:600 12px/1.3 -apple-system,sans-serif;color:var(--cs-muted);background:#00303e;letter-spacing:0}
html.island-ui #server-browser-panel .server-tabs b {background:var(--cs-mint);border-color:#87fadd;color:#002d36}
html.island-ui #server-browser-panel .server-tabs b::after {display:none}
html.island-ui #server-browser-panel .server-browser-body {flex:1;min-height:0;background:transparent;gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
html.island-ui #server-browser-panel .server-list-pane {border:0;padding:0;overflow:hidden}
html.island-ui #server-browser-panel .server-list-title {margin:0 0 8px;gap:8px}
html.island-ui #server-browser-panel .server-list-title button {min-height:44px;font-size:11px!important;padding:7px 10px!important;line-height:1.25;text-shadow:none;letter-spacing:0}
html.island-ui #server-browser-panel .server-list-title > b {color:var(--cs-muted);font-size:11px}
html.island-ui #server-browser-panel .server-list {padding:2px 5px 6px 2px;gap:10px;grid-auto-rows:max-content;align-content:start}
html.island-ui #server-browser-panel .server-row {
  grid-template-columns:82px minmax(0,1fr);
  grid-template-rows:auto auto;
  min-height:116px;
  height:auto;
  padding:7px;
  gap:8px 12px;
  border:1px solid var(--cs-line);
  background:var(--cs-card);
  border-radius:10px;
  box-shadow:inset 0 1px #b3ecff12;
}
html.island-ui #server-browser-panel .server-row.selected {border-color:#75f8d3;background:linear-gradient(115deg,#0c5864,#003c49);box-shadow:inset 0 0 0 2px #75f8d3,0 0 0 1px #75f8d326}
html.island-ui #server-browser-panel .server-icon {
  grid-column:1;grid-row:1/3;align-self:stretch;
  width:100%;height:100%;min-height:84px;
  background:#065062 url('./assets/ui/mode-scenes/survival.png') center/cover;
  border:1px solid #278da1;border-radius:5px;
  font-size:0;box-shadow:none;
}
html.island-ui #server-browser-panel .server-row:nth-child(2n) .server-icon {background-image:url('./assets/ui/mode-scenes/creative.png')}
html.island-ui #server-browser-panel .server-row > div:nth-child(2) {gap:6px}
html.island-ui #server-browser-panel .server-row :is(b,small) {position:static;height:auto;max-height:none;white-space:normal;overflow-wrap:anywhere;line-height:1.35;text-overflow:clip;overflow:visible}
html.island-ui #server-browser-panel .server-row b {font-size:15px}
html.island-ui #server-browser-panel .server-row small {font-size:11px;color:var(--cs-muted)}
html.island-ui #server-browser-panel .server-row > div:last-child {grid-column:2;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:6px;padding-top:6px;border-top:1px solid var(--cs-soft-line)}
html.island-ui #server-browser-panel .server-row > div:last-child :is(span,em) {font-size:11px;white-space:normal;color:#c6f1f4}
html.island-ui #server-browser-panel .server-detail {padding:10px;background:var(--cs-card);border:1px solid var(--cs-line);border-radius:10px;gap:0}
html.island-ui #server-browser-panel .server-detail-art {display:block;width:100%;height:clamp(82px,18vh,170px);margin:9px 0 0;min-height:82px;border:1px solid #52b3c2;border-radius:7px;background:#044853 url('./assets/ui/mode-scenes/survival.png') center/cover;font-size:0;box-shadow:none}
html.island-ui #server-browser-panel .server-detail h2 {font-size:19px;margin:10px 0 8px;line-height:1.3;overflow-wrap:anywhere}
html.island-ui #server-browser-panel .server-detail p {font-size:12px;line-height:1.5;color:var(--cs-muted)}
html.island-ui #server-browser-panel .room-rule-summary {display:grid;grid-template-columns:1fr;gap:0;background:#002937;border:1px solid var(--cs-soft-line);border-radius:7px;overflow:hidden;padding:0;margin:0}
html.island-ui #server-browser-panel .server-rule {display:block;min-height:30px;padding:7px 9px;color:#dff7fa;background:transparent;border:0;font:600 12px/1.35 -apple-system,sans-serif;letter-spacing:0}
html.island-ui #server-browser-panel .server-rule + .server-rule {border-top:1px solid var(--cs-soft-line)}
html.island-ui #server-browser-panel .server-online-tag {background:#063d4f;color:#6ff1cb;border:1px solid #247887;border-radius:5px;font-size:10px;margin:8px 0 0;line-height:1.4}
html.island-ui #server-browser-panel .server-facts {gap:6px;margin:10px 0}
html.island-ui #server-browser-panel .server-facts span {background:#02303f;border-color:var(--cs-soft-line);border-radius:5px;font-size:11px;padding:6px}
html.island-ui #server-browser-panel .server-detail > b {font-size:11px;color:var(--cs-muted);margin-top:6px}
html.island-ui #server-browser-panel .server-player-names span {background:#053b4b;border-color:#2c8291;border-radius:5px;font-size:10px;color:#d4eaf0;padding:5px 7px}
html.island-ui #server-browser-panel .server-browser-footer {padding:6px 0 0;border-top:1px solid var(--cs-soft-line);gap:10px}
html.island-ui #server-browser-panel .server-browser-footer > div {gap:8px}
html.island-ui #server-browser-panel #server-browser-status {font-size:11px;line-height:1.4;max-width:52%;overflow-wrap:anywhere;color:var(--cs-muted)}
html.island-ui #server-browser-panel #server-join {min-width:150px;padding:8px 18px;font-size:16px}

/* Room setup pairs the room identity with its rule controls on wider screens. */
html.island-ui #server-create-panel {width:min(970px,calc(100vw - var(--safe-l) - var(--safe-r) - 24px));height:min(720px,calc(100dvh - var(--safe-t) - var(--safe-b) - 20px));padding:14px;gap:10px}
html.island-ui #server-create-panel > header {padding:0 0 8px;border-bottom:1px solid var(--cs-soft-line);min-height:44px}
html.island-ui #server-create-panel .server-create-body {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:repeat(4,auto) auto;align-content:start;align-items:start;padding:1px 5px 4px 1px;gap:10px 14px}
html.island-ui #server-create-panel .server-create-body > label:first-child {grid-column:1;grid-row:1;padding:12px;background:var(--cs-card);border:1px solid var(--cs-line);border-radius:9px}
html.island-ui #server-create-panel .server-create-grid {grid-column:1;grid-row:2/5;grid-template-columns:1fr;gap:12px;padding:12px;background:var(--cs-card);border:1px solid var(--cs-line);border-radius:9px}
html.island-ui #server-create-panel .server-create-body label > span,
html.island-ui #server-create-panel .server-code-box > b {display:block;font-size:12px;color:var(--cs-text);letter-spacing:0;margin-bottom:6px;line-height:1.3}
html.island-ui #server-create-panel .server-create-body :is(input[type=text],select) {width:100%;font-size:14px!important;padding:8px 10px;min-height:44px}
html.island-ui #server-create-panel .server-switch {grid-column:2;display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:12px;min-height:66px;padding:10px 12px;background:var(--cs-card);border:1px solid var(--cs-line);border-radius:9px}
html.island-ui #server-create-panel .server-switch > span {min-width:0;flex:1;margin:0!important}
html.island-ui #server-create-panel .server-switch b {display:block;font-size:13px;line-height:1.3;color:var(--cs-text);letter-spacing:0;overflow-wrap:anywhere}
html.island-ui #server-create-panel .server-switch small {display:block;font-size:11px;line-height:1.4;color:var(--cs-muted);margin-top:4px}
html.island-ui #server-create-panel .server-switch input {
  appearance:none;-webkit-appearance:none;position:relative;flex:none;
  width:46px;height:28px;margin:0;border:1px solid #59aabd;border-radius:20px;
  background:#013444;box-shadow:inset 0 2px 5px #00162255;cursor:pointer;
}
html.island-ui #server-create-panel .server-switch input::after {content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;background:#d6edf2;border-radius:50%;box-shadow:0 1px 3px #001b3355;transition:transform .15s ease}
html.island-ui #server-create-panel .server-switch input:checked {background:linear-gradient(130deg,#3ccfa2,#1bac79);border-color:#8bffcf}
html.island-ui #server-create-panel .server-switch input:checked::after {transform:translateX(18px);background:#f3fffb}
html.island-ui #server-create-panel .server-switch input:focus-visible {outline:3px solid #a1ffe3;outline-offset:3px}
html.island-ui #server-create-panel .server-switch input:disabled {opacity:.58;cursor:default}
html.island-ui #server-create-panel .server-code-box {grid-column:1/-1;display:grid;grid-template-columns:minmax(140px,.65fr) minmax(0,1.35fr);align-items:center;gap:12px;padding:12px;border:1px solid var(--cs-line);border-radius:9px;background:var(--cs-card)}
html.island-ui #server-create-panel .server-code-box > b {margin:0}
html.island-ui #server-create-panel .server-code-box > div {min-width:0;display:flex;gap:8px}
html.island-ui #server-create-panel .server-code-box input {flex:1;min-width:0;width:0}
html.island-ui #server-create-panel .server-code-box button {flex:none;min-width:100px;padding:8px 12px;font-size:12px}
html.island-ui #server-create-panel #server-create-message {grid-column:1/-1;font-size:11px;color:var(--cs-muted);line-height:1.4;margin:0;padding:0;display:block}
html.island-ui #server-create-panel > footer {display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:8px 0 0;border-top:1px solid var(--cs-soft-line)}
html.island-ui #server-create-panel > footer button {font-size:14px;padding:8px 20px;min-width:112px;height:44px}

/* Store: calm equal-height cards, local prices and owned states stay explicit. */
html.island-ui #store-panel {width:min(1100px,calc(100vw - var(--safe-l) - var(--safe-r) - 24px));height:min(800px,calc(100dvh - var(--safe-t) - var(--safe-b) - 20px));padding:14px;gap:8px}
html.island-ui #store-panel > header {min-height:44px;padding:0 0 6px;border-width:1px}
html.island-ui #store-panel .store-wallet,
html.island-ui #journal-panel .journal-wallet {display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid var(--cs-line);border-radius:8px;background:linear-gradient(125deg,#044457,#002534);color:#ffd956;box-shadow:inset 0 1px #71cde721}
html.island-ui #store-panel .store-wallet b,
html.island-ui #journal-panel .journal-wallet b {font-size:16px!important;color:var(--cs-text)!important;letter-spacing:0!important}
html.island-ui #store-panel:has(> header > .concept-account-chip) > header .store-wallet,
html.island-ui #journal-panel:has(> header > .concept-account-chip) > header .journal-wallet {display:none!important}
html.island-ui #store-panel .island-store-tabs {padding:0;gap:7px;border:0}
html.island-ui #store-panel .island-store-tabs button {padding:8px 12px;min-height:44px;font-size:13px;background:linear-gradient(115deg,#014156,#002b38);gap:9px}
html.island-ui #store-panel .island-store-tabs button > span {font-size:21px;line-height:1}
html.island-ui #store-panel .island-store-tabs button.selected,
html.island-ui #journal-panel .journal-nav button.selected {background:var(--cs-gold)!important;border-color:#ffe783!important;color:#002e3b!important;box-shadow:inset 0 1px #fff6,0 2px 4px #00172044!important}
html.island-ui #store-panel #store-content {padding:3px 5px 7px 1px!important;min-height:0;overflow-y:auto;overflow-x:hidden}
/* r412 — the approved Store tabs enter once when selected. A staggered opacity
   reveal keeps touch geometry and the coin/reward/purchase layout perfectly still. */
html.island-ui #store-panel #store-content > .island-store-entering {animation:island-store-panel-enter .28s cubic-bezier(.2,.72,.25,1) both}
html.island-ui #store-panel #store-content > .gold-small-grid.island-store-entering {animation-delay:.06s}
html.island-ui #store-panel #store-content :is(.gold-stage,.gold-small-grid).island-store-entering .gold-pack,
html.island-ui #store-panel #store-content .rewards-store.island-store-entering > :is(.rewards-intro,.reward-feedback,.reward-heroes,.reward-streak,.reward-missions,.reward-collection),
html.island-ui #store-panel #store-content .noads-store.island-store-entering > :is(.noads-hero,.noads-benefits,.noads-note),
html.island-ui #store-panel #store-content .noads-store.island-store-entering .noads-benefits > article {animation:island-store-card-enter .4s cubic-bezier(.16,.78,.24,1) both!important}
html.island-ui #store-panel #store-content .gold-stage.island-store-entering .gold-pack:nth-child(2){animation-delay:.03s!important}
html.island-ui #store-panel #store-content .gold-stage.island-store-entering .gold-pack:nth-child(1){animation-delay:.08s!important}
html.island-ui #store-panel #store-content .gold-stage.island-store-entering .gold-pack:nth-child(3){animation-delay:.13s!important}
html.island-ui #store-panel #store-content .gold-small-grid.island-store-entering .gold-pack:nth-child(1){animation-delay:.16s!important}
html.island-ui #store-panel #store-content .gold-small-grid.island-store-entering .gold-pack:nth-child(2){animation-delay:.21s!important}
html.island-ui #store-panel #store-content .gold-small-grid.island-store-entering .gold-pack:nth-child(3){animation-delay:.26s!important}
html.island-ui #store-panel #store-content .rewards-store.island-store-entering > .rewards-intro{animation-delay:.02s!important}
html.island-ui #store-panel #store-content .rewards-store.island-store-entering > .reward-feedback{animation-delay:.05s!important}
html.island-ui #store-panel #store-content .rewards-store.island-store-entering > .reward-heroes{animation-delay:.08s!important}
html.island-ui #store-panel #store-content .rewards-store.island-store-entering > .reward-streak{animation-delay:.13s!important}
html.island-ui #store-panel #store-content .rewards-store.island-store-entering > .reward-missions{animation-delay:.18s!important}
html.island-ui #store-panel #store-content .rewards-store.island-store-entering > .reward-collection{animation-delay:.23s!important}
html.island-ui #store-panel #store-content .noads-store.island-store-entering > .noads-hero{animation-delay:.03s!important}
html.island-ui #store-panel #store-content .noads-store.island-store-entering > .noads-benefits{animation-delay:.1s!important}
html.island-ui #store-panel #store-content .noads-store.island-store-entering .noads-benefits > article:nth-child(1){animation-delay:.14s!important}
html.island-ui #store-panel #store-content .noads-store.island-store-entering .noads-benefits > article:nth-child(2){animation-delay:.19s!important}
html.island-ui #store-panel #store-content .noads-store.island-store-entering .noads-benefits > article:nth-child(3){animation-delay:.24s!important}
html.island-ui #store-panel #store-content .noads-store.island-store-entering > .noads-note{animation-delay:.28s!important}
@keyframes island-store-panel-enter{from{opacity:0}to{opacity:1}}
@keyframes island-store-card-enter{from{opacity:0}to{opacity:1}}
html.island-ui #store-panel #store-content .store-featured-grid {gap:12px;align-items:stretch}
html.island-ui #store-panel #store-content :is(.coin-offer,.coin-mini-offer,.store-product) {background:var(--cs-card)!important;border:1px solid var(--cs-line)!important;border-radius:10px;box-shadow:inset 0 1px #92e7fa17!important;clip-path:none;filter:none;top:auto;animation:none}
html.island-ui #store-panel #store-content .coin-offer {padding:12px;min-height:245px;gap:7px;overflow:hidden}
html.island-ui #store-panel #store-content .coin-offer::after {display:none}
html.island-ui #store-panel #store-content .coin-offer-badge {min-height:18px;width:auto;padding:0;margin:0;font-size:11px;line-height:1.35;color:var(--cs-muted);border:0;clip-path:none;background:none;text-shadow:none;box-shadow:none}
html.island-ui #store-panel #store-content .coin-offer.popular {border-color:#63e9c9!important}
html.island-ui #store-panel #store-content .coin-offer.popular .coin-offer-badge {color:#86f8d7}
html.island-ui #store-panel #store-content .coin-pile {width:130px;height:82px;min-height:82px;transform:scale(.9);transform-origin:center;animation:none;margin:0 auto}
html.island-ui #store-panel #store-content .coin-offer-amount {font-size:27px;color:var(--cs-text)!important;text-shadow:none;line-height:1.2}
html.island-ui #store-panel #store-content .coin-offer-amount small {font-size:11px;line-height:1.3;color:var(--cs-text)!important}
html.island-ui #store-panel #store-content .coin-offer-detail {font-size:12px;line-height:1.4;color:var(--cs-muted)!important;min-height:0;margin:0}
html.island-ui #store-panel :is(.coin-offer,.coin-mini-offer,.store-product) button {
  background:var(--cs-gold)!important;color:#002b3a!important;border:1px solid #ffe785!important;border-radius:8px;clip-path:none;text-shadow:none;box-shadow:inset 0 1px #fff6,0 2px 4px #00172044!important;
}
html.island-ui #store-panel :is(.coin-offer,.coin-mini-offer) button {min-height:48px;padding:6px 9px;display:flex;flex-direction:column;justify-content:center;gap:4px}
html.island-ui #store-panel :is(.coin-offer,.coin-mini-offer) button b {font:800 17px/1.1 -apple-system,sans-serif}
html.island-ui #store-panel :is(.coin-offer,.coin-mini-offer) button small {font:600 11px/1.2 -apple-system,sans-serif;color:#154252!important}
html.island-ui #store-panel :is(.coin-offer,.coin-mini-offer) button.store-preview-price:disabled {opacity:1;filter:none}
html.island-ui #store-panel #store-content .store-secondary-grid {gap:12px;margin-top:12px}
html.island-ui #store-panel #store-content .coin-mini-offer {gap:8px;padding:10px;min-height:140px;justify-content:center}
html.island-ui #store-panel .coin-mini-offer b {font-size:15px;color:var(--cs-text)}
html.island-ui #store-panel .coin-mini-offer small {font-size:10px;line-height:1.4;color:var(--cs-muted)}
html.island-ui #store-panel .coin-mini-offer button {width:100%;margin-top:auto}
html.island-ui #store-panel .store-footer {padding:6px 0 0;border-top:1px solid var(--cs-soft-line);gap:12px}
html.island-ui #store-panel #store-status {font-size:11px;line-height:1.4;color:var(--cs-muted);overflow-wrap:anywhere}
html.island-ui #store-panel #store-restore {font-size:12px;max-width:50%;padding:7px 12px}
html.island-ui #store-panel .store-test-note {padding:4px 8px;border:1px solid #3d7d88;border-radius:5px;background:#133f4b;color:#bedde5;font-size:10px;line-height:1.3}
html.island-ui #store-panel :is(.store-weekly,.store-daily-deals,.store-pet-bundles,.store-missions,.store-decorations,.store-upgrade-section,.store-economy-actions) {padding:12px;border:1px solid var(--cs-line)!important;background:var(--cs-card)!important;border-radius:10px;box-shadow:none!important;margin:0 0 12px;color:var(--cs-text)!important}
html.island-ui #store-panel :is(.store-weekly,.store-daily-deals,.store-pet-bundles,.store-missions,.store-decorations) > header {display:flex;flex-wrap:wrap;gap:8px;background:none;border:0;padding:0 0 10px}
html.island-ui #store-panel :is(.store-weekly,.store-daily-deals,.store-pet-bundles,.store-missions,.store-decorations) header b {font-size:16px;color:var(--cs-text);line-height:1.3}
html.island-ui #store-panel :is(.store-weekly,.store-daily-deals,.store-pet-bundles,.store-missions,.store-decorations) header :is(small,span) {font-size:11px;line-height:1.4;color:var(--cs-muted)}
html.island-ui #store-panel :is(.store-deal-grid,.store-pet-bundle-grid,.store-weekly-grid,.store-decoration-grid,.store-mission-grid) {padding:0;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
html.island-ui #store-panel :is(.store-deal-card,.store-pet-bundle,.store-weekly-card,.store-decoration-card,.store-mission-card,.store-style-shop,.store-daily-gift) {padding:10px;border:1px solid var(--cs-line);border-radius:8px;background:linear-gradient(125deg,#085064,#002b3a);color:var(--cs-text);box-shadow:none;min-width:0}
html.island-ui #store-panel :is(.store-bundle-copy,.store-deal-card,.store-weekly-card,.store-decoration-card,.store-mission-card,.store-style-shop,.store-daily-gift) b {font-size:14px;line-height:1.3;color:var(--cs-text)}
html.island-ui #store-panel :is(.store-bundle-copy,.store-deal-card,.store-weekly-card,.store-decoration-card,.store-mission-card,.store-style-shop,.store-daily-gift) :is(small,em),
html.island-ui #store-panel :is(.store-bundle-copy,.store-weekly-card,.store-decoration-card) div > span {font-size:11px;line-height:1.4;color:var(--cs-muted)}
html.island-ui #store-panel :is(.store-pet-bundle,.store-decoration-card,.store-mission-card) > button:not(:disabled) {background:var(--cs-gold);color:#002b3a;border-color:#ffe785}
html.island-ui #store-panel :is(.store-pet-bundle,.store-decoration-card,.store-mission-card) > button :is(b,small) {font-size:12px;color:inherit!important}
html.island-ui #store-panel .store-season-promo {padding:12px;margin:0 0 12px;border:1px solid var(--cs-line);border-radius:10px;box-shadow:none;background:var(--cs-card)}
html.island-ui #store-panel .store-season-promo b {font-size:17px;color:var(--cs-text)}
html.island-ui #store-panel .store-season-promo :is(small,em,strong) {font-size:11px;line-height:1.4}
html.island-ui #store-panel .store-upgrade-section {grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:16px}
html.island-ui #store-panel .store-upgrade-section > div {display:flex;min-width:0;flex-direction:column;gap:8px}
html.island-ui #store-panel .store-upgrade-section > div b {font-size:21px;line-height:1.2;color:var(--cs-text)}
html.island-ui #store-panel .store-upgrade-section > div :is(small,span) {font-size:12px;line-height:1.5;color:var(--cs-muted)}
html.island-ui #store-panel .store-product {padding:14px;gap:12px;min-width:0}
html.island-ui #store-panel .store-product b {font-size:16px;line-height:1.3;color:var(--cs-text)}
html.island-ui #store-panel .store-product small {font-size:11px;line-height:1.4;color:var(--cs-muted)}
html.island-ui #store-panel .store-product button {font-size:13px;min-height:48px;padding:8px 12px}
html.island-ui #store-panel .store-upgrade-section.active {border-color:#64e7c2!important}
html.island-ui #store-panel .store-upgrade-section.active .store-product button {background:#064e4c!important;color:#91ffde!important;border-color:#60cdb3!important;opacity:1}
html.island-ui #store-panel .store-purchase-busy {background:linear-gradient(140deg,#075265f7,#002b38fa);border:1px solid #4bb4c7;border-radius:14px;color:var(--cs-text);padding:24px;box-shadow:0 0 0 100vmax #00141ca6}
html.island-ui #store-panel .store-purchase-busy b {font-size:19px;line-height:1.3;color:var(--cs-text)}
html.island-ui #store-panel .store-purchase-busy small {font-size:13px;line-height:1.5;color:var(--cs-muted)}

/* Journal: distinct reward actions beside readable mint progress tracks. */
html.island-ui #journal-panel {padding:14px 18px!important;gap:9px}
html.island-ui #journal-panel > header {min-height:44px}
html.island-ui #journal-panel .journal-nav {padding:1px 0;gap:7px}
html.island-ui #journal-panel .journal-nav button {background:linear-gradient(125deg,#04465a,#002b38);border-color:var(--cs-line);padding:8px 12px;color:#e2f4f8}
html.island-ui #journal-panel #journal-content {padding:2px 5px 6px 1px!important}
html.island-ui #journal-panel .journal-card {background:var(--cs-card)!important;border:1px solid var(--cs-line)!important;border-radius:10px;padding:12px!important;margin-bottom:12px}
html.island-ui #journal-panel .journal-card > header b {color:var(--cs-text)!important;font-size:18px!important}
html.island-ui #journal-panel .journal-card > header :is(small,span) {color:var(--cs-muted)!important;font-size:11px!important}
html.island-ui #journal-panel .journal-achievements {padding:0!important;border:0!important;background:transparent!important}
html.island-ui #journal-panel .journal-achievements > header {justify-content:flex-end;padding:0 2px 6px!important;min-height:0}
html.island-ui #journal-panel .journal-achievements > header > div {display:none}
html.island-ui #journal-panel :is(.achievement-grid,.journal-mission-grid,.weekly-mission-grid,.event-mission-grid) {gap:9px}
html.island-ui #journal-panel :is(.achievement-grid,.journal-mission-grid,.weekly-mission-grid,.event-mission-grid) article {grid-template-columns:56px minmax(0,1fr) 130px!important;gap:12px;padding:10px!important;border:1px solid var(--cs-line);border-radius:9px;background:linear-gradient(115deg,#0a4a5c,#00303e)!important;min-height:90px!important}
html.island-ui #journal-panel article > i {display:grid;width:56px;height:56px;align-self:center;place-items:center;border:1px solid #398ba1;border-radius:6px;background:linear-gradient(135deg,#256779,#124354);font-size:30px!important;color:#ffe17d!important;font-style:normal}
html.island-ui #journal-panel article b {font-size:15px!important;line-height:1.3!important;color:var(--cs-text)}
html.island-ui #journal-panel article small {font-size:12px!important;line-height:1.4!important;color:var(--cs-muted)!important}
html.island-ui #journal-panel article strong {font-size:11px!important;line-height:1.4;color:#dff4f7}
html.island-ui #journal-panel article > button {width:100%;min-width:0;max-width:160px;min-height:48px;grid-column:auto!important;align-self:center;font-size:13px!important;border:1px solid #5793a3;color:#e4f2f6;background:linear-gradient(125deg,#315f70,#1c4857);opacity:1}
html.island-ui #journal-panel article.ready > button {background:var(--cs-gold)!important;color:#002b3a!important;border-color:#ffe780!important;box-shadow:inset 0 1px #fff6,0 2px 5px #001a2744!important}
html.island-ui #journal-panel article.claimed {opacity:1;border-color:#2c917e}
html.island-ui #journal-panel article.claimed > button {background:#04463f;color:#84f1ca;border-color:#2eaa8e}
html.island-ui #journal-panel article > div > span,
html.island-ui #journal-panel .collection-progress > span,
html.island-ui #journal-panel .journal-weekly > div > span {height:10px;background:#002631;border:1px solid #003340;border-radius:7px;overflow:hidden}
html.island-ui #journal-panel article > div > span > em,
html.island-ui #journal-panel .collection-progress em,
html.island-ui #journal-panel .journal-weekly > div > span > em {height:100%;background:linear-gradient(90deg,#53dcb3,#66efce);border-radius:7px;max-width:100%;box-shadow:inset 0 1px #cefff24d}
html.island-ui #journal-panel :is(.journal-streak > div,.pet-care-step,.starter-journey-rail article,.journal-tutorial-step,.season-reward-rail button,.collection-milestones button) {border:1px solid var(--cs-line);border-radius:8px;background:linear-gradient(125deg,#074b5e,#002c3a);color:var(--cs-text);box-shadow:none}
html.island-ui #journal-panel :is(.journal-streak > .ready,.starter-journey-rail .current,.season-reward-rail button.ready,.collection-milestones button.ready) {border-color:#77f3d0;background:linear-gradient(125deg,#105858,#003e43);box-shadow:inset 0 0 0 1px #77f3d066}
html.island-ui #journal-panel :is(.journal-streak b,.journal-weekly > div > b) {color:var(--cs-text)}
html.island-ui #journal-panel :is(.journal-login,.journal-pet-care,.journal-weekly) > button:not(:disabled) {background:var(--cs-gold);color:#002b3a;border-color:#ffe785;box-shadow:inset 0 1px #fff6,0 2px 4px #00172044}
html.island-ui #journal-panel .journal-season-copy {padding:0 0 12px;color:var(--cs-text);gap:8px}
html.island-ui #journal-panel .journal-season-copy b {font-size:14px;line-height:1.3}
html.island-ui #journal-panel .journal-season-copy span {font-size:12px;line-height:1.4;color:var(--cs-muted)}
html.island-ui #journal-panel .starter-journey-rail article > i {width:44px;height:44px;align-self:start}
html.island-ui #journal-panel .starter-journey-rail article > button {max-width:none}
html.island-ui #journal-panel .journal-tutorial-step {grid-template-columns:56px minmax(0,1fr) auto}
html.island-ui #journal-panel #journal-status {color:var(--cs-muted);font-size:11px!important}

@media(min-width:900px) and (min-height:600px) {
  html.island-ui #journal-panel {display:grid;grid-template-columns:170px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:14px}
  html.island-ui #journal-panel > header,html.island-ui #journal-panel > footer {grid-column:1/-1}
  html.island-ui #journal-panel .journal-nav {display:flex;flex-direction:column;gap:7px;overflow-x:hidden;overflow-y:auto;padding-right:8px;border-right:1px solid var(--cs-soft-line)}
  html.island-ui #journal-panel .journal-nav button {flex:none;text-align:left;min-height:52px;padding:12px;font-size:14px!important}
  html.island-ui #journal-panel #journal-content {min-width:0;min-height:0}
}
@media(max-height:520px) and (orientation:landscape) {
  html.island-ui :is(#friends-panel,#server-browser-panel,#server-create-panel,#store-panel,#journal-panel) {border-radius:15px!important}
  html.island-ui #friends-panel {padding:8px 12px!important;gap:6px}
  html.island-ui #friends-panel > header {padding:0!important;border:0;min-height:44px}
  html.island-ui #friends-panel .friends-search {top:8px;right:64px;width:39%}
  html.island-ui #friends-panel:has(.concept-add-friend) .friends-search {right:286px;width:clamp(160px,25%,240px)}
  html.island-ui #friends-panel .friends-account-card {padding:2px 8px!important}
  html.island-ui #friends-panel .friends-account-card > div:nth-child(2) {display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 10px}
  html.island-ui #friends-panel .friends-list {min-height:55px!important;gap:6px}
  html.island-ui #friends-panel .friend-card {min-height:62px;padding:5px 8px!important;gap:9px}
  html.island-ui #friends-panel .friend-card > div:not(.friend-card-actions) {gap:2px}
  html.island-ui #friends-panel .friend-card em {font-size:10px!important}
  html.island-ui #friends-panel #friends-done {display:none}
  html.island-ui #friends-panel > footer {min-height:21px;max-height:40px;padding:3px 0 0!important}
  html.island-ui #friends-panel #friends-status:not(.error) {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;font-size:11px!important}
  html.island-ui #server-browser-panel {padding:8px 10px;gap:6px}
  html.island-ui #server-browser-panel > header {padding:0;border:0}
  html.island-ui #server-browser-panel .server-tabs > * {padding:5px 8px;font-size:10px}
  html.island-ui #server-browser-panel .server-browser-body {gap:10px}
  html.island-ui #server-browser-panel .server-list-title > b {display:none}
  html.island-ui #server-browser-panel .server-list-title {margin-bottom:6px}
  html.island-ui #server-browser-panel .server-list-title button {font-size:11px!important}
  html.island-ui #server-browser-panel .server-row {grid-template-columns:66px minmax(0,1fr);min-height:108px;gap:6px 9px}
  html.island-ui #server-browser-panel .server-icon {min-height:84px}
  html.island-ui #server-browser-panel .server-row b {font-size:13px}
  html.island-ui #server-browser-panel .server-row > div:last-child :is(span,em) {font-size:10px}
  html.island-ui #server-browser-panel .server-detail {padding:8px}
  html.island-ui #server-browser-panel .server-detail h2 {font-size:17px}
  html.island-ui #server-browser-panel .server-browser-footer {padding:4px 0 0}
  html.island-ui #server-create-panel {padding:8px 10px;gap:6px}
  html.island-ui #server-create-panel > header {padding:0;border:0}
  html.island-ui #server-create-panel .server-create-body {gap:8px 10px}
  html.island-ui #server-create-panel .server-create-body > label:first-child,
  html.island-ui #server-create-panel .server-create-grid {padding:9px}
  html.island-ui #server-create-panel .server-switch {min-height:60px;padding:8px 10px}
  html.island-ui #server-create-panel .server-switch b {font-size:12px}
  html.island-ui #server-create-panel .server-switch small {font-size:11px}
  html.island-ui #server-create-panel > footer {padding:4px 0 0}
  html.island-ui #store-panel {padding:8px 10px;gap:6px}
  html.island-ui #store-panel > header {padding:0;border:0}
  html.island-ui #store-panel .island-store-tabs button {font-size:12px;padding:6px 9px}
  html.island-ui #store-panel #store-content .store-featured-grid {gap:9px}
  html.island-ui #store-panel #store-content .coin-offer {min-height:191px;padding:9px;gap:4px}
  html.island-ui #store-panel #store-content .coin-pile {height:48px;min-height:48px;transform:scale(.67);transform-origin:50% 75%;margin:0 auto}
  html.island-ui #store-panel #store-content .coin-offer-amount {font-size:22px}
  html.island-ui #store-panel #store-content .coin-offer-detail {font-size:11px}
  html.island-ui #store-panel #store-content .coin-offer-badge {font-size:10px;min-height:14px}
  html.island-ui #store-panel :is(.coin-offer,.coin-mini-offer) button {min-height:46px}
  html.island-ui #store-panel :is(.coin-offer,.coin-mini-offer) button b {font-size:16px}
  html.island-ui #store-panel .store-footer {padding:3px 0 0}
  html.island-ui #journal-panel {padding:8px 12px!important;gap:6px}
  html.island-ui #journal-panel .journal-nav button {padding:6px 10px;font-size:12px!important}
  html.island-ui #journal-panel .journal-card {padding:10px!important;margin-bottom:10px}
  html.island-ui #journal-panel .journal-achievements {padding:0!important}
  html.island-ui #journal-panel :is(.achievement-grid,.journal-mission-grid,.weekly-mission-grid,.event-mission-grid) article {grid-template-columns:48px minmax(0,1fr) 118px!important;padding:8px!important;gap:10px;min-height:84px!important}
  html.island-ui #journal-panel article > i {width:48px;height:48px;font-size:27px!important}
}
@media(max-width:650px) and (orientation:landscape) {
  html.island-ui #friends-panel .friend-card:has(.concept-friend-tools) {grid-template-columns:36px minmax(0,1fr) auto;min-height:62px}
  html.island-ui #friends-panel .friend-card:has(.concept-friend-tools) .friend-card-actions {grid-column:auto;flex-wrap:nowrap;width:auto;max-width:200px}
  html.island-ui #friends-panel .friend-card:has(.concept-friend-tools) .friend-card-actions > button {max-width:140px}
}
@media(max-width:760px) and (orientation:landscape) {
  html.island-ui #friends-panel:has(.concept-add-friend) .friends-search {position:static;width:auto;min-height:44px;height:44px}
  html.island-ui #friends-panel:has(.concept-add-friend) .friends-search input {min-height:44px!important;height:44px}
}
@media(max-width:600px) {
  html.island-ui #friends-panel .friends-profile-tools .friends-account-card {grid-template-columns:minmax(0,1fr) auto}
  html.island-ui #friends-panel .friends-profile-tools .friends-account-card > div:nth-child(2) {grid-column:1}
  html.island-ui #friends-panel .friends-profile-tools .friends-account-card #friends-copy-id {grid-column:2}
}
@media(max-width:650px) {
  html.island-ui #friends-panel .friends-tabs button {font-size:11px!important}
  html.island-ui #friends-panel .friend-card {grid-template-columns:36px minmax(0,1fr);gap:7px}
  html.island-ui #friends-panel .friend-card-actions {grid-column:1/-1;max-width:none;width:100%;justify-content:stretch;flex-wrap:wrap}
  html.island-ui #friends-panel .friend-card-actions button {flex:1;min-width:0;max-width:none;font-size:11px!important;padding:7px 8px!important}
  html.island-ui #friends-panel .friend-card-actions .primary {min-width:80px}
  html.island-ui #server-browser-panel .server-row {grid-template-columns:45px minmax(0,1fr);gap:6px}
  html.island-ui #server-browser-panel .server-icon {min-height:72px}
  html.island-ui #server-browser-panel .server-row > div:last-child {flex-wrap:wrap}
  html.island-ui #server-browser-panel .server-row :is(small,em) {font-size:10px!important}
  html.island-ui #server-browser-panel .server-list-title > div {gap:5px}
  html.island-ui #server-browser-panel .server-list-title button {font-size:10px!important;padding:6px!important}
  html.island-ui #server-browser-panel #server-join {min-width:116px;font-size:13px;padding:8px 12px}
  html.island-ui #store-panel .island-store-tabs button {font-size:11px;padding:7px;gap:5px}
  html.island-ui #store-panel .island-store-tabs button > span {font-size:17px}
  html.island-ui #store-panel #store-content .coin-offer-amount {font-size:21px}
  html.island-ui #store-panel #store-content .coin-offer-detail {font-size:11px}
  html.island-ui #store-panel #store-restore {font-size:11px;padding:7px 9px}
  html.island-ui #store-panel .store-upgrade-section {grid-template-columns:1fr;gap:12px}
  html.island-ui #journal-panel .journal-nav button {font-size:11px!important;padding:7px 10px}
}
@media(max-width:600px) and (orientation:portrait) {
  html.island-ui #server-browser-panel .server-browser-body {grid-template-columns:1fr;grid-template-rows:minmax(170px,1fr) minmax(150px,1fr)}
  html.island-ui #server-create-panel .server-create-body {display:flex;flex-direction:column;align-items:stretch}
  html.island-ui #server-create-panel .server-code-box {grid-template-columns:1fr}
  html.island-ui #store-panel #store-content :is(.store-featured-grid,.store-secondary-grid) {grid-template-columns:1fr}
  html.island-ui #store-panel #store-content .coin-offer {min-height:240px}
  html.island-ui #journal-panel :is(.achievement-grid,.journal-mission-grid,.weekly-mission-grid,.event-mission-grid) article {grid-template-columns:40px minmax(0,1fr)!important;gap:9px}
  html.island-ui #journal-panel article > i {width:40px;height:40px;font-size:25px!important}
  html.island-ui #journal-panel article > button {grid-column:2!important;max-width:none}
  html.island-ui #journal-panel .journal-tutorial-step {grid-template-columns:40px minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
 html.island-ui #store-panel #store-content > .island-store-entering,
 html.island-ui #store-panel #store-content .island-store-entering.island-store-entering :is(.gold-pack,.rewards-intro,.reward-feedback,.reward-heroes,.reward-streak,.reward-missions,.reward-collection,.noads-hero,.noads-benefits,.noads-benefits>article,.noads-note){animation:none!important}
}

/* Revision 376: rooms prioritise text and rules, with no decorative thumbnails. */
html.island-ui #server-browser-panel :is(.server-icon,.server-detail-art){display:none!important}
html.island-ui #server-browser-panel .server-row{grid-template-columns:minmax(0,1fr)!important;gap:7px;min-height:104px;padding:12px}
html.island-ui #server-browser-panel .server-row>div:nth-child(2){grid-column:1;grid-row:1}
html.island-ui #server-browser-panel .server-row>div:last-child{grid-column:1!important;grid-row:2}

/* Distinct feature banners and a softly lit coin display. No prices or offers change. */
html.island-ui #store-panel #store-content .coin-offer:is(.popular,.value){--offer-accent:#ffda60;border:2px solid var(--offer-accent)!important;background:radial-gradient(ellipse at 50% 35%,#a07d3438,transparent 68%),var(--cs-card)!important;box-shadow:inset 0 0 0 2px #ffffff0a,0 2px 10px #00182066!important;padding:10px}
html.island-ui #store-panel #store-content .coin-offer.value{--offer-accent:#9de7ff;background:radial-gradient(ellipse at 50% 35%,#5098d738,transparent 68%),var(--cs-card)!important}
html.island-ui #store-panel #store-content .coin-offer:is(.popular,.value) .coin-offer-badge{display:flex;align-items:center;justify-content:center;gap:6px;align-self:stretch;min-height:30px;padding:5px 7px;border-radius:5px;background:var(--offer-accent);color:#052938;font-size:12px;font-weight:850;letter-spacing:.3px;box-shadow:0 2px 4px #00172044}
html.island-ui #store-panel #store-content .coin-offer.popular .coin-offer-badge:before{content:'★';font-size:16px}
html.island-ui #store-panel #store-content .coin-offer.value .coin-offer-badge:before{content:'◆';font-size:16px}
html.island-ui #store-panel #store-content .coin-offer:is(.popular,.value) .coin-offer-amount{color:var(--offer-accent)!important}
@media(max-height:450px){html.island-ui #store-panel #store-content .coin-offer:is(.popular,.value) .coin-offer-badge{font-size:10px;min-height:27px;padding:4px}}