.perspective-1000 {
    perspective: 1000px;
}

.transform-style-3d {
    transform-style: preserve-3d;
}

.backface-hidden {
    backface-visibility: hidden;
}

.rotate-y-180 {
    transform: rotateY(180deg);
}

.flipped {
    transform: rotateY(180deg);
}

body {
    overscroll-behavior-y: none;
}

/* キーボードスタイル */
.key {
    transition: all 0.1s;
    user-select: none;
}

.key:active {
    transform: scale(0.95);
    background-color: #e0e7ff;
}

.key.pressed {
    transform: scale(0.95);
    background-color: #c7d2fe;
    border-color: #6366f1;
}

/* Shiftアクティブ時のスタイル */
.key.active {
    background-color: #818cf8;
    /* indigo-400 */
    color: white;
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

/* === 文章モード (Puzzle Blocks) === */
.puzzle-block {
    cursor: grab;
    transition: transform 0.1s, box-shadow 0.1s;
    user-select: none;
    touch-action: none;
    /* スマホでのドラッグ用 */
    position: relative;
    z-index: 10;
}

.puzzle-block:active {
    cursor: grabbing;
    transform: scale(1.05);
    z-index: 50;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 形状設定 (Pseudo-elements for knobs) */
.puzzle-shape {
    position: relative;
    background-color: white;
    border: 2px solid #6366f1;
    /* indigo-500 */
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: bold;
    color: #3730a3;
    /* indigo-900 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    height: 60px;
}

/* 始点ブロック */
.puzzle-block.start .puzzle-shape {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -2px;
    /* 重なり用 */
    border-right: none;
    padding-right: 1.5rem;
    /* 凸部スペース */
}

.puzzle-block.start .puzzle-shape::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: white;
    border-top: 2px solid #6366f1;
    border-right: 2px solid #6366f1;
    border-bottom: 2px solid #6366f1;
    /* 簡易的な凸表現 */
    border-radius: 50%;
    z-index: 1;
}

/* 終点ブロック */
.puzzle-block.end .puzzle-shape {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -2px;
    border-left: none;
    padding-left: 1.5rem;
}

.puzzle-block.end .puzzle-shape::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: white;
    /* 穴ではなく重なりで表現 */
    border: 2px solid #6366f1;
    /* 枠線 */
    border-radius: 50%;
    z-index: 1;
    /* 背景色で塗りつぶして「凹」に見せるトリックは難しいので、
       シンプルに「凸」を受ける形にするか、視覚的に繋がってるように見せる */
    background: #e0e7ff;
    /* indigo-100 (接続部っぽく) */
}

/* 中間ブロック */
.puzzle-block.middle .puzzle-shape {
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin: 0 -2px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Middle Left 凹 */
.puzzle-block.middle .puzzle-shape::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: #e0e7ff;
    border: 2px solid #6366f1;
    border-radius: 50%;
}

/* Middle Right 凸 */
.puzzle-block.middle .puzzle-shape::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: white;
    border-top: 2px solid #6366f1;
    border-right: 2px solid #6366f1;
    border-bottom: 2px solid #6366f1;
    border-radius: 50%;
    z-index: 1;
}

/* 連結・正解時のスタイル */
.puzzle-block.fused {
    cursor: default;
    pointer-events: none;
}

.puzzle-block.fused .puzzle-shape {
    background-color: #dbeafe;
    /* blue-100 */
    border-color: #3b82f6;
    /* blue-500 */
    color: #1e3a8a;
}

.puzzle-block.fused .puzzle-shape::after {
    background-color: #dbeafe;
    border-color: #3b82f6;
}

/* ドラッグ中プレースホルダー */
.drag-placeholder {
    width: 80px;
    height: 60px;
    border: 2px dashed #cbd5e1;
    border-radius: 0.5rem;
    background-color: #f1f5f9;
}