body{
    font-family:Arial, Helvetica, sans-serif;
    background-color:var(--page-bg);
    color:var(--page-text);
    margin:0;
    min-width:320px;
}
:root{
    --page-bg:#fff;
    --page-text:#111;
    --panel-bg:rgba(150,150,150,.99);
    --border:#222;
    --muted:#555;
}
@media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
        --page-bg:#171717;
        --page-text:#f2f2f2;
        --panel-bg:rgba(48,48,48,.99);
        --border:#ddd;
        --muted:#bbb;
    }
}
html[data-theme="dark"]{
    --page-bg:#171717;
    --page-text:#f2f2f2;
    --panel-bg:rgba(48,48,48,.99);
    --border:#ddd;
    --muted:#bbb;
}
html[data-theme="light"]{
    --page-bg:#fff;
    --page-text:#111;
    --panel-bg:rgba(150,150,150,.99);
    --border:#222;
    --muted:#555;
}
#entiregame{
    text-align:center;
    width:min(100%, 760px);
    height:700px;
    margin:12px auto 0;
    padding:0 16px 24px;
    box-sizing:border-box;
    overflow:visible;
}
#game-header{
    text-align:center;
    padding:12px 44px 8px;
    border:1px solid var(--border);
    border-radius:10px 10px 0 0;
}
#game-header h1{
    margin:0;
    font-size:clamp(24px, 4vw, 34px);
}
#today-date{
    display:block;
    margin-top:4px;
    font-size:clamp(14px, 2vw, 18px);
    color:var(--muted);
}
#game-frame{
    position:relative;
    border:1px solid var(--border);
    border-top:0;
    border-radius:0 0 10px 10px;
    padding:0 10px 16px;
}
#game-toolbar{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:40px;
}
#numbers{
    width:275px;
    height:176px;
    margin:auto auto 5vw;
    position:relative;
}
#tab1,#tab2,#tab3,#tab4,#tab5{
    height:40px;
    width:20%;
    margin:0px;
    padding:0px;
    border-top:1px solid;
    border:.5px solid black;
    background-color:rgb(189, 189, 189);
}
.currenttab{
    border-bottom: unset !important;
    background-color:white !important;
}

#nav{
    
    font-size: 0;
    
}
#startotaldisplay{
    position:absolute;
    left:0;
    right:0;
    text-align:center;
    pointer-events:none;
}
#startotal{
    font-weight:bold;
    font-size:19px;
}

#history-desktop{
    font-size:20px;
    margin:0px;
    text-align:center;
    padding:0px;
    display:flex;
    justify-content: center;
}
#game-status-desktop{
    height:170px;
    box-sizing:border-box;
    overflow:hidden;
}
#history, #solution{
    text-align:center;
    font: size 20px;
    margin:0px 10px;
}
#solution{
    color:rgb(55, 162, 55);
    font-weight:bold;
}
#solutions{
    display: flex;
    justify-content: center;
    height:45px;
    margin-top:-10px;
    
    
}
#target{
    text-align:center;
    -webkit-user-select:noneuser-select:none;
    font:56px Arial
}
.puzzle-target{
    display:block;
    width:100%;
    text-align:center;
    font-size:12px;
    line-height:1.1;
    font-weight:bold;
    color:var(--page-text);
    margin-bottom:4px;
}
#history{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    height:142px;
    overflow:hidden;
}
#history .completed-op{
    display:block;
    width:25ch;
    box-sizing:border-box;
    white-space:pre;
    text-align:center;
    border-bottom:1.5px solid currentColor;
    padding-bottom:2px;
}
.short-bounce{animation:.3s ease-in bounce}.long-bounce{animation:.3s ease-in 2 bounce}.invalid-shake{animation:.2s ease-in 1.5 shake}.flicker{animation:.5s step-start 2 flicker}.pulse{animation:.4s linear pulse}@keyframes flicker{50%{color:var(--digits-light-green)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes pulse{0%{transform:scale(1)}20%{transform:scale(1.2)}to{transform:scale(1)}}
:root{
    --number-size:86px;
    --number-radius:calc(var(--number-size)/2);
}
.blank{
    border:0px solid black !important;
    background-color:white;
}

.hiddenstar{
    display:none;
}

#instructions{
    font-size:14px;
    line-height:1.3;
}

.title{
    font-weight:bold;
    font-size:18px;
}
.star-settings{
    font-size:10px;
    fill:#fecb3e;
    display:inline-flex;
    align-items:center;
    width:72px;
    min-width:72px;
}
.star-line{
    display:flex;
    align-items:center;
    gap:6px;
    text-align:left;
    padding-left:0;
}
.star-explanation{
    flex:1;
    text-align:left;
}
#info{
    padding:15px;
    font-size:14px;
    line-height:1.3;
    text-align:center;
    display:none;
    width:min(240px, calc(100vw - 36px));
    box-sizing:border-box;
    max-height:calc(100vh - 56px);
    overflow-y:auto;
    position:absolute;
    top:40px;
    left:50%;
    transform:translate(-50%, -0%);
    margin: 0 auto;
    background-color:var(--panel-bg);
    border-radius:20px;
    z-index:1000;
}
#info.instruction-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:none;
    height:100%;
    max-height:none;
    padding:20px;
    box-sizing:border-box;
    overflow-y:auto;
    transform:none;
    margin:0;
    background:rgba(0,0,0,.68);
    border-radius:0;
}
#info.instruction-modal .instruction-card{
    width:min(460px, 100%);
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    padding:24px;
    box-sizing:border-box;
    color:var(--page-text);
    background:var(--panel-bg);
    border:1px solid var(--border);
    border-radius:22px;
    box-shadow:0 18px 60px rgba(0,0,0,.35);
    text-align:left;
}
.instruction-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}
.instruction-header h2{
    margin:4px 0 0;
    font-size:clamp(24px, 5vw, 32px);
}
.instruction-kicker{
    font-size:12px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.08em;
}
#instruction-close{
    border:0;
    padding:0 2px;
    background:transparent;
    color:var(--page-text);
    font-size:32px;
    line-height:1;
    cursor:pointer;
}
.instruction-progress{
    margin:18px 0 12px;
    color:var(--muted);
    font-size:13px;
    font-weight:bold;
}
.instruction-step{
    display:none;
    min-height:170px;
}
.instruction-step.is-active{
    display:block;
}
.instruction-number{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    margin-bottom:16px;
    border-radius:50%;
    background:var(--page-text);
    color:var(--page-bg);
    font-size:20px;
    font-weight:bold;
}
.instruction-step h3{
    margin:0 0 10px;
    font-size:22px;
}
.instruction-step p{
    margin:0;
    color:var(--page-text);
    font-size:16px;
    line-height:1.55;
}
.instruction-actions{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:22px;
}
.instruction-actions button{
    min-width:110px;
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px 16px;
    background:var(--page-bg);
    color:var(--page-text);
    font:inherit;
    font-weight:bold;
    cursor:pointer;
}
.instruction-actions button:last-child{
    background:var(--page-text);
    color:var(--page-bg);
}
.instruction-actions button:disabled{
    opacity:.4;
    cursor:not-allowed;
}
#instructions-close,#settings-close,#number-close{
    border:0px;
    
    background-color:var(--panel-bg);
    font-size:20px;
}
#num-button{
    border:0px;
    border-radius:50%;
    height:28px;
    width:28px;
    padding-top:4px;
    background-color: black;
    font-size:14px;
    font-weight:bold;
    fill:white;
    -webkit-appearance: none;
    -webkit-padding-start:0px;
    -webkit-padding-end:0px;
}
.oplabel{
    font-weight:bold;
    color:rgb(111, 111, 111)
}
.opbox{
    width:120px;
    text-align:center;
    margin-left:10px;
    border:1px solid grey;
    border-radius:7px;
    padding:3px;
}
#numberbox{
    border-radius:15px;
    padding-left:10px;
    font-size:13px;
    display:none;
}
#solutionbox{
    display:flex;
    
}
#settings{
    padding:15px;
    font-size:14px;
    line-height:1.3;
    text-align:center;
    display:none;
    width:min(240px, calc(100vw - 36px));
    box-sizing:border-box;
    max-height:calc(100vh - 56px);
    overflow-y:auto;
    position:absolute;
    top:40px;
    left:50%;
    transform:translate(-50%, -0%);
    margin: 0 auto;
    background-color:var(--panel-bg);
    border-radius:20px;
    z-index:1000;
}

#sharebox{
    padding:15px;
    font-size:14px;
    line-height:1.3;
    text-align:center;
    display:none;
    width:min(240px, calc(100vw - 36px));
    box-sizing:border-box;
    max-height:calc(100vh - 56px);
    overflow-y:auto;
    position:absolute;
    top:40px;
    left:50%;
    transform:translate(-50%, -0%);
    margin: 0 auto;
    background-color:var(--panel-bg);
    border-radius:20px;
    z-index:1000;
}
#game-tools{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:8px;
    margin-left:auto;
    min-height:34px;
}
#info-button,#settings-button{
    position:static;
    width:30px;
    font-size:20px;
    border:0px solid black;
    color:var(--page-text);
}
#info-button{order:1}
#settings-button{order:2}
#game-tools svg,#info-button svg,#settings-button svg{
    fill:currentColor;
}
#instruction-stars{
    text-align:left !important;
    padding-left:30px;
}
.bulges{
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: .7s;
    -moz-transition-property: -moz-transform background-color;
    -moz-transition-duration: .7s;
    -webkit-animation-name: grow;
    -webkit-animation-duration: .7s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: grow;
    -moz-animation-duration: .7s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
}
.bulgestars{
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: .7s;
    -moz-transition-property: -moz-transform background-color;
    -moz-transition-duration: .7s;
    -webkit-animation-name: growstar;
    -webkit-animation-duration: .7s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: growstar;
    -moz-animation-duration: .7s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
}

@-webkit-keyframes grow {
    0% { transform: scale(1); background-color: rgb(55, 162, 55); border:0px dashed #000;}
    50% { transform: scale(1.1); background-color: rgb(55, 162, 55);}
    100% { transform: scale(1); background-color: white; }
}

@-webkit-keyframes growstar {
    0% { transform: scale(1); }
    50% { transform: scale(1.5);}
    100% { transform: scale(1);  }
}

.active{
    background-color:rgb(55, 162, 55) !important;
    border:0px solid black !important;
    color:white;
    z-index:900;
}

#minsolbutton, #minsolbutton {
    border:0px solid;
    background-color:white;
    margin-bottom:-25px;
    }

.solved{
    color:rgb(55, 162, 55) !important;
    border:5px solid rgb(55, 162, 55) !important;
    background-color:white !important;
}
.filled{
    fill:#fecb3e;
    
}

.empty{
    fill: rgb(166, 165, 165)
}
#operations{
    text-align:center;
    
}
.operation,#undo{
    text-align:center;
    padding-top:6px;
    height:50px;
    width:50px;
    font-size:22px;
    font-weight:bold;
    background-color:black;
    fill:white;
    border:solid black 5px;
    -webkit-appearance: none;
    -webkit-padding-start:0px;
    -webkit-padding-end:0px;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
    border-radius:50%;
    justify-content:center;
    align-items:center;
}


#number-pos-0{top:0;left:0;transition-duration: .5s;transition-property:transform}
#number-pos-1{top:0;left:calc(50% - var(--number-radius));transition-duration: .5s;transition-property:transform}
#number-pos-2{top:0;left:calc(100% - var(--number-size));transition-duration: .5s;transition-property:transform}
#number-pos-3{top:calc(100% - var(--number-size));left:0;transition-duration: .5s;transition-property:transform}
#number-pos-4{top:calc(100% - var(--number-size));left:calc(50% - var(--number-radius));transition-duration: .5s;transition-property:transform}
#number-pos-5{top:calc(100% - var(--number-size));left:calc(100% - var(--number-size));transition-duration: .5s;transition-property:transform}

.fast{transition-duration: 0s !important;transition-property:transform }


.number{
    text-align:center;
    color:black;
    background-color: white;
    width:80px; 
    height:80px;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
    border:3px dashed #000;
    border-radius:50%;
    justify-content:center;
    align-items:center;
    padding:10px;
    font-size:32px;
    display:flex;
    position:absolute;
    font-weight:bold;
}
    
.number a{color:
    #000;text-decoration:none}.number.active a{color:
    #000}

    @media only screen and (max-width: 400px) {
    #startotal{
        font-size:16px;
    }
    #startotaldisplay{
        font-size:12px;
        padding-bottom:5px;
    }

    #history-desktop{
        font-size:16px;
    }
}

.solutions-page{
    display:flex;
    justify-content:center;
    min-height:100vh;
}
#solutions-app{
    width:min(100%, 760px);
    padding:0 16px 24px;
    box-sizing:border-box;
}
#solutions-app h2{
    text-align:center;
}
#puzzleList{
    padding:0;
    list-style:none;
}
#puzzleList li{
    margin:12px auto;
    padding:12px;
    max-width:620px;
    border:1px solid #ddd;
    border-radius:10px;
}
#puzzleList h3,#puzzleList h4,#puzzleList p{
    margin:6px 0;
}
@media (max-width:600px){
    #entiregame{height:700px}
    #entiregame,#solutions-app{padding-left:8px;padding-right:8px}
    #game-header{display:flex;align-items:center;justify-content:space-between;padding:8px 10px}
    #game-header h1{font-size:20px}
    #today-date{font-size:13px;margin-top:0}
    #numbers{margin-bottom:28px}
    .operation,#undo{width:44px;height:44px;font-size:18px}
    .number{width:68px;height:68px;font-size:26px}
    :root{--number-size:72px;--number-radius:36px}
    #history-desktop{font-size:16px}
    #game-status-desktop{height:150px}
    #history{height:124px}
}

@media (min-width:601px){
    #game-tools{margin-right:-4px}
}

html[data-theme="dark"] #tab1,html[data-theme="dark"] #tab2,html[data-theme="dark"] #tab3,html[data-theme="dark"] #tab4,html[data-theme="dark"] #tab5{
    background-color:#3b3b3b;
    border-color:#aaa;
    color:#f2f2f2;
}
html[data-theme="dark"] .currenttab,
html[data-theme="dark"] .blank,
html[data-theme="dark"] .number,
html[data-theme="dark"] #minsolbutton,
html[data-theme="dark"] .solved{
    background-color:#171717 !important;
    color:#f2f2f2;
}
html[data-theme="dark"] .number,
html[data-theme="dark"] .operation,
html[data-theme="dark"] #undo{
    border-color:#ddd;
}
html[data-theme="dark"] .number.active{
    background-color:rgb(55, 162, 55) !important;
    border-color:rgb(55, 162, 55) !important;
    color:#fff !important;
}
html[data-theme="dark"] #instructions-close,
html[data-theme="dark"] #settings-close,
html[data-theme="dark"] #number-close,
html[data-theme="dark"] #share-close{
    background-color:var(--panel-bg);
    color:var(--page-text);
}