:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#fff;background:#6e5c62;font-synthesis:none;--bg:#6e5c62;--correct:#3aa394;--present:#d3ad69;--absent:#312a2c;--muted:#615458}*{box-sizing:border-box}html,body,#root{margin:0;min-width:320px;min-height:100%;background:var(--bg)}body{overscroll-behavior:none}.app{min-height:100dvh;max-width:560px;margin:auto;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center;overflow:hidden;-webkit-user-select:none;user-select:none}button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #fff;outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.42}header{height:48px;width:100%;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid rgba(255,255,255,.14)}header button{width:42px;height:42px;display:grid;place-items:center;background:transparent;border-radius:8px}header svg{width:23px}.brand{display:flex;align-items:center;gap:8px}.brand h1{font-size:21px;letter-spacing:-1px;margin:0}.brand h1 span{font-weight:400;opacity:.8}.mini{width:24px;display:grid;grid-template-columns:repeat(2,1fr);font-size:9px;font-weight:900;line-height:11px}.mini i{font-style:normal;background:#fff;color:#312a2c;text-align:center}.mini i:nth-child(2){background:var(--correct);color:#fff}.mini i:nth-child(3){grid-column:1/3;background:var(--present)}nav{display:flex}.meta{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:1.3px;margin:7px 0 5px}.meta b{background:#615458;padding:3px 6px;border-radius:5px}.board{width:min(100%,390px);display:grid;gap:4px}.board-row{height:clamp(34px,5.2dvh,45px);display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.tile,.count{border-radius:5px;background:var(--muted);display:grid;place-items:center;font-size:clamp(18px,5.5vw,25px);font-weight:800;min-width:0;padding:0}.tile.active{background:transparent;border:3px solid #8a7b80}.tile:disabled{opacity:1;cursor:default}.tile.neutral{background:var(--muted)}.tile.absent,.count.absent,.legend .absent{background:var(--absent)}.tile.present,.count.present,.legend .present{background:var(--present)}.tile.correct,.count.correct,.legend .correct{background:var(--correct)}.submitted .tile,.submitted .count{animation:flip .45s ease both}.counts{display:grid;grid-column:span 3;grid-template-columns:repeat(3,1fr);gap:4px}.count{font-size:18px}.message{height:25px;font-size:13px;font-weight:700;display:grid;place-items:center}.keyboard{width:100%;margin-top:auto;display:grid;gap:5px}.keyrow{display:flex;justify-content:center;gap:4px}.keyrow button{height:clamp(38px,6.3dvh,52px);min-width:0;flex:1;max-width:50px;background:#51464a;border-radius:5px;font-weight:800;padding:0}.keyrow:nth-child(2){padding:0 4%}.keyrow:nth-child(3){padding:0 1%}.keyrow button.used{background:#40383b;color:#918488}.keyrow button.action{max-width:43px;background:#615458}.keyrow svg{width:19px;margin:auto}.keyrow.actions button{max-width:none;height:44px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;letter-spacing:.5px}.keyrow.actions button:nth-child(2){flex:1.6}.keyrow.actions button:last-child{background:#3aa394}footer{height:30px;font-size:12px;display:flex;align-items:end}footer button{background:transparent;text-decoration:underline}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#1f191bb8;z-index:5;padding:16px;display:grid;place-items:center;-webkit-user-select:text;user-select:text}.modal{position:relative;background:#75656b;border:1px solid rgba(255,255,255,.2);box-shadow:0 18px 60px #312a2c;width:min(100%,480px);max-height:90dvh;overflow:auto;border-radius:12px;padding:23px}.modal h2{text-align:center;margin:0 28px 22px;font-size:21px}.modal h3{text-align:center;font-size:12px;margin-top:24px}.close{position:absolute;right:10px;top:10px;width:40px;height:40px;background:transparent;display:grid;place-items:center}.copy{line-height:1.5}.copy p{margin:12px 0}.legend{display:flex;align-items:center;gap:7px;flex-wrap:wrap;background:#615458;padding:11px;border-radius:7px}.legend span{width:28px;height:28px;display:grid;place-items:center;border-radius:4px;font-weight:800}.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.statgrid div{text-align:center}.statgrid b{display:block;font-size:25px}.statgrid span{font-size:9px}.bars{display:grid;gap:5px}.bars div{display:flex;align-items:center;gap:7px;font-size:12px}.bars i{background:#3aa394;min-width:26px;padding:4px 7px;font-style:normal;text-align:right}.center{text-align:center;font-size:12px}.danger{display:block;margin:20px auto 0;background:#5a3338;border:1px solid #e4a2a7;border-radius:6px;padding:10px 15px}.result{text-align:center}.answer{font-size:32px;font-weight:900;letter-spacing:6px;color:#fff;background:#3aa394;padding:12px;border-radius:7px;margin:8px 0 20px}.primary{background:#3aa394;padding:12px 17px;border-radius:7px;font-weight:800;display:flex;gap:8px;align-items:center;margin:20px auto}.primary svg{width:18px}.month{display:flex;align-items:center;justify-content:space-between;text-transform:capitalize}.month button{width:40px;height:40px;background:#615458;border-radius:5px;font-size:26px}.week{font-size:9px;word-spacing:12px;text-align:center;margin:15px 0 6px}.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.calendar button,.calendar i{height:42px;border-radius:5px}.calendar button{background:#615458;position:relative}.calendar button.won{background:#3a8177}.calendar button.lost{background:#4a3b3e}.calendar button span{position:absolute;top:4px;left:5px;font-size:10px}.calendar button:disabled{opacity:.2}@keyframes flip{0%{transform:rotateY(0)}45%{transform:rotateY(90deg)}to{transform:rotateY(0)}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;scroll-behavior:auto!important}}@media (max-height:690px){header{height:42px}.meta{margin:3px}.board-row{height:34px}.message{height:17px}.keyboard{gap:3px}.keyrow button{height:37px}.keyrow.actions button{height:36px}footer{display:none}}@media (min-width:700px){.app{padding-top:18px}.board{margin-top:5px}.keyboard{margin-top:16px}.board-row{height:45px}}:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:700}body{font-weight:700}.brand{width:auto;height:44px;padding:0 10px;background:transparent}.brand h1{font-weight:900}.brand h1 span{font-weight:700}.tile{font-size:clamp(25px,7.5vw,34px);font-weight:900}.count{font-size:clamp(21px,6vw,27px);font-weight:900}.keyrow button{font-size:clamp(16px,4.8vw,20px);font-weight:900}.keyrow.actions button{font-size:14px;line-height:1}.keyrow.actions svg{width:18px;height:18px;margin:0;flex:none}.keyrow.actions span{display:block;line-height:18px}footer{font-size:14px;font-weight:800}.meta{font-weight:900}.board-row{position:relative}.board-row.invalid .tile.active{background:#9c454c;border-color:#d26a71;animation:invalid-pop .32s ease}.board-row.invalid:after{content:"";position:absolute;z-index:2;pointer-events:none;left:2%;top:50%;width:65%;height:5px;border-radius:9px;background:#f2d9d9;box-shadow:0 2px #312a2c66;animation:invalid-line .25s ease both}.submitted .count.correct{animation-name:reveal-correct}.submitted .count.present{animation-name:reveal-present}.submitted .count.absent{animation-name:reveal-absent}.submitted .count{animation-duration:.5s;animation-timing-function:ease;animation-fill-mode:both}.result h3{font-size:15px;margin:16px 0}.result-stats{margin:8px 0 28px}.result-stats b{font-size:30px}.result-stats span{font-size:10px;font-weight:900}.result-bars{margin:0 auto;width:min(100%,380px)}.result-bars i{background:var(--correct)}.bars .loss-bar i{background:#55484c}.bars .loss-bar b{font-size:13px}.solved-line{font-size:13px;opacity:.88;margin:20px 0 8px}.result-actions{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-top:12px}.result-actions p{margin:0;text-align:left;font-size:13px;font-weight:500}.result-actions p b{display:block;font-size:23px;letter-spacing:1px}.result-actions .primary{margin:0;min-height:52px}.modal:has(.result){background:var(--absent);width:min(100%,570px);padding:30px 42px}.copy-toast{position:fixed;z-index:20;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translate(-50%);min-width:230px;padding:14px 24px;border-radius:10px;background:#526f86;color:#fff;box-shadow:0 8px 25px #18232c66;font-size:15px;font-weight:800;text-align:center;animation:toast-in-out 2.6s ease both}.board.revealed .tile.correct{animation-name:reveal-correct}.board.revealed .tile.present{animation-name:reveal-present}.board.revealed .tile.absent{animation-name:reveal-absent}.board.revealed .tile{animation-duration:.5s;animation-timing-function:ease;animation-fill-mode:both}@keyframes reveal-correct{0%,49%{transform:rotateY(0);background:var(--muted);color:transparent}50%{transform:rotateY(90deg);background:var(--correct);color:#fff}to{transform:rotateY(0);background:var(--correct);color:#fff}}@keyframes reveal-present{0%,49%{transform:rotateY(0);background:var(--muted);color:transparent}50%{transform:rotateY(90deg);background:var(--present);color:#fff}to{transform:rotateY(0);background:var(--present);color:#fff}}@keyframes reveal-absent{0%,49%{transform:rotateY(0);background:var(--muted);color:transparent}50%{transform:rotateY(90deg);background:var(--absent);color:#fff}to{transform:rotateY(0);background:var(--absent);color:#fff}}@keyframes invalid-pop{50%{transform:translate(4px)}}@keyframes invalid-line{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes toast-in-out{0%{opacity:0;transform:translate(-50%,18px)}12%,82%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,12px)}}@media (min-width:700px) and (min-height:760px){.app{max-width:760px}.app header{width:630px;height:58px}.brand h1{font-size:27px}.mini{width:28px;font-size:10px;line-height:13px}.meta{font-size:13px;margin:10px 0 8px}.board{width:510px;gap:6px}.board-row{height:59px;gap:6px}.counts{gap:6px}.tile{font-size:36px}.count{font-size:29px}.message{height:30px}.keyboard{width:630px;gap:6px;margin-top:20px}.keyrow{gap:6px}.keyrow button{height:61px;max-width:60px;font-size:21px}.keyrow button.action{max-width:52px}.keyrow.actions button{height:52px;font-size:15px}footer{height:36px}}@media (max-width:480px){.modal:has(.result){padding:25px 18px}.result-actions{align-items:stretch;flex-direction:column}.result-actions p{text-align:center;width:100%}.result-actions .primary{margin:auto}}.hint-warning{text-align:center;line-height:1.55}.hint-warning p{margin:12px 0}.hint-warning strong{color:#ff3045;font-weight:900;text-shadow:0 1px 0 rgba(0,0,0,.2)}.hint-warning>div{display:flex;gap:10px;margin-top:24px}.hint-warning button{flex:1;min-height:48px;border-radius:7px;background:#615458;font-size:13px;font-weight:900}.hint-warning .confirm-hint{background:#526f86}.credits{border-top:1px solid rgba(255,255,255,.2);margin-top:20px;padding-top:8px;font-size:12px;text-align:center}.credits p{margin:8px 0}.credits a{color:#fff3bd;font-weight:900;text-decoration:underline;text-underline-offset:2px}.bars div>b{width:24px;min-width:24px;height:24px;display:grid;place-items:center;text-align:center;line-height:1}.bars .loss-bar b{font-size:12px}header button.active-mode{background:#ffffff1f}.play-more{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;gap:12px}.play-more span{font-size:14px}.play-more button{min-height:44px;padding:9px 14px;border-radius:7px;background:var(--correct);display:flex;align-items:center;gap:7px;font-size:12px;font-weight:900}.play-more svg{width:20px}
