*{margin:0;padding:0;outline:none;border:none}ol,ul,menu{list-style:none outside none}table{border-collapse:collapse;border-spacing:0}h1,h2,h3,h4,h5,h6{font-weight:300}p{padding-bottom:16px}strong,b{font-weight:900}input,textarea,select{outline:none;-webkit-appearance:none}button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{border:none}input::-ms-clear{display:none !important}a,.link{outline:none;color:#fff;text-decoration:none}html{-webkit-text-size-adjust:none}body{font-family:'Open Sans',sans-serif;font-size:1em;color:#fff;line-height:normal;font-weight:300;min-width:320px;background:url("../img/background/BG_Grid_BG.svg") repeat 0 0 scroll transparent;background-size:cover}html,body{width:100%;height:100%;overflow:hidden}.container{width:100%;height:100%;top:0;left:0;overflow:hidden}.hidden{display:none}.table-box{width:100%;height:100%;display:table}.table-box .table-cell{display:table-cell;vertical-align:middle}#audio_pl{position:absolute;z-index:10;display:none}.mask,.mask2{z-index:10;position:absolute;top:0;left:0;width:100%;height:100%;background:black;opacity:0;display:none}.dropdown{z-index:11;position:absolute;top:15%;right:0;padding:15px 10px;width:280px;-webkit-border-radius:20px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-moz-border-radius:20px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;border-radius:20px;border-top-right-radius:0;border-bottom-right-radius:0;text-align:center;display:none;overflow:hidden}.dropdown .table-box{position:relative;z-index:1;width:280px}.dropdown .circle-dr{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;background:#fff;overflow:hidden;opacity:.85}.dropdown .text{color:#333;display:block;font-size:180%}.dropdown .butt-d{display:inline-block;padding:10px;cursor:pointer}#sciencewiz .text{padding:5px;line-height:160%;font-size:70%}#sciencewiz .text sup{font-size:50%}#copyrightdr .text{padding:5px 5px 12px;line-height:160%;font-size:14px;text-align:left}#question .text{padding:5px 5px 12px;line-height:160%;font-size:14px;text-align:left}#restart-confirm .text{color:#f00;display:block;font-size:14px;text-shadow:0 0 1px #fff}.loaded .mask{opacity:.4}.header{position:absolute;top:0;left:0;width:99%;padding:0 0 0 1%;height:7%;opacity:0;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-ms-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s;color:#fff;font-size:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.header .title{position:absolute;top:0;left:1%;display:block;padding:0 0 0 0;margin:0 0 0 0;font-weight:600;text-indent:-99999px;height:100%;width:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.header .title a{position:relative;z-index:1;float:left}.header .title a img{margin:2px 0 0 0;display:block;width:120px;height:auto}.header .dropdown-menu{position:absolute;top:100%;right:0;width:100%;height:1px;background:transparent}.header .right-part{position:relative;float:right;height:100%;width:100%}.header .butt{float:right;height:100%;width:15px;cursor:pointer;color:#fff;text-align:center;line-height:100%;overflow:hidden;position:relative;z-index:1;font-size:25px}.header .butt.logo{width:auto !important}.header .butt.logo img{height:70%;width:auto;position:relative;top:15%}.header .butt.arrows{background:url("../img/arrows_1.svg") no-repeat center scroll transparent;background-size:auto 40%}.header .butt.restart{background:url("../img/restart_2(1).svg") no-repeat 50% 44% scroll transparent;background-size:auto 44%}.loaded .header{opacity:1}.pos-portrait .header{height:8%}.tablet .pos-portrait .header{font-size:150%}.mobile .pos-landscape .header{font-size:50%}.playing-field{position:absolute;opacity:0;-webkit-border-radius:5%;-moz-border-radius:5%;border-radius:5%;left:1%;top:7%;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-ms-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s;z-index:-1}.playing-field .background-board,.playing-field .ba{display:none;position:absolute;top:0;left:0;width:115%;height:101.2%;background:url("../img/BOARD_000.svg") no-repeat 0 0 scroll transparent;background-size:auto 100%}.playing-field .background-board.active,.playing-field .ba.active{display:block}.playing-field .ba1{background-image:url("../img/background/BOARD_000a.svg")}.playing-field .ba2{background-image:url("../img/background/BOARD_000b.svg")}.playing-field .ba3{background-image:url("../img/background/BOARD_000c.svg")}.playing-field .background-board{display:block}.playing-field .container{background-color:transparent;overflow:visible;left:auto;top:auto;position:static;float:left}.playing-field .row{float:left;clear:left}.playing-field .row .cell{position:relative;float:left}.playing-field .row .circle{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%}.playing-field .bookmark{position:absolute;width:20%;height:15.375%;left:100%;margin:-9% 0 0 -9%;top:100%;background-size:auto 100%;color:#1a1a18;font-size:70%;line-height:130%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:-1;text-align:center}.playing-field .bookmark .text{padding:0;display:block;font-family:"Times New Roman",serif;font-weight:bold;font-size:110%}.playing-field .bookmark .bool{position:absolute;bottom:1%;left:0;width:95%;text-align:center}.playing-field .bookmark .bool .bl{display:inline-block;width:7px;height:7px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;background:transparent;border:1px solid #4182dd}.playing-field .bookmark .bool .bl.ac{background:#4182dd}.playing-field .bookmark.active{z-index:0}.playing-field.dropped{background:#427fd3}#tutorial{color:#418e1b}#beginner{color:#194684}#student{color:#b6019a}#advanced{color:#ab7501}.loaded .playing-field,.loaded .playing-field2{opacity:1}.pos-portrait .playing-field{top:8%}.background-details{position:absolute;opacity:0;background:url("../img/background/BG_Grid_Small.svg") no-repeat 0 0 scroll transparent;background-size:auto 100%;z-index:-1;pointer-events:none;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-ms-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.background-details.horizontal{background-image:url("../img/background/BG_Grid_Large.svg")}.figures-box{width:100%;height:100%;opacity:0;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-ms-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.figure{position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:opacity .08s linear;-moz-transition:opacity .08s linear;-ms-transition:opacity .08s linear;-o-transition:opacity .08s linear;transition:opacity .08s linear;opacity:0}.figure .center-active{position:absolute;width:1px;height:1px;margin:-1px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;opacity:1;background:#fff}#paper{position:absolute;top:0;left:0;width:100%;height:100%}#paper path{z-index:10}.loaded .figures-box{opacity:1}.loaded .figures-box .figure{opacity:1}.loaded .background-details{opacity:1}.arrow-svg{z-index:5;position:absolute;top:50%;left:50%;width:100px;height:100px;margin:0;background:url("../img/rotate/rotate_2_2.svg") no-repeat center;background-size:70%;pointer-events:none;opacity:0}.loaded .arrow-svg{opacity:1}


/* Hidden by default */
#rotate-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(0,0,0,0.9);
  color: #fff;
  z-index: 100000;
  padding: 24px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

#rotate-overlay .rotate-image img {
  max-width: 526px;   /* adjust size as you like */
  height: auto;
  margin-bottom: 20px;
}

#rotate-overlay .rotate-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

#rotate-overlay .rotate-text {
  font-size: 16px;
  line-height: 1.4;
}

/* Show overlay ONLY when device.js says: iOS + portrait */
html.ios.portrait #rotate-overlay {
  display: flex;
}

/* Optional: stop scrolling behind overlay */
html.ios.portrait body {
  overflow: hidden;
}

/* end of original css coding */

#cc-chooser-root { top: 50%; left: 50%; right: auto; transform: translate(-50%,-50%); }



/* Thumbnail container: the box that defines the size */
.cc-thumb,
.puzzle-thumb {
  /* pick the thumbnail size you want */
  width: 128px;
  height: 128px;          /* fixed square; or use aspect-ratio below */
  /* alternative: use aspect-ratio instead of fixed height
  width: 100%;
  aspect-ratio: 1 / 1;
  */
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
}

/* Anything inside the thumb can NEVER exceed the box */
.cc-thumb > img,
.cc-thumb > svg,
.puzzle-thumb > img,
.puzzle-thumb > svg {
  max-width: 100% !important;
  max-height: 100% !important;
  width: 100% !important;     /* lets object-fit work for <img> */
  height: auto !important;
  display: block;
  object-fit: contain;        /* applies to <img>; inline <svg> ignores this */
}

#puzzle-card { pointer-events: none !important; } /* card image shouldn’t eat clicks */
#bk-shield { display: none !important; }         /* no invisible blocker */




/* Make the 9×9 board the anchor for the overlay */ 
.playing-field .container { position: relative !important; }

/* ✅ Universal puzzle art scaling */
.puzzle-svg,
.puzzle-card svg,
.puzzle-card img {
  width: 100% !important;
  height: auto !important;
  display: block;
  object-fit: contain;
}

/* Inline <svg> sometimes ships with width/height attributes—neutralize them */
.puzzle-svg[width],
.puzzle-svg[height] {
  width: 100% !important;
  height: auto !important;
}


/* Keep the box fixed */
#puzzle-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;     /* important to avoid visual spill */
}

.playing-field .container #puzzle-card { object-position: calc(50% + 7px) 50%; }

/* Pieces visible, above the puzzle image */
#paper { display:block !important; position:absolute !important; inset:0 !important; z-index:3 !important; }

/* Your puzzle art below the pieces, with the working nudge */
#puzzle-card {
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  object-fit:contain !important; object-position:calc(50% + 7px) calc(50% - 5px) !important;
  pointer-events:none !important; z-index:2 !important;
}

/* Richer blue only while the reward animation runs 
html.reward-blue .playing-field .ba,
html.reward-blue .playing-field .background-board {
  filter: hue-rotate(-28deg) saturate(165%) brightness(0.92) contrast(1.05);
}*/

/* If you want it even stronger, use this instead of the rule above: 
html.reward-blue .playing-field .ba,
html.reward-blue .playing-field .background-board {
  filter: hue-rotate(-40deg) saturate(190%) brightness(0.88) contrast(1.08);
}*/

/* Optional “glaze” pass (keeps the look consistent across assets) */
/*html.reward-blue .playing-field .ba::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(25, 70, 200, 0.35); 
  mix-blend-mode: color;               
  pointer-events: none;
}*/

/*html.reward-blue .playing-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #1A5CFF;  
  opacity: 0.25;        
  mix-blend-mode: multiply;
  pointer-events: none;
} */

/* Reward dancer overlay */
.reward-dancer{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  display:none;
  pointer-events:none;
  z-index:2;          /* background .ba < 0, puzzle art 2, pieces (#paper) 3 */
}

/* If any global blue tint overlay exists during reward, disable it */
html.reward-blue .overlay-tint,
html.reward-blue .tint,
html.reward-blue .reward-tint,
html.reward-blue .color-wash,
html.reward-blue .filter-wash {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}