.drop4-app{--d4-red:#e53935;--d4-yellow:#fdd835;--d4-board:#1e50c8;--d4-hole:#0d2260;--d4-ink:#1b2333;--d4-muted:#667085;--d4-card:#fff;--d4-line:#e3e8f2;max-width:560px;margin:1.5em auto;color:var(--d4-ink);font-family:inherit;line-height:1.4}.drop4-app *, .drop4-app *::before, .drop4-app *::after{box-sizing:border-box}.drop4-app .d4-card{background:var(--d4-card);border-radius:18px;padding:22px;box-shadow:0 8px 30px rgba(20, 40, 90, .12);border:1px
solid var(--d4-line)}.drop4-app .d4-title{font-size:1.7em;font-weight:800;text-align:center;margin:0
0 6px;color:var(--d4-ink)}.drop4-app .d4-sub{text-align:center;color:var(--d4-muted);margin:0
0 16px}.drop4-app .d4-center{text-align:center;justify-content:center}.drop4-app .d4-notice{background:#fff4e5;color:#8a4b00;padding:10px
12px;border-radius:10px;text-align:center;margin:0
0 14px}.drop4-app .d4-toast{min-height:1.3em;margin:10px
0 0;text-align:center;color:#b42318;font-weight:600}.drop4-app .d4-or{text-align:center;color:var(--d4-muted);margin:18px
0 8px;font-size: .9em}.drop4-app .d4-loading{text-align:center;color:var(--d4-muted)}.drop4-app .d4-logo{display:flex;justify-content:center;gap:8px;margin-bottom:8px}.drop4-app .d4-logo .d4-chip{width:26px;height:26px}.drop4-app .d4-label{display:block;font-weight:600;margin:0
0 6px;color:var(--d4-ink)}.drop4-app .d4-input{width:100%;padding:12px
14px;font-size:16px;font-family:inherit;border:2px
solid var(--d4-line);border-radius:10px;background:#fff;color:var(--d4-ink);box-shadow:none;margin:0;height:auto}.drop4-app .d4-input:focus{outline:none;border-color:var(--d4-board)}.drop4-app .d4-codeinput{text-transform:uppercase;letter-spacing: .15em}.drop4-app .d4-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.drop4-app .d4-actions .d4-btn{flex:1 1 160px}.drop4-app .d4-actions.d4-center .d4-btn{flex:0 1 auto}.drop4-app .d4-joinrow{display:flex;gap:10px}.drop4-app .d4-joinrow .d4-input{flex:1;min-width:0}.drop4-app .d4-btn{-webkit-appearance:none;appearance:none;cursor:pointer;border:0;border-radius:10px;padding:12px
18px;margin:0;font:inherit;font-weight:700;line-height:1.2;min-height:0;background:#eef2fb;color:#1b2a5c;box-shadow:none;text-transform:none;letter-spacing:0;transition:transform .08s ease, filter .15s ease}.drop4-app .d4-btn:hover:not(:disabled){filter:brightness(.96)}.drop4-app .d4-btn:active:not(:disabled){transform:translateY(1px)}.drop4-app .d4-btn:disabled{opacity: .55;cursor:default}.drop4-app .d4-btn.d4-primary{background:linear-gradient(#2f66e8, #1e50c8);color:#fff}.drop4-app .d4-btn.d4-link{background:transparent;color:var(--d4-muted);text-decoration:underline;font-weight:600}.drop4-app .d4-code{text-align:center;font-size:2.4em;font-weight:800;letter-spacing: .2em;padding:10px
0 14px;color:var(--d4-board);font-family:ui-monospace,Menlo,Consolas,monospace}.drop4-app .d4-spinner{width:30px;height:30px;margin:18px
auto 6px;border-radius:50%;border:4px
solid var(--d4-line);border-top-color:var(--d4-board);animation:d4spin 1s linear infinite}.drop4-app .d4-wait .d4-link{display:block;margin:8px
auto 0}.drop4-app .d4-players{display:flex;align-items:stretch;gap:8px;margin-bottom:16px}.drop4-app .d4-player{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:10px;padding:10px
12px;border-radius:12px;border:2px
solid var(--d4-line);background:#f8faff;transition:border-color .2s, background .2s, box-shadow .2s}.drop4-app .d4-player.active{background:#fff;box-shadow:0 0 0 3px rgba(30, 80, 200, .12)}.drop4-app .d4-player.p1.active{border-color:var(--d4-red)}.drop4-app .d4-player.p2.active{border-color:#f2b705}.drop4-app .d4-pinfo{min-width:0;flex:1}.drop4-app .d4-pname{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drop4-app .d4-you{font-weight:500;color:var(--d4-muted)}.drop4-app .d4-pscore{font-size: .85em;color:var(--d4-muted)}.drop4-app .d4-mid{display:flex;flex-direction:column;justify-content:center;align-items:center;font-size: .8em;color:var(--d4-muted);min-width:52px;text-align:center}.drop4-app .d4-round{font-weight:700}.drop4-app .d4-dot{width:10px;height:10px;border-radius:50%;flex:none;background:#c7cdd9}.drop4-app .d4-dot.on{background:#22c55e}.drop4-app .d4-dot.off{background:#f59e0b}.drop4-app .d4-disc{display:block;border-radius:50%}.drop4-app .d4-disc.p1{background:radial-gradient(circle at 35% 30%, #ff9a94, var(--d4-red) 55%, #b71c1c)}.drop4-app .d4-disc.p2{background:radial-gradient(circle at 35% 30%, #fff59d, var(--d4-yellow) 55%, #f9a825)}.drop4-app .d4-chip{width:30px;height:30px;flex:none}.drop4-app .d4-board{display:grid;grid-template-columns:repeat(7, 1fr);gap:6px;padding:10px;background:var(--d4-board);border-radius:16px;box-shadow:inset 0 -4px 0 rgba(0, 0, 0, .22), 0 6px 16px rgba(30, 80, 200, .35)}.drop4-app .d4-col{-webkit-appearance:none;appearance:none;display:flex;flex-direction:column;gap:6px;margin:0;padding:0;border:0;border-radius:12px;overflow:hidden;min-height:0;background:transparent;box-shadow:none;cursor:default;opacity:1 !important;color:inherit}.drop4-app .d4-col:not(:disabled){cursor:pointer}.drop4-app .d4-col:not(:disabled):hover,
.drop4-app .d4-col:not(:disabled):focus-visible{background:rgba(255, 255, 255, .2);outline:none}.drop4-app .d4-cell{display:block;position:relative;width:100%;aspect-ratio:1 / 1;border-radius:50%;background:var(--d4-hole);box-shadow:inset 0 3px 6px rgba(0, 0, 0, .55)}.drop4-app .d4-cell .d4-disc{position:absolute;inset:0;box-shadow:inset 0 -3px 5px rgba(0, 0, 0, .25)}.drop4-app .d4-disc.new{animation:d4drop .55s cubic-bezier(.5, 0, .9, .5)}.drop4-app .d4-disc.win{box-shadow:0 0 0 3px #fff, 0 0 16px 5px rgba(255, 255, 255, .85);animation:d4pulse 1s ease-in-out infinite}.drop4-app .d4-disc.new.win{animation:d4drop .55s cubic-bezier(.5, 0, .9, .5), d4pulse 1s ease-in-out .55s infinite}.drop4-app .d4-status{text-align:center;font-weight:800;font-size:1.15em;margin:16px
0 4px;min-height:1.4em}.drop4-app .d4-status.mine{color:var(--d4-board)}.drop4-app .d4-status.good{color:#15803d}.drop4-app .d4-status.bad{color:#b42318}.drop4-app .d4-game .d4-actions{margin-top:10px}@keyframes
d4spin{to{transform:rotate(360deg)}}@keyframes
d4pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes
d4drop{0%{transform:translateY(calc(var(--fall, 3) * -115%))}70%{transform:translateY(0)}82%{transform:translateY(-9%)}100%{transform:translateY(0)}}@media (max-width: 440px){.drop4-app .d4-card{padding:14px}.drop4-app .d4-players{flex-wrap:wrap}.drop4-app .d4-mid{order:-1;flex-basis:100%;flex-direction:row;gap:10px}.drop4-app .d4-board{gap:4px;padding:7px}.drop4-app .d4-col{gap:4px}}@media (prefers-reduced-motion: reduce){.drop4-app .d4-disc.new, .drop4-app .d4-disc.new.win, .drop4-app .d4-disc.win, .drop4-app .d4-spinner{animation:none}}.drop4-app .d4-layout{display:grid;grid-template-columns:1fr;grid-template-areas:"players" "board" "info"}.drop4-app .d4-layout .d4-players{grid-area:players}.drop4-app .d4-layout .d4-board{grid-area:board;justify-self:center;max-width:100%}.drop4-app .d4-layout .d4-info{grid-area:info}.drop4-app.d4-compact .d4-card{padding:12px}.drop4-app.d4-compact{margin:8px
auto}.drop4-app.d4-compact .d4-players{margin-bottom:8px;gap:6px}.drop4-app.d4-compact .d4-player{padding:6px
10px}.drop4-app.d4-compact .d4-chip{width:24px;height:24px}.drop4-app.d4-compact .d4-mid{min-width:44px}.drop4-app.d4-compact .d4-status{margin:8px
0 2px;font-size:1em}.drop4-app.d4-compact .d4-game .d4-actions{margin-top:4px}.drop4-app.d4-compact .d4-game .d4-btn{padding:8px
14px}.drop4-app.d4-compact .d4-toast{margin-top:4px;min-height:0}.drop4-app.d4-compact .d4-rnote{margin:4px
0}.drop4-app.d4-landscape{max-width:880px}.drop4-app.d4-landscape .d4-layout{grid-template-columns:minmax(170px, 1fr) auto;grid-template-areas:"players board" "info board";grid-template-rows:auto 1fr;column-gap:16px}.drop4-app.d4-landscape .d4-players{flex-direction:column;flex-wrap:nowrap}.drop4-app.d4-landscape .d4-mid{order:-1;flex-basis:auto;flex-direction:row;gap:10px}.drop4-app.d4-landscape .d4-layout .d4-board{align-self:center;max-width:none}.drop4-app.d4-landscape .d4-info{align-self:start}.drop4-app.d4-landscape .d4-game .d4-actions{justify-content:center}