*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;background:#071014;color:#e7ecef;font-family:Arial,Helvetica,sans-serif}body{overflow:hidden}button{font-family:inherit}.hidden{display:none!important}
.app{width:100%;height:100vh;padding:5px;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(circle at center,#102026 0%,#071014 72%)}
.topbar{height:44px;flex:0 0 44px;display:flex;align-items:center;gap:10px;padding:0 7px 3px;border-bottom:1px solid #304047}.brand{display:flex;align-items:center;gap:8px;flex:0 0 355px;min-width:355px}.brand-icon{color:#79c62d;font-size:34px;line-height:1}.brand-text{min-width:0}.brand h1{margin:0;font-size:20px;font-weight:800;line-height:19px;letter-spacing:.2px;white-space:nowrap}.subtitle{margin-top:1px;color:#83d22f;font-size:11px;font-weight:700;line-height:12px;white-space:nowrap}
.steps{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px}.step{min-width:0;width:145px;height:36px;display:flex;flex-direction:column;justify-content:center;padding:0 9px;border:1px solid #334249;border-radius:6px;background:#0d171b;color:#e7ecef;text-align:left}.step strong{font-size:10px;line-height:11px;white-space:nowrap}.step-number{color:#89d737}.step small{margin-top:1px;color:#aeb8bd;font-size:7px;line-height:9px;white-space:nowrap}.step.active{border-color:#719347;background:linear-gradient(145deg,#12201a,#0c1714);box-shadow:inset 0 0 18px rgba(121,198,45,.09)}.step-button{cursor:pointer}.step-button:hover{border-color:#719347;background:#12201a}.step-arrow{color:#78985e;font-size:17px}
.top-actions{display:flex;align-items:center;gap:6px}.actions-menu{position:relative}.actions-menu summary,.settings-top{height:34px;display:flex;align-items:center;justify-content:center;padding:0 13px;border:1px solid #334249;border-radius:6px;background:#0d171b;color:#e6ebed;font-size:10px;font-weight:700;cursor:pointer}.actions-menu summary{list-style:none}.actions-menu summary::-webkit-details-marker{display:none}.actions-dropdown{position:absolute;right:0;top:calc(100% + 5px);z-index:100;width:190px;padding:6px;display:flex;flex-direction:column;gap:5px;border:1px solid #405158;border-radius:6px;background:#091316;box-shadow:0 10px 25px rgba(0,0,0,.45)}.actions-dropdown button{min-height:30px;padding:0 9px;text-align:left;border:1px solid #34474f;border-radius:5px;background:linear-gradient(#0e191d,#0a1418);color:#d1dadd;font-size:9px;cursor:pointer}
.dashboard{flex:1 1 auto;min-height:0;width:100%;display:grid;grid-template-columns:20% 53% 27%;gap:5px;margin-top:4px;overflow:hidden}.left-column,.right-column{min-width:0;min-height:0;display:flex;flex-direction:column;gap:4px;overflow:hidden}.panel{min-width:0;background:linear-gradient(145deg,#0c171b,#091316);border:1px solid #34434a;border-radius:6px;padding:8px}.panel h2{margin:0 0 6px;color:#88db32;font-size:11px;font-weight:700;line-height:12px}
.analysis-summary{flex:0 0 auto}.summary-row{display:flex;justify-content:space-between;align-items:center;gap:7px;padding:3px 0;font-size:10px}.summary-row>span{display:flex;align-items:center;gap:8px}.summary-row>span b{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;flex:0 0 25px;font-size:27px;text-shadow:0 0 9px currentColor}.summary-green{color:#60d749}.summary-lightgreen{color:#9dd64b}.summary-yellow{color:#e2c334}.summary-orange{color:#e68b2d}.summary-red{color:#eb4c42}.separator{height:1px;margin:4px 0 5px;background:#35434a}.precision-title{margin-bottom:5px;font-size:12px;font-weight:700}.precision{display:flex;gap:5px}.precision>div{flex:1;display:flex;justify-content:space-between;align-items:center;padding:6px;border:1px solid #34434a;border-radius:5px;background:#0a1519;font-size:10px}.precision strong{color:#9ddd54;font-size:12px}
.full-analysis-box{margin-top:6px;padding:6px;border:1px solid #34434a;border-radius:6px;background:#081216}.full-analysis-header{display:flex;justify-content:space-between;margin-bottom:5px}.full-analysis-header span{font-size:8px;color:#b6c1c5}.full-analysis-header strong{color:#9de454;font-size:11px}.full-analysis-track{width:100%;height:16px;overflow:hidden;border:1px solid #40544b;border-radius:20px;background:#071014}.full-analysis-bar{width:0;height:100%;border-radius:20px;background:linear-gradient(90deg,#52a82d,#86e142,#b1f263);box-shadow:0 0 9px rgba(126,214,61,.50);transition:width .28s ease}.full-analysis-footer{display:flex;justify-content:space-between;margin-top:4px;color:#84949b;font-size:7px}
.general-report-button{width:100%;height:36px;margin-top:6px;border:1px solid #6aa83d;border-radius:6px;background:linear-gradient(145deg,#294f24,#173018);color:#c9ffa1;font-size:10px;font-weight:800;cursor:pointer;box-shadow:inset 0 0 15px rgba(121,198,45,.08)}.general-report-button:hover{border-color:#8bd75a;background:linear-gradient(145deg,#315f29,#1a381b)}
.move-list-panel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}.move-list-header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:5px}.move-list-header h2{margin:0}.move-list-hint{color:#78888e;font-size:6px}.move-list{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:2px;padding-right:3px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#42545c #091316}.move-list-item{min-height:23px;display:grid;grid-template-columns:26px minmax(0,1fr) minmax(0,1fr);align-items:center;gap:4px;flex:0 0 auto}.move-list-number{color:#74858c;font-size:8px;text-align:right}.move-list-white,.move-list-black{min-width:0;padding:4px 5px;border:1px solid transparent;border-radius:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:9px;cursor:pointer}.move-class-best{color:#d9ffd0;background:rgba(56,145,51,.27);border-color:rgba(91,202,72,.35)}.move-class-good{color:#e8f8c8;background:rgba(119,154,51,.23);border-color:rgba(164,207,74,.28)}.move-class-inaccuracy{color:#fff0a1;background:rgba(185,148,23,.25);border-color:rgba(230,194,53,.34)}.move-class-mistake{color:#ffd2a8;background:rgba(201,94,25,.27);border-color:rgba(232,130,54,.38)}.move-class-blunder{color:#ffd1ce;background:rgba(181,49,42,.31);border-color:rgba(232,75,65,.42)}.move-list-current{outline:1px solid rgba(227,255,208,.90);box-shadow:0 0 6px rgba(117,201,76,.40)}
.center-column{min-width:0;min-height:0;overflow:hidden}.board-panel{height:100%;display:flex;flex-direction:column;align-items:center;padding:5px 4px 2px}.board-title{width:100%;min-height:17px;flex:0 0 17px;display:flex;align-items:center;justify-content:space-between;padding:0 4px}.board-title h2{margin:0;font-size:12px}.board-title #gameInfo{max-width:48%;color:#9cabb1;font-size:9px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.board-player{width:min(100%,calc(100vh - 170px),875px);height:24px;flex:0 0 24px;display:flex;align-items:center;gap:6px;padding:1px 3px}.board-player-top{margin-bottom:1px}.board-player-bottom{margin-top:1px}.board-player-piece{width:23px;height:23px;flex:0 0 23px;display:flex;align-items:center;justify-content:center;border-radius:4px;background:#dadddc;overflow:hidden}.board-player-piece img{width:88%;height:88%;object-fit:contain}.board-player-data{min-width:0;display:flex;align-items:baseline;gap:7px}.board-player-data strong{color:#f4f7f8;font-size:11px}.board-player-data span{color:#82939a;font-size:8px}.player-side-clock{min-width:82px;height:28px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;border:1px solid #32424a;border-radius:6px;background:linear-gradient(145deg,#111d22,#0a1418);color:#d8e1e4;font-size:13px;font-weight:900;letter-spacing:.2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);font-variant-numeric:tabular-nums}.player-side-clock.active-turn{border-color:var(--accent-border);background:linear-gradient(145deg,rgba(236,242,244,.96),rgba(215,224,228,.98));color:#0b1418;box-shadow:0 0 12px var(--accent-soft),inset 0 0 0 1px rgba(255,255,255,.55)}.player-side-clock.no-clock-data{opacity:.6}.player-clock-icon{display:none;font-size:13px;line-height:1}.player-side-clock.active-turn .player-clock-icon{display:inline-flex;align-items:center;justify-content:center}.player-clock-text{display:inline-block;min-width:42px;text-align:center}
.board-wrapper{position:relative;width:min(100%,calc(100vh - 170px),875px);aspect-ratio:1/1;flex:0 0 auto}.board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));width:100%;height:100%;border:4px solid #5e7f45;border-radius:5px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.30)}.square{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;user-select:none}.square.light{background:#eeeed2}.square.dark{background:#769656}.piece{position:relative;z-index:4;width:84%;height:84%;object-fit:contain;pointer-events:auto;user-select:none;-webkit-user-drag:none;opacity:1}.board.analysis-loading .piece{opacity:0;visibility:hidden;pointer-events:none}
.square-move-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0}.square-move-overlay.visible{opacity:1}.square-move-overlay.best.destination{background:rgba(74,192,66,.38);box-shadow:inset 0 0 0 4px rgba(95,228,79,.95)}.square-move-overlay.best.origin{background:rgba(74,192,66,.17);box-shadow:inset 0 0 0 3px rgba(95,228,79,.78)}.square-move-overlay.good.destination{background:rgba(144,191,58,.36);box-shadow:inset 0 0 0 4px rgba(170,224,78,.95)}.square-move-overlay.good.origin{background:rgba(144,191,58,.16);box-shadow:inset 0 0 0 3px rgba(170,224,78,.75)}.square-move-overlay.inaccuracy.destination{background:rgba(224,183,37,.40);box-shadow:inset 0 0 0 4px rgba(242,204,57,.97)}.square-move-overlay.inaccuracy.origin{background:rgba(224,183,37,.17);box-shadow:inset 0 0 0 3px rgba(242,204,57,.78)}.square-move-overlay.mistake.destination{background:rgba(224,110,31,.42);box-shadow:inset 0 0 0 4px rgba(242,137,48,.98)}.square-move-overlay.mistake.origin{background:rgba(224,110,31,.18);box-shadow:inset 0 0 0 3px rgba(242,137,48,.78)}.square-move-overlay.blunder.destination{background:rgba(218,54,48,.46);box-shadow:inset 0 0 0 4px rgba(245,73,66,.98)}.square-move-overlay.blunder.origin{background:rgba(218,54,48,.19);box-shadow:inset 0 0 0 3px rgba(245,73,66,.80)}.square-best-overlay{position:absolute;inset:6px;z-index:6;display:none;pointer-events:none;border:3px solid rgba(85,232,104,.93);border-radius:7px}.square-best-overlay.visible{display:block}
.square-hint-origin::before{content:"";position:absolute;inset:0;z-index:3;background:rgba(255,255,255,.10);pointer-events:none}.square-hint-dot::after{content:"";position:absolute;left:50%;top:50%;z-index:8;width:18%;height:18%;min-width:13px;min-height:13px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(32,40,28,.50);pointer-events:none}.square-hint-capture::after{content:"";position:absolute;inset:8%;z-index:8;border:7px solid rgba(30,38,26,.38);border-radius:50%;pointer-events:none}
.piece-hover-tooltip{position:absolute;left:0;top:0;z-index:40;padding:6px 9px;border:1px solid #42545a;border-radius:6px;background:rgba(7,14,17,.97);color:#eef3f5;font-size:11px;font-weight:700;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none}.piece-hover-tooltip.visible{opacity:1;visibility:visible}.square-analysis-tag{position:absolute;left:3px;right:3px;bottom:3px;z-index:15;display:none;padding:2px 3px;border-radius:4px;color:#fff;font-size:8px;font-weight:800;text-align:center;pointer-events:none}.square-analysis-tag.visible{display:block}.square-analysis-tag.best{background:rgba(42,137,45,.92)}.square-analysis-tag.good{background:rgba(111,150,43,.92)}.square-analysis-tag.inaccuracy{background:rgba(183,147,24,.94)}.square-analysis-tag.mistake{background:rgba(195,90,24,.94)}.square-analysis-tag.blunder{background:rgba(180,41,36,.95)}.square-analysis-tag.engine-best{background:rgba(34,131,57,.94)}
.arrow-layer{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);z-index:10;pointer-events:none;overflow:visible}.board-wrapper.analysis-loading .arrow-layer{opacity:0;visibility:hidden}.board-arrow{display:none;stroke-width:4.5;stroke-linecap:round;opacity:.82;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.45))}.played-arrow{stroke:#ffc928}.best-arrow{stroke:#55e868}.played-head{fill:#ffc928;fill-opacity:.88}.best-head{fill:#55e868;fill-opacity:.88}
.navigation{width:100%;height:35px;flex:0 0 35px;display:flex;align-items:center;justify-content:center;gap:7px;margin-top:2px}.nav-button{width:62px;height:34px;flex:0 0 62px;display:flex;align-items:center;justify-content:center;border:1px solid #3a4b52;border-radius:6px;background:linear-gradient(#122026,#0e191d);color:#e3e9eb;font-size:17px;cursor:pointer}.nav-button:disabled{opacity:.38;cursor:default}.next-main{background:linear-gradient(#6ca53c,#4b8125);color:#fff}.move-info{min-width:155px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid #3b4b52;border-radius:6px;background:linear-gradient(#121f24,#0d181c);color:#f0f3f4;font-size:13px;font-weight:700}.flip-board-button{height:34px;padding:0 12px;border:1px solid #50644b;border-radius:6px;background:linear-gradient(#17261d,#101c16);color:#a8e976;font-size:9px;font-weight:700;cursor:pointer}.flip-board-button:hover{border-color:#81b85d;background:#1b3020}
.analysis-panel{position:relative}.analysis-panel::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;background:rgba(124,202,49,.30)}.evaluation-panel{flex:0 0 88px;min-height:88px;padding:6px 8px 5px}.evaluation-header{display:flex;justify-content:space-between;font-size:9px}.evaluation-header>span{display:flex;flex-direction:column}.evaluation-header small{color:#84949b;font-size:7px}.evaluation-header strong{font-size:20px}.evaluation-bar{position:relative;height:11px;margin-top:5px;background:linear-gradient(to right,#283034,#5d676b,#f0f0f0)}.evaluation-center{position:absolute;left:50%;top:-4px;width:2px;height:19px;background:#79cc38}.evaluation-scale{display:flex;justify-content:space-between;margin-top:3px;font-size:7px}
.pv-panel{flex:0 0 77px;min-height:77px;padding:6px 8px 5px}.pv-placeholder{min-height:35px;max-height:40px;padding:4px;overflow:hidden;border:1px solid #34434a;border-radius:4px;background:#091316;font-size:9px}.multipv-panel{flex:0 0 auto;padding:6px 8px}.move-option{min-height:36px;display:grid;grid-template-columns:31px 1fr 46px;align-items:center;gap:7px;margin-bottom:3px;padding:3px 6px;border:1px solid #354f5a;border-radius:6px}.move-option.best{border-color:#6ca935}.move-option .number{width:27px;height:27px;display:flex;align-items:center;justify-content:center;border-radius:5px;background:#294d29;color:#a7ec64;font-size:12px}.move-option-data{min-width:0}.move-option strong{display:block;font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.move-option small{color:#89989e;font-size:7px}.move-option>span{text-align:right;font-size:10px}
.details-panel{flex:0 0 112px;min-height:112px;padding:6px 8px 4px}.move-details{display:grid;grid-template-columns:1fr 1fr;gap:5px}.move-details>div{min-height:31px;display:flex;flex-direction:column;justify-content:center;padding:2px 6px;border:1px solid #34474f;border-radius:4px;background:#091316}.move-details span{color:#8f9fa5;font-size:7px}.move-details strong{color:#f1f4f5;font-size:12px}.move-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:4px}.move-metrics>div{min-width:0;min-height:30px;display:flex;flex-direction:column;justify-content:center;padding:2px 4px;border:1px solid #30434a;border-radius:4px;background:linear-gradient(145deg,#0a1519,#081216)}.move-metrics span{color:#819198;font-size:6px;white-space:nowrap}.move-metrics strong{margin-top:1px;color:#edf2f4;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-classification{padding:1px 4px;border-radius:3px;width:fit-content}.detail-classification.detail-best{color:#bfffae;background:rgba(56,145,51,.30)}.detail-classification.detail-good{color:#ddf7a4;background:rgba(119,154,51,.27)}.detail-classification.detail-inaccuracy{color:#ffe871;background:rgba(185,148,23,.30)}.detail-classification.detail-mistake{color:#ffc38a;background:rgba(201,94,25,.31)}.detail-classification.detail-blunder{color:#ffaaa5;background:rgba(181,49,42,.35)}.arrow-legend{display:flex;gap:15px;margin-top:3px;font-size:7px}.arrow-legend span{display:flex;align-items:center;gap:4px}.arrow-legend b{width:18px;height:3px}.legend-played{background:#ffc928}.legend-best{background:#55e868}
.critical-panel{flex:1 1 auto;min-height:72px;padding:6px 8px 5px;overflow:hidden}.critical-cards{height:calc(100% - 17px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:5px}.critical-card{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px 5px;border:1px solid #34474f;border-radius:6px;background:linear-gradient(145deg,#0a1519,#081216);cursor:pointer;overflow:hidden}.critical-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}.critical-card span{color:#9facb1;font-size:7px}.critical-card strong{color:#f0f4f5;font-size:11px}.critical-card small{color:#90a0a6;font-size:6px}.critical-best-move{margin-top:2px;color:#a8e984;font-size:6px;font-weight:700}.critical-card.critical-best::before{background:#60d749}.critical-card.critical-good::before{background:#9dd64b}.critical-card.critical-inaccuracy::before{background:#e2c334}.critical-card.critical-mistake::before{background:#e68b2d}.critical-card.critical-blunder{border-color:rgba(232,75,65,.55);background:linear-gradient(145deg,rgba(112,30,27,.34),#081216)}.critical-card.critical-blunder::before{background:#eb4c42}.critical-card.critical-current{outline:1px solid rgba(220,255,198,.92);box-shadow:0 0 10px rgba(112,203,69,.35)}
.report-modal{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:24px}.report-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}.report-dialog{position:relative;z-index:1;width:min(1180px,94vw);height:min(760px,90vh);display:flex;flex-direction:column;border:1px solid #42545a;border-radius:10px;background:linear-gradient(145deg,#0d191d,#071014);box-shadow:0 24px 70px rgba(0,0,0,.65);overflow:hidden}.report-header{height:58px;flex:0 0 58px;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #304047}.report-header h2{margin:0;color:#8de03c;font-size:15px}.report-header span{display:block;margin-top:3px;color:#91a0a6;font-size:9px}.report-close{width:34px;height:34px;border:1px solid #405159;border-radius:6px;background:#0d181c;color:#e7ecef;font-size:15px;cursor:pointer}.report-body{flex:1;min-height:0;padding:10px;overflow:auto}.report-summary-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:8px}.report-stat{min-width:0;padding:8px;border:1px solid #34474f;border-radius:6px;background:#091316}.report-stat span{display:block;color:#87979d;font-size:8px}.report-stat strong{display:block;margin-top:3px;color:#eaf1f3;font-size:16px}.report-section{min-width:0;padding:9px;border:1px solid #34434a;border-radius:7px;background:#091316}.report-section h3{margin:0 0 7px;color:#8cdb45;font-size:11px}.report-section-title{display:flex;align-items:center;justify-content:space-between}.report-section-title span{color:#7f9096;font-size:7px}.report-chart-wrap{height:300px}.report-chart-wrap canvas{display:block;width:100%;height:100%;cursor:crosshair}.report-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.report-critical-list{display:flex;flex-direction:column;gap:5px}.report-critical-item{display:grid;grid-template-columns:60px 70px 1fr 95px;align-items:center;gap:7px;padding:7px;border:1px solid #34474f;border-radius:5px;background:#081216;font-size:9px;cursor:pointer}.report-critical-item:hover{border-color:#648052}.report-critical-item .loss{color:#ffb088}.report-critical-item .best{color:#9fe578}.report-narrative{color:#c5d0d4;font-size:10px;line-height:1.55}.report-narrative p{margin:0 0 8px}
@media(max-width:1550px){.brand{flex-basis:320px;min-width:320px}.brand h1{font-size:18px}.step{width:125px}.move-metrics strong{font-size:8px}.critical-card strong{font-size:10px}}
@media(max-width:1380px){.brand{flex-basis:285px;min-width:285px}.brand h1{font-size:16px}.dashboard{grid-template-columns:21% 51% 28%}.move-metrics{gap:2px}.move-metrics strong{font-size:7px}.critical-best-move{font-size:5px}.report-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* IMPORTAR - MENU URL / PGN */
.import-step-wrap{position:relative;width:145px;height:36px;flex:0 0 145px}.import-step-wrap>.step{width:100%;height:100%}.import-step-wrap::after{content:"";position:absolute;left:0;top:100%;width:175px;height:8px;z-index:179;background:transparent;pointer-events:auto}.import-step-menu{position:absolute;left:0;top:100%;z-index:180;width:175px;padding:5px;display:flex;flex-direction:column;gap:4px;border:1px solid #405158;border-radius:6px;background:#091316;box-shadow:0 12px 28px rgba(0,0,0,.48);opacity:0;visibility:hidden;transform:translateY(-4px);pointer-events:none;transition:opacity .12s ease,transform .12s ease,visibility .12s ease}.import-step-wrap:hover .import-step-menu,.import-step-wrap:focus-within .import-step-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.import-step-menu button{min-height:38px;padding:5px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #34474f;border-radius:5px;background:linear-gradient(#0e191d,#0a1418);color:#e6ebed;cursor:pointer;text-align:left}.import-step-menu button:hover{border-color:#719347;background:#12201a}.import-step-menu strong{font-size:10px;color:#9ce45d}.import-step-menu small{font-size:7px;color:#92a1a6}
.import-modal{position:fixed;inset:0;z-index:520;display:flex;align-items:center;justify-content:center;padding:24px}.import-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}.import-dialog{position:relative;z-index:1;width:min(700px,92vw);max-height:88vh;display:flex;flex-direction:column;border:1px solid #42545a;border-radius:10px;background:linear-gradient(145deg,#0d191d,#071014);box-shadow:0 24px 70px rgba(0,0,0,.65);overflow:hidden}.import-header{height:60px;flex:0 0 60px;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #304047}.import-header h2{margin:0;color:#8de03c;font-size:15px}.import-header span{display:block;margin-top:3px;color:#91a0a6;font-size:9px}.import-close{width:34px;height:34px;border:1px solid #405159;border-radius:6px;background:#0d181c;color:#e7ecef;font-size:15px;cursor:pointer}.import-body{padding:12px;overflow:auto}.import-tabs{display:flex;gap:5px;margin-bottom:10px}.import-tab{height:32px;min-width:90px;padding:0 14px;border:1px solid #34474f;border-radius:5px;background:#0a1519;color:#aebbc0;font-size:9px;font-weight:800;cursor:pointer}.import-tab.active{border-color:#719347;background:#16241a;color:#b9f88a}.import-pane{display:flex;flex-direction:column;gap:6px}.import-pane label{color:#dce4e7;font-size:10px;font-weight:700}.import-pane input,.import-pane textarea{width:100%;border:1px solid #405159;border-radius:6px;background:#071115;color:#edf2f4;outline:none;font-family:Arial,Helvetica,sans-serif}.import-pane input{height:38px;padding:0 10px;font-size:11px}.import-pane textarea{height:260px;min-height:160px;resize:vertical;padding:10px;font-family:Consolas,"Courier New",monospace;font-size:10px;line-height:1.4}.import-pane input:focus,.import-pane textarea:focus{border-color:#79b94a;box-shadow:0 0 0 2px rgba(121,185,74,.12)}.import-pane small{color:#7f9096;font-size:8px}.import-status{min-height:34px;margin-top:10px;padding:8px 9px;border:1px solid #34434a;border-radius:5px;background:#081216;color:#98a8ae;font-size:9px;display:flex;align-items:center}.import-status.loading{color:#d7edae;border-color:#607944}.import-status.success{color:#b9f59b;border-color:#517c3d}.import-status.error{color:#ffaaa5;border-color:#824841}.import-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:10px}.import-actions button{height:34px;padding:0 14px;border-radius:6px;font-size:9px;font-weight:800;cursor:pointer}.import-cancel{border:1px solid #405159;background:#0d181c;color:#c6d0d4}.import-submit{border:1px solid #70a946;background:linear-gradient(#5a9634,#3f7123);color:#fff}.import-submit:disabled{opacity:.5;cursor:default}@media(max-width:1550px){.import-step-wrap{width:125px;flex-basis:125px}}


/* =========================================================
   PGN POR ARQUIVO
   ========================================================= */
.pgn-source-row{display:flex;align-items:center;gap:8px;margin-bottom:1px}.pgn-file-button{height:32px;padding:0 11px;border:1px solid #567048;border-radius:5px;background:linear-gradient(#17251c,#0e1912);color:#b9ee91;font-size:9px;font-weight:800;cursor:pointer;white-space:nowrap}.pgn-file-button:hover{border-color:#7ab653;background:#1b2d20}.pgn-file-name{min-width:0;color:#83949a;font-size:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* =========================================================
   LEGENDA / MARCADORES DO GRÁFICO
   ========================================================= */
.report-chart-legend{display:flex;align-items:center;gap:14px;margin:1px 0 7px;color:#91a1a6;font-size:8px}.report-chart-legend span{display:flex;align-items:center;gap:5px}.chart-dot{display:inline-block;width:8px;height:8px;border-radius:50%;box-shadow:0 0 5px currentColor}.chart-dot.inaccuracy{background:#e2c334;color:#e2c334}.chart-dot.mistake{background:#e68b2d;color:#e68b2d}.chart-dot.blunder{background:#eb4c42;color:#eb4c42}.chart-current-line{display:inline-block;width:14px;height:2px;background:#ffc928;box-shadow:0 0 4px rgba(255,201,40,.5)}


/* =========================================================
   IMPORTAÇÃO FEN
   ========================================================= */
.fen-import-input{font-family:Consolas,"Courier New",monospace!important;font-size:10px!important;letter-spacing:.1px}


/* =========================================================
   STATUS DAS ETAPAS — preserva o layout original
   ========================================================= */
.workflow-step strong{display:flex;align-items:center;gap:4px;min-width:0}
.workflow-step .step-check{margin-left:auto;color:#62e777;font-size:13px;font-weight:900;line-height:1;opacity:0;transform:scale(.75);transition:opacity .14s ease,transform .14s ease;text-shadow:0 0 7px rgba(98,231,119,.45)}
.workflow-step.step-done .step-check{opacity:1;transform:scale(1)}
.workflow-step.step-done{border-color:rgba(98,231,119,.48);background:linear-gradient(145deg,rgba(39,92,43,.22),#0c1714);box-shadow:inset 0 0 14px rgba(98,231,119,.05)}
.workflow-step.step-active{border-color:#719347;background:linear-gradient(145deg,#12201a,#0c1714);box-shadow:inset 0 0 18px rgba(121,198,45,.09)}
.workflow-step.step-pending{border-color:#334249;background:#0d171b}
.workflow-step.step-done .step-number{color:#6ee983}
.workflow-step.step-active .step-number{color:#9be654}
.workflow-step.step-pending .step-number{color:#7f9096}
.workflow-step.step-done small{color:#9ccfa4}
.workflow-step.step-active small{color:#b8d8aa}
.workflow-step.step-pending small{color:#7f9198}


/* =========================================================
   CONFIGURAÇÕES — modal sem alterar o layout principal
   ========================================================= */
.settings-modal{position:fixed;inset:0;z-index:620;display:flex;align-items:center;justify-content:center;padding:24px}
.settings-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.settings-dialog{position:relative;z-index:1;width:min(620px,92vw);max-height:88vh;display:flex;flex-direction:column;border:1px solid #42545a;border-radius:10px;background:linear-gradient(145deg,#0d191d,#071014);box-shadow:0 24px 70px rgba(0,0,0,.65);overflow:hidden}
.settings-header{min-height:58px;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #304047}
.settings-header h2{margin:0;color:#8de03c;font-size:15px}
.settings-header span{display:block;margin-top:3px;color:#91a0a6;font-size:9px}
.settings-close{width:34px;height:34px;border:1px solid #405159;border-radius:6px;background:#0d181c;color:#e7ecef;font-size:15px;cursor:pointer}
.settings-body{padding:12px;overflow:auto}
.settings-grid{display:grid;grid-template-columns:1fr;gap:8px}
.settings-field{display:grid;grid-template-columns:1fr 180px;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:9px;border:1px solid #34474f;border-radius:7px;background:#091316}
.settings-field>span{grid-column:1;grid-row:1;color:#edf2f4;font-size:10px;font-weight:800}
.settings-field>small{grid-column:1;grid-row:2;color:#82949b;font-size:8px;margin-top:2px}
.settings-field>select{grid-column:2;grid-row:1/3;width:100%;height:34px;padding:0 8px;border:1px solid #3a5058;border-radius:5px;background:#0b181d;color:#eef3f5;font-size:9px;outline:none}
.settings-field>select:focus{border-color:#78c54d}
.settings-note{margin-top:9px;padding:8px 9px;border:1px solid rgba(121,198,45,.22);border-radius:6px;background:rgba(121,198,45,.06);color:#a8b8bd;font-size:8px;line-height:1.45}
.settings-cache-row{margin-top:9px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px;border:1px solid #34474f;border-radius:7px;background:#091316}
.settings-cache-row>div{min-width:0}
.settings-cache-row strong{display:block;color:#eef3f5;font-size:10px}
.settings-cache-row span{display:block;margin-top:2px;color:#819198;font-size:8px}
.settings-danger-button,.settings-secondary-button,.settings-primary-button{height:34px;padding:0 12px;border-radius:6px;font-size:9px;font-weight:800;cursor:pointer}
.settings-danger-button{flex:0 0 auto;border:1px solid rgba(232,75,65,.52);background:rgba(112,30,27,.26);color:#ffb0aa}
.settings-footer{display:flex;justify-content:flex-end;gap:7px;padding:10px 12px;border-top:1px solid #304047}
.settings-secondary-button{border:1px solid #405159;background:#0d181c;color:#cdd7da}
.settings-primary-button{border:1px solid #6fa844;background:linear-gradient(145deg,#294f24,#173018);color:#ceffaa}
@media(max-width:620px){.settings-field{grid-template-columns:1fr}.settings-field>span,.settings-field>small,.settings-field>select{grid-column:1}.settings-field>select{grid-row:3;margin-top:7px}.settings-cache-row{align-items:flex-start;flex-direction:column}}


/* =========================================================
   TEMAS DE COR — interface + tabuleiro
   ========================================================= */
:root{
  --accent:#79c62d;
  --accent-strong:#83d22f;
  --accent-soft:rgba(121,198,45,.12);
  --accent-border:#719347;
  --accent-text:#a8e976;
  --board-light:#eeeed2;
  --board-dark:#769656;
  --board-border:#5e7f45;
}
body[data-theme="green"]{
  --accent:#79c62d;--accent-strong:#83d22f;--accent-soft:rgba(121,198,45,.12);--accent-border:#719347;--accent-text:#a8e976;
  --board-light:#eeeed2;--board-dark:#769656;--board-border:#5e7f45;
}
body[data-theme="blue"]{
  --accent:#4aa3ff;--accent-strong:#67b3ff;--accent-soft:rgba(74,163,255,.13);--accent-border:#4d86b8;--accent-text:#a9d5ff;
  --board-light:#e8edf3;--board-dark:#6f8eaa;--board-border:#52728d;
}
body[data-theme="orange"]{
  --accent:#ff9a32;--accent-strong:#ffad50;--accent-soft:rgba(255,154,50,.13);--accent-border:#b97839;--accent-text:#ffd09d;
  --board-light:#f2e7d5;--board-dark:#b98757;--board-border:#8e623d;
}
body[data-theme="purple"]{
  --accent:#a879ff;--accent-strong:#b894ff;--accent-soft:rgba(168,121,255,.13);--accent-border:#7c5cae;--accent-text:#dac7ff;
  --board-light:#eee8f4;--board-dark:#8b74a6;--board-border:#68547f;
}
body[data-theme="red"]{
  --accent:#ff625d;--accent-strong:#ff7a76;--accent-soft:rgba(255,98,93,.13);--accent-border:#b65350;--accent-text:#ffc2bf;
  --board-light:#f1e3e0;--board-dark:#a86d68;--board-border:#7e4f4b;
}
body[data-theme="teal"]{
  --accent:#39d6c2;--accent-strong:#59e2d0;--accent-soft:rgba(57,214,194,.13);--accent-border:#3e988c;--accent-text:#a7f2e8;
  --board-light:#e5efec;--board-dark:#659b91;--board-border:#47766e;
}

/* Substitui apenas elementos de identidade visual; classificações de lance mantêm suas cores semânticas. */
.brand-icon,.subtitle,.panel h2,.board-title h2,.report-header h2,.settings-header h2{color:var(--accent)!important}
.step.active,.workflow-step.step-active{border-color:var(--accent-border)!important;background:linear-gradient(145deg,var(--accent-soft),#0c1714)!important}
.step-number,.workflow-step.step-active .step-number{color:var(--accent-strong)!important}
.general-report-button,.settings-primary-button{border-color:var(--accent-border)!important;color:var(--accent-text)!important;background:linear-gradient(145deg,var(--accent-soft),#173018)!important}
.flip-board-button{color:var(--accent-text)!important;border-color:var(--accent-border)!important}
.evaluation-center{background:var(--accent-strong)!important}
.move-option.best{border-color:var(--accent-border)!important}
.move-option .number{color:var(--accent-text)!important;background:var(--accent-soft)!important}
.import-tab.active{border-color:var(--accent-border)!important;color:var(--accent-text)!important;background:var(--accent-soft)!important}
.import-submit{border-color:var(--accent-border)!important;color:var(--accent-text)!important;background:linear-gradient(145deg,var(--accent-soft),#173018)!important}
.pgn-file-button{border-color:var(--accent-border)!important;color:var(--accent-text)!important;background:linear-gradient(#17251c,#0e1912)!important}
.board{border-color:var(--board-border)!important}
.square.light{background:var(--board-light)!important}
.square.dark{background:var(--board-dark)!important}


/* =========================================================
   TEMA DINÂMICO — SUBMENU IMPORTAR + BOTÃO AVANÇAR
   ========================================================= */
.import-step-menu{
  border-color:var(--accent-border)!important;
  box-shadow:
    0 10px 25px rgba(0,0,0,.45),
    0 0 0 1px var(--accent-soft) inset!important;
}

.import-step-menu button{
  border-color:rgba(255,255,255,.06)!important;
  background:linear-gradient(145deg,#0a1519,#081216)!important;
}

.import-step-menu button:hover,
.import-step-menu button:focus-visible{
  border-color:var(--accent-border)!important;
  background:linear-gradient(145deg,var(--accent-soft),#0b171b)!important;
  outline:none!important;
}

.import-step-menu button strong{
  color:var(--accent-text)!important;
}

.import-step-menu button:hover strong,
.import-step-menu button:focus-visible strong{
  color:var(--accent-strong)!important;
}

.import-step-menu button small{
  color:#8fa1a7!important;
}

.next-main,
#next.next-main{
  background:linear-gradient(145deg,var(--accent-strong),var(--accent))!important;
  border-color:var(--accent-border)!important;
  color:#fff!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 4px 10px var(--accent-soft)!important;
}

.next-main:hover:not(:disabled),
#next.next-main:hover:not(:disabled){
  filter:brightness(1.08)!important;
  border-color:var(--accent-strong)!important;
}

.next-main:active:not(:disabled),
#next.next-main:active:not(:disabled){
  transform:translateY(1px);
  filter:brightness(.98)!important;
}


/* =========================================================
   CABEÇALHO — TÍTULO AMPLIADO
   ========================================================= */
.brand{
  flex-basis:410px!important;
  min-width:410px!important;
}
.brand-text{
  display:flex!important;
  align-items:center!important;
  min-height:38px!important;
}
.brand h1{
  font-size:24px!important;
  line-height:1!important;
  letter-spacing:.35px!important;
  white-space:nowrap!important;
}
.subtitle{
  display:none!important;
}
@media(max-width:1550px){
  .brand{flex-basis:380px!important;min-width:380px!important}
  .brand h1{font-size:22px!important}
}
@media(max-width:1380px){
  .brand{flex-basis:350px!important;min-width:350px!important}
  .brand h1{font-size:20px!important}
}


/* =========================================================
   FILTRO DE LANCES + ABERTURA
   ========================================================= */
.summary-filter-row{
  cursor:pointer;
  border-radius:5px;
  padding-left:3px;
  padding-right:3px;
  transition:background .14s ease,box-shadow .14s ease,transform .14s ease;
}
.summary-filter-row:hover{
  background:var(--accent-soft);
  transform:translateX(1px);
}
.summary-filter-row.filter-active{
  background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px var(--accent-border);
}
.summary-filter-row.filter-active span{
  color:var(--accent-text);
}
.move-list-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  min-width:0;
}
.move-filter-status{
  max-width:118px;
  color:#78888e;
  font-size:6px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.clear-move-filter{
  width:18px;
  height:18px;
  padding:0;
  border:1px solid var(--accent-border);
  border-radius:4px;
  background:var(--accent-soft);
  color:var(--accent-text);
  font-size:9px;
  font-weight:900;
  line-height:16px;
  cursor:pointer;
}
.move-list-item.filter-hidden{
  display:none!important;
}
.move-list-white.filter-cell-hidden,
.move-list-black.filter-cell-hidden{
  visibility:hidden;
  pointer-events:none;
}
.opening-box{
  margin-top:6px;
  min-height:31px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:4px 7px;
  border:1px solid #34434a;
  border-radius:5px;
  background:#091316;
}
.opening-box span{
  color:#819198;
  font-size:7px;
}
.opening-box strong{
  margin-top:2px;
  color:var(--accent-text);
  font-size:9px;
  line-height:11px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}


/* =========================================================
   RELÓGIO DO LANCE — flutuante, sem alterar o layout
   ========================================================= */
.move-clock-badge{
  position:absolute;
  top:10px;
  right:10px;
  z-index:26;
  min-width:88px;
  max-width:170px;
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:5px 8px;
  border:1px solid var(--accent-border);
  border-radius:6px;
  background:rgba(7,16,20,.91);
  box-shadow:0 4px 14px rgba(0,0,0,.34),inset 0 0 10px var(--accent-soft);
  backdrop-filter:blur(2px);
  pointer-events:none;
}
.move-clock-icon{
  color:var(--accent-strong);
  font-size:12px;
  line-height:1;
}
.move-clock-badge strong{
  color:#f4f8f9;
  font-size:11px;
  line-height:12px;
  white-space:nowrap;
}
.move-clock-badge small{
  color:var(--accent-text);
  font-size:7px;
  line-height:9px;
  white-space:nowrap;
}


/* =========================================================
   RELÓGIOS LATERAIS DO TABULEIRO
   ========================================================= */
.board-area{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:stretch;
}
.side-board-clock{
  position:absolute;
  left:calc(50% + min(50%, calc((100vh - 170px) / 2), 437.5px) + 8px);
  z-index:30;
  width:78px;
  display:flex;
  justify-content:flex-start;
}
.side-board-clock-top{top:8px}
.side-board-clock-bottom{bottom:8px}
.move-clock-badge{display:none!important}
.move-clock-panel{display:none!important}
@media(max-width:1550px){
  .side-board-clock{width:72px}
  .player-side-clock{min-width:72px;font-size:9px;padding:0 8px}
}
@media(max-width:1320px){
  .side-board-clock{
    left:auto;
    right:6px;
    width:68px;
  }
  .player-side-clock{min-width:68px;font-size:8px;padding:0 6px}
}

/* =========================================================
   COORDENADAS DO TABULEIRO — A-H / 1-8
   ========================================================= */
.board-coordinate{
  position:absolute;
  z-index:18;
  font-size:9px;
  font-weight:900;
  line-height:1;
  pointer-events:none;
  user-select:none;
  text-shadow:0 1px 1px rgba(255,255,255,.35),0 0 2px rgba(0,0,0,.18);
}
.board-coordinate-rank{
  top:4px;
  left:4px;
}
.board-coordinate-file{
  right:4px;
  bottom:4px;
}
.square.light .board-coordinate{
  color:var(--board-dark);
}
.square.dark .board-coordinate{
  color:var(--board-light);
}
@media(max-width:1380px){
  .board-coordinate{font-size:8px}
}


/* =========================================================
   RELATÓRIO — MELHORES OPORTUNIDADES PERDIDAS
   ========================================================= */
.report-opportunities-section{
  margin-top:8px;
}
.report-opportunity-list{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.report-opportunity-item{
  display:grid;
  grid-template-columns:62px 76px 1fr 100px 88px;
  align-items:center;
  gap:7px;
  padding:7px;
  border:1px solid #34474f;
  border-radius:5px;
  background:#081216;
  font-size:9px;
  cursor:pointer;
  transition:border-color .14s ease,background .14s ease;
}
.report-opportunity-item:hover{
  border-color:var(--accent-border);
  background:linear-gradient(145deg,var(--accent-soft),#081216);
}
.report-opportunity-item .opp-ply{
  color:#b8c4c8;
  font-weight:800;
}
.report-opportunity-item .opp-played{
  color:#f2f5f6;
  font-weight:900;
}
.report-opportunity-item .opp-description{
  min-width:0;
  color:#9eafb5;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.report-opportunity-item .opp-best{
  color:#9fe578;
  font-weight:800;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.report-opportunity-item .opp-loss{
  color:#ffc28a;
  font-weight:900;
  text-align:right;
}
.report-opportunity-empty{
  padding:10px;
  border:1px dashed #34474f;
  border-radius:5px;
  color:#83949a;
  font-size:9px;
  text-align:center;
}
@media(max-width:900px){
  .report-opportunity-item{
    grid-template-columns:52px 70px 1fr 82px;
  }
  .report-opportunity-item .opp-description{
    grid-column:1 / -1;
    grid-row:2;
  }
}


/* =========================================================
   RELATÓRIO — GESTÃO DO TEMPO
   ========================================================= */
.report-time-section{margin-top:8px}
.report-time-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.report-time-player{min-width:0;padding:8px;border:1px solid #34474f;border-radius:6px;background:#081216}
.report-time-player h4{margin:0 0 7px;color:var(--accent-text);font-size:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.report-time-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.report-time-metric{min-width:0;padding:5px;border:1px solid #30434a;border-radius:5px;background:#0a1519}
.report-time-metric span{display:block;color:#819198;font-size:6px;white-space:nowrap}
.report-time-metric strong{display:block;margin-top:2px;color:#eef3f5;font-size:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.report-time-highlights{margin-top:7px;display:flex;flex-direction:column;gap:5px}
.report-time-highlight{display:grid;grid-template-columns:62px 90px 1fr 88px;align-items:center;gap:7px;padding:7px;border:1px solid #34474f;border-radius:5px;background:#081216;font-size:8px;cursor:pointer}
.report-time-highlight:hover{border-color:var(--accent-border);background:linear-gradient(145deg,var(--accent-soft),#081216)}
.report-time-highlight .time-player{color:var(--accent-text);font-weight:800;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.report-time-highlight .time-desc{color:#9eafb5;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.report-time-highlight .time-value{color:#f2f5f6;font-weight:900;text-align:right}
.report-time-empty{padding:10px;border:1px dashed #34474f;border-radius:5px;color:#83949a;font-size:9px;text-align:center}
@media(max-width:900px){.report-time-grid{grid-template-columns:1fr}.report-time-highlight{grid-template-columns:52px 80px 1fr}.report-time-highlight .time-value{grid-column:3}}


/* =========================================================
   HISTÓRICO DE PARTIDAS
   ========================================================= */
.history-modal{position:fixed;inset:0;z-index:610;display:flex;align-items:center;justify-content:center;padding:24px}
.history-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.history-dialog{position:relative;z-index:1;width:min(980px,94vw);height:min(720px,88vh);display:flex;flex-direction:column;border:1px solid #42545a;border-radius:10px;background:linear-gradient(145deg,#0d191d,#071014);box-shadow:0 24px 70px rgba(0,0,0,.65);overflow:hidden}
.history-header{min-height:58px;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #304047}
.history-header h2{margin:0;color:var(--accent);font-size:15px}
.history-header span{display:block;margin-top:3px;color:#91a0a6;font-size:9px}
.history-close{width:34px;height:34px;border:1px solid #405159;border-radius:6px;background:#0d181c;color:#e7ecef;font-size:15px;cursor:pointer}
.history-toolbar{display:flex;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid #273a41}
.history-search-wrap{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:34px;padding:0 9px;border:1px solid #34474f;border-radius:6px;background:#081216}
.history-search-wrap span{color:var(--accent-text);font-size:14px}
.history-search-wrap input{flex:1;min-width:0;border:0;outline:none;background:transparent;color:#edf2f4;font-size:9px}
.history-search-wrap input::placeholder{color:#71838a}
.history-count{color:#899a9f;font-size:8px;white-space:nowrap}
.history-clear-button{height:34px;padding:0 10px;border:1px solid rgba(232,75,65,.46);border-radius:6px;background:rgba(112,30,27,.22);color:#ffb2ad;font-size:8px;font-weight:800;cursor:pointer}
.history-list{flex:1;min-height:0;overflow:auto;padding:9px;display:flex;flex-direction:column;gap:6px}
.history-item{display:grid;grid-template-columns:1.15fr 92px 82px 90px 120px 155px;align-items:center;gap:8px;padding:8px;border:1px solid #34474f;border-radius:7px;background:#081216;cursor:pointer;transition:border-color .14s ease,background .14s ease}
.history-item:hover{border-color:var(--accent-border);background:linear-gradient(145deg,var(--accent-soft),#081216)}
.history-game{min-width:0}
.history-game strong{display:block;color:#f1f5f6;font-size:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.history-game small{display:block;margin-top:2px;color:#819198;font-size:7px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.history-cell span{display:block;color:#7f9198;font-size:6px}
.history-cell strong{display:block;margin-top:2px;color:#eaf0f2;font-size:9px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.history-accuracy{display:flex;gap:4px}
.history-accuracy b{padding:2px 4px;border:1px solid #30434a;border-radius:4px;background:#0a1519;color:var(--accent-text);font-size:7px}
.history-actions{display:flex;justify-content:flex-end;gap:5px}
.history-actions button{height:28px;padding:0 8px;border-radius:5px;font-size:7px;font-weight:800;cursor:pointer}
.history-open{border:1px solid var(--accent-border);background:var(--accent-soft);color:var(--accent-text)}
.history-delete{border:1px solid #4a3b3b;background:#181011;color:#dca19e}
.history-empty{margin:auto;padding:18px;color:#83949a;font-size:9px;text-align:center}
.history-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-top:1px solid #304047}
.history-footer span{color:#72858c;font-size:7px}
@media(max-width:900px){
  .history-item{grid-template-columns:1fr 80px 80px}
  .history-item>.history-cell:nth-of-type(4),.history-item>.history-cell:nth-of-type(5){display:none}
  .history-actions{grid-column:1/-1;justify-content:flex-start}
}


/* =========================================================
   RELATÓRIO — DESEMPENHO POR FASE
   ========================================================= */
.report-phases-section{margin-top:8px}
.report-phase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.report-phase-card{min-width:0;padding:8px;border:1px solid #34474f;border-radius:6px;background:#081216}
.report-phase-card h4{margin:0;color:var(--accent-text);font-size:10px}
.report-phase-range{display:block;margin-top:2px;color:#75888f;font-size:6px}
.report-phase-player{margin-top:7px;padding-top:6px;border-top:1px solid #26383f}
.report-phase-player-name{display:flex;align-items:center;justify-content:space-between;gap:5px}
.report-phase-player-name strong{min-width:0;color:#eaf0f2;font-size:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.report-phase-player-name b{color:var(--accent-text);font-size:9px}
.report-phase-metrics{display:flex;gap:5px;margin-top:4px;color:#83949a;font-size:6px}
.report-phase-metrics span{padding:2px 4px;border:1px solid #2e4148;border-radius:4px;background:#0a1519}
@media(max-width:900px){.report-phase-grid{grid-template-columns:1fr}}


/* =========================================================
   HISTÓRICO — BACKUP / RESTAURAÇÃO
   ========================================================= */
.history-backup-button{
  height:34px;
  padding:0 10px;
  border:1px solid var(--accent-border);
  border-radius:6px;
  background:var(--accent-soft);
  color:var(--accent-text);
  font-size:8px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
.history-backup-button:hover{
  filter:brightness(1.12);
}
@media(max-width:1050px){
  .history-toolbar{flex-wrap:wrap}
  .history-search-wrap{flex-basis:100%}
}


/* =========================================================
   RELATÓRIO — PDF / IMPRESSÃO
   ========================================================= */
.report-header-actions{display:flex;align-items:center;gap:6px}
.report-pdf-button{
  height:34px;padding:0 11px;border:1px solid var(--accent-border);
  border-radius:6px;background:var(--accent-soft);color:var(--accent-text);
  font-size:8px;font-weight:900;cursor:pointer
}
.report-pdf-button:hover{filter:brightness(1.12)}

@page{size:A4 landscape;margin:8mm}

@media print{
  html,body{
    width:auto!important;height:auto!important;overflow:visible!important;
    background:#fff!important;color:#111!important
  }

  body.printing-report .app{display:none!important}

  body.printing-report #reportModal{
    display:block!important;position:static!important;inset:auto!important;
    width:auto!important;height:auto!important;padding:0!important;
    background:#fff!important;overflow:visible!important
  }

  body.printing-report #reportModal .report-backdrop{display:none!important}

  body.printing-report #reportModal .report-dialog{
    position:static!important;width:100%!important;height:auto!important;
    max-width:none!important;max-height:none!important;margin:0!important;
    border:0!important;border-radius:0!important;background:#fff!important;
    box-shadow:none!important;overflow:visible!important;color:#111!important
  }

  body.printing-report #reportModal .report-header{
    position:static!important;background:#fff!important;color:#111!important;
    border-bottom:2px solid #333!important;padding:8px 4px!important
  }

  body.printing-report #reportModal .report-header h2,
  body.printing-report #reportModal .report-section h3,
  body.printing-report #reportModal .report-section-title h3{color:#111!important}

  body.printing-report #reportModal .report-header span,
  body.printing-report #reportModal .report-section-title span,
  body.printing-report #reportModal .report-narrative,
  body.printing-report #reportModal .report-phase-range{color:#444!important}

  body.printing-report #reportModal .report-header-actions{display:none!important}

  body.printing-report #reportModal .report-body{
    height:auto!important;max-height:none!important;overflow:visible!important;
    padding:8px 2px!important;background:#fff!important
  }

  body.printing-report #reportModal .report-summary-grid,
  body.printing-report #reportModal .report-bottom-grid,
  body.printing-report #reportModal .report-time-grid,
  body.printing-report #reportModal .report-phase-grid{
    break-inside:avoid;page-break-inside:avoid
  }

  body.printing-report #reportModal .report-section{
    break-inside:avoid;page-break-inside:avoid;background:#fff!important;
    border-color:#aaa!important;box-shadow:none!important
  }

  body.printing-report #reportModal .report-stat,
  body.printing-report #reportModal .report-critical-item,
  body.printing-report #reportModal .report-opportunity-item,
  body.printing-report #reportModal .report-time-player,
  body.printing-report #reportModal .report-time-highlight,
  body.printing-report #reportModal .report-phase-card{
    background:#fff!important;border-color:#bbb!important;color:#111!important
  }

  body.printing-report #reportModal .report-stat span,
  body.printing-report #reportModal .report-critical-item span,
  body.printing-report #reportModal .report-opportunity-item span,
  body.printing-report #reportModal .report-time-player span,
  body.printing-report #reportModal .report-time-highlight span,
  body.printing-report #reportModal .report-phase-card span{color:#444!important}

  body.printing-report #reportModal strong,
  body.printing-report #reportModal b{color:#111!important}

  body.printing-report #reportModal .report-chart-wrap{
    height:260px!important;border-color:#aaa!important;background:#fff!important
  }

  body.printing-report #reportModal canvas{max-width:100%!important}
  body.printing-report #reportModal .report-chart-legend{color:#333!important}
}


/* =========================================================
   MENU AÇÕES — SEGUE O PERFIL/TEMA ATUAL
   ========================================================= */
.actions-menu summary{
  border-color:var(--accent-border);
}
.actions-menu[open] summary,
.actions-menu summary:hover{
  color:var(--accent-text);
  background:var(--accent-soft);
  border-color:var(--accent-border);
}
.actions-dropdown{
  width:205px;
  border-color:var(--accent-border);
  box-shadow:0 10px 28px rgba(0,0,0,.48),0 0 18px var(--accent-soft);
}
.actions-dropdown button{
  min-height:34px;
  padding:0 11px;
  border-color:color-mix(in srgb,var(--accent-border) 70%,#34474f 30%);
  background:linear-gradient(145deg,var(--accent-soft),#0a1418 72%);
  color:var(--accent-text);
  font-size:10px;
  font-weight:800;
  letter-spacing:.05px;
}
.actions-dropdown button:hover,
.actions-dropdown button:focus-visible{
  border-color:var(--accent);
  background:linear-gradient(145deg,var(--accent-soft),rgba(255,255,255,.035));
  color:#f4f8f9;
  outline:none;
  box-shadow:inset 3px 0 0 var(--accent);
}

/* =========================================================
   TRIAGEM HEURÍSTICA DE PADRÃO DE JOGO
   ========================================================= */
.fair-play-box{
  margin-top:6px;
  min-height:43px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 7px;
  border:1px solid #47545a;
  border-radius:6px;
  background:#0a1519;
}
.fair-play-icon{
  width:25px;
  height:25px;
  flex:0 0 25px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.045);
  font-size:14px;
}
.fair-play-content{
  min-width:0;
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.fair-play-content span{
  color:#8b9ba1;
  font-size:7px;
}
.fair-play-content strong{
  margin-top:2px;
  color:#dce5e8;
  font-size:9px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.fair-play-content small{
  margin-top:2px;
  color:#71848b;
  font-size:6px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.fair-play-box.fairplay-normal{
  border-color:#3e7147;
  background:rgba(46,103,57,.13);
}
.fair-play-box.fairplay-normal .fair-play-icon{color:#82df75}
.fair-play-box.fairplay-watch{
  border-color:#9b7a31;
  background:rgba(165,119,31,.13);
}
.fair-play-box.fairplay-watch .fair-play-icon{color:#f0c34d}
.fair-play-box.fairplay-alert{
  border-color:#a74c46;
  background:rgba(156,50,44,.15);
  box-shadow:inset 3px 0 0 #e45c53;
}
.fair-play-box.fairplay-alert .fair-play-icon{color:#ff736b}
.fair-play-box.fairplay-alert strong{color:#ffb0aa}


/* =========================================================
   TRIAGEM — ÍNDICE E PRINCIPAIS INDICADORES
   ========================================================= */
.fair-play-box{
  align-items:flex-start;
}
.fair-play-content{
  flex:1;
}
.fair-play-headline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}
.fair-play-headline > span{
  min-width:0;
}
.fair-play-headline > strong{
  flex:0 0 auto;
  margin:0;
  font-size:9px;
  color:#dce5e8;
  font-variant-numeric:tabular-nums;
}
.fair-play-score-track{
  width:100%;
  height:4px;
  margin-top:5px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}
.fair-play-score-bar{
  width:0%;
  height:100%;
  border-radius:inherit;
  background:#82df75;
  transition:width .25s ease;
}
.fair-play-metrics{
  margin-top:5px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:3px;
}
.fair-play-metrics span{
  min-width:0;
  padding:3px 4px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:4px;
  background:rgba(255,255,255,.025);
  color:#9fb0b6;
  font-size:6px;
  line-height:8px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.fair-play-box.fairplay-normal .fair-play-score-bar{background:#82df75}
.fair-play-box.fairplay-watch .fair-play-score-bar{background:#f0c34d}
.fair-play-box.fairplay-alert .fair-play-score-bar{background:#ff736b}
.fair-play-box.fairplay-normal .fair-play-headline > strong{color:#9ae38e}
.fair-play-box.fairplay-watch .fair-play-headline > strong{color:#f4cb60}
.fair-play-box.fairplay-alert .fair-play-headline > strong{color:#ff9c95}


/* =========================================================
   TRIAGEM V2 — QUALIDADE DE ENGINE + PADRÃO DE AUTOMAÇÃO
   ========================================================= */
.fair-play-dual-score{
  margin-top:5px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
}
.fair-play-score-card{
  min-width:0;
  padding:4px 5px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:5px;
  background:rgba(255,255,255,.025);
}
.fair-play-score-card > span{
  display:block;
  color:#85979d;
  font-size:6px;
  white-space:nowrap;
}
.fair-play-score-card > strong{
  display:block;
  margin-top:1px;
  color:#e6edef;
  font-size:10px;
  font-variant-numeric:tabular-nums;
}
.fair-play-metrics-five{
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.fair-play-box.fairplay-normal .fair-play-score-bar{background:#82df75}
.fair-play-box.fairplay-watch .fair-play-score-bar{background:#f0c34d}
.fair-play-box.fairplay-alert .fair-play-score-bar{background:#ff736b}
@media(max-width:1500px){
  .fair-play-metrics-five{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* =========================================================
   TRIAGEM V3 — ASSINATURA MECÂNICA DE TEMPO
   ========================================================= */
.fair-play-metrics-six{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media(min-width:1650px){
  .fair-play-metrics-six{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* =========================================================
   TRIAGEM V4 — PERFIL DE FORÇA / RATING
   ========================================================= */
.fair-play-metrics-eight{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media(min-width:1650px){
  .fair-play-metrics-eight{grid-template-columns:repeat(8,minmax(0,1fr))}
}


/* =========================================================
   RATING DOS JOGADORES AO LADO DO NOME
   ========================================================= */
.board-player-rating{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:16px;
  padding:0 5px;
  border:1px solid var(--accent-border);
  border-radius:4px;
  background:var(--accent-soft);
  color:var(--accent-text)!important;
  font-size:8px!important;
  font-weight:900;
  line-height:1;
  font-variant-numeric:tabular-nums;
}


/* =========================================================
   LAYOUT RESPONSIVO — CELULAR
   O desktop permanece inalterado acima de 768px.
   ========================================================= */
@media (max-width:768px){
  html,body{
    width:100%;
    min-height:100%;
    height:auto;
    overflow-x:hidden;
    overflow-y:auto;
  }

  body{
    -webkit-text-size-adjust:100%;
  }

  .app{
    width:100%;
    height:auto;
    min-height:100dvh;
    padding:5px;
    overflow:visible;
  }

  /* Cabeçalho */
  .topbar{
    height:auto;
    min-height:0;
    flex:0 0 auto;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding:6px 4px 8px;
  }

  .brand{
    order:1;
    flex:1 1 100%;
    min-width:0;
    justify-content:center;
  }

  .brand-icon{
    font-size:30px;
  }

  .brand h1{
    font-size:19px;
    line-height:21px;
    white-space:normal;
    text-align:center;
  }

  .steps{
    order:3;
    flex:1 1 100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
    width:100%;
  }

  .step-arrow{
    display:none;
  }

  .import-step-wrap{
    width:auto!important;
    min-width:0;
  }

  .step,
  .import-step-wrap .step{
    width:100%;
    min-width:0;
    height:42px;
    padding:0 8px;
  }

  .step strong{
    font-size:10px;
  }

  .step small{
    font-size:7px;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .import-step-menu{
    left:0;
    right:auto;
    width:min(235px,calc(100vw - 20px));
  }

  .top-actions{
    order:2;
    flex:1 1 100%;
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
  }

  .actions-menu{
    min-width:0;
  }

  .actions-menu summary,
  .settings-top{
    width:100%;
    min-width:0;
    height:36px;
    padding:0 5px;
    font-size:9px;
    white-space:nowrap;
  }

  .actions-dropdown{
    left:0;
    right:auto;
    width:min(220px,calc(100vw - 20px));
  }

  /* Conteúdo principal: uma coluna */
  .dashboard{
    display:flex;
    flex-direction:column;
    width:100%;
    min-height:0;
    gap:6px;
    margin-top:5px;
    overflow:visible;
  }

  .center-column{
    order:1;
    width:100%;
    min-height:0;
    overflow:visible;
  }

  .left-column{
    order:2;
  }

  .right-column{
    order:3;
  }

  .left-column,
  .right-column{
    width:100%;
    min-height:0;
    overflow:visible;
    gap:6px;
  }

  .panel{
    width:100%;
    min-width:0;
  }

  /* Tabuleiro ocupa a largura disponível */
  .board-panel{
    height:auto;
    min-height:0;
    padding:6px 5px;
    overflow:visible;
  }

  .board-title{
    min-height:32px;
    height:auto;
    flex:0 0 auto;
    align-items:flex-start;
    gap:6px;
    padding:0 2px 4px;
  }

  .board-title h2{
    flex:0 0 auto;
    font-size:11px;
  }

  .board-title #gameInfo{
    max-width:none;
    min-width:0;
    flex:1;
    font-size:8px;
    text-align:right;
  }

  .board-player,
  .board-wrapper{
    width:100%;
    max-width:none;
  }

  .board-player{
    height:30px;
    flex-basis:30px;
    padding:2px 3px;
  }

  .board-player-piece{
    width:26px;
    height:26px;
    flex-basis:26px;
  }

  .board-player-data{
    gap:5px;
    flex-wrap:wrap;
  }

  .board-player-data strong{
    font-size:11px;
  }

  .board-player-rating{
    height:17px;
    min-width:35px;
    font-size:8px!important;
  }

  .board-player-data #topPlayerSide,
  .board-player-data #bottomPlayerSide{
    font-size:7px;
  }

  .board-area{
    width:100%;
  }

  .board-wrapper{
    aspect-ratio:1/1;
  }

  /* Relógios ficam sobre a borda direita do tabuleiro,
     sem criar largura extra na página */
  .side-board-clock{
    left:auto!important;
    right:7px!important;
    width:auto;
  }

  .side-board-clock-top{
    top:8px;
  }

  .side-board-clock-bottom{
    bottom:8px;
  }

  .player-side-clock{
    min-width:74px;
    height:31px;
    padding:0 7px;
    font-size:11px;
  }

  /* Navegação em uma grade que sempre cabe na tela */
  .navigation{
    width:100%;
    height:auto;
    min-height:0;
    flex:0 0 auto;
    display:grid;
    grid-template-columns:44px 44px minmax(105px,1fr) 44px 44px;
    gap:5px;
    margin-top:5px;
  }

  .nav-button{
    width:44px;
    min-width:0;
    height:38px;
    flex:initial;
  }

  .move-info{
    width:100%;
    min-width:0;
    height:38px;
    font-size:11px;
  }

  .flip-board-button{
    grid-column:1 / -1;
    width:100%;
    height:34px;
  }

  /* Resumo */
  .analysis-summary{
    flex:none;
  }

  .summary-row{
    font-size:11px;
  }

  .precision{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .precision>div{
    min-width:0;
  }

  .fair-play-metrics-eight{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  /* Lista de lances ganha altura própria e rolagem interna */
  .move-list-panel{
    flex:none;
    min-height:0;
    max-height:none;
    overflow:visible;
  }

  .move-list{
    flex:none;
    height:auto;
    max-height:420px;
    min-height:150px;
    overflow-y:auto;
  }

  .move-list-item{
    min-height:30px;
    grid-template-columns:30px minmax(0,1fr) minmax(0,1fr);
  }

  .move-list-white,
  .move-list-black{
    padding:6px 7px;
    font-size:10px;
  }

  /* Coluna de avaliação vira cartões normais */
  .evaluation-panel,
  .pv-panel,
  .multipv-panel,
  .details-panel,
  .critical-panel{
    flex:none;
    height:auto;
    min-height:0;
  }

  .pv-placeholder{
    max-height:none;
    min-height:48px;
  }

  .move-option{
    min-height:45px;
    grid-template-columns:36px minmax(0,1fr) 55px;
  }

  .move-option .number{
    width:31px;
    height:31px;
  }

  .move-option strong{
    font-size:13px;
  }

  .move-details{
    grid-template-columns:1fr 1fr;
  }

  .move-metrics{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .move-metrics>div{
    min-height:38px;
  }

  .move-metrics span{
    font-size:7px;
  }

  .move-metrics strong{
    font-size:10px;
  }

  .critical-panel{
    overflow:visible;
  }

  .critical-cards{
    height:auto;
    grid-template-columns:1fr 1fr;
    grid-template-rows:none;
  }

  .critical-card{
    min-height:90px;
  }

  /* Modais */
  .report-modal,
  .import-modal,
  .settings-modal,
  .history-modal{
    padding:7px;
    align-items:flex-start;
  }

  .report-dialog,
  .import-dialog,
  .settings-dialog,
  .history-dialog{
    width:100%;
    max-width:none;
    max-height:calc(100dvh - 14px);
    height:auto;
  }

  .report-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .report-bottom-grid{
    grid-template-columns:1fr;
  }

  .report-chart-wrap{
    height:230px;
  }
}

@media (max-width:480px){
  .app{
    padding:3px;
  }

  .brand h1{
    font-size:16px;
    line-height:18px;
  }

  .brand-icon{
    font-size:27px;
  }

  .top-actions{
    grid-template-columns:1fr 1fr 1fr;
  }

  .actions-menu summary,
  .settings-top{
    font-size:8px;
  }

  .step{
    height:40px;
    padding:0 6px;
  }

  .step strong{
    font-size:9px;
  }

  .board-title{
    display:block;
  }

  .board-title #gameInfo{
    display:block;
    width:100%;
    margin-top:3px;
    text-align:left;
  }

  .board-player-data #topPlayerSide,
  .board-player-data #bottomPlayerSide{
    display:none;
  }

  .player-side-clock{
    min-width:68px;
    height:29px;
    font-size:10px;
  }

  .navigation{
    grid-template-columns:40px 40px minmax(90px,1fr) 40px 40px;
    gap:4px;
  }

  .nav-button{
    width:40px;
    height:36px;
  }

  .move-info{
    height:36px;
    font-size:10px;
  }

  .critical-cards{
    grid-template-columns:1fr;
  }

  .fair-play-dual-score{
    grid-template-columns:1fr 1fr;
  }
}