:root{--surface:#f8f9fa;--surface-container-lowest:#fff;--surface-container-low:#f3f4f5;--surface-container:#edeeef;--surface-container-high:#e7e8e9;--surface-container-highest:#e1e3e4;--on-surface:#191c1d;--on-surface-variant:#464554;--primary:#4441c4;--on-primary:#fff;--primary-container:#5d5cde;--primary-fixed:#e2dfff;--primary-fixed-dim:#c2c1ff;--secondary:#665493;--on-secondary:#fff;--secondary-container:#cdb9ff;--on-secondary-container:#584684;--outline:#777585;--outline-variant:#c7c4d6;--error:#ba1a1a;--glass-bg:#ffffffb8;--glass-border:#4441c414;--glass-shadow:0 4px 24px #4441c40f;--header-h:64px;--bottom-nav-h:72px;--card-w:92px;--card-h:138px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{background-color:var(--surface);color:var(--on-surface);-webkit-tap-highlight-color:transparent;background-image:radial-gradient(circle at 0 0,#f3f4f5 0%,#f8f9fa 55%,#e8e6ff 100%);background-attachment:fixed;min-height:100dvh;font-family:Plus Jakarta Sans,sans-serif;overflow-x:hidden}h1,h2,h3{font-family:Playfair Display,serif}.ms{letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;font-variation-settings:"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;-webkit-user-select:none;user-select:none;vertical-align:middle;direction:ltr;font-family:Material Symbols Outlined;font-size:1.5rem;font-style:normal;font-weight:400;line-height:1;display:inline-block}.ms-filled{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.orb{filter:blur(70px);z-index:0;opacity:.18;pointer-events:none;border-radius:50%;animation:22s ease-in-out infinite alternate floatOrb;position:fixed}.orb-1{background:var(--primary);width:520px;height:520px;top:-220px;left:-140px}.orb-2{background:var(--secondary);width:420px;height:420px;animation-delay:-9s;bottom:-120px;right:-120px}@keyframes floatOrb{0%{transform:translate(0)scale(1)}to{transform:translate(70px,45px)scale(1.1)}}.glass-pane{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}.btn-primary{background:var(--primary);color:var(--on-primary);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;touch-action:manipulation;border:none;border-radius:9999px;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px 32px;font-family:Plus Jakarta Sans,sans-serif;font-size:.8rem;font-weight:700;transition:background .25s,box-shadow .25s,transform .15s;display:inline-flex;box-shadow:0 4px 18px #4441c447}.btn-primary:hover{background:var(--primary-container);box-shadow:0 6px 22px #4441c461}.btn-primary:active{transform:scale(.96)}.btn-primary:disabled{opacity:.32;cursor:not-allowed;box-shadow:none;transform:none}.btn-primary .ms{font-size:1.1rem}.input-field{border:1px solid var(--outline-variant);color:var(--on-surface);-webkit-appearance:none;background:#ffffffa6;border-radius:12px;outline:none;width:100%;padding:14px 16px;font-family:Plus Jakarta Sans,sans-serif;font-size:1rem;transition:border-color .25s,box-shadow .25s}.input-field:focus{border-color:var(--primary);box-shadow:0 0 0 3px #4441c41a}.input-field::placeholder{color:var(--on-surface-variant);opacity:.55}.input-field-error{border-color:var(--error)!important;box-shadow:0 0 0 3px #ba1a1a1a!important}.input-clue{color:var(--on-surface);resize:none;text-align:center;background:0 0;border:none;border-bottom:2px solid #4441c433;outline:none;width:100%;min-height:48px;padding:12px 4px;font-family:Playfair Display,serif;font-size:1.25rem;font-style:italic;transition:border-bottom-color .25s;overflow:hidden}.input-clue:focus{border-bottom-color:var(--primary)}.input-clue::placeholder{color:var(--on-surface-variant);opacity:.4}#root{z-index:1;position:relative}.app-header{z-index:50;height:var(--header-h);-webkit-backdrop-filter:blur(20px);background:#f8f9fad1;border-bottom:1px solid #c7c4d659;justify-content:space-between;align-items:center;padding:0 20px;display:flex;position:fixed;top:0;left:0;right:0;box-shadow:0 1px 8px #0000000a}.header-logo{color:var(--primary);letter-spacing:-.015em;font-family:Playfair Display,serif;font-size:1.75rem;font-weight:700;line-height:1}.header-icon-btn{cursor:pointer;color:var(--primary);background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;transition:background .2s,transform .15s;display:flex}.header-icon-btn:hover{background:#4441c414}.header-icon-btn:active{transform:scale(.92)}.header-icon-btn .ms{font-size:1.6rem}.header-phase-badge{color:var(--primary);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;background:#4441c414;border:1px solid #4441c42e;border-radius:9999px;padding:4px 12px;font-size:.6rem;font-weight:700}.bottom-nav{z-index:50;height:var(--bottom-nav-h);-webkit-backdrop-filter:blur(20px);background:#f8f9faeb;border-top:1px solid #c7c4d659;justify-content:space-around;align-items:center;padding:0 4px;display:flex;position:fixed;bottom:0;left:0;right:0}.nav-item{cursor:pointer;color:#46455480;letter-spacing:.05em;text-transform:uppercase;background:0 0;border:none;border-radius:12px;flex-direction:column;align-items:center;gap:2px;padding:8px 14px;font-family:Plus Jakarta Sans,sans-serif;font-size:.58rem;font-weight:700;transition:color .2s;display:flex}.nav-item.active{color:var(--primary);background:#4441c412}.nav-item .ms{font-size:1.45rem}.drawer-overlay{z-index:60;-webkit-backdrop-filter:blur(4px);background:#191c1d40;position:fixed;inset:0}.drawer{z-index:61;-webkit-backdrop-filter:blur(30px);border-right:1px solid var(--outline-variant);background:#f3f4f5f7;flex-direction:column;gap:2px;width:290px;padding:80px 12px 32px;display:flex;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;box-shadow:6px 0 32px #00000014}.drawer-item{cursor:pointer;color:var(--on-surface);text-align:left;background:0 0;border:none;border-radius:12px;align-items:center;gap:14px;width:100%;padding:13px 16px;font-family:Plus Jakarta Sans,sans-serif;font-size:.95rem;font-weight:500;transition:background .2s,padding-left .25s;display:flex}.drawer-item:hover{background:#0000000a;padding-left:22px}.drawer-item.danger{color:var(--error)}.drawer-item.danger:hover{background:#ba1a1a0d}.drawer-item .ms{color:inherit;font-size:1.3rem}.page-content{padding-top:var(--header-h);padding-bottom:var(--bottom-nav-h);z-index:1;min-height:100dvh;position:relative}.lobby-join{min-height:calc(100dvh - var(--header-h));flex-direction:column;justify-content:center;align-items:center;padding:24px 20px 40px;display:flex}.lobby-join-card{border-radius:24px;flex-direction:column;gap:14px;width:100%;max-width:400px;padding:36px 28px;display:flex}.lobby-join-title{color:var(--on-surface);text-align:center;margin-bottom:4px;font-family:Playfair Display,serif;font-size:1.5rem;font-weight:700}.lobby-join-sub{color:var(--on-surface-variant);text-align:center;margin-bottom:6px;font-size:.875rem;line-height:1.5}.game-board{padding:16px 20px;padding-bottom:calc(var(--bottom-nav-h) + 8px);min-height:calc(100dvh - var(--header-h));flex-direction:column;gap:0;display:flex}.phase-pill{justify-content:center;margin-bottom:18px;display:flex}.phase-pill-inner{color:var(--primary);letter-spacing:.1em;text-transform:uppercase;background:#4441c40f;border:1px solid #4441c42e;border-radius:9999px;align-items:center;gap:8px;padding:6px 18px;font-size:.62rem;font-weight:700;display:inline-flex}.phase-dot{background:var(--secondary);border-radius:50%;width:6px;height:6px;animation:2s infinite pulseDot}@keyframes pulseDot{0%,to{opacity:1}50%{opacity:.35}}.scoreboard-strip{border-radius:14px;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:14px;padding:10px 14px;display:flex}.player-chip{color:var(--on-surface);background:#edeeefe6;border:1px solid #c7c4d680;border-radius:9999px;align-items:center;gap:5px;padding:4px 10px;font-size:.75rem;font-weight:600;display:inline-flex}.player-chip.narrator{color:var(--primary);background:#4441c414;border-color:#4441c433}.chip-score{color:var(--primary);font-weight:700}.lobby-hero{text-align:center;margin-bottom:20px}.lobby-hero h2{color:var(--on-surface);margin-bottom:6px;font-size:1.5rem;font-weight:600}.lobby-hero p{color:var(--on-surface-variant);font-size:.875rem;line-height:1.5}.player-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px;display:grid}.player-card{border-radius:16px;align-items:center;gap:10px;padding:14px;transition:box-shadow .3s;display:flex}.player-card:hover{box-shadow:0 6px 20px #4441c41a}.player-avatar{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;display:flex;position:relative}.player-avatar .ms{font-size:1.6rem}.host-badge{background:var(--secondary);color:var(--on-secondary);white-space:nowrap;letter-spacing:.03em;border-radius:9999px;padding:2px 5px;font-size:.48rem;font-weight:700;position:absolute;top:-4px;right:-4px}.player-info-name{color:var(--on-surface);font-size:.875rem;font-weight:700}.player-info-sub{color:var(--on-surface-variant);font-size:.72rem}.empty-slot{color:#46455466;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border:2px dashed #c7c4d680;border-radius:16px;justify-content:center;align-items:center;gap:6px;padding:14px;font-size:.65rem;font-weight:700;transition:border-color .2s,color .2s;display:flex}.empty-slot:hover{color:#464554b3;border-color:#c7c4d6cc}.empty-slot .ms{font-size:1.1rem}.room-info-card{border-radius:20px;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px;padding:20px 16px;display:grid}.room-info-item{text-align:center;flex-direction:column;align-items:center;display:flex}.room-info-item .ms{color:var(--primary);margin-bottom:6px;font-size:1.8rem}.room-info-label{letter-spacing:.08em;text-transform:uppercase;color:var(--on-surface-variant);margin-bottom:4px;font-size:.58rem;font-weight:700}.room-info-value{color:var(--primary);font-family:Playfair Display,serif;font-size:1.15rem;font-weight:600}.room-info-divider{border-left:1px solid #c7c4d666}.phase-glass{text-align:center;border-radius:20px;width:100%;margin-bottom:14px;padding:20px}.phase-glass h2{margin-bottom:8px;font-size:1.2rem;font-weight:600}.phase-glass p{color:var(--on-surface-variant);font-size:.875rem;line-height:1.5}.clue-display{color:var(--primary);font-family:Playfair Display,serif;font-size:1.3rem;font-style:italic;font-weight:600}.card-carousel-wrap{width:100%;margin-bottom:14px;position:relative;overflow:hidden}.card-carousel-wrap:before,.card-carousel-wrap:after{content:"";z-index:5;pointer-events:none;width:28px;position:absolute;top:0;bottom:0}.card-carousel-wrap:before{background:linear-gradient(to right, var(--surface), transparent);left:0}.card-carousel-wrap:after{background:linear-gradient(to left, var(--surface), transparent);right:0}.card-carousel{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:12px;padding:16px 24px 20px;display:flex;overflow-x:auto}.card-carousel::-webkit-scrollbar{display:none}.carousel-slot{scroll-snap-align:center;flex-shrink:0}.hand-panel{bottom:var(--bottom-nav-h);z-index:35;-webkit-backdrop-filter:blur(20px);background:#f8f9fae0;border-top:1px solid #c7c4d659;justify-content:center;align-items:flex-end;height:158px;padding-bottom:10px;display:flex;position:fixed;left:0;right:0;overflow:visible;box-shadow:0 -8px 32px #0000000d}.hand-fan{justify-content:center;align-items:flex-end;padding:0 12px;display:flex;overflow:visible}.hand-fan>*+*{margin-left:-44px}@media (width>=480px){.hand-fan>*+*{margin-left:-30px}}@media (width>=768px){.hand-fan>*+*{margin-left:6px}}.fab-area{bottom:calc(var(--bottom-nav-h) + 162px);z-index:36;pointer-events:none;justify-content:center;padding:0 20px;display:flex;position:fixed;left:0;right:0}.fab-area .btn-primary{pointer-events:all;width:auto;min-width:220px}.fab-area.no-hand{bottom:calc(var(--bottom-nav-h) + 16px)}.dixit-card{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:2px solid #0000;border-radius:12px;flex-shrink:0;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,outline .2s;position:relative;overflow:hidden;box-shadow:0 4px 16px #00000021}.dixit-card img{object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none;draggable:false;width:100%;height:100%;display:block}.dixit-card.card-sm{width:var(--card-w);height:var(--card-h)}.dixit-card.card-lg{width:160px;height:240px}.dixit-card:active{transform:scale(.94)!important}.dixit-card.selected{border-color:var(--primary);outline-offset:2px;outline:3px solid #4441c440;box-shadow:0 12px 32px #4441c452}.dixit-card.disabled{filter:grayscale(55%)brightness(.8);cursor:default}.dixit-card.disabled:active{transform:none!important}.card-num-badge{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);width:26px;height:26px;color:var(--on-surface);background:#edeeefbf;border:1px solid #c7c4d673;border-radius:50%;justify-content:center;align-items:center;font-size:.7rem;font-weight:700;display:flex;position:absolute;bottom:8px;left:8px}.drop-zone-wrap{flex:1;justify-content:center;align-items:center;min-height:200px;margin-bottom:14px;display:flex}.drop-zone{background:#4441c40a;border:2px dashed #4441c440;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:10px;width:140px;height:210px;transition:border-color .3s,background .3s;display:flex;position:relative;overflow:hidden}.drop-zone.has-card{border:none;padding:0}.drop-zone.has-card .dixit-card{border-radius:14px;width:100%;height:100%}.drop-zone-hint{color:#4441c480;text-align:center;padding:0 12px;font-size:.75rem;font-weight:600}.drop-zone-hint .ms{margin-bottom:4px;font-size:2rem;display:block}.status-ok{color:var(--primary);background:#4441c412;border:1px solid #4441c42e;border-radius:9999px;align-items:center;gap:6px;padding:6px 14px;font-size:.8rem;font-weight:600;display:inline-flex}.voter-chips{flex-direction:column;align-items:center;gap:3px;margin-top:6px;display:flex}.voter-chip{color:var(--primary-container);white-space:nowrap;background:#5d5cde1a;border:1px solid #5d5cde38;border-radius:9999px;padding:2px 10px;font-size:.68rem;font-weight:600}.score-panel{border-radius:22px;width:100%;margin-bottom:20px;padding:22px}.score-panel-title{color:var(--primary);text-align:center;margin-bottom:4px;font-size:1.4rem;font-weight:700}.score-card-center{justify-content:center;margin:12px 0;display:flex}.score-rows{flex-direction:column;gap:14px;margin-top:14px;display:flex}.score-row-header{justify-content:space-between;margin-bottom:5px;font-size:.875rem;font-weight:600;display:flex}.score-pts{color:#16a34a}.progress-bg{background:#c7c4d64d;border-radius:9999px;width:100%;height:8px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--primary), var(--secondary));border-radius:9999px;height:100%;transition:width 1s ease-in-out}.end-panel{text-align:center;border-radius:22px;width:100%;padding:28px 22px}.end-panel h2{color:var(--primary);margin-bottom:6px;font-size:1.8rem;font-weight:700}.end-panel h3{color:var(--on-surface-variant);margin-bottom:20px;font-size:1rem}.info-note{color:var(--on-surface-variant);background:#4441c40d;border:1px solid #4441c41f;border-radius:12px;align-items:center;gap:8px;padding:10px 14px;font-size:.8rem;line-height:1.4;display:flex}.info-note .ms{color:var(--primary);flex-shrink:0;font-size:1.15rem}.score-sheet{z-index:55;-webkit-backdrop-filter:blur(4px);background:#191c1d4d;align-items:flex-end;display:flex;position:fixed;inset:0}.score-sheet-inner{-webkit-backdrop-filter:blur(30px);border-top:1px solid var(--outline-variant);width:100%;padding:24px 20px calc(var(--bottom-nav-h) + 20px);background:#f3f4f5f7;border-radius:24px 24px 0 0;flex-direction:column;gap:16px;max-height:72vh;display:flex;overflow-y:auto}.score-sheet-title{color:var(--primary);text-align:center;font-family:Playfair Display,serif;font-size:1.3rem;font-weight:700}@media (width>=480px){:root{--card-w:100px;--card-h:150px}.player-grid{grid-template-columns:repeat(3,1fr)}.dixit-card.card-lg{width:170px;height:255px}.drop-zone{width:155px;height:232px}}@media (width>=768px){:root{--card-w:112px;--card-h:168px}.dixit-card.card-lg{width:190px;height:285px}.hand-panel{height:184px}.fab-area{bottom:calc(var(--bottom-nav-h) + 188px)}.game-board{padding:20px 32px}.drop-zone{width:170px;height:255px}}
