.tf-app [hidden]{display:none!important}
.tf-app{
  --bg:#211b68;--panel:#4d46c9;--panel2:#5d57e9;--deep:#17145c;--deep2:#2a237f;
  --cyan:#21ead2;--yellow:#ffd65c;--orange:#ff7a4f;--white:#f7f8ff;--soft:#aeb2ff;
  --line:#7c80ff;--red:#ff5b78;--green:#72f0cf;--ink:#171946;
  max-width:1280px;margin:26px auto;padding:10px;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif
}
.tf-app *{box-sizing:border-box}
.tf-version{text-align:right;font-size:10px;font-weight:900;color:#646878;margin:0 6px 8px}
.tf-home-card,.tf-result-card{
  max-width:720px;margin:35px auto;padding:38px;border-radius:26px;background:#fff;
  border:1px solid #dfe4ef;box-shadow:0 18px 60px rgba(22,29,74,.12);text-align:center
}
.tf-logo{font-size:50px;font-weight:1000;letter-spacing:-2.5px;color:#20c89e}
.tf-logo span,.tf-mini-logo span{color:#ff755b}
.tf-sublogo{display:inline-block;margin-top:6px;padding:6px 10px;border-radius:999px;background:#e7fbf5;color:#08795d;font-size:10px;font-weight:950;letter-spacing:1.1px}
.tf-home-card h1{font-size:34px;line-height:1.1;color:#20253f}
.tf-muted{color:#7d8497}
.tf-app label{display:block;text-align:left;font-weight:900;margin:16px 0 6px}
.tf-app input,.tf-app select{width:100%;padding:13px 14px;border:1px solid #d9dfeb;border-radius:12px;font-size:15px;background:#fff}
.tf-home-actions,.tf-config-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}
.tf-app button{border:0;border-radius:12px;padding:12px 14px;font-weight:950;cursor:pointer}
.tf-primary,.tf-start-btn{background:#20c89e;color:#fff}
.tf-secondary{background:#e4f8f2;color:#08795d}
.tf-wide{width:100%;margin-top:9px}
.tf-status{display:inline-block;padding:6px 9px;border-radius:999px;font-size:12px;font-weight:900;background:#fff0c4;color:#6b5200}
.tf-status.online{background:#e1f9ed;color:#17613f}.tf-status.offline{background:#ffe8ec;color:#ad2945}
.tf-error{color:#b92b45}

.tf-shell{
  position:relative;background:linear-gradient(145deg,var(--panel2),var(--panel));
  border:4px solid #8b8fff;border-radius:28px;padding:16px;
  box-shadow:0 24px 70px rgba(22,20,87,.28),inset 0 0 0 2px rgba(255,255,255,.08);
  color:var(--white);overflow:hidden
}
.tf-shell:before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 20% 0%,rgba(255,255,255,.08),transparent 25%),
  linear-gradient(135deg,transparent 0 48%,rgba(255,255,255,.025) 48% 50%,transparent 50%);pointer-events:none}
.tf-topbar{
  position:relative;z-index:1;display:grid;grid-template-columns:220px 1fr auto;align-items:center;gap:14px;
  background:rgba(30,25,110,.34);border:2px solid #6f73f6;border-radius:20px;padding:12px 16px;margin-bottom:14px
}
.tf-mini-logo{font-size:28px;font-weight:1000;color:#ffd967;letter-spacing:-1px}
.tf-room-pill,.tf-round-pill{justify-self:center;background:#31298e;border:2px solid #777cff;border-radius:18px;padding:9px 16px;font-weight:900}
.tf-room-pill b,.tf-round-pill b{color:var(--cyan)}
.tf-top-actions{display:flex;gap:8px}.tf-icon-btn{background:#6c67df;color:#fff}.tf-exit{background:#b8b5ff;color:#2f2877}
.tf-layout{position:relative;z-index:1;display:grid;grid-template-columns:245px 1fr;gap:14px}
.tf-player-panel,.tf-main-panel,.tf-side-fun,.tf-review-info,.tf-review-main{
  background:rgba(38,31,142,.82);border:2px solid #6e73ee;border-radius:18px;padding:14px
}
.tf-player-panel h3{margin:0 0 10px;text-align:center;color:#dfe2ff;font-size:13px;letter-spacing:.8px}
.tf-player{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;padding:10px 11px;background:#d8d9ff;color:#2a2d73;border:2px solid #7c82f4;border-radius:13px}
.tf-player b{font-size:14px}.tf-player small{display:block;color:#4d56a9;font-weight:800}.tf-chip{background:#ffd75b;color:#4e3f00;padding:4px 7px;border-radius:999px;font-size:9px;font-weight:1000}
.tf-main-panel{background:rgba(45,38,161,.88)}
.tf-section-title{text-align:center;color:#ffd85f;font-weight:1000;font-size:24px;text-shadow:0 2px 0 #3a2f8f;margin:2px 0 16px}
.tf-theme-head{display:flex;align-items:end;justify-content:space-between;margin-top:18px}.tf-theme-head h3,.tf-theme-head p{margin:0}.tf-theme-head p{font-size:12px;color:#c8caff}
.tf-theme-head strong{background:#30278b;color:#9ff8e5;border:1px solid #777cff;border-radius:999px;padding:6px 9px}
.tf-category-picker{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 17px}
.tf-category-option{
  background:#aaaefb!important;color:#292b78!important;border:2px solid #767cf0!important;border-radius:12px!important;
  padding:10px 12px!important;box-shadow:inset 0 -3px rgba(67,58,164,.16)!important
}
.tf-category-option.tf-selected{
  background:#70efd1!important;color:#153f58!important;border-color:#b9fff0!important;
  box-shadow:0 0 0 3px rgba(112,239,209,.14),inset 0 -3px rgba(24,145,121,.15)!important
}
.tf-category-option.tf-selected:before{content:"✓ ";font-weight:1000}
.tf-start-btn{width:100%;font-size:16px;padding:14px!important;background:linear-gradient(#ffd968,#ffb84f)!important;color:#42346d!important;border:3px solid #fff1a7!important;box-shadow:0 5px 0 #b76b2d!important}

.tf-gamebar{grid-template-columns:190px 1fr auto auto}
.tf-letter-hex{
  width:128px;height:116px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#15105d;border:5px solid #b7b9ff;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  box-shadow:inset 0 0 0 4px #5b58db
}
.tf-letter-hex span{font-size:9px;letter-spacing:1.2px;color:#c9cbff}.tf-letter-hex strong{font-size:58px;line-height:1;color:var(--cyan)}
.tf-small-hex{width:108px;height:96px}.tf-small-hex strong{font-size:46px}
.tf-game-layout{grid-template-columns:240px 1fr 230px}
.tf-play-panel{padding:14px}
.tf-answer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tf-field{background:#6966da;border:2px solid #8589f5;border-radius:14px;padding:8px}
.tf-field label{margin:0 0 6px;text-align:center;font-size:12px;color:#e9eaff;text-transform:uppercase}
.tf-field input{background:#c8caff;border:2px solid #8d91f6;border-radius:10px;color:#24275f;font-weight:800;padding:10px}
.tf-field input:focus{outline:3px solid var(--cyan);background:#fff}
.tf-stop-banner{background:#fff0a9;color:#514100;border:2px solid #ffd257;padding:10px;border-radius:12px;text-align:center;font-weight:950;margin-bottom:10px}
.tf-bottom-game{display:grid;grid-template-columns:1fr 210px;gap:12px;align-items:center;margin-top:14px}
.tf-time-track{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;background:#29217f;border:2px solid #6e73ee;border-radius:999px;padding:8px 12px}
.tf-clock{font-size:24px}.tf-time-bar{height:15px;background:#4539a6;border-radius:999px;overflow:hidden}.tf-time-bar span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff764c,#ffb54b);transition:width 1s linear}
.tf-stop-btn{background:linear-gradient(#ffe27b,#ffc356)!important;color:#3d3370!important;border:3px solid #fff2ad!important;border-radius:18px!important;font-size:20px;box-shadow:0 5px 0 #a95e2f!important}
.tf-side-fun{text-align:center;color:#c3c6ff;display:flex;flex-direction:column;justify-content:center}.tf-fun-title{font-size:12px;font-weight:1000}.tf-fun-icon{font-size:62px;margin:15px 0}

.tf-review-layout{position:relative;z-index:1;display:grid;grid-template-columns:230px 1fr;gap:14px}
.tf-review-info{text-align:center}.tf-review-cat{font-size:18px;font-weight:1000;color:#fff;margin-bottom:10px}.tf-review-rule{margin-top:10px;background:#6ef0ce;color:#163e4e;border-radius:999px;padding:8px;font-size:11px;font-weight:950}.tf-review-rule.bad{background:#ff8da1;color:#6d1d34}
.tf-review-main{background:#332b9c}
.tf-review-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tf-review-answer{position:relative;border-radius:999px;padding:11px 14px;background:#b9bcff;color:#2d2f79;border:2px solid #888df6;font-weight:950;text-align:center;cursor:pointer;user-select:none}
.tf-review-answer.valid{background:#79efd1;color:#174c51;border-color:#b8fff0}
.tf-review-answer.invalid{background:#ff91a5;color:#6b1c34;border-color:#ffc4ce}
.tf-review-answer .who{display:block;font-size:9px;opacity:.72;margin-bottom:2px}
.tf-review-answer .state{display:block;font-size:9px;margin-top:3px}
.tf-review-footer{display:grid;grid-template-columns:1fr 220px;gap:14px;align-items:center;margin-top:16px}
.tf-progress{height:10px;background:#241d78;border-radius:999px;overflow:hidden;margin-top:6px}.tf-progress span{display:block;height:100%;width:0;background:var(--cyan)}
.tf-vote-progress{font-size:12px;color:#d7d9ff}
.tf-validate-btn{background:linear-gradient(#ffe278,#ffc24e)!important;color:#42346b!important;border:3px solid #fff1a7!important;font-size:16px;box-shadow:0 4px 0 #a86130!important}
.tf-validate-btn:disabled{filter:grayscale(.2);opacity:.65}

.tf-result-card .tf-rank{display:grid;grid-template-columns:46px 1fr auto;align-items:center;padding:12px;border-bottom:1px solid #eceef5;text-align:left}.tf-result-card .tf-rank:first-child{background:#fff8d8;border-radius:12px}
.tf-result-exit{float:right;background:#eeeefa;color:#393d79}
.tf-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;background:#17145d;color:#fff;border:2px solid #7b80ff;border-radius:12px;padding:10px 14px;font-weight:900;transition:.2s;z-index:99999}.tf-toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:980px){
  .tf-game-layout{grid-template-columns:200px 1fr}.tf-side-fun{display:none}.tf-answer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .tf-shell{padding:10px;border-radius:20px}.tf-topbar,.tf-gamebar{grid-template-columns:1fr auto}.tf-mini-logo{font-size:22px}.tf-room-pill,.tf-round-pill{justify-self:end}.tf-letter-hex{grid-column:1/-1;justify-self:center}.tf-layout,.tf-game-layout,.tf-review-layout,.tf-config-row{grid-template-columns:1fr}.tf-answer-grid{grid-template-columns:1fr 1fr}.tf-bottom-game,.tf-review-footer{grid-template-columns:1fr}.tf-review-pills{grid-template-columns:1fr}.tf-player-panel{order:2}.tf-home-card{padding:26px 18px}
}
\n/* v1.0: selects legibles con temas oscuros/WordPress */\n.tf-app select{background:#0d1622!important;color:#f7f9fc!important;border-color:#314258!important;-webkit-text-fill-color:#f7f9fc!important}\n.tf-app select option{background:#ffffff!important;color:#111827!important;-webkit-text-fill-color:#111827!important}\n.tf-app select:focus{outline:2px solid #17e2f4!important;outline-offset:1px}\n
/* v1.1 - legibilidad consistente */
.tf-result-card .tf-rank:first-child,
.tf-card .tf-rank:first-child{
  background:#fff4bf!important;
  color:#171946!important;
}
.tf-result-card .tf-rank:first-child b,
.tf-result-card .tf-rank:first-child strong,
.tf-result-card .tf-rank:first-child span,
.tf-card .tf-rank:first-child b,
.tf-card .tf-rank:first-child strong,
.tf-card .tf-rank:first-child span{
  color:#171946!important;
  -webkit-text-fill-color:#171946!important;
}
.tf-result-card .tf-rank:not(:first-child),
.tf-card .tf-rank:not(:first-child){
  color:#f7f9fc!important;
}