/* All component rules are scoped. Host websites may set --ulms-cell-size. */
.ulms { --ulms-ink:#142a40; --ulms-orange:#bf4d20; --ulms-cream:#faf6ec; --ulms-cell-size:32px; color:var(--ulms-ink); font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; text-align:center; width:100%; max-width:1120px; margin-inline:auto; padding:24px 12px; }
.ulms, .ulms * { box-sizing:border-box; }
.ulms [hidden] { display:none!important; }
.ulms button { font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.ulms button:focus-visible, .ulms summary:focus-visible { outline:3px solid #1660b8; outline-offset:3px; z-index:2; }
.ulms-header { margin-bottom:18px; }
.ulms-brand { font-size:11px; font-weight:800; letter-spacing:2.1px; margin:0 0 6px; color:#9e3e18; }
.ulms-title { margin:0 auto 4px; max-width:680px; line-height:1; }
.ulms-wordmark { display:block; width:100%; height:auto; max-width:680px; object-fit:contain; }
.ulms-tagline { margin:0; color:#58636b; font-size:14px; }
.ulms-difficulties { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:20px; }
.ulms-difficulty { background:#fffdf7; border:1px solid #c3c7c4; border-radius:8px; padding:9px 18px; min-height:48px; font-weight:750!important; }
.ulms-difficulty[aria-pressed="true"] { background:var(--ulms-ink); border-color:var(--ulms-ink); color:white; }
.ulms-difficulty-detail { display:block; font-size:10px; font-weight:500; letter-spacing:.25px; margin-top:2px; opacity:.85; }
.ulms-quick-controls { margin:0 auto 16px; }
.ulms-quick-switch { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; border:1px solid #c3c7c4; border-radius:24px; background:#fffdf7; padding:7px 14px 7px 9px; font-size:13px!important; font-weight:750!important; }
.ulms-quick-switch[aria-checked="true"] { border-color:#a94018; background:#fff0dc; }
.ulms-quick-scope { font-size:10px; font-weight:500; color:#58636b; }
.ulms-lever { position:relative; width:36px; height:22px; border-radius:12px; background:#849198; box-shadow:inset 0 1px 2px #0003; }
.ulms-lever::after { content:''; position:absolute; width:16px; height:16px; top:3px; left:3px; background:white; border-radius:50%; box-shadow:0 1px 2px #0004; }
.ulms-quick-switch[aria-checked="true"] .ulms-lever { background:#a94018; }
.ulms-quick-switch[aria-checked="true"] .ulms-lever::after { left:17px; }
.ulms-quick-hint { margin:5px 0 0; font-size:11px; color:#58636b; }
.ulms-touch-controls { display:none; margin:0 auto 14px; }
.ulms-modes { display:flex; gap:6px; justify-content:center; }
.ulms-mode { background:#fffdf7; border:1px solid #bac2c7; border-radius:6px; min-height:44px; padding:8px 18px; font-size:13px!important; font-weight:700!important; }
.ulms-mode[aria-pressed="true"] { color:white; background:#a94018; border-color:#a94018; }
.ulms-touch-hint { font-size:11px; margin:7px 0 0; color:#58636b; }
.ulms-panel { width:fit-content; max-width:100%; min-width:min(324px,100%); margin:0 auto; padding:12px; border:1px solid #c6c7bc; border-radius:16px; background:var(--ulms-cream); box-shadow:0 6px 20px #182e4012; }
.ulms-status { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:96px; padding:0 5px 10px; }
.ulms-readout { min-width:80px; }
.ulms-readout-label { display:block; font-size:9px; letter-spacing:1.2px; color:#52606b; font-weight:800; }
.ulms-counter, .ulms-timer { display:block; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-variant-numeric:tabular-nums; font-weight:800; font-size:30px; line-height:1.25; }
.ulms-restart { position:relative; width:86px; height:86px; padding:2px; flex:0 0 86px; border:1px solid #d7d0bd; border-radius:50%; background:#f3deaa; }
.ulms-restart:hover { background:#f8d589; }
.ulms-restart:active { transform:translateY(1px); }
.ulms-mascot { display:block; width:100%; height:100%; object-fit:contain; }
.ulms-viewport { max-width:100%; max-height:65vh; max-height:65svh; overflow:auto; overscroll-behavior:contain; border:2px solid #354957; border-radius:3px; touch-action:manipulation; background:#e5e5da; scrollbar-color:#829099 #ecece3; }
.ulms-board { display:grid; grid-template-columns:repeat(var(--ulms-cols),var(--ulms-cell-size)); grid-auto-rows:var(--ulms-cell-size); width:max-content; margin-inline:auto; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:manipulation; }
.ulms-cell { position:relative; display:flex; align-items:center; justify-content:center; width:var(--ulms-cell-size); height:var(--ulms-cell-size); padding:0; border:0; border-right:1px solid #84949b; border-bottom:1px solid #84949b; border-top:2px solid #f7fbfa; border-left:2px solid #f7fbfa; border-radius:0; background:var(--ulms-covered,#c1d0d3); box-shadow:inset -1px -1px #a0b1b7; font:800 19px/1 ui-monospace,SFMono-Regular,Consolas,monospace!important; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.ulms-cell:focus-visible { outline-offset:-3px!important; }
.ulms-cell.ulms-revealed { background:var(--ulms-revealed,#f0f0e7); border:0; border-right:1px solid #cad0c8; border-bottom:1px solid #cad0c8; box-shadow:none; cursor:default; }
.ulms-cell.ulms-hit { background:#f4b8a0; }
.ulms-inactive { visibility:hidden; pointer-events:none; }
.ulms .ulms-number-1 { color:#1553ae; }
.ulms .ulms-number-2 { color:#21612c; }
.ulms .ulms-number-3 { color:#b22425; }
.ulms .ulms-number-4 { color:#432175; }
.ulms .ulms-number-5 { color:#7e281a; }
.ulms .ulms-number-6 { color:#006567; }
.ulms .ulms-number-7 { color:#162b3d; }
.ulms .ulms-number-8 { color:#4c5359; }
.ulms-icon { position:absolute; width:92%; height:92%; object-fit:contain; pointer-events:none; }
.ulms-wrong-flag::after { content:'×'; position:absolute; right:0; bottom:0; color:#a51219; font-size:21px; background:#fff8eb; line-height:.8; }
.ulms-bulb-intact { animation:ulms-bulb-vanish 100ms linear var(--ulms-crack-delay) forwards; }
.ulms-bulb-cracked { opacity:0; animation:ulms-crack 100ms linear var(--ulms-crack-delay) forwards; }
.ulms-glass-fragment { opacity:0; z-index:3; transform-origin:50% 36%; animation:ulms-glass-fly 420ms cubic-bezier(.18,.65,.35,1) var(--ulms-crack-delay) both; }
.ulms-shard-left { clip-path:polygon(0 0,44% 0,48% 19%,43% 33%,37% 42%,29% 36%,0 33%); --ulms-fly-x:-8px; --ulms-fly-y:-10px; --ulms-spin:-38deg; }
.ulms-shard-center { clip-path:polygon(44% 0,60% 0,54% 23%,59% 37%,50% 44%,43% 33%,48% 19%); --ulms-fly-x:1px; --ulms-fly-y:-14px; --ulms-spin:18deg; }
.ulms-shard-right { clip-path:polygon(60% 0,100% 0,100% 35%,70% 35%,65% 43%,59% 37%,54% 23%); --ulms-fly-x:9px; --ulms-fly-y:-8px; --ulms-spin:42deg; }
.ulms-start { color:#6c3200!important; background:#f4d288!important; font-size:12px!important; }
.ulms-message { margin:10px 0 0; min-height:21px; font-size:11px; color:#4d5c63; max-width:440px; }
.ulms-game-modes { display:flex; gap:6px; justify-content:center; margin:10px auto 2px; }
.ulms-game-mode,.ulms-stats-button { border:1px solid #a6b2b8; border-radius:20px; background:#fffdf7; min-height:40px; padding:7px 14px; font-size:12px!important; font-weight:750!important; }
.ulms-game-mode[aria-pressed="true"] { background:#17334a; color:#fff; border-color:#17334a; }
.ulms-game-mode:disabled { opacity:.5; cursor:default; }
.ulms-stats-button { margin-top:8px; }
.ulms-stats-panel { width:min(440px,100%); margin:10px auto 0; padding:12px; border:1px solid #bec8c8; border-radius:10px; background:#fffefa; text-align:left; box-shadow:0 4px 15px #182e4012; }
.ulms-stats-panel h3 { margin:0 0 8px; font-size:15px; }
.ulms-stats-grid { display:grid; grid-template-columns:1fr auto; gap:4px 16px; margin:0; font-size:12px; }
.ulms-stats-grid dt { color:#455a66; }.ulms-stats-grid dd { margin:0; font-weight:750; font-variant-numeric:tabular-nums; }
.ulms-stats-top,.ulms-stats-warning { margin:9px 0 0; font-size:11px; overflow-wrap:anywhere; }
.ulms-stats-warning { color:#9a3c1c; }
.ulms-help { max-width:640px; margin:20px auto 0; text-align:left; font-size:12px; color:#465863; }
.ulms-help summary { cursor:pointer; text-align:center; font-weight:700; min-height:32px; }
.ulms-help-content { border-top:1px solid #d9ddd8; margin-top:8px; }
.ulms-help strong { color:var(--ulms-ink); }
.ulms-fact { font-size:13px; max-width:540px; margin:16px auto; }
@keyframes ulms-bulb-vanish { from, to { opacity:0; } }
@keyframes ulms-glass-fly {
  0% { opacity:0; transform:translate(0,0) rotate(0); }
  1% { opacity:1; }
  65% { opacity:1; }
  100% { opacity:0; transform:translate(var(--ulms-fly-x),var(--ulms-fly-y)) rotate(var(--ulms-spin)); }
}
@keyframes ulms-crack { from, to { opacity:1; } }
@media (hover:hover) { .ulms-cell:not(.ulms-revealed):hover { filter:brightness(1.08); } }
/* Capability is detected at mount so pointer changes cannot resize a live board. */
.ulms.ulms-touch { --ulms-cell-size:34px; padding:16px 4px; }
.ulms-touch .ulms-touch-controls { display:block; }
.ulms-touch .ulms-header { margin-bottom:16px; }
.ulms-touch .ulms-panel { padding:8px; border-radius:12px; }
.ulms-touch .ulms-viewport { max-height:55vh; max-height:55svh; }
.ulms-touch .ulms-status { min-height:88px; }
.ulms-touch .ulms-difficulty { padding:8px 11px; }
.ulms-touch .ulms-difficulties { gap:6px; margin-bottom:14px; }
@media (max-width:500px) { .ulms-title { max-width:360px; } .ulms-status { gap:4px; } .ulms-readout { min-width:65px; } .ulms-counter,.ulms-timer { font-size:26px; } }
@media (prefers-reduced-motion:reduce) { .ulms-bulb-cracked { opacity:1; animation:none; } .ulms-bulb-intact, .ulms-glass-fragment { opacity:0; animation:none; } }
@media (forced-colors:active) { .ulms-cell { border:1px solid ButtonText; } .ulms-cell.ulms-revealed { border:1px dotted GrayText; } }