@charset "UTF-8";
:root{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif;color:#243855;background:#f4f8ff;font-synthesis:none;--blue:#347bec;--red:#ef6377;--ink:#243855}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 5% 15%,#dfedff,transparent 50%),radial-gradient(ellipse at 95% 70%,#ffe8ed,transparent 48%);min-height:100vh}button,input{font:inherit}button{min-height:44px;border:1px solid #dbe4f0;border-radius:14px;background:white;color:var(--ink);padding:12px 18px;cursor:pointer;font-weight:700;touch-action:manipulation;transition:transform .15s,box-shadow .15s}button:hover:not(:disabled){box-shadow:0 5px 16px #29436514;transform:translateY(-1px)}button:focus-visible,input:focus-visible{outline:3px solid #e5ae34;outline-offset:3px}button:disabled{cursor:default;opacity:.45}button.primary{color:white;background:var(--blue);border-color:var(--blue);box-shadow:0 5px 0 #235fc0}.quiet{border:0;background:transparent;color:#667b96;box-shadow:none}.wide{width:100%}[hidden]{display:none!important}.shell{max-width:860px;margin:auto;padding:0 22px}header{height:80px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dce5f2}.brand{text-decoration:none;color:var(--blue);font-size:26px;font-weight:900;display:flex;align-items:center;gap:8px}.brand span{color:var(--red)}.brand b{font-size:15px;color:var(--ink);margin-left:8px}.icon{width:44px;padding:0;border-radius:50%;font-size:18px}main{padding:32px 0}.screen{max-width:540px;margin:auto}.hero{text-align:center;padding:18px 0}.eyebrow{font-size:11px;font-weight:800;letter-spacing:3px;color:#7487a5}h1{font-size:46px;letter-spacing:-2px;margin:20px 0 10px;line-height:1.35}h1 span{display:block}.catch{font-weight:750;font-size:18px}.hero-art{height:165px;display:flex;align-items:center;justify-content:center;gap:12px;position:relative}.hero-art .s3{transform:rotate(-12deg)}.hero-art .s2{transform:translateY(22px) rotate(14deg)}.hero-art .s1{transform:translateY(-16px) rotate(-10deg)}.hero-art:before{content:'';position:absolute;width:245px;height:105px;background:#e1eafa;border-radius:35%;transform:rotate(-10deg);z-index:-1}.lead{color:#6e7e98;line-height:1.9;font-size:14px}.menu{max-width:350px;display:grid;gap:15px;margin:26px auto}.menu button{text-align:left;padding:17px 22px}.menu button span{float:right}.menu small{display:block;font-size:11px;font-weight:500;opacity:.8;margin-top:5px}.menu .quiet{text-align:center}.tags{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;font-size:10px;color:#7f90a9}.tags span{padding:7px 10px;background:#ffffff99;border-radius:20px}footer{border-top:1px solid #dce5f2;padding:22px 0;font-size:10px;letter-spacing:2px;color:#93a2b8;display:flex;justify-content:space-between}.panel{background:#ffffffc9;border:1px solid white;border-radius:24px;padding:32px;box-shadow:0 15px 50px #31518008}.panel h2{font-size:23px}.panel p{font-size:13px;line-height:1.8;color:#6c7c93}.separator{text-align:center;color:#9aa7b7;margin:22px}label{font-size:12px}.join-row{display:flex;gap:8px;margin:8px 0}input{min-width:0;width:100%;border:1px solid #dbe4f0;border-radius:12px;padding:12px;font-size:20px;letter-spacing:4px}.join-row button{white-space:nowrap}#room-info{text-align:center;background:#eef5ff;border-radius:16px;padding:18px;margin-top:20px}#room-info small{letter-spacing:3px;color:#7b8da9}#room-number{display:block;font-size:40px;letter-spacing:8px;margin:8px}.match-meta{display:flex;justify-content:space-between;font-size:11px;color:#7487a5;margin-bottom:14px}.opponent{display:flex;align-items:center;justify-content:space-between;min-height:40px;font-size:12px}.mini-reserve{display:flex;gap:4px;align-items:center}.mini-reserve .token{width:23px;height:23px;font-size:17px;border-width:2px;box-shadow:0 2px 0 #bccadb}.mini-reserve .s1{width:14px;height:14px;font-size:11px}.mini-reserve .s2{width:19px;height:19px;font-size:14px}.status-box{display:flex;flex-direction:column;gap:6px;align-items:center;padding:15px 0 20px}.status-box b{font-size:22px}.status-box small{font-size:12px;color:#7d8ba1}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;aspect-ratio:1;background:#dfe8f5;padding:12px;border-radius:26px;box-shadow:0 8px 0 #c9d6e8,0 18px 35px #38588415}.cell{position:relative;padding:0;background:#fbfdff;border:2px solid transparent;border-radius:16px;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;aspect-ratio:1;box-shadow:inset 0 -3px 0 #eaf0f8}.cell .index{position:absolute;left:9px;top:5px;color:#d1dce9;font-size:10px}.cell.legal{background:#e4f4ed;border:2px dashed #80c6ad}.cell.selected{border:3px solid #f4bd4d;background:#fff7dc}.cell.win{background:#fff1c2;box-shadow:inset 0 0 0 3px #eac359,0 0 20px #ffe49e;animation:glow 1s infinite alternate}.token{display:inline-flex;flex:none;align-items:center;justify-content:center;border-radius:50%;font-style:normal;font-weight:800;line-height:1;color:white;border:4px solid #ffffff55;box-shadow:inset 0 3px 5px #ffffff55,inset 0 -5px 6px #00000010,0 6px 0 #2660b9,0 9px 12px #19304f25;background:linear-gradient(145deg,#6cafff,#2d77e4);user-select:none}.token.cross{background:linear-gradient(145deg,#ff9caa,#ed5972);box-shadow:inset 0 3px 5px #ffffff55,inset 0 -5px 6px #00000010,0 6px 0 #ba455a,0 9px 12px #19304f25}.s1{width:45px;height:45px;font-size:30px}.s2{width:65px;height:65px;font-size:45px}.s3{width:85px;height:85px;font-size:60px}.cell.placed .token{animation:drop .3s ease-out}.cell.revealed .token{animation:reveal .35s ease-out}.reserve-heading{display:flex;justify-content:space-between;align-items:center;margin-top:24px;font-size:12px}.reserve-heading button{font-size:11px;padding:8px}.reserve{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;align-items:end;padding:8px 0}.reserve button{min-width:0;padding:10px 2px;min-height:87px;display:flex;align-items:center;justify-content:center;background:#ffffff80}.reserve .token.s1{width:30px;height:30px;font-size:20px}.reserve .token.s2{width:43px;height:43px;font-size:29px}.reserve .token.s3{width:56px;height:56px;font-size:39px}.reserve button.selected{background:#fff2ca;border:2px solid #e5b94d}.reserve button.empty{opacity:.35;font-size:12px}.hint{text-align:center;font-size:12px;color:#7a8ba4}.reserve button:disabled{opacity:.65}#result{text-align:center;background:white;border:1px solid #e1e9f4;border-radius:18px;margin-top:22px;padding:20px}#result-title{font-size:30px;color:var(--blue)}#result p{font-size:12px}#connection-alert{background:#fff1e8;border:1px solid #ecb294;border-radius:14px;padding:16px;font-size:13px}dialog{border:0;border-radius:24px;padding:30px;max-width:500px;width:calc(100% - 28px);max-height:85vh;color:var(--ink)}dialog::backdrop{background:#21354f88;backdrop-filter:blur(5px)}dialog h2{font-size:21px}dialog h3{font-size:15px;margin-top:24px}dialog p{font-size:13px;line-height:1.9}.close{float:right}.guide-line{display:flex;align-items:center;justify-content:center;gap:18px;height:110px}.reveal-demo{position:relative;height:100px;display:flex;align-items:center;justify-content:center}.reveal-demo .s3{position:absolute;animation:uncover 3s infinite}.reveal-demo .s1{position:absolute}@keyframes uncover{0%,20%,100%{transform:translateX(0)}50%,80%{transform:translateX(100px)}}@keyframes drop{from{transform:translateY(-20px) scale(1.15);opacity:.2}to{transform:none;opacity:1}}@keyframes reveal{from{transform:scale(.65);opacity:.4}to{transform:scale(1);opacity:1}}@keyframes glow{to{filter:brightness(1.07)}}@media(max-width:480px){.shell{padding:0 14px}header{height:64px}main{padding:20px 0}h1{font-size:39px}.panel{padding:24px 18px}.board{gap:7px;padding:9px;border-radius:20px}.cell{border-radius:12px}.cell .s3{width:74%;height:74%;font-size:clamp(34px,12vw,58px)}.cell .s2{width:56%;height:56%;font-size:clamp(25px,9vw,43px)}.cell .s1{width:39%;height:39%;font-size:clamp(18px,6vw,30px)}.token{border-width:3px}.reserve{gap:4px}.reserve button{min-height:70px}.reserve .token.s3{width:42px;height:42px;font-size:28px}.reserve .token.s2{width:33px;height:33px;font-size:23px}.reserve .token.s1{width:24px;height:24px;font-size:17px}.status-box b{font-size:20px}.brand b{font-size:13px}.hero{padding-top:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}