@import url('https://fonts.googleapis.com/css2?family=Anton&family=Teko:wght@400;500;600;700&display=swap');

#typing-royale-wrapper {
    --void: #05060c; --panel: #0c0f1a; --panel-2: #131828; --line: #232b42;
    --storm: #8b2fe0; --storm-deep: #3d0e73;
    --common: #b8bec9; --uncommon: #2bd47d; --uncommon-deep: #157a49;
    --rare: #3ea6ff; --rare-deep: #1c5fb0; --epic: #b34dff; --epic-deep: #6e17c9;
    --legendary: #ff8a1a; --legendary-deep: #c24800; --gold: #ffd23f; --danger: #ff3860;
    font-family: 'Teko', sans-serif; background: var(--void);
    width: 100%; height: 100%; min-height: 600px;
    display: flex; justify-content: center; align-items: center;
    padding: 10px; box-sizing: border-box; color: #fff; user-select: none;
}
#typing-royale-wrapper * { box-sizing: border-box; }
#typing-royale-wrapper:fullscreen { background: var(--void); padding: 0; }
#typing-royale-wrapper:fullscreen .tr-container { border-radius: 0; max-height: 100vh; }

.tr-container {
    width: 100%; max-width: 900px; height: 100%; max-height: 90vh; min-height: 600px;
    background: linear-gradient(180deg, #0a0d17 0%, var(--void) 100%);
    border: 2px solid var(--line); border-radius: 10px; position: relative; overflow: hidden;
    display: flex; flex-direction: column; box-shadow: 0 0 0 1px rgba(139,47,224,0.15), 0 20px 60px rgba(0,0,0,0.6);
}

.tr-header {
    background: linear-gradient(90deg, #0a0d17, #10142299 60%, #0a0d17);
    padding: 10px 20px; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 2px solid var(--storm); z-index: 10; box-shadow: 0 2px 12px rgba(139,47,224,0.25);
}
.tr-title { font-family: 'Anton', sans-serif; font-size: 22px; font-weight: 400; color: #fff; letter-spacing: 3px; font-style: italic; text-shadow: 2px 0 0 var(--legendary), -2px 0 0 var(--storm); }
.tr-btn-icon { background: var(--panel-2); border: 1px solid var(--storm); color: #d9c3ff; width: 32px; height: 32px; border-radius: 4px; cursor: pointer; transition: 0.15s; display: flex; justify-content: center; align-items: center; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.tr-btn-icon:hover { background: var(--storm); color: #fff; box-shadow: 0 0 12px var(--storm); }

.tr-screen { position: absolute; top: 52px; left: 0; width: 100%; height: calc(100% - 52px); display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 5; }
.tr-active { display: flex !important; }
.tr-hidden { display: none !important; }

#tr-home-screen { overflow: hidden; }
#tr-home-screen::before, #tr-home-screen::after { content: ""; position: absolute; left: 50%; top: 50%; border: 1px dashed rgba(139,47,224,0.35); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
#tr-home-screen::before { width: 900px; height: 900px; animation: tr-radar-spin 60s linear infinite; }
#tr-home-screen::after { width: 550px; height: 550px; border-color: rgba(255,138,26,0.25); animation: tr-radar-spin 40s linear infinite reverse; }
@keyframes tr-radar-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

.tr-radar-sweep { position: absolute; left: 50%; top: 50%; width: 700px; height: 700px; transform: translate(-50%, -50%); background: conic-gradient(from 0deg, rgba(139,47,224,0.22), transparent 25%); border-radius: 50%; animation: tr-radar-spin 8s linear infinite; pointer-events: none; z-index: 0; }
#tr-home-screen > * { position: relative; z-index: 1; }

.tr-logo-glitch { font-family: 'Anton', sans-serif; font-weight: 400; font-style: italic; font-size: 56px; color: #fff; margin-bottom: 8px; text-shadow: 4px 0 0 var(--legendary), -4px 0 0 var(--storm), 0 8px 20px rgba(0,0,0,0.6); letter-spacing: 2px; text-align: center; line-height: 1; }
.tr-desc { font-size: 21px; text-align: center; max-width: 520px; color: #9aa3bd; margin-bottom: 18px; line-height: 1.25; }
.tr-desc strong { color: var(--legendary); }
.tr-stats-panel { display: flex; gap: 30px; margin-bottom: 20px; background: linear-gradient(135deg, var(--panel-2), var(--panel)); padding: 10px 28px; border: 1px solid var(--line); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); font-size: 22px; flex-wrap: wrap; justify-content: center; }
.tr-highlight { color: var(--gold); font-weight: bold; text-shadow: 0 0 8px rgba(255,210,63,0.5); }

.tr-options { margin-bottom: 22px; }
.tr-options h3 { font-family: 'Anton', sans-serif; font-weight: 400; font-style: italic; color: #cdd3e6; margin-bottom: 10px; font-size: 18px; text-align: center; letter-spacing: 2px; }
.tr-diff-selector { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tr-diff-btn { position: relative; background: var(--panel-2); border: 2px solid var(--line); color: #8b93ad; padding: 8px 22px 8px 18px; cursor: pointer; font-family: 'Teko', sans-serif; font-size: 21px; font-weight: 600; letter-spacing: 1px; transition: 0.15s; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.tr-diff-btn:hover { border-color: #8b93ad; color: #fff; }
.tr-diff-btn[data-diff="facile"].tr-active-btn { background: linear-gradient(135deg, var(--uncommon), var(--uncommon-deep)); border-color: var(--uncommon); color: #fff; text-shadow: 1px 1px 2px #000; box-shadow: 0 0 16px rgba(43,212,125,0.5); }
.tr-diff-btn[data-diff="moyen"].tr-active-btn { background: linear-gradient(135deg, var(--rare), var(--rare-deep)); border-color: var(--rare); color: #fff; text-shadow: 1px 1px 2px #000; box-shadow: 0 0 16px rgba(62,166,255,0.5); }
.tr-diff-btn[data-diff="difficile"].tr-active-btn { background: linear-gradient(135deg, var(--epic), var(--epic-deep)); border-color: var(--epic); color: #fff; text-shadow: 1px 1px 2px #000; box-shadow: 0 0 16px rgba(179,77,255,0.5); }
.tr-diff-btn[data-diff="extreme"].tr-active-btn { background: linear-gradient(135deg, var(--legendary), var(--danger)); border-color: var(--legendary); color: #fff; text-shadow: 1px 1px 2px #000; box-shadow: 0 0 20px rgba(255,138,26,0.6); }

.tr-btn { font-family: 'Anton', sans-serif; font-weight: 400; font-style: italic; font-size: 24px; letter-spacing: 1px; padding: 12px 42px; border: none; cursor: pointer; transition: all 0.15s; text-transform: uppercase; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.tr-btn-primary { background: linear-gradient(135deg, var(--gold) 0%, var(--legendary) 55%, var(--legendary-deep) 100%); color: #1a0d00; box-shadow: 0 5px 0 var(--legendary-deep), 0 8px 22px rgba(255,138,26,0.35); }
.tr-btn-primary:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 7px 0 var(--legendary-deep), 0 10px 26px rgba(255,138,26,0.45); }
.tr-btn-primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--legendary-deep); }
.tr-btn-secondary { background: linear-gradient(135deg, #2a3348, #171c2c); color: #fff; box-shadow: 0 5px 0 #0a0d15; }
.tr-btn-secondary:hover { background: linear-gradient(135deg, #37425e, #1d2436); transform: translateY(-2px); box-shadow: 0 7px 0 #0a0d15; }

.tr-hud { position: absolute; top: 15px; left: 15px; right: 15px; display: flex; justify-content: space-between; align-items: flex-start; z-index: 20; pointer-events: none; }
.tr-hud-left { display: flex; flex-direction: column; gap: 6px; }
.tr-alive-box, .tr-kills-box, .tr-combo-box { background: linear-gradient(135deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); padding: 5px 16px; font-size: 22px; display: flex; align-items: center; gap: 8px; pointer-events: auto; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.tr-alive-box { border-color: var(--rare); color: #cfe6ff; }
.tr-kills-box { border-color: var(--danger); color: #ffd0da; }
.tr-icon { font-size: 19px; }

/* COMBO */
.tr-combo-box { border-color: var(--common); color: #d8dbe4; transition: border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s; animation: tr-combo-pop 0.2s ease-out; }
@keyframes tr-combo-pop { from { transform: scale(1.25); } to { transform: scale(1); } }
.tr-combo-box.tr-combo-2 { border-color: var(--uncommon); color: #baffdd; box-shadow: 0 0 10px rgba(43,212,125,0.35); }
.tr-combo-box.tr-combo-3 { border-color: var(--rare); color: #cfe6ff; box-shadow: 0 0 12px rgba(62,166,255,0.45); }
.tr-combo-box.tr-combo-4 { border-color: var(--legendary); color: #ffe2c1; box-shadow: 0 0 16px rgba(255,138,26,0.55); }

.tr-hud-center { display: flex; flex-direction: column; align-items: center; pointer-events: auto; }
.tr-health-bar-bg { width: 300px; height: 22px; background: rgba(0,0,0,0.65); border: 2px solid #3a4260; overflow: hidden; transform: skewX(-15deg); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 6px, transparent 6px 12px); }
.tr-health-bar-fill { width: 100%; height: 100%; background: linear-gradient(90deg, var(--uncommon), #34d399); transition: width 0.2s, background 0.3s; }
.tr-health-text { font-size: 22px; font-weight: bold; margin-top: 4px; color: #fff; text-shadow: 1px 1px 2px #000; letter-spacing: 1px; }
.tr-hud-right { display: flex; gap: 10px; pointer-events: auto; }

.tr-killfeed { position: absolute; top: 70px; right: 15px; z-index: 22; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; }
.tr-killfeed-item { background: linear-gradient(90deg, rgba(12,15,26,0.9), rgba(255,56,96,0.25)); border: 1px solid var(--danger); color: #fff; font-size: 17px; padding: 4px 12px; clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); animation: tr-feed-in 0.2s ease-out, tr-feed-out 0.4s ease-in 2.6s forwards; white-space: nowrap; }
.tr-killfeed-item.tr-killfeed-combo { background: linear-gradient(90deg, rgba(12,15,26,0.9), rgba(255,210,63,0.3)); border-color: var(--gold); color: var(--gold); font-weight: bold; }
@keyframes tr-feed-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tr-feed-out { to { opacity: 0; transform: translateX(30px); } }

/* INDICE ESPACE */
.tr-hint-text { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 15px; color: #5c6480; letter-spacing: 1px; z-index: 20; pointer-events: none; background: rgba(5,6,12,0.5); padding: 2px 12px; border-radius: 3px; }

#tr-qte-event { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); background: linear-gradient(160deg, rgba(61,14,115,0.95), rgba(139,47,224,0.85)); border: 2px solid var(--storm); padding: 18px 40px; text-align: center; box-shadow: 0 0 60px rgba(139,47,224,0.55); z-index: 30; animation: tr-pulse 0.5s infinite alternate; clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
@keyframes tr-pulse { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.04); } }
.tr-qte-title { font-family: 'Anton', sans-serif; font-style: italic; font-weight: 400; font-size: 28px; color: #fff; letter-spacing: 2px; }
.tr-qte-desc { font-size: 19px; color: #e6d4ff; margin-bottom: 10px; }
.tr-qte-keys { font-size: 46px; letter-spacing: 14px; color: #fff; font-weight: 700; text-shadow: 2px 2px 0 #000; margin-bottom: 14px; }
.tr-qte-timer-bar { width: 100%; height: 9px; background: rgba(0,0,0,0.4); overflow: hidden; }
#tr-qte-timer-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--legendary)); width: 100%; transition: width 0.1s linear; }

#tr-canvas { width: 100%; height: 100%; display: block; background-color: var(--void); box-shadow: inset 0 0 120px rgba(139,47,224,0.25); }

#tr-pause-screen h2 { font-family: 'Anton', sans-serif; font-weight: 400; font-style: italic; font-size: 52px; color: #fff; margin-bottom: 30px; letter-spacing: 4px; text-shadow: 3px 0 0 var(--storm), -3px 0 0 var(--legendary); }

#tr-end-screen { overflow: hidden; }
.tr-victory-text { font-family: 'Anton', sans-serif; font-weight: 400; font-style: italic; font-size: 54px; color: var(--gold); margin-bottom: 26px; letter-spacing: 3px; text-align: center; line-height: 1.1; position: relative; z-index: 2; text-shadow: 0 0 30px rgba(255,210,63,0.8), 0 4px 0 var(--gold-deep); }
.tr-victory-text::before { content: ""; position: absolute; left: 50%; top: 50%; width: 500px; height: 500px; transform: translate(-50%, -50%); z-index: -1; background: conic-gradient(from 0deg, transparent 0 10%, rgba(255,210,63,0.18) 12% 13%, transparent 15% 25%, rgba(255,210,63,0.18) 27% 28%, transparent 30% 40%, rgba(255,210,63,0.18) 42% 43%, transparent 45% 55%, rgba(255,210,63,0.18) 57% 58%, transparent 60% 70%, rgba(255,210,63,0.18) 72% 73%, transparent 75% 100%); animation: tr-radar-spin 20s linear infinite; }
.tr-defeat-text { font-family: 'Anton', sans-serif; font-weight: 400; font-style: italic; font-size: 54px; color: var(--danger); margin-bottom: 26px; letter-spacing: 3px; text-align: center; line-height: 1.1; text-shadow: 0 0 24px rgba(255,56,96,0.6); }
.tr-end-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; background: linear-gradient(135deg, var(--panel-2), var(--panel)); padding: 20px; border: 1px solid var(--line); width: 100%; max-width: 400px; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); position: relative; z-index: 2; }
.tr-end-stat { font-size: 22px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.tr-end-stat-full { grid-column: 1 / -1; }

.tr-confetti-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.tr-confetti-piece { position: absolute; top: -20px; width: 8px; height: 14px; opacity: 0.9; animation: tr-confetti-fall linear forwards; }
@keyframes tr-confetti-fall { to { transform: translateY(115%) rotate(540deg); opacity: 0.2; } }

@media (max-width: 600px) {
    .tr-logo-glitch { font-size: 38px; } .tr-title { font-size: 17px; } .tr-hud { flex-direction: column; align-items: center; gap: 5px; } .tr-health-bar-bg { width: 200px; } .tr-alive-box, .tr-kills-box, .tr-combo-box { font-size: 16px; padding: 3px 10px; } #tr-qte-event { width: 90%; padding: 14px; } .tr-qte-keys { font-size: 30px; letter-spacing: 7px; } .tr-diff-btn { font-size: 16px; padding: 6px 14px; } .tr-victory-text, .tr-defeat-text { font-size: 36px; } .tr-killfeed { top: 60px; right: 8px; } .tr-killfeed-item { font-size: 13px; padding: 3px 8px; } .tr-hint-text { font-size: 12px; } .tr-stats-panel { font-size: 17px; gap: 16px; }
}