<template>
  <div class="screen">
    <slot></slot>
  </div>
</template>

<style scoped>
.screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: #c3e4aa;
    overflow: hidden;
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, 0.25),
        inset 0 0 10px rgba(0, 0, 0, 0.35);
}

/* LCD 格線 */
.screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 3px 3px;
    opacity: 0.55;
    pointer-events: none;
    z-index: 10; /* Ensure grid is above content but below UI overlays if any */
}
</style>
