/* Photo levels: the pick-and-frame dialog. Reuses the online dialog look (multiplayer.css). */
.photo-dialog h2{margin-top:10px}
.file-button{position:relative;cursor:pointer;margin-bottom:9px;overflow:hidden}.file-button input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.file-button:focus-within{outline:3px solid #d6a333;outline-offset:3px}
.secondary-button.file-button{display:flex;justify-content:center;align-items:center;padding:15px 16px;font-size:14px}
.photo-last{width:100%;display:flex;align-items:center;gap:12px;margin-top:14px;padding:9px 14px 9px 9px;border:1px solid #e0e3d3;border-radius:13px;background:#f6f5ec;text-align:left;font-size:11px;line-height:1.5;color:#7b8970}.photo-last strong{font-size:13px;color:var(--ink)}.photo-last>span:last-child{margin-left:auto;font-size:18px;color:var(--green)}
.photo-last canvas{width:38px;height:40px;flex:none;border-radius:4px;image-rendering:pixelated}
.photo-stage{display:flex;align-items:center;justify-content:center;gap:10px;touch-action:none;user-select:none;cursor:grab;background:#f6f5ec;border-radius:16px;padding:14px 10px 10px}.photo-stage:active{cursor:grabbing}
.photo-stage figure{margin:0;text-align:center}.photo-stage canvas{display:block;border-radius:6px;box-shadow:0 4px 14px #34422f1f}.photo-stage figcaption{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#969e8d;margin-top:7px}
#photo-crop{width:96px;height:102px}#photo-preview{width:128px;height:136px;image-rendering:pixelated}.photo-arrow{color:#b4bca7;font-size:18px}
.photo-tip{font-size:10px;color:#9aa08f;text-align:center;margin:7px 0 12px}
.range{display:grid;grid-template-columns:88px 1fr;align-items:center;gap:10px;margin-bottom:8px;font-size:11px;font-weight:600;color:#6c7763}.range b{color:var(--green);margin-left:3px}.range input{width:100%;accent-color:var(--green)}
.photo-swatches{list-style:none;padding:0;margin:12px 0 16px;display:flex;flex-wrap:wrap;gap:5px}.photo-swatches li{display:flex;align-items:center;gap:5px;font-size:10px;color:#6c7763;background:#f6f5ec;border-radius:20px;padding:3px 9px 3px 3px;margin:0}.photo-swatches li>span:first-child{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px #0000001a;padding:0;background-clip:padding-box}
.photo-dialog .photo-swatches li>span{align-self:center}
.palette .pot-name{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.online #photo-button{display:none}
.photo-swatches li>span:last-child{background:none;padding:0;border-radius:0;font-size:10px;color:#6c7763}
.photo-palettes{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.photo-palette{border:1px solid #e0e3d3;background:transparent;border-radius:10px;padding:6px 4px 5px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px;color:#6c7763;min-width:0}.photo-palette .strip{width:100%;height:12px;border-radius:4px;box-shadow:inset 0 0 0 1px #0000001a}.photo-palette[aria-checked="true"]{background:#edf0e3;border-color:#a9c095;color:var(--ink);font-weight:600}
.photo-dialog .field{margin-bottom:12px}
.toggle{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:600;color:#6c7763;margin:2px 0 10px;cursor:pointer}.toggle input{accent-color:var(--green);width:16px;height:16px;margin:0}.toggle small{font-weight:400;color:#9aa08f;font-size:10px}