/* Colour & Learn Studio — authored tropical art-studio theme. */
#s-word-game[data-game="colour-studio"]{
  background:linear-gradient(#fff8dc,#eaf8d9);
  --studio-gold:#ffb300;
  --studio-navy:#073f82;
  --studio-cream:#fffaf0;
}
#s-word-game[data-game="colour-studio"] .word-game-shell{max-width:1500px}
#s-word-game[data-game="colour-studio"] .word-mini-album{display:none}
#s-word-game[data-game="colour-studio"] .word-game-top{align-items:center;margin-bottom:7px}
#s-word-game[data-game="colour-studio"] .word-game-top h1{color:#083f7a;text-shadow:0 2px #fff}
#s-word-game[data-game="colour-studio"] .word-hud-btn{
  min-width:58px;min-height:58px;padding:3px;border:0;background:transparent;box-shadow:none;
  touch-action:manipulation;cursor:pointer;
}
#s-word-game[data-game="colour-studio"] .word-hud-btn img{display:block;width:56px;height:56px;object-fit:contain;margin:auto}
#s-word-game[data-game="colour-studio"] #wordGameBack{display:flex;align-items:center;gap:3px;min-width:104px}
#s-word-game[data-game="colour-studio"] #wordGameBack span{font-weight:1000;font-size:18px;color:#073f82}
#s-word-game[data-game="colour-studio"] .word-round-progress>span{width:32px;height:32px}
#s-word-game[data-game="colour-studio"] .word-round-progress>span img{width:100%;height:100%;object-fit:contain}
#s-word-game[data-game="colour-studio"] .word-round-progress>i{height:15px;background:#fff3cb;border:2px solid #eec15b}
#s-word-game[data-game="colour-studio"] .word-round-progress b{background:linear-gradient(90deg,#ffd22c,#ff8a00)}
#s-word-game[data-game="colour-studio"] .word-instruction{
  max-width:760px;min-height:76px;margin-bottom:8px;padding:8px 22px;border:4px solid #ffb300;
  border-radius:27px;background:linear-gradient(#fffdf8,#fff2d5);box-shadow:0 5px 0 #c57e00,0 9px 18px #6b431f35;
}
#s-word-game[data-game="colour-studio"] .word-instruction>button{
  width:55px;height:55px;padding:0;border:0;background:transparent;box-shadow:none;touch-action:manipulation;
}
#s-word-game[data-game="colour-studio"] .word-instruction>button img{width:100%;height:100%;object-fit:contain}
#s-word-game[data-game="colour-studio"] .word-instruction small{color:#a45c00}
#s-word-game[data-game="colour-studio"] .word-game-stage{
  min-height:600px;padding:12px 18px 15px;border:5px solid #ffe8ad;border-radius:32px;
  background-image:linear-gradient(#ffffff0c,#083b5610),url('../assets/img/word-world/colour-studio/studio-background.webp');
  background-size:cover;background-position:center;box-shadow:0 0 0 2px #d79b3b,0 10px 22px #3e5b4538;overflow:hidden;
}
.word-colour-scene.authored{
  position:relative;min-height:565px;padding:0 10px 58px 165px;display:flex;align-items:center;justify-content:center;
  touch-action:manipulation;
}
.word-colour-board{width:100%;max-width:930px;min-width:0;display:grid;grid-template-columns:minmax(430px,1fr) 250px;align-items:center;justify-content:center;gap:28px}
.word-colour-guide{position:absolute;left:5px;bottom:56px;width:205px;height:300px;z-index:5;pointer-events:none}
.word-colour-guide>img{position:absolute;left:0;bottom:0;width:185px;height:220px;object-fit:contain;filter:drop-shadow(0 7px 5px #263b4935)}
.word-colour-bubble{position:absolute;left:62px;top:0;width:150px;min-height:86px;display:grid;place-items:center;padding:15px 12px 20px;text-align:center;font-weight:1000;line-height:1.08;color:#164d7a;background:url('../assets/img/word-world/colour-studio/speech-bubble.png') center/100% 100% no-repeat}
.word-colour-scene.authored[data-level="4"] .word-colour-bubble{left:-18px;top:-8px}
.word-colour-easel{position:relative;width:min(505px,100%);height:555px;margin:auto}
.word-colour-easel-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 8px 5px #50341f35)}
.word-colour-canvas{
  position:absolute;left:14%;top:18%;width:72%;height:55%;aspect-ratio:auto;display:grid;place-items:center;
  padding:8px;border:0;border-radius:15px;background:transparent;box-shadow:none;z-index:2;overflow:visible;
}
.word-colour-line-art,.word-colour-thumbnail{position:relative;width:100%;height:100%;isolation:isolate}
.word-colour-fill{position:absolute;inset:0;z-index:1;display:block;background:var(--paint,#fffdf8);pointer-events:none}
.word-colour-fill.base{-webkit-mask:var(--base-mask) center/contain no-repeat;mask:var(--base-mask) center/contain no-repeat}
.word-colour-fill.accent{-webkit-mask:var(--accent-mask) center/contain no-repeat;mask:var(--accent-mask) center/contain no-repeat}
.word-colour-line-source{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:2}
.word-colour-hit{position:absolute;inset:0;z-index:3;min-width:44px;min-height:44px;border:0;background:transparent;cursor:pointer;touch-action:manipulation;border-radius:18px}
.word-colour-hit:hover{background:transparent}
.word-colour-hit.hinted{animation:studioHint 1s ease-in-out infinite;box-shadow:inset 0 0 0 7px #ffd51f,0 0 18px #fff347}
.word-colour-line-art.duo{display:flex;align-items:flex-end;justify-content:center;gap:2%;padding:2% 0 10%}
.word-colour-car{position:relative;flex:0 0 auto}.word-colour-car.small{width:40%;height:76%}.word-colour-car.big{width:58%;height:96%}
.word-colour-car .word-colour-fill,.word-colour-car .word-colour-line-source,.word-colour-car .word-colour-hit{position:absolute;inset:0}
.word-colour-audio{
  position:absolute;left:50%;bottom:18px;translate:-50% 0;width:66px;height:66px;min-height:44px;padding:0;border:0;background:transparent;z-index:4;cursor:pointer;touch-action:manipulation;
}
.word-colour-audio img{width:100%;height:100%;object-fit:contain}
.word-colour-palette{
  position:relative;width:250px;height:430px;align-self:center;padding:22px 14px;
  border:4px solid #efbd62;border-radius:25px;background:linear-gradient(145deg,#fffdf6,#fff4dc);
  box-shadow:inset 0 0 0 3px #fff,0 7px 0 #ad6b18,0 10px 18px #50341f30;
}
.word-colour-palette .word-palette{width:100%;height:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));align-items:center;justify-items:center;gap:4px 6px}
.word-colour-palette .word-palette button{
  position:relative;width:102px;height:116px;min-width:102px;min-height:116px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;display:grid;place-items:center;touch-action:manipulation;
}
.word-colour-well{display:block;width:108px;height:108px;max-width:none;object-fit:contain;filter:drop-shadow(0 3px 2px #13254432)}
.word-colour-selection{display:none}
.word-colour-palette .word-palette button>b{display:none}
.word-colour-palette .word-palette button.selected{transform:scale(1.08);filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 9px var(--swatch))}
.word-colour-palette .word-palette button.selected::after,.word-colour-palette .word-palette button.hinted::after{content:"";position:absolute;inset:5px;border:5px solid #fff;border-radius:50%;box-shadow:0 0 0 3px #ffcf35,0 0 15px #fff447;pointer-events:none}
.word-colour-palette .word-palette button.hinted{animation:studioHint .8s ease-in-out infinite}
.word-colour-status{
  position:absolute;left:50%;bottom:4px;translate:-50% 0;width:min(520px,54%);min-height:48px;margin:0;padding:11px 20px;
  display:grid;place-items:center;border:3px solid #ffb300;border-radius:20px;background:linear-gradient(#fffdf8,#fff0cc);box-shadow:0 4px 0 #b96e00;color:#164d7a;font-weight:1000;text-align:center;z-index:6;
}
.word-colour-gallery,.word-colour-hint{
  position:absolute;bottom:1px;min-height:54px;border:0;background:transparent;display:flex;align-items:center;gap:4px;padding:0 8px;font-weight:1000;font-size:14px;color:#073f82;cursor:pointer;touch-action:manipulation;z-index:6;
}
.word-colour-gallery{left:4px}.word-colour-hint{right:5px}
.word-colour-gallery img,.word-colour-hint img{width:54px;height:54px;object-fit:contain}
.word-colour-thumbnail{width:105px;height:92px;margin:auto}
.word-colour-thumbnail.reward{width:145px;height:125px;flex:0 0 auto}
.word-album-card>.word-colour-thumbnail{position:relative;z-index:1;width:115px;height:105px}
#wordReward[data-game="colour-studio"] .word-reward-card{background:linear-gradient(#fffdf2,#fff0bf);border-color:#ffdb62;box-shadow:0 14px 0 #b77b12,0 0 36px #ffd43c88}
#wordReward[data-game="colour-studio"] .word-reward-icon img{width:100px;height:100px;object-fit:contain}
#wordReward[data-game="colour-studio"] .word-reward-item{background:#fffdf7;border-color:#ffbc31}
@keyframes studioHint{50%{filter:drop-shadow(0 0 9px #fff) drop-shadow(0 0 10px #ffd20a);transform:scale(1.05)}}

@media(max-width:1000px){
  #s-word-game[data-game="colour-studio"] .word-game-shell{width:100%;min-width:0}
  #s-word-game[data-game="colour-studio"] .word-game-top{width:100%;min-width:0;grid-template-columns:76px minmax(0,1fr) 180px}
  #s-word-game[data-game="colour-studio"] .word-game-top>div{min-width:0}
  #s-word-game[data-game="colour-studio"] .word-game-top h1{font-size:31px;white-space:normal;overflow-wrap:anywhere}
  #s-word-game[data-game="colour-studio"] #wordGameBack{min-width:68px}
  #s-word-game[data-game="colour-studio"] #wordGameBack span{display:none}
  #s-word-game[data-game="colour-studio"] .word-game-tools{justify-content:flex-end;gap:4px}
  #s-word-game[data-game="colour-studio"] .word-hud-btn{width:56px;min-width:56px}
  .word-colour-scene.authored{padding-left:130px;padding-right:72px}
  .word-colour-board{grid-template-columns:minmax(380px,1fr) 220px;gap:12px}
  .word-colour-guide{left:-10px;transform:scale(.82);transform-origin:left bottom}
  .word-colour-easel{height:510px}
  .word-colour-palette{width:220px;height:390px;padding:18px 10px}
  .word-colour-palette .word-palette button{width:88px;height:100px;min-width:88px;min-height:100px}
  .word-colour-well{width:94px;height:94px}
}

@media(max-width:760px){
  #s-word-game[data-game="colour-studio"]{padding-inline:7px}
  #s-word-game[data-game="colour-studio"] .word-game-shell{width:100%;min-width:0}
  #s-word-game[data-game="colour-studio"] .word-game-top{width:100%;min-width:0;grid-template-columns:58px minmax(0,1fr) 58px}
  #s-word-game[data-game="colour-studio"] .word-game-top>div{min-width:0}
  #s-word-game[data-game="colour-studio"] .word-game-top h1{font-size:23px;white-space:normal;overflow-wrap:anywhere}
  #s-word-game[data-game="colour-studio"] #wordGameBack{min-width:52px;padding:0}
  #s-word-game[data-game="colour-studio"] #wordGameBack span{display:none}
  #s-word-game[data-game="colour-studio"] .word-hud-btn,#s-word-game[data-game="colour-studio"] .word-hud-btn img{width:50px;min-width:50px;height:50px;min-height:50px}
  #s-word-game[data-game="colour-studio"] .word-instruction{min-height:66px;margin-bottom:7px;padding:6px 9px;border-width:3px}
  #s-word-game[data-game="colour-studio"] .word-instruction>button{width:48px;height:48px;min-height:48px}
  #s-word-game[data-game="colour-studio"] .word-game-stage{min-height:955px;padding:8px 6px 12px;background-position:center top;border-radius:24px}
  .word-colour-scene.authored{min-height:925px;padding:0 3px 66px;display:flex;flex-direction:column;justify-content:flex-start;gap:2px}
  .word-colour-guide{position:relative;left:auto;bottom:auto;width:260px;height:136px;flex:0 0 136px;margin:-4px auto 0}
  .word-colour-guide>img{left:7px;width:116px;height:136px}
  .word-colour-bubble{left:93px;top:17px;width:160px;min-height:82px}
  .word-colour-board{width:100%;display:flex;flex-direction:column;gap:0}
  .word-colour-easel{width:350px;max-width:98%;height:425px;flex:0 0 425px}
  .word-colour-canvas{left:10%;top:15%;width:80%;height:61%}
  .word-colour-audio{bottom:13px;width:56px;height:56px}
  .word-colour-palette{width:min(340px,96%);height:230px;flex:0 0 230px;padding:10px 12px;border-radius:22px}
  .word-colour-palette .word-palette{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:0 4px}
  .word-colour-palette .word-palette button{width:88px;height:96px;min-width:88px;min-height:96px}
  .word-colour-well{width:92px;height:92px}
  .word-colour-status{bottom:64px;width:calc(100% - 20px);min-height:48px;padding:8px 10px;font-size:12px}
  .word-colour-gallery,.word-colour-hint{bottom:3px;padding:0;font-size:0;min-width:54px;min-height:54px}
  .word-colour-gallery span,.word-colour-hint span{display:none}
  .word-colour-gallery{left:3px}.word-colour-hint{right:3px}
  .word-colour-gallery img,.word-colour-hint img{width:54px;height:54px}
}

@media(max-width:360px){
  #s-word-game[data-game="colour-studio"] .word-game-stage{min-height:915px}
  .word-colour-scene.authored{min-height:885px}
  .word-colour-easel{height:395px;flex-basis:395px}
  .word-colour-palette{height:220px;flex-basis:220px;padding-inline:7px}
  .word-colour-palette .word-palette button{width:78px;height:90px;min-width:78px;min-height:90px}
  .word-colour-well{width:84px;height:84px}
}

@media(orientation:landscape) and (max-height:700px) and (min-width:761px){
  #s-word-game[data-game="colour-studio"] .word-game-stage{min-height:345px;padding:3px 8px}
  #s-word-game[data-game="colour-studio"] .word-instruction{min-height:50px;margin-bottom:4px;padding-block:3px}
  #s-word-game[data-game="colour-studio"] .word-instruction>button{width:44px;height:44px;min-height:44px}
  .word-colour-scene.authored{min-height:330px;padding:0 115px 44px 115px}
  .word-colour-guide{left:-18px;bottom:38px;width:145px;height:205px;transform:none}
  .word-colour-guide>img{width:125px;height:150px}
  .word-colour-bubble{left:32px;top:0;width:118px;min-height:66px;padding:9px;font-size:11px}
  .word-colour-board{width:min(760px,100%);grid-template-columns:minmax(300px,430px) 190px;gap:6px}
  .word-colour-easel{height:330px}
  .word-colour-palette{width:190px;height:292px;padding:10px 7px;border-width:3px;border-radius:20px}
  .word-colour-palette .word-palette{gap:0}
  .word-colour-palette .word-palette button{width:72px;height:82px;min-width:72px;min-height:82px}
  .word-colour-well{width:76px;height:76px}
  .word-colour-audio{bottom:8px;width:46px;height:46px}
  .word-colour-status{bottom:0;width:53%;min-height:44px;padding:5px 10px;font-size:12px}
  .word-colour-gallery,.word-colour-hint{bottom:-2px;min-height:44px;font-size:0}
  .word-colour-gallery img,.word-colour-hint img{width:44px;height:44px}
}