/* ==========================================================================
   Hoolistic Web Toolkit · Mini juego arcade
   ========================================================================== */

@font-face{font-family:"HWT Pixel";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/silkscreen-400-latin.woff2") format("woff2")}

.hwt-arcade{position:relative;border-radius:16px;padding:12px 12px 10px;box-sizing:border-box;max-width:100%}
.hwt-arcade *{box-sizing:border-box}
.hwt-arcade__screen{position:relative}
.hwt-arcade canvas{display:block;width:100%;height:auto;aspect-ratio:352/127;image-rendering:pixelated;border-radius:6px;touch-action:pan-y;outline:none}
.hwt-arcade canvas:focus-visible{box-shadow:0 0 0 2px #fcca73}
.hwt-arcade__play{
	position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	font-family:"HWT Pixel",ui-monospace,monospace;font-size:clamp(11px,1.4vw,15px);letter-spacing:.06em;line-height:1;
	border:0;padding:9px 16px;border-radius:6px;cursor:pointer;margin:0;text-transform:none;
}
.hwt-arcade__play[hidden]{display:none}
.hwt-arcade.is-over .hwt-arcade__play{top:auto;bottom:12%;transform:translateX(-50%)}
.hwt-arcade__play:focus-visible{outline:2px solid #fcca73;outline-offset:3px}
.hwt-arcade__bar{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-family:"HWT Pixel",ui-monospace,monospace;font-size:10px;letter-spacing:.08em;line-height:1}
.hwt-arcade__dots{display:flex;gap:6px}
.hwt-arcade__dots i{width:9px;height:9px;border-radius:50%;display:block}

/* Recreativa (por defecto) */
.hwt-arcade--arc{background:#141316;box-shadow:inset 0 0 0 1px #2c2a30,0 10px 24px -14px rgba(0,0,0,.5)}
.hwt-arcade--arc .hwt-arcade__bar{color:#8d8993}
.hwt-arcade--arc .hwt-arcade__dots i{background:#38353c}
.hwt-arcade--arc .hwt-arcade__dots i:last-child{background:#fcca73}
.hwt-arcade--arc .hwt-arcade__play{background:#fcca73;color:#141316}

/* Pantalla LCD */
.hwt-arcade--lcd{background:#e6e0cf;box-shadow:inset 0 0 0 1px #d3ccb8,0 10px 24px -14px rgba(0,0,0,.35)}
.hwt-arcade--lcd .hwt-arcade__bar{color:#7d7766}
.hwt-arcade--lcd .hwt-arcade__dots i{background:#cfc7b1}
.hwt-arcade--lcd .hwt-arcade__dots i:last-child{background:#fcca73}
.hwt-arcade--lcd .hwt-arcade__play{background:#262624;color:#fcca73}

.hwt-arcade--nobar .hwt-arcade__bar{display:none}
.hwt-arcade--nobar{padding-bottom:12px}