*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #1a0a2e;--bg2: #2a1050;--bg3: #3a1a66;--gold: #f5c842;--gold2: #e0a820;--gold-text: #b8860b;--pink: #ff4fb8;--red: #ff3a3a;--text: #1a0a2e;--text-sub: rgba(26,10,46,.65);--border: rgba(26,10,46,.18);--card: rgba(255,255,255,.82);--radius: 18px;--radius-sm: 10px;--bottom-ad-space: 50px;font-family:Helvetica Neue,Hiragino Kaku Gothic ProN,Meiryo,sans-serif}html,body,#root{width:100%;height:100%;height:100svh;overflow:hidden}body{background:var(--bg) url(https://ochinchinland-image-assets.homo-aiai.workers.dev/v1/1bb868b93901be9a7b10046ed439ab913fb5298ea3a1a1c41f01f70ee11132a2.webp) center / cover no-repeat fixed;color:var(--text);overflow:hidden}.app{width:100%;height:100svh;overflow:hidden;position:relative;display:flex;flex-direction:column;align-items:center}.screen{width:100%;max-width:430px;height:100svh;overflow:hidden;display:flex;flex-direction:column;position:relative}.g-header{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:16px 20px 12px;background:#f0f4eeeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10}.g-header-logo{font-size:14px;font-weight:600;color:#2d5a1b;letter-spacing:.12em;text-decoration:none;display:flex;align-items:center;gap:6px}.g-header-logo img{width:28px;height:28px;border-radius:6px;vertical-align:middle}.g-hamburger{display:flex;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px;-webkit-tap-highlight-color:transparent}.header-leave-btn{white-space:nowrap;font-size:12px;font-weight:700;color:#c0392b;background:#c0392b14;border:1px solid rgba(192,57,43,.3);border-radius:20px;padding:5px 8px;cursor:pointer;letter-spacing:.06em;-webkit-tap-highlight-color:transparent}.g-hamburger span{display:block;width:22px;height:1.5px;background:#2d5a1b;border-radius:2px;transition:all .3s ease}.btn{width:100%;border:none;border-radius:28px;padding:16px;font-size:16px;font-weight:800;letter-spacing:.14em;cursor:pointer;transition:transform .1s,opacity .2s;-webkit-tap-highlight-color:transparent}.btn:active:not(:disabled){transform:scale(.97);opacity:.85}.btn:disabled{opacity:.35;cursor:default}.btn-primary{background:linear-gradient(135deg,#ffe066,#f5c842,#e09c10);color:#1a0a2e;box-shadow:0 6px #a06d00,0 12px 28px #f5c84259}.btn-primary:active:not(:disabled){box-shadow:0 2px #a06d00,0 6px 18px #f5c84240}.btn-secondary{background:#ffffff0f;color:var(--text);border:1px solid rgba(255,255,255,.15)}.btn-leave-room{background:#ffb6c138;color:#b74462;border:1px solid rgba(255,145,170,.42);box-shadow:none}.btn-danger{background:linear-gradient(135deg,#ff6060,#ff3a3a);color:#fff;box-shadow:0 5px #8a1010}.btn-sm{padding:10px 20px;font-size:13px;width:auto;border-radius:20px}.input-group{display:flex;flex-direction:column;gap:6px}.input-label{font-size:11px;font-weight:700;color:var(--text-sub);letter-spacing:.14em}.g-input{width:100%;background:#ffffffd1;border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;font-size:17px;font-weight:600;color:var(--text);outline:none;transition:border-color .2s;-webkit-appearance:none}.g-input::placeholder{color:#1a0a2e61}.g-input:focus{border-color:var(--gold)}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 16px}.top-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;justify-content:center;padding:32px 24px calc(32px + var(--bottom-ad-space) + env(safe-area-inset-bottom,0px));gap:20px}.top-hero{text-align:center;padding-bottom:8px}.top-crown{font-size:64px;line-height:1;margin-bottom:10px;animation:crownFloat 3s ease-in-out infinite;display:inline-block}@keyframes crownFloat{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}.top-title{font-size:clamp(26px,8vw,34px);font-weight:900;color:var(--gold-text);letter-spacing:.06em;text-shadow:0 0 28px rgba(245,200,66,.5)}.top-sub{font-size:11px;color:var(--text-sub);margin-top:6px;letter-spacing:.18em}.top-description{margin-top:12px;font-size:12px;font-weight:700;line-height:1.75;color:var(--text-sub);letter-spacing:.04em}.how-to-play{background:#ffffffd1;border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}.how-to-play-title{font-size:10px;font-weight:800;color:var(--gold-text);letter-spacing:.22em;margin-bottom:10px}.how-to-play-steps{display:flex;flex-direction:column;gap:8px;padding-left:20px}.how-to-play-steps li{font-size:12px;font-weight:600;color:var(--text-sub);line-height:1.65;letter-spacing:.03em}.top-tabs{display:flex;gap:8px;background:#ffffffd1;border-radius:var(--radius);padding:4px}.top-tab{flex:1;padding:10px 3px;border:none;border-radius:calc(var(--radius) - 4px);background:transparent;color:var(--text-sub);font-size:12px;font-weight:700;cursor:pointer;transition:all .18s;letter-spacing:.04em}.top-tab.active{background:var(--gold);color:#1a0a2e;box-shadow:0 2px 8px #f5c8424d}.top-form{display:flex;flex-direction:column;gap:16px}.top-error{font-size:12px;color:#ff8a8a;text-align:center;font-weight:600;letter-spacing:.04em}.room-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:16px 16px calc(16px + var(--bottom-ad-space) + env(safe-area-inset-bottom,0px))}.room-code-bar{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#f5c8421f,#f5c8420d);border:1px solid rgba(245,200,66,.35);border-radius:var(--radius-sm);padding:12px 16px;box-shadow:0 0 20px #f5c84214}.room-code-label{font-size:10px;color:var(--gold-text);font-weight:700;letter-spacing:.18em}.room-code-value{font-size:18px;font-weight:800;color:var(--gold-text);letter-spacing:.12em}.section-title{font-size:11px;font-weight:700;color:var(--text-sub);letter-spacing:.18em;margin-bottom:8px}.member-list{display:flex;flex-direction:column;gap:8px}.member-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#ffffffd1;border:1px solid rgba(26,10,46,.12);border-radius:var(--radius-sm);transition:background .2s}.member-avatar{width:38px;height:38px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;flex-shrink:0;box-shadow:0 3px 10px #0000004d}.av0{background:linear-gradient(135deg,#ff6b9d,#e83e8c);color:#fff}.av1{background:linear-gradient(135deg,#ffa654,#f76c1c);color:#fff}.av2{background:linear-gradient(135deg,#54d6a0,#1db87e);color:#1a0a2e}.av3{background:linear-gradient(135deg,#5ab4f5,#1a7fd4);color:#fff}.av4{background:linear-gradient(135deg,#c47aff,#9c3fe8);color:#fff}.av5{background:linear-gradient(135deg,#ffe066,#f5c842);color:#1a0a2e}.member-name{font-size:15px;font-weight:600;color:var(--text);flex:1}.member-you{font-size:9px;font-weight:700;color:var(--gold-text);letter-spacing:.14em;background:#f5c8421f;padding:2px 8px;border-radius:8px}.mode-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.mode-badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:7px 14px;border-radius:20px;letter-spacing:.06em}.mode-badge.normal{background:#ffffffd1;color:var(--text-sub);border:1px solid rgba(26,10,46,.15)}.mode-badge.witch{background:linear-gradient(135deg,#ff3a3a33,#ff4fb826);color:#ff8a8a;border:1px solid rgba(255,58,58,.4);box-shadow:0 0 16px #ff3a3a26}.mode-toggle-btn{padding:8px 16px;border-radius:20px;border:1px solid var(--border);background:#ffffffd1;color:var(--text-sub);font-size:12px;font-weight:700;letter-spacing:.08em;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent}.mode-toggle-btn:active{opacity:.7}.room-footer{flex-shrink:0;padding:12px 16px calc(12px + var(--bottom-ad-space) + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,#1a0a2ef2 30%)}.player-count-hint{font-size:11px;color:var(--text-sub);text-align:center;margin-bottom:10px;letter-spacing:.06em}.draw-body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 16px calc(14px + var(--bottom-ad-space) + env(safe-area-inset-bottom,0px));position:relative;overflow-y:auto;overflow-x:hidden}.draw-round-header{flex-shrink:0;text-align:center}.draw-title{display:inline-block;font-size:11px;font-weight:900;color:#1a0a2e;letter-spacing:.22em;background:linear-gradient(135deg,#ffe066,#f5c842);padding:4px 14px;border-radius:20px;box-shadow:0 3px 8px #f5c8424d}.draw-round{font-size:12px;font-weight:600;color:var(--text-sub);letter-spacing:.12em;text-align:center;margin-top:8px}.straw-stage{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;width:100%}.cup-scene{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:100%;position:relative}.straw-row{display:flex;justify-content:center;align-items:flex-end;position:relative;z-index:2;width:100%;padding:0 8px;flex-shrink:0}.straw-slot{display:flex;flex-direction:column;align-items:center;gap:3px;-webkit-tap-highlight-color:transparent;transform-origin:50% calc(100% - 70px);transition:transform .9s cubic-bezier(.22,1,.36,1);flex-shrink:0}.straw-slot.available{cursor:pointer}.straw-slot.available:active{opacity:.85}.straw-avatar-zone{height:38px;display:flex;align-items:flex-end;justify-content:center}.straw-avatar-chip{width:30px;height:30px;border-radius:50%;background:#ffffffd1;border:2px solid rgba(26,10,46,.18);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--text);animation:avatarPop .22s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #0000004d}.straw-avatar-chip.mine{background:linear-gradient(135deg,#ffe066,#f5c842);color:#1a0a2e;border-color:var(--gold);box-shadow:0 0 12px #f5c84280}@keyframes avatarPop{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.straw-avatar-empty{width:30px;height:30px}.straw-img-wrap{position:relative;width:100%;overflow:hidden;flex-shrink:0;transform:translateY(0);transition:transform .45s cubic-bezier(.22,1,.36,1) .76s}.straw-slot.spreading .straw-img-wrap{transform:translateY(-72px)}.straw-slot.taken .straw-img-wrap{opacity:.45}.straw-slot.mine .straw-img-wrap{filter:drop-shadow(0 0 10px rgba(245,200,66,.7))}.straw-slot.available .straw-img-wrap{animation:strawPulse 2s ease-in-out infinite}@keyframes strawPulse{0%,to{filter:drop-shadow(0 0 0px rgba(245,200,66,0))}50%{filter:drop-shadow(0 0 8px rgba(245,200,66,.4))}}.straw-img-wrap.atari{filter:drop-shadow(0 0 14px rgba(255,50,50,1)) drop-shadow(0 0 28px rgba(255,80,80,.6))!important;animation:atariWrapPulse 1.2s ease-in-out infinite .5s}@keyframes atariWrapPulse{0%,to{filter:drop-shadow(0 0 10px rgba(255,50,50,.8)) drop-shadow(0 0 20px rgba(255,80,80,.4))}50%{filter:drop-shadow(0 0 20px rgba(255,50,50,1)) drop-shadow(0 0 40px rgba(255,80,80,.7))}}.straw-img-wrap.atari .straw-img{animation:atariImgReveal .45s cubic-bezier(.34,1.56,.64,1) both}@keyframes atariImgReveal{0%{opacity:.3;transform:scaleY(.92)}to{opacity:1;transform:scaleY(1)}}.straw-img{position:absolute;height:auto;display:block;-webkit-user-select:none;user-select:none}.cup-mug-wrapper{position:relative;width:100%;overflow:hidden;flex-shrink:0;pointer-events:none;transition:transform .45s cubic-bezier(.22,1,.36,1)}.cup-mug-back{z-index:1}.cup-mug-front{position:absolute;bottom:0;width:100%;overflow:hidden;pointer-events:none;z-index:3;transition:transform .45s cubic-bezier(.22,1,.36,1)}.cup-mug-img{position:absolute;height:auto;display:block;-webkit-user-select:none;user-select:none}.straw-status{position:relative;width:100%;flex-shrink:0;z-index:7;font-size:12px;font-weight:600;color:var(--text-sub);letter-spacing:.1em;text-align:center;min-height:20px;margin-top:0;padding:6px 8px;border-radius:14px;background:#1a0a2e3d;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.straw-error{color:var(--red);animation:errShake .28s ease}@keyframes errShake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.card-scene{flex:1;overflow-y:auto;width:100%;display:flex;align-items:flex-start;justify-content:center;padding:4px 12px 8px;-webkit-overflow-scrolling:touch}.card-grid{display:grid;gap:8px;width:100%}.card-slot{aspect-ratio:1;border-radius:12px;border:2px solid rgba(26,10,46,.15);background:#ffffffd1 url(https://ochinchinland-image-assets.homo-aiai.workers.dev/v1/9a3b316e93521e5747f70f708325404c7b6b202fdd94c8f1311e1be01b1230b2.webp) center / contain no-repeat;display:flex;align-items:center;justify-content:center;cursor:default;transition:transform .1s,border-color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}.card-slot.available{cursor:pointer;border-color:#f5c84240;animation:cardPulse 2s ease-in-out infinite}@keyframes cardPulse{0%,to{box-shadow:0 0 #f5c84200}50%{box-shadow:0 0 14px #f5c84240}}.card-slot.available:active{transform:scale(.93)}.card-slot.mine{border-color:var(--gold);box-shadow:0 0 14px #f5c84273;background-color:#f5c84214}.card-slot.taken{opacity:.7}.card-face-down-icon{display:none}.card-claimer-chip{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;box-shadow:0 2px 8px #0000004d;animation:avatarPop .22s cubic-bezier(.34,1.56,.64,1);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.card-claimer-chip.mine{background:linear-gradient(135deg,#ffe066,#f5c842);color:#1a0a2e;box-shadow:0 0 12px #f5c84280}.role-straw-preview{display:flex;justify-content:center;margin-bottom:10px}.role-straw-preview{overflow:visible}.role-straw-mini{position:relative;display:block;-webkit-user-select:none;user-select:none}.role-straw-mini-wrap{position:relative;width:28px;height:90px;overflow:hidden;margin:0 auto}.role-straw-mini-wrap.atari{filter:drop-shadow(0 0 8px rgba(255,50,50,.9)) drop-shadow(0 0 18px rgba(255,80,80,.5));animation:miniAtariGlow 1.4s ease-in-out infinite}@keyframes miniAtariGlow{0%,to{filter:drop-shadow(0 0 6px rgba(255,50,50,.7))}50%{filter:drop-shadow(0 0 16px rgba(255,50,50,1)) drop-shadow(0 0 32px rgba(255,80,80,.7))}}.role-reveal{text-align:center;animation:roleFadeIn .45s cubic-bezier(.34,1.56,.64,1) both}@keyframes roleFadeIn{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.role-icon{font-size:64px;line-height:1;margin-bottom:14px;display:block;animation:iconBounce .5s cubic-bezier(.34,1.56,.64,1) .1s both}.role-icon-img{width:88px;height:88px;object-fit:contain;display:block;margin:0 auto 14px;animation:iconBounce .5s cubic-bezier(.34,1.56,.64,1) .1s both;filter:drop-shadow(0 10px 18px rgba(26,10,46,.28))}@keyframes iconBounce{0%{transform:scale(0) rotate(-20deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.role-label{font-size:9px;font-weight:800;letter-spacing:.28em;color:var(--text-sub);margin-bottom:8px}.role-main{font-size:clamp(30px,9vw,40px);font-weight:900;letter-spacing:.04em;line-height:1.2}.role-main.ikemen{color:var(--gold-text);text-shadow:0 0 30px rgba(245,200,66,.7),0 0 60px rgba(245,200,66,.3)}.role-main.busu{color:#c0b0d0}.role-main.witch{color:#ff6b9d;text-shadow:0 0 30px rgba(255,107,157,.6),0 0 60px rgba(255,58,58,.3)}.role-hint-box,.witch-hint-box{margin-top:12px;background:#ff3a3a3d;border:1px solid rgba(255,58,58,.42);border-radius:var(--radius-sm);padding:12px 16px;max-width:280px;margin-left:auto;margin-right:auto}.role-hint-box{background:#f5c8423d;border-color:#f5c84275}.role-hint-box.papa{background:#ff3a3a3d;border-color:#ff3a3a6b}.role-hint-text,.witch-hint-text{font-size:13px;font-weight:700;color:var(--text-sub);line-height:1.7;letter-spacing:.04em;white-space:pre-line;text-align:left}.role-hint-text.papa,.witch-hint-text{color:#ff8a8a}.draw-waiting-text{font-size:15px;font-weight:700;color:var(--text-sub);text-align:center;line-height:1.7}.draw-tap-hint{font-size:11px;color:#f5c8428c;letter-spacing:.14em;text-align:center;margin-top:4px}.draw-footer{position:relative;width:100%;flex-shrink:0;z-index:6;display:flex;flex-direction:column;gap:10px;padding:10px;border:1px solid rgba(26,10,46,.12);border-radius:18px;background:#ffffffd1;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.mode-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:500;background:#0a0418b8;display:grid;place-items:center;padding:24px;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.mode-card{width:min(100%,320px);background:#ffffffeb;border:1px solid var(--border);border-radius:var(--radius);padding:24px 20px 20px;text-align:center;box-shadow:0 20px 48px #0003;animation:cardPop .28s cubic-bezier(.34,1.56,.64,1)}@keyframes cardPop{0%{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}}.mode-card-icon{font-size:36px;margin-bottom:10px}.room-code-popup-label{font-size:11px;font-weight:700;color:var(--text-sub);letter-spacing:.2em;margin-bottom:6px}.room-code-popup-value{font-size:32px;font-weight:900;color:var(--text);letter-spacing:.18em;margin-bottom:12px;padding:12px 20px;background:#1a0a2e0f;border-radius:var(--radius-sm)}.room-code-popup-desc{font-size:13px;color:var(--text-sub);line-height:1.7;margin-bottom:20px}.mode-card-text{font-size:14px;font-weight:700;color:var(--text);line-height:1.8;letter-spacing:.04em;white-space:pre-line;margin-bottom:20px}.mode-card-btn{width:100%;padding:13px;background:var(--gold);color:#1a0a2e;border:none;border-radius:24px;font-size:14px;font-weight:900;letter-spacing:.12em;cursor:pointer}.mode-card-btn:active{opacity:.85;transform:scale(.97)}.loading-screen{height:100svh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;background:var(--bg);color:var(--text-sub);font-size:13px;letter-spacing:.12em}.spinner{width:32px;height:32px;border:3px solid rgba(245,200,66,.2);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.straw-stage{justify-content:flex-start;padding:12px 0}.straw-slot{border:0;padding:0;background:transparent;color:inherit;font:inherit}.straw-slot:disabled,.card-slot:disabled{opacity:1}.straw-slot:focus-visible,.card-slot:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.straw-slot.available .straw-img-wrap{animation:none}.straw-slot.mine .straw-img-wrap{filter:none}.card-slot.available{animation:none}.straw-slot{transition-duration:.5s}.straw-img-wrap{transition:transform .45s cubic-bezier(.22,1,.36,1)}.sync-notice{position:fixed;left:50%;top:70px;transform:translate(-50%);width:min(calc(100% - 24px),406px);padding:10px 12px;border-radius:12px;z-index:40;color:#1a0a2e;background:#fff2bc;font-size:12px;line-height:1.6;box-shadow:0 3px 12px #0002}.sync-notice button{margin-left:10px;padding:5px 10px;cursor:pointer}.resume-card{border:1px solid var(--border);border-radius:16px;background:#fff9;padding:16px;margin-bottom:18px;text-align:center}.resume-card p{margin-bottom:12px;font-size:13px}.resume-card .btn+.btn{margin-top:16px}.resume-card .resume-name{color:var(--text-sub);font-size:12px}.joined-rooms-empty{padding:20px 0;text-align:center;font-size:13px}.resume-forget{display:block;margin:14px auto 0;padding:6px;background:none;border:0;text-decoration:underline;color:var(--text-sub);font:inherit;font-size:12px;cursor:pointer}@media (prefers-reduced-motion: reduce){.straw-slot,.straw-img-wrap,.role-reveal,.role-icon-img,.straw-avatar-chip{animation:none;transition:none}}