.wrap { width:min(1040px,90vw); padding:12px 0 20px; gap:16px; }
.hub-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.hub-header h1 { margin:0; }
.wrap .hub-header .logo { width:clamp(160px,25vw,250px); }
.account { display:flex; align-items:center; gap:10px; }
.icon-button,.avatar-button { display:grid;place-items:center; border:1px solid var(--line);background:var(--ivory);color:var(--ink);cursor:pointer;border-radius:50%; width:44px;height:44px;padding:8px; flex-shrink:0; }
.icon-button svg {width:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;}
.avatar-button {width:52px;height:52px;padding:0;overflow:hidden;}
.avatar-button svg {width:100%;height:100%;}
.cards {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.card img {aspect-ratio:2.8;}
.card-body {padding:10px 16px;}
.card-title {font-size:22px;letter-spacing:0;}
.play {height:36px;padding:0 22px;font-size:16px;}
.wrap .nb-board-stage {margin-top:8px;}
.wrap .nb-board-blue {left:-42px;top:30%;width:78px;height:78px;transform:rotate(-18deg);}
.wrap .nb-board-five {right:-42px;top:45%;width:78px;height:78px;transform:rotate(18deg);}
.board {padding:14px 16px;}
.board-title {margin-bottom:6px;font-size:20px;}
.hub-table th,.hub-table td {padding:8px!important;}
.hub-dialog {width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:2px solid var(--line);border-radius:24px;background:var(--ivory);color:var(--ink);padding:20px;font-family:var(--font);box-shadow:0 20px 80px #4a247044;}
.hub-dialog::backdrop {background:#38234d66;backdrop-filter:blur(3px);}
.dialog-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.dialog-heading h2 {font-size:22px;margin:0;}
.dialog-action {display:block;width:100%;padding:12px;margin-top:10px;border:1px solid var(--line);border-radius:16px;background:white;color:var(--ink);font:700 16px var(--font);cursor:pointer;}
.dialog-action.primary {background:var(--ink);color:white;}
.dialog-action[hidden] {display:none;}
.region-pop {width:100%;padding:12px;margin-top:10px;}
#avatarPreview {width:210px;height:210px;margin:auto;}
#avatarPreview svg {width:100%;height:100%;}
#avatarSteps {display:flex;justify-content:center;gap:8px;font-size:13px;}
#avatarSteps span {padding:4px 8px;border-radius:20px;background:#eee4f6;}
#avatarSteps .active {background:var(--pink);color:white;}
#avatarSteps .done {background:var(--ink);color:white;}
.avatar-actions {display:flex;gap:8px;}
#avatarMessage {margin:8px 0 0;font-size:13px;}
button:focus-visible {outline:3px solid var(--pink);outline-offset:3px;}
@media(max-width:600px) {
.wrap {width:92vw;gap:12px;}
.wrap .hub-header .logo {width:150px;}
.account {gap:5px;} .account b {max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;}
.avatar-button {width:40px;height:40px;}
.cards {gap:10px;} .card {border-radius:20px;} .card img {aspect-ratio:1.65;}
.card-body {padding:9px;gap:6px;flex-wrap:wrap;} .card-title {font-size:18px;}
.play {height:30px;padding:0 16px;font-size:14px;}
.board {padding:10px;} .wrap .nb-board-blue,.wrap .nb-board-five {display:none;}
}
@media(max-height:650px) and (min-width:601px) { .wrap .hub-header .logo {width:180px;} .card img {aspect-ratio:3.5;} }
body { overflow-x:clip; }
@media(max-width:600px) { .card-body {display:grid;grid-template-columns:1fr;justify-items:start;gap:6px;} }