/* MODURIA site oyuncağı — halka halka koloni */
.toy-moduria { position: relative; width: 100%; height: 100%; min-height: 300px; color: var(--paper, #f4ead8); font-family: var(--font, system-ui, sans-serif); user-select: none; -webkit-user-select: none; }
.toy-moduria .mo-panel { position: absolute; inset: 0; overflow: hidden; border-radius: 8px; border: 1px solid rgba(229, 140, 255, .42); background: #12041e; box-shadow: 0 0 28px rgba(229, 140, 255, .15), inset 0 0 40px rgba(229, 140, 255, .06); }
.toy-moduria .mo-stage { position: absolute; inset: 0; outline: none; touch-action: manipulation; }
.toy-moduria .mo-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--world, #e58cff); }
.toy-moduria .mo-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.toy-moduria .mo-bars { position: absolute; left: 8px; right: 8px; top: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; pointer-events: none; }
.toy-moduria .mo-bar { padding: 4px 6px 6px; border: 1px solid rgba(229, 140, 255, .3); border-radius: 3px; background: rgba(18, 4, 30, .78); transition: border-color .2s; }
.toy-moduria .mo-bl { display: block; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c); margin-bottom: 4px; }
.toy-moduria .mo-track { display: block; height: 6px; border-radius: 3px; background: rgba(244, 234, 216, .12); overflow: hidden; }
.toy-moduria .mo-fill { display: block; width: 100%; height: 100%; background: var(--c); box-shadow: 0 0 8px var(--c); transform-origin: left center; transform: scaleX(.5); transition: transform .25s ease-out, background .2s; }
.toy-moduria .mo-bar.is-low { border-color: #ff5a6e; }
.toy-moduria .mo-bar.is-low .mo-fill { background: #ff5a6e; box-shadow: 0 0 8px #ff5a6e; }
.toy-moduria .mo-bar.is-hit { border-color: #b35cff; box-shadow: 0 0 14px rgba(179, 92, 255, .8); }
.toy-moduria .mo-toast { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); max-width: calc(100% - 16px); width: max-content; padding: 4px 10px; border-radius: 3px; border: 1px solid rgba(244, 234, 216, .22); background: rgba(18, 4, 30, .85); font-size: 12px; letter-spacing: .04em; text-align: center; pointer-events: none; opacity: 0; transition: opacity .25s; }
.toy-moduria .mo-toast.is-on { opacity: 1; }
.toy-moduria .mo-ctl { position: absolute; left: 8px; right: 8px; bottom: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.toy-moduria .mo-tb, .toy-moduria .mo-reset, .toy-moduria .mo-again { cursor: pointer; font: inherit; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper, #f4ead8); background: rgba(18, 4, 30, .85); border: 1px solid rgba(229, 140, 255, .4); border-radius: 3px; padding: 6px 10px; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; }
.toy-moduria .mo-tb:hover, .toy-moduria .mo-reset:hover, .toy-moduria .mo-again:hover { background: rgba(229, 140, 255, .18); }
.toy-moduria .mo-tb:focus-visible, .toy-moduria .mo-reset:focus-visible, .toy-moduria .mo-again:focus-visible { outline: 2px solid var(--paper, #f4ead8); outline-offset: 2px; }
.toy-moduria .mo-tb .mo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.toy-moduria .mo-tb[aria-pressed="true"] { border-color: var(--c); background: rgba(244, 234, 216, .1); box-shadow: 0 0 10px -2px var(--c); }
.toy-moduria .mo-reset { color: var(--world, #e58cff); }
.toy-moduria .mo-win { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; padding: 16px 24px; border: 1px solid var(--world, #e58cff); border-radius: 6px; background: rgba(18, 4, 30, .9); box-shadow: 0 0 30px rgba(229, 140, 255, .4); animation: mo-in .4s ease-out; }
.toy-moduria .mo-win[hidden] { display: none; }
.toy-moduria .mo-win-t { font-family: var(--mono, monospace); font-size: clamp(16px, 4.2vw, 24px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--world, #e58cff); text-shadow: 0 0 14px var(--world, #e58cff); }
.toy-moduria .mo-win-s { margin: 6px 0 12px; font-size: 13px; color: rgba(244, 234, 216, .8); }
.toy-moduria .mo-note { position: absolute; right: 8px; bottom: 6px; font-size: 10px; letter-spacing: .06em; color: var(--muted, #9a968c); opacity: .85; pointer-events: none; }
@keyframes mo-in { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) { .toy-moduria .mo-win { animation: none; } .toy-moduria .mo-fill, .toy-moduria .mo-toast { transition: none; } }