* { margin:0; padding:0; box-sizing:border-box; }
body { background:#1a1a2e; overflow:hidden; font-family:'Segoe UI',sans-serif; user-select:none; }

/* ゲームエリア */
#gameArea { position:relative; margin:0 auto; overflow:hidden; }
#gameCanvas { display:block; }

.piece-img {
    position:absolute; pointer-events:none; z-index:5;
    background:transparent;
    border:none; border-radius:0; padding:0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    object-fit:contain; transform-origin:center center;
}
.piece-img.perfect { box-shadow:0 0 20px rgba(255,221,0,0.8); border-color:#ffdd00; }

/* UI */
#ui { position:absolute; top:8px; left:50%; transform:translateX(-50%); display:flex; gap:15px; z-index:10; }
.score-box { background:rgba(0,0,0,0.7); border:2px solid #00b4d8; border-radius:8px; padding:5px 14px; color:#fff; font-size:13px; text-shadow:0 0 10px #00b4d8; white-space:nowrap; }
.score-box span { font-size:20px; font-weight:bold; color:#00b4d8; }

#nextPreview { position:absolute; top:50px; right:8px; background:rgba(0,0,0,0.7); border:2px solid #e0aaff; border-radius:10px; padding:6px; text-align:center; z-index:10; }
#nextPreview .label { color:#e0aaff; font-size:12px; margin-bottom:3px; }
#nextPreview img { width:60px; height:60px; object-fit:contain; border-radius:4px; background:#fff; }
#nextPreview .name { color:#ccc; font-size:9px; margin-top:2px; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 対戦相手ミニビュー */
#opponentView { position:absolute; top:50px; left:8px; background:rgba(0,0,0,0.6); border:2px solid #ff6b6b; border-radius:10px; padding:6px; z-index:10; display:none; }
#opponentView .label { color:#ff6b6b; font-size:11px; text-align:center; margin-bottom:3px; }
#opponentView .stats { color:#ccc; font-size:11px; }
#opponentCanvas { border-radius:5px; border:1px solid #444; }

/* メニュー・ダイアログ */
.overlay { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; z-index:100; background:rgba(0,0,0,0.3); }
.dialog { background:rgba(10,10,30,0.95); border:3px solid #00b4d8; border-radius:20px; padding:30px; text-align:center; max-width:400px; }
.dialog h1 { color:#00b4d8; font-size:36px; text-shadow:0 0 30px rgba(0,180,216,0.5); margin-bottom:6px; line-height:1.2; }
.dialog .subtitle { color:#e0aaff; font-size:15px; margin-bottom:20px; }
.dialog.gameover { border-color:#ff6b6b; }
.dialog.gameover h1 { color:#ff6b6b; }
.dialog.win { border-color:#00e676; }
.dialog.win h1 { color:#00e676; }

.btn {
    display:inline-block; background:linear-gradient(135deg,#00b4d8,#0077b6);
    border:none; color:#fff; padding:12px 30px; font-size:18px;
    border-radius:10px; cursor:pointer; margin:5px; transition:transform 0.2s;
}
.btn:hover { transform:scale(1.06); }
.btn.secondary { background:linear-gradient(135deg,#e0aaff,#9b59b6); }
.btn.danger { background:linear-gradient(135deg,#ff6b6b,#c0392b); }
.btn.small { padding:8px 20px; font-size:14px; }
.btn-pulse { animation: pulse 2s infinite; }
@keyframes pulse {
    0%,100% { transform:scale(1); box-shadow:0 0 20px rgba(0,180,216,0.3); }
    50% { transform:scale(1.04); box-shadow:0 0 40px rgba(0,180,216,0.6); }
}

input[type="text"] {
    background:rgba(255,255,255,0.1); border:2px solid #00b4d8; border-radius:8px;
    color:#fff; padding:10px 16px; font-size:20px; text-align:center;
    letter-spacing:8px; width:150px; outline:none;
    text-transform:uppercase;
}
input[type="text"]::placeholder { color:rgba(255,255,255,0.3); letter-spacing:4px; font-size:14px; }
input[type="text"]:focus { border-color:#e0aaff; box-shadow:0 0 15px rgba(224,170,255,0.3); }

.score-info { color:#fff; font-size:18px; margin:4px 0; }
.score-info.height { color:#00b4d8; }

/* ランキング */
.ranking { text-align:left; margin:15px 0; max-height:200px; overflow-y:auto; }
.ranking table { width:100%; border-collapse:collapse; }
.ranking th { color:#e0aaff; font-size:12px; padding:3px 8px; border-bottom:1px solid #333; }
.ranking td { color:#ccc; font-size:12px; padding:3px 8px; border-bottom:1px solid #222; }
.ranking td:nth-child(2) { color:#00b4d8; font-weight:bold; }
.ranking tr.you td { color:#ffdd00; }

/* ルームID */
.room-id { font-size:36px; color:#00b4d8; letter-spacing:10px; font-weight:bold; margin:15px 0; text-shadow:0 0 20px rgba(0,180,216,0.5); }
.waiting { color:#e0aaff; animation: blink 1.5s infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.4;} }