/* Chessty — identidad visual Concepto: "sala de análisis nocturna". Un jugador estudiando de noche: ambiente azul profundo, luz cálida de lámpara sobre el tablero, datos en cian frío y notación en monoespaciada, como en un cuaderno. Deliberadamente distinto del verde de club de otras plataformas. Sin fuentes externas: nada sale del servidor (CSP y privacidad). */ :root{ /* superficies: azul noche con temperatura fría */ --bg:#0c0f18; --bg-2:#111524; --panel:#171d30; --panel2:#1f2740; --panel3:#2a3352; --line:#2b3350; --text:#e9ecf5; --dim:#8790ab; /* acento cálido: la lámpara sobre la mesa */ --acc:#e2a03f; --acc-hi:#f3bc68; --acc-sh:#9c6a1d; --acc-dim:#4a3a20; /* el mismo acento cuando hace de TEXTO pequeño: sobre papel el ámbar luminoso no llega al contraste mínimo, así que allí se oscurece. Sobre fondo oscuro no hay diferencia. */ --acc-txt:#e2a03f; /* acento frío: datos, evaluación, enlaces */ --data:#4fd1e0; --data-dim:#1d4550; /* tablero: pergamino sobre pizarra azulada */ --sq-l:#e4dac4; --sq-d:#47567c; --coord-l:#47567c; --coord-d:#e4dac4; --mark:rgba(226,160,63,.42); /* última jugada / selección */ --mark-hi:rgba(243,188,104,.62); /* clasificación de jugadas (las lee app.js por nombre: no renombrar) */ --best:#4fd1e0; --exc:#7ee0b8; --good:#8790ab; --inac:#e2a03f; --err:#ef8a52; --blun:#e35d76; --ok:#7ee0b8; --ko:#e35d76; --shadow:0 18px 44px rgba(0,0,0,.55); --shadow-sm:0 4px 16px rgba(0,0,0,.35); --r:10px; --r-lg:14px; /* superficies derivadas: el modo claro solo redefine estas, sin tocar reglas */ --panel-b:#131829; /* segundo color del degradado de tarjeta */ --sunken:rgba(0,0,0,.3); /* campos, gráficas, chat: fondo hundido */ --stripe:rgba(255,255,255,.028); /* rayado de tablas */ --edge:rgba(255,255,255,.05); /* filo sutil de tarjetas y controles */ --overlay:rgba(6,8,14,.76); /* velo de los superpuestos */ --header-a:rgba(23,29,48,.92); --header-b:rgba(12,15,24,.72); --titulo-a:#ffffff; --titulo-b:#c9d0e4; --frame-a:#242c46; --frame-b:#141a2b; --halo:rgba(226,160,63,.10); --grano:.5; --font:'Segoe UI Variable Text','Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; --font-display:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif; --font-mono:'Cascadia Mono','SF Mono','JetBrains Mono',Consolas,'Roboto Mono',monospace; } /* Modo claro: la misma sala, pero de día. Papel cálido y tinta azul en vez de noche y lámpara. Los acentos se oscurecen para mantener el contraste sobre fondo claro (el ámbar brillante sería ilegible). La clase la pone tema.js sobre , antes del primer pintado. */ html.light{ --bg:#f1eee6; --bg-2:#faf8f4; --panel:#ffffff; --panel2:#f0ece3; --panel3:#e2ddd1; --line:#ddd7c9; --text:#1b2135; --dim:#5f6880; --acc:#a9711a; --acc-hi:#c68a2c; --acc-sh:#8a5a10; --acc-dim:#f6e8cf; --acc-txt:#7a5210; --data:#0c6c7d; --data-dim:#d5edf1; /* la clasificación de jugadas se usa sobre todo como texto (lista, tarjeta del entrenador, tabla de la revisión): estos tonos están elegidos para superar 4.5:1 sobre papel, no para igualar a los del modo oscuro */ --best:#0c6c7d; --exc:#15774f; --good:#5f6880; --inac:#7a5210; --err:#a84f1c; --blun:#c03a52; --ok:#15774f; --ko:#c03a52; --shadow:0 14px 36px rgba(31,38,60,.14); --shadow-sm:0 2px 10px rgba(31,38,60,.09); --panel-b:#fbf9f5; --sunken:rgba(27,33,53,.045); --stripe:rgba(27,33,53,.032); --edge:rgba(27,33,53,.09); --overlay:rgba(40,46,66,.42); --header-a:rgba(255,255,255,.94); --header-b:rgba(250,248,244,.8); --titulo-a:#1b2135; --titulo-b:#3d4867; --frame-a:#e7e1d3; --frame-b:#d8d1c0; --halo:rgba(169,113,26,.07); --grano:.25; } /* temas alternativos de tablero (los nombres de clase los fija app.js) */ body.theme-blue{ --sq-l:#efe4cb; --sq-d:#8a6534; --coord-l:#8a6534; --coord-d:#efe4cb; } body.theme-wood{ --sq-l:#e8e6df; --sq-d:#6d7284; --coord-l:#6d7284; --coord-d:#e8e6df; } *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;} body{ color:var(--text); font-family:var(--font); min-height:100vh; /* color sólido de base: los degradados fijos solo cubren el viewport y dejarían el fondo del navegador a la vista en páginas largas */ background-color:var(--bg); background-image: /* halo de lámpara, cálido y alto */ radial-gradient(900px 420px at 50% -140px, var(--halo), transparent 70%), radial-gradient(1100px 700px at 50% 0%, var(--bg-2), transparent 62%); background-repeat:no-repeat; background-attachment:fixed; position:relative; } /* grano tenue: le quita el plano digital al fondo */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:var(--grano); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.6 0 0 0 0 0.75 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Solo posicionados, SIN z-index: basta para quedar por encima del grano (que es ::before, primero en el árbol) y evita crear contextos de apilamiento que atraparían el z-index de los overlays hijos. */ body > *{position:relative;} ::selection{background:var(--acc); color:#1a1205;} :focus-visible{outline:2px solid var(--data); outline-offset:2px;} *::-webkit-scrollbar{width:10px; height:10px;} *::-webkit-scrollbar-track{background:transparent;} *::-webkit-scrollbar-thumb{background:var(--panel3); border-radius:6px; border:2px solid transparent; background-clip:content-box;} *::-webkit-scrollbar-thumb:hover{background:var(--dim); background-clip:content-box;} header{ padding:11px 18px; display:flex; align-items:center; gap:13px; flex-wrap:wrap; border-bottom:1px solid var(--line); background:linear-gradient(180deg, var(--header-a), var(--header-b)); backdrop-filter:blur(8px); } header .logo{font-size:23px; color:var(--acc-txt); filter:drop-shadow(0 2px 6px rgba(226,160,63,.35));} header h1{ font-family:var(--font-display); font-size:21px; font-weight:600; letter-spacing:.01em; white-space:nowrap; background:linear-gradient(180deg,var(--titulo-a),var(--titulo-b)); -webkit-background-clip:text; background-clip:text; color:transparent; } header .sub{ color:var(--dim); font-size:11.5px; margin-left:auto; font-weight:600; font-family:var(--font-mono); letter-spacing:-.01em; } /* pestañas */ #tabs{display:flex; gap:2px; flex-wrap:wrap;} .tab{ background:transparent; color:var(--dim); border:none; border-radius:8px 8px 0 0; padding:9px 12px; font-size:12.5px; font-weight:650; cursor:pointer; flex:none; transition:color .16s, background .16s; position:relative; letter-spacing:.01em; } .tab:hover{color:var(--text); background:var(--edge);} .tab.active{color:var(--text); background:var(--acc-dim);} .tab.active::after{ content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; background:linear-gradient(90deg,transparent,var(--acc),transparent); border-radius:2px; } .wrap{display:flex; gap:18px; padding:18px; max-width:1220px; margin:0 auto; align-items:flex-start; flex-wrap:wrap; justify-content:center;} /* espacios publicitarios 4 huecos: superior, laterales e inferior. Los laterales solo aparecen si la ventana da de sí; en Premium se ocultan todos con body.no-ads. */ #pagerow{display:flex; justify-content:center; align-items:flex-start; gap:16px; padding:0 8px;} #maincol{flex:1 1 auto; min-width:0; max-width:1220px;} .adslot{ position:relative; border:1px dashed var(--line); border-radius:var(--r); background:repeating-linear-gradient(45deg,var(--stripe),var(--stripe) 10px,transparent 10px,transparent 20px); display:flex; align-items:center; justify-content:center; overflow:hidden; } .adslot .adlabel{color:#5c6480; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-align:center; padding:6px; pointer-events:none;} .adslot:empty{display:none;} .adtop,.adbottom{width:min(96vw,728px); height:90px; margin:14px auto;} .adside{width:160px; height:600px; flex:0 0 160px; position:sticky; top:14px;} @media (max-width:1560px){ .adside{display:none;} } @media (max-width:700px){ .adtop,.adbottom{height:60px;} } body.no-ads .adslot{display:none;} /* tablero */ .board-zone{display:flex; gap:10px;} .evalbar{ width:20px; border-radius:5px; overflow:hidden; position:relative; align-self:stretch; background:var(--sq-d); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), inset 0 0 12px rgba(0,0,0,.4); } .evalbar .white-fill{ position:absolute; bottom:0; left:0; right:0; height:50%; background:linear-gradient(180deg,var(--sq-l),#cdc2a8); transition:height .65s cubic-bezier(.32,.72,.32,1); } .evalbar .num{position:absolute; left:0; right:0; text-align:center; font-size:9px; font-weight:700; z-index:2; font-family:var(--font-mono);} .evalbar .num.top{top:5px; color:rgba(255,255,255,.8);} .evalbar .num.bot{bottom:5px; color:#2a2317;} body.noeval .evalbar, body.no-coach .evalbar{display:none;} .board-col{display:flex; flex-direction:column; gap:8px;} .board-frame{ padding:9px; border-radius:var(--r-lg); position:relative; background:linear-gradient(158deg,var(--frame-a),var(--frame-b)); box-shadow:var(--shadow), inset 0 1px 0 var(--edge); } /* filo de luz cálida en el borde superior: la lámpara */ .board-frame::before{ content:""; position:absolute; inset:0; border-radius:var(--r-lg); pointer-events:none; background:linear-gradient(180deg, rgba(226,160,63,.16), transparent 32%); } #board{ display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); width:min(86vw,560px); aspect-ratio:1/1; border-radius:5px; overflow:hidden; user-select:none; position:relative; box-shadow:0 0 0 1px rgba(0,0,0,.4); } .sq{position:relative; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; min-width:0; min-height:0;} .sq.light{background:var(--sq-l);} .sq.dark{background:var(--sq-d);} .sq .coord{position:absolute; font-size:9.5px; font-weight:700; pointer-events:none; z-index:1; line-height:1; font-family:var(--font-mono); opacity:.75;} .sq .coord.rank{top:3px; left:3px;} .sq .coord.file{bottom:2px; right:3px;} .sq.light .coord{color:var(--coord-l);} .sq.dark .coord{color:var(--coord-d);} .sq .layer{position:absolute; inset:0; pointer-events:none;} .sq.lastmove .layer.lm{background:var(--mark);} .sq.selected .layer.sel{background:var(--mark-hi); box-shadow:inset 0 0 0 3px rgba(243,188,104,.8);} .sq.incheck .layer.chk{background:radial-gradient(circle at 50% 45%, rgba(227,93,118,.9) 14%, rgba(227,93,118,.4) 55%, transparent 76%);} .sq .dot{position:absolute; width:26%; height:26%; border-radius:50%; background:rgba(20,26,43,.3); pointer-events:none; z-index:2; transition:transform .12s ease;} .sq:hover .dot{transform:scale(1.3); background:rgba(20,26,43,.42);} .sq .ring{position:absolute; inset:3%; border-radius:50%; border:5px solid rgba(20,26,43,.3); pointer-events:none; z-index:2;} .piece{font-size:clamp(28px, 7.6vmin, 50px); line-height:1; z-index:3; pointer-events:none; will-change:transform;} /* Los glifos Unicode de ajedrez son todos macizos, así que el bando lo distingue el relleno y el trazo de contorno: blanco puro con filo oscuro frente a casi negro con filo claro. Contraste fuerte sobre ambas casillas. */ .piece.w{color:#ffffff; -webkit-text-stroke:1.5px #1b2236; text-shadow:0 2px 5px rgba(0,0,0,.5);} .piece.b{color:#0f1420; -webkit-text-stroke:1.1px #a9b2c9; text-shadow:0 2px 5px rgba(0,0,0,.45);} .piece.anim{transition:transform .18s cubic-bezier(.3,.7,.4,1);} #arrowlayer{position:absolute; inset:9px; pointer-events:none; z-index:5;} /* --badge lo pone app.js con el color de la clasificación; así el modo claro puede darle la vuelta (píldora blanca con tinta de color) sin que un estilo en línea se lo impida. */ #movebadge{ position:absolute; top:13px; left:50%; transform:translateX(-50%) translateY(-6px); z-index:9; padding:7px 17px; border-radius:20px; font-weight:750; font-size:13.5px; background:var(--badge,var(--acc)); color:#10131f; display:none; box-shadow:0 6px 20px rgba(0,0,0,.5); opacity:0; transition:opacity .2s, transform .2s; letter-spacing:.01em; } #movebadge.show{display:block; opacity:1; transform:translateX(-50%) translateY(0);} .player-row{display:flex; align-items:center; gap:10px; padding:2px 6px;} .player-row .avatar{ width:37px; height:37px; border-radius:9px; background:var(--panel2); display:flex; align-items:center; justify-content:center; font-size:21px; box-shadow:0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); } .player-row .pname{font-weight:700; font-size:14px;} .player-row .pelo{color:var(--dim); font-size:11.5px; font-family:var(--font-mono);} .player-row .caps{margin-left:6px; font-size:15px; letter-spacing:-2px; color:#b6bdd2; min-height:18px;} .player-row .mat{font-size:11.5px; color:var(--acc-txt); font-weight:700; margin-left:2px; font-family:var(--font-mono);} .player-row .thinking{margin-left:auto; font-size:11.5px; color:var(--acc-txt); display:none; letter-spacing:.02em;} .player-row .thinking.on{display:block; animation:blink 1.4s ease-in-out infinite;} .player-row .clock{ margin-left:auto; font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; font-family:var(--font-mono); background:var(--sunken); color:var(--dim); padding:5px 13px; border-radius:8px; display:none; letter-spacing:.02em; box-shadow:inset 0 0 0 1px var(--edge); } .player-row .clock.on{display:block;} .player-row .clock.active{background:var(--sq-l); color:#1d2438; box-shadow:0 0 18px rgba(226,160,63,.22);} .player-row .clock.low{background:#4a1f2a; color:#ffb3c0; box-shadow:inset 0 0 0 1px rgba(227,93,118,.4);} .player-row .thinking.on ~ .clock{margin-left:8px;} @keyframes blink{50%{opacity:.4}} /* panel */ .side{width:350px; max-width:94vw; display:flex; flex-direction:column; gap:12px;} .card{ background:linear-gradient(168deg,var(--panel),var(--panel-b)); border-radius:var(--r-lg); padding:15px; box-shadow:var(--shadow-sm); border:1px solid var(--edge); } .card h2{ font-size:11px; text-transform:uppercase; letter-spacing:.13em; color:var(--dim); margin-bottom:11px; font-weight:700; display:flex; align-items:center; gap:8px; } .card .help{font-size:12px; color:var(--dim); line-height:1.55; margin-bottom:10px;} .chip{ background:var(--panel3); color:var(--text); font-size:10px; padding:3px 9px; border-radius:20px; letter-spacing:.02em; text-transform:none; font-weight:650; } .chip.green{background:var(--data-dim); color:var(--data);} .chip.orange{background:var(--acc-dim); color:var(--acc-hi);} .bots{display:grid; grid-template-columns:repeat(4,1fr); gap:7px;} .bot{ background:var(--panel2); border:1px solid transparent; border-radius:var(--r); padding:9px 4px; text-align:center; cursor:pointer; transition:transform .14s, border-color .14s, background .14s; } .bot:hover{border-color:var(--panel3); transform:translateY(-2px);} .bot.sel{border-color:var(--acc); background:var(--acc-dim); box-shadow:0 0 16px rgba(226,160,63,.16);} .bot .bico{font-size:22px;} .bot .bname{font-size:10.5px; font-weight:700; margin-top:2px;} .bot .belo{font-size:10px; color:var(--dim); font-family:var(--font-mono);} .row{display:flex; gap:8px; flex-wrap:wrap;} button{ background:var(--panel2); color:var(--text); border:1px solid var(--edge); border-radius:var(--r); padding:10px 12px; font-size:12.5px; font-weight:650; cursor:pointer; transition:background .15s, transform .1s, border-color .15s; flex:1; font-family:inherit; } button:hover{background:var(--panel3); border-color:rgba(255,255,255,.1);} button:active{transform:translateY(1px);} button.primary{ background:linear-gradient(180deg,var(--acc-hi),var(--acc)); color:#1d1305; border-color:rgba(255,255,255,.18); font-weight:700; box-shadow:0 2px 0 var(--acc-sh), 0 6px 18px rgba(226,160,63,.22); text-shadow:0 1px 0 rgba(255,255,255,.25); } button.primary:hover{filter:brightness(1.07); box-shadow:0 2px 0 var(--acc-sh), 0 8px 24px rgba(226,160,63,.32);} button.primary:active{transform:translateY(2px); box-shadow:0 0 0 var(--acc-sh);} button.danger{background:#3a1d28; color:#f0a8b6; border-color:rgba(227,93,118,.28);} button.danger:hover{background:#4a2433;} button:disabled{opacity:.42; cursor:not-allowed; transform:none;} .selrow{display:flex; align-items:center; gap:8px; font-size:12.5px; flex:1;} select{ flex:1; background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:9px; padding:9px; font-size:12.5px; font-weight:650; min-width:0; max-width:100%; font-family:inherit; } textarea{ width:100%; background:var(--sunken); color:var(--text); border:1px solid var(--line); border-radius:9px; padding:10px; font-size:12px; font-family:var(--font-mono); resize:vertical; } .toggle-row{display:flex; align-items:center; justify-content:space-between; padding:6px 0; gap:10px;} .toggle-row span{font-size:12.5px;} .switch{ position:relative; width:42px; height:23px; min-width:42px; background:var(--panel3); border-radius:12px; cursor:pointer; transition:background .22s; box-shadow:inset 0 1px 3px rgba(0,0,0,.45); } .switch.on{background:linear-gradient(180deg,var(--acc-hi),var(--acc)); box-shadow:0 0 14px rgba(226,160,63,.3);} .switch::after{ content:""; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#fff; transition:left .22s cubic-bezier(.4,1.3,.5,1); box-shadow:0 1px 3px rgba(0,0,0,.5); } .switch.on::after{left:22px;} .themes{display:flex; gap:8px;} .theme{width:38px; height:26px; border-radius:6px; cursor:pointer; border:2px solid transparent; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; transition:transform .14s;} .theme:hover{transform:translateY(-1px);} .theme.sel{border-color:var(--acc);} .theme i{display:block;} #coachbox{font-size:12.5px; line-height:1.6; min-height:52px; color:var(--dim);} #coachbox b{color:var(--text);} #coachbox .pv{color:var(--data); font-weight:600; font-family:var(--font-mono); font-size:12px;} #coachbox .why{color:var(--acc-hi);} .feedback{ font-size:12.5px; line-height:1.6; min-height:40px; color:var(--dim); border-radius:9px; padding:9px 11px; background:var(--stripe); margin-top:6px; border-left:2px solid var(--panel3); } .feedback b{color:var(--text);} .feedback.ok{background:rgba(126,224,184,.09); border-left-color:var(--ok); color:#bdecd7;} .feedback.ko{background:rgba(227,93,118,.1); border-left-color:var(--ko); color:#f3bcc6;} #openingline{font-size:11.5px; color:var(--acc-txt); font-weight:650; min-height:16px; margin-bottom:7px; letter-spacing:.01em;} #moves{max-height:210px; overflow-y:auto; font-size:12.5px; border-radius:8px; font-family:var(--font-mono);} #moves table{width:100%; border-collapse:collapse;} #moves td{padding:4px 6px;} #moves tr:nth-child(odd){background:var(--stripe);} #moves .num{color:var(--dim); width:28px; font-weight:400;} #moves .mv{cursor:pointer; border-radius:4px; font-weight:600; transition:background .12s;} #moves .mv:hover{background:var(--panel2);} #moves .mv.cur{background:var(--acc-dim); box-shadow:inset 0 0 0 1px var(--acc);} .q{font-size:11px; font-weight:800; margin-left:4px;} .nav{display:flex; gap:6px;} .nav button{padding:8px 0;} #status,#anstatus{font-size:12.5px; color:var(--dim); text-align:center; min-height:18px; line-height:1.5;} /* revisión */ .progress{height:8px; background:var(--sunken); border-radius:6px; overflow:hidden; margin-bottom:7px;} .progress > div{height:100%; width:0%; background:linear-gradient(90deg,var(--acc),var(--acc-hi)); transition:width .3s; box-shadow:0 0 12px rgba(226,160,63,.5);} .acc-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:11px;} .acc-box{background:var(--panel2); border-radius:var(--r); padding:11px; text-align:center; border:1px solid var(--edge);} .acc-num{font-size:25px; font-weight:600; font-family:var(--font-mono); color:var(--data); letter-spacing:-.02em;} .acc-lbl{font-size:10.5px; color:var(--dim); font-weight:600; margin-top:1px;} #evalgraph{width:100%; height:90px; background:var(--sunken); border-radius:9px; margin-bottom:10px; display:block;} #revcounts{width:100%; border-collapse:collapse; font-size:12px; margin-bottom:8px;} #revcounts td{padding:4px 6px; text-align:center; font-family:var(--font-mono);} #revcounts td:first-child{text-align:left; font-weight:600; font-family:var(--font);} #revcounts tr:nth-child(odd){background:var(--stripe);} #revdetail{min-height:30px; font-size:12px; line-height:1.55;} #revdetail b{color:var(--text);} /* finales */ #eglist{display:flex; flex-direction:column; gap:6px; max-height:300px; overflow-y:auto;} .egitem{ display:flex; align-items:center; gap:8px; background:var(--panel2); border:1px solid transparent; border-radius:9px; padding:9px 11px; cursor:pointer; transition:border-color .14s, background .14s; font-size:12.5px; } .egitem:hover{border-color:var(--panel3);} .egitem.sel{border-color:var(--acc); background:var(--acc-dim);} .egitem .egname{font-weight:650; flex:1;} .egitem .egdiff{font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em;} .egitem .egok{color:var(--ok); font-weight:800;} /* progreso */ #progressview{max-width:980px; margin:0 auto; padding:18px; flex-direction:column; gap:14px;} .pgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;} .pcard{ background:linear-gradient(168deg,var(--panel),var(--panel-b)); border-radius:var(--r-lg); padding:15px; box-shadow:var(--shadow-sm); text-align:center; border:1px solid var(--edge); } .pcard .pnum{font-size:27px; font-weight:600; font-family:var(--font-mono); color:var(--acc); letter-spacing:-.02em;} .pcard .pnum small{font-size:13px; color:var(--dim); font-weight:600;} .pcard .plbl{font-size:10px; color:var(--dim); font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-top:4px;} .pcard .psub{font-size:10.5px; color:var(--dim); margin-top:5px; line-height:1.4;} .card.wide{width:100%;} #elograph{width:100%; height:140px; background:var(--sunken); border-radius:9px; display:block;} #ghist{overflow-x:auto;} #ghist table{width:100%; border-collapse:collapse; font-size:12.5px; min-width:560px;} #ghist th{color:var(--dim); text-align:left; padding:7px 8px; font-size:10px; text-transform:uppercase; letter-spacing:.09em;} #ghist td{padding:8px; border-top:1px solid var(--edge);} #ghist .res{font-weight:800; font-family:var(--font-mono);} #ghist .res.W{color:var(--ok);} #ghist .res.L{color:var(--ko);} #ghist .res.D{color:var(--dim);} #ghist button{flex:none; padding:5px 10px; font-size:11px;} .delta-pos{color:var(--ok); font-weight:700; font-family:var(--font-mono);} .delta-neg{color:var(--ko); font-weight:700; font-family:var(--font-mono);} /* cuenta / acceso */ #userbox{display:flex; align-items:center; gap:8px; margin-left:12px;} #userbox .uname{font-size:12.5px; font-weight:650; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .chip.clickable{cursor:pointer; transition:filter .15s;} .chip.clickable:hover{filter:brightness(1.25);} button.mini{flex:none; padding:6px 11px; font-size:11px; background:var(--panel2);} .linklike{background:none; border:none; color:var(--data); font-weight:650; font-size:12px; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:2px;} .linklike:hover{color:#8ee4ee;} #guestbox{display:flex; align-items:center; gap:8px; margin-left:12px;} #guestbox .mini.primary{background:linear-gradient(180deg,var(--acc-hi),var(--acc)); color:#1d1305; padding:7px 13px; font-size:11.5px;} #authview{position:fixed; inset:0; background:var(--overlay); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; z-index:100;} .authbox{ position:relative; background:linear-gradient(168deg,var(--panel),var(--panel-b)); border-radius:18px; padding:30px; width:min(92vw,380px); box-shadow:var(--shadow); border:1px solid var(--edge); animation:pop .26s; } .xclose{position:absolute; top:11px; right:11px; width:30px; height:30px; flex:none; padding:0; border-radius:8px; background:transparent; border:none; color:var(--dim); font-size:15px;} .xclose:hover{background:var(--panel2); color:var(--text);} .linklike.wide{display:block; width:100%; text-align:center;} .authbrand{font-size:23px; text-align:center; margin-bottom:8px; font-family:var(--font-display); font-weight:600;} .authbrand .logo{font-size:27px; color:var(--acc);} .authtabs{display:flex; gap:6px; margin:16px 0 13px;} .authtab{flex:1; background:var(--sunken); color:var(--dim); border:1px solid transparent; border-radius:9px; padding:9px; font-weight:650; font-size:12.5px; cursor:pointer;} .authtab:hover{color:var(--text);} .authtab.active{background:var(--acc-dim); color:#fff; border-color:var(--acc); box-shadow:0 2px 10px var(--sunken);} .authbox input[type=email], .authbox input[type=password], .authbox input[type=text]{ width:100%; background:var(--sunken); color:var(--text); border:1px solid var(--line); border-radius:9px; padding:12px; font-size:13.5px; margin-bottom:9px; font-family:inherit; transition:border-color .15s; } .authbox input:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(226,160,63,.14);} button.wide{width:100%;} .gbtn{display:block; text-align:center; margin-top:9px; background:#fff; color:#1f2430; border-radius:9px; padding:11px; font-weight:700; font-size:12.5px; text-decoration:none; transition:filter .15s;} .gbtn:hover{filter:brightness(.94);} .terms-row{display:flex; gap:8px; align-items:flex-start; font-size:11.5px; color:var(--dim); margin:6px 0 11px; line-height:1.5;} .terms-row input{margin-top:2px; accent-color:var(--acc);} .terms-row a{color:var(--data);} .authfoot{text-align:center; font-size:11px; color:var(--dim); margin-top:15px;} .authfoot a{color:var(--dim);} #paywall{position:fixed; inset:0; background:var(--overlay); backdrop-filter:blur(5px); display:none; align-items:center; justify-content:center; z-index:70;} #paywall .box{ background:linear-gradient(168deg,var(--panel),var(--panel-b)); border-radius:16px; padding:28px 30px; text-align:center; max-width:420px; width:92vw; box-shadow:var(--shadow); border:1px solid rgba(226,160,63,.2); animation:pop .26s; } #paywall h3{font-size:22px; margin-bottom:8px; font-family:var(--font-display); font-weight:600; color:var(--acc-hi);} #paywall p{color:var(--dim); font-size:13.5px; margin-bottom:10px;} .pwlist{list-style:none; text-align:left; font-size:12.5px; line-height:2; margin:0 0 14px; padding:0 4px; color:var(--text);} #foot{text-align:center; color:var(--dim); font-size:11px; padding:22px 10px 30px; line-height:1.8;} #foot a{color:var(--dim); text-decoration:none; display:inline-block; padding:3px 2px;} #foot a:hover{color:var(--text);} /* inline-block y line-height propios: con la interlínea heredada del pie, la caja de línea se solapaba sobre el botón y se comía sus clics */ #foot .linklike{font-size:11px; color:var(--dim); text-decoration:none; display:inline-block; line-height:1.4; padding:3px 2px; vertical-align:baseline;} #foot .linklike:hover{color:var(--text); text-decoration:underline;} /* mi cuenta / borrado */ #cuentainfo{line-height:1.65;} #cuentainfo b{color:var(--text);} #delmodal{position:fixed; inset:0; background:var(--overlay); backdrop-filter:blur(5px); display:none; align-items:center; justify-content:center; z-index:80;} #delmodal .box{background:linear-gradient(168deg,var(--panel),var(--panel-b)); border-radius:16px; padding:28px 30px; max-width:440px; width:92vw; box-shadow:var(--shadow); border:1px solid rgba(227,93,118,.24); animation:pop .26s;} #delmodal h3{font-size:20px; margin-bottom:11px; color:var(--ko); font-family:var(--font-display); font-weight:600;} #delmodal p{color:var(--dim); font-size:13px; margin-bottom:10px; line-height:1.6;} #delmodal input{width:100%; background:var(--sunken); color:var(--text); border:1px solid var(--line); border-radius:9px; padding:12px; font-size:14px; font-weight:650; letter-spacing:.12em; font-family:var(--font-mono);} /* barra de cookies */ #cookiebar{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap; background:linear-gradient(180deg,var(--panel2),var(--panel)); border-top:1px solid var(--line); padding:15px 18px; box-shadow:0 -8px 30px rgba(0,0,0,.5); backdrop-filter:blur(8px); } #cookiebar.on{display:flex;} #cookiebar .cbtext{font-size:12px; color:var(--dim); max-width:640px; line-height:1.6;} #cookiebar .cbtext a{color:var(--data);} #cookiebar .cbbtns{display:flex; gap:8px; flex-wrap:wrap;} #cookiebar button{flex:none; padding:10px 18px; font-size:12px;} @media (max-width:700px){ #cookiebar{flex-direction:column; align-items:stretch; text-align:center;} #cookiebar .cbbtns{justify-content:center;} } /* multijugador en vivo */ .livedot{display:inline-block; width:6px; height:6px; border-radius:50%; background:#49516b; margin-left:4px; vertical-align:middle;} .livedot.on{background:var(--data); box-shadow:0 0 8px var(--data); animation:pulso 2.2s ease-in-out infinite;} @keyframes pulso{50%{opacity:.4}} .livegame-row{ display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; background:var(--panel2); border-radius:var(--r); padding:10px 12px; margin-bottom:7px; border:1px solid transparent; transition:border-color .14s; } .livegame-row:hover{border-color:var(--panel3);} .livegame-row .lg-players{font-size:12.5px; grid-column:1;} .livegame-row .lg-meta{font-size:10.5px; color:var(--dim); grid-column:1; font-family:var(--font-mono);} .livegame-row button{grid-column:2; grid-row:1/3; flex:none; padding:8px 13px; font-size:11.5px;} .lg-elo{color:var(--data); font-size:10.5px; font-weight:600; font-family:var(--font-mono);} .lg-vs{color:var(--dim); font-size:10.5px; margin:0 4px;} #chatlog{height:230px; overflow-y:auto; background:var(--sunken); border-radius:var(--r); padding:11px; font-size:12.5px; line-height:1.55; border:1px solid var(--edge);} .chatmsg{margin-bottom:7px; word-wrap:break-word;} .chat-de{font-weight:700; color:var(--acc-txt); margin-right:5px;} .chat-de.clickable{cursor:pointer; text-decoration:underline dotted; text-underline-offset:2px;} .chat-de.clickable:hover{color:var(--acc-hi);} .chatmsg.mio .chat-de{color:var(--data);} .chat-txt{color:var(--text);} .chatbar{display:flex; gap:7px; margin-top:10px;} .chatbar input{ flex:1; min-width:0; background:var(--sunken); color:var(--text); border:1px solid var(--line); border-radius:9px; padding:11px 12px; font-size:12.5px; font-family:inherit; } .chatbar input:focus{outline:none; border-color:var(--acc);} .chatbar button{flex:none; padding:11px 17px;} #livevoice{min-height:18px; margin-top:5px;} #livequeue{animation:pulso 2.5s ease-in-out infinite;} /* modales */ #modal,#pgnmodal{position:fixed; inset:0; background:var(--overlay); backdrop-filter:blur(5px); display:none; align-items:center; justify-content:center; z-index:50;} #modal .box,#pgnmodal .box{ background:linear-gradient(168deg,var(--panel),var(--panel-b)); border-radius:16px; padding:28px 30px; text-align:center; max-width:420px; width:92vw; box-shadow:var(--shadow); border:1px solid var(--edge); animation:pop .26s; } @keyframes pop{from{transform:scale(.9) translateY(8px); opacity:0}} #modal h3,#pgnmodal h3{font-size:23px; margin-bottom:8px; font-family:var(--font-display); font-weight:600;} #modal p,#pgnmodal p{color:var(--dim); margin-bottom:15px; font-size:13.5px; line-height:1.6;} .err-txt{color:#f0a8b6; font-size:11.5px; min-height:16px; margin-top:6px;} #promo{position:fixed; inset:0; background:var(--overlay); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:60;} #promo .pbox{background:linear-gradient(168deg,var(--panel),var(--panel-b)); border-radius:16px; padding:17px; display:flex; gap:10px; box-shadow:var(--shadow); border:1px solid var(--edge);} #promo .pbox button{font-size:34px; width:66px; height:66px; padding:0;} #loadmsg{padding:10px 12px; background:var(--panel2); border-radius:var(--r); font-size:11.5px; color:var(--dim); text-align:center; border:1px solid var(--edge);} #loadmsg.err{background:#3a1d28; color:#f0a8b6; border-color:rgba(227,93,118,.3);} /* Ajustes del modo claro Algunos elementos no se resuelven solo cambiando variables: sobre fondo claro cambia qué color de TEXTO contrasta, y los realces pensados para la oscuridad (brillos blancos, sombras profundas) dejan de leerse. */ /* El botón primario queda atrapado entre dos límites: sobre este ámbar el texto blanco se queda en 3:1, y la tinta oscura no llega si el degradado baja tanto como en el modo oscuro. Se sube el degradado un paso y se conserva la tinta, que así rinde 5.7:1 en el punto peor. */ html.light button.primary, html.light #guestbox .mini.primary{ background:linear-gradient(180deg,#d99b3a,#c0842a); border-color:rgba(0,0,0,.14); } /* el distintivo de jugada relleno de color exigiría un texto distinto para cada clasificación; en claro se invierte: papel con tinta y aro de color */ html.light #movebadge{ background:var(--panel); color:var(--badge,var(--acc-txt)); box-shadow:0 6px 20px rgba(31,38,60,.2), inset 0 0 0 1.5px var(--badge,var(--acc-txt)); } /* el interruptor apagado necesita más cuerpo o el círculo blanco desaparece */ html.light .switch{background:#cdc6b6; box-shadow:inset 0 1px 3px rgba(27,33,53,.18);} html.light .switch::after{box-shadow:0 1px 3px rgba(27,33,53,.3);} /* botón de Google: blanco sobre panel blanco */ html.light .gbtn{border:1px solid var(--line); color:#1f2430;} html.light .authtab.active{color:var(--acc-sh);} /* avisos: en claro los fondos translúcidos de color quedan lavados */ html.light .feedback.ok{background:#e4f5ec; color:#14603f;} html.light .feedback.ko{background:#fbe6ea; color:#8d2337;} html.light .err-txt{color:#a72b42;} html.light #loadmsg.err{background:#fbe6ea; color:#8d2337;} html.light button.danger{background:#fbe6ea; color:#8d2337; border-color:rgba(192,58,82,.3);} html.light button.danger:hover{background:#f6d5db;} html.light .board-frame::before{background:linear-gradient(180deg, rgba(169,113,26,.12), transparent 32%);} html.light .player-row .clock.low{background:#fbe6ea; color:#8d2337; box-shadow:inset 0 0 0 1px rgba(192,58,82,.35);} html.light .player-row .clock.active{box-shadow:0 0 0 1px var(--acc-sh);} html.light .card, html.light .pcard{box-shadow:var(--shadow-sm), 0 0 0 1px rgba(27,33,53,.05);} html.light header .logo{filter:none;} html.light #chatlog, html.light textarea{border-color:var(--line);} @media (max-width:1000px){ .wrap{flex-direction:column; align-items:center;} .side{width:min(86vw,580px);} header .sub{display:none;} } @media (prefers-reduced-motion:reduce){ .piece.anim{transition:none;} .livedot.on, .player-row .thinking.on, #livequeue{animation:none;} *{transition-duration:.01ms !important;} }