/* GREENIFY mini oyunları: mevcut krem/orman paleti, bağımlılıksız çizim. */
.arcade-intro { max-width: 680px; padding: 14px 0 30px; }
.arcade-intro h2 { margin: 12px 0 20px; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.08; letter-spacing: -.065em; color: #173f31; }
.arcade-intro h2 em { color: #688745; font-style: normal; }
.arcade-intro p { max-width: 52ch; color: #536257; line-height: 1.75; }
.arcade-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.arcade-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #d9dfd1; border-radius: 22px; background: #fffdf6; }
.arcade-art { height: 190px; position: relative; overflow: hidden; }
.arcade-art-label { position: absolute; left: 20px; bottom: 17px; font-size: .61rem; letter-spacing: .16em; font-weight: 700; }
.chef-art { display: grid; place-items: center; background: #e0e7c9; color: #37563e; }
.chef-plate { position: relative; width: 125px; height: 125px; margin-top: -12px; border: 12px solid #fffdf1; border-radius: 50%; background: #e9efdc; box-shadow: 12px 13px 0 #abc09455, inset 0 0 0 3px #d3dcc4; transform: rotate(-18deg); }
.chef-plate i { position: absolute; width: 40px; height: 62px; left: 13px; top: 18px; border-radius: 80% 0 80% 15%; background: #547848; transform: rotate(22deg); }
.chef-plate b { position: absolute; left: 47px; top: 32px; color: #c77348; font-size: 58px; font-weight: 400; line-height: 1; }
.hoops-art { background: #214f43; color: #d9ebc3; }
.art-backboard { position: absolute; width: 106px; height: 71px; top: 27px; left: calc(50% - 53px); border: 7px solid #dfdfc5; border-radius: 6px; background: #eaf0dc; box-shadow: 8px 8px #0f332e66; }
.art-backboard::after { content: ""; position: absolute; bottom: 1px; left: 27px; width: 39px; height: 29px; border: 3px solid #527f67; }
.art-rim { position: absolute; top: 90px; left: calc(50% - 41px); width: 82px; height: 18px; border: 5px solid #dfb35f; border-radius: 50%; transform: rotate(-3deg); }
.art-rim::after { content: ""; position: absolute; top: 10px; left: 4px; width: 64px; height: 41px; background: repeating-linear-gradient(65deg, transparent 0 10px, #e4ead27a 10px 12px), repeating-linear-gradient(-65deg, transparent 0 10px, #e4ead27a 10px 12px); clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%); }
.art-ball { position: absolute; left: 22%; top: 100px; display: grid; place-items: center; width: 43px; height: 43px; background: #e6cea0; color: #42634c; border-radius: 45% 50% 40% 50%; font-size: 27px; transform: rotate(-24deg); box-shadow: 5px 9px #123a3077; }
.sorting-art { display: flex; align-items: center; justify-content: center; gap: 10px; background: #e5e7df; color: #335144; }
.sorting-art > span { display: grid; place-items: center; width: 53px; height: 74px; border-radius: 4px 4px 12px 12px; background: #c6d8bf; border-top: 9px solid #718b76; color: #385a4d; font-size: 33px; transform: rotate(-7deg); }
.sorting-art > span:nth-child(2) { background: #dacf9f; border-color: #a89861; transform: translateY(-12px) rotate(3deg); }
.sorting-art > span:nth-child(3) { background: #b5cbd5; border-color: #718e9d; transform: rotate(8deg); }
.arcade-card-copy { display: flex; flex: 1; flex-direction: column; align-items: start; padding: 24px; }
.arcade-card h3 { margin: 14px 0 12px; font-size: 1.3rem; letter-spacing: -.045em; }
.arcade-card p { font-size: .88rem; line-height: 1.75; color: #576452; margin-bottom: 20px; }
.arcade-meta { display: block; margin-top: auto; font-size: .74rem; font-weight: 600; color: #567342; }
.arcade-card small { font-size: .69rem; margin: 10px 0 20px; color: #677260; }
.arcade-card .primary-action { width: 100%; display: flex; justify-content: space-between; }
.arcade-note { margin-top: 24px; padding: 20px 24px; background: #edf1e5; border-radius: 16px; color: #355141; font-size: .84rem; }
.arcade-note p { margin-top: 8px; line-height: 1.7; color: #5b6955; }
.arcade-back { margin: 12px 0 24px; }
.arcade-welcome, .chef-board, .arcade-result { padding: clamp(24px, 5vw, 48px); border: 1px solid #d6dfcb; border-radius: 24px; background: #fffdf6; }
.arcade-welcome { background: radial-gradient(ellipse at 100% 0, #dce6c3, transparent 55%), #fffdf6; }
.arcade-welcome h3 { margin: 18px 0 22px; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.13; letter-spacing: -.055em; }
.arcade-welcome p { max-width: 65ch; line-height: 1.8; }
.arcade-welcome ul { margin: 20px 0; padding-left: 20px; line-height: 1.9; font-size: .87rem; color: #52654c; }
.arcade-welcome .primary-action { margin-top: 22px; }
.arcade-round-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-bottom: 15px; }
.arcade-round-head strong { font-size: .8rem; color: #52614e; }
.chef-board > progress { appearance: none; width: 100%; height: 6px; border: 0; border-radius: 5px; overflow: hidden; background: #e4e8d9; accent-color: #5a8753; margin-bottom: 28px; }
.chef-board progress::-webkit-progress-bar { background: #e4e8d9; }
.chef-board progress::-webkit-progress-value { background: #5a8753; }
.chef-board progress::-moz-progress-bar { background: #5a8753; }
#chefQuestion { margin: 18px 0 28px; font-size: clamp(1.3rem, 3vw, 1.9rem); line-height: 1.5; letter-spacing: -.035em; }
.chef-choices { display: grid; gap: 11px; }
.chef-choice { display: flex; align-items: center; gap: 14px; min-height: 69px; padding: 16px 20px; border: 1px solid #cfd9c5; border-radius: 13px; background: #f8f9f0; color: #2e4634; text-align: left; font: inherit; line-height: 1.6; cursor: pointer; }
.chef-choice > span { flex: 0 0 29px; display: grid; place-items: center; height: 29px; border: 1px solid #b4c3aa; border-radius: 50%; font-size: .73rem; }
.chef-choice b { margin-left: auto; }
.chef-choice:not(:disabled):hover { border-color: #376446; background: #edf3df; }
.chef-choice:disabled { cursor: default; opacity: 1; }
.chef-choice.is-correct { border-color: #5b8d58; background: #e7f0dd; }
.chef-choice.is-wrong { border-color: #c28a6c; background: #faeadb; }
.arcade-feedback { padding: 22px; border-radius: 15px; margin: 24px 0 18px; line-height: 1.75; border: 1px solid #d0dbc5; }
.arcade-feedback.is-good { background: #eaf2df; }
.arcade-feedback.is-learn { background: #f7ecd9; }
.arcade-feedback p { margin: 9px 0; }
.arcade-feedback small { display: block; color: #596853; font-size: .78rem; }
.arcade-feedback .text-action { display: block; margin-top: 15px; }
.chef-board > .form-note { margin-top: 20px; }
.arcade-result h3 { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.4; margin: 16px 0; letter-spacing: -.045em; }
.arcade-result p { line-height: 1.75; margin: 13px 0; }
.chef-recipe-links, .arcade-result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chef-recipe-links button { font-size: .78rem; }
.hoops-board { padding: 22px; border-radius: 24px; border: 1px solid #cdd8c9; background: #fffdf6; }
.hoops-item-head { text-align: center; margin: 27px 0 20px; }
.hoops-item-head > span { color: #59724f; font-size: .8rem; }
.hoops-item-head h3 { margin-top: 10px; font-size: clamp(1.2rem, 3vw, 1.8rem); letter-spacing: -.035em; }
.hoops-bin-choices { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.hoops-bin-choices button { display: flex; align-items: center; gap: 9px; padding: 13px 18px; border: 1px solid #c7d2be; border-radius: 12px; background: #f8faf1; color: #2f513b; font: inherit; font-size: .88rem; cursor: pointer; }
.hoops-bin-choices button > span { width: 14px; height: 14px; border-radius: 4px; background: var(--bin-color); }
.hoops-bin-choices button[aria-pressed="true"] { border-color: #3e6748; box-shadow: 0 0 0 2px #4b765938; background: #eaf1dc; }
.hoops-bin-choices button:disabled { opacity: .8; cursor: default; }
.hoops-court { position: relative; border-radius: 20px; overflow: hidden; background: #214f43; }
#hoopsCanvas { display: block; width: 100%; height: clamp(310px, 42vw, 520px); touch-action: none; cursor: grab; }
#hoopsCanvas:active { cursor: grabbing; }
.hoops-court-label { position: absolute; left: 20px; bottom: 14px; color: #dfebce88; letter-spacing: .2em; font-size: .57rem; pointer-events: none; }
.hoops-controls { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px 20px; padding: 22px 4px 6px; }
.hoops-assist { display: flex; align-items: center; gap: 10px; font-size: .85rem; grid-column: 1 / -1; }
.hoops-assist input { width: 20px; height: 20px; accent-color: #315e41; }
.hoops-sliders { display: flex; gap: 20px; }
.hoops-sliders label { display: grid; gap: 5px; flex: 1; color: #50664a; font-size: .78rem; }
.hoops-sliders input { min-height: 30px; width: 100%; accent-color: #486e43; }
#hoopsAimValues { grid-column: 1; grid-row: 3; margin: 0; }
#hoopsShoot { grid-column: 2; grid-row: 2 / 4; }
.hoops-result-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0; }
.hoops-result-stats div { padding: 22px; border-radius: 16px; background: #edf2e2; }
.hoops-result-stats strong { display: block; font-size: 1.8rem; color: #416542; }
.hoops-result-stats span { display: block; margin-top: 7px; font-size: .78rem; }
.arcade-play-panel [hidden], #arcadeLobby[hidden], [data-game-panel][hidden] { display: none !important; }
.arcade-play-panel :focus-visible, .arcade-grid :focus-visible { outline: 3px solid #b28332; outline-offset: 4px; }
@media (max-width: 1080px) { .arcade-grid { grid-template-columns: 1fr; } .arcade-card { display: grid; grid-template-columns: minmax(160px, .65fr) 1fr; } .arcade-art { height: 100%; min-height: 240px; } .chef-art { align-items: center; } .hoops-art .art-backboard { top: 56px; } .hoops-art .art-rim { top: 119px; } .hoops-art .art-ball { top: 150px; } }
@media (max-width: 600px) {
  .arcade-card { display: flex; } .arcade-art { height: 174px; min-height: 174px; }
  .hoops-art .art-backboard { top: 23px; } .hoops-art .art-rim { top: 86px; } .hoops-art .art-ball { top: 102px; }
  .arcade-card-copy { padding: 23px; } .arcade-meta { font-size: .76rem; }
  .chef-choice { font-size: .88rem; padding: 13px; gap: 10px; }
  .hoops-board { padding: 15px; } .hoops-court { border-radius: 12px; }
  .hoops-bin-choices { gap: 6px; } .hoops-bin-choices button { padding: 12px; font-size: .78rem; }
  .hoops-controls { grid-template-columns: 1fr; } #hoopsShoot { grid-column: 1; grid-row: auto; }
  .hoops-result-stats div { padding: 16px; } .hoops-result-stats strong { font-size: 1.6rem; }
}