*{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,.move-class-forced{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,.square-move-overlay.forced.destination{background:rgba(74,192,66,.38);box-shadow:inset 0 0 0 4px rgba(95,228,79,.95)}.square-move-overlay.best.origin,.square-move-overlay.forced.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,.square-analysis-tag.forced{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}.reply-arrow{stroke:#ff6b5e}.played-head{fill:#ffc928;fill-opacity:.88}.best-head{fill:#55e868;fill-opacity:.88}.reply-head{fill:#ff6b5e;fill-opacity:.90}
.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,.detail-classification.detail-forced{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}.legend-reply{background:#ff6b5e}
.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,.critical-card.critical-forced::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,.settings-field>input{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,.settings-field>input: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,.settings-field>input{grid-column:1}.settings-field>select,.settings-field>input{grid-row:3;margin-top:7px}.settings-cache-row{align-items:flex-start;flex-direction:column}}
/* =========================================================
TEMAS DE COR — interface + tabuleiro
========================================================= */
:root{
--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="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;
}
}
/* =========================================================
MOBILE — TOQUE NA LISTA DE LANCES PARA MOSTRAR/OCULTAR
OS VALORES SOBRE O TABULEIRO
========================================================= */
@media (max-width:768px){
.move-list-white,
.move-list-black{
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}
.move-list-white.move-list-mobile-info,
.move-list-black.move-list-mobile-info{
outline:2px solid var(--accent);
outline-offset:-2px;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
}
/* =========================================================
EXPLICAÇÃO DO LANCE — DESKTOP + MOBILE
========================================================= */
.move-explanation{
margin-top:6px;
padding:7px 8px;
border:1px solid #32474f;
border-radius:6px;
background:linear-gradient(145deg,var(--accent-soft),rgba(5,14,18,.88) 62%);
}
.move-explanation-title{
margin-bottom:4px;
color:var(--accent-strong);
font-size:8px;
font-weight:900;
letter-spacing:.45px;
}
.move-explanation p{
margin:0;
color:#d7e0e3;
font-size:9px;
line-height:1.42;
}
.move-explanation small{
display:block;
margin-top:5px;
color:var(--accent-text);
font-size:8px;
line-height:1.35;
}
/* =========================================================
MOBILE — RELÓGIOS NA MESMA LINHA DO JOGADOR
========================================================= */
@media(max-width:768px){
.board-player{
position:relative;
display:flex;
align-items:center;
width:100%;
height:37px;
flex-basis:37px;
gap:5px;
}
.board-player-data{
flex:1 1 auto;
min-width:0;
}
.board-player > .side-board-clock{
position:static!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
left:auto!important;
width:auto!important;
flex:0 0 auto;
margin-left:auto;
z-index:auto;
}
.board-player > .side-board-clock .player-side-clock{
min-width:72px;
height:29px;
padding:0 7px;
font-size:10px;
}
.move-explanation{
padding:9px;
}
.move-explanation-title{
font-size:9px;
}
.move-explanation p{
font-size:11px;
line-height:1.48;
}
.move-explanation small{
font-size:9px;
line-height:1.42;
}
}
@media(max-width:420px){
.board-player-data{
gap:4px;
}
.board-player-data strong{
max-width:135px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.board-player > .side-board-clock .player-side-clock{
min-width:65px;
padding:0 5px;
font-size:9px;
}
}
/* =========================================================
AJUSTE FINAL — ESPAÇO DA EXPLICAÇÃO X MOMENTOS CRÍTICOS
========================================================= */
/* Desktop: a explicação passa a receber o espaço flexível da coluna direita.
Os momentos críticos ficam compactos e com altura controlada. */
@media (min-width:769px){
.right-column .details-panel{
flex:1 1 auto;
min-height:155px;
max-height:none;
overflow:auto;
}
.right-column .critical-panel{
flex:0 0 142px;
min-height:142px;
max-height:142px;
overflow:hidden;
}
.right-column .critical-cards{
height:calc(100% - 16px);
grid-template-columns:repeat(2,minmax(0,1fr));
grid-template-rows:repeat(2,minmax(0,1fr));
gap:4px;
}
.right-column .critical-card{
min-height:0;
padding:3px 4px;
gap:0;
}
.right-column .critical-card span{
font-size:6px;
line-height:1;
}
.right-column .critical-card strong{
font-size:9px;
line-height:1.05;
}
.right-column .critical-card small,
.right-column .critical-best-move{
font-size:5.5px;
line-height:1.05;
}
.right-column .move-explanation{
margin-top:5px;
padding:6px 7px;
}
.right-column .move-explanation p{
font-size:8.5px;
line-height:1.32;
}
.right-column .move-explanation small{
margin-top:4px;
font-size:7.5px;
line-height:1.28;
}
}
/* Celular: mantém os quatro momentos críticos em grade 2x2,
evitando quatro cartões grandes empilhados verticalmente. */
@media (max-width:768px){
.critical-panel{
flex:none!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
padding:6px!important;
overflow:visible!important;
}
.critical-panel .critical-cards{
height:auto!important;
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
grid-template-rows:none!important;
gap:5px!important;
}
.critical-panel .critical-card{
min-height:70px!important;
height:70px!important;
padding:5px 4px!important;
gap:1px!important;
}
.critical-panel .critical-card span{
font-size:7px!important;
}
.critical-panel .critical-card strong{
font-size:11px!important;
}
.critical-panel .critical-card small{
font-size:7px!important;
}
.critical-panel .critical-best-move{
font-size:7px!important;
margin-top:2px!important;
}
.details-panel{
height:auto!important;
min-height:0!important;
max-height:none!important;
overflow:visible!important;
}
.move-explanation{
margin-top:6px;
}
}
/* Mesmo em celulares bem estreitos, mantemos 2 colunas.
Assim "Momentos críticos" não volta a ocupar uma tela inteira. */
@media (max-width:480px){
.critical-panel .critical-cards{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.critical-panel .critical-card{
min-height:66px!important;
height:66px!important;
}
.critical-panel .critical-card strong{
font-size:10px!important;
}
.critical-panel .critical-card small,
.critical-panel .critical-best-move{
font-size:6.5px!important;
}
}
/* =========================================================
RESULTADO FINAL NO TABULEIRO — overlay acima da casa e da peça
O elemento fica no board-wrapper (não dentro da casa), evitando
qualquer corte pelo overflow da square. Surge grande e reduz.
========================================================= */
.game-end-king-badge{
position:absolute;
z-index:65;
width:var(--game-end-badge-size,34px);
height:var(--game-end-badge-size,34px);
display:flex;
align-items:center;
justify-content:center;
border:2px solid rgba(255,255,255,.96);
border-radius:999px;
color:#fff;
font-size:clamp(15px,2.05vw,23px);
font-weight:1000;
line-height:1;
box-shadow:0 4px 15px rgba(0,0,0,.58);
pointer-events:none;
user-select:none;
transform-origin:center;
animation:mcaGameEndBadgeIntro 1.08s cubic-bezier(.18,.9,.25,1.25) both;
}
.game-end-king-badge.winner{
background:linear-gradient(145deg,#77c83c,#4aa526);
}
.game-end-king-badge.loser{
background:linear-gradient(145deg,#ef4b4b,#c72f35);
}
.game-end-king-badge.resignation.loser{font-size:clamp(16px,2.2vw,25px)}
.game-end-king-badge.timeout.loser{font-size:clamp(15px,2vw,23px)}
.game-end-king-badge.mate.loser{font-family:Arial,sans-serif;font-size:clamp(17px,2.25vw,26px)}
.game-end-king-badge.mate-final-icon{
animation:mcaMateFinalIcon 1.32s cubic-bezier(.18,.9,.25,1.25) both;
}
.game-end-mate-banner{
position:absolute;
z-index:66;
min-width:max-content;
padding:6px 15px;
border:2px solid rgba(255,255,255,.96);
border-radius:999px;
background:linear-gradient(145deg,#ef4b4b,#c72f35);
color:#fff;
font-size:clamp(14px,1.55vw,23px);
font-weight:1000;
line-height:1;
letter-spacing:.35px;
text-transform:uppercase;
white-space:nowrap;
box-shadow:0 5px 18px rgba(0,0,0,.62);
pointer-events:none;
user-select:none;
transform-origin:center;
animation:mcaMateBannerIntro 1.32s ease-in-out both;
}
@keyframes mcaGameEndBadgeIntro{
0%{opacity:.08;transform:translate(-50%,-50%) scale(2.15)}
46%{opacity:1;transform:translate(-50%,-50%) scale(1.58)}
72%{transform:translate(-50%,-50%) scale(.92)}
100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes mcaMateBannerIntro{
0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}
16%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}
58%{opacity:1;transform:translate(-50%,-50%) scale(1)}
82%{opacity:.9;transform:translate(-50%,-50%) scale(.92)}
100%{opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(.58)}
}
@keyframes mcaMateFinalIcon{
0%,58%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}
72%{opacity:1;transform:translate(-50%,-50%) scale(1.55)}
88%{transform:translate(-50%,-50%) scale(.92)}
100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@media(max-width:768px){
.game-end-king-badge{
border-width:1.5px;
font-size:clamp(15px,5.2vw,22px);
}
.game-end-king-badge.resignation.loser{font-size:clamp(16px,5.6vw,24px)}
.game-end-king-badge.timeout.loser{font-size:clamp(15px,5.2vw,22px)}
.game-end-king-badge.mate.loser{font-size:clamp(17px,5.8vw,25px)}
.game-end-mate-banner{padding:6px 12px;font-size:clamp(14px,4.4vw,20px)}
}
/* =========================================================
EXPLICAÇÃO DIDÁTICA — PONTOS OBJETIVOS
========================================================= */
.move-explanation p{
white-space:pre-line;
}
.play-selected{
box-shadow:inset 0 0 0 5px var(--accent-strong)!important;
}
.play-legal::after{
content:"";
position:absolute;
z-index:15;
width:22%;
height:22%;
border-radius:50%;
background:var(--accent-strong);
opacity:.72;
pointer-events:none;
}
.play-legal:has(.piece)::after{
width:78%;
height:78%;
background:transparent;
border:4px solid var(--accent-strong);
box-sizing:border-box;
}
@media(max-width:768px){
.play-selected{
box-shadow:inset 0 0 0 4px var(--accent-strong)!important;
}
.play-legal:has(.piece)::after{
border-width:3px;
}
}
/* =========================================================
TELA DEDICADA — JOGO CONTRA BOT / AMIGO
========================================================= */
.play-mode-view{
position:fixed;
inset:0;
z-index:1200;
display:flex;
flex-direction:column;
background:linear-gradient(145deg,#071216,#0a171b 65%,#071014);
overflow:auto;
}
.play-mode-view.hidden{display:none!important}
body.play-mode-open{overflow:hidden}
.play-mode-header{
flex:0 0 auto;
min-height:64px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:9px 16px;
border-bottom:1px solid var(--accent-border);
background:rgba(6,16,20,.96);
box-shadow:0 5px 18px rgba(0,0,0,.28);
}
.play-mode-title-wrap{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.play-mode-icon{
color:var(--accent-strong);
font-size:34px;
line-height:1;
}
.play-mode-title-wrap h2{
margin:0;
color:#f3f6f7;
font-size:20px;
line-height:22px;
}
.play-mode-title-wrap small{
color:var(--accent-text);
font-size:9px;
}
.play-mode-actions{
display:flex;
gap:7px;
}
.play-mode-actions button{
height:38px;
padding:0 13px;
border:1px solid var(--accent-border);
border-radius:6px;
background:linear-gradient(145deg,var(--accent-soft),#091418 75%);
color:var(--accent-text);
font-size:10px;
font-weight:900;
cursor:pointer;
}
.play-mode-actions button:hover{
color:#fff;
box-shadow:0 0 12px var(--accent-soft);
}
.play-mode-body{
flex:1 1 auto;
min-height:0;
display:grid;
grid-template-columns:minmax(620px,1fr) 280px;
gap:10px;
padding:10px;
overflow:auto;
}
.play-board-host{
min-width:0;
display:flex;
justify-content:center;
align-items:flex-start;
}
.play-board-host .board-panel{
width:min(100%,1050px);
height:auto;
min-height:0;
max-height:none;
overflow:visible;
}
.play-board-host .board-wrapper{
width:min(100%,calc(100vh - 175px),875px);
}
.play-board-host .board-player{
width:min(100%,calc(100vh - 175px),875px);
}
.play-help-panel{
align-self:start;
padding:12px;
border:1px solid #34474f;
border-radius:8px;
background:linear-gradient(145deg,#0d1b20,#081216);
}
.play-help-panel h3{
margin:0 0 8px;
color:var(--accent-strong);
font-size:13px;
}
.play-help-panel p{
margin:0;
color:#d0dadd;
font-size:11px;
line-height:1.5;
}
.play-help-tip{
margin-top:12px;
padding:10px;
border:1px solid var(--accent-border);
border-radius:6px;
background:var(--accent-soft);
}
.play-help-tip strong{
display:block;
color:var(--accent-text);
font-size:10px;
}
.play-help-tip span{
display:block;
margin-top:4px;
color:#a9b8bd;
font-size:9px;
line-height:1.45;
}
/* Dentro da tela de jogo, não precisamos do título "TABULEIRO – POSIÇÃO ATUAL". */
.play-board-host .board-title{
display:none;
}
@media(max-width:900px){
.play-mode-header{
min-height:0;
flex-wrap:wrap;
padding:9px;
}
.play-mode-title-wrap{
flex:1 1 100%;
}
.play-mode-title-wrap h2{
font-size:17px;
}
.play-mode-actions{
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
}
.play-mode-actions button{
width:100%;
}
.play-mode-body{
display:flex;
flex-direction:column;
padding:6px;
gap:7px;
overflow:visible;
}
.play-board-host{
width:100%;
}
.play-board-host .board-panel{
width:100%;
padding:5px;
}
.play-board-host .board-wrapper,
.play-board-host .board-player{
width:100%;
max-width:none;
}
.play-help-panel{
width:100%;
}
.play-mode-view{
overflow-y:auto;
}
}
@media(max-width:480px){
.play-mode-title-wrap h2{
font-size:15px;
}
.play-mode-icon{
font-size:28px;
}
.play-mode-actions button{
height:36px;
padding:0 7px;
font-size:9px;
}
.play-help-panel{
padding:9px;
}
}
/* =========================================================
MENU JOGAR CONTRA...
========================================================= */
.action-link-button{
min-height:34px;
display:flex;
align-items:center;
width:100%;
padding:0 11px;
border:1px solid var(--accent-border);
border-radius:5px;
background:linear-gradient(145deg,var(--accent-soft),#0a1418 72%);
color:var(--accent-text);
text-decoration:none;
font-size:10px;
font-weight:800;
}
.action-link-button:hover{
color:#fff;
border-color:var(--accent-strong);
box-shadow:inset 0 0 12px var(--accent-soft);
}
.play-navigation-menu .actions-dropdown{
width:205px;
}
@media(max-width:768px){
.play-navigation-menu{
min-width:0;
}
.play-navigation-menu summary{
width:100%;
}
}
/* =========================================================
MOBILE — 4 MENUS DO TOPO EM UMA ÚNICA LINHA
========================================================= */
@media(max-width:768px){
.top-actions{
flex:1 1 100%;
width:100%;
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:4px!important;
}
.top-actions > *{
min-width:0!important;
width:100%!important;
}
.top-actions .actions-menu summary,
.top-actions .settings-top{
width:100%!important;
min-width:0!important;
height:36px!important;
padding:0 3px!important;
font-size:8px!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.top-actions .actions-dropdown{
width:min(220px,calc(100vw - 14px))!important;
}
}
@media(max-width:480px){
.top-actions{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:3px!important;
}
.top-actions .actions-menu summary,
.top-actions .settings-top{
height:34px!important;
padding:0 2px!important;
font-size:7.2px!important;
letter-spacing:-.15px!important;
}
}
/* =========================================================
DOWNLOAD DO MAUMAUCHESS — SOMENTE NAVEGADOR MOBILE
========================================================= */
.android-download-section{
display:none;
}
.android-download-section.is-visible{
display:block;
width:100%;
max-width:760px;
margin:10px auto 18px;
padding:0 12px;
box-sizing:border-box;
}
.android-download-button{
width:100%;
min-height:58px;
display:grid;
grid-template-columns:42px minmax(0,1fr) 28px;
align-items:center;
gap:10px;
padding:9px 12px;
box-sizing:border-box;
border:1px solid var(--accent,#39d6c2);
border-radius:10px;
background:linear-gradient(180deg,rgba(57,214,194,.13),rgba(57,214,194,.045));
color:#edf7f6;
text-decoration:none;
box-shadow:0 8px 22px rgba(0,0,0,.16);
}
.android-download-icon{
display:grid;place-items:center;
width:40px;height:40px;border-radius:9px;
background:#071216;color:var(--accent,#39d6c2);
font-size:29px;line-height:1;
}
.android-download-copy{display:flex;flex-direction:column;min-width:0;text-align:left}
.android-download-copy strong{font-size:13px;line-height:1.25}
.android-download-copy small{margin-top:3px;color:#9fb2b7;font-size:10px}
.android-download-arrow{font-size:22px;color:var(--accent,#39d6c2);text-align:center}
@media(min-width:901px){.android-download-section.is-visible{display:none!important}}
/* =========================================================
MOBILE — ALINHAMENTO DO CARD IMPORTAR
O wrapper tinha 36px enquanto os quatro cards usam 42px.
========================================================= */
@media(max-width:768px){
.steps{align-items:stretch!important;}
.import-step-wrap{
width:100%!important;
height:42px!important;
min-height:42px!important;
flex-basis:auto!important;
align-self:stretch!important;
}
.import-step-wrap > .step,
.steps > .step{
height:42px!important;
min-height:42px!important;
margin:0!important;
box-sizing:border-box!important;
}
}
/* =========================================================
CAPACITOR / TELAS EDGE-TO-EDGE
Mantém o conteúdo fora das áreas dos ícones do sistema,
enquanto o próprio fundo da página continua atrás delas.
========================================================= */
@supports (padding: env(safe-area-inset-top)){
body.native-app .app{
min-height:100dvh;
padding-top:env(safe-area-inset-top);
padding-bottom:env(safe-area-inset-bottom);
}
}
/* =========================================================
MAUMAUCHESS AJUSTE 4 — MOBILE
1) fontes maiores nos botões;
2) feedback tátil/visual ao pressionar;
3) Avaliação da Posição logo abaixo do tabuleiro.
========================================================= */
@media (max-width:768px){
/* Botões principais e de diálogos: melhora leitura sem aumentar
significativamente a altura dos componentes. */
button,
.action-link-button,
.android-download-button{
font-size:11.5px;
}
.top-actions .actions-menu summary,
.top-actions .settings-top{
font-size:9.5px!important;
letter-spacing:-.15px!important;
}
.actions-dropdown button,
.action-link-button{
font-size:11px!important;
}
.step strong{
font-size:11px;
}
.import-tab,
.import-actions button,
.pgn-file-button,
.settings-primary-button,
.settings-secondary-button,
.settings-danger-button,
.history-backup-button,
.history-clear-button,
.report-pdf-button,
.general-report-button{
font-size:11px!important;
}
.nav-button{
font-size:15px!important;
}
.move-info,
.flip-board-button{
font-size:11.5px!important;
}
/* Efeito de pressionamento no touch. */
button,
.actions-menu summary,
.action-link-button,
.android-download-button{
transform-origin:center;
transition:transform .08s ease, filter .08s ease, opacity .08s ease;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}
button:active,
.actions-menu summary:active,
.action-link-button:active,
.android-download-button:active{
transform:scale(.94)!important;
filter:brightness(.88);
}
/* Quando a avaliação é movida para dentro da coluna central
ela se comporta como cartão normal, logo abaixo do tabuleiro. */
.center-column > .evaluation-panel.mobile-evaluation-panel{
width:100%;
height:auto;
min-height:0;
margin-top:6px;
flex:none;
}
}
@media (max-width:480px){
.top-actions .actions-menu summary,
.top-actions .settings-top{
font-size:9px!important;
padding:0 2px!important;
}
button,
.action-link-button,
.android-download-button{
font-size:11px;
}
.actions-dropdown button,
.action-link-button{
font-size:10.5px!important;
}
}
/* =========================================================
MAUMAU CHESS ANALYZER — AJUSTE 5
MOBILE COMPACTO EM UMA TELA
Desktop (>768px) permanece com as três colunas originais.
========================================================= */
.mobile-analysis-toolbar,
.mobile-analysis-modal{
display:none;
}
@media (max-width:768px), (pointer:coarse) and (max-width:1280px){
html,body{
width:100%;
height:100%;
min-height:100%;
overflow:hidden!important;
}
body{
background:#071014;
}
.app{
--mobile-board-size:min(calc(100vw - 18px), calc(100dvh - 315px));
width:100%;
height:100dvh!important;
min-height:100dvh!important;
max-height:100dvh;
padding:4px 5px 5px;
overflow:hidden!important;
display:flex;
flex-direction:column;
}
/* Cabeçalho compacto */
.topbar{
flex:0 0 auto;
display:flex;
flex-wrap:wrap;
gap:4px;
padding:3px 2px 5px;
}
.brand{
order:1;
flex:1 1 100%;
height:39px;
min-height:39px;
}
.brand-icon{font-size:25px}
.brand h1{
font-size:17px;
line-height:18px;
white-space:nowrap;
}
/* Os quatro cards de workflow deixam de ocupar a tela.
O estado continua disponível pelos dados e pelo relatório. */
.steps{
display:none!important;
}
.top-actions{
order:2;
flex:1 1 100%;
display:grid!important;
grid-template-columns:1.12fr .8fr .86fr 1.08fr!important;
gap:4px!important;
width:100%;
}
.top-actions > *{min-width:0!important}
.top-actions .actions-menu summary,
.top-actions .settings-top{
height:31px!important;
min-height:31px!important;
padding:0 3px!important;
font-size:9px!important;
border-radius:6px!important;
overflow:hidden;
text-overflow:ellipsis;
}
/* Só o tabuleiro fica no dashboard principal no mobile. */
.dashboard{
flex:1 1 auto;
min-height:0;
width:100%;
margin:0!important;
gap:0!important;
overflow:hidden!important;
display:block!important;
}
.left-column,
.right-column{
display:none!important;
}
.center-column{
width:100%!important;
height:100%;
min-height:0;
overflow:hidden!important;
display:flex!important;
flex-direction:column;
align-items:center;
gap:4px;
}
.board-panel{
width:100%;
min-height:0!important;
height:auto!important;
padding:4px 4px 3px!important;
overflow:hidden!important;
flex:0 1 auto;
}
.board-title{
width:var(--mobile-board-size);
min-height:27px!important;
height:27px!important;
margin:0 auto;
padding:0 1px 2px!important;
display:flex!important;
align-items:center!important;
gap:5px;
}
.board-title h2{
font-size:10.5px!important;
line-height:12px;
white-space:nowrap;
}
.board-title #gameInfo{
min-width:0;
flex:1;
font-size:7.5px!important;
line-height:10px;
text-align:right!important;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.board-player{
width:var(--mobile-board-size)!important;
height:32px!important;
min-height:32px!important;
flex-basis:32px!important;
margin-left:auto;
margin-right:auto;
padding:1px 2px!important;
}
.board-player-piece{
width:28px!important;
height:28px!important;
flex-basis:28px!important;
}
.board-player-data strong{font-size:11px!important}
.board-player-rating{
min-width:35px!important;
height:18px!important;
font-size:8px!important;
}
.board-player-data #topPlayerSide,
.board-player-data #bottomPlayerSide{display:none!important}
.board-area{
width:var(--mobile-board-size)!important;
height:var(--mobile-board-size)!important;
margin:0 auto;
flex:0 0 var(--mobile-board-size);
}
.board-wrapper{
width:var(--mobile-board-size)!important;
height:var(--mobile-board-size)!important;
max-width:none!important;
aspect-ratio:1/1;
}
.board-player > .side-board-clock .player-side-clock{
min-width:68px!important;
height:27px!important;
padding:0 6px!important;
font-size:10px!important;
}
.navigation{
width:var(--mobile-board-size)!important;
margin:3px auto 0!important;
grid-template-columns:34px 34px minmax(85px,1fr) 42px 34px!important;
gap:3px!important;
}
.nav-button{
width:100%!important;
min-width:0!important;
height:32px!important;
font-size:13px!important;
}
.move-info{
height:32px!important;
font-size:10.5px!important;
}
.flip-board-button{
height:29px!important;
margin-top:0!important;
font-size:10px!important;
}
/* Barra de funções rápidas, logo abaixo do tabuleiro. */
.mobile-analysis-toolbar{
display:grid!important;
width:var(--mobile-board-size);
flex:0 0 auto;
grid-template-columns:.72fr 1.38fr .86fr;
gap:3px;
margin:0 auto;
}
.mobile-tool-button{
min-width:0;
height:30px;
padding:0 4px;
border:1px solid var(--accent-border);
border-radius:6px;
background:linear-gradient(#0e191d,#0a1418);
color:#e9eef0;
font-size:9.5px!important;
font-weight:800;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
cursor:pointer;
}
.mobile-tool-button:active{
transform:scale(.94)!important;
filter:brightness(.86);
}
/* Modais de informação */
.mobile-analysis-modal{
position:fixed;
inset:0;
z-index:780;
display:flex;
align-items:center;
justify-content:center;
padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom));
}
.mobile-analysis-modal.hidden{display:none!important}
.mobile-analysis-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.76);
backdrop-filter:blur(3px);
}
.mobile-analysis-dialog{
position:relative;
z-index:1;
width:min(96vw,620px);
max-height:84dvh;
display:flex;
flex-direction:column;
overflow:hidden;
border:1px solid var(--accent-border);
border-radius:10px;
background:#081317;
box-shadow:0 20px 60px rgba(0,0,0,.68);
}
.mobile-analysis-header{
min-height:45px;
padding:7px 9px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
border-bottom:1px solid #31434a;
}
.mobile-analysis-header h2{
margin:0;
color:var(--accent-strong);
font-size:12px;
}
.mobile-analysis-close{
width:34px;
height:32px;
border:1px solid #405159;
border-radius:6px;
background:#0d181c;
color:#edf2f4;
font-size:14px!important;
}
.mobile-analysis-body{
min-height:0;
overflow:auto;
padding:6px;
}
.mobile-analysis-body > .panel,
.mobile-analysis-body > .move-explanation{
display:block!important;
width:100%!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
margin:0!important;
overflow:visible!important;
}
.mobile-analysis-body > .panel{
border:none!important;
box-shadow:none!important;
background:transparent!important;
padding:5px!important;
}
.mobile-analysis-body .move-explanation{
margin:0!important;
padding:10px!important;
}
.mobile-analysis-body .move-explanation-title{
font-size:11px!important;
}
.mobile-analysis-body .move-explanation p{
font-size:11px!important;
line-height:1.5;
}
.mobile-analysis-body .move-explanation small{
font-size:10px!important;
line-height:1.45;
}
body.mobile-analysis-open{
overflow:hidden!important;
}
}
/* Telefones baixos: o tabuleiro reduz para garantir que toda a tela
operacional continue visível sem rolagem vertical. */
@media (max-width:768px) and (max-height:900px), (pointer:coarse) and (max-width:1280px) and (max-height:900px){
.app{
--mobile-board-size:min(calc(100vw - 18px), calc(100dvh - 285px));
}
.brand{
height:34px;
min-height:34px;
}
.brand h1{font-size:15px}
.brand-icon{font-size:22px}
.top-actions .actions-menu summary,
.top-actions .settings-top{
height:28px!important;
min-height:28px!important;
font-size:8px!important;
}
.board-title{
height:23px!important;
min-height:23px!important;
}
.board-player{
height:28px!important;
min-height:28px!important;
flex-basis:28px!important;
}
.board-player-piece{
width:24px!important;
height:24px!important;
flex-basis:24px!important;
}
.mobile-tool-button{height:27px}
}
/* =========================================================
MAUMAU CHESS ANALYZER — AJUSTE 6
========================================================= */
/* Workflow concluído obedece ao perfil de cores selecionado. */
.workflow-step.step-done{
border-color:var(--accent-border)!important;
background:linear-gradient(145deg,var(--accent-soft),#0c1714)!important;
box-shadow:inset 0 0 14px var(--accent-soft)!important;
}
.workflow-step.step-done .step-number,
.workflow-step.step-done .step-check{
color:var(--accent-strong)!important;
text-shadow:0 0 7px var(--accent-soft)!important;
}
.workflow-step.step-done small{color:var(--accent-text)!important}
.import-status.success{
color:var(--accent-text)!important;
border-color:var(--accent-border)!important;
background:var(--accent-soft)!important;
}
.import-pane input:focus,.import-pane textarea:focus{
border-color:var(--accent-border)!important;
box-shadow:0 0 0 2px var(--accent-soft)!important;
}
/* Desktop: Momentos Críticos fica compacto, inteiro e sem ser cortado. */
@media (min-width:769px) and (pointer:fine){
.right-column .critical-panel{
flex:0 0 104px!important;
min-height:104px!important;
max-height:104px!important;
padding:6px 7px 5px!important;
overflow:hidden!important;
}
.right-column .critical-cards{
height:calc(100% - 16px)!important;
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
grid-template-rows:1fr!important;
gap:4px!important;
}
.right-column .critical-card{
height:100%!important;
min-height:0!important;
padding:3px!important;
}
.right-column .critical-card strong{font-size:8px!important}
.right-column .critical-card span,
.right-column .critical-card small,
.right-column .critical-best-move{font-size:5.5px!important}
}
.mobile-evaluation-strip{display:none}
/* Celulares Android, navegadores mobile e tablets Android/coarse pointer. */
@media (max-width:768px), (pointer:coarse) and (max-width:1280px){
.app{
height:100dvh!important;
min-height:100dvh!important;
max-height:100dvh!important;
padding-bottom:max(4px,env(safe-area-inset-bottom))!important;
}
/* Reserva espaço da avaliação sem criar rolagem. */
.app{
--mobile-board-size:min(calc(100vw - 18px), calc(100dvh - 345px), 820px);
}
.mobile-analysis-toolbar{
grid-template-columns:.72fr 1.38fr .86fr!important;
}
.mobile-evaluation-strip{
display:block!important;
width:var(--mobile-board-size);
flex:0 0 60px;
height:60px;
margin:1px auto 0;
padding:5px 7px 4px;
border:1px solid var(--accent-border);
border-radius:7px;
background:linear-gradient(145deg,var(--accent-soft),#091316 68%);
overflow:hidden;
}
.mobile-evaluation-head{
height:18px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}
.mobile-evaluation-head strong{
color:var(--accent-strong);
font-size:9.5px;
white-space:nowrap;
}
.mobile-evaluation-head span{
color:#eef4f6;
font-size:14px;
font-weight:900;
}
.mobile-evaluation-bar{
position:relative;
height:11px;
margin-top:4px;
background:linear-gradient(to right,#283034,#5d676b,#f0f0f0);
border-radius:2px;
}
.mobile-evaluation-marker{
position:absolute;
left:50%;
top:-4px;
width:2px;
height:19px;
background:var(--accent-strong);
transform:translateX(-1px);
}
.mobile-evaluation-scale{
display:flex;
justify-content:space-between;
margin-top:3px;
color:#9bacb2;
font-size:7px;
}
/* Lista de lances dentro da janela móvel. */
.mobile-analysis-body .move-list-panel{
display:flex!important;
flex-direction:column!important;
width:100%!important;
height:min(62dvh,560px)!important;
min-height:260px!important;
padding:5px!important;
}
.mobile-analysis-body .move-list{
flex:1 1 auto!important;
min-height:0!important;
overflow-y:auto!important;
}
}
/* Telefones mais baixos: reduz somente o tabuleiro, mantendo todos os controles e avaliação. */
@media (max-width:768px) and (max-height:900px), (pointer:coarse) and (max-width:1280px) and (max-height:900px){
.app{--mobile-board-size:min(calc(100vw - 18px),calc(100dvh - 315px),820px)}
.mobile-evaluation-strip{height:52px;flex-basis:52px;padding-top:3px}
.mobile-evaluation-head{height:16px}
}
/* Tablets: evita o tabuleiro gigantesco e conserva a tela operacional inteira. */
@media (pointer:coarse) and (min-width:769px) and (max-width:1280px){
.app{--mobile-board-size:min(calc(100vw - 60px),calc(100dvh - 345px),760px)}
.brand h1{font-size:20px!important}
.top-actions{max-width:900px;margin-left:auto;margin-right:auto}
.mobile-analysis-toolbar,.mobile-evaluation-strip{max-width:760px}
}
/* =========================================================
MAUMAU CHESS ANALYZER — AJUSTE 7
========================================================= */
/* Títulos das três formas de importação obedecem ao perfil selecionado. */
#importModal .modal-header h2,
#importModal .import-modal-title,
#importModal [data-import-title],
#importModal h2,
#importModal h3{
color:var(--accent-strong)!important;
}
/* Abas e foco do importador também seguem a cor ativa. */
#importModal .import-tab.active,
#importModal .import-tab[aria-selected="true"]{
color:var(--accent-text)!important;
border-color:var(--accent-border)!important;
background:var(--accent-soft)!important;
}
#importModal input:focus,
#importModal textarea:focus{
border-color:var(--accent-border)!important;
box-shadow:0 0 0 2px var(--accent-soft)!important;
}
/* Botão para baixar o APK volta a aparecer SOMENTE no navegador mobile.
A lógica JS existente continua ocultando-o quando roda dentro do Capacitor. */
@media (max-width:768px), (pointer:coarse) and (max-width:1280px){
.android-download-section.is-visible{
display:flex!important;
width:var(--mobile-board-size);
flex:0 0 32px;
min-height:32px;
max-height:32px;
margin:2px auto 0!important;
padding:0!important;
align-items:center;
justify-content:center;
overflow:hidden;
}
.android-download-button{
width:100%;
height:30px!important;
min-height:30px!important;
padding:0 8px!important;
font-size:9.5px!important;
line-height:30px!important;
border-radius:6px!important;
}
/* Reserva o espaço do botão de download no navegador sem provocar rolagem.
No app nativo, onde o botão não existe, o tabuleiro aproveita o espaço extra. */
body:not(.capacitor-native) .app{
--mobile-board-size:min(calc(100vw - 18px),calc(100dvh - 379px),820px);
}
.mobile-evaluation-scale{
display:grid!important;
grid-template-columns:repeat(11,1fr)!important;
align-items:center;
gap:0!important;
width:100%;
margin-top:3px;
}
.mobile-evaluation-scale span{
display:block;
min-width:0;
text-align:center;
font-size:6.8px!important;
line-height:8px;
color:#9bacb2;
}
}
/* Telas Android menores: compacta um pouco mais sem esconder a avaliação. */
@media (max-width:768px) and (max-height:900px),
(pointer:coarse) and (max-width:1280px) and (max-height:900px){
body:not(.capacitor-native) .app{
--mobile-board-size:min(calc(100vw - 18px),calc(100dvh - 347px),820px);
}
.android-download-section.is-visible{
flex-basis:29px;
min-height:29px;
max-height:29px;
}
.android-download-button{
height:27px!important;
min-height:27px!important;
line-height:27px!important;
font-size:9px!important;
}
.mobile-evaluation-scale span{
font-size:6.2px!important;
}
}
/* =========================================================
MAUMAU CHESS ANALYZER — AJUSTE 8
========================================================= */
/* Barra de "Calculando todas as posições" obedece ao perfil selecionado. */
.full-analysis-header strong{
color:var(--accent-strong)!important;
}
.full-analysis-track{
border-color:var(--accent-border)!important;
}
.full-analysis-bar{
background:linear-gradient(90deg,var(--accent),var(--accent-strong),var(--accent-text))!important;
box-shadow:0 0 9px var(--accent-soft)!important;
}
/* Contexto do MultiPV. */
.multipv-context{
display:block;
margin:-1px 0 5px;
color:#83949b;
font-size:7px;
}
/* Progresso compacto: ocupa o lugar da barra de botões durante análise. */
.mobile-analysis-progress{
display:none;
}
@media (max-width:768px), (pointer:coarse) and (max-width:1280px){
.mobile-analysis-toolbar.analysis-running{
display:none!important;
}
.mobile-analysis-progress:not(.hidden){
display:block!important;
width:var(--mobile-board-size);
height:63px;
flex:0 0 63px;
margin:0 auto;
padding:6px 7px;
border:1px solid var(--accent-border);
border-radius:7px;
background:linear-gradient(145deg,var(--accent-soft),#091316 72%);
overflow:hidden;
}
.mobile-analysis-progress-head,
.mobile-analysis-progress-foot{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
white-space:nowrap;
}
.mobile-analysis-progress-head{
height:18px;
color:#dce6e9;
font-size:8.5px;
}
.mobile-analysis-progress-head strong{
color:var(--accent-strong);
font-size:11px;
}
.mobile-analysis-progress-track{
width:100%;
height:13px;
margin:4px 0;
overflow:hidden;
border:1px solid var(--accent-border);
border-radius:10px;
background:#071014;
}
.mobile-analysis-progress-bar{
width:0;
height:100%;
border-radius:10px;
background:linear-gradient(90deg,var(--accent),var(--accent-strong),var(--accent-text));
box-shadow:0 0 9px var(--accent-soft);
transition:width .28s ease;
}
.mobile-analysis-progress-foot{
height:14px;
color:#8fa0a6;
font-size:7.5px;
}
/* Agora são 5 botões: Importar, Detalhes, MultiPV, Lista e Resumo. */
.mobile-analysis-toolbar{
grid-template-columns:.76fr 1fr 1fr!important;
}
.mobile-analysis-toolbar .mobile-tool-button:nth-child(4),
.mobile-analysis-toolbar .mobile-tool-button:nth-child(5){
min-width:0;
}
}
/* =========================================================
MAUMAU CHESS ANALYZER — AJUSTE 9
========================================================= */
/* Histórico e Configurações seguem o perfil apenas pela borda/realce. */
#historyButton,
#settingsButton,
.actions-menu > summary{
border-color:var(--accent-border)!important;
}
#historyButton:hover,
#historyButton:focus-visible,
#settingsButton:hover,
#settingsButton:focus-visible,
.actions-menu[open] > summary,
.actions-menu > summary:hover,
.actions-menu > summary:focus-visible{
border-color:var(--accent-strong)!important;
box-shadow:0 0 0 1px var(--accent-soft) inset!important;
}
.actions-dropdown{
border-color:var(--accent-border)!important;
}
.actions-dropdown button{
border-color:color-mix(in srgb,var(--accent-border) 58%,#34474f)!important;
}
.actions-dropdown button:hover,
.actions-dropdown button:focus-visible{
border-color:var(--accent-strong)!important;
background:linear-gradient(145deg,var(--accent-soft),#0a1418)!important;
}
/* =========================================================
MAUMAU CHESS ANALYZER — AJUSTE 10
Bordas dos modais seguem o perfil selecionado.
========================================================= */
.settings-dialog,
.history-dialog{
border-color:var(--accent-border)!important;
box-shadow:0 0 0 1px var(--accent-soft),0 24px 70px rgba(0,0,0,.65)!important;
}
.settings-header,
.history-header{
border-bottom-color:var(--accent-border)!important;
}
.settings-footer,
.history-footer{
border-top-color:var(--accent-border)!important;
}
.settings-field,
.history-search-wrap,
.history-item{
border-color:color-mix(in srgb,var(--accent-border) 48%,#34474f)!important;
}
.settings-close,
.history-close{
border-color:var(--accent-border)!important;
}
.settings-close:hover,
.history-close:hover{
border-color:var(--accent-strong)!important;
}
/* =========================================================
MAUMAU CHESS ANALYZER — AJUSTE 11
========================================================= */
/* Configurações: nenhum realce verde fixo. Tudo segue o perfil. */
.settings-field>select:focus,
.settings-field>select:focus-visible,
.settings-field>input:focus,
.settings-field>input:focus-visible{
border-color:var(--accent-strong)!important;
box-shadow:0 0 0 1px var(--accent-soft)!important;
}
.settings-note{
border-color:var(--accent-border)!important;
background:var(--accent-soft)!important;
color:var(--accent-text)!important;
}
.settings-primary-button{
border-color:var(--accent-border)!important;
background:linear-gradient(145deg,var(--accent-soft),#10191b)!important;
color:var(--accent-text)!important;
}
.settings-primary-button:hover{
border-color:var(--accent-strong)!important;
}
.settings-dialog option:checked{
background:var(--accent)!important;
color:#fff!important;
}
/* Texto da etapa Importar/etapa ativa acompanha o perfil. */
.step.active,
.workflow-step.step-active{
border-color:var(--accent-border)!important;
background:linear-gradient(145deg,var(--accent-soft),#0c1714)!important;
box-shadow:inset 0 0 18px var(--accent-soft)!important;
}
.step.active .step-number,
.workflow-step.step-active .step-number{
color:var(--accent-strong)!important;
}
.step.active small,
.workflow-step.step-active small{
color:var(--accent-text)!important;
}
.step-button:hover{
border-color:var(--accent-border)!important;
background:linear-gradient(145deg,var(--accent-soft),#0d171b)!important;
}
.step-arrow{color:var(--accent-border)!important}
/* Desktop: restaura Momentos Críticos no formato 2x2 anterior,
sem cortar as informações dos cartões. */
@media (min-width:769px) and (pointer:fine){
.right-column .critical-panel{
flex:1 1 auto!important;
min-height:112px!important;
max-height:none!important;
padding:6px 8px 5px!important;
overflow:hidden!important;
}
.right-column .critical-cards{
height:calc(100% - 17px)!important;
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
grid-template-rows:repeat(2,minmax(0,1fr))!important;
gap:5px!important;
}
.right-column .critical-card{
height:auto!important;
min-height:0!important;
padding:4px 5px!important;
}
.right-column .critical-card strong{font-size:11px!important}
.right-column .critical-card span{font-size:7px!important}
.right-column .critical-card small,
.right-column .critical-best-move{font-size:6px!important}
}
/* Navegador mobile: reserva espaço real para Inverter e Download.
No Capacitor essas regras não diminuem o tabuleiro. */
@media (max-width:768px), (pointer:coarse) and (max-width:1280px){
body:not(.capacitor-native) .app{
--mobile-board-size:min(calc(100vw - 18px),calc(100dvh - 438px),820px)!important;
}
body:not(.capacitor-native) .flip-board-button{
display:flex!important;
visibility:visible!important;
height:28px!important;
min-height:28px!important;
align-items:center!important;
justify-content:center!important;
}
body:not(.capacitor-native) .android-download-section.is-visible{
display:flex!important;
flex:0 0 29px!important;
min-height:29px!important;
max-height:29px!important;
margin:2px auto 0!important;
overflow:hidden!important;
}
body:not(.capacitor-native) .android-download-button{
height:27px!important;
min-height:27px!important;
grid-template-columns:24px minmax(0,1fr) 18px!important;
gap:5px!important;
padding:0 7px!important;
}
body:not(.capacitor-native) .android-download-icon{
width:22px!important;
height:22px!important;
font-size:17px!important;
border-radius:5px!important;
}
body:not(.capacitor-native) .android-download-copy strong{
font-size:8.5px!important;
line-height:1!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
body:not(.capacitor-native) .android-download-copy small{display:none!important}
body:not(.capacitor-native) .android-download-arrow{font-size:14px!important}
}
@media (max-width:768px) and (max-height:900px),
(pointer:coarse) and (max-width:1280px) and (max-height:900px){
body:not(.capacitor-native) .app{
--mobile-board-size:min(calc(100vw - 18px),calc(100dvh - 402px),820px)!important;
}
}
/* =========================================================
MAUMAU CHESS ANALYZER — AJUSTE 13
XEQUE-MATE: rótulo em camada do tabuleiro, não preso à casa.
========================================================= */
.checkmate-board-badge{
position:absolute!important;
z-index:80!important;
transform:translateX(-50%)!important;
min-width:92px!important;
max-width:110px!important;
text-align:center!important;
box-sizing:border-box!important;
overflow:visible!important;
pointer-events:none!important;
}
/* =========================================================
MAUMAU CHESS ANALYZER — AJUSTE 14
========================================================= */
/* Importação em andamento segue o perfil selecionado. */
.import-status.loading{
color:var(--accent-text)!important;
border-color:var(--accent-border)!important;
background:linear-gradient(145deg,var(--accent-soft),#081216)!important;
}
/* Precisão média deixa o verde fixo e passa a integrar o perfil. */
.precision>div{
border-color:color-mix(in srgb,var(--accent-border) 45%,#34434a)!important;
}
.precision strong{
color:var(--accent-text)!important;
text-shadow:0 0 7px var(--accent-soft)!important;
}
/* Ícones sem o antigo círculo/glow de texto. */
.summary-row>span b.summary-icon{
width:25px!important;
height:25px!important;
flex:0 0 25px!important;
font-size:17px!important;
text-shadow:none!important;
}
/* Categoria brilhante. */
.move-class-brilliant{
color:#dff7ff!important;
background:linear-gradient(145deg,rgba(35,150,190,.27),rgba(75,80,175,.22))!important;
border-color:rgba(94,206,242,.55)!important;
}
.detail-classification.detail-brilliant{
color:#c9f5ff!important;
background:rgba(45,160,205,.28)!important;
}
.critical-card.critical-brilliant::before{background:#65d6ff!important}
.square-analysis-tag.brilliant{background:rgba(32,142,188,.94)!important;color:#fff!important}
.square-move-overlay.brilliant{border-color:#65d6ff!important}
/* Relatório acima do modal Resumo e cores coerentes com o perfil. */
.report-modal{z-index:920!important}
.report-dialog{
border-color:var(--accent-border)!important;
box-shadow:0 0 0 1px var(--accent-soft),0 24px 70px rgba(0,0,0,.68)!important;
}
.report-header{border-bottom-color:var(--accent-border)!important}
.report-header h2,
.report-section h3{color:var(--accent-strong)!important}
.report-stat{border-color:color-mix(in srgb,var(--accent-border) 42%,#34474f)!important}
.report-stat strong{color:var(--accent-text)!important}
.report-critical-item:hover{border-color:var(--accent-border)!important}
.report-critical-item .best{color:var(--accent-text)!important}
.chart-current-line{background:var(--accent-strong)!important;box-shadow:0 0 4px var(--accent-soft)!important}
/* 8 cartões no resumo do relatório em telas grandes. */
@media (min-width:1381px){.report-summary-grid{grid-template-columns:repeat(8,minmax(0,1fr))!important}}
/* Mobile: seis botões = grade 3 x 2 e gráfico mais limpo. */
@media (max-width:768px), (pointer:coarse) and (max-width:1280px){
.mobile-analysis-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.report-modal{padding:max(7px,env(safe-area-inset-top)) 7px max(7px,env(safe-area-inset-bottom))!important}
.report-dialog{z-index:1!important}
.report-chart-wrap{height:220px!important}
.report-chart-legend{gap:8px!important;flex-wrap:wrap!important}
.chart-dot{width:6px!important;height:6px!important}
}
/* =========================================================
MAUMAU CHESS ANALYZER — AJUSTE 15
========================================================= */
/* Relatório Geral — "Melhores oportunidades perdidas":
remove verde fixo e usa o perfil selecionado. */
.report-opportunity-item .opp-best{
color:var(--accent-text)!important;
text-shadow:0 0 6px var(--accent-soft)!important;
}
.report-opportunity-item:hover{
border-color:var(--accent-border)!important;
box-shadow:inset 0 0 0 1px var(--accent-soft)!important;
}
/* Momentos críticos — melhores alternativas e destaque atual
acompanham o perfil selecionado. */
.critical-best-move{
color:var(--accent-text)!important;
}
.critical-card.critical-current{
outline-color:var(--accent-strong)!important;
box-shadow:0 0 8px var(--accent-soft)!important;
}
/* PC: mantém o painel Momentos Críticos inteiro dentro da coluna.
Continua em 2x2, mas com altura controlada e conteúdo compacto. */
@media (min-width:769px) and (pointer:fine){
.right-column{
min-height:0!important;
overflow:hidden!important;
}
.right-column .critical-panel{
flex:0 0 106px!important;
height:106px!important;
min-height:106px!important;
max-height:106px!important;
padding:5px 7px 4px!important;
overflow:hidden!important;
}
.right-column .critical-cards{
height:calc(100% - 15px)!important;
min-height:0!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
grid-template-rows:repeat(2,minmax(0,1fr))!important;
gap:4px!important;
}
.right-column .critical-card{
min-height:0!important;
height:100%!important;
padding:2px 4px!important;
gap:0!important;
justify-content:center!important;
}
.right-column .critical-card span{
font-size:5.5px!important;
line-height:1!important;
}
.right-column .critical-card strong{
font-size:8.5px!important;
line-height:1!important;
}
.right-column .critical-card small,
.right-column .critical-best-move{
margin-top:1px!important;
font-size:5.2px!important;
line-height:1!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
max-width:100%!important;
}
}
/* =========================================================
MAUMAU CHESS ANALYZER — AJUSTE 16
COLUNA DIREITA DO ANALISADOR NO PC
========================================================= */
/*
A coluna direita passa a usar uma grade vertical explícita.
Isso impede que os painéis superiores consumam mais altura
que a viewport e empurrem "Momentos Críticos" para fora.
*/
@media (min-width:769px) and (pointer:fine){
.right-column{
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
grid-template-rows:
86px /* Avaliação */
84px /* PV */
220px /* Melhores lances possíveis */
minmax(150px,1fr) /* Detalhes */
100px!important; /* Momentos críticos */
gap:4px!important;
min-height:0!important;
height:100%!important;
overflow:hidden!important;
}
.right-column > .panel{
min-height:0!important;
max-height:none!important;
height:100%!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
.right-column .evaluation-panel{
grid-row:1;
}
.right-column .pv-panel{
grid-row:2;
}
.right-column .multipv-panel{
grid-row:3;
padding-top:7px!important;
padding-bottom:6px!important;
}
.right-column .details-panel{
grid-row:4;
min-height:0!important;
overflow:hidden!important;
padding-top:7px!important;
padding-bottom:6px!important;
}
.right-column .critical-panel{
grid-row:5;
min-height:0!important;
height:100%!important;
max-height:none!important;
padding:5px 7px 4px!important;
overflow:hidden!important;
}
.right-column .critical-panel h2{
margin-bottom:3px!important;
line-height:11px!important;
}
.right-column .critical-cards{
height:calc(100% - 14px)!important;
min-height:0!important;
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
grid-template-rows:repeat(2,minmax(0,1fr))!important;
gap:3px!important;
overflow:hidden!important;
}
.right-column .critical-card{
min-height:0!important;
height:100%!important;
padding:2px 4px!important;
gap:0!important;
align-content:center!important;
justify-content:center!important;
overflow:hidden!important;
}
.right-column .critical-card span{
font-size:5px!important;
line-height:1!important;
}
.right-column .critical-card strong{
font-size:8px!important;
line-height:1!important;
}
.right-column .critical-card small,
.right-column .critical-best-move{
margin-top:1px!important;
font-size:5px!important;
line-height:1!important;
max-width:100%!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
}
/* Em monitores/notebooks com pouca altura, compacta um pouco mais
sem esconder o painel de Momentos Críticos. */
@media (min-width:769px) and (pointer:fine) and (max-height:820px){
.right-column{
grid-template-rows:
80px
76px
204px
minmax(138px,1fr)
94px!important;
gap:3px!important;
}
.right-column .move-option{
min-height:0!important;
padding-top:4px!important;
padding-bottom:4px!important;
}
.right-column .move-explanation{
margin-top:3px!important;
padding:4px 6px!important;
}
.right-column .move-explanation p{
font-size:7.8px!important;
line-height:1.2!important;
}
.right-column .move-explanation small{
font-size:6.8px!important;
line-height:1.15!important;
}
}
/* =========================================================
MAUMAU CHESS ANALYZER — AJUSTE 17
Importação mobile centralizada.
========================================================= */
@media (max-width:768px), (pointer:coarse) and (max-width:1280px){
.import-modal{
align-items:center!important;
justify-content:center!important;
padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom))!important;
}
.import-dialog{
margin:auto!important;
max-height:min(90dvh,760px)!important;
}
}
/* =========================================================
MAUMAU CHESS ANALYZER — AJUSTE 18
========================================================= */
/* Mensagem de gráfico usa o próprio modal escuro/temático do app. */
.mobile-graph-message{
min-height:170px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
padding:22px;
text-align:center;
border:1px solid var(--accent-border);
border-radius:8px;
background:linear-gradient(145deg,var(--accent-soft),#081216);
}
.mobile-graph-message strong{
color:var(--accent-strong);
font-size:17px;
line-height:1.28;
}
.mobile-graph-message span{
max-width:520px;
color:#a5b2b7;
font-size:12px;
line-height:1.45;
}
/* Linhas verticais dos painéis da coluna direita seguem o perfil.
A regra original usava verde fixo. */
.analysis-panel::before{
background:color-mix(in srgb,var(--accent) 42%,transparent)!important;
}
/* Elementos que ainda tinham verde fixo nos painéis da direita. */
.move-option.best{
border-color:var(--accent-border)!important;
}
.move-option .number{
background:var(--accent-soft)!important;
color:var(--accent-text)!important;
}
.evaluation-center{
background:var(--accent-strong)!important;
}
.critical-card.critical-best::before,.critical-card.critical-forced::before{
background:var(--accent-strong)!important;
}
.critical-card.critical-good::before{
background:color-mix(in srgb,var(--accent-strong) 72%,#dce8e7)!important;
}
.critical-best-move{
color:var(--accent-text)!important;
}
/* PC: o MultiPV recebe altura suficiente para as quatro linhas sem corte.
A coluna continua cabendo na viewport reduzindo levemente Detalhes. */
@media (min-width:769px) and (pointer:fine){
.right-column{
grid-template-rows:
86px
84px
236px
minmax(130px,1fr)
100px!important;
}
.right-column .multipv-panel{
overflow:hidden!important;
padding:6px 8px 5px!important;
}
.right-column .multipv-panel .move-option{
min-height:38px!important;
height:38px!important;
margin-bottom:4px!important;
padding:3px 6px!important;
}
.right-column .multipv-panel .move-option:last-child{
margin-bottom:0!important;
}
}
@media (min-width:769px) and (pointer:fine) and (max-height:820px){
.right-column{
grid-template-rows:
78px
72px
216px
minmax(116px,1fr)
92px!important;
}
.right-column .multipv-panel .move-option{
min-height:34px!important;
height:34px!important;
margin-bottom:3px!important;
}
}
/* Títulos maiores precisam continuar cabendo no mobile nas telas Bot/Amigo. */
/* =========================================================
MAUMAU CHESS ANALYZER — AJUSTE 21
MultiPV desktop sem corte.
========================================================= */
/* Remove qualquer limitação herdada que possa cortar a 4ª linha. */
@media (min-width:769px) and (pointer:fine){
.right-column{
grid-template-rows:
84px
80px
252px
minmax(112px,1fr)
96px!important;
}
.right-column .multipv-panel{
display:flex!important;
flex-direction:column!important;
min-height:0!important;
height:100%!important;
max-height:none!important;
overflow:visible!important;
padding:6px 8px 6px!important;
}
.right-column .multipv-panel h2{
flex:0 0 auto!important;
margin:0 0 2px!important;
}
.right-column .multipv-panel .multipv-context{
flex:0 0 auto!important;
margin:0 0 5px!important;
line-height:9px!important;
}
.right-column .multipv-panel .move-option{
flex:1 1 0!important;
min-height:39px!important;
height:auto!important;
max-height:none!important;
margin:0 0 4px!important;
padding:3px 6px!important;
overflow:hidden!important;
}
.right-column .multipv-panel .move-option:last-child{
margin-bottom:0!important;
}
.right-column .multipv-panel .move-option strong{
line-height:13px!important;
}
.right-column .multipv-panel .move-option small{
line-height:9px!important;
}
}
/* Notebook/monitor com menos altura: mantém as 4 opções inteiras,
compactando apenas espaços internos. */
@media (min-width:769px) and (pointer:fine) and (max-height:820px){
.right-column{
grid-template-rows:
76px
70px
232px
minmax(98px,1fr)
88px!important;
}
.right-column .multipv-panel{
padding:5px 7px!important;
}
.right-column .multipv-panel .move-option{
min-height:35px!important;
margin-bottom:3px!important;
padding:2px 5px!important;
}
}
/* =========================================================
MAUMAU CHESS ANALYZER — AJUSTE 22
Responsividade adicional para aparelhos estreitos / fonte ampliada
========================================================= */
@media (max-width:560px){
.brand{
max-width:100%!important;
overflow:hidden!important;
}
.brand h1{
font-size:clamp(12px,4.2vw,16px)!important;
line-height:1.05!important;
letter-spacing:0!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
max-width:calc(100vw - 52px)!important;
}
.brand-icon{
flex:0 0 auto!important;
font-size:clamp(22px,7vw,27px)!important;
}
}
@media (max-width:390px){
.brand h1{
font-size:clamp(11px,3.85vw,14px)!important;
}
}
@media (max-width:768px), (pointer:coarse) and (max-width:1280px){
.board-section,.center-column,.board-wrapper{
scroll-margin-top:8px;
}
}
/* =========================================================
MAUMAU CHESS ANALYZER — AJUSTE 26
Navegação simplificada + Privacidade
========================================================= */
/* Links que visualmente são botões do cabeçalho. */
.privacy-top-button,
.actions-dropdown .mobile-privacy-action{
text-decoration:none!important;
}
/* PC: fluxo simplificado.
Reconstrução e Análise continuam funcionando internamente,
mas deixam de ocupar espaço no cabeçalho. */
@media (min-width:769px) and (pointer:fine){
#reconstructionStep,
#analysisStep{
display:none!important;
}
/* Esconde somente as setas que pertenciam às etapas intermediárias.
O fluxo visual passa a ser Importar -> Relatório. */
.steps > .step-arrow{
display:none!important;
}
.steps{
flex:0 1 auto!important;
justify-content:flex-start!important;
gap:7px!important;
}
.import-step-wrap,
#reportStepButton{
width:145px!important;
flex:0 0 145px!important;
}
/* Indicador simples entre os dois botões restantes. */
.import-step-wrap::after{
content:"➜";
position:absolute;
left:calc(100% + 3px);
top:50%;
transform:translateY(-50%);
color:var(--accent-border);
font-size:16px;
pointer-events:none;
}
.import-step-wrap{
position:relative!important;
margin-right:19px!important;
}
.privacy-top-button{
display:flex!important;
border-color:var(--accent-border)!important;
color:#e6ebed!important;
}
.privacy-top-button:hover,
.privacy-top-button:focus-visible{
border-color:var(--accent-strong)!important;
box-shadow:inset 0 0 0 1px var(--accent-soft)!important;
text-decoration:none!important;
}
.mobile-privacy-action{
display:none!important;
}
/* O cabeçalho ganha espaço suficiente para os sete controles
sem alterar o tamanho do dashboard. */
.top-actions{
flex:0 0 auto!important;
gap:5px!important;
}
.top-actions .actions-menu summary,
.top-actions .settings-top{
padding-left:10px!important;
padding-right:10px!important;
}
}
/* Celular/tablet: Privacidade fica dentro de Ações.
Não adicionamos um quinto botão no cabeçalho compacto. */
@media (max-width:768px), (pointer:coarse) and (max-width:1280px){
.privacy-top-button{
display:none!important;
}
.actions-dropdown .mobile-privacy-action{
display:flex!important;
min-height:30px;
align-items:center;
padding:0 9px;
border:1px solid var(--accent-border)!important;
border-radius:5px;
background:linear-gradient(#0e191d,#0a1418);
color:#d1dadd!important;
font-size:9px;
font-weight:700;
}
.actions-dropdown .mobile-privacy-action:hover,
.actions-dropdown .mobile-privacy-action:focus-visible{
border-color:var(--accent-strong)!important;
background:linear-gradient(145deg,var(--accent-soft),#0a1418)!important;
}
}
/* Desktops menores: compacta somente os textos dos controles do topo. */
@media (min-width:769px) and (pointer:fine) and (max-width:1450px){
.import-step-wrap,
#reportStepButton{
width:126px!important;
flex-basis:126px!important;
}
.top-actions .actions-menu summary,
.top-actions .settings-top{
padding-left:8px!important;
padding-right:8px!important;
font-size:9px!important;
}
}
/* =========================================================
MAUMAU CHESS ANALYZER — AJUSTE 29
MOBILE: margens do tabuleiro, menus maiores, gráfico landscape
e refinamento do quadro inferior de Detalhes.
========================================================= */
@media (max-width:768px), (pointer:coarse) and (max-width:1280px){
/* Mais respiro lateral no tabuleiro do Analyzer. */
.app{
--mobile-board-size:min(calc(100vw - 30px), calc(100dvh - 298px))!important;
}
.board-title,
.board-player,
.board-area,
.board-wrapper,
.navigation,
.mobile-analysis-toolbar,
.mobile-evaluation-strip{
max-width:calc(100vw - 30px)!important;
}
/* Seis botões inferiores maiores e mais legíveis. */
.mobile-analysis-toolbar{
gap:6px!important;
margin-top:7px!important;
}
.mobile-tool-button{
height:40px!important;
min-height:40px!important;
padding:0 7px!important;
border-radius:8px!important;
font-size:11px!important;
line-height:1.1!important;
}
/* Menus superiores com mesma presença visual dos botões inferiores. */
.top-actions{
gap:6px!important;
}
.top-actions .actions-menu summary,
.top-actions .settings-top{
height:40px!important;
min-height:40px!important;
padding:0 5px!important;
border-radius:8px!important;
font-size:10.5px!important;
line-height:1.1!important;
}
/* Quadro inferior de "Detalhes": deixa POR QUE ESTE LANCE?
mais espaçoso, alinhado e confortável para leitura. */
.mobile-analysis-body .details-panel{
padding:8px!important;
}
.mobile-analysis-body .details-panel .move-explanation{
width:100%!important;
min-height:118px!important;
margin-top:8px!important;
padding:12px 14px!important;
display:flex!important;
flex-direction:column!important;
justify-content:flex-start!important;
gap:7px!important;
border-radius:8px!important;
overflow:visible!important;
}
.mobile-analysis-body .details-panel .move-explanation-title{
font-size:13px!important;
line-height:1.2!important;
}
.mobile-analysis-body .details-panel .move-explanation p{
margin:0!important;
font-size:12px!important;
line-height:1.5!important;
}
.mobile-analysis-body .details-panel .move-explanation small{
display:block!important;
margin-top:2px!important;
font-size:10.5px!important;
line-height:1.45!important;
white-space:normal!important;
overflow:visible!important;
}
.mobile-analysis-body .details-panel .arrow-legend{
margin-top:9px!important;
gap:18px!important;
flex-wrap:wrap!important;
font-size:9px!important;
}
.mobile-analysis-body .details-panel .arrow-legend b{
width:22px!important;
height:3px!important;
}
}
/* Telefones baixos: preserva tudo visível sem perder o ganho de tamanho. */
@media (max-width:768px) and (max-height:900px),
(pointer:coarse) and (max-width:1280px) and (max-height:900px){
.app{
--mobile-board-size:min(calc(100vw - 30px), calc(100dvh - 312px))!important;
}
.mobile-tool-button{
height:38px!important;
min-height:38px!important;
font-size:10.5px!important;
}
.top-actions .actions-menu summary,
.top-actions .settings-top{
height:38px!important;
min-height:38px!important;
font-size:10px!important;
}
}
/* =========================================================
GRÁFICO MOBILE EM PAISAGEM
Ao abrir pelo botão Gráfico e girar o aparelho, somente o gráfico
ocupa praticamente toda a tela. Ao voltar ao retrato, o relatório
é fechado pelo JS e o usuário retorna ao tabuleiro.
========================================================= */
@media (orientation:landscape) and (max-height:700px) and (pointer:coarse){
body.mobile-graph-landscape{
overflow:hidden!important;
}
body.mobile-graph-landscape #reportModal{
padding:max(4px,env(safe-area-inset-top))
max(6px,env(safe-area-inset-right))
max(4px,env(safe-area-inset-bottom))
max(6px,env(safe-area-inset-left))!important;
align-items:stretch!important;
justify-content:stretch!important;
}
body.mobile-graph-landscape #reportModal .report-dialog{
width:100%!important;
height:100%!important;
max-width:none!important;
max-height:none!important;
border-radius:8px!important;
}
body.mobile-graph-landscape #reportModal .report-header{
height:48px!important;
min-height:48px!important;
flex-basis:48px!important;
padding:5px 9px!important;
}
body.mobile-graph-landscape #reportModal .report-header h2{
font-size:13px!important;
}
body.mobile-graph-landscape #reportModal .report-body{
padding:5px!important;
overflow:hidden!important;
}
/* Esconde todo o relatório exceto a seção que contém o gráfico. */
body.mobile-graph-landscape #reportModal .report-summary-grid,
body.mobile-graph-landscape #reportModal .report-bottom-grid,
body.mobile-graph-landscape #reportModal .report-section:not(.report-graph-section){
display:none!important;
}
body.mobile-graph-landscape #reportModal .report-graph-section{
display:flex!important;
flex-direction:column!important;
width:100%!important;
height:100%!important;
margin:0!important;
padding:5px!important;
}
body.mobile-graph-landscape #reportModal .report-graph-section .report-section-title{
flex:0 0 24px!important;
min-height:24px!important;
}
body.mobile-graph-landscape #reportModal .report-chart-legend{
flex:0 0 auto!important;
margin:1px 0 3px!important;
gap:8px!important;
font-size:8px!important;
}
body.mobile-graph-landscape #reportModal .report-chart-wrap{
flex:1 1 auto!important;
min-height:0!important;
height:auto!important;
width:100%!important;
}
}
/* =========================================================
MAUMAU CHESS ANALYZER — AJUSTE 30
Correção do gráfico mobile + legenda das peças.
========================================================= */
/* Tooltip sempre acima das peças/setas/pontos, mas agora o JS o posiciona
lateralmente à peça, evitando cobrir os pontos de jogadas possíveis. */
.piece-hover-tooltip{
z-index:70!important;
max-width:min(220px,46vw);
overflow:hidden;
text-overflow:ellipsis;
}
/* Paisagem: garante que somente a seção real do gráfico fique visível. */
@media (orientation:landscape) and (max-height:700px) and (pointer:coarse){
body.mobile-graph-landscape #reportModal{
display:flex!important;
position:fixed!important;
inset:0!important;
z-index:5000!important;
background:#071014!important;
}
body.mobile-graph-landscape #reportModal .report-backdrop{
display:none!important;
}
body.mobile-graph-landscape #reportModal .report-dialog{
display:flex!important;
flex-direction:column!important;
width:100vw!important;
height:100dvh!important;
max-width:none!important;
max-height:none!important;
margin:0!important;
border-radius:0!important;
}
body.mobile-graph-landscape #reportModal .report-body{
flex:1 1 auto!important;
min-height:0!important;
overflow:hidden!important;
}
body.mobile-graph-landscape #reportModal .report-summary-grid,
body.mobile-graph-landscape #reportModal .report-bottom-grid,
body.mobile-graph-landscape #reportModal .report-opportunities-section,
body.mobile-graph-landscape #reportModal .report-time-section,
body.mobile-graph-landscape #reportModal .report-phases-section{
display:none!important;
}
body.mobile-graph-landscape #reportModal .report-graph-section{
display:flex!important;
flex:1 1 auto!important;
flex-direction:column!important;
min-height:0!important;
width:100%!important;
height:100%!important;
margin:0!important;
padding:6px!important;
}
body.mobile-graph-landscape #reportModal .report-chart-wrap{
flex:1 1 auto!important;
min-height:0!important;
width:100%!important;
height:auto!important;
}
body.mobile-graph-landscape #reportModal #evaluationChart{
width:100%!important;
height:100%!important;
max-width:none!important;
max-height:none!important;
}
}
/* =========================================================
MAUMAU CHESS ANALYZER — AJUSTE 31
NAVEGADOR MOBILE: somente retrato.
APP Android: landscape continua permitido somente no Gráfico.
========================================================= */
.browser-portrait-only-notice{
display:none;
}
@media (orientation:landscape) and (pointer:coarse) and (max-height:700px){
body.mobile-browser-landscape{
overflow:hidden!important;
}
body.mobile-browser-landscape > *:not(#browserPortraitOnlyNotice){
visibility:hidden!important;
pointer-events:none!important;
}
body.mobile-browser-landscape #browserPortraitOnlyNotice{
position:fixed!important;
inset:0!important;
z-index:99999!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:max(18px,env(safe-area-inset-top))
max(18px,env(safe-area-inset-right))
max(18px,env(safe-area-inset-bottom))
max(18px,env(safe-area-inset-left))!important;
background:#071014!important;
visibility:visible!important;
pointer-events:auto!important;
}
.browser-portrait-only-card{
width:min(430px,90vw);
padding:22px;
border:1px solid var(--accent-border);
border-radius:12px;
background:#0b1519;
text-align:center;
box-shadow:0 18px 60px rgba(0,0,0,.45);
}
.browser-portrait-only-icon{
margin-bottom:8px;
color:var(--accent-strong);
font-size:34px;
line-height:1;
}
.browser-portrait-only-card strong{
display:block;
color:#eef3f5;
font-size:18px;
}
.browser-portrait-only-card span{
display:block;
margin-top:8px;
color:#aeb8bd;
font-size:13px;
line-height:1.45;
}
}
/* =========================================================
MAUMAU CHESS V42 — RODAPÉ / BRANDING
Rodapé dentro do fluxo flex da .app.
O APP nativo mantém o layout mobile aprovado.
========================================================= */
.maumau-brand-footer{
width:100%;
min-height:18px;
flex:0 0 18px;
display:flex;
align-items:center;
box-sizing:border-box;
padding:1px 7px 0;
color:rgba(255,255,255,.46);
font-size:10px;
line-height:1;
letter-spacing:.3px;
user-select:none;
overflow:hidden;
}
.maumau-brand-footer-site{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}
.maumau-brand-product{
font-weight:600;
color:rgba(255,255,255,.52);
}
.maumau-brand-by{
font-size:9px;
color:rgba(255,255,255,.40);
}
.maumau-brand-footer-app{
display:none;
width:100%;
text-align:center;
font-size:9px;
color:rgba(255,255,255,.40);
}
body.maumau-native-app .maumau-brand-footer{
min-height:20px;
flex-basis:20px;
justify-content:center;
}
body.maumau-native-app .maumau-brand-footer-site{display:none}
body.maumau-native-app .maumau-brand-footer-app{display:block}
/* =========================================================
SITE DESKTOP — RESERVA REAL PARA O RODAPÉ
A .app continua com 100vh.
Só reduzimos a referência vertical do tabuleiro.
Isso preserva os botões de navegação dentro do board-panel.
========================================================= */
@media (min-width:1000px){
body:not(.maumau-native-app) .board-wrapper{
width:min(100%,calc(100vh - 192px),850px);
}
body:not(.maumau-native-app) .board-player{
width:min(100%,calc(100vh - 192px),850px);
}
body:not(.maumau-native-app) .side-board-clock{
left:calc(50% + min(50%,calc((100vh - 192px) / 2),425px) + 8px);
}
}
@media (min-width:1000px) and (max-width:1320px){
body:not(.maumau-native-app) .side-board-clock{
left:auto;
right:6px;
}
}
/* Em telas baixas, encolhe um pouco mais para garantir navegação + rodapé. */
@media (min-width:1000px) and (max-height:820px){
body:not(.maumau-native-app) .board-wrapper{
width:min(100%,calc(100vh - 204px),825px);
}
body:not(.maumau-native-app) .board-player{
width:min(100%,calc(100vh - 204px),825px);
}
body:not(.maumau-native-app) .side-board-clock{
left:calc(50% + min(50%,calc((100vh - 204px) / 2),412.5px) + 8px);
}
}
/* Mobile/browser mantém o comportamento responsivo original. */
@media (max-width:999px){
.maumau-brand-footer{
min-height:20px;
flex-basis:20px;
padding-left:7px;
padding-right:7px;
}
}
/* =========================================================
MAUMAU CHESS V45 — CLASSIFICAÇÃO VISUAL DO LANCE ATUAL
Inspirado no padrão de revisão de partidas, mantendo a
identidade visual e as classificações do Maumau Chess.
========================================================= */
.square-move-badge{
position:absolute;
z-index:28;
top:5%;
right:4%;
width:31%;
min-width:20px;
max-width:34px;
aspect-ratio:1/1;
display:flex;
align-items:center;
justify-content:center;
padding:0;
border:2px solid rgba(255,255,255,.86);
border-radius:999px;
color:#fff;
font-size:clamp(10px,1.18vw,17px);
line-height:1;
font-weight:900;
letter-spacing:-.6px;
box-shadow:0 2px 7px rgba(0,0,0,.42);
cursor:pointer;
user-select:none;
-webkit-tap-highlight-color:transparent;
}
.square-move-badge.brilliant{background:#22a9dc}
.square-move-badge.best,.square-move-badge.forced{background:#69b83f}
.square-move-badge.good{background:#82bd45}
.square-move-badge.inaccuracy{background:#d9b52d;color:#172006}
.square-move-badge.mistake{background:#f08a3c}
.square-move-badge.blunder{background:#ef5147}
.square-move-badge:hover{transform:scale(1.06)}
.square-move-badge:active{transform:scale(.94)}
.details-panel-focus{
animation:mcaDetailsFocus 1.05s ease;
}
@keyframes mcaDetailsFocus{
0%,100%{box-shadow:none}
35%{box-shadow:0 0 0 2px var(--accent-border),0 0 22px var(--accent-soft)}
}
/* CONFIGURAÇÕES — centralizada também no APP/mobile. */
@media (max-width:900px){
.settings-modal{
align-items:center!important;
justify-content:center!important;
padding:max(7px,env(safe-area-inset-top)) 7px max(7px,env(safe-area-inset-bottom))!important;
}
.settings-dialog{
width:100%!important;
max-width:none!important;
max-height:min(90dvh,760px)!important;
height:auto!important;
margin:auto!important;
}
.settings-body{
overscroll-behavior:contain;
}
.square-move-badge{
min-width:22px;
max-width:32px;
font-size:clamp(11px,3.3vw,16px);
border-width:1.5px;
}
}
/* =========================================================
MAUMAU CHESS V46 — BRAND + DETALHES EXPANDIDOS NO SITE
Base: V45 (visual V42)
========================================================= */
/* Ícone real do Maumau Chess ao lado do título — SITE e APP. */
.brand-icon-image{
width:34px;
height:34px;
flex:0 0 34px;
display:block;
object-fit:cover;
border-radius:8px;
filter:drop-shadow(0 0 4px var(--accent-soft));
}
/* Cabeçalho do painel de detalhes. */
.details-panel-heading{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-bottom:6px;
}
.details-panel-heading h2{margin:0}
.close-expanded-details{
display:none;
width:28px;
height:28px;
flex:0 0 28px;
align-items:center;
justify-content:center;
padding:0;
border:1px solid var(--accent-border);
border-radius:6px;
background:#0a1519;
color:var(--accent-text);
font-size:14px;
font-weight:800;
cursor:pointer;
}
/* SITE DESKTOP: PV técnico oculto; detalhes podem sobrepor o MultiPV.
Mantemos o mesmo front-end no site e no Capacitor, mas este bloco só afeta
o site desktop por causa do seletor body:not(.maumau-native-app). */
@media (min-width:769px){
body:not(.maumau-native-app) .right-column{
position:relative;
overflow:hidden;
}
body:not(.maumau-native-app) .right-column > .pv-panel{
display:none!important;
}
body:not(.maumau-native-app) .right-column > .details-panel{
flex:1 1 170px!important;
min-height:155px!important;
}
body:not(.maumau-native-app) .right-column > .details-panel .move-explanation{
min-height:46px;
}
body:not(.maumau-native-app) .right-column > .details-panel .move-explanation p{
white-space:normal;
overflow:visible;
text-overflow:clip;
}
/* Estado expandido: DETALHES sobe e cobre a área do MultiPV,
dando mais espaço para a explicação sem exigir rolagem da página. */
body:not(.maumau-native-app) .right-column.details-expanded > .multipv-panel,
body:not(.maumau-native-app) .right-column.details-expanded > .critical-panel{
pointer-events:none;
user-select:none;
}
body:not(.maumau-native-app) .right-column.details-expanded > .multipv-panel{
opacity:.08;
filter:blur(.6px);
}
body:not(.maumau-native-app) .right-column.details-expanded > .critical-panel{
opacity:.03;
}
body:not(.maumau-native-app) .right-column.details-expanded > .details-panel{
position:absolute!important;
z-index:90;
left:0;
right:0;
top:92px;
bottom:0;
width:auto!important;
height:auto!important;
max-height:none!important;
min-height:0!important;
padding:12px 14px!important;
overflow:auto!important;
overscroll-behavior:contain;
background:linear-gradient(145deg,rgba(13,26,31,.985),rgba(7,17,21,.992))!important;
border:1px solid var(--accent-border)!important;
box-shadow:0 14px 42px rgba(0,0,0,.62),0 0 0 1px var(--accent-soft)!important;
}
body:not(.maumau-native-app) .right-column.details-expanded > .details-panel .details-panel-heading h2{
font-size:15px!important;
line-height:18px!important;
}
body:not(.maumau-native-app) .right-column.details-expanded > .details-panel .close-expanded-details{
display:flex;
}
body:not(.maumau-native-app) .right-column.details-expanded > .details-panel .move-details{
gap:8px;
}
body:not(.maumau-native-app) .right-column.details-expanded > .details-panel .move-details > div{
min-height:48px;
padding:6px 9px;
}
body:not(.maumau-native-app) .right-column.details-expanded > .details-panel .move-details span{
font-size:9px;
}
body:not(.maumau-native-app) .right-column.details-expanded > .details-panel .move-details strong{
font-size:16px;
}
body:not(.maumau-native-app) .right-column.details-expanded > .details-panel .move-metrics{
gap:7px;
margin-top:8px;
}
body:not(.maumau-native-app) .right-column.details-expanded > .details-panel .move-metrics > div{
min-height:44px;
padding:5px 7px;
}
body:not(.maumau-native-app) .right-column.details-expanded > .details-panel .move-metrics span{
font-size:8px;
}
body:not(.maumau-native-app) .right-column.details-expanded > .details-panel .move-metrics strong{
font-size:12px;
}
body:not(.maumau-native-app) .right-column.details-expanded > .details-panel .move-explanation{
margin-top:10px;
padding:10px 12px;
min-height:135px;
border:1px solid var(--accent-border);
border-radius:7px;
background:#081317;
}
body:not(.maumau-native-app) .right-column.details-expanded > .details-panel .move-explanation-title{
font-size:11px!important;
margin-bottom:7px;
}
body:not(.maumau-native-app) .right-column.details-expanded > .details-panel .move-explanation p{
margin:0;
color:#edf3f5;
font-size:14px!important;
line-height:1.5!important;
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
}
body:not(.maumau-native-app) .right-column.details-expanded > .details-panel .move-explanation small{
display:block;
margin-top:10px;
font-size:10px!important;
line-height:1.45!important;
white-space:normal!important;
}
body:not(.maumau-native-app) .right-column.details-expanded > .details-panel .arrow-legend{
margin-top:10px;
font-size:9px;
}
}
/* APP/mobile: mantém exatamente o fluxo de modal já aprovado. */
@media (max-width:768px){
.brand-icon-image{
width:31px;
height:31px;
flex-basis:31px;
border-radius:7px;
}
.close-expanded-details{display:none!important}
}
/* =========================================================
MAUMAU CHESS V49 — DETALHES SOBRE O MULTIPV NO SITE DESKTOP
Corrige o posicionamento absoluto dentro da CSS Grid.
========================================================= */
@media (min-width:769px) and (pointer:fine){
body:not(.maumau-native-app) .right-column.details-expanded > .details-panel{
/* A área do item absoluto passa a ser a coluna inteira da grid.
Sem isto, grid-row:4 fazia o top ser calculado a partir da linha
original de "Detalhes do lance atual". */
grid-row:1 / -1!important;
grid-column:1!important;
position:absolute!important;
z-index:100!important;
left:0!important;
right:0!important;
/* Mantém apenas "Avaliação da posição" visível.
A partir daqui cobre MultiPV + Detalhes + Momentos críticos. */
top:88px!important;
bottom:0!important;
width:auto!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
overflow:auto!important;
}
body:not(.maumau-native-app) .right-column.details-expanded > .multipv-panel,
body:not(.maumau-native-app) .right-column.details-expanded > .critical-panel{
pointer-events:none!important;
}
}
/* =========================================================
MAUMAU CHESS V50 — REMOVE LINHA VAZIA DO PV NO SITE DESKTOP
Como o PV está oculto no site, a grade passa a ter 4 linhas:
Avaliação > MultiPV > Detalhes > Momentos críticos.
========================================================= */
@media (min-width:769px) and (pointer:fine){
body:not(.maumau-native-app) .right-column{
grid-template-rows:
84px
252px
minmax(112px,1fr)
96px!important;
}
body:not(.maumau-native-app) .right-column > .evaluation-panel{grid-row:1!important;}
body:not(.maumau-native-app) .right-column > .pv-panel{display:none!important;}
body:not(.maumau-native-app) .right-column > .multipv-panel{grid-row:2!important;}
body:not(.maumau-native-app) .right-column > .details-panel{grid-row:3!important;}
body:not(.maumau-native-app) .right-column > .critical-panel{grid-row:4!important;}
body:not(.maumau-native-app) .right-column.details-expanded > .details-panel{
grid-row:1 / -1!important;
top:88px!important;
bottom:0!important;
}
}
@media (min-width:769px) and (pointer:fine) and (max-height:820px){
body:not(.maumau-native-app) .right-column{
grid-template-rows:
76px
232px
minmax(98px,1fr)
88px!important;
}
body:not(.maumau-native-app) .right-column.details-expanded > .details-panel{
top:80px!important;
}
}
/* =========================================================
MAUMAU CHESS V51 — AVALIAR JOGADOR
Histórico em Ações + seletor do jogador avaliado.
========================================================= */
.board-title-main{
min-width:0;
display:flex;
align-items:center;
gap:12px;
overflow:hidden;
}
.analysis-player-status{
min-width:0;
color:var(--accent-text,#79bfff);
font-size:9px;
font-weight:700;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.evaluate-player-dropdown button.evaluate-player-active{
border-color:var(--accent-strong)!important;
background:linear-gradient(145deg,var(--accent-soft),#0a1418)!important;
color:#fff!important;
box-shadow:inset 0 0 0 1px var(--accent-soft);
}
.move-list-white.analysis-player-muted,
.move-list-black.analysis-player-muted{
opacity:.60;
filter:saturate(.55);
}
@media (min-width:769px) and (pointer:fine){
.board-title-main{flex:1 1 auto}
.board-title #gameInfo{flex:0 1 48%}
}
@media (max-width:768px), (pointer:coarse) and (max-width:1280px){
.board-title{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
grid-template-rows:auto auto!important;
column-gap:6px!important;
row-gap:1px!important;
min-height:34px!important;
}
.board-title-main{
grid-column:1 / -1;
width:100%;
gap:8px;
}
.board-title-main h2{
flex:0 0 auto!important;
}
.analysis-player-status{
flex:1 1 auto;
text-align:right;
font-size:8.5px;
}
.board-title #gameInfo{
grid-column:1 / -1;
width:100%;
max-width:100%!important;
text-align:right!important;
font-size:7.5px!important;
line-height:9px;
}
.evaluate-player-menu .actions-dropdown{
right:auto;
left:50%;
transform:translateX(-50%);
width:min(265px,calc(100vw - 26px));
}
}
/* ============================================================
V55 — ANIMAÇÃO DE MOVIMENTO DAS PEÇAS
============================================================ */
.piece-transition-overlay{
position:absolute!important;
z-index:70!important;
margin:0!important;
pointer-events:none!important;
object-fit:contain;
opacity:1!important;
visibility:visible!important;
transform:translate3d(0,0,0);
transition-property:transform;
transition-timing-function:cubic-bezier(.22,.72,.24,1);
will-change:transform;
}
.piece-transition-hidden{
opacity:0!important;
visibility:hidden!important;
}
/* V56 — análise livre e lançamento na Google Play */
.analysis-sandbox-selected{
box-shadow:inset 0 0 0 5px var(--accent-strong)!important;
}
.analysis-sandbox-legal::after{
content:"";
position:absolute;
z-index:18;
width:22%;
height:22%;
border-radius:50%;
background:var(--accent-strong);
opacity:.78;
pointer-events:none;
}
.analysis-sandbox-legal:has(.piece)::after{
width:78%;
height:78%;
background:transparent;
border:4px solid var(--accent-strong);
box-sizing:border-box;
}
.android-play-upcoming{cursor:default!important}
.android-play-upcoming .android-download-copy strong{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
@media(max-width:768px){
.analysis-sandbox-selected{box-shadow:inset 0 0 0 4px var(--accent-strong)!important}
.analysis-sandbox-legal:has(.piece)::after{border-width:3px}
}
/* =========================================================
V58 — VARIAÇÃO LIVRE: MOVER PEÇA OU VER DETALHES
========================================================= */
.analysis-piece-action-menu{
position:fixed;
left:50%;
bottom:max(22px, env(safe-area-inset-bottom));
transform:translateX(-50%);
z-index:12050;
width:min(360px,calc(100vw - 28px));
padding:14px;
border:1px solid var(--accent-strong,#3ca9ff);
border-radius:14px;
background:rgba(5,20,25,.98);
box-shadow:0 18px 50px rgba(0,0,0,.55);
display:grid;
gap:9px;
}
.analysis-piece-action-title{
color:#e8f4f7;
font-weight:800;
font-size:14px;
text-align:center;
margin-bottom:2px;
}
.analysis-piece-action-menu button{
min-height:44px;
border:1px solid rgba(66,176,255,.55);
border-radius:9px;
background:#102b35;
color:#f2fbff;
font-weight:800;
font-size:13px;
cursor:pointer;
}
.analysis-piece-action-menu button.secondary{
background:#0a1d24;
color:#adc2ca;
border-color:rgba(160,190,200,.25);
}
.analysis-piece-action-menu button:hover{filter:brightness(1.12)}
@media(max-width:768px){
.analysis-piece-action-menu{bottom:max(14px,env(safe-area-inset-bottom));}
.analysis-piece-action-menu button{min-height:48px;font-size:14px}
}
/* Tutorial compartilhado com o aplicativo */
/* =========================================================
AAB23 — Tutorial / onboarding
========================================================= */
.mca-tour-overlay{
position:fixed;
inset:0;
z-index:10000;
pointer-events:none;
}
.mca-tour-overlay.hidden{display:none!important}
.mca-tour-dim{
position:absolute;
inset:0;
background:rgba(1,8,11,.34);
pointer-events:auto;
}
.mca-tour-target{
position:relative!important;
z-index:10002!important;
outline:3px solid var(--accent)!important;
outline-offset:4px!important;
box-shadow:0 0 0 8px rgba(var(--accent-rgb),.15),0 0 34px rgba(var(--accent-rgb),.46)!important;
border-radius:10px!important;
}
.mca-tour-card{
position:fixed;
z-index:10004;
width:min(430px,calc(100vw - 28px));
max-height:min(78vh,680px);
overflow:auto;
padding:22px;
border:1px solid var(--accent-border);
border-radius:16px;
background:#0b1519;
color:#e7ecef;
box-shadow:0 20px 64px rgba(0,0,0,.62);
pointer-events:auto;
}
.mca-tour-card-fixed{
left:50%!important;
top:50%!important;
right:auto!important;
bottom:auto!important;
transform:translate(-50%,-50%);
}
.mca-tour-close{
position:absolute;
top:10px;
right:10px;
width:34px;
height:34px;
border:1px solid #33464d;
border-radius:8px;
background:#101b20;
color:#cbd4d7;
cursor:pointer;
}
.mca-tour-progress{
margin:0 42px 6px 0;
color:var(--accent);
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.6px;
}
.mca-tour-card h2{
margin:0 38px 12px 0;
font-size:22px;
}
.mca-tour-text{
color:#cbd4d7;
line-height:1.55;
font-size:14px;
}
.mca-tour-text p{margin:8px 0}
.mca-tour-note{
padding:11px 12px;
border-left:3px solid var(--accent);
border-radius:7px;
background:rgba(var(--accent-rgb),.09);
}
.mca-tour-actions{
display:flex;
gap:8px;
align-items:center;
margin-top:18px;
}
.mca-tour-actions button{
min-height:38px;
padding:8px 12px;
border-radius:8px;
cursor:pointer;
font-weight:800;
}
.mca-tour-primary{
margin-left:auto;
border:1px solid var(--accent);
background:var(--accent);
color:#071014;
}
.mca-tour-secondary{
border:1px solid #34474f;
background:#101a1e;
color:#d9e1e4;
}
.mca-tour-secondary:disabled{opacity:.35;cursor:default}
.mca-tour-welcome-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:16px;
}
.mca-tour-choice{
min-height:72px;
padding:12px;
border:1px solid var(--accent-border);
border-radius:10px;
background:rgba(var(--accent-rgb),.08);
color:#e7ecef;
cursor:pointer;
font-weight:800;
}
.mca-tour-choice:hover{border-color:var(--accent)}
.mca-tour-mini-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin:12px 0;
}
.mca-tour-mini-grid span{
padding:9px;
border:1px solid #2b3c43;
border-radius:8px;
background:#0f1a1e;
}
.mca-tour-finished{
position:fixed;
right:16px;
bottom:max(16px,env(safe-area-inset-bottom,0px));
z-index:10020;
width:min(360px,calc(100vw - 32px));
padding:14px;
border:1px solid var(--accent-border);
border-radius:12px;
background:#0b1519;
box-shadow:0 12px 32px rgba(0,0,0,.5);
display:grid;
gap:5px;
}
.mca-tour-finished strong{color:var(--accent)}
.mca-tour-finished span{color:#cbd4d7;font-size:13px}
.mca-tour-finished a{color:var(--accent);font-size:12px;font-weight:800}
body.mca-tour-active{overflow:hidden}
@media(max-width:760px){
.mca-tour-card{
left:10px!important;
right:10px!important;
top:auto!important;
bottom:max(10px,env(safe-area-inset-bottom,0px))!important;
width:auto!important;
max-height:64vh;
transform:none!important;
padding:18px;
}
.mca-tour-card h2{font-size:19px}
.mca-tour-text{font-size:13px}
.mca-tour-actions{flex-wrap:wrap}
.mca-tour-skip{order:3;width:100%}
.mca-tour-welcome-actions{grid-template-columns:1fr}
.mca-tour-mini-grid{grid-template-columns:1fr}
}
/* =========================================================
AAB23 RC2 — refinamentos do tutorial
========================================================= */
:root{
--accent-rgb:74,163,255;
}
body[data-theme="green"]{--accent-rgb:121,198,45}
body[data-theme="blue"]{--accent-rgb:74,163,255}
body[data-theme="orange"]{--accent-rgb:255,154,50}
body[data-theme="purple"]{--accent-rgb:168,121,255}
body[data-theme="red"]{--accent-rgb:255,98,93}
body[data-theme="teal"]{--accent-rgb:57,214,194}
.mca-tour-card{
border-color:var(--accent-border)!important;
background:
linear-gradient(145deg,var(--accent-soft),rgba(11,21,25,.98) 34%,rgba(8,17,21,.99))!important;
box-shadow:
0 20px 64px rgba(0,0,0,.66),
inset 0 0 0 1px rgba(var(--accent-rgb),.05)!important;
}
.mca-tour-close,
.mca-tour-secondary{
border-color:color-mix(in srgb,var(--accent-border) 55%,#34474f)!important;
}
.mca-tour-primary{
background:var(--accent)!important;
border-color:var(--accent)!important;
}
.mca-tour-choice{
border-color:var(--accent-border)!important;
background:linear-gradient(145deg,var(--accent-soft),#0d181d)!important;
}
.mca-tour-target{
animation:mcaTourTargetPulse 1.35s ease-in-out infinite;
}
@keyframes mcaTourTargetPulse{
0%,100%{
outline-color:var(--accent);
box-shadow:0 0 0 6px var(--accent-soft),0 0 22px rgba(var(--accent-rgb),.34)!important;
}
50%{
outline-color:var(--accent-strong);
box-shadow:0 0 0 10px var(--accent-soft),0 0 34px rgba(var(--accent-rgb),.52)!important;
}
}
/* Exemplo temporário exibido somente no passo do tabuleiro. */
.mca-tour-board-demo{
position:absolute;
inset:4px;
z-index:9;
pointer-events:none;
overflow:hidden;
border-radius:3px;
}
.mca-tour-demo-piece{
position:absolute;
width:12.5%;
height:12.5%;
padding:1.1%;
object-fit:contain;
z-index:3;
filter:drop-shadow(0 2px 2px rgba(0,0,0,.48));
}
.mca-tour-demo-arrows{
position:absolute;
inset:0;
width:100%;
height:100%;
z-index:5;
overflow:visible;
}
.mca-demo-green-line{
stroke:#4bd36a;
stroke-width:15;
stroke-linecap:round;
opacity:.88;
}
.mca-demo-green-head{fill:#4bd36a;opacity:.92}
.mca-demo-accent-line{
stroke:var(--accent);
stroke-width:15;
stroke-linecap:round;
opacity:.9;
}
.mca-demo-accent-head{fill:var(--accent);opacity:.95}
.mca-tour-demo-eval{
position:absolute;
right:8px;
top:8px;
z-index:7;
padding:5px 8px;
border:1px solid var(--accent-border);
border-radius:7px;
background:rgba(7,16,20,.88);
color:var(--accent-text);
font-size:12px;
font-weight:900;
box-shadow:0 0 14px var(--accent-soft);
}
.mca-tour-demo-label{
position:absolute;
left:8px;
bottom:8px;
z-index:7;
padding:4px 7px;
border-radius:6px;
background:rgba(7,16,20,.82);
color:#c9d4d8;
font-size:10px;
font-weight:800;
}
/* Conclusão centralizada. */
.mca-tour-finish-overlay{
position:fixed;
inset:0;
z-index:10030;
display:grid;
place-items:center;
padding:18px;
}
.mca-tour-finish-dim{
position:absolute;
inset:0;
background:rgba(1,8,11,.58);
backdrop-filter:blur(2px);
}
.mca-tour-finished{
position:relative!important;
inset:auto!important;
z-index:1;
width:min(420px,calc(100vw - 32px))!important;
margin:0!important;
padding:22px!important;
border:1px solid var(--accent-border)!important;
border-radius:16px!important;
background:linear-gradient(145deg,var(--accent-soft),#0b1519 36%,#081115)!important;
box-shadow:0 22px 64px rgba(0,0,0,.65)!important;
display:grid!important;
gap:10px!important;
}
.mca-tour-finished strong{
color:var(--accent)!important;
font-size:24px;
}
.mca-tour-finished span{
color:#d2dade!important;
font-size:14px!important;
line-height:1.45;
}
.mca-tour-finished-actions{
display:flex;
gap:9px;
margin-top:5px;
}
.mca-tour-finished-actions button,
.mca-tour-finished-actions a{
flex:1;
min-height:42px;
display:flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border-radius:8px;
font-size:12px;
font-weight:900;
text-decoration:none;
cursor:pointer;
}
.mca-tour-finished-actions button{
border:1px solid #3b4d54;
background:#101b20;
color:#dce4e7;
}
.mca-tour-finished-actions a{
border:1px solid var(--accent);
background:var(--accent);
color:#071014!important;
}
@media(max-width:760px){
/* O CSS antigo colocava TODAS as janelas no rodapé.
Agora "center" realmente fica no centro. */
.mca-tour-overlay[data-placement="center"] .mca-tour-card,
.mca-tour-overlay[data-mode="welcome"] .mca-tour-card{
left:50%!important;
right:auto!important;
top:50%!important;
bottom:auto!important;
width:calc(100vw - 28px)!important;
max-height:76vh!important;
transform:translate(-50%,-50%)!important;
}
.mca-tour-overlay[data-placement="top"] .mca-tour-card{
transform:none!important;
}
.mca-tour-overlay[data-placement="bottom"] .mca-tour-card{
transform:none!important;
}
.mca-tour-board-demo{
inset:4px;
}
.mca-tour-demo-eval{
right:6px;
top:6px;
font-size:10px;
}
.mca-tour-demo-label{
left:6px;
bottom:6px;
font-size:8px;
}
.mca-tour-finished-actions{
flex-direction:column;
}
}
/* =========================================================
AAB26 — Tutorial: overlay seguro, balão central e opaco
========================================================= */
.mca-tour-overlay{
z-index:2147483000!important;
isolation:isolate;
}
.mca-tour-dim{
position:absolute;
inset:0;
z-index:0!important;
background:transparent!important;
pointer-events:auto;
}
/* When there is no highlighted control, dim the whole screen normally. */
.mca-tour-overlay.mca-tour-no-target .mca-tour-dim{
background:rgba(1,8,11,.72)!important;
backdrop-filter:blur(1px);
}
/*
Spotlight is a SEPARATE overlay rectangle.
The actual button/board is no longer given a giant z-index, so it can
never draw on top of the explanatory balloon.
*/
.mca-tour-highlight{
position:fixed;
z-index:1!important;
pointer-events:none;
border:3px solid var(--accent);
background:transparent;
box-shadow:
0 0 0 9999px rgba(1,8,11,.68),
0 0 0 7px var(--accent-soft),
0 0 32px rgba(var(--accent-rgb),.72);
animation:mcaTourHighlightPulse 1.25s ease-in-out infinite;
}
.mca-tour-highlight.hidden{display:none!important}
@keyframes mcaTourHighlightPulse{
0%,100%{
border-color:var(--accent);
filter:brightness(1);
}
50%{
border-color:var(--accent-text);
filter:brightness(1.18);
}
}
/* Legacy target styling is neutralized in AAB26. */
.mca-tour-target{
z-index:auto!important;
outline:none!important;
box-shadow:none!important;
animation:none!important;
}
.mca-tour-card{
z-index:4!important;
width:min(660px,calc(100vw - 28px))!important;
max-width:660px!important;
/*
Solid background: fixes the translucent upper-left corner seen in RC2.
Accent is kept in borders/highlights instead of transparency.
*/
background:#0a151a!important;
background-color:#0a151a!important;
opacity:1!important;
border:2px solid var(--accent-border)!important;
box-shadow:
0 24px 80px rgba(0,0,0,.78),
inset 0 4px 0 var(--accent-soft),
inset 0 0 0 1px rgba(var(--accent-rgb),.10)!important;
}
.mca-tour-card::before{
content:"";
position:absolute;
left:16px;
right:52px;
top:0;
height:3px;
border-radius:0 0 4px 4px;
background:var(--accent);
opacity:.9;
}
.mca-tour-card h2,
.mca-tour-card p,
.mca-tour-card span,
.mca-tour-text,
.mca-tour-note{
position:relative;
z-index:1;
}
.mca-tour-note{
background:#101f26!important;
border-left-color:var(--accent)!important;
}
/* Board example stays below the tutorial overlay spotlight/card. */
.mca-tour-board-demo{
z-index:20!important;
}
/* Centered final confirmation stays fully opaque as well. */
.mca-tour-finished{
background:#0a151a!important;
background-color:#0a151a!important;
opacity:1!important;
border:2px solid var(--accent-border)!important;
}
@media(max-width:760px){
.mca-tour-card{
width:calc(100vw - 28px)!important;
max-width:none!important;
max-height:76dvh!important;
}
}
@media(min-width:761px) and (max-width:1200px){
.mca-tour-card{
width:min(620px,calc(100vw - 56px))!important;
max-height:74dvh!important;
}
}
/* =========================================================
AAB27 — Ajustes finos de posicionamento do tutorial
========================================================= */
.mca-tour-demo-eval-warning{
background:rgba(52,40,6,.92)!important;
border-color:#d9a512!important;
color:#ffd54a!important;
box-shadow:0 0 16px rgba(255,202,40,.28)!important;
}
.mca-tour-card{
overflow:auto!important;
}
/* =========================================================
AAB30 — POSICIONAMENTO FINAL E DETERMINÍSTICO DO TUTORIAL
========================================================= */
/*
Estas regras ficam no FINAL do CSS de propósito.
Elas anulam qualquer regra antiga de mobile/tablet que tentava empurrar
o card para o rodapé.
*/
.mca-tour-overlay[data-position="center"] .mca-tour-card{
position:fixed!important;
left:50%!important;
right:auto!important;
top:50%!important;
bottom:auto!important;
width:min(660px,calc(100vw - 28px))!important;
transform:translate(-50%,-50%)!important;
max-height:78dvh!important;
}
.mca-tour-overlay[data-position="top"] .mca-tour-card{
position:fixed!important;
left:50%!important;
right:auto!important;
top:var(--mca-tour-top-safe,90px)!important;
bottom:auto!important;
width:min(660px,calc(100vw - 28px))!important;
transform:translateX(-50%)!important;
max-height:64dvh!important;
}
.mca-tour-overlay[data-position="bottom"] .mca-tour-card{
position:fixed!important;
left:50%!important;
right:auto!important;
top:auto!important;
bottom:max(14px,env(safe-area-inset-bottom,0px))!important;
width:min(660px,calc(100vw - 28px))!important;
transform:translateX(-50%)!important;
max-height:64dvh!important;
}
/* Demo do tabuleiro: visual simples e autoexplicativo. */
.mca-tour-demo-eval-warning{
position:absolute!important;
left:41.5%!important;
top:15.5%!important;
right:auto!important;
min-width:42px;
min-height:42px;
display:flex;
align-items:center;
justify-content:center;
padding:4px 7px!important;
border:2px solid #d9a512!important;
border-radius:10px!important;
background:#4a3500!important;
color:#ffd84d!important;
font-size:16px!important;
font-weight:1000!important;
box-shadow:0 0 16px rgba(255,209,45,.40)!important;
}
.mca-demo-blue-line{
stroke:#4aa3ff;
stroke-width:15;
stroke-linecap:round;
opacity:.93;
}
.mca-demo-blue-head{fill:#4aa3ff;opacity:.96}
.mca-demo-green-line{
stroke:#4bd36a;
stroke-width:15;
stroke-linecap:round;
opacity:.93;
}
.mca-demo-green-head{fill:#4bd36a;opacity:.96}
.mca-tour-demo-caption{
position:absolute;
left:8px;
top:8px;
z-index:8;
display:flex;
flex-direction:column;
gap:5px;
padding:7px 9px;
border:1px solid rgba(255,255,255,.18);
border-radius:8px;
background:rgba(7,16,20,.88);
color:#e7ecef;
font-size:10px;
font-weight:800;
}
.mca-tour-demo-caption span{
display:flex;
align-items:center;
gap:6px;
}
.mca-tour-demo-caption i{
display:inline-block;
width:18px;
height:4px;
border-radius:999px;
}
.mca-tour-legend-blue{background:#4aa3ff}
.mca-tour-legend-green{background:#4bd36a}
@media(max-width:760px){
.mca-tour-overlay[data-position="top"] .mca-tour-card,
.mca-tour-overlay[data-position="bottom"] .mca-tour-card,
.mca-tour-overlay[data-position="center"] .mca-tour-card{
width:calc(100vw - 28px)!important;
max-width:none!important;
}
.mca-tour-overlay[data-position="top"] .mca-tour-card{
max-height:60dvh!important;
}
.mca-tour-overlay[data-position="bottom"] .mca-tour-card{
max-height:58dvh!important;
}
}
/* =========================================================
MAUMAU CHESS V65 — GAME REVIEW / EXPECTED POINTS
========================================================= */
/* MultiPV continua ativo internamente, mas deixa de ser recurso de interface. */
.multipv-panel,#mobileMultiPvQuick{display:none!important}
/* Com mais categorias, o resumo fica compacto sem perder legibilidade. */
.analysis-summary .summary-row{padding:1px 0!important;font-size:9px!important;min-height:20px}
.analysis-summary .summary-row>span{gap:5px!important}
.analysis-summary .summary-row>span b.summary-icon{width:20px!important;height:20px!important;flex:0 0 20px!important;font-size:14px!important}
.move-class-great{color:#dcf7ff;background:rgba(42,151,196,.23);border-color:rgba(87,190,229,.42)}
.move-class-excellent{color:#d8ffd5;background:rgba(66,150,74,.22);border-color:rgba(102,201,105,.34)}
.move-class-book{color:#d7e8ff;background:rgba(61,97,150,.23);border-color:rgba(97,139,198,.40)}
.move-class-miss{color:#ffe2a6;background:rgba(190,113,24,.27);border-color:rgba(235,151,47,.42)}
.detail-classification.detail-great{color:#cbf3ff;background:rgba(42,151,196,.28)}
.detail-classification.detail-excellent{color:#d7ffd4;background:rgba(66,150,74,.28)}
.detail-classification.detail-book{color:#d9e9ff;background:rgba(61,97,150,.30)}
.detail-classification.detail-miss{color:#ffe2aa;background:rgba(190,113,24,.31)}
.critical-card.critical-great::before{background:#63c7eb!important}
.critical-card.critical-excellent::before{background:#72d77a!important}
.critical-card.critical-book::before{background:#7da7e4!important}
.critical-card.critical-miss::before{background:#f0a447!important}
.square-analysis-tag.great,.square-move-overlay.great{border-color:#63c7eb!important}
.square-analysis-tag.excellent,.square-move-overlay.excellent{border-color:#72d77a!important}
.square-analysis-tag.book,.square-move-overlay.book{border-color:#7da7e4!important}
.square-analysis-tag.miss,.square-move-overlay.miss{border-color:#f0a447!important}
/* As explicações V65 são parágrafos didáticos separados por linha em branco. */
.move-explanation p{white-space:pre-line!important}
body:not(.maumau-native-app) .right-column > .details-panel{flex:1 1 250px!important;min-height:220px!important}
@media (min-width:769px) and (pointer:fine){
body:not(.maumau-native-app) .right-column{grid-template-rows:auto minmax(250px,1fr) minmax(92px,.42fr)!important}
body:not(.maumau-native-app) .right-column > .details-panel{grid-row:2!important}
body:not(.maumau-native-app) .right-column > .critical-panel{grid-row:3!important}
}
/* V65: a notação compacta de PV também fica fora da experiência principal. */
.pv-panel{display:none!important}
.square-move-badge.great{background:#45afd4}
.square-move-badge.excellent{background:#55b862}
.square-move-badge.book{background:#638dcc}
.square-move-badge.miss{background:#e79938}
.square-analysis-tag.great{background:rgba(50,151,190,.94)!important}
.square-analysis-tag.excellent{background:rgba(57,145,67,.94)!important}
.square-analysis-tag.book{background:rgba(61,97,150,.94)!important}
.square-analysis-tag.miss{background:rgba(190,113,24,.94)!important}
/* V65: com PV e MultiPV ocultos, a coluna direita usa somente os três painéis úteis. */
@media (min-width:769px) and (pointer:fine){
.right-column{
grid-template-rows:84px minmax(250px,1fr) 100px!important;
}
.right-column > .evaluation-panel{grid-row:1!important}
.right-column > .pv-panel,.right-column > .multipv-panel{display:none!important}
.right-column > .details-panel{grid-row:2!important;min-height:0!important}
.right-column > .critical-panel{grid-row:3!important}
}
/* =========================================================
HYBRID D10/PV3 v1 — AJUSTES MOBILE E ANÁLISE FIXA
========================================================= */
.settings-fixed-analysis{
display:flex!important;
flex-direction:column;
justify-content:center;
gap:5px;
}
.settings-fixed-value{
display:inline-flex;
width:fit-content;
min-height:30px;
align-items:center;
padding:0 10px;
border:1px solid var(--accent-border);
border-radius:6px;
background:linear-gradient(145deg,var(--accent-soft),#091316 75%);
color:#eef4f6;
font-size:12px;
font-weight:900;
letter-spacing:.2px;
}
@media (max-width:768px), (pointer:coarse) and (max-width:1280px){
/* O botão grande deixa de ocupar uma linha inteira abaixo da navegação. */
#flipBoardButton{
display:none!important;
}
/* Importar | Detalhes | Inverter / Lista | Resumo | Gráfico */
.mobile-analysis-toolbar{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
/* Garante que os cinco controles de navegação não sejam suprimidos pelo flex mobile. */
.navigation{
display:grid!important;
visibility:visible!important;
opacity:1!important;
min-height:32px!important;
flex:0 0 32px!important;
grid-template-columns:34px 34px minmax(85px,1fr) 42px 34px!important;
}
}
@media (max-width:768px), (pointer:coarse) and (max-width:1280px){
/* Navegador mobile: deixa margem vertical suficiente para navegação + toolbar + avaliação. */
body:not(.maumau-native-app) .app{
--mobile-board-size:min(calc(100vw - 40px),calc(100dvh - 360px),820px)!important;
}
body:not(.maumau-native-app) .board-panel{
flex-shrink:0!important;
}
}
/* =========================================================
MAUMAU CHESS — AJUSTE 33
SITE MOBILE RESPONSIVO + RESERVA DO BANNER GOOGLE PLAY
Não altera o layout do APP/Capacitor e preserva os textos de Detalhes.
========================================================= */
@media (max-width:768px), (pointer:coarse) and (max-width:1280px){
/* Só no navegador: reserva vertical real para todos os elementos abaixo
do tabuleiro. O tabuleiro encolhe antes de qualquer painel se sobrepor. */
body:not(.capacitor-native):not(.maumau-native-app) .app{
--mobile-board-size:min(calc(100vw - 30px), calc(100dvh - 390px), 820px)!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .brand{
height:32px!important;
min-height:32px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .brand-icon{
font-size:21px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .brand h1{
font-size:15px!important;
line-height:16px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .top-actions{
gap:4px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .top-actions .actions-menu summary,
body:not(.capacitor-native):not(.maumau-native-app) .top-actions .settings-top{
height:34px!important;
min-height:34px!important;
padding:0 4px!important;
font-size:9.4px!important;
border-radius:7px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .board-title{
height:22px!important;
min-height:22px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .board-title h2{
font-size:9.8px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .board-title #gameInfo{
font-size:7px!important;
line-height:9px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .board-player{
height:27px!important;
min-height:27px!important;
flex-basis:27px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .board-player-piece{
width:23px!important;
height:23px!important;
flex-basis:23px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .board-player-data strong{
font-size:10px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .board-player-rating{
min-width:33px!important;
height:17px!important;
font-size:7.5px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .board-player > .side-board-clock .player-side-clock{
min-width:64px!important;
height:25px!important;
padding:0 5px!important;
font-size:9.5px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .navigation{
margin-top:2px!important;
grid-template-columns:32px 32px minmax(82px,1fr) 40px 32px!important;
gap:3px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .nav-button,
body:not(.capacitor-native):not(.maumau-native-app) .move-info{
height:30px!important;
min-height:30px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .nav-button{
font-size:13px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .move-info{
font-size:10px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .mobile-analysis-toolbar{
gap:4px!important;
margin-top:4px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .mobile-tool-button{
height:34px!important;
min-height:34px!important;
padding:0 5px!important;
border-radius:7px!important;
font-size:10px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .mobile-evaluation-strip{
flex:0 0 50px!important;
height:50px!important;
min-height:50px!important;
margin-top:3px!important;
padding:3px 6px 2px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .mobile-evaluation-head{
height:15px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .mobile-evaluation-head strong{
font-size:8.7px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .mobile-evaluation-head span{
font-size:12px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .mobile-evaluation-bar{
height:9px!important;
margin-top:3px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .mobile-evaluation-marker{
top:-3px!important;
height:15px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .mobile-evaluation-scale{
margin-top:2px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .mobile-evaluation-scale span{
font-size:6px!important;
line-height:7px!important;
}
/* Banner continua no fluxo normal, abaixo da avaliação, e nunca a cobre. */
body:not(.capacitor-native):not(.maumau-native-app) .android-download-section.is-visible{
position:relative!important;
inset:auto!important;
z-index:1!important;
display:flex!important;
width:var(--mobile-board-size)!important;
flex:0 0 34px!important;
min-height:34px!important;
max-height:34px!important;
margin:4px auto 2px!important;
padding:0!important;
overflow:hidden!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .android-download-button{
width:100%!important;
height:32px!important;
min-height:32px!important;
padding:3px 7px!important;
display:grid!important;
grid-template-columns:25px minmax(0,1fr) 19px!important;
gap:6px!important;
align-items:center!important;
line-height:1!important;
border-radius:7px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .android-download-icon{
width:23px!important;
height:23px!important;
font-size:17px!important;
border-radius:6px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .android-download-copy strong{
display:block!important;
min-width:0!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
font-size:9.5px!important;
line-height:1.1!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .android-download-copy small{
display:none!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .android-download-arrow{
font-size:16px!important;
line-height:1!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .maumau-brand-footer{
min-height:18px!important;
flex-basis:18px!important;
font-size:9px!important;
}
}
/* Telefones de navegador com pouca altura: compactação adicional.
O quadro de Detalhes é propositalmente excluído e mantém a tipografia de leitura. */
@media (max-width:768px) and (max-height:760px),
(pointer:coarse) and (max-width:1280px) and (max-height:760px){
body:not(.capacitor-native):not(.maumau-native-app) .app{
--mobile-board-size:min(calc(100vw - 30px), calc(100dvh - 365px), 820px)!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .brand{
height:29px!important;
min-height:29px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .top-actions .actions-menu summary,
body:not(.capacitor-native):not(.maumau-native-app) .top-actions .settings-top{
height:31px!important;
min-height:31px!important;
font-size:8.8px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .mobile-tool-button{
height:31px!important;
min-height:31px!important;
font-size:9.4px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .mobile-evaluation-strip{
flex-basis:46px!important;
height:46px!important;
min-height:46px!important;
}
}
/* =========================================================
MAUMAU CHESS — AJUSTE 34
SITE MOBILE: evita qualquer corte entre Avaliação e banner Play Store.
- Compacta um pouco mais o tabuleiro somente no navegador.
- Remove o clipping vertical rígido como fallback responsivo.
- Mantém modais/Detalhes com tipografia normal.
========================================================= */
@media (max-width:768px), (pointer:coarse) and (max-width:1280px){
html:has(body:not(.capacitor-native):not(.maumau-native-app)),
body:not(.capacitor-native):not(.maumau-native-app){
height:auto!important;
min-height:100%!important;
overflow-x:hidden!important;
overflow-y:auto!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .app{
--mobile-board-size:min(calc(100vw - 46px), calc(100dvh - 420px), 820px)!important;
height:auto!important;
min-height:100dvh!important;
max-height:none!important;
overflow:visible!important;
padding-bottom:max(5px,env(safe-area-inset-bottom))!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .dashboard{
flex:0 0 auto!important;
height:auto!important;
min-height:0!important;
overflow:visible!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .center-column,
body:not(.capacitor-native):not(.maumau-native-app) .board-panel{
height:auto!important;
min-height:0!important;
overflow:visible!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .mobile-evaluation-strip{
margin-top:5px!important;
margin-bottom:8px!important;
overflow:hidden!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .android-download-section.is-visible{
position:relative!important;
inset:auto!important;
z-index:1!important;
margin:0 auto 5px!important;
}
body:not(.capacitor-native):not(.maumau-native-app) .maumau-brand-footer{
margin-top:0!important;
}
}
/* Telefones com pouca altura útil (barra do navegador grande, teclado, etc.). */
@media (max-width:768px) and (max-height:800px),
(pointer:coarse) and (max-width:1280px) and (max-height:800px){
body:not(.capacitor-native):not(.maumau-native-app) .app{
--mobile-board-size:min(calc(100vw - 54px), calc(100dvh - 425px), 820px)!important;
}
}
@media (max-width:768px) and (max-height:720px),
(pointer:coarse) and (max-width:1280px) and (max-height:720px){
body:not(.capacitor-native):not(.maumau-native-app) .app{
--mobile-board-size:min(calc(100vw - 64px), calc(100dvh - 410px), 820px)!important;
}
}
/* =========================================================
AAB35 — Tutorial atualizado
========================================================= */
.mca-tour-build-sim{
margin:14px 0 4px;
padding:12px;
border:1px solid var(--accent-border);
border-radius:10px;
background:#0d1b21;
}
.mca-tour-build-sim strong{
display:block;
margin-bottom:8px;
color:var(--accent-text);
font-size:14px;
}
.mca-tour-build-sim small{
display:block;
margin-top:7px;
color:#9fb0b8;
font-size:11px;
}
.mca-tour-build-track{
position:relative;
height:8px;
overflow:hidden;
border-radius:999px;
background:#18272e;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.mca-tour-build-track span{
position:absolute;
inset:0 auto 0 0;
width:38%;
border-radius:inherit;
background:var(--accent);
animation:mcaTourBuildSimulation 2.2s ease-in-out infinite;
}
@keyframes mcaTourBuildSimulation{
0%{width:8%;transform:translateX(0)}
48%{width:62%;transform:translateX(34%)}
100%{width:18%;transform:translateX(455%)}
}
.mca-tour-inline-eval{
width:100%;
min-height:44px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-top:10px;
padding:8px 12px;
border:1px solid #d9a512;
border-radius:9px;
background:#3e3008;
color:#ffd84d;
font:inherit;
font-weight:1000;
cursor:pointer;
}
.mca-tour-inline-eval span{
color:#f0f3f4;
font-size:12px;
font-weight:800;
}
.mca-tour-inline-eval:hover,
.mca-tour-inline-eval:focus-visible{
filter:brightness(1.12);
outline:2px solid rgba(255,216,77,.35);
outline-offset:2px;
}
.mca-tour-explanation-screen{
position:fixed;
z-index:5;
left:50%;
top:50%;
width:min(660px,calc(100vw - 28px));
max-height:78dvh;
overflow:auto;
transform:translate(-50%,-50%);
padding:22px;
border:2px solid var(--accent-border);
border-radius:16px;
background:#0a151a;
box-shadow:
0 24px 80px rgba(0,0,0,.78),
inset 0 4px 0 var(--accent-soft),
inset 0 0 0 1px rgba(var(--accent-rgb),.10);
}
.mca-tour-explanation-screen.hidden{display:none!important}
.mca-tour-explanation-screen h2{
margin:8px 0 12px;
color:#f3f7f8;
font-size:24px;
}
.mca-tour-explanation-screen .mca-tour-actions{
justify-content:flex-start;
margin-top:16px;
}
.mca-tour-explanation-back{
min-width:150px;
}
@media(max-width:760px){
.mca-tour-explanation-screen{
width:calc(100vw - 28px);
max-height:76dvh;
padding:18px;
}
.mca-tour-explanation-screen h2{font-size:20px}
}
/* =========================================================
AAB35 RC2 — navegação touch, tutorial e relógio reconstruído
========================================================= */
/* Evita o menu nativo Copiar/Selecionar/Colar ao manter o dedo sobre
os controles de navegação. */
.navigation,
.navigation *,
.nav-button,
.move-info{
-webkit-user-select:none!important;
user-select:none!important;
-webkit-touch-callout:none!important;
-webkit-tap-highlight-color:transparent;
}
.nav-button{
touch-action:manipulation;
}
/* O passo "Reconstrução e análise" usa a própria barra oficial do APP/SITE. */
.mca-tour-progress-demo .mobile-analysis-progress-bar,
.mca-tour-progress-demo .full-analysis-bar{
animation:mcaTourOfficialProgressDemo 2.2s ease-in-out infinite!important;
}
@keyframes mcaTourOfficialProgressDemo{
0%{width:14%}
45%{width:72%}
72%{width:88%}
100%{width:36%}
}
/* No passo do tabuleiro, somente o !? didático recebe toque por baixo do overlay. */
.mca-tour-overlay.mca-tour-board-click-through .mca-tour-dim{
pointer-events:none!important;
}
.mca-tour-board-demo{
pointer-events:none!important;
}
.mca-tour-board-demo .mca-tour-demo-eval{
pointer-events:auto!important;
cursor:pointer;
appearance:none;
-webkit-appearance:none;
font-family:inherit;
}
/* A tela de explicação precisa aceitar clique mesmo sendo filha de um overlay
cujo padrão é pointer-events:none. */
.mca-tour-explanation-screen{
pointer-events:auto!important;
}
/* Identificação discreta para relógios calculados em vez de importados. */
.clock-source-note{
display:inline-flex;
align-items:center;
justify-content:center;
margin-right:4px;
color:#ff9a32;
font-size:6.5px;
line-height:1.05;
font-weight:800;
white-space:nowrap;
letter-spacing:0;
text-transform:lowercase;
pointer-events:none;
}
.clock-source-note.hidden{
display:none!important;
}
body[data-theme="orange"] .clock-source-note{
color:#ff625d;
}
.side-board-clock{
align-items:center;
gap:4px;
width:auto;
}
@media(max-width:768px){
.board-player > .side-board-clock{
display:flex!important;
flex-direction:row!important;
align-items:center!important;
gap:3px!important;
}
.clock-source-note{
max-width:58px;
font-size:6px;
text-align:right;
white-space:normal;
}
}
/* =========================================================
SITE DESKTOP — detalhes amplos por padrão
Momentos críticos permanecem disponíveis na lista/relatório, sem painel lateral.
Não afeta o site em celular nem o APP.
========================================================= */
@media (min-width:769px){
body:not(.maumau-native-app) .right-column > .critical-panel{
display:none!important;
}
body:not(.maumau-native-app) .right-column > .details-panel{
flex:1 1 auto!important;
min-height:0!important;
padding:10px 12px 9px!important;
overflow:auto!important;
}
body:not(.maumau-native-app) .right-column > .details-panel .move-details{
gap:7px;
}
body:not(.maumau-native-app) .right-column > .details-panel .move-details > div{
min-height:42px;
padding:5px 8px;
}
body:not(.maumau-native-app) .right-column > .details-panel .move-details span{
font-size:8px;
}
body:not(.maumau-native-app) .right-column > .details-panel .move-details strong{
font-size:15px;
}
body:not(.maumau-native-app) .right-column > .details-panel .move-metrics{
gap:6px;
margin-top:7px;
}
body:not(.maumau-native-app) .right-column > .details-panel .move-metrics > div{
min-height:40px;
padding:5px 6px;
}
body:not(.maumau-native-app) .right-column > .details-panel .move-metrics span{
font-size:7.5px;
}
body:not(.maumau-native-app) .right-column > .details-panel .move-metrics strong{
font-size:11px;
}
body:not(.maumau-native-app) .right-column > .details-panel .move-explanation{
min-height:150px!important;
margin-top:9px;
padding:10px 12px;
border:1px solid var(--accent-border);
border-radius:7px;
background:#081317;
}
body:not(.maumau-native-app) .right-column > .details-panel .move-explanation-title{
font-size:11px!important;
margin-bottom:7px;
}
body:not(.maumau-native-app) .right-column > .details-panel .move-explanation p{
margin:0;
font-size:13px!important;
line-height:1.48!important;
white-space:normal!important;
overflow:visible!important;
}
body:not(.maumau-native-app) .right-column > .details-panel .move-explanation small{
display:block;
margin-top:9px;
font-size:9.5px!important;
line-height:1.42!important;
white-space:normal!important;
}
body:not(.maumau-native-app) .right-column > .details-panel .arrow-legend{
margin-top:9px;
font-size:8.5px;
}
}
/* UI V1.3.8 — realce neutro das casas, sem interferir nas 3 setas de análise */
.board .square.mca-last-from,.board .square.mca-last-to{background-image:linear-gradient(rgba(255,215,77,.30),rgba(255,215,77,.30))!important;background-blend-mode:normal;}
.board .square.mca-last-to{box-shadow:inset 0 0 0 3px rgba(255,217,93,.52)}
.board .square-hint-dot::after,.board .play-legal::after,.board .analysis-sandbox-legal::after{width:28%!important;height:28%!important;min-width:16px;min-height:16px}
.board .square-hint-capture::after{inset:5%!important;border-width:8px!important}
.board .play-legal:has(.piece)::after,.board .analysis-sandbox-legal:has(.piece)::after{width:84%!important;height:84%!important;min-width:0;min-height:0}
/* V1.3.8 R3: último lance e xeque nos movimentos alternativos. */
.board .square.mca-alternate-check{box-shadow:inset 0 0 21px 5px rgba(225,35,42,.86)!important}
.board .square.mca-check-flash{animation:mcaAlternateCheckFlash .36s ease-in-out 2!important}
@keyframes mcaAlternateCheckFlash{0%,100%{box-shadow:inset 0 0 8px 3px rgba(240,46,46,.55)}50%{box-shadow:inset 0 0 35px 12px #ff3636;background-image:linear-gradient(rgba(245,47,47,.28),rgba(245,47,47,.28))}}
@media(prefers-reduced-motion:reduce){.board .square.mca-check-flash{animation:none!important}}
/* R6 — prévia acessível dos submenus no tutorial interativo. */
.mca-tour-play-preview{display:grid;gap:6px;margin:14px 0 5px;padding:10px;border:1px solid var(--accent-border);border-radius:10px;background:#09161d}
.mca-tour-play-preview strong{font-size:13px;color:var(--accent-text);padding:4px 6px 8px;border-bottom:1px solid #294653}
.mca-tour-play-preview span{display:block;min-height:34px;padding:8px 10px;border-radius:7px;border:1px solid #334f5c;background:#0d2028;font-size:13px;font-weight:700;color:#dbe5e9}
.mca-tour-play-preview .is-active{border:2px solid var(--accent);background:var(--accent-soft);color:var(--accent-text);box-shadow:0 0 12px rgba(var(--accent-rgb),.22)}
/* R10.5 — SITE (não APP): detalhes grandes desde a abertura, sem X.
O aplicativo Android conserva sua janela de detalhes original. */
body:not(.maumau-native-app) .right-column .close-expanded-details{display:none!important}
body:not(.maumau-native-app) .right-column > .details-panel{min-height:250px!important}
@media (min-width:769px) and (pointer:fine){
body:not(.maumau-native-app) .right-column.details-expanded > .details-panel{
grid-row:1 / -1!important;
position:absolute!important;
}
}
body:not(.maumau-native-app) .right-column > .details-panel.mca-details-piece-flash{
animation:mcaDetailsPiecePulse 1.5s ease-out 1;
}
@keyframes mcaDetailsPiecePulse{
0%,100%{box-shadow:0 0 0 0 transparent}
22%{border-color:var(--accent,#4aa3ff);box-shadow:0 0 0 4px var(--accent-soft,rgba(74,163,255,.22)),0 0 24px 5px rgba(var(--accent-rgb,74,163,255),.62)}
62%{box-shadow:0 0 0 2px var(--accent-soft,rgba(74,163,255,.22)),0 0 18px 3px rgba(var(--accent-rgb,74,163,255),.34)}
}
@media(prefers-reduced-motion:reduce){body:not(.maumau-native-app) .right-column > .details-panel.mca-details-piece-flash{animation:none!important}}
/* R10.5 — reproduz os itens reais de "Jogar contra..." acima da máscara
somente nas etapas correspondentes do Tutorial Explicativo. */
.mca-tour-overlay .mca-tour-real-menu-preview{
position:fixed!important;z-index:2!important;right:auto!important;bottom:auto!important;
display:flex!important;flex-direction:column;gap:6px;padding:8px;
border:2px solid var(--accent-border,#4aa3ff);border-radius:10px;
background:#10212c!important;box-shadow:0 15px 35px #000c;
pointer-events:none!important;visibility:visible!important;opacity:1!important;
}
.mca-tour-overlay .mca-tour-real-menu-preview > a{min-height:40px!important;font-size:13px!important;pointer-events:none!important}
.mca-tour-overlay .mca-tour-real-menu-preview .mca-tour-current-choice{
outline:2px solid var(--accent,#4aa3ff)!important;
outline-offset:-2px;box-shadow:0 0 18px rgba(var(--accent-rgb,74,163,255),.5)!important;
}