:root {
  color-scheme: only light;
  --lacivert: #13233f;
  --lacivert-2: #1f3560;
  --amber: #f2b03c;
  --turuncu: #e4572e;
  --turuncu-koyu: #a8361a;
  --kraft: #d9b98a;
  --krem: #fdf8ec;
  --kagit: #f6efdd;
  --cizgi: #e4d9bf;
  --uyari: #fff0c9;
  --wa: #1f8f4e;
  --tebesir: #f5f1e6;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; overflow-x: clip; }
body {
  background-color: var(--kagit);
  background-image: linear-gradient(var(--cizgi) 1px, transparent 1px), linear-gradient(90deg, var(--cizgi) 1px, transparent 1px);
  background-size: 26px 26px;
  color: var(--lacivert);
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 17px; line-height: 1.4;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: inherit; }

/* Tebeşir tahtası */
.tahta {
  background:
    radial-gradient(ellipse 60% 40% at 20% 20%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(ellipse 50% 50% at 85% 75%, rgba(255,255,255,.05), transparent 70%),
    var(--lacivert);
  color: var(--tebesir);
  border-bottom: 12px solid var(--kraft);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.25);
  padding: 28px 16px 22px; text-align: center;
}
h1 { margin: 0; font-weight: 800; }
.tebesir { display: block; font-family: "Patrick Hand", "Comic Sans MS", cursive; font-weight: 400; font-size: clamp(38px, 11vw, 52px); line-height: 1; }
.kupler { display: flex; justify-content: center; gap: clamp(2px, 1vw, 6px); margin-top: 12px; }
.kupler i {
  font-style: normal; display: grid; place-items: center; width: clamp(34px, 10.4vw, 52px); aspect-ratio: 1;
  font-size: clamp(25px, 7.6vw, 38px); font-weight: 800; line-height: 1; padding-top: .12em;
  background: var(--amber); color: var(--lacivert); border-radius: 7px;
  box-shadow: inset 0 -4px 0 rgba(19,35,63,.22), inset 4px 0 0 rgba(255,255,255,.25);
  transform: rotate(-3deg);
}
.kupler i:nth-child(2n) { background: var(--turuncu); color: #fff; transform: rotate(3deg) translateY(2px); }
.kupler i:nth-child(3n) { background: var(--krem); color: var(--lacivert); transform: rotate(-1deg) translateY(-2px); }
.soz { max-width: 400px; margin: 14px auto 0; font-family: "Patrick Hand", cursive; font-size: 21px; line-height: 1.2; }

main { max-width: 540px; margin: 0 auto; padding: 18px 16px 40px; }

fieldset { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
legend { padding: 0; margin: 0 0 8px; font-weight: 800; font-size: 21px; line-height: 1.15; }
legend small { font-weight: 500; font-size: 15px; opacity: .75; }

.sira { display: grid; gap: 8px; }
.sira.bes { grid-template-columns: repeat(5, 1fr); }
.sira.uc { grid-template-columns: repeat(3, 1fr); }
.sira.iki { grid-template-columns: repeat(2, 1fr); }

/* Oyuncak küp düğmeler */
.kup {
  font: inherit; font-weight: 700; font-size: 15px; line-height: 1.12; color: var(--lacivert); cursor: pointer;
  min-height: 74px; padding: 7px 3px 8px; border-radius: 12px; background: var(--krem);
  border: 2px solid var(--lacivert); box-shadow: 0 4px 0 var(--lacivert);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: transform .08s, box-shadow .08s;
}
.kup .em { font-size: 26px; line-height: 1; }
.kup.sayi { aspect-ratio: 1; min-height: 58px; font-weight: 800; font-size: clamp(16px, 5.1vw, 22px); }
.kup.sayi small { font-size: 12px; font-weight: 600; }
.kup[aria-pressed="true"] { background: var(--amber); transform: translateY(3px); box-shadow: 0 1px 0 var(--lacivert); }
.sira.iki .kup { min-height: 68px; font-size: 17px; }

.eksik { margin: 0 0 8px; color: var(--turuncu-koyu); font-weight: 800; text-align: center; }

.dugme {
  display: block; width: 100%; font: inherit; font-weight: 800; font-size: 19px; line-height: 1.15; text-align: center; min-height: 54px;
  padding: 12px 14px; margin-top: 12px; border-radius: 12px; cursor: pointer;
  background: var(--lacivert); color: var(--krem); border: 2px solid var(--lacivert);
}
.dugme.cek { background: var(--turuncu); border-color: var(--turuncu); color: #fff; box-shadow: 0 5px 0 var(--turuncu-koyu); }
.dugme.cek:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--turuncu-koyu); }
.dugme.wa { background: var(--wa); border-color: var(--wa); color: #fff; font-size: 17px; margin-top: 0; }
.dugme.ikincil { background: transparent; color: var(--lacivert); }
.gonder { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--turuncu); outline-offset: 2px; }

#sonuc { margin-top: 26px; scroll-margin-top: 10px; }
.sayac { margin: 0 0 8px; font-family: "Patrick Hand", cursive; font-size: 21px; line-height: 1.1; text-align: center; }

/* Oyun kartı: iskambil gibi köşeli */
.kart {
  position: relative; background: var(--krem); border: 3px solid var(--lacivert); border-radius: 20px;
  padding: 16px 16px 14px; box-shadow: 6px 7px 0 var(--amber);
  animation: firla .4s cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes firla { from { opacity: 0; transform: translateY(46px) scale(.9) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .kart { animation: none; } }
.kart .kose { position: absolute; top: 10px; left: 14px; font-size: 26px; line-height: 1; }
.kart .kose.alt { top: auto; left: auto; right: 14px; bottom: 10px; transform: rotate(180deg); opacity: .4; font-size: 22px; }
.kart .ana-emoji { text-align: center; font-size: 62px; line-height: 1.1; margin-top: 4px; }
.kart h2 { margin: 2px 0 8px; text-align: center; font-weight: 800; font-size: 29px; line-height: 1.08; letter-spacing: -.01em; }
.etiketler { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 0 0 12px; padding: 0; list-style: none; }
.etiketler li { font-size: 14px; font-weight: 700; line-height: 1; padding: 6px 9px 5px; background: var(--kagit); border: 1.5px solid var(--lacivert); border-radius: 8px; }
.damga {
  display: block; width: fit-content; margin: 0 auto 10px; font-weight: 800; font-size: 15px; line-height: 1; letter-spacing: .03em; text-transform: uppercase;
  color: var(--turuncu-koyu); border: 2.5px solid var(--turuncu-koyu); border-radius: 7px; padding: 7px 10px 5px; transform: rotate(-2deg);
}
.not { margin: 0 0 12px; padding: 8px 10px; border: 2px dashed var(--lacivert); border-radius: 10px; font-size: 15px; font-weight: 500; line-height: 1.25; }

.kart h3 { font-family: "Patrick Hand", cursive; font-weight: 400; font-size: 24px; line-height: 1; margin: 0 0 6px; color: var(--turuncu-koyu); }
.kurallar { list-style: none; counter-reset: k; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.kurallar li { counter-increment: k; display: flex; gap: 10px; align-items: flex-start; font-size: 18px; font-weight: 500; line-height: 1.25; }
.kurallar li::before {
  content: counter(k); flex: none; width: 28px; height: 28px; display: grid; place-items: center; padding-top: 2px;
  background: var(--lacivert); color: var(--amber); border-radius: 6px; font-weight: 800; font-size: 17px; line-height: 1;
}
.neden { margin: 0 0 14px; font-size: 17px; line-height: 1.3; }

.guvenlik {
  margin: 0; padding: 14px 12px 12px; border-radius: 10px; background: var(--uyari); position: relative; overflow: hidden;
  font-size: 16px; line-height: 1.25;
}
.guvenlik::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px;
  background: repeating-linear-gradient(-45deg, var(--lacivert) 0 10px, var(--amber) 10px 20px);
}
.guvenlik b.bas { display: block; font-size: 17px; margin-bottom: 3px; }
.guvenlik p { margin: 0 0 6px; }
.guvenlik p:last-child { margin-bottom: 0; }
.guvenlik .genel { font-size: 15px; opacity: .88; }

.kose-not { margin: 12px 0 0; font-size: 15px; line-height: 1.25; text-align: center; font-weight: 500; }

.yapma {
  margin-top: 18px; background: var(--lacivert); color: var(--tebesir); border-radius: 10px; border-bottom: 8px solid var(--kraft);
  padding: 13px 15px 12px; font-size: 16px; line-height: 1.25;
}
.yapma strong { display: block; font-family: "Patrick Hand", cursive; font-weight: 400; font-size: 25px; line-height: 1; color: var(--amber); margin-bottom: 4px; }

.bos { background: var(--krem); border: 2px dashed var(--lacivert); border-radius: 12px; padding: 16px; text-align: center; }
.guven { text-align: center; font-size: 15px; font-weight: 700; margin: 26px 0 4px; line-height: 1.25; }
.altnot { text-align: center; font-size: 13px; margin: 0; line-height: 1.3; }

@media (max-width: 349px) {
  .sira.uc { grid-template-columns: repeat(2, 1fr); }
  .gonder { grid-template-columns: 1fr; }
}