/* Candy arcade stages: illustrated worlds, cream paper and glossy coloured frames.
   Avatar motion, OX positioning and the existing responsive game grids stay intact. */

/* The live room waiting area uses the same cream cards and mint candy frame. */

/* Questions and answer choices retain clear, dark reading text. */

.choices { gap: 12px; }
.ch {
  --answer-top: #fff;
  --answer-mid: #e9fbff;
  --answer-bottom: #cef2f8;
  --answer-edge: #64c5d5;
  --answer-base: #39a5b9;
  color: #244d66;
  background: linear-gradient(var(--answer-top), var(--answer-mid) 50%, var(--answer-bottom));
  border: 3px solid var(--answer-edge);
  border-radius: 20px;
  box-shadow: inset 0 2px 0 #fff, inset 0 -3px 0 #ffffff70, 0 4px 0 var(--answer-base);
  padding: 13px 15px;
  font-size: 18px;
  text-shadow: none;
}
.ch .n {
  background: linear-gradient(#5cdef1, #13abcf);
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  box-shadow: inset 0 1px 0 #e1ffff, 0 2px 0 #108aab;
  font-size: 14px;
  width: 31px;
  height: 31px;
  text-shadow: 0 1px 0 #1388a5;
}
.ch:nth-child(2) .n { background: linear-gradient(#ff9e8d, #f66864); box-shadow: inset 0 1px 0 #ffe7dd, 0 2px 0 #ce4d51; }
.ch:nth-child(3) .n { background: linear-gradient(#bfed64, #73bd30); box-shadow: inset 0 1px 0 #f0ffcd, 0 2px 0 #64a327; }
.ch:nth-child(4) .n { background: linear-gradient(#dab3f6, #ae6cdd); box-shadow: inset 0 1px 0 #f6e5ff, 0 2px 0 #9553bf; }
.ch.pick {
  --answer-top: #fffbc7; --answer-mid: #fff0a0; --answer-bottom: #ffe585;
  --answer-edge: #edba38; --answer-base: #c99024;
  color: #754d13;
}
.ch.ok {
  --answer-top: #f2ffcb; --answer-mid: #d8f8b2; --answer-bottom: #c2ee8e;
  --answer-edge: #89c844; --answer-base: #6fa933;
  color: #325c24;
}
.ch.ok .n { background: linear-gradient(#a1e754, #68b735); box-shadow: inset 0 1px 0 #e9ffc4, 0 2px 0 #4f912e; }
.ch.no {
  --answer-top: #fff2ed; --answer-mid: #ffddd6; --answer-bottom: #ffc8bf;
  --answer-edge: #f08779; --answer-base: #cb665f;
  color: #8c433c;
  opacity: 1;
}
.ch.no .n { background: linear-gradient(#ffa99b, #ed756a); box-shadow: inset 0 1px 0 #ffe6dc, 0 2px 0 #c05d55; }
.ch:is(.pick, .ok, .no) {
  background: linear-gradient(var(--answer-top), var(--answer-mid) 50%, var(--answer-bottom));
  border-color: var(--answer-edge);
  box-shadow: inset 0 2px 0 #fff, inset 0 -3px 0 #ffffff70, 0 4px 0 var(--answer-base);
}
body .ch:not(:disabled):not(.lock):is(:active, .qp-pressed) {
  box-shadow: inset 0 2px 3px #244d661a, inset 0 1px 0 #ffffff90, 0 1px 0 var(--answer-base);
}

/* A soft cream monitor floats in the original illustrated quiz studio. */

#qpAnswerForm .btn {
  --candy-top: #dcff8b; --candy-mid: #a7ee49; --candy-bottom: #71c72c;
  --candy-edge: #67a934; --candy-base: #4f942a; --candy-label: #fff;
}

/* Player consoles never change the size or motion of the pixel artwork. */

/* Solo practice: the path and marks use the same gold, lime and coral states. */

.stone { background: linear-gradient(#fff, #e4f7f4); color: #3f6f7b; border-color: #81c9c6; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #60a9b0; }
.stone.cur { background: linear-gradient(#fff9b8, #ffd85c); color: #815317; border-color: #dcac3c; box-shadow: inset 0 1px 0 #fffde2, 0 3px 0 #c09535; }
.stone.ok { background: linear-gradient(#e2ffa4, #afdf67); border-color: #7eb948; color: #3c6726; }
.stone.no { background: linear-gradient(#ffe1d1, #f8b1a1); border-color: #db8b79; color: #884a41; }

/* OX keeps its positioning transform; the signs become coral and cyan candy. */

  

/* Team puzzle panels and tiles share the rounded mint/cream palette. */

.cc { background: #65c0bc; border-radius: 5px; }
.cc.open { background: #fffef5; box-shadow: inset 0 0 0 1px #b2cfba, inset 0 -2px 0 #eee8d1; }
.cc.open.done { background: #daf5b2; box-shadow: inset 0 0 0 1px #9fc768, inset 0 -2px 0 #b6d988; }
.cc.open.mine { background: #ffe99e; box-shadow: inset 0 0 0 1px #d4b253, inset 0 -2px 0 #efd17c; }
.cc.hi { background: #fff0a8; box-shadow: inset 0 0 0 2px #efa839; }
.cc .cn { color: #558277; }
.cc .cv { color: #345848; }

/* Rewards are a sunny celebration, with a readable cream scoreboard. */
.night { background: radial-gradient(ellipse at 50% 0, #fef3ad, transparent 62%), linear-gradient(#99e9e7, #e5f7cf); }

  

@media (hover: hover) and (pointer: fine) {
  .ch:not(:disabled):not(.lock):hover { filter: brightness(1.035); border-color: #35bace; }
  .ch.pick:hover { border-color: #e9b33b; }
  .ch.ok:hover { border-color: #86bd4c; }
  .ch.no:hover { border-color: #e78f78; }
}

/* Compact laptops keep the question, answer field and submit button visible. */

@media (max-width: 1100px) {
  .ch { padding: 11px 12px; font-size: 17px; gap: 8px; }
  
}

@media (max-width: 660px) {
  
  
  .ch { border-radius: 15px; padding: 10px; font-size: 15px; gap: 7px; }
  .ch .n { width: 26px; height: 26px; font-size: 12px; }
  
  
  
  
  
  
  
  
}