* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: 'Orbitron', -apple-system, BlinkMacSystemFont, sans-serif; background: #0a0a1a; color: #eee; }

#app { display: flex; flex-direction: column; height: 100%; width: 100%; }

/* Header */
#header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #0d1528; border-bottom: 1px solid rgba(233,69,96,0.3); }
#header h1 { font-size: 18px; letter-spacing: 4px; color: #e94560; text-shadow: 0 0 10px rgba(233,69,96,0.5), 0 0 20px rgba(233,69,96,0.3); }
#turn-indicator { font-size: 14px; font-weight: bold; padding: 4px 12px; border-radius: 12px; }
#score-btn { background: none; border: 1px solid rgba(233,69,96,0.3); color: #e94560; padding: 4px 10px; border-radius: 4px; font-size: 11px; cursor: pointer; letter-spacing: 1px; text-transform: uppercase; }

/* Stats bar */
#stats-bar { display: flex; justify-content: space-around; padding: 4px 8px; background: #0a1020; border-bottom: 1px solid rgba(233,69,96,0.2); }
.stat-item { text-align: center; font-size: 11px; line-height: 1.3; flex: 1; min-width: 0; }
.stat-item .stat-name { opacity: 0.7; }
.stat-item .stat-value { font-weight: bold; font-size: 13px; font-variant-numeric: tabular-nums; }
.stat-rank { font-size: 9px; font-weight: bold; border-radius: 3px; padding: 0 3px; line-height: 1.4; font-family: 'Orbitron', sans-serif; }
.rank-1 { color: #ffd700; background: rgba(255,215,0,0.15); }
.rank-2 { color: #c0c0c0; background: rgba(192,192,192,0.12); }
.rank-3 { color: #cd7f32; background: rgba(205,127,50,0.12); }
.rank-4 { color: #888; background: rgba(136,136,136,0.1); }
.stat-item.active { background: rgba(255,255,255,0.1); border-radius: 6px; padding: 1px 6px; }
.stat-item { cursor: pointer; border-radius: 6px; padding: 1px 6px; }
.stat-item.viewing { outline: 2px solid #fff; outline-offset: -1px; }
#viewing-label { display: none; text-align: center; font-size: 12px; padding: 2px 0; background: #1a1a3e; color: #aaa; }
#viewing-label span { font-weight: bold; }

/* Board area */
#board-container { flex: 1; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; min-height: 0; }
#board-wrapper { position: relative; }
canvas#board { display: block; touch-action: none; }

/* Piece panel */
#piece-panel { height: clamp(140px, 22vh, 200px); min-height: 140px; background: #0d1528; border-top: 1px solid rgba(233,69,96,0.3); display: flex; flex-direction: column; }
#piece-controls { display: flex; justify-content: center; gap: 12px; padding: 6px 0; }
#piece-controls button { background: transparent; border: 1px solid rgba(233,69,96,0.3); color: #eee; border-radius: 4px; font-size: 16px; cursor: pointer; padding: 4px 10px; transition: all 0.2s; }
#piece-controls button.icon-btn { width: 44px; height: 44px; padding: 0; }
#piece-controls button:hover:not(:disabled) { background: rgba(233,69,96,0.15); border-color: rgba(233,69,96,0.8); box-shadow: 0 0 15px rgba(233,69,96,0.3); }
#piece-controls button:active:not(:disabled) { background: rgba(233,69,96,0.4); box-shadow: 0 0 20px rgba(233,69,96,0.5); }
#piece-list { flex: 1; overflow-x: auto; overflow-y: hidden; display: flex; align-items: center; gap: 8px; padding: 4px 10px; -webkit-overflow-scrolling: touch; }
@media (min-width: 600px) { #piece-list { justify-content: center; flex-wrap: wrap; overflow-y: auto; } }
.piece-item { flex-shrink: 0; cursor: pointer; border: 2px solid transparent; border-radius: 6px; padding: 4px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.piece-item.selected { border-color: #e94560; background: rgba(233,69,96,0.1); box-shadow: 0 0 8px rgba(233,69,96,0.3); }
.piece-item.used { opacity: 0.2; pointer-events: none; }

/* Modal */
#modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 100; justify-content: center; align-items: center; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#modal-overlay.show { display: flex; }
#modal { background: #0d1528; border: 1px solid rgba(233,69,96,0.3); border-radius: 4px; padding: 24px; text-align: center; max-width: 340px; width: 90%; box-shadow: 0 0 30px rgba(233,69,96,0.15); max-height: 90vh; max-height: 90dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: auto; }
#modal h2 { margin-bottom: 16px; font-size: 20px; }
#modal .scores { margin-bottom: 16px; }
#modal .score-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 16px; font-family: 'Orbitron', sans-serif; }
#modal button { background: transparent; border: 1px solid #e94560; color: #e94560; padding: 10px 28px; border-radius: 4px; font-size: 14px; cursor: pointer; margin-top: 8px; text-transform: uppercase; letter-spacing: 2px; transition: all 0.2s; }
#modal button:hover { background: rgba(233,69,96,0.15); box-shadow: 0 0 20px rgba(233,69,96,0.3); }
.new-record { font-family: 'Press Start 2P', monospace; font-size: 18px; color: #e94560; margin-top: 16px; letter-spacing: 3px; animation: neonPulse 1s ease-in-out infinite alternate; }
@keyframes neonPulse { from { text-shadow: 0 0 5px #e94560, 0 0 10px #e94560; opacity: 0.8; } to { text-shadow: 0 0 15px #e94560, 0 0 30px #e94560, 0 0 45px #e94560; opacity: 1; } }

/* Pass button */
#pass-btn { background: #e94560; color: #fff; font-size: 13px; }
#deselect-btn { background: #e94560; color: #fff; font-size: 13px; display: none; }
#undo-btn { background: #555; color: #fff; font-size: 13px; }
#undo-btn:disabled { opacity: 0.3; cursor: default; }
#quit-btn { background: #555; color: #fff; font-size: 14px; }

/* Start screen */
#start-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 20px; }
#start-screen h1 { font-size: 42px; letter-spacing: 8px; margin-bottom: 10px; font-weight: 900; color: #e94560; text-shadow: 0 0 10px rgba(233,69,96,0.6), 0 0 30px rgba(233,69,96,0.4), 0 0 60px rgba(233,69,96,0.2); }
#start-screen p { font-size: 11px; color: #667; margin-bottom: 10px; letter-spacing: 3px; text-transform: uppercase; }
.start-btn { background: transparent; border: 1px solid rgba(233,69,96,0.4); color: #eee; padding: 16px 40px; border-radius: 4px; font-size: 16px; cursor: pointer; width: 260px; text-align: center; touch-action: manipulation; text-transform: uppercase; letter-spacing: 2px; transition: all 0.2s; box-shadow: 0 0 8px rgba(233,69,96,0.15), inset 0 0 8px rgba(233,69,96,0.05); }
.start-btn:hover { background: rgba(233,69,96,0.15); border-color: rgba(233,69,96,0.8); box-shadow: 0 0 20px rgba(233,69,96,0.3), inset 0 0 12px rgba(233,69,96,0.1); }
.start-btn:active { background: rgba(233,69,96,0.3); border-color: #e94560; box-shadow: 0 0 25px rgba(233,69,96,0.5), inset 0 0 15px rgba(233,69,96,0.15); }
.start-btn .sub { font-size: 9px; color: #556; display: block; margin-top: 4px; letter-spacing: 1px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
#main-menu { display: flex; flex-direction: column; align-items: center; gap: 16px; }
#stats-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 200; justify-content: center; align-items: center; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#stats-overlay.show { display: flex; }
#stats-modal { background: #0d1528; border: 1px solid rgba(233,69,96,0.3); border-radius: 4px; padding: 20px; max-width: 700px; width: 90%; text-align: center; box-shadow: 0 0 30px rgba(233,69,96,0.15); max-height: 90vh; max-height: 90dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: auto; }
#stats-columns { display: flex; gap: 20px; }
#stats-left { flex: 1; }
#stats-right { flex: 1; border-left: 1px solid rgba(255,255,255,0.2); padding-left: 20px; }
#vs-toggle-btn { display: none; margin: 12px auto 0; background: transparent; border: 1px solid rgba(233,69,96,0.4); color: #e94560; padding: 8px 20px; border-radius: 4px; font-size: 12px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: all 0.2s; }
#vs-toggle-btn:hover { background: rgba(233,69,96,0.15); box-shadow: 0 0 15px rgba(233,69,96,0.3); }
@media (max-width: 600px) {
  #stats-columns { flex-direction: column; }
  #stats-right { display: none; }
  #vs-toggle-btn { display: block; }
  #stats-right.show { display: block; }
  #stats-modal { max-width: 340px; }
}
#stats-modal h2 { font-size: 20px; margin-bottom: 16px; }
#stats-modal .stat-row { display: flex; justify-content: space-between; padding: 6px 12px; font-size: 15px; color: #ccc; }
#stats-modal .stat-row .label { color: #aaa; }
#stats-modal .stat-row .value { color: #fff; font-weight: bold; }
#stats-modal .stats-close { display: block; margin: 16px auto 0; background: transparent; border: 1px solid #e94560; color: #e94560; padding: 10px 28px; border-radius: 4px; font-size: 14px; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; transition: all 0.2s; }
#stats-modal .stats-close:hover { background: rgba(233,69,96,0.15); box-shadow: 0 0 20px rgba(233,69,96,0.3); }
#stats-modal .stats-reset { display: block; margin: 8px auto 0; background: none; border: none; color: #888; font-size: 12px; cursor: pointer; text-decoration: underline; transition: all 0.2s; }
#stats-modal .stats-reset:hover { color: #e94560; }
#order-select, #difficulty-select, #char-select { display: none; flex-direction: column; align-items: center; gap: 12px; }
#order-select h2, #difficulty-select h2, #char-select h2 { font-size: 16px; margin-bottom: 4px; }
#order-select p, #difficulty-select p, #char-select p { font-size: 12px; color: #aaa; }
#char-select .char-slot-label { font-size: 14px; font-weight: bold; margin-top: 4px; }
#char-select .char-grid { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 6px; width: 95vw; max-width: 500px; }
#char-select .char-grid-header { font-size: 11px; font-weight: bold; color: #e94560; text-align: center; padding: 2px 0; letter-spacing: 2px; }
#char-select .char-grid-tier { font-size: 10px; font-weight: bold; color: #888; writing-mode: vertical-rl; text-orientation: mixed; display: flex; align-items: center; justify-content: center; letter-spacing: 1px; }
#char-select .char-card .char-name { font-size: 11px; white-space: nowrap; }
#char-select .char-card { background: rgba(15,52,96,0.4); border: 1px solid rgba(233,69,96,0.2); border-radius: 4px; padding: 8px 6px; text-align: center; cursor: pointer; touch-action: manipulation; transition: all 0.2s; }
#char-select .char-card:hover { background: rgba(15,52,96,0.7); border-color: rgba(233,69,96,0.6); box-shadow: 0 0 15px rgba(233,69,96,0.2); }
#char-select .char-card:active { background: #1a4a80; }
#char-select .char-card.selected { border-color: #e94560; background: rgba(233,69,96,0.15); box-shadow: 0 0 10px rgba(233,69,96,0.3); }
#char-select .char-card canvas { display: block; margin: 0 auto; }
#char-select .char-card .char-info { display: flex; flex-direction: column; align-items: center; }
#char-select .char-card .char-name { font-size: 13px; color: #eee; font-weight: bold; }
#char-select .char-card .char-caption { font-size: 9px; color: #aaa; margin-top: 2px; }
#char-select .char-card { position: relative; }
#char-select .char-card .char-tooltip { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(10,20,40,0.95); border: 1px solid rgba(233,69,96,0.6); border-radius: 6px; padding: 10px 12px; z-index: 100; white-space: nowrap; min-width: 140px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); pointer-events: none; }
#char-select .char-card .char-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: rgba(233,69,96,0.6); }
#char-select .char-card:hover .char-tooltip { display: block; }
#char-select .char-card .char-tooltip-name { font-size: 13px; font-weight: bold; color: #fff; margin-bottom: 2px; }
#char-select .char-card .char-tooltip-caption { font-size: 10px; color: #aaa; font-style: italic; margin-bottom: 6px; }
#char-select .char-card .char-stat-row { display: flex; align-items: center; gap: 6px; font-size: 10px; line-height: 1.6; }
#char-select .char-card .char-stat-label { color: #888; width: 52px; text-align: right; font-weight: bold; }
#char-select .char-card .char-stat-dots { letter-spacing: 1px; }
#char-select .char-card .char-stat-filled { color: #e94560; }
#char-select .char-card .char-stat-empty { color: #333; }
#char-select .char-card.selected .char-stat-row { font-size: 10px; line-height: 1.6; display: flex; align-items: center; gap: 6px; }
#char-select .char-card.selected .char-stat-label { color: #888; width: 52px; text-align: right; font-weight: bold; }
#char-select .char-card.selected .char-stat-filled { color: #e94560; }
#char-select .char-card.selected .char-stat-empty { color: #333; }
.order-btn { background: transparent; border: 1px solid rgba(233,69,96,0.3); color: #eee; padding: 12px 24px; border-radius: 4px; font-size: 14px; cursor: pointer; width: 220px; text-align: center; touch-action: manipulation; letter-spacing: 1px; transition: all 0.2s; }
.order-btn:hover { background: rgba(233,69,96,0.15); border-color: rgba(233,69,96,0.8); box-shadow: 0 0 20px rgba(233,69,96,0.3); }
.order-btn:active { background: rgba(233,69,96,0.3); border-color: #e94560; box-shadow: 0 0 25px rgba(233,69,96,0.5); }
.order-btn .corner-label { font-size: 11px; color: #aaa; display: block; margin-top: 2px; }

/* CPU thinking indicator */
#cpu-thinking { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.9); color: #e94560; padding: 12px 24px; border-radius: 4px; font-size: 14px; z-index: 50; border: 1px solid rgba(233,69,96,0.3); letter-spacing: 2px; }
#auto-pass-toast { display: none; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.85); color: #fff; padding: 14px 28px; border-radius: 14px; font-size: 15px; z-index: 60; text-align: center; animation: fadeInOut 2s ease-in-out; pointer-events: none; }
#auto-pass-toast .pass-name { font-weight: bold; font-size: 17px; }
#save-error-toast { display: none; position: fixed; top: 20%; left: 50%; transform: translate(-50%, -50%); background: rgba(180,40,60,0.95); color: #fff; padding: 14px 28px; border-radius: 14px; font-size: 14px; z-index: 9999; text-align: center; pointer-events: none; }
@keyframes fadeInOut { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0.8); } 15% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
#battle-menu, #puzzle-menu { flex-direction: column; align-items: center; gap: 16px; }
#battle-menu h2, #puzzle-menu h2 { font-family: 'Press Start 2P', monospace; font-size: 16px; letter-spacing: 2px; }
#battle-menu p, #puzzle-menu p { color: #888; font-size: 12px; margin-bottom: 4px; }
#board-size-screen { flex-direction: column; align-items: center; gap: 8px; }
#board-size-screen h2 { font-family: 'Press Start 2P', monospace; font-size: 16px; letter-spacing: 2px; }
#board-size-screen p { color: #888; font-size: 12px; margin-bottom: 4px; }
#round-select { flex-direction: column; align-items: center; gap: 8px; }
#round-select h2 { font-family: 'Press Start 2P', monospace; font-size: 16px; letter-spacing: 2px; }
#round-select p { color: #888; font-size: 12px; margin-bottom: 4px; }
#round-indicator { display: none; font-family: 'Press Start 2P', monospace; font-size: 10px; color: #e94560; margin-left: 8px; }
#round-indicator.show { display: inline; }
#series-scores { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); }
#series-scores h3 { font-size: 12px; color: #e94560; margin-bottom: 6px; text-align: center; }
.series-score-row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 13px; }

/* Tutorial overlay */
#tutorial-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.75); z-index: 300; justify-content: center; align-items: center; }
#tutorial-overlay.show { display: flex; }
#tutorial-box { background: #0d1528; border: 1px solid rgba(233,69,96,0.3); border-radius: 8px; padding: 24px; max-width: 480px; width: 92%; max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 0 30px rgba(233,69,96,0.15); }
#tutorial-box h2 { text-align: center; font-size: 18px; color: #e94560; margin-bottom: 12px; text-shadow: 0 0 10px rgba(233,69,96,0.4); }
#tutorial-box h3 { font-size: 14px; color: #e94560; margin: 10px 0 4px; }
#tutorial-box p, #tutorial-box li { font-size: 13px; line-height: 1.6; color: #ccc; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
#tutorial-box ul { padding-left: 18px; margin: 4px 0; }
#tutorial-box .tutorial-diagram { background: #0a0a1a; border: 1px solid #333; border-radius: 4px; padding: 6px; margin: 6px 0; text-align: center; font-family: monospace; font-size: 14px; line-height: 1.3; }
#tutorial-box .ok-label { color: #00c896; font-weight: bold; }
#tutorial-box .ng-label { color: #e94560; font-weight: bold; }
#tutorial-box .ja { font-size: 12px; color: #999; font-family: -apple-system, BlinkMacSystemFont, sans-serif; margin-top: 2px; }
#tutorial-next-btn { display: block; margin: 16px auto 0; background: transparent; border: 1px solid #e94560; color: #e94560; padding: 10px 28px; border-radius: 4px; font-size: 14px; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; font-family: 'Orbitron', sans-serif; transition: all 0.2s; }
#tutorial-next-btn:hover { background: rgba(233,69,96,0.15); box-shadow: 0 0 20px rgba(233,69,96,0.3); }
#tutorial-hint { display: none; position: fixed; bottom: 200px; left: 50%; transform: translateX(-50%); background: rgba(233,69,96,0.9); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; z-index: 310; text-align: center; max-width: 320px; box-shadow: 0 0 20px rgba(233,69,96,0.4); }
#tutorial-hint.show { display: block; }
#tutorial-hint.error { background: rgba(180,40,60,0.95); }
#tutorial-hint .hint-ja { font-size: 11px; opacity: 0.85; margin-top: 4px; }

/* Puzzle intro overlay */
#puzzle-intro-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.75); z-index: 300; justify-content: center; align-items: center; }
#puzzle-intro-overlay.show { display: flex; }
#puzzle-intro-box, #tetromino-intro-box { background: #0d1528; border: 1px solid rgba(233,69,96,0.3); border-radius: 8px; padding: 24px; max-width: 480px; width: 92%; max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 0 30px rgba(233,69,96,0.15); }
#puzzle-intro-box h2, #tetromino-intro-box h2 { text-align: center; font-size: 18px; color: #e94560; margin-bottom: 12px; text-shadow: 0 0 10px rgba(233,69,96,0.4); }
#puzzle-intro-box h3, #tetromino-intro-box h3 { font-size: 14px; color: #e94560; margin: 10px 0 4px; }
#puzzle-intro-box p, #puzzle-intro-box li, #tetromino-intro-box p, #tetromino-intro-box li { font-size: 13px; line-height: 1.6; color: #ccc; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
#puzzle-intro-box ul, #tetromino-intro-box ul { padding-left: 18px; margin: 4px 0; }
#puzzle-intro-box .ja, #tetromino-intro-box .ja { font-size: 12px; color: #999; font-family: -apple-system, BlinkMacSystemFont, sans-serif; margin-top: 2px; }
#puzzle-intro-start-btn { display: block; margin: 16px auto 0; background: transparent; border: 1px solid #e94560; color: #e94560; padding: 10px 28px; border-radius: 4px; font-size: 14px; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; font-family: 'Orbitron', sans-serif; transition: all 0.2s; }
#puzzle-intro-start-btn:hover { background: rgba(233,69,96,0.15); box-shadow: 0 0 20px rgba(233,69,96,0.3); }

/* Tetromino mode: color selector */
#color-selector { display: none; justify-content: center; gap: 8px; padding: 8px 0; background: #0d1528; border-top: 1px solid rgba(233,69,96,0.2); }
#color-selector.show { display: flex; }
.color-btn { width: 48px; height: 36px; border: 2px solid transparent; border-radius: 6px; cursor: pointer; transition: all 0.2s; position: relative; font-size: 10px; font-family: 'Orbitron', sans-serif; font-weight: bold; color: #fff; text-shadow: 0 0 4px rgba(0,0,0,0.8); }
.color-btn.active { border-color: #fff; box-shadow: 0 0 12px rgba(255,255,255,0.4); transform: scale(1.1); }
.color-btn .remaining { position: absolute; bottom: 1px; right: 3px; font-size: 9px; opacity: 0.9; }
.color-btn.done { opacity: 0.3; pointer-events: none; }

/* Tetromino mode: progress indicator */
#tetromino-progress { font-size: 13px; font-weight: bold; color: #4da6d9; letter-spacing: 1px; display: none; }

/* Tetromino mode: clear modal */
#clear-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 100; justify-content: center; align-items: center; }
#clear-overlay.show { display: flex; }
#clear-modal { background: #0d1528; border: 1px solid rgba(233,69,96,0.3); border-radius: 8px; padding: 32px; text-align: center; max-width: 340px; width: 90%; box-shadow: 0 0 40px rgba(233,69,96,0.2); }
#clear-modal h2 { font-size: 24px; color: #e94560; margin-bottom: 8px; text-shadow: 0 0 15px rgba(233,69,96,0.6); animation: neonPulse 1s ease-in-out infinite alternate; }
#clear-modal .clear-time { font-size: 18px; color: #4da6d9; margin: 12px 0; }
#clear-modal .clear-msg { font-size: 12px; color: #aaa; margin-bottom: 16px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
#clear-modal button { background: transparent; border: 1px solid #e94560; color: #e94560; padding: 10px 28px; border-radius: 4px; font-size: 14px; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; font-family: 'Orbitron', sans-serif; transition: all 0.2s; }
#clear-modal button:hover { background: rgba(233,69,96,0.15); box-shadow: 0 0 20px rgba(233,69,96,0.3); }

/* Tetromino mode: no-moves toast */
#no-moves-toast { display: none; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); background: rgba(180,40,60,0.95); color: #fff; padding: 14px 28px; border-radius: 14px; font-size: 13px; z-index: 60; text-align: center; font-family: -apple-system, BlinkMacSystemFont, sans-serif; animation: fadeInOut 2.5s ease-in-out; pointer-events: none; }

/* Per-character monster animations */
/* Fire column - ATK */
@keyframes charAnimBlaze { 0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); } 25% { transform: translateY(-3px) scale(1); } 50% { transform: translateY(-2px) scale(1.05); filter: brightness(1.3); } 75% { transform: translateY(-4px) scale(1); } }
@keyframes charAnimSpike { 0%, 100% { transform: translateY(0) translateX(0); } 30% { transform: translateY(-2px) translateX(0); } 55% { transform: translateY(-1px) translateX(3px); } 70% { transform: translateY(0) translateX(1px); } }
@keyframes charAnimEmber { 0%, 100% { transform: translateY(0); } 12% { transform: translateY(-4px); } 24% { transform: translateY(0); } 36% { transform: translateY(-2px); } 48% { transform: translateY(0); } }
/* Water column - DEF */
@keyframes charAnimAegis { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(0) scale(1.04); } 50% { transform: translateY(1px) scale(1.07); } 60% { transform: translateY(0) scale(1.04); } }
@keyframes charAnimProxy { 0%, 100% { transform: translateX(0) translateY(0); } 25% { transform: translateX(-2px) translateY(-1px); } 50% { transform: translateX(0) translateY(-2px); } 75% { transform: translateX(2px) translateY(-1px); } }
@keyframes charAnimEcho { 0%, 100% { transform: translateY(0) scale(1); } 25% { transform: translateY(-2px) scale(0.97); } 50% { transform: translateY(-3px) scale(1.03); } 75% { transform: translateY(-1px) scale(0.99); } }
/* Lightning column - RNG */
@keyframes charAnimChaos { 0%, 100% { transform: translateY(-2px); filter: brightness(1); } 20% { transform: translateY(-3px); } 45% { transform: translateY(-2px); filter: brightness(1.8); } 50% { transform: translateY(-1px); filter: brightness(1); } 70% { transform: translateY(-3px); filter: brightness(1.5); } 75% { transform: translateY(-2px); filter: brightness(1); } }
@keyframes charAnimGlitch { 0%, 100% { transform: translate(0, 0); filter: brightness(1); } 10% { transform: translate(-1px, 1px); } 20% { transform: translate(1px, -1px); filter: brightness(1.4); } 30% { transform: translate(0, 0); } 50% { transform: translate(1px, 0); } 60% { transform: translate(-1px, -1px); filter: brightness(1.2); } 70% { transform: translate(0, 1px); } 90% { transform: translate(1px, -1px); } }
@keyframes charAnimFlicker { 0%, 100% { transform: translate(0, 0); opacity: 1; } 15% { transform: translate(1px, -1px); opacity: 0.6; } 25% { transform: translate(-1px, 0); opacity: 1; } 40% { transform: translate(0, -2px); opacity: 0.4; } 50% { transform: translate(1px, 1px); opacity: 1; } 65% { transform: translate(-1px, -1px); opacity: 0.7; } 80% { transform: translate(0, 0); opacity: 1; } }
.char-anim-blaze { animation: charAnimBlaze 2.5s ease-in-out infinite; }
.char-anim-spike { animation: charAnimSpike 2s ease-in-out infinite; }
.char-anim-ember { animation: charAnimEmber 1.8s ease-in-out infinite; }
.char-anim-aegis { animation: charAnimAegis 3s ease-in-out infinite; }
.char-anim-proxy { animation: charAnimProxy 3s ease-in-out infinite; }
.char-anim-echo { animation: charAnimEcho 2.5s ease-in-out infinite; }
.char-anim-chaos { animation: charAnimChaos 2s ease-in-out infinite; }
.char-anim-glitch { animation: charAnimGlitch 1.5s ease-in-out infinite; }
.char-anim-flicker { animation: charAnimFlicker 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .char-anim-blaze, .char-anim-spike, .char-anim-ember, .char-anim-aegis, .char-anim-proxy, .char-anim-echo, .char-anim-chaos, .char-anim-glitch, .char-anim-flicker { animation: none; } }