/* BMO konsolu. Bütün ölçüler konsolun genişliğine bağlıdır (1 birim = genişliğin 1/440'ı). */

.bmo-wrap { position: relative; display: grid; justify-items: center; gap: 14px; z-index: 2; }

.bmo {
  position: relative; container-type: inline-size;
  width: min(100%, 520px, calc((100svh - 300px) * .7857)); min-width: min(100%, 290px);
  aspect-ratio: 440 / 560;
  rotate: var(--rot, -1.5deg); transition: rotate .5s var(--ease);
  animation: bob 5.5s ease-in-out infinite;
  outline: none; -webkit-tap-highlight-color: transparent;
}
.bmo > * { --u: calc(100cqw / 440); }
.bmo:focus-visible { outline: 3px solid var(--blue); outline-offset: 10px; border-radius: 40px; }
.bmo-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.part { position: absolute; left: calc((var(--x) - 10) / 440 * 100%); top: calc(var(--y) / 560 * 100%); width: calc(var(--w) / 440 * 100%); height: calc(var(--h) / 560 * 100%); }

/* Gövde çizimi */
.limb-out { fill: none; stroke: var(--ink); stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; }
.limb-in { fill: none; stroke: #66CFB1; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.bmo-edge { fill: none; stroke: var(--ink); stroke-width: 7; }
.bmo-bezel { fill: var(--lcd); stroke: var(--ink); stroke-width: 7; }
.bmo-slot { fill: #0B2623; }
.bmo-dot { fill: var(--ink); }
.bmo-dash { fill: #3A9F88; stroke: var(--ink); stroke-width: 3.5; }
.bmo-ground { fill: rgba(15, 47, 43, .22); }
.arm-r { transform-origin: 394px 330px; animation: wave 3.6s ease-in-out infinite; }
.arm-l { transform-origin: 66px 330px; animation: sway 4.4s ease-in-out infinite; }
.leg-l { transform-origin: 178px 486px; animation: step 5.5s ease-in-out infinite; }
.bmo.cheer .arm-r { animation: cheer-r .42s ease-in-out 4; }
.bmo.cheer .arm-l { animation: cheer-l .42s ease-in-out 4; }
.bmo.cheer { animation: hop .42s ease-in-out 4; }

/* Ekran */
.bmo-screen { border-radius: calc(var(--u) * 17); background: var(--lcd); color: var(--lcd-ink); overflow: hidden; font-family: var(--font-pixel); font-size: max(13px, calc(var(--u) * 17)); line-height: 1.22; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; box-shadow: inset 0 calc(var(--u) * 6) 0 rgba(15, 47, 43, .1), inset 0 0 calc(var(--u) * 34) rgba(15, 47, 43, .1); }
.bmo-screen.is-game { touch-action: none; cursor: default; }
.bmo-screen::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(15, 47, 43, .05) 0 2px, transparent 2px 4px); pointer-events: none; z-index: 3; }
.scr-glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(112deg, rgba(255, 255, 255, .17) 0 17%, transparent 17.4%), linear-gradient(112deg, rgba(255, 255, 255, .08) 0 25%, transparent 25.4%); }
.scr { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.scr > * { min-height: 0; min-width: 0; }
.scr-face, .scr-menu, .scr-proj, .scr-game, .scr-code { display: grid; }
.scr button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.caret { display: inline-block; width: 0; height: 0; margin-right: calc(var(--u) * 7); border-left: calc(var(--u) * 9) solid currentColor; border-top: calc(var(--u) * 6) solid transparent; border-bottom: calc(var(--u) * 6) solid transparent; vertical-align: -.02em; }

/* Karşılama yüzü */
.scr-face { grid-template-rows: 1fr auto auto; justify-items: center; align-items: center; padding: calc(var(--u) * 10) calc(var(--u) * 14) calc(var(--u) * 12); text-align: center; gap: calc(var(--u) * 6); }
.face { position: relative; width: calc(var(--u) * 176); height: calc(var(--u) * 108); translate: var(--fx, 0) var(--fy, 0); transition: translate .25s var(--ease); }
.eye { position: absolute; top: calc(var(--u) * 4); width: calc(var(--u) * 19); height: calc(var(--u) * 32); border-radius: calc(var(--u) * 12); background: var(--lcd-ink); animation: blink 4.8s infinite; }
.eye:nth-child(1) { left: 20%; } .eye:nth-child(2) { right: 20%; }
.mouth { position: absolute; left: 50%; bottom: calc(var(--u) * 4); width: calc(var(--u) * 80); translate: -50% 0; fill: none; stroke: var(--lcd-ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; transition: transform .2s; }
.scr-face[data-mood='wow'] .mouth { fill: var(--lcd-ink); transform: scaleY(.7); }
.scr-face[data-mood='sad'] .mouth { transform: scaleY(-1) translateY(35%); }
.say { font-size: max(15px, calc(var(--u) * 22)); font-weight: 700; min-height: 2.4em; display: grid; align-items: end; }
.prompt { font-size: max(13px, calc(var(--u) * 16.5)); animation: tick 1.3s steps(2) infinite; opacity: .9; }

/* Menü */
.scr-menu { grid-template-rows: auto 1fr; padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 10); gap: calc(var(--u) * 6); align-content: start; }
.scr-title { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; border-bottom: calc(var(--u) * 3) solid var(--lcd-ink); padding-bottom: calc(var(--u) * 5); }
.scr-title small { font-size: .78em; font-weight: 500; opacity: .75; }
.menu { display: grid; gap: calc(var(--u) * 3); align-content: start; }
.mi { display: flex !important; align-items: center; gap: calc(var(--u) * 6); width: 100%; padding: calc(var(--u) * 5) calc(var(--u) * 8) !important; border-radius: calc(var(--u) * 7); font-weight: 600; }
.mi .caret { visibility: hidden; margin-right: calc(var(--u) * 2); }
.mi small { margin-left: auto; font-size: .8em; opacity: .75; }
.mi[aria-selected='true'] { background: var(--lcd-ink); color: var(--lcd); }
.mi[aria-selected='true'] .caret { visibility: visible; }

/* Proje gezgini */
.scr-proj { grid-template-rows: auto 1fr auto; padding: calc(var(--u) * 11) calc(var(--u) * 13) calc(var(--u) * 10); gap: calc(var(--u) * 6); }
.proj-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .82em; font-weight: 600; opacity: .85; }
.proj-main { display: grid; grid-template-columns: calc(var(--u) * 92) 1fr; gap: calc(var(--u) * 10); align-items: start; min-height: 0; }
.lcd-thumb { width: 100%; aspect-ratio: 1; border: calc(var(--u) * 3) solid var(--lcd-ink); border-radius: calc(var(--u) * 8); background: var(--lcd); overflow: hidden; display: grid; place-items: center; }
.lcd-thumb canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.lcd-thumb b { font-size: calc(var(--u) * 30); font-weight: 700; }
.proj-text { display: grid; gap: calc(var(--u) * 3); min-width: 0; }
.proj-title { font-family: var(--font-code); font-size: max(20px, calc(var(--u) * 29)); font-weight: 400; line-height: .92; letter-spacing: .01em; overflow-wrap: anywhere; }
.proj-kind { font-size: .86em; opacity: .85; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.proj-info { grid-column: 1 / -1; font-size: .92em; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.proj-tags { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 5); grid-column: 1 / -1; }
.proj-tags span { border: calc(var(--u) * 2.5) solid var(--lcd-ink); border-radius: calc(var(--u) * 5); padding: 0 calc(var(--u) * 6); font-size: .82em; }
.proj-foot { display: flex; justify-content: space-between; gap: calc(var(--u) * 6); font-size: .8em; opacity: .85; border-top: calc(var(--u) * 2.5) dashed var(--lcd-ink); padding-top: calc(var(--u) * 5); }

/* Oyunlar */
.scr-game { grid-template-rows: auto 1fr; padding: calc(var(--u) * 8) calc(var(--u) * 10) calc(var(--u) * 10); gap: calc(var(--u) * 5); }
.hud { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: .86em; font-weight: 700; }
.hud > span:nth-child(2) { margin-left: auto; }
.hud-x { border: calc(var(--u) * 2.5) solid var(--lcd-ink) !important; border-radius: calc(var(--u) * 5); padding: 0 calc(var(--u) * 7) !important; font-size: .8em !important; line-height: 1.5; text-align: center !important; background: transparent; }
.hud-x:active { background: var(--lcd-ink) !important; color: var(--lcd) !important; }
.field { position: relative; min-height: 0; border: calc(var(--u) * 3) solid var(--lcd-ink); border-radius: calc(var(--u) * 6); overflow: hidden; background: #BFE3CD; }
.field canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.over { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: calc(var(--u) * 4); background: rgba(207, 235, 218, .9); font-weight: 700; padding: calc(var(--u) * 8); z-index: 2; }
.over small { font-weight: 500; opacity: .85; }
.pads { height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: calc(var(--u) * 7); padding: calc(var(--u) * 7); }
.scr .pad { border: calc(var(--u) * 3.5) solid var(--lcd-ink); border-radius: calc(var(--u) * 10); background: var(--pc); opacity: .55; transition: opacity .1s, transform .1s; -webkit-tap-highlight-color: transparent; }
.scr .pad.lit { opacity: 1; transform: scale(.96); box-shadow: inset 0 0 0 calc(var(--u) * 4) rgba(255, 255, 255, .45); }

/* Kod yaz */
.scr-code { grid-template-rows: auto 1fr auto; padding: calc(var(--u) * 9) calc(var(--u) * 11) calc(var(--u) * 9); gap: calc(var(--u) * 5); }
.code-file { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: .8em; font-weight: 600; border-bottom: calc(var(--u) * 2.5) solid var(--lcd-ink); padding-bottom: calc(var(--u) * 4); }
.code { margin: 0; font-family: var(--font-code); font-size: max(13px, calc(var(--u) * 17.5)); line-height: 1.08; white-space: pre; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; }
.code code { display: block; font: inherit; }
.code .k { font-weight: 700; } .code .s { text-decoration: underline dotted; text-underline-offset: 2px; } .code .c { opacity: .55; }
.code-file > span:nth-child(2) { margin-left: auto; }
.code-foot { font-size: .82em; font-weight: 700; min-height: 1.3em; }
.code .cur { display: inline-block; width: .5em; height: 1em; background: var(--lcd-ink); vertical-align: -.12em; animation: tick 1s steps(2) infinite; }

/* Düğmeler */
.bmo-btn, .q { position: absolute; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.bmo-btn::before { content: ''; position: absolute; inset: calc(var(--u) * -6); }
.bmo-btn svg, .dpad svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bmo-btn .shd { fill: var(--ink); stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.bmo-btn .face { transition: transform .07s; }
.bmo-btn.is-down .face, .bmo-btn:active .face { transform: translateY(var(--press, 5px)); }
.bmo-red { --press: 7px; } .bmo-blue { --press: 4px; } .bmo-tri { --press: 4px; }
.bmo-red .face circle { fill: var(--red); stroke: var(--ink); stroke-width: 5; }
.bmo-red .shine { fill: rgba(255, 255, 255, .42); stroke: none !important; }
.bmo-blue .face circle { fill: var(--blue); stroke: var(--ink); stroke-width: 4.5; }
.bmo-tri .face path { fill: var(--cyan); stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.bmo-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: calc(var(--u) * 4); border-radius: 50%; }
.dpad .shd { fill: var(--ink); stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.dpad .plus { fill: var(--yellow); stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.dpad .tick { fill: var(--ink); opacity: .75; }
.dpad .face { transition: transform .07s; }
.dpad.is-down .face { transform: translateY(4px); }
.q { inset: 0; width: 100%; height: 100%; }
.q-up { clip-path: polygon(0 0, 100% 0, 50% 50%); } .q-right { clip-path: polygon(100% 0, 100% 100%, 50% 50%); }
.q-down { clip-path: polygon(0 100%, 100% 100%, 50% 50%); } .q-left { clip-path: polygon(0 0, 0 100%, 50% 50%); }
.q:focus-visible { outline: none; background: rgba(15, 47, 43, .22); }
.bmo.hint-a .bmo-red .face circle:first-child { animation: pulse-a 1.6s ease-in-out infinite; }
.bmo-red { overflow: visible; }
.bmo.hint-a .bmo-red::after { content: ''; position: absolute; inset: calc(var(--u) * -4); border-radius: 50%; border: calc(var(--u) * 3) solid var(--red); animation: ring 1.6s ease-out infinite; pointer-events: none; }

/* Kartuş yuvası */
.bmo-cart { pointer-events: none; }
.bmo-cart span { position: absolute; inset: 0; border-radius: calc(var(--u) * 5); background: var(--cc, var(--yellow)); border: calc(var(--u) * 4) solid var(--ink); transform: translateX(calc(var(--u) * -34)); opacity: 0; transition: transform .38s var(--ease), opacity .2s; }
.bmo-cart.in span { transform: none; opacity: 1; }
.bmo-cart span::after { content: ''; position: absolute; right: calc(var(--u) * 8); top: 22%; bottom: 22%; width: calc(var(--u) * 16); background: repeating-linear-gradient(90deg, rgba(15, 47, 43, .55) 0 calc(var(--u) * 2.5), transparent calc(var(--u) * 2.5) calc(var(--u) * 6)); }

/* Dış parçalar */
.bmo-bubble { position: relative; justify-self: center; max-width: min(100%, 22em); padding: 10px 16px; background: #fff; border: var(--line); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); font: 700 14.5px/1.3 var(--font-body); text-align: center; transition: opacity .3s; }
.bmo-bubble::after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 16px; height: 16px; background: #fff; border-right: var(--line); border-bottom: var(--line); transform: translateX(-50%) rotate(45deg); }
.bmo-bubble.swap { opacity: 0; }
.bmo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; max-width: 34em; }
.bmo-hint { font-size: 14.5px; font-weight: 600; text-align: center; max-width: 26em; color: var(--ink); }
.sound-toggle { margin: 0; padding: 5px 12px; border: 2px solid var(--ink); border-radius: 999px; background: rgba(255, 255, 255, .35); font: 700 12.5px/1 var(--font-body); }
.sound-toggle[aria-pressed='true'] { background: var(--yellow); }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 5; }
.confetti i { position: absolute; top: 40%; width: 10px; height: 10px; border: 2px solid var(--ink); animation: fall 1.4s cubic-bezier(.2, .6, .4, 1) forwards; }

@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes hop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -22px; } }
@keyframes wave { 0%, 56%, 100% { transform: rotate(0); } 64% { transform: rotate(-16deg); } 72% { transform: rotate(8deg); } 80% { transform: rotate(-14deg); } 88% { transform: rotate(4deg); } }
@keyframes sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(5deg); } }
@keyframes step { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(2deg); } }
@keyframes cheer-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-36deg); } }
@keyframes cheer-l { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(36deg); } }
@keyframes pulse-a { 0%, 100% { filter: none; } 50% { filter: brightness(1.18); } }
@keyframes ring { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
@keyframes tick { 0% { opacity: 1; } 50% { opacity: .2; } }
@keyframes fall { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rt)); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .bmo, .arm-r, .arm-l, .leg-l, .eye, .prompt, .bmo.hint-a .bmo-red::after, .mini-face i { animation: none !important; }
}

/* Küçük ok işaretleri (yazı tipinde bulunmayan glifler yerine) */
.arr { display: inline-block; width: 0; height: 0; margin: 0 calc(var(--u) * 1.5); border-top: calc(var(--u) * 5) solid transparent; border-bottom: calc(var(--u) * 5) solid transparent; vertical-align: -.06em; }
.arr-l { border-right: calc(var(--u) * 7) solid currentColor; }
.arr-r { border-left: calc(var(--u) * 7) solid currentColor; }

@media (min-width: 1600px) { .bmo { width: min(100%, 600px, calc((100svh - 300px) * .7857)); } }

/* Pikselli yazı tipinde kalın ağırlık C harfini O gibi gösteriyor, LCD'de en fazla 600 */
.say, .scr-title, .hud, .mi, .proj-head, .proj-foot, .code-file, .code-foot { font-weight: 600 !important; }
.mono { font-weight: 600; }

/* Menü satırları net okunsun: VT323'te C harfi açık */
.mi { font-family: var(--font-code) !important; font-size: max(18px, calc(var(--u) * 31)) !important; font-weight: 400 !important; line-height: 1; }
.mi small { font-size: .82em; }