* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.4 system-ui, sans-serif; background: #15171c; color: #eee; }
#app { max-width: 480px; margin: 0 auto; padding: 16px; min-height: 100vh; }
h1 { margin: 8px 0 16px; font-size: 28px; }
h2 { margin: 16px 0 8px; font-size: 18px; color: #aab; font-weight: 600; }
input, button { font: inherit; border-radius: 10px; border: 0; padding: 14px; width: 100%; }
input { background: #262a33; color: #fff; margin-bottom: 10px; }
button { background: #3b6df0; color: #fff; font-weight: 600; margin-bottom: 10px; }
button:disabled { opacity: .4; }
button.secondary { background: #2d323d; }
.big { display: flex; gap: 10px; }
.big button { padding: 28px 10px; font-size: 22px; }
.stay { background: #2f8f5b; } .leave { background: #c0562f; }
.big button.picked { outline: 3px solid #fff; }
.card { background: #20242c; border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; gap: 8px; }
.row + .row { border-top: 1px solid #2b303a; }
.muted { color: #8a90a0; font-size: 14px; }
.path { display: flex; flex-wrap: wrap; gap: 8px; }
.pc { min-width: 58px; text-align: center; padding: 8px; border-radius: 10px; background: #2b303a; font-size: 22px; }
.pc small { display: block; font-size: 12px; color: #9ab; }
.pc.treasure { background: #234a6e; } .pc.hazard { background: #6e2323; } .pc.artifact { background: #6e5a23; }
.pc.new { outline: 2px solid #fff; }
.err { color: #ff8a80; }
.link { word-break: break-all; user-select: all; background: #262a33; padding: 10px; border-radius: 10px; font-size: 15px; }
.out { opacity: .5; }
.banner { background: #2b303a; border-radius: 12px; padding: 12px; margin-bottom: 10px; text-align: center; }

.pc.empty { opacity: .45; }
.warn { border: 1px solid #c0562f; text-align: center; }
.fly { position: fixed; z-index: 10; font-size: 18px; pointer-events: none; text-shadow: 0 0 6px #000; }
.trophy { font-size: 48px; padding: 20px; } .trophy .wt { font-size: 26px; font-weight: 700; }
.row.winner { font-weight: 700; color: #ffd966; }

.pc.back { background: repeating-linear-gradient(45deg, #3a2f66, #3a2f66 6px, #2b2350 6px, #2b2350 12px); border: 2px solid #6a5acd; }
.pc { will-change: transform; }
.rules { font-size: 15px; } .rules p { margin: 0 0 10px; }
.qr { background: #fff; padding: 14px; border-radius: 12px; margin: 0 auto 10px; width: 240px; height: 240px; }
.qr svg { width: 100%; height: 100%; display: block; }
.link { font-size: 17px; }
.kick { width: auto; margin: 0; padding: 4px 12px; background: #5a2b2b; }
.mine { text-decoration: underline dotted #667; }
button, .mine, .row { touch-action: manipulation; user-select: none; }
#rename { user-select: text; }