/* ニコニコサムネパズル */
body { margin: 0; font-family: 'Noto Sans JP', sans-serif; background: #1a1a2e; color: #fff; }
#root { min-height: 100vh; display: flex; flex-direction: column; align-items: center; }

.puzzle-header { text-align: center; padding: 12px 16px 8px; }
.puzzle-header h1 { font-size: 1.2rem; margin: 0 0 4px; font-weight: 700; }
.puzzle-header .sub { font-size: 0.8rem; color: #aaa; }

/* 候補選択 */
.candidate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 12px 16px; max-width: 720px; width: 100%; }
.candidate-card { background: #16213e; border-radius: 8px; overflow: hidden; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; border: 2px solid transparent; }
.candidate-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255,255,255,0.08); border-color: #556; }
.candidate-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.candidate-card .info { padding: 8px; }
.candidate-card .info .title { font-size: 0.75rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.candidate-card .info .uploader { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.candidate-card .info .uploader-icon { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.candidate-card .info .uploader-name { font-size: 0.65rem; color: #8899aa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* リスト更新ボタン */
.select-footer { text-align: center; padding: 16px 16px 8px; }

/* 動画ID指定 */
.custom-id-section { max-width: 480px; margin: 0 auto; padding: 0 16px 24px; }
.custom-id-label { font-size: 0.8rem; color: #8899aa; margin-bottom: 8px; text-align: center; }
.custom-id-row { display: flex; gap: 8px; }
.custom-id-input { flex: 1; padding: 10px 14px; border-radius: 8px; border: 1px solid #445; background: #16213e; color: #fff; font-size: 0.9rem; font-family: inherit; outline: none; transition: border-color 0.2s; }
.custom-id-input:focus { border-color: #0066cc; }
.custom-id-input::placeholder { color: #556; }
.custom-id-btn { white-space: nowrap; padding: 10px 20px; }

/* プレビュー */
.preview-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
.preview-wrap img { max-width: min(92vw, 720px); max-height: 70vh; border-radius: 8px; }
.preview-countdown { font-size: 4rem; font-weight: 900; margin-top: 16px; color: #ffd700; }

/* ゲーム画面 */
.game-area { display: flex; flex-direction: column; align-items: center; padding: 8px 16px; width: 100%; }
.game-timer { font-size: 2rem; font-weight: 900; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.game-timer.warning { color: #ff4444; }
.game-moves { font-size: 0.85rem; color: #aaa; margin-bottom: 8px; }

/* パズル枠 */
.puzzle-frame { padding: 4px; background: linear-gradient(135deg, #ffd700, #b8860b); border-radius: 6px; margin: 0 auto; }
.puzzle-board { position: relative; border-radius: 2px; overflow: hidden; touch-action: none; background: #2a2a4a; }
.puzzle-tile { position: absolute; cursor: pointer; transition: left 0.15s ease-out, top 0.15s ease-out; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.08); background-size: cover; background-repeat: no-repeat; will-change: left, top; }
.puzzle-tile.empty { opacity: 0; cursor: default; }
.puzzle-tile.movable { cursor: pointer; z-index: 1; border: 2px solid rgba(0,220,255,0.7); }

/* 移動方向矢印 */
.tile-arrow { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.8em; color: #00e5ff; pointer-events: none; text-shadow: 0 0 8px rgba(0,229,255,0.6); filter: drop-shadow(0 0 4px rgba(0,229,255,0.4)); }
.puzzle-tile.last-tile-fill { opacity: 0; animation: tile-fill-in 0.5s ease-out forwards; }
@keyframes tile-fill-in { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }

/* 右下ピースヒント */
.last-piece-hint { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 8px 12px; background: rgba(255,255,255,0.05); border-radius: 8px; }
.last-piece-label { font-size: 0.75rem; color: #aaa; }
.last-piece-img { flex-shrink: 0; background-repeat: no-repeat; }

/* 操作説明 */
.game-help { margin-top: 16px; padding: 12px 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; max-width: 720px; }
.game-help-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 4px; color: #ddd; }
.game-help-text { font-size: 0.78rem; color: #999; line-height: 1.6; }

/* シャッフル演出 */
.shuffle-label { font-size: 1.2rem; font-weight: 700; color: #ffd700; min-height: 2em; margin-bottom: 8px; text-align: center; }

/* 完成形プレビュー */
.game-answer { margin-top: 16px; text-align: center; }
.game-answer-label { font-size: 0.8rem; color: #888; margin-bottom: 6px; }
.game-answer-img { max-width: min(60vw, 360px); border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); }

/* 結果画面 */
.result-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; }
.result-wrap h2 { font-size: 1.8rem; margin: 0 0 12px; }
.result-wrap .score { font-size: 3rem; font-weight: 900; color: #ffd700; margin-bottom: 8px; }
.result-wrap .detail { font-size: 0.9rem; color: #aaa; margin-bottom: 24px; }
.result-image { margin-bottom: 20px; text-align: center; max-width: 90vw; }
.result-image img { display: block; margin: 0 auto; }
.result-video-title { font-size: 0.85rem; color: #ccc; margin-top: 10px; line-height: 1.4; max-width: min(90vw, 480px); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.result-uploader { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.result-uploader-icon { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.result-uploader span { font-size: 0.75rem; color: #999; white-space: nowrap; }
.result-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ボタン */
.btn { display: inline-block; padding: 12px 24px; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: opacity 0.2s; font-family: inherit; }
.btn:hover { opacity: 0.85; }
.btn-primary { background: #0066cc; color: #fff; }
.btn-x { background: #1d2d44; color: #fff; border: 1px solid #3a5a7c; }
.btn-outline { background: rgba(255,255,255,0.08); color: #ccc; border: 1px solid #556; }

/* ローディング */
.loading-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; }
.loading-wrap .spinner { width: 40px; height: 40px; border: 3px solid #334; border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* レスポンシブ */
@media (max-width: 480px) {
  .candidate-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 8px; }
  .game-timer { font-size: 1.5rem; }
}