@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700;800&display=swap');

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111;font-family:"MS Sans Serif","Space Grotesk",system-ui,sans-serif;color:#111;touch-action:none}
.window{height:100dvh;display:flex;flex-direction:column;background:#c0c0c0;border-top:3px solid #fff;border-left:3px solid #fff;border-right:3px solid #404040;border-bottom:3px solid #404040}
.titlebar{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 7px;background:linear-gradient(90deg,#000080,#1084d0);color:white;font-weight:900}
.winbuttons{display:flex;gap:3px}
.winbuttons b{width:20px;height:20px;display:grid;place-items:center;background:#c0c0c0;color:#111;border-top:2px solid #fff;border-left:2px solid #fff;border-right:2px solid #404040;border-bottom:2px solid #404040;font-size:12px}
.menubar{height:24px;display:flex;align-items:center;gap:22px;padding:0 9px;background:#efefef;border-bottom:2px solid #808080;font-weight:700;font-size:13px}
.top-controls{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:6px;padding:6px}
.win-btn{height:34px;display:flex;align-items:center;justify-content:center;text-decoration:none;background:#c0c0c0;color:#111;border-top:3px solid #fff;border-left:3px solid #fff;border-right:3px solid #404040;border-bottom:3px solid #404040;font-family:inherit;font-weight:900;font-size:12px}
.win-btn:active{border-top:3px solid #404040;border-left:3px solid #404040;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:translate(1px,1px)}
.hud{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 6px 6px}
.hud div{display:grid;text-align:center;padding:6px;background:#d4d4d4;border-top:3px solid #fff;border-left:3px solid #fff;border-right:3px solid #404040;border-bottom:3px solid #404040}
.hud span{font-size:11px;font-weight:900}
.hud strong{font-size:24px}
.game{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:10px;background:#d9d9d9}
.tray-panel,.target-panel{min-height:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px;background:#bdbdbd;border-top:3px solid #fff;border-left:3px solid #fff;border-right:3px solid #404040;border-bottom:3px solid #404040}
h2{margin:0;font-size:18px}
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(100%,430px);aspect-ratio:1/1}
.slot{position:relative;aspect-ratio:1/1;background:#adadad;border-top:3px solid #808080;border-left:3px solid #808080;border-right:3px solid #fff;border-bottom:3px solid #fff}
.tile{position:relative;width:100%;height:100%;background:linear-gradient(135deg,#f4f4f4,#b3b3b3);border-top:4px solid #fff;border-left:4px solid #fff;border-right:4px solid #404040;border-bottom:4px solid #404040;cursor:grab;user-select:none;touch-action:none}
.tile.dragging{opacity:.65}
.tile svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tile line.dark{stroke:#555;stroke-width:3}
.tile line.light{stroke:#fff;stroke-width:1.5}
.num{position:absolute;z-index:2;font-weight:900;font-size:clamp(18px,3vw,34px);line-height:1;color:#111;text-shadow:1px 1px 0 #fff;pointer-events:none}
.num.top{top:10%;left:50%;transform:translateX(-50%)}
.num.right{right:13%;top:50%;transform:translateY(-50%)}
.num.bottom{bottom:10%;left:50%;transform:translateX(-50%)}
.num.left{left:13%;top:50%;transform:translateY(-50%)}
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.72);padding:18px;z-index:20}
.overlay.show{display:flex}
.modal{position:relative;width:min(92vw,640px);max-height:84dvh;overflow:auto;background:#c0c0c0;padding:24px;border-top:4px solid #fff;border-left:4px solid #fff;border-right:4px solid #404040;border-bottom:4px solid #404040}
.modal p{font-size:16px;line-height:1.55}
.close{position:absolute;right:10px;top:10px;width:36px;height:36px;background:#c0c0c0;border-top:3px solid #fff;border-left:3px solid #fff;border-right:3px solid #404040;border-bottom:3px solid #404040;font-size:22px}

@media(max-width:700px){
.game{grid-template-columns:1fr;gap:8px;padding:6px}
.tile-grid{width:min(100%,360px);gap:5px}
.tray-panel,.target-panel{padding:6px}
.num{font-size:22px}
}

.tile-grid {
grid-template-columns: repeat(3, 1fr) !important;
grid-template-rows: repeat(3, 1fr) !important;
align-content: center;
justify-content: center;
}

.slot {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
}

.tile {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
}

.tray-panel,
.target-panel {
overflow: hidden;
}

.game {
grid-template-columns: 1fr 1fr;
}

.slot.bad-drop {
background: #ffb6b6 !important;
box-shadow: inset 0 0 0 4px #b00000;
}

.target-panel.win {
background: #b8ffb8 !important;
box-shadow:
0 0 25px rgba(0,255,0,.45),
inset 0 0 0 4px #0a990a;
transition: all .2s ease;
}

@media (hover: none), (pointer: coarse), (max-width: 900px) {
.game {
grid-template-columns: 1fr !important;
grid-template-rows: auto auto !important;
overflow: auto;
}

.target-panel {
order: 1;
}

.tray-panel {
order: 2;
}

.tile-grid {
width: min(100%, 340px) !important;
}

.tray-panel,
.target-panel {
width: 100%;
}

.window {
overflow: hidden;
}

.game {
min-height: 0;
}
}

@media (hover: none), (pointer: coarse), (max-width: 900px) {
html,
body {
overflow: auto !important;
height: auto !important;
touch-action: manipulation;
}

.window {
height: auto !important;
min-height: 100dvh;
overflow: visible !important;
}

.game {
display: flex !important;
flex-direction: column !important;
overflow: visible !important;
padding-bottom: 90px;
}

.target-panel,
.tray-panel {
min-height: auto !important;
}

.tile-grid {
width: min(92vw, 330px) !important;
gap: 5px !important;
}

.tile {
border-top-width: 3px;
border-left-width: 3px;
border-right-width: 3px;
border-bottom-width: 3px;
}

.num {
font-size: clamp(18px, 7vw, 30px) !important;
}

.mobile-help {
display: block;
}

.tile.selected {
outline: 5px solid #000080;
outline-offset: -5px;
box-shadow: 0 0 0 4px #ffff00;
}
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
.mobile-help {
display: none !important;
}
}