.room-notification-toast{transition:opacity .4s ease-out,transform .4s ease-out;opacity:1;transform:translateY(0)}.room-notification-toast.toast-fade-out{opacity:0!important;transform:translateY(-10px)!important}.jp-cards-container{max-width:1100px;margin:0 auto;padding:2rem 1rem;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}.dropdown-item-btn{width:100%;text-align:left;background:none;border:none;color:#e5e7eb;padding:.6rem 1rem;font-size:.88rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:background .15s ease}.dropdown-item-btn:hover{background:#10b98126;color:#10b981}.dropdown-item-btn.text-danger:hover{background:#ef444426;color:#ef4444}.jp-header{text-align:center;margin-bottom:2rem}.jp-title{font-size:clamp(1.5rem,5vw,2.2rem);font-weight:800;background:linear-gradient(135deg,#10b981,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem}.jp-subtitle{color:var(--text-secondary, #9ca3af);font-size:clamp(.85rem,2.5vw,1rem);margin-bottom:1.5rem}.jp-tabs{display:flex;justify-content:center;gap:.75rem;margin-top:1rem;flex-wrap:wrap}.jp-tab{background:var(--bg-secondary, rgba(255, 255, 255, .05));border:1px solid var(--border-color, rgba(255, 255, 255, .1));color:var(--text-primary, #f3f4f6);padding:.6rem 1.25rem;border-radius:9999px;font-weight:600;cursor:pointer;transition:all .2s ease}.jp-tab:hover,.jp-tab.active{background:var(--accent, #10b981);color:#fff;border-color:var(--accent, #10b981);box-shadow:0 4px 14px #10b9814d}.jp-section{display:block}.jp-section.hidden{display:none!important}.deck-controls-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.category-filters{display:flex;gap:.5rem;flex-wrap:wrap}.cat-btn{background:none;border:1px solid var(--border-color, rgba(255, 255, 255, .15));color:var(--text-secondary, #9ca3af);padding:.4rem .9rem;border-radius:8px;font-size:.85rem;cursor:pointer}.cat-btn.active{background:#10b98126;color:var(--accent, #10b981);border-color:var(--accent, #10b981)}.decks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:1.25rem}.deck-card-item{background:var(--card-bg, rgba(255, 255, 255, .03));border:1px solid var(--border-color, rgba(255, 255, 255, .1));border-radius:12px;padding:1.25rem;transition:all .2s ease;display:flex;flex-direction:column;justify-content:space-between}.deck-card-item:hover{transform:translateY(-3px);border-color:var(--accent, #10b981);box-shadow:0 8px 24px #0000004d}.deck-card-category{font-size:.75rem;font-weight:700;text-transform:uppercase;color:var(--accent, #10b981);margin-bottom:.3rem}.deck-card-title{font-size:1.2rem;font-weight:700;margin-bottom:.4rem;color:var(--text-primary, #ffffff)}.deck-card-desc{font-size:.85rem;color:var(--text-secondary, #9ca3af);margin-bottom:1rem;line-height:1.4}.deck-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.05)}.deck-count-badge{font-size:.8rem;color:var(--text-muted, #6b7280);background:#ffffff0d;padding:.2rem .6rem;border-radius:6px}.modal-overlay{position:fixed;inset:0;background:#000000bf;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.modal-card{background:#111827;border:1px solid rgba(255,255,255,.15);border-radius:16px;width:100%;max-width:500px;padding:1.5rem;box-shadow:0 20px 40px #00000080;max-height:90vh;overflow-y:auto}.modal-large{max-width:800px}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}.close-btn{background:none;border:none;color:#9ca3af;font-size:1.25rem;cursor:pointer}.flashcard-wrapper{perspective:1000px;margin:1.5rem 0}.flashcard{width:100%;min-height:240px;position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:16px}.flashcard.flipped{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid var(--accent, #10b981);box-shadow:0 10px 30px #0006;text-align:center;box-sizing:border-box}.card-front{background:linear-gradient(135deg,#1f2937,#111827);color:#fff}.card-back{background:linear-gradient(135deg,#064e3b,#111827);color:#fff;transform:rotateY(180deg)}.card-side-badge{position:absolute;top:.75rem;left:.75rem;font-size:.75rem;background:#ffffff1a;padding:.25rem .6rem;border-radius:6px}.card-jp-text{font-size:clamp(1.8rem,7vw,2.8rem);font-weight:800;margin-bottom:.5rem;font-family:Hiragino Sans,Yu Gothic,sans-serif;word-break:break-word;overflow-wrap:anywhere;max-width:100%}.card-furigana{font-size:clamp(.95rem,3.5vw,1.2rem);color:var(--accent-light, #6ee7b7);margin-bottom:.5rem;word-break:break-word}.card-meaning{font-size:clamp(1.2rem,5vw,1.6rem);font-weight:700;margin-bottom:.5rem;word-break:break-word;overflow-wrap:anywhere}.card-note{font-size:.9rem;color:var(--text-secondary, #9ca3af);font-style:italic;word-break:break-word}.card-hint-text{position:absolute;bottom:.8rem;font-size:.75rem;color:var(--text-secondary, #9ca3af);padding:0 .5rem;text-align:center}.card-nav-controls{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.card-counter{font-weight:600;color:var(--text-secondary, #9ca3af)}.btn{padding:.55rem 1.2rem;border-radius:8px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease;display:inline-flex;align-items:center;gap:.4rem}.btn-accent{background:var(--accent, #10b981);color:#fff}.btn-accent:hover{opacity:.9;transform:translateY(-1px)}.btn-secondary{background:#ffffff1a;color:#fff}.btn-secondary:hover{background:#ffffff26}.btn-danger{background:#ef4444;color:#fff}.btn-danger:hover{opacity:.9}.btn-success{background:#10b981;color:#fff}.btn-outline{background:transparent;border:1px solid var(--border-color, rgba(255,255,255,.2));color:#fff}.btn-sm{padding:.35rem .75rem;font-size:.8rem}.btn-lg{padding:.8rem 1.5rem;font-size:1.1rem}.btn-full{width:100%;justify-content:center}.form-stack{display:flex;flex-direction:column;gap:1rem}.form-group{display:flex;flex-direction:column;gap:.4rem;text-align:left}.form-group label{font-size:.85rem;font-weight:600;color:var(--text-secondary, #9ca3af)}.form-input,.form-select{background:#0006;border:1px solid rgba(255,255,255,.15);color:#fff;padding:.6rem .8rem;border-radius:8px;font-size:.95rem;outline:none;max-width:100%;box-sizing:border-box}.form-input:focus,.form-select:focus{border-color:var(--accent, #10b981)}.timer-custom-wrap{display:flex;flex-direction:column;gap:.5rem}.timer-presets{display:flex;gap:.4rem;flex-wrap:wrap}.preset-btn{background:#ffffff14;border:1px solid rgba(255,255,255,.15);color:var(--text-secondary, #9ca3af);padding:.25rem .6rem;border-radius:6px;font-size:.8rem;cursor:pointer;transition:all .2s ease}.preset-btn:hover{background:#10b98133;color:var(--accent, #10b981);border-color:var(--accent, #10b981)}.cards-table-container{margin-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);padding-top:1rem;overflow-x:auto;-webkit-overflow-scrolling:touch}.cards-table{width:100%;border-collapse:collapse;margin-top:.75rem;font-size:.85rem;min-width:480px}.cards-table th,.cards-table td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid rgba(255,255,255,.05)}.cards-table th{color:var(--text-secondary, #9ca3af)}.stats-header{margin-bottom:2rem;text-align:center}.deck-selector-wrap{margin-top:1rem;display:inline-flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-content:center}.stats-summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:1rem;margin-bottom:2rem}.stat-card{background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:1.25rem;text-align:center}.stat-card.success{border-color:#10b9814d}.stat-card.warning{border-color:#ef44444d}.stat-num{display:block;font-size:2rem;font-weight:800;color:var(--accent, #10b981)}.stat-label{font-size:.85rem;color:var(--text-secondary, #9ca3af)}.stats-tables-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}@media(max-width:768px){.stats-tables-grid{grid-template-columns:1fr}}.stats-box{background:#ffffff05;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:1.25rem}.box-title{font-size:1.1rem;font-weight:700;margin-bottom:1rem}.text-success{color:#10b981}.text-danger{color:#ef4444}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}.data-table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:320px}.data-table th,.data-table td{padding:.5rem .75rem;text-align:left;border-bottom:1px solid rgba(255,255,255,.05)}.zoom-banner{background:linear-gradient(135deg,#06b6d426,#10b98126);border:1px solid rgba(6,182,212,.3);border-radius:12px;padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem;margin-bottom:2rem}.zoom-icon{font-size:2rem}.zoom-content h4{margin:0 0 .2rem;color:#38bdf8;font-size:1rem}.zoom-content p{margin:0;font-size:.85rem;color:#cbd5e1}.game-lobby{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}@media(max-width:768px){.game-lobby{grid-template-columns:1fr}}.lobby-card{background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:1.5rem}.lobby-card h3{margin-bottom:1.25rem;font-size:1.2rem}.game-room-panel{background:#ffffff05;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:1.5rem}.room-top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.08)}.room-info,.room-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.room-badge{background:var(--accent, #10b981);color:#fff;font-weight:800;padding:.3rem .8rem;border-radius:8px;letter-spacing:1px}.role-badge{font-weight:700;color:#38bdf8;background:#38bdf826;padding:.4rem 1rem;border-radius:9999px}.room-state-box{text-align:center;padding:3rem 1rem}#btn-start-game-now{display:block;margin:0 auto 1.75rem;width:100%;max-width:380px;padding:1.1rem 2rem;font-size:1.25rem;font-weight:700;letter-spacing:.02em;border-radius:14px;box-shadow:0 4px 20px #06b6d459;transition:all .2s ease-in-out}#btn-start-game-now:not(:disabled){animation:pulse-start-btn 2s infinite ease-in-out}@keyframes pulse-start-btn{0%,to{transform:scale(1);box-shadow:0 4px 20px #06b6d459}50%{transform:scale(1.03);box-shadow:0 6px 28px #06b6d499}}.players-status{display:flex;justify-content:center;gap:1.5rem;margin:2rem 0;flex-wrap:wrap}.player-slot{background:#ffffff0d;padding:.8rem 1.5rem;border-radius:12px;border:1px solid rgba(255,255,255,.1)}.player-slot.active{border-color:#10b981;color:#10b981}.game-header-banner{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.timer-box{display:flex;align-items:center;gap:.75rem}.timer-circle{width:50px;height:50px;border-radius:50%;background:#ef444426;border:2px solid #ef4444;color:#ef4444;font-size:1.3rem;font-weight:800;display:flex;align-items:center;justify-content:center}.role-view-box{margin-top:1rem}.examinee-card-container{background:linear-gradient(135deg,#111827,#1f2937);border:2px solid #10b981;border-radius:20px;padding:2.5rem 1.5rem;text-align:center;box-shadow:0 10px 30px #00000080;min-height:240px;display:flex;flex-direction:column;justify-content:center;align-items:center;box-sizing:border-box}.examinee-card-front{font-size:clamp(2rem,8vw,3.5rem);font-weight:800;color:#fff;font-family:Hiragino Sans,Yu Gothic,sans-serif;word-break:break-word;overflow-wrap:anywhere;max-width:100%}.examinee-tip{text-align:center;margin-top:1.5rem;color:#9ca3af;font-size:.9rem}.examiner-layout{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem}@media(max-width:768px){.examiner-layout{grid-template-columns:1fr}}.full-card-display{background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:1.5rem;margin-bottom:1.5rem}.badge-tag{font-size:.75rem;color:var(--accent, #10b981);text-transform:uppercase;font-weight:700}.front-section h2{font-size:clamp(1.6rem,6vw,2.5rem);margin:.5rem 0 1.5rem;word-break:break-word;overflow-wrap:anywhere}.back-section{border-top:1px solid rgba(255,255,255,.08);padding-top:1rem}.furigana{font-size:1.1rem;color:#6ee7b7;margin-bottom:.4rem;word-break:break-word}.meaning{font-size:1.4rem;font-weight:700;margin-bottom:.4rem;word-break:break-word}.note{font-size:.9rem;color:#9ca3af;font-style:italic;word-break:break-word}.scoring-controls{text-align:center}.scoring-label{display:block;margin-bottom:.75rem;font-weight:600;color:#9ca3af}.scoring-buttons{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}.scoring-buttons .btn{flex:1 1 120px;justify-content:center}.palette-grid{display:flex;flex-direction:column;gap:.75rem;max-height:420px;overflow-y:auto;margin-top:.75rem;padding:.25rem}.palette-chip{background:#1e293b;border:2px solid #334155;color:#f8fafc;border-radius:12px;padding:.85rem 1.1rem;font-size:.95rem;cursor:grab;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:.75rem;box-shadow:0 4px 12px #0006;transition:all .2s ease;flex-wrap:wrap}.palette-chip:hover{border-color:#10b981;background:#0f172a;box-shadow:0 4px 16px #10b9814d}.palette-chip.active{background:#0f172a;border:2px solid #10b981;box-shadow:0 0 14px #10b98166}.palette-chip.played{opacity:.45;background:#0f172a80;border-color:#1e293b}.palette-chip.next-queue{border:2px solid #10b981;background:#10b98126;box-shadow:0 0 12px #10b9814d}.status-next{background:#10b981!important;color:#fff!important}.chip-queue-num{font-size:.85rem;font-weight:800;color:#10b981;margin-right:.4rem}.palette-chip.dragging{opacity:.4;border:2px dashed #10b981;background:#10b98140}.palette-chip.drag-over{border-top:4px solid #10b981;background:#10b9814d}.drag-handle{cursor:grab;color:#10b981;margin-right:.6rem;font-size:1.2rem;font-weight:900;user-select:none;padding-right:.6rem;border-right:1px solid rgba(255,255,255,.2)}.drag-handle:active{cursor:grabbing}.palette-section-title{font-size:.75rem;color:#9ca3af;margin:.75rem 0 .25rem;text-align:center;font-weight:600}.chip-num{font-size:.75rem;color:#9ca3af;font-weight:600}.chip-jp{font-size:1.1rem;font-weight:800;font-family:Hiragino Sans,Yu Gothic,sans-serif;color:#fff;word-break:break-word}.chip-meaning{font-size:.8rem;color:#9ca3af;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip-status{font-size:.7rem;font-weight:700;padding:.15rem .4rem;border-radius:4px;background:#ffffff14}@media(max-width:640px){.jp-cards-container{padding:1.25rem .75rem}.modal-overlay{padding:.5rem}.modal-card{padding:1.15rem;max-width:95vw;border-radius:14px}.room-top-bar{flex-direction:column;align-items:stretch;gap:.75rem}.room-actions{width:100%;justify-content:space-between}.room-actions .btn{flex:1 1 auto;justify-content:center;padding:.4rem .5rem;font-size:.75rem}.zoom-banner{flex-direction:column;text-align:center;padding:.85rem 1rem}.flashcard{min-height:210px}.card-face{padding:1.25rem .85rem}.chip-meaning{max-width:80px}.p2p-scoreboard-banner{padding:.75rem .5rem!important;border-radius:12px!important}.scoreboard-scores{gap:.5rem!important}.player-score-card{min-width:100px!important;padding:.4rem .6rem!important}.player-score-card div:last-child{font-size:1.4rem!important}.p2p-card-container{padding:1.5rem 1rem!important;min-height:180px!important;border-radius:16px!important}#p2p-card-jp{font-size:clamp(1.8rem,7vw,2.5rem)!important}#p2p-meaning{font-size:1.2rem!important}.scoring-buttons{flex-direction:column!important;width:100%!important;gap:.6rem!important}.scoring-buttons .btn{width:100%!important;flex:1 1 auto!important;padding:.85rem 1rem!important;font-size:.95rem!important;font-weight:700!important;border-radius:10px!important}.room-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:.5rem!important;width:100%!important}.room-actions .btn{width:100%!important;padding:.55rem .5rem!important;font-size:.8rem!important;justify-content:center!important}.summary-actions{flex-direction:column!important;width:100%!important}.summary-actions .btn{width:100%!important}.summary-stats-grid{gap:.6rem!important}}.hidden{display:none!important}
