.gomoku-body { background: radial-gradient(circle at 50% -10%, #eeebff 0, var(--background) 42%); }
.gomoku-shell { padding: max(16px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); }
.gomoku-nav { position: relative; z-index: 3; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; }
.gomoku-nav > .icon-button, .gomoku-nav-actions .icon-button { width: 42px; height: 42px; }
.gomoku-nav > .icon-button svg, .gomoku-nav-actions svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gomoku-title { display: flex; min-width: 0; flex-direction: column; }
.gomoku-title span { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: 1.5px; }
.gomoku-title strong { margin-top: 2px; font-size: 17px; letter-spacing: -.4px; }
.gomoku-nav-actions { display: flex; gap: 6px; }
.gomoku-sound-button { color: var(--violet); font-size: 18px; font-weight: 800; }
.gomoku-sound-button[aria-pressed="false"] { color: var(--muted); opacity: .65; }
.gomoku-connection { display: flex; align-items: center; justify-content: center; gap: 7px; width: fit-content; margin: 12px auto 0; padding: 6px 10px; border-radius: 999px; color: #827e8d; background: rgba(255,255,255,.6); font-size: 9px; font-weight: 700; }
.gomoku-connection i, .gomoku-online-badge i { width: 7px; height: 7px; border-radius: 50%; background: #f0a046; box-shadow: 0 0 0 3px rgba(240,160,70,.13); }
.gomoku-connection.is-online i, .gomoku-online-badge i { background: #35bd82; box-shadow: 0 0 0 3px rgba(53,189,130,.13); }
.gomoku-connection.is-offline i { background: #df6281; box-shadow: 0 0 0 3px rgba(223,98,129,.13); }
.gomoku-lobby, .gomoku-room { position: relative; z-index: 1; padding-top: 18px; animation: screen-enter 280ms ease both; }
.gomoku-hero { position: relative; min-height: 230px; padding: 30px 25px; overflow: hidden; border-radius: var(--radius-large); color: #fff; background: radial-gradient(circle at 92% 4%, rgba(74,225,208,.42), transparent 38%), linear-gradient(145deg,#292343,#18151f); box-shadow: var(--shadow-large); }
.gomoku-hero .eyebrow { color: #8fe8db; }
.gomoku-hero h1 { position: relative; z-index: 1; max-width: 270px; margin: 58px 0 8px; font-size: 32px; line-height: 1.08; letter-spacing: -1.2px; }
.gomoku-hero p { position: relative; z-index: 1; max-width: 310px; margin: 0; color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.6; }
.gomoku-hero-grid { position: absolute; top: 22px; right: 15px; width: 118px; height: 118px; border-radius: 19px; opacity: .85; background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,.14) 22px 23px), repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.14) 22px 23px); transform: rotate(8deg); }
.gomoku-hero-grid i { position: absolute; width: 17px; height: 17px; border-radius: 50%; box-shadow: 0 8px 15px rgba(0,0,0,.3); }
.gomoku-hero-grid i:nth-child(1) { top: 14px; left: 37px; background: #15131a; }
.gomoku-hero-grid i:nth-child(2) { top: 37px; left: 60px; background: #fff; }
.gomoku-hero-grid i:nth-child(3) { top: 60px; left: 60px; background: #15131a; }
.gomoku-hero-grid i:nth-child(4) { top: 60px; left: 83px; background: #fff; }
.gomoku-hero-grid i:nth-child(5) { top: 83px; left: 83px; background: #15131a; }
.gomoku-identity-card { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding: 15px 16px; border-radius: 20px; background: rgba(255,255,255,.76); border: 1px solid rgba(255,255,255,.9); box-shadow: var(--shadow-soft); }
.gomoku-identity-card div { display: flex; flex-direction: column; }
.gomoku-identity-card span { color: var(--muted); font-size: 9px; }
.gomoku-identity-card strong { margin-top: 3px; font-size: 15px; }
.gomoku-online-badge { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; color: #28795b !important; background: #e8f8f1; font-weight: 750; }
.gomoku-lobby-actions { margin-top: 13px; padding: 18px; border-radius: 24px; background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.9); box-shadow: var(--shadow-soft); }
.gomoku-create-button { width: 100%; min-height: 54px; }
.gomoku-lobby-heading { display: flex; align-items: center; justify-content: space-between; margin: 18px 2px 10px; }
.gomoku-lobby-heading div { display: flex; flex-direction: column; }
.gomoku-lobby-heading strong { font-size: 13px; }
.gomoku-lobby-heading span { margin-top: 2px; color: var(--muted); font-size: 8px; }
.gomoku-lobby-heading button { padding: 7px 10px; border-radius: 10px; color: var(--violet); background: #eeebff; font-size: 9px; font-weight: 750; }
.gomoku-room-list { display: grid; gap: 8px; max-height: 310px; overflow-y: auto; }
.gomoku-room-empty { padding: 24px 12px; text-align: center; border-radius: 16px; color: var(--muted); background: #f3f2f7; font-size: 10px; line-height: 1.6; }
.gomoku-lobby-room { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 13px 12px 13px 14px; border-radius: 16px; background: #f7f6fa; border: 1px solid var(--hairline); }
.gomoku-lobby-room div { min-width: 0; }
.gomoku-lobby-room strong, .gomoku-lobby-room span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gomoku-lobby-room strong { font-size: 12px; }
.gomoku-lobby-room span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.gomoku-lobby-room button { min-width: 58px; padding: 9px 12px; border-radius: 12px; color: #fff; background: #211d2d; font-size: 10px; font-weight: 750; }
.gomoku-lobby-room button:disabled { color: var(--muted); background: #e9e7ed; }
.gomoku-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 13px; }
.gomoku-rules div { padding: 13px 7px; text-align: center; border-radius: 17px; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.85); }
.gomoku-rules strong, .gomoku-rules span { display: block; }
.gomoku-rules strong { font-size: 10px; }
.gomoku-rules span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.gomoku-room { padding-top: 12px; }
.gomoku-room-name-card { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border-radius: 19px; color: #fff; background: linear-gradient(135deg,#6554eb,#8572f7); box-shadow: 0 14px 30px rgba(87,70,217,.2); }
.gomoku-room-name-card div { display: flex; min-width: 0; flex-direction: column; }
.gomoku-room-name-card span { color: rgba(255,255,255,.6); font-size: 8px; letter-spacing: 1px; }
.gomoku-room-name-card strong { max-width: 220px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.gomoku-room-name-card small { flex: 0 0 auto; margin-left: 10px; padding: 7px 10px; border-radius: 10px; color: #4d3fd0; background: #fff; font-size: 9px; font-weight: 750; }
.gomoku-players { display: grid; grid-template-columns: 1fr 30px 1fr; align-items: center; gap: 5px; margin: 10px 0; }
.gomoku-player { position: relative; display: grid; grid-template-columns: 30px 1fr 7px; align-items: center; gap: 7px; min-width: 0; padding: 10px; border-radius: 16px; background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.88); }
.gomoku-player > div { min-width: 0; }
.gomoku-player small, .gomoku-player strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gomoku-player small { color: var(--muted); font-size: 7px; }
.gomoku-player strong { margin-top: 2px; font-size: 10px; }
.gomoku-player > i { width: 7px; height: 7px; border-radius: 50%; background: #aaa6b2; }
.gomoku-player.is-connected > i { background: #35bd82; }
.gomoku-player.is-self { border-color: rgba(109,93,252,.25); background: rgba(239,236,255,.86); }
.gomoku-stone { width: 28px; height: 28px; border-radius: 50%; }
.gomoku-stone-black { background: radial-gradient(circle at 34% 28%, #56515d, #17151c 64%); box-shadow: 0 6px 10px rgba(25,22,30,.3); }
.gomoku-stone-white { background: radial-gradient(circle at 34% 28%, #fff, #d9d6df 75%); border: 1px solid rgba(30,26,42,.1); box-shadow: 0 6px 10px rgba(25,22,30,.15); }
.gomoku-versus { color: var(--muted); text-align: center; font-size: 8px; font-weight: 850; }
.gomoku-status-card { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 47px; padding: 8px 12px; text-align: left; border-radius: 16px; background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); }
.gomoku-status-card > div { min-width: 0; }
.gomoku-status-card strong, .gomoku-status-card small { display: block; }
.gomoku-status-card strong { font-size: 12px; }
.gomoku-status-card small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.gomoku-turn-stone { display: none; width: 25px; height: 25px; flex: 0 0 auto; border-radius: 50%; }
.gomoku-turn-stone.is-visible { display: block; }
.gomoku-turn-stone.is-black { background: radial-gradient(circle at 34% 28%, #56515d, #17151c 64%); }
.gomoku-turn-stone.is-white { background: radial-gradient(circle at 34% 28%, #fff, #d9d6df 75%); border: 1px solid rgba(30,26,42,.12); }
.gomoku-board-shell { width: min(100%, 470px); aspect-ratio: 1; margin: 10px auto 0; padding: 10px; border-radius: 22px; background: linear-gradient(145deg,#e7bd76,#c98945); box-shadow: 0 18px 45px rgba(108,66,26,.23), inset 0 1px 0 rgba(255,255,255,.4); touch-action: manipulation; }
.gomoku-board { display: grid; grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(15, 1fr); width: 100%; height: 100%; padding: 0; background: linear-gradient(rgba(89,54,21,.48),rgba(89,54,21,.48)) center/1px calc(100% - 6.66%) no-repeat, linear-gradient(90deg,rgba(89,54,21,.48),rgba(89,54,21,.48)) center/calc(100% - 6.66%) 1px no-repeat; }
.gomoku-cell { position: relative; min-width: 0; min-height: 0; padding: 0; border-radius: 0; background: linear-gradient(rgba(89,54,21,.42),rgba(89,54,21,.42)) center/100% 1px no-repeat, linear-gradient(90deg,rgba(89,54,21,.42),rgba(89,54,21,.42)) center/1px 100% no-repeat; touch-action: manipulation; }
.gomoku-cell.is-star { background: radial-gradient(circle, rgba(76,44,17,.72) 0 2px, transparent 2.5px), linear-gradient(rgba(89,54,21,.42),rgba(89,54,21,.42)) center/100% 1px no-repeat, linear-gradient(90deg,rgba(89,54,21,.42),rgba(89,54,21,.42)) center/1px 100% no-repeat; }
.gomoku-cell span { position: absolute; z-index: 2; inset: 8%; border-radius: 50%; opacity: 0; transform: scale(.5); transition: opacity 120ms ease, transform 180ms cubic-bezier(.2,.9,.2,1.2); }
.gomoku-cell.is-black span, .gomoku-cell.is-white span { opacity: 1; transform: none; }
.gomoku-cell.is-black span { background: radial-gradient(circle at 34% 28%, #5e5964, #161419 64%); box-shadow: 0 2px 4px rgba(28,19,12,.38); }
.gomoku-cell.is-white span { background: radial-gradient(circle at 34% 28%, #fff, #dedbe2 76%); border: 1px solid rgba(38,30,23,.1); box-shadow: 0 2px 4px rgba(28,19,12,.25); }
.gomoku-cell.is-winning span { box-shadow: 0 0 0 3px #ff6f9f, 0 0 14px rgba(255,65,133,.8); animation: gomoku-win-pulse 700ms ease-in-out infinite alternate; }
.gomoku-cell.is-last span::after { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: #ff6f9f; }
.gomoku-cell:disabled { cursor: default; }
@keyframes gomoku-win-pulse { to { transform: scale(1.08); } }
.gomoku-room-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.gomoku-room-actions button:only-child { grid-column: 1 / -1; }
.gomoku-room-actions .primary-button, .gomoku-room-actions .secondary-button { min-height: 48px; padding: 0 12px; border-radius: 16px; font-size: 12px; }
.gomoku-danger-button { color: #b4385c; }
.gomoku-room-form p { margin: 8px 0 16px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.gomoku-room-form label { display: flex; justify-content: space-between; margin: 12px 2px 6px; color: var(--ink); font-size: 10px; font-weight: 750; }
.gomoku-room-form label span { color: var(--muted); font-weight: 500; }
.gomoku-room-form input { width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--hairline); border-radius: 15px; color: var(--ink); background: #f3f2f7; font-size: 14px; }
.gomoku-room-form > .primary-button { width: 100%; min-height: 50px; margin-top: 14px; }
.gomoku-undo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
.gomoku-undo-actions button { min-height: 48px; border-radius: 15px; }
.gomoku-modal-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.gomoku-modal-heading h2 { margin-top: 5px; }
.gomoku-modal-heading button { width: 38px; height: 38px; border-radius: 50%; color: var(--muted); background: #f1f0f5; font-size: 24px; }
.gomoku-leaderboard-card { max-height: min(720px, 88dvh); overflow-y: auto; }
.gomoku-my-record { display: flex; justify-content: space-between; margin: 8px 0 14px; padding: 13px 15px; border-radius: 16px; color: #fff; background: linear-gradient(135deg,var(--violet),#8b74f7); }
.gomoku-my-record span { color: rgba(255,255,255,.65); font-size: 10px; }
.gomoku-my-record strong { font-size: 13px; }
.gomoku-ranking-list { max-height: 58dvh; overflow-y: auto; }

@media (max-height: 720px) {
  .gomoku-shell { padding-top: max(8px, env(safe-area-inset-top)); }
  .gomoku-connection { margin-top: 7px; }
  .gomoku-room { padding-top: 7px; }
  .gomoku-room-name-card { padding-top: 9px; padding-bottom: 9px; }
  .gomoku-players { margin: 7px 0; }
  .gomoku-board-shell { width: min(100%, calc(100dvh - 270px)); margin-top: 7px; padding: 8px; border-radius: 18px; }
  .gomoku-room-actions { margin-top: 7px; }
}

@media (min-width: 560px) {
  .gomoku-body { padding: 24px 0; }
  .gomoku-shell { min-height: calc(100dvh - 48px); border-radius: 36px; background: rgba(244,243,248,.8); box-shadow: 0 30px 90px rgba(40,32,70,.16); }
}

/* ICP 备案号角标：仅展示不可点击，避免干扰游戏触控 */
.icp-badge{position:fixed;z-index:99;bottom:calc(2px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;font-size:8px;line-height:1.2;color:rgba(148,148,158,.5);pointer-events:none}