:root {
  --bg:#f2efe6; --bg2:rgba(255,255,255,0.7); --border:#1a1a1a; --text:#1a1a1a;
  --text-sub:#888; --shadow:#1a1a1a; --inp-bg:rgba(255,255,255,0.8);
  --inp-lock:rgba(242,239,230,0.6); --pre-bg:#fffbe6; --med-bg:#fff8e1;
  --info-bg:#fffbe6; --info-brd:#c0a000; --info-txt:#5a4800;
  --sep:repeating-linear-gradient(90deg,#1a1a1a 0,#1a1a1a 6px,transparent 6px,transparent 12px);
  --grid-line:rgba(100,140,200,0.15); --red-line:rgba(220,80,80,0.35);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Space Mono',monospace;background-color:var(--bg);
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:28px 28px;min-height:100vh;padding:32px 20px 0;color:var(--text);
}
body::before{content:'';position:fixed;top:0;left:88px;width:2px;height:100%;background:var(--red-line);pointer-events:none;z-index:0;}

/* TOPBAR */
.topbar{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:8px;position:relative;}
h1{font-family:'Kalam',cursive;font-size:2.4rem;font-weight:700;color:var(--text);letter-spacing:-1px;}
.topbar-right{position:absolute;right:0;display:flex;align-items:center;gap:8px;}
.lang-flags{display:flex;gap:6px;}
.lang-btn{background:none;border:2px solid transparent;border-radius:4px;cursor:pointer;font-size:1.4rem;padding:2px 4px;transition:all 0.15s;line-height:1;}
.lang-btn:hover{border-color:var(--border);}
.lang-btn.active{border-color:var(--border);box-shadow:2px 2px 0 var(--shadow);}
.subtitle{text-align:center;font-size:0.75rem;color:var(--text-sub);margin-bottom:32px;letter-spacing:2px;text-transform:uppercase;}

/* LAYOUT */
.layout{display:grid;grid-template-columns:155px 1fr 260px;gap:24px;max-width:980px;margin:0 auto;position:relative;z-index:1;align-items:start;}
.mode-panel,.game-panel,.rules-panel{background:var(--bg2);border:2.5px solid var(--border);border-radius:4px;box-shadow:6px 6px 0 var(--shadow);position:relative;transition:border-color 0.3s,box-shadow 0.3s;}
.mode-panel{padding:18px 14px;position:sticky;top:24px;}
.game-panel{padding:28px;}
.rules-panel{padding:22px;position:sticky;top:24px;}
.game-panel.daily-active{border-color:#e8462a;box-shadow:6px 6px 0 #e8462a,0 0 0 3px rgba(232,70,42,0.15);}

/* MODE PANEL */
.mode-panel h3{font-family:'Kalam',cursive;font-size:1rem;font-weight:700;color:var(--text);margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--border);text-align:center;}
.section-label{font-size:0.58rem;font-weight:700;letter-spacing:2px;color:var(--text-sub);text-transform:uppercase;margin:12px 0 6px;text-align:center;}
.mode-buttons{display:flex;flex-direction:column;gap:8px;}

/* SIZE BUTTONS */
.btn-mode{width:100%;padding:10px 8px;font-family:'Space Mono',monospace;font-size:0.82rem;font-weight:700;background:var(--bg);color:var(--text-sub);border:2px solid #bbb;border-radius:3px;cursor:pointer;letter-spacing:1px;transition:all 0.1s;box-shadow:2px 2px 0 #bbb;text-align:center;}
.btn-mode:hover{border-color:var(--border);color:var(--text);box-shadow:3px 3px 0 var(--border);transform:translate(-1px,-1px);}
.btn-mode.active{background:var(--border);color:var(--bg);border-color:var(--border);box-shadow:3px 3px 0 var(--shadow);transform:none;}

/* DIFFICULTY BUTTONS */
.btn-diff{width:100%;padding:10px 14px;font-family:'Space Mono',monospace;font-size:0.82rem;font-weight:700;border-radius:6px;cursor:pointer;letter-spacing:1px;transition:all 0.15s;text-align:left;display:flex;align-items:center;gap:10px;border:2.5px solid transparent;}
.btn-diff .diff-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;border:2px solid rgba(0,0,0,0.15);}

#btnEasy{background:#e6f9ee;color:#22863a;border-color:#22863a;box-shadow:2px 2px 0 #145226;}
#btnEasy .diff-dot{background:#22863a;}
#btnEasy:hover{background:#d0f0de;box-shadow:3px 3px 0 #145226;transform:translate(-1px,-1px);}
#btnEasy.active{background:#22863a;color:#fff;box-shadow:3px 3px 0 #145226;transform:translate(1px,1px);}
#btnEasy.active .diff-dot{background:#fff;border-color:rgba(255,255,255,0.4);}

#btnMedium{background:#fff8e1;color:#7a4c00;border-color:#c07800;box-shadow:2px 2px 0 #7a4c00;}
#btnMedium .diff-dot{background:#c07800;}
#btnMedium:hover{background:#fff0c0;box-shadow:3px 3px 0 #7a4c00;transform:translate(-1px,-1px);}
#btnMedium.active{background:#c07800;color:#fff;box-shadow:3px 3px 0 #7a4c00;transform:translate(1px,1px);}
#btnMedium.active .diff-dot{background:#fff;border-color:rgba(255,255,255,0.4);}

#btnHard{background:#fdecea;color:#e8462a;border-color:#e8462a;box-shadow:2px 2px 0 #8b2517;}
#btnHard .diff-dot{background:#e8462a;}
#btnHard:hover{background:#fad4d0;box-shadow:3px 3px 0 #8b2517;transform:translate(-1px,-1px);}
#btnHard.active{background:#e8462a;color:#fff;box-shadow:3px 3px 0 #8b2517;transform:translate(1px,1px);}
#btnHard.active .diff-dot{background:#fff;border-color:rgba(255,255,255,0.4);}

.mode-desc{margin-top:14px;padding-top:12px;border-top:2px dashed #555;font-size:0.62rem;color:var(--text-sub);line-height:1.7;text-align:center;font-family:'Space Mono',monospace;}
.mode-desc strong{color:#e8462a;display:block;margin-bottom:3px;font-size:0.65rem;}
.daily-divider{margin-top:12px;padding-top:12px;border-top:2px dashed #555;}
#btnDailyOpen{width:100%;padding:10px 8px;font-family:'Space Mono',monospace;font-size:0.82rem;font-weight:700;background:linear-gradient(135deg,#e8462a,#c07800);color:#fff;border:2px solid var(--border);border-radius:3px;cursor:pointer;letter-spacing:1px;box-shadow:3px 3px 0 var(--shadow);transition:all 0.1s;text-align:center;}
#btnDailyOpen:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow);}
#btnDailyOpen.active{outline:3px solid #ffd700;outline-offset:2px;}

/* DAILY PICKER */
.daily-picker{display:none;flex-direction:column;align-items:center;gap:16px;padding:10px 0 20px;}
.daily-picker.visible{display:flex;}
.daily-picker h3{font-family:'Kalam',cursive;font-size:1.4rem;color:var(--text);text-align:center;}
.daily-size-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.btn-daily-size{padding:18px 24px;font-family:'Space Mono',monospace;font-size:1rem;font-weight:700;background:var(--bg);color:var(--text);border:2.5px solid var(--border);border-radius:4px;cursor:pointer;box-shadow:4px 4px 0 var(--border);transition:all 0.1s;letter-spacing:1px;position:relative;}
.btn-daily-size:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--border);}
.btn-daily-size:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--border);}
.btn-daily-size.done-won{border-color:#22863a;color:#22863a;background:#e6f9ee;}
.btn-daily-size.done-won::after{content:'✓';position:absolute;top:4px;right:6px;font-size:0.7rem;}
.btn-daily-size.done-lost{border-color:#e8462a;color:#e8462a;background:#fdecea;}
.btn-daily-size.done-lost::after{content:'✗';position:absolute;top:4px;right:6px;font-size:0.7rem;}

/* DAILY CARDS */
.daily-cards-row{display:none;gap:8px;margin-top:16px;flex-wrap:wrap;justify-content:center;}
.daily-cards-row.visible{display:flex;}
.daily-card{flex:1;min-width:80px;padding:10px 6px;font-family:'Space Mono',monospace;font-size:0.68rem;font-weight:700;background:var(--bg);color:var(--text);border:2.5px solid #bbb;border-radius:3px;cursor:pointer;text-align:center;line-height:1.7;transition:all 0.15s;box-shadow:2px 2px 0 #bbb;}
.daily-card:hover{border-color:var(--border);box-shadow:3px 3px 0 var(--border);transform:translate(-1px,-1px);}
.daily-card.active-card{border-color:#e8462a;background:rgba(232,70,42,0.07);box-shadow:3px 3px 0 #e8462a;}
.daily-card.won{border-color:#22863a;background:#e6f9ee;color:#22863a;box-shadow:3px 3px 0 #22863a;}
.daily-card.lost-card{border-color:#e8462a;background:#fdecea;color:#e8462a;box-shadow:3px 3px 0 #e8462a;}
.daily-card .dc-time{font-size:0.6rem;opacity:0.8;margin-top:2px;}

/* LIVES */
.lives-wrap{display:flex;align-items:center;gap:6px;margin-bottom:16px;padding-bottom:14px;border-bottom:2px dashed #555;}
.lives-label{font-size:0.62rem;font-weight:700;letter-spacing:2px;color:var(--text-sub);text-transform:uppercase;margin-right:4px;}
.heart{font-size:1.35rem;transition:opacity 0.4s,filter 0.4s;}
.heart.lost{filter:grayscale(1);opacity:0.2;}

/* CONTROLS */
.controls{display:flex;align-items:center;gap:12px;margin-bottom:24px;flex-wrap:wrap;}
#btnStart{padding:10px 22px;font-family:'Space Mono',monospace;font-size:0.85rem;font-weight:700;background:var(--text);color:var(--bg);border:2.5px solid var(--border);border-radius:3px;cursor:pointer;letter-spacing:1px;transition:transform 0.1s,box-shadow 0.1s;box-shadow:3px 3px 0 var(--shadow);}
#btnStart:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow);}
#btnStart:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow);}
#btnStart:disabled{background:#888;border-color:#888;color:#ccc;cursor:default;transform:none;box-shadow:2px 2px 0 #555;pointer-events:none;}
#btnNew{padding:10px 22px;font-family:'Space Mono',monospace;font-size:0.85rem;font-weight:700;background:#e8462a;color:#fff;border:2.5px solid var(--border);border-radius:3px;cursor:pointer;letter-spacing:1px;transition:transform 0.1s,box-shadow 0.1s;box-shadow:3px 3px 0 #8b2517;}
#btnNew:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #8b2517;}
#btnNew:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #8b2517;}
.timer-wrap{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;}
.timer-label{font-size:0.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-sub);}
#timer{font-family:'Space Mono',monospace;font-size:1.8rem;font-weight:700;color:var(--text);line-height:1;letter-spacing:2px;}

/* GRID */
.grid-wrapper{overflow-x:auto;}
table{border-collapse:separate;border-spacing:6px;margin:0 auto;}
td{text-align:center;vertical-align:middle;}
input[type="number"]{border:2.5px solid #aaa;border-radius:3px;text-align:center;font-family:'Kalam',cursive;font-weight:700;color:var(--text);background:var(--inp-bg);transition:border-color 0.15s,background 0.15s,box-shadow 0.15s;-moz-appearance:textfield;appearance:textfield;outline:none;cursor:text;}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;}
input[type="number"]:focus{border-color:var(--border);box-shadow:3px 3px 0 var(--border);}
input[readonly],input:disabled{cursor:default;caret-color:transparent;}
input.player-locked{background:var(--inp-lock);color:#888;border-color:#555;border-style:dashed;cursor:not-allowed;caret-color:transparent;}
input.prefilled{background:var(--pre-bg);color:var(--text);font-weight:700;border:2.5px solid var(--border);cursor:default;box-shadow:2px 2px 0 var(--border);caret-color:transparent;}
input.prefilled:focus{box-shadow:2px 2px 0 var(--border);border-color:var(--border);background:var(--pre-bg);}
input.correct{background:#e6f9ee;border-color:#22863a;color:#22863a;box-shadow:2px 2px 0 #22863a;caret-color:transparent;}
input.wrong{background:#fdecea;border-color:#e8462a;color:#e8462a;box-shadow:2px 2px 0 #e8462a;animation:shake 0.3s ease;}
input.duplicate{background:#fff3cd;border-color:#c07800;color:#7a4c00;box-shadow:2px 2px 0 #c07800;animation:shake 0.3s ease;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.median-cell input{background:var(--med-bg)!important;border:2.5px dashed #c0a000!important;color:#8a6e00!important;font-family:'Space Mono',monospace!important;font-weight:700;cursor:default!important;box-shadow:none!important;caret-color:transparent!important;}
.median-label{font-size:0.55rem;font-weight:700;text-transform:uppercase;color:var(--text-sub);letter-spacing:1px;padding-bottom:4px;display:block;font-family:'Space Mono',monospace;}
.row-header{font-size:0.55rem;font-weight:700;color:var(--text-sub);text-transform:uppercase;padding-right:6px;white-space:nowrap;font-family:'Space Mono',monospace;letter-spacing:1px;}
tr.sep-row td{padding:3px 0;}
.sep-line{height:2px;background:var(--sep);}

/* CHECK BUTTON */
.btn-check{display:block;margin:24px auto 0;padding:12px 36px;font-family:'Space Mono',monospace;font-size:0.85rem;font-weight:700;background:var(--bg);color:var(--text);border:2.5px solid var(--border);border-radius:3px;cursor:pointer;letter-spacing:1px;text-transform:uppercase;transition:transform 0.1s,box-shadow 0.1s;box-shadow:4px 4px 0 var(--border);}
.btn-check:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--border);}
.btn-check:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--border);}
.btn-check:disabled{opacity:0.35;cursor:not-allowed;transform:none;box-shadow:2px 2px 0 #aaa;border-color:#aaa;}

/* MESSAGE */
#message{margin-top:18px;text-align:center;min-height:28px;padding:10px 16px;font-family:'Kalam',cursive;font-size:1.1rem;font-weight:700;border-radius:3px;}
#message.win{border:2.5px solid #22863a;background:#e6f9ee;color:#22863a;box-shadow:3px 3px 0 #22863a;}
#message.fail{border:2.5px solid #e8462a;background:#fdecea;color:#e8462a;box-shadow:3px 3px 0 #e8462a;}
#message.warn{border:2.5px solid #c07800;background:#fff3cd;color:#7a4c00;box-shadow:3px 3px 0 #c07800;}
#message.gameover{border:2.5px solid var(--border);background:var(--text);color:var(--bg);box-shadow:4px 4px 0 var(--shadow);font-size:1rem;}

/* STAMP */
.stamp{position:absolute;bottom:18px;right:18px;width:56px;height:56px;border:3px solid rgba(232,70,42,0.3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.5rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(232,70,42,0.3);transform:rotate(-15deg);pointer-events:none;line-height:1.3;text-align:center;}

/* RULES */
.rules-panel h2{font-family:'Kalam',cursive;font-size:1.3rem;font-weight:700;color:var(--text);margin:0 0 16px;padding-bottom:10px;border-bottom:2px solid var(--border);}
.rules-panel ol{padding-left:20px;display:flex;flex-direction:column;gap:11px;}
.rules-panel li{font-family:'Kalam',cursive;font-size:0.93rem;line-height:1.5;color:var(--text);}
.rules-panel li strong{color:#e8462a;}
.info-box{margin-top:18px;background:var(--info-bg);border:2px solid var(--info-brd);border-radius:3px;padding:13px;font-family:'Kalam',cursive;font-size:0.9rem;color:var(--info-txt);line-height:1.6;box-shadow:3px 3px 0 var(--info-brd);}
.info-box strong{display:block;margin-bottom:5px;font-size:0.95rem;}

/* FOOTER */
.footer{text-align:center;padding:32px 20px 24px;font-family:'Space Mono',monospace;font-size:0.7rem;color:var(--text-sub);letter-spacing:2px;text-transform:uppercase;position:relative;z-index:1;}
.footer span{color:var(--text);font-weight:700;}

/* CONFETTI */
#confettiCanvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;}

/* RESPONSIVE */
@media(max-width:780px){
  .layout{grid-template-columns:1fr;}
  .mode-panel,.rules-panel{position:static;}
  .mode-buttons{flex-direction:row;flex-wrap:wrap;}
  .btn-mode{width:auto;flex:1;}
  body::before{display:none;}
  .topbar-right{position:static;}
  .topbar{flex-wrap:wrap;justify-content:center;}
}