@import url('/studio/penalty/style.css');
.intro h1{font-size:clamp(60px,9vw,112px);letter-spacing:-.05em}.intro>div{grid-column:1}.intro form{grid-row:1}.how{padding-left:1.2em;font-size:17px}.how li{padding:4px 0}.mode{display:flex;gap:14px;align-items:center;border-top:1px solid var(--line);padding:14px 0;cursor:pointer}.mode input{width:22px;height:22px;accent-color:var(--green)}.mode strong,.mode small{display:block}.mode strong{font-family:Baloo;font-size:23px}.mode small{font-size:14px}.player-label{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:10px 0 22px;font-size:15px}.player-label select{font:inherit;background:#fff9eb;color:var(--ink);border:1px solid var(--line);border-radius:9px;min-height:44px;padding:8px}.game-tools{display:flex;justify-content:space-between;gap:12px;padding:12px 5%;align-items:center}.game-tools>div{display:flex;gap:8px}.game-tools button{font-size:14px}.play-layout{display:grid;grid-template-columns:1.55fr 1fr;gap:4%;padding:15px 5% 45px}.clue-ground h1{font:800 clamp(29px,3.4vw,43px)/1.15 Baloo;margin:4px 0 12px;max-width:24ch}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:25px 0 12px}.object{padding:8px 10px 12px;border-radius:32px 32px 12px 12px;background:linear-gradient(150deg,#fffdf5,#f1e3c0);box-shadow:0 5px 0 #dccba433,0 12px 18px #394c3510;border:1px solid #dacba9;transition:transform .2s,border-color .2s;min-width:0;font-size:16px;font-weight:800}.object svg{display:block;width:100%;height:clamp(70px,11vw,125px);filter:drop-shadow(0 5px 3px #634a2520)}.object:hover{transform:translateY(-3px);border-color:var(--green)}.object.selected{background:#dfebcc;border:2px solid var(--green)}.object.retry{border:2px dashed var(--coral)}.object:disabled{opacity:.82}.object.selected:disabled{opacity:1}#feedback{min-height:3em;font-size:16px;line-height:1.5}#paused-note{margin:0;padding:15px 5%;background:#f1dfb8}.next-row{display:flex;gap:15px;align-items:center;flex-wrap:wrap}.basket-scene{border-radius:150px 150px 18px 18px;background:linear-gradient(0deg,#f5e9c8 25%,#d7dfb933 65%),url('/assets/worlds/quiz-clearing.webp') center top/auto 70% no-repeat;position:relative;text-align:center;min-width:0;align-self:start;margin-top:16px;padding:0 15px 14px;border:2px solid #fffaf0;box-shadow:0 15px 35px #2a4e3d14}.scene-caption{padding:70px 8px 0;color:#163f43}.scene-caption p:last-child{font:800 26px Baloo;margin:8px 0;background:#fff7e7dd;border-radius:8px;display:inline-block;padding:3px 15px}#basket{width:100%;height:auto;margin-top:-25px;display:block}#packed{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;padding:0;list-style:none;margin:-15px 0 8px;position:relative}#packed li{font-size:12px;padding:3px 8px;background:#fff9e9;border-radius:20px}.result{padding:50px 6%;text-align:center}.result h1{font:800 clamp(40px,6vw,70px)/1.1 Baloo;margin:0}.collection{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;padding:20px 0}.collection figure{margin:0;width:95px}.collection svg{width:85px;display:block}.collection figcaption{font-size:14px}.result-actions{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;align-items:center}dialog{color:var(--ink);border:1px solid var(--line);border-radius:20px;max-width:min(500px,calc(100% - 28px));padding:30px;background:var(--cream)}dialog::backdrop{background:#103d4977}dialog h2{font:800 30px Baloo;margin:0}dialog button{margin:8px 0}#game:fullscreen{background:var(--cream);overflow:auto}footer{padding-bottom:100px}
@media(max-width:760px){.intro{display:block;padding-top:20px}.intro form{margin-top:25px}.play-layout{grid-template-columns:1fr}.basket-scene{border-radius:22px;display:grid;grid-template-columns:1fr 110px;align-items:center;background:#e8e9cc;min-height:100px;margin-top:25px;padding:10px}.scene-caption{padding:0}.scene-caption p:last-child{font-size:20px}.basket-scene canvas{margin:0;width:110px;grid-column:2;grid-row:1/3}.basket-scene>p{display:none}#packed{margin:0;grid-column:1}.object svg{height:clamp(65px,20vw,110px)}.tiles{gap:10px}.game-tools{align-items:start}.game-tools>div{flex-wrap:wrap;justify-content:end}.clue-ground h1{font-size:30px}.object{font-size:14px;padding:5px 5px 10px;border-radius:24px 24px 10px 10px}.player-label{flex-wrap:wrap}.notes{padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){.object{transition:none}.object:hover{transform:none}}
html.ka-immersive #game.ka-immersive-target{background:var(--cream)}
@media(max-width:760px){
  #result:not([hidden]){display:flex;flex-direction:column;align-items:center;padding:22px 4% 40px}
  #result .eyebrow{order:0;margin:0 0 8px}
  #result h1{order:1;font-size:clamp(34px,10vw,48px)}
  #result #summary{order:2;margin:10px 0 16px}
  #result .result-actions{order:3;gap:8px 14px}
  #result #family-summary{order:4;margin:18px 0 0}
  #result .collection{order:5;gap:12px;padding:16px 0}
  #result>.small{order:6}
}
@media(max-width:430px) and (max-height:900px){
  html.ka-immersive #game>.music-controls{justify-content:space-between;flex-wrap:nowrap;gap:6px;padding:4px 4%}
  html.ka-immersive #game .music-controls button{min-width:88px;padding:5px 8px;font-size:12px}
  html.ka-immersive #game .music-controls label{gap:4px;font-size:12px}
  html.ka-immersive #game .music-controls input{width:72px}
  html.ka-immersive #game .music-note{display:none}
  html.ka-immersive #game .game-tools{padding:4px 4%;gap:4px}
  html.ka-immersive #game .game-tools>div{flex-wrap:nowrap;gap:4px}
  html.ka-immersive #game .game-tools button{min-height:44px;padding:4px 6px;font-size:11px;line-height:1.1}
  html.ka-immersive #game #finish{width:86px}
  html.ka-immersive #game #full{width:98px}
  html.ka-immersive #game .play-layout{padding:4px 4% 18px}
  html.ka-immersive #game .clue-ground>.eyebrow{margin:0;font-size:11px}
  html.ka-immersive #game .clue-ground h1{font-size:24px;line-height:1.08;margin:3px 0 0}
  html.ka-immersive #game .clue-ground>.small{display:none}
  html.ka-immersive #game .tiles{gap:6px;margin:8px 0}
  html.ka-immersive #game .object{padding:3px 2px 5px;font-size:11px;line-height:1.1;border-radius:14px}
  html.ka-immersive #game .object svg{height:48px}
  html.ka-immersive #game #feedback{min-height:0;margin:4px 0;font-size:13px;line-height:1.25}
  html.ka-immersive #game .basket-scene{height:60px;min-height:0;margin-top:2px;padding:2px 6px;grid-template-columns:minmax(0,1fr) 54px}
  html.ka-immersive #game .scene-caption>.eyebrow{display:none}
  html.ka-immersive #game .scene-caption p:last-child{font-size:14px;margin:0;padding:0}
  html.ka-immersive #game #basket{width:52px;height:52px;margin:0;grid-column:2;grid-row:1/3}
  html.ka-immersive #game #packed{display:none}
}
@media(max-width:430px) and (min-height:741px) and (max-height:900px){
  html.ka-immersive #game .clue-ground h1{font-size:28px}
  html.ka-immersive #game .object{font-size:14px}
  html.ka-immersive #game .object svg{height:100px}
  html.ka-immersive #game .basket-scene{height:150px;grid-template-columns:minmax(0,1fr) 130px}
  html.ka-immersive #game .scene-caption p:last-child{font-size:20px}
  html.ka-immersive #game #basket{width:122px;height:122px}
}
@media(min-width:761px) and (max-width:899px) and (min-height:1000px) and (orientation:portrait){
  html.ka-immersive #game .play-layout{grid-template-columns:1fr;gap:18px;padding:12px 5% 25px}
  html.ka-immersive #game .clue-ground h1{max-width:none}
  html.ka-immersive #game .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 0}
  html.ka-immersive #game .object{font-size:18px}
  html.ka-immersive #game .object svg{height:130px}
  html.ka-immersive #game .basket-scene{display:grid;grid-template-columns:minmax(0,1fr) 230px;align-items:center;min-height:300px;margin:0;padding:20px;border-radius:28px;background:linear-gradient(90deg,#f5e9c8 5%,#e8e9ccaa 100%),url('/assets/worlds/quiz-clearing.webp') center/cover no-repeat}
  html.ka-immersive #game .scene-caption{padding:0}
  html.ka-immersive #game #basket{width:200px;grid-column:2;grid-row:1/3;margin:0}
  html.ka-immersive #game #packed{grid-column:1;justify-content:flex-start;margin:0}
  html.ka-immersive #game .basket-scene>.small{display:none}
}
@media(min-width:761px) and (max-width:899px) and (min-height:1000px) and (max-height:1100px) and (orientation:portrait){
  html.ka-immersive #game .object svg{height:104px}
  html.ka-immersive #game .basket-scene{min-height:260px}
}
@media(min-width:900px) and (max-height:850px) and (orientation:landscape){
  html.ka-immersive #game .object svg{height:94px}
}
@media(max-height:500px) and (min-width:600px){
  html.ka-immersive #game.ka-immersive-target>.music-controls{padding:0 3% 4px;gap:8px}
  html.ka-immersive #game .music-note{display:none}
  html.ka-immersive #game .game-tools{padding:2px 3%}
  html.ka-immersive #game .game-tools button{min-height:44px;padding:4px 10px}
  html.ka-immersive #game .play-layout{grid-template-columns:minmax(0,1fr) 120px;gap:12px;padding:0 3% 8px}
  html.ka-immersive #game .clue-ground>.eyebrow{font-size:10px;margin:0}
  html.ka-immersive #game .clue-ground h1{font-size:clamp(22px,2.8vw,28px);line-height:1.05;margin:0}
  html.ka-immersive #game .clue-ground>.small{display:none}
  html.ka-immersive #game .tiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:6px 0}
  html.ka-immersive #game .object{padding:2px 2px 4px;border-radius:10px;font-size:11px;line-height:1.1}
  html.ka-immersive #game .object svg{height:48px}
  html.ka-immersive #game #feedback{min-height:0;margin:4px 0;font-size:12px;line-height:1.2}
  html.ka-immersive #game .next-row .primary{min-height:44px;padding:4px 10px;font-size:13px}
  html.ka-immersive #game .basket-scene{display:block;min-height:0;margin:0;padding:4px;border-radius:20px;background:#e8e9cc}
  html.ka-immersive #game .scene-caption{padding:0}
  html.ka-immersive #game .scene-caption .eyebrow{display:none}
  html.ka-immersive #game .scene-caption p:last-child{font-size:13px;line-height:1.1;padding:2px}
  html.ka-immersive #game #basket{width:85px;height:auto;margin:-10px auto 0}
  html.ka-immersive #game #packed,html.ka-immersive #game .basket-scene>.small{display:none}
}
@media(max-height:500px) and (min-width:600px) and (max-width:699px){
  html.ka-immersive #game .play-layout{grid-template-columns:minmax(0,1fr) 94px;gap:6px}
  html.ka-immersive #game .object{font-size:11px}
  html.ka-immersive #game .object svg{height:40px}
  html.ka-immersive #game #basket{width:65px}
}