*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#f4f6fa;font-family:"Segoe UI",Tahoma,"Noto Sans Arabic",Arial,sans-serif;overflow:hidden;touch-action:none;overscroll-behavior:none}
#screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#fsBtn{position:fixed;top:10px;left:10px;z-index:10;border:none;background:rgba(20,33,61,.08);color:#14213d;border-radius:10px;width:42px;height:42px;font-size:20px;cursor:pointer;opacity:.55}
.wait{text-align:center;color:#14213d}
.wait img{width:150px;height:150px;border-radius:36px;box-shadow:0 14px 40px rgba(10,30,60,.25);animation:float 5s ease-in-out infinite}
.wait h1{font-size:26px;margin:22px 0 6px}.wait p{color:#5a6b8c;margin:0;font-size:16px}
.dots span{display:inline-block;width:9px;height:9px;margin:14px 4px 0;border-radius:50%;background:#1f8a9e;animation:dot 1.2s infinite}
.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
@keyframes float{50%{transform:translateY(-8px)}}
.join{background:#fff;padding:28px;border-radius:18px;box-shadow:0 14px 40px rgba(10,30,60,.12);text-align:center;width:min(380px,92vw)}
.join input{width:100%;font-size:24px;text-align:center;letter-spacing:3px;padding:12px;border:2px solid #cfdde6;border-radius:12px;margin:14px 0;font-family:Consolas,monospace;-webkit-user-select:text;user-select:text}
.join button{width:100%;font-size:18px;padding:12px;border:none;border-radius:12px;background:#1f8a9e;color:#fff;font-weight:800}
.err{color:#c0392b;margin-top:10px;min-height:20px}
#wrap{position:relative}
#stage{position:absolute;top:0;left:0;transform-origin:top left}
.e{position:absolute}
.e.anim{transition:left .55s ease,top .55s ease,opacity .45s ease}
.e img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.box.dash{border:2px dashed #b8c4d6;border-radius:10px;background:rgba(255,255,255,.55)}
.box.cell{background:#fff;border:2px solid #14213d;border-radius:6px}
.box.screen{background:repeating-linear-gradient(45deg,#e9d8a6,#e9d8a6 10px,#e3cf93 10px,#e3cf93 20px);border:2px solid #b08d2c;border-radius:10px;z-index:5}
.box.fill{border-radius:8px}
.tap{border-radius:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tap.tile{background:#fff;border:2px solid #dfe5ee;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.tap.tile img{width:88%;height:88%}
.tap .num{font-size:34px;font-weight:800;color:#14213d}
.tap.picked{outline:4px solid #3a86ff;outline-offset:2px}
.piece{cursor:grab;touch-action:none;z-index:3}
.piece.drag{z-index:50;filter:drop-shadow(0 8px 12px rgba(0,0,0,.3));cursor:grabbing}
.text{color:#14213d;white-space:pre-wrap;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800}
.text.card{background:#fff;border:2px solid #d99a1e;border-radius:14px;padding:16px 20px;text-align:start;justify-content:flex-start;font-weight:600;line-height:2}
.blank{color:#9aa7bd;font-size:18px}