/* KODOKU — decor vert-ardoise. La grille ne change pas, seul le decor autour. */

body.kodoku{background:linear-gradient(180deg,#24352C 0%,#1D2B24 55%,#18241E 100%)!important}
body.kodoku::before,body.kodoku::after{background:none!important;opacity:0!important}
html.kodoku-html::before{background:#1D2B24!important}

body.kodoku .game-info,
body.kodoku .game-stats{background:linear-gradient(180deg,#2E4438 0%,#1A2822 100%)!important;border-color:#2E4438!important;color:#8FCFAE!important}
body.kodoku .stat-label{color:#63A681!important;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;letter-spacing:.14em!important}
body.kodoku .stat-value{color:#EAFFF2!important;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;letter-spacing:.10em!important}
body.kodoku .kodoku-hidden{display:none!important}
body.kodoku #correct-btn,body.kodoku #reveal-btn{display:none!important}

body.kodoku #sudoku-container{background-color:#0E1A14!important;border-color:#0E1A14!important}
body.kodoku .sudoku-region{background-color:#0E1A14!important}

@keyframes kodoku-breathe{0%{box-shadow:0 0 0 0 rgba(140,243,180,0)}
40%{box-shadow:0 0 0 10px rgba(140,243,180,.28)}
100%{box-shadow:0 0 0 0 rgba(140,243,180,0)}}
body.kodoku #sudoku-container.kodoku-breathe{animation:kodoku-breathe .9s ease-out}

/* ------------------------------------------------- ecran des paliers */

.kodoku-overlay{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;
background:linear-gradient(180deg,#24352C 0%,#1D2B24 55%,#18241E 100%);
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;color:#8FCFAE}

.kodoku-halo{position:absolute;left:0;right:0;top:50%;height:300px;transform:translateY(-50%);pointer-events:none;
background:radial-gradient(60% 100% at 50% 50%,rgba(150,225,185,.20) 0%,rgba(150,225,185,0) 74%)}

.kodoku-screen{position:relative;width:min(92vw,460px);display:flex;flex-direction:column;align-items:center;gap:18px;padding:28px 20px}

.kodoku-close{position:absolute;top:0;right:0;background:none;border:0;color:#63A681;font-size:26px;line-height:1;cursor:pointer;padding:6px 10px;min-width:auto;min-height:auto}
.kodoku-close:hover{color:#8CF3B4}

.kodoku-title{display:flex;align-items:center;gap:8px;font-size:22px;letter-spacing:.28em;color:#EAFFF2;font-weight:700}
.kodoku-caret{display:inline-block;width:11px;height:20px;background:#8CF3B4;animation:kodoku-blink 1s steps(1,end) infinite}
@keyframes kodoku-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.kodoku-rules{display:flex;flex-direction:column;gap:4px;align-items:center}
.kodoku-rule{font-size:12.5px;letter-spacing:.16em;color:#63A681}

.kodoku-levels{width:100%;display:flex;flex-direction:column;gap:8px;margin-top:6px}
.kodoku-level{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;
background:rgba(14,26,20,.5);border:1px solid rgba(99,166,129,.22);border-radius:8px;
color:#8FCFAE;letter-spacing:.20em;font-size:14px;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.kodoku-overlay.intro .kodoku-level{opacity:0;transform:translateY(10px);animation:kodoku-rise .30s ease-out forwards}
@keyframes kodoku-rise{to{opacity:1;transform:translateY(0)}}
.kodoku-level:hover{border-color:rgba(140,243,180,.45)}
.kodoku-level.on{background:rgba(14,26,20,.68);border-color:#8CF3B4;color:#EAFFF2;transform:translateX(3px)}
.kodoku-chevron{color:#63A681}
.kodoku-level.on .kodoku-chevron{color:#8CF3B4}
.kodoku-level-name{flex:1}
.kodoku-level-done{font-size:11px;letter-spacing:.10em;color:#63A681}

.kodoku-resume{width:100%;padding:11px 14px;margin-top:2px;cursor:pointer;
background:rgba(14,26,20,.5);border:1px dashed rgba(140,243,180,.45);border-radius:8px;
color:#8CF3B4;letter-spacing:.16em;font-size:12.5px;font-family:inherit}

.kodoku-start{width:100%;padding:14px;margin-top:4px;cursor:pointer;border-radius:8px;
background:#8CF3B4;border:1px solid #8CF3B4;color:#0E1A14;font-family:inherit;font-weight:700;
letter-spacing:.24em;font-size:14px}
.kodoku-start:disabled{background:transparent;border:1px dashed rgba(99,166,129,.5);color:#63A681;cursor:default}

@media (max-width:520px){.kodoku-screen{width:94vw;padding:22px 14px;gap:14px}.kodoku-title{font-size:19px}}

/* ------------------------- bande KODOKU dans le selecteur de mode */

.kodoku-band{display:flex;align-items:center;gap:10px;margin-top:12px;padding:14px 16px;cursor:pointer;
border-radius:10px;background:linear-gradient(180deg,#24352C 0%,#18241E 100%);
border:1px solid rgba(99,166,129,.30);
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
color:#8FCFAE;letter-spacing:.24em;font-size:14px;transition:border-color .18s ease,transform .18s ease}
.kodoku-band:hover{border-color:rgba(140,243,180,.55);transform:translateX(3px)}
.kodoku-band-chevron{color:#63A681}
.kodoku-band-name{color:#EAFFF2;font-weight:700}
.kodoku-band-caret{display:inline-block;width:9px;height:16px;background:#8CF3B4;animation:kodoku-blink 1s steps(1,end) infinite}
.kodoku-band-sub{margin-left:auto;font-size:10.5px;letter-spacing:.08em;color:#63A681;text-align:right}

/* En KODOKU, rien autour de la grille. Les sections du bas gardent leur
   habillage clair et deviennent illisibles sur le vert-ardoise ; le mode
   n'a de toute facon rien a montrer d'autre que la grille. */
body.kodoku #home-miniboard-container,
body.kodoku #discover-suirodoku,
body.kodoku .home-miniboard-container,
body.kodoku .tips-banner{display:none!important}