:root{color-scheme:dark;--ink:#f4f7ff;--muted:#a6b3d1;--pink:#ff4e9b;--cyan:#62f4ee;--gold:#ffd76a;--violet:#8f68ff;--cabinet:#17162b;--panel:#23203c;--line:#ffffff24}
*{box-sizing:border-box}html{min-height:100%;background:#100f21}body.puyo-arcade{position:relative;isolation:isolate;margin:0;min-height:100vh;overflow-x:hidden;background:radial-gradient(ellipse at 50% 38%,#34305e 0,#19172f 42%,#100f21 82%);color:var(--ink);font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;letter-spacing:.01em}
body.puyo-arcade:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#ff4e9b08 1px,transparent 1px),linear-gradient(#62f4ee08 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(transparent,#000 18%,#000 83%,transparent)}
body.puyo-arcade:after{content:"";position:fixed;inset:0;z-index:8;pointer-events:none;opacity:.13;background:repeating-linear-gradient(to bottom,transparent 0 3px,#05040b 4px);mix-blend-mode:screen}
.gg-site-strip{position:relative;z-index:9;background:#0d0d1bdc;border-bottom:1px solid #ffffff20;color:#d7dbed}.gg-site-strip a{color:inherit}.top{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100% - 1100px)/2));background:#16152bcc;border-bottom:1px solid #ffffff1c}.top>a{font-family:"Black Han Sans",sans-serif;font-size:1.22rem;color:#fff;text-decoration:none;letter-spacing:.03em;text-shadow:0 0 15px #62f4ee70}.top .gg-auth-slot{display:flex}.gg-auth-trigger{min-height:38px;padding:0 17px;border:1px solid #62f4ee72;border-radius:5px;background:#1b2340;color:#dcfffd;font:700 .78rem "IBM Plex Mono",monospace;letter-spacing:.08em;box-shadow:0 0 16px #62f4ee20;cursor:pointer}
main{max-width:1100px;margin:auto;padding:35px 20px 55px}.intro{text-align:center;margin:0 auto 19px}.intro p{display:inline-flex;align-items:center;gap:9px;margin:0;padding:6px 12px;border:1px solid #ff4e9b70;border-radius:4px;background:#ff4e9b12;color:#ffa4cf;font:700 .7rem "IBM Plex Mono",monospace;letter-spacing:.24em}.intro p:before,.intro p:after{content:"✦";color:var(--gold)}.intro h1{margin:7px 0 0;font:clamp(3rem,8vw,5.3rem)/1 "Black Han Sans",system-ui,sans-serif;letter-spacing:.02em;color:#fff;text-shadow:0 3px 0 #a43a9e,0 6px 0 #542c83,0 0 30px #b46fff90}.intro span{display:block;margin-top:10px;color:#d5d4f0;font:600 .9rem system-ui,sans-serif;letter-spacing:.06em}
.menu,.lobby{position:relative;max-width:650px;margin:0 auto 24px;padding:26px 30px 22px;border:2px solid #ff65ac;border-radius:12px;background:linear-gradient(145deg,#292443f5,#17172df5 75%);box-shadow:0 0 0 5px #17162b,0 0 0 7px #ffffff1c,0 20px 65px #080711a8,0 0 32px #ff4e9b26;clip-path:polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px))}.menu:before,.lobby:before{content:"";display:block;width:92px;height:7px;margin:-4px auto 19px;border-radius:4px;background:repeating-linear-gradient(90deg,#62f4ee 0 4px,transparent 4px 9px);box-shadow:0 0 12px #62f4ee55}.menu label{display:grid;gap:8px;color:#c7c5e4;font:700 .78rem "IBM Plex Mono",monospace;letter-spacing:.08em}.menu input,.join-row input{height:48px;border:1px solid #ffffff30;border-radius:5px;padding:0 14px;background:#111323;color:#fff;font:600 1rem "IBM Plex Mono",monospace;box-shadow:inset 0 4px 13px #080912}.menu input:focus,.join-row input:focus{outline:2px solid var(--cyan);outline-offset:2px}.menu-actions,.join-row{display:flex;gap:10px;margin-top:15px}.menu button,.lobby button,.controls button{min-height:48px;border:1px solid #ffffff35;border-radius:5px;padding:0 15px;background:linear-gradient(#34324f,#24243c);color:#eff1ff;font:700 .8rem "IBM Plex Mono",monospace;letter-spacing:.02em;cursor:pointer;box-shadow:inset 0 1px #ffffff1b,0 4px 0 #111120;transition:transform .1s,filter .12s,border-color .12s}.menu button:hover,.lobby button:hover,.controls button:hover{filter:brightness(1.2);border-color:var(--cyan)}.menu button:active,.lobby button:active,.controls button:active{transform:translateY(3px);box-shadow:inset 0 1px #ffffff1b,0 1px 0 #111120}.menu-actions button{flex:1}.menu button.primary,.lobby .primary{border-color:#ff9ac6;background:linear-gradient(#ff72b3,#d42f83);color:#fff;text-shadow:0 1px #9f1f5d;box-shadow:inset 0 1px #ffffff70,0 4px 0 #7e1d51,0 0 22px #ff4e9b32}.join-row input{flex:1;min-width:0}.join-row button{border-color:#65e8df;background:linear-gradient(#277f87,#1b4e61);color:#e1ffff;box-shadow:inset 0 1px #ffffff40,0 4px 0 #143a4b}.hint{margin:17px 0 0;text-align:center;color:#9ca6c8;font:500 .76rem/1.5 system-ui,sans-serif}.lobby{text-align:center}.lobby>div{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}.lobby strong{font-size:1.7rem;letter-spacing:.2em;color:var(--gold);text-shadow:0 0 16px #ffd76a80}.lobby p{color:var(--muted);font:600 .85rem system-ui,sans-serif}.lobby button{margin:5px}
.arena{max-width:1000px;margin:auto}.boards-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.opponents{display:contents}.player-board{position:relative;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;gap:4px 8px;align-items:center;justify-items:center;padding:10px;background:linear-gradient(145deg,#282442,#17172d);border:1px solid #ffffff35;border-radius:8px;box-shadow:0 10px 28px #07071190,inset 0 1px #ffffff12}.player-board>b{grid-column:1/-1;align-self:end;color:#fff;font:700 .78rem "IBM Plex Mono",monospace;letter-spacing:.08em;text-shadow:0 0 12px #62f4ee65}.player-board>canvas{grid-column:1;grid-row:2/4;width:min(100%,220px);height:auto;max-height:calc(100vh - 210px);aspect-ratio:1/2;background:#16182b;border:3px solid #62f4ee;border-radius:5px;box-shadow:0 0 0 2px #10101e,0 0 18px #62f4ee30;image-rendering:pixelated}.player-board>small{grid-column:1/-1;font:600 .65rem "IBM Plex Mono",monospace;color:#b8c3df}.self-board .next-card{grid-column:2;grid-row:2/4;width:76px;min-height:unset;padding:6px;align-self:center}.self-board .next-card canvas{width:62px;height:83px}.self-board #chainLabel,.self-board #status{grid-column:1/-1}.self-board #status{grid-row:4}.next-card{width:104px;min-height:200px;padding:10px;text-align:center;display:flex;align-items:center;flex-direction:column;gap:6px;border:1px solid #ffffff30;border-radius:5px;background:#141527}.next-card span{color:var(--cyan);font:700 .68rem "IBM Plex Mono",monospace;letter-spacing:.13em}.next-card canvas{width:80px;height:106px}.opponent{min-width:100px;background:#201e37;border:1px solid #ffffff2b;border-radius:5px;padding:8px 12px;text-align:center}.opponent b{display:block}.opponent small{color:#a3adca}.controls{display:flex;justify-content:center;gap:9px;margin:15px auto}.controls button{min-width:55px;border-color:#60e8df77;color:#dcffff;font-size:1.2rem;touch-action:manipulation}.controls button:last-child{min-width:92px;border-color:#ff73ad77;color:#ffc1dc;font-size:.8rem}.keys{text-align:center;color:#a9b4d0;font:500 .72rem "IBM Plex Mono",monospace}#notice{position:fixed;z-index:10;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#17162b;border:1px solid var(--gold);color:#fff;padding:11px 18px;border-radius:5px;box-shadow:0 0 25px #ffd76a30;transition:.2s}#notice.show{opacity:1;transform:translate(-50%,0)}[hidden]{display:none!important}.mobile-note{display:none}
/* Shared sign-in keeps its account and provider behavior; only its Puyo presentation changes. */
body.puyo-arcade .gg-auth-dialog{width:min(440px,calc(100vw - 28px));max-width:none;padding:0;border:2px solid var(--cyan);border-radius:8px;background:#17162b;color:var(--ink);box-shadow:0 0 0 6px #17162b,0 0 0 8px #ffffff25,0 0 60px #62f4ee35}.gg-auth-dialog::backdrop{background:#070711d9;backdrop-filter:blur(8px)}.gg-auth-panel{padding:25px;font-family:"IBM Plex Mono",monospace}.gg-auth-head{margin-bottom:19px;padding-bottom:13px;border-bottom:1px solid #ffffff28}.gg-auth-head h2{font:2rem "Black Han Sans",sans-serif;letter-spacing:.02em;color:#fff;text-shadow:0 0 16px #62f4ee66}.gg-auth-close{min-width:65px;min-height:38px;border:1px solid #ffffff35;border-radius:4px;background:#2c2945;color:#e9ebff;font:700 .72rem "IBM Plex Mono",monospace}.gg-auth-providers{display:grid;gap:10px}.gg-auth-provider{min-height:50px;border:1px solid #ffffff3d;border-radius:4px;background:linear-gradient(#34324f,#24243c);color:#fff;font:700 .82rem "IBM Plex Mono",monospace;cursor:pointer}.gg-auth-provider[data-provider="kakao"]{border-color:#fee500;background:#fee500;color:#191600}.gg-auth-provider[data-provider="naver"]{border-color:#03c75a;background:#03a84b;color:#fff}.gg-auth-provider:disabled{filter:grayscale(.75);opacity:.55}.gg-auth-profile{gap:9px}.gg-auth-profile input{border:1px solid #ffffff35;border-radius:4px;background:#111323;color:#fff}.gg-auth-profile button,.gg-auth-logout{border-radius:4px;font:700 .76rem "IBM Plex Mono",monospace}.gg-auth-profile button{background:#277f87;color:#fff}.gg-auth-logout{background:#34324f;color:#fff}.gg-auth-name{font-family:"Black Han Sans",sans-serif}.gg-auth-status{color:#aeb8d5}
@media(max-height:900px) and (min-width:701px){.player-board>canvas{width:min(100%,180px);max-height:calc((100vh - 250px)/2)}.player-board{padding:5px 8px;gap:2px 6px}.controls{margin:5px auto}.keys{margin:2px auto}}body.playing main{padding:8px 12px}.playing .intro{display:none}.playing .boards-grid{gap:7px}.playing .player-board{padding:5px 7px;gap:2px 5px}.playing .player-board>b{font-size:.72rem}.playing .player-board>canvas{width:min(100%,calc(30vh - 78px));max-height:calc((100vh - 240px)/2);border-width:2px}.playing:not(.solo-playing) .player-board>canvas{width:min(100%,calc((100vh - 240px)/4),calc(30vh - 78px));height:auto;max-height:none}.playing .self-board .next-card{width:66px;padding:4px}.playing .self-board .next-card canvas{width:52px;height:70px}.playing .player-board>small{font-size:.62rem}.playing .controls{margin:6px auto}.playing .controls button{min-height:42px}.playing .keys{margin:2px auto;font-size:.68rem}.player-board:not(.self-board){display:flex;flex-direction:column}.solo-playing .boards-grid{grid-template-columns:minmax(0,430px);justify-content:center}.solo-playing .player-board>canvas{width:min(100%,220px);height:auto;max-height:none}
body.puyo-arcade .gg-auth-trigger:focus-visible,body.puyo-arcade .gg-auth-dialog button:focus-visible,body.puyo-arcade .gg-auth-dialog input:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
@media(max-width:700px){main{padding:22px 12px 34px}.intro{margin:4px 0 18px}.intro h1{font-size:3.3rem}.intro span{font-size:.82rem}.menu,.lobby{padding:20px 17px 17px}.menu-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.menu-actions #soloButton{grid-column:1/-1}.menu-actions button{min-width:0;padding-inline:8px}.join-row{gap:7px}.menu button{padding-inline:9px;font-size:.72rem}.hint{font-size:.7rem}.mobile-note{display:block;max-width:520px;margin:15px auto;padding:14px;text-align:center;border:1px solid #ffffff2b;border-radius:6px;background:#1c1a34;color:#b7c1de;font:500 .78rem/1.5 system-ui,sans-serif}.arena{display:none}.arena:not([hidden]){display:block}.boards-grid{grid-template-columns:1fr}.top{padding:0 14px}.player-board>canvas{max-height:none}.solo-playing .player-board>canvas{width:min(100%,52vw)}.controls{gap:6px}.controls button{min-width:48px;padding:0 10px}}