:root{--paper:#f2eadb;--ink:#674c68;--muted:#977f91;--pink:#cc6f9a;--pink-deep:#b85f8b;--card:#fff8fbe8;--card-border:#dbaac59e;--board-pink:#d999bc;--board-blue:#b9d9ee;--board-surface:#f7dfe5;--board-line:#684a61ad}*{box-sizing:border-box}html{background:var(--paper)}body{min-width:320px;color:var(--ink);margin:0;font-family:Microsoft YaHei,PingFang SC,Noto Sans SC,sans-serif;overflow-x:hidden}button{font:inherit;color:inherit}.dream-page{background:linear-gradient(#fff4f58c,#f8eede66),url(/assets/pastel-molly-dolls-bg.png) center/cover fixed no-repeat,var(--paper);min-height:100svh;padding:28px 20px;position:relative;overflow:hidden}.landing-page{place-items:center;display:grid}.landing-content{text-align:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fff6f847;border:1px solid #ffffff73;border-radius:28px;width:min(720px,100%);padding:50px 28px;box-shadow:0 25px 70px #af64911a}.landing-content h1,.flow-header h1{color:#694c6d;letter-spacing:.04em;text-shadow:0 2px #ffffffb3;margin:0;font-family:Georgia,Songti SC,serif;font-size:clamp(40px,5vw,62px);line-height:1.12;animation:.5s both header-in}.landing-content h1 span,.flow-header h1 span{color:#d488ac;vertical-align:.15em;margin:0 .18em;font-size:.58em;font-weight:400}.landing-content>p:not(.header-kicker){color:#90798d;letter-spacing:.12em;margin:20px 0 38px;font-family:Georgia,Songti SC,serif;font-size:17px;animation:.5s 80ms both board-in}.dream-primary,.dream-secondary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#e49cbc,#9fcbe6);border:1px solid #c77da4;border-radius:14px;justify-content:center;align-items:center;min-height:52px;padding:0 24px;font-weight:700;text-decoration:none;transition:transform .18s,box-shadow .18s,opacity .18s;display:inline-flex;box-shadow:0 10px 25px #b5689640}.dream-primary:hover,.dream-secondary:hover,.choice-button:hover{transform:translateY(-2px);box-shadow:0 14px 30px #b568964d}.dream-primary:active,.dream-secondary:active,.choice-button:active{transform:scale(.98)}.dream-primary:disabled,.dream-secondary:disabled{opacity:.48;cursor:not-allowed;transform:none}.dream-secondary{color:#725c82;background:linear-gradient(135deg,#f7dcea,#d9e9f6);border-color:#b4a2d3}.connect-button{border-radius:17px;width:min(300px,100%);height:62px;font-size:19px;animation:.5s .16s both board-in}.connect-button span{margin-right:10px;font-size:25px;font-weight:400}.flow-page{flex-direction:column;justify-content:center;align-items:center;gap:28px;display:flex}.flow-header{text-align:center}.flow-header h1{font-size:clamp(32px,4vw,48px)}.choice-panel,.join-panel,.waiting-panel,.single-panel{text-align:center;border:1px solid var(--card-border);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);background:#fff8fbe6;border-radius:22px;width:min(720px,100%);padding:clamp(26px,4vw,42px);animation:.45s both board-in;box-shadow:0 22px 55px #ac668f2e}.choice-panel h2,.join-panel h2,.waiting-panel h2,.error-state h2{color:#654b65;margin:0;font-family:Georgia,Songti SC,serif;font-size:30px}.choice-panel>p,.join-panel>p:first-of-type,.waiting-panel>p{color:#9b8192;margin:10px 0 28px;font-size:14px}.connect-choices{grid-template-columns:1fr 1fr;gap:16px;display:grid}.choice-button{color:#fff;border:1px solid #c577a28c;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;min-height:180px;padding:24px 18px;text-decoration:none;transition:transform .18s,box-shadow .18s;display:flex;box-shadow:0 10px 24px #ad67912e}.create-choice{background:linear-gradient(145deg,#e597bcf2,#cd7eabeb)}.join-choice{color:#665477;background:linear-gradient(145deg,#e1cbebf5,#acd3ebf0)}.choice-button i{background:#ffffff40;border-radius:50%;place-items:center;width:48px;height:48px;margin-bottom:12px;font-size:25px;font-style:normal;display:grid}.choice-button strong{font-size:21px}.choice-button small{opacity:.82;margin-top:8px;line-height:1.55}.soft-back{color:#9a7c90;cursor:pointer;background:0 0;border:0;margin-top:24px;font-size:13px;text-decoration:none;display:inline-block}.soft-back:hover{color:var(--pink-deep)}.single-panel{align-content:center;place-items:center;min-height:300px;display:grid}.loading-state{color:#8c7386;align-content:center;place-items:center;min-height:180px;display:grid}.loading-state p{margin:17px 0 0}.soft-spinner,.button-spinner{aspect-ratio:1;border:3px solid #d06f9b38;border-top-color:#d06f9b;border-radius:50%;width:34px;animation:.8s linear infinite spin}.button-spinner{border-color:#fff #ffffff59 #ffffff59;width:18px;margin-right:9px}.error-state{text-align:center}.error-state>span{color:#d479a3;font-size:42px}.error-state p{color:#947b8c;margin:12px auto 22px;line-height:1.7}.join-panel{width:min(520px,100%)}.join-panel label{color:#a28598;letter-spacing:.18em;margin-bottom:8px;font-size:12px;display:block}.join-panel input{color:#654a64;text-align:center;letter-spacing:.3em;text-transform:uppercase;background:#ffffffc2;border:1px solid #d8aac4;border-radius:14px;outline:none;width:100%;height:72px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(24px,7vw,34px);font-weight:700;transition:border .2s,box-shadow .2s}.join-panel input:focus{border-color:#ca6f9b;box-shadow:0 0 0 4px #ca6f9b1f}.join-panel input::placeholder{color:#baa7b3;letter-spacing:.08em;font-family:inherit;font-size:15px}.join-panel .dream-primary{width:100%;height:56px}.form-error{min-height:34px;color:#bd537d!important;margin:9px 0!important;font-size:13px!important}.waiting-panel{width:min(570px,100%)}.room-code-card{background:#fffdf9c2;border:1px solid #dca9c5;border-radius:17px;padding:22px;box-shadow:inset 0 0 22px #d587b014,0 9px 24px #ae688f1c}.room-code-card small,.room-code-card strong{display:block}.room-code-card small{color:#a48798;letter-spacing:.18em;font-size:11px}.room-code-card strong{color:#654a65;letter-spacing:.28em;margin-top:8px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(38px,9vw,55px);transform:translate(.14em)}.waiting-pulse{color:#8e7386;justify-content:center;align-items:center;gap:10px;margin:24px 0 11px;font-size:14px;display:flex}.waiting-pulse i{aspect-ratio:1;background:#d576a2;border-radius:50%;width:10px;animation:1.25s infinite breathe}.connection-status{color:#81727c;align-items:center;gap:7px;font-size:12px;display:inline-flex}.connection-status i{aspect-ratio:1;border-radius:50%;width:8px}.connection-connected i{background:#68a373;box-shadow:0 0 0 3px #68a3731f}.connection-reconnecting i{background:#d5a34f}.connection-disconnected i{background:#c75f70}.copy-notice{min-height:22px;color:#c46491!important;margin:10px 0 5px!important;font-size:12px!important}.waiting-actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.waiting-actions .dream-primary,.waiting-actions .dream-secondary{min-height:50px;padding:0 12px}.text-action{color:#9a7d8e;cursor:pointer;background:0 0;border:0;min-height:34px}.danger-text{color:#bd718d}.room-meta{color:#8e7688;justify-content:center;align-items:center;gap:12px;margin-top:13px;font-size:12px;display:flex}.room-meta button{cursor:pointer;background:#ffffffa6;border:1px solid #dcb2c9;border-radius:999px;padding:3px 9px}.online-header{margin-bottom:0}.online-game-page .game-shell{margin-top:18px}.online-controls{padding-top:18px}.offline-note{color:#987a55;text-align:center;background:#fff8e2de;border:1px solid #d5a35d59;border-radius:12px;padding:10px 12px;font-size:12px}.offline-note i{aspect-ratio:1;background:#d3a34d;border-radius:50%;width:7px;margin-right:6px;display:inline-block}.own-resign-card{text-align:center;padding:11px}.own-resign-card p{color:#9a7b8f;margin:1px 0 9px;font-size:12px}.own-resign-card button{color:#be668f;cursor:pointer;background:#fff6fa;border:1px solid #e2b7cf;border-radius:9px;width:100%;min-height:55px;font-weight:700}.own-resign-card button small{color:#a98b9c;margin-top:3px;font-size:9px;font-weight:400;display:block}.own-resign-card button:disabled{opacity:.45;cursor:not-allowed}.toast{z-index:30;color:#6f526a;background:#fff7fbf5;border:1px solid #d68bb280;border-radius:999px;max-width:calc(100vw - 32px);padding:11px 18px;font-size:13px;position:fixed;bottom:26px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #703e5e33}@keyframes spin{to{transform:rotate(360deg)}}.gomoku-page{background:linear-gradient(#fff4f58c, #f8eede66), url(/assets/pastel-molly-dolls-bg.png) center top / cover fixed no-repeat, radial-gradient(circle at 50% 16%, #ffffffe6, transparent 50%), repeating-linear-gradient(0deg, #64483306 0 1px, transparent 1px 4px), var(--paper);min-height:100svh;padding:26px 20px 44px;transition:filter .3s,background-color .3s;position:relative;overflow:hidden}.gomoku-page.theme-angry{filter:saturate(1.1);--pink:#d15f88;--pink-deep:#ad496f;--board-pink:#d987a8;--board-blue:#a9d3e9}.site-header{text-align:center;z-index:2;animation:.5s both header-in;position:relative}.header-kicker{color:var(--pink);letter-spacing:.28em;margin:0 0 11px;font-size:12px;font-weight:800}.site-header h1{color:#694c6d;letter-spacing:.05em;text-shadow:0 2px #ffffffa6;margin:0;font-family:Georgia,Songti SC,serif;font-size:clamp(34px,4.1vw,54px);font-weight:800;line-height:1.1}.site-header h1 span{color:#d488ac;vertical-align:.14em;margin:0 .25em;font-size:.58em;font-weight:400}.header-subtitle{color:#927d90;margin:13px 0 12px;font-size:13px}.theme-button{color:#95647f;cursor:pointer;background:#fffafcdb;border:1px solid #cc6f9a61;border-radius:999px;min-height:32px;padding:5px 16px;font-size:12px;transition:transform .2s,box-shadow .2s;box-shadow:0 3px 10px #975c7b1f}.theme-button small{color:#b39aa8}.theme-button:hover{transform:translateY(-1px);box-shadow:0 6px 15px #975c7b29}.game-shell{z-index:2;grid-template-columns:minmax(0,1fr) 280px;align-items:start;gap:24px;width:min(1180px,100%);margin:22px auto 0;display:grid;position:relative}.board-column{min-width:0;animation:.55s 80ms both board-in}.board-frame{aspect-ratio:1;border:9px solid var(--board-pink);background:linear-gradient(135deg, #f3bfd5 0%, #e7bfdb 42%, var(--board-blue) 100%);border-radius:20px;width:min(760px,100%);margin:0 auto;padding:clamp(18px,3vw,34px);transition:background .3s,border-color .3s;box-shadow:inset 0 0 0 2px #ffffff80,inset 8px 8px 25px #ae6d9e26,0 20px 42px #b566933d}.board-surface{background:#f7dfe5f5;width:100%;height:100%;position:relative;overflow:hidden;box-shadow:inset 0 0 24px #a66f8f1a,0 1px #ffffffe6}.board-lines{pointer-events:none;background-image:linear-gradient(var(--board-line) 1px, transparent 1px), linear-gradient(90deg, var(--board-line) 1px, transparent 1px);background-size:7.14286% 7.14286%;position:absolute;inset:3.333%}.board-points{grid-template-rows:repeat(15,1fr);grid-template-columns:repeat(15,1fr);display:grid;position:absolute;inset:0}.board-point{cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;min-width:0;min-height:0;padding:0;display:grid;position:relative}.board-point:not(:disabled):hover:before{content:"";aspect-ratio:1;background:#c4609180;border-radius:50%;width:24%}.board-point:focus-visible{outline-offset:-3px;outline:2px solid #d0659a}.board-point:disabled{cursor:default}.stone{aspect-ratio:1;z-index:2;border-radius:50%;place-items:center;width:79%;animation:.18s cubic-bezier(.18,.82,.35,1.28) both stone-drop;display:grid;position:relative}.stone-black,.mini-stone-black{background:radial-gradient(circle at 29% 23%,#747074 0,#262427 24%,#080808 70%);box-shadow:inset -4px -5px 7px #000000d9,inset 3px 3px 3px #fff3,0 4px 7px #46283b61}.stone-white,.mini-stone-white{background:radial-gradient(circle at 29% 23%,#fff 0,#f6f3eb 45%,#d9d5c7 78%,#aaa797 100%);border:1px solid #786e6947;box-shadow:inset -3px -4px 5px #5f50481f,inset 3px 3px 3px #ffffffd9,0 4px 7px #46283b38}.last-mark{aspect-ratio:1;background:#ed7eaf;border-radius:50%;width:18%;box-shadow:0 0 0 1px #ffffffa6}.stone-winning{animation:1.15s ease-in-out infinite alternate win-glow}.control-column{gap:14px;padding-top:58px;display:grid}.side-card{border:1px solid var(--card-border);background:var(--card);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:16px;animation:.45s both card-in;box-shadow:0 11px 28px #b56f9524}.side-card:nth-child(2){animation-delay:80ms}.side-card:nth-child(3){animation-delay:.14s}.side-card:nth-child(4){animation-delay:.2s}.players-card{padding:11px}.player-row{background:#fffbfc75;border:1px solid #e0b5cd99;border-radius:11px;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;height:72px;padding:9px 10px;transition:border-color .25s,background .25s,box-shadow .25s;display:grid}.player-row+.player-row{margin-top:9px}.player-row.active{background:#fff5fa;border-color:#d06f9b;box-shadow:inset 4px 0 #d06f9b}.mini-stone{aspect-ratio:1;border-radius:50%;flex:none;width:40px;display:block}.player-name{flex-direction:column;display:flex}.player-name small,.status-card small{color:#99818f;font-size:11px}.player-name strong{color:#553e55;letter-spacing:.05em;margin-top:2px;font-family:Georgia,Songti SC,serif;font-size:22px}.player-row b{color:#cf6d9a;font-family:Georgia,serif;font-size:25px}.status-card{align-items:center;gap:13px;min-height:82px;padding:15px;display:flex}.status-card .mini-stone{width:32px}.status-card>span:last-child{flex-direction:column;min-width:0;display:flex}.status-card strong{color:#594259;white-space:nowrap;margin-top:3px;font-size:19px}.status-card.finished{background:#fff2f9f5;border-color:#d06f9b}.action-card{gap:8px;padding:12px;display:grid}.action-card button{color:#76546e;cursor:pointer;background:#fff7fb;border:1px solid #dfb7ce;border-radius:10px;width:100%;height:48px;font-size:15px;font-weight:650;transition:transform .16s,box-shadow .16s,opacity .16s}.action-card button:hover:not(:disabled),.resign-card button:hover:not(:disabled){transform:translateY(-1px)}.action-card button:active:not(:disabled),.resign-card button:active:not(:disabled){transform:scale(.98)}.action-card button:focus-visible,.resign-card button:focus-visible,.theme-button:focus-visible{outline-offset:2px;outline:3px solid #d06f9b59}.action-card button:disabled,.resign-card button:disabled{opacity:.42;cursor:not-allowed}.action-card .primary-action{color:#fff;background:linear-gradient(135deg,#e49cbc,#9fcbe6);border-color:#bf79a2;box-shadow:0 5px 12px #b6689738}.resign-card{padding:11px}.resign-card>p{text-align:center;color:#9a7b8f;margin:1px 0 9px;font-size:12px}.resign-card>div{grid-template-columns:1fr 1fr;gap:8px;display:grid}.resign-card button{color:#be668f;cursor:pointer;background:#fff6fa;border:1px solid #e2b7cf;border-radius:9px;min-height:55px;transition:transform .16s}.resign-card button strong,.resign-card button small{display:block}.resign-card button strong{font-size:13px}.resign-card button small{color:#a98b9c;margin-top:3px;font-size:9px}.save-note{text-align:center;color:#a9919f;margin:-2px 0 0;font-size:11px}.save-note button{color:inherit;font-size:inherit;cursor:pointer;background:0 0;border:0;border-bottom:1px dotted;padding:0}.save-note button:hover{color:var(--pink-deep)}.modal-backdrop{z-index:20;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#52364c57;place-items:center;padding:20px;animation:.2s fade-in;display:grid;position:fixed;inset:0}.confirm-modal{text-align:center;background:#fff7fa;border:1px solid #d68bb299;border-radius:22px;width:min(400px,100%);padding:27px;animation:.24s modal-in;box-shadow:0 28px 70px #5a324d47}.modal-icon{aspect-ratio:1;color:#fff;background:linear-gradient(135deg,#df8fb5,#a5cce4);border-radius:50%;place-items:center;width:48px;margin:0 auto 11px;font-size:25px;display:grid}.confirm-modal h2{color:#60475f;margin:0;font-size:22px}.confirm-modal p{color:#947b8c;margin:11px 0 22px;font-size:13px;line-height:1.7}.confirm-modal>div{grid-template-columns:1fr 1fr;gap:10px;display:grid}.confirm-modal button{cursor:pointer;background:#fff;border:1px solid #dfb7ce;border-radius:10px;height:44px}.confirm-modal .confirm-resign{color:#fff;background:#cf759d;border-color:#c86d98}.celebration{z-index:10;pointer-events:none;color:#e885b1;justify-content:center;gap:8vw;font-size:30px;display:flex;position:fixed;inset:0}.celebration i{font-style:normal;animation:1.8s ease-out both confetti;position:relative;top:-40px}.celebration i:nth-child(2){animation-delay:.12s}.celebration i:nth-child(3){animation-delay:.24s}.celebration i:nth-child(4){animation-delay:.36s}.celebration i:nth-child(5){animation-delay:.48s}@keyframes header-in{0%{opacity:0;transform:translateY(-8px)}}@keyframes board-in{0%{opacity:0;transform:translateY(8px)}}@keyframes card-in{0%{opacity:0;transform:translate(8px)}}@keyframes stone-drop{0%{opacity:0;transform:scale(.3)}75%{transform:scale(1.08)}}@keyframes win-glow{to{filter:drop-shadow(0 0 7px #f064a2);transform:scale(1.06)}}@keyframes fade-in{0%{opacity:0}}@keyframes modal-in{0%{opacity:0;transform:translateY(8px)scale(.96)}}@keyframes confetti{0%{opacity:0;transform:translateY(0)rotate(0)}15%{opacity:1}to{opacity:0;transform:translateY(92vh)rotate(260deg)}}@media (max-width:980px){.gomoku-page{padding-inline:14px}.game-shell{grid-template-columns:minmax(0,1fr) 245px;gap:15px}.control-column{padding-top:28px}.status-card strong{font-size:16px}}@media (max-width:760px){.dream-page{background-position:top;background-size:auto 100%;padding:20px 16px}.landing-content{border-radius:22px;padding:38px 14px}.landing-content h1{letter-spacing:0;font-size:clamp(38px,11vw,48px)}.flow-page{padding-top:max(28px,env(safe-area-inset-top));justify-content:flex-start}.flow-header h1{letter-spacing:0;font-size:clamp(30px,8vw,39px)}.choice-panel,.join-panel,.waiting-panel,.single-panel{border-radius:18px;padding:25px 18px}.connect-choices{grid-template-columns:1fr}.choice-button{min-height:145px}.room-code-card strong{letter-spacing:.2em;transform:translate(.1em)}.waiting-actions{grid-template-columns:1fr}.gomoku-page{background-position:top;background-size:auto 100%;padding:20px 12px 34px}.header-kicker{margin-bottom:8px}.site-header h1{font-size:clamp(34px,10vw,42px)}.header-subtitle{font-size:12px}.game-shell{grid-template-columns:1fr;gap:16px;margin-top:17px}.board-frame{border-width:clamp(5px,1.8vw,8px);border-radius:15px;width:calc(100vw - 24px);padding:clamp(11px,4vw,22px)}.control-column{grid-template-columns:1fr 1fr;width:100%;max-width:560px;margin:auto;padding-top:0}.players-card,.action-card,.resign-card,.save-note{grid-column:1/-1}.players-card{grid-template-columns:1fr 1fr;gap:8px;display:grid}.player-row+.player-row{margin-top:0}.status-card{grid-column:1/-1}.action-card{grid-template-columns:repeat(3,1fr)}.action-card button{font-size:13px}}@media (max-width:480px){.connect-button{height:60px}.landing-content>p:not(.header-kicker){letter-spacing:.08em;font-size:15px}.room-meta{flex-wrap:wrap}.site-header h1{letter-spacing:0}.site-header h1 span{margin-inline:.08em}.players-card{grid-template-columns:1fr}.player-row+.player-row{margin-top:0}.action-card{grid-template-columns:1fr}.action-card button{font-size:15px}.mini-stone{width:35px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}