@font-face { font-family: 'Monocraft'; src: url('/assets/font/Monocraft.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Monocraft'; src: url('/assets/font/Monocraft-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; font-display: swap; }
.nickname-container { max-width: 1200px; width: 100%; margin: 0 auto; margin-top: 20px; padding: 2rem 3rem; }
.nickname-hero { text-align: center; margin-bottom: 2rem; }
.nickname-hero h1 { font-size: 2.5rem; margin: 0 0 0.5rem 0; color: #f5ebd3; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); }
.nickname-hero p { font-size: 1.1rem; color: #d6be96; margin: 0; }
.nickname-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.preview-card { padding: 1.5rem 2rem; position: relative; min-height: 100px; display: block; }
.preview-text { font-size: 2rem; font-weight: bold; position: relative; word-break: break-word; color: #ffffff; text-align: left; font-family: 'Monocraft', 'JetBrains Mono', monospace; padding: 5px 5px 5px 5px; display: inline-block; -webkit-text-stroke: 0.5px #000000; text-stroke: 0.5px #000000; }
.controls-grid { display: flex; gap: 1.5rem; align-items: start; }
.middle-column { display: flex; flex-direction: column; gap: 1.5rem; flex: 1.5; flex-basis: 0; }
.sidebar-card { padding: 1.5rem; background: linear-gradient(180deg, #e8d4ae 0%, #d6be96 100%); border: 2px solid #8b6a3e; border-bottom-width: 3px; border-radius: 8px; box-shadow: 0 3px 0 #6b4423, inset 0 -1px 0 rgba(107, 68, 35, 0.3); position: relative; flex: 1; flex-basis: 0; }
.sidebar-card::before { content: ""; position: absolute; top: 2px; left: 4px; right: 4px; height: 60px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%); border-radius: 6px; pointer-events: none; z-index: 0; }
.editor-card { padding: 1.5rem; background: linear-gradient(180deg, #e8d4ae 0%, #d6be96 100%); border: 2px solid #8b6a3e; border-bottom-width: 3px; border-radius: 8px; box-shadow: 0 3px 0 #6b4423, inset 0 -1px 0 rgba(107, 68, 35, 0.3); position: relative; display: flex; flex-direction: column; }
.editor-card::before { content: ""; position: absolute; top: 2px; left: 4px; right: 4px; height: 60px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%); border-radius: 6px; pointer-events: none; z-index: 0; }
.sidebar-card:not(.colors-card) { display: flex; flex-direction: column; }
.sidebar-card:not(.colors-card) .card-content { flex: 1; display: flex; flex-direction: column; }
.card-content { position: relative; z-index: 1; }
.input-group { margin-bottom: 1rem; }
.input-group label { display: block; margin-bottom: 0.5rem; color: #3d2817; font-weight: 600; font-size: 0.9rem; }
.text-input { width: 100%; padding: 12px 15px; border-radius: 6px; border: 2px solid #8b6a3e; background: #f5ebd3; color: #2d1f0f; font-size: 16px; font-family: 'JetBrains Mono', monospace; transition: all 0.2s; }
.text-input:focus { border-color: #5c4422; box-shadow: 0 0 0 2px rgba(92, 68, 34, 0.2); outline: none; }
.text-input::placeholder { color: #8b6a3e; }
.player-info-box { display: flex; align-items: center; gap: 12px; padding: 12px 15px; background: #f5ebd3; border: 2px solid #8b6a3e; border-radius: 4px; }
.player-avatar { width: 48px; height: 48px; image-rendering: pixelated; border-radius: 2px; flex-shrink: 0; }
.player-details { flex: 1; min-width: 0; }
.player-username { font-size: 1rem; font-weight: 700; color: #2d1f0f; margin: 0 0 4px 0; font-family: 'JetBrains Mono', monospace; }
.player-source { font-size: 0.75rem; color: #8b6a3e; margin: 0; }
.player-source a { color: #6b4423; text-decoration: underline; font-weight: 600; }
.no-player-warning { padding: 15px; background: rgba(138, 58, 58, 0.15); border: 2px solid #8a3a3a; border-radius: 4px; color: #5a1a1a; font-size: 0.9rem; }
.no-player-warning i { margin-right: 8px; }
.no-player-warning a { color: #5a1a1a; text-decoration: underline; font-weight: 600; }
.color-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1rem; }
.color-item { display: flex; align-items: center; gap: 10px; }
.color-input-wrapper { flex: 1; position: relative; }
.color-picker-hidden { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.hex-input { width: 100%; padding: 10px 45px 10px 12px; border-radius: 6px; border: 2px solid #8b6a3e; background: #f5ebd3; color: #2d1f0f; font-size: 14px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; }
.hex-input:focus { border-color: #5c4422; box-shadow: 0 0 0 2px rgba(92, 68, 34, 0.2); outline: none; }
.color-preview-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 4px; border: 2px solid #8b6a3e; cursor: pointer; transition: all 0.15s ease; }
.color-preview-btn:hover { transform: translateY(-50%) scale(1.1); border-color: #5c4422; }
.remove-color-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #c4746a 0%, #a85a50 100%); border: 2px solid #8a3a30; border-radius: 6px; color: #fff; cursor: pointer; transition: all 0.15s ease; box-shadow: 0 2px 0 #6a2a20; }
.remove-color-btn:hover { background: linear-gradient(180deg, #d48478 0%, #b86a60 100%); transform: translateY(-1px); }
.remove-color-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #6a2a20; }
.add-color-btn { width: 100%; padding: 10px; background: linear-gradient(180deg, #6ba89d 0%, #5a9488 100%); border: 2px solid #4a7c72; border-radius: 6px; color: #fff; font-weight: 600; cursor: pointer; transition: all 0.15s ease; box-shadow: 0 2px 0 #3a6c62; font-family: 'JetBrains Mono', monospace; }
.add-color-btn:hover:not(:disabled) { background: linear-gradient(180deg, #7bb8ad 0%, #6aa498 100%); transform: translateY(-1px); }
.add-color-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 #3a6c62; }
.add-color-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.button-group { display: flex; gap: 8px; align-items: center; }
.copy-icon-btn { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #6ba89d 0%, #5a9488 100%); border: 2px solid #4a7c72; border-radius: 6px; color: #fff; cursor: pointer; transition: all 0.15s ease; box-shadow: 0 2px 0 #3a6c62; font-size: 16px; }
.copy-icon-btn:hover { background: linear-gradient(180deg, #7bb8ad 0%, #6aa498 100%); transform: translateY(-1px); }
.copy-icon-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #3a6c62; }
.preset-dropdown { width: 100%; padding: 12px 15px; border-radius: 6px; border: 2px solid #8b6a3e; background: #f5ebd3; color: #2d1f0f; font-size: 16px; font-family: 'JetBrains Mono', monospace; cursor: pointer; transition: all 0.2s; margin-top: 0.5rem; }
.preset-dropdown:focus { border-color: #5c4422; box-shadow: 0 0 0 2px rgba(92, 68, 34, 0.2); outline: none; }
.preset-dropdown option { background: #f5ebd3; color: #2d1f0f; padding: 8px; }
@media (max-width: 1024px) {
.controls-grid { 
flex-direction: column; 
align-items: center;
}
.colors-card { order: 1; width: 100%; max-width: 600px; }
.middle-column { order: 2; width: 100%; max-width: 600px; }
.sidebar-card:not(.colors-card) { order: 3; width: 100%; max-width: 600px; }
}
@media (max-width: 768px) {
.nickname-container { padding: 1rem; }
.preview-text { font-size: 1.5rem; }
.nickname-hero h1 { font-size: 1.75rem; }
.nickname-hero p { font-size: 0.95rem; }
.sidebar-card { padding: 1.25rem; }
.editor-card { padding: 1.25rem; }
.preview-card { padding: 1.25rem; }
}
@media (max-width: 480px) {
.nickname-container { padding: 0.75rem; }
.preview-text { font-size: 1.25rem; }
.nickname-hero h1 { font-size: 1.5rem; }
.nickname-hero p { font-size: 0.85rem; }
.button-group { flex-direction: column; }
.copy-icon-btn { width: 100%; height: 42px; }
}