/* Give the main actions real labels, rather than replacing text in CSS. */
.action-icon{display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;border-radius:13px;background:var(--soft);font-size:30px}.action-icon svg{width:26px;height:26px}.action-copy{display:flex;flex-direction:column;gap:6px;min-width:0}#upload-open .action-copy strong,#resume .action-copy strong{display:block;font-size:16px;font-weight:600;margin:0;white-space:normal}.action-copy>span{display:block;font-size:12px;color:var(--muted);line-height:1.5}.action-arrow{margin-left:auto;font-size:23px;flex-shrink:0}.bottom-grid .upload,.bottom-grid .resume{gap:15px;text-align:left}.bottom-grid .upload{border-style:solid}.hero-upload{margin:10px 0 24px 12px;font-size:13px;padding:15px 17px;border-radius:10px;min-height:54px;vertical-align:top}.hero-notes{clear:both}
@media(max-width:800px),(max-height:600px) and (max-width:1100px){
 header{height:64px;padding:0;gap:6px}.brand .logo{width:32px;height:32px;border-radius:10px}.brand .logo svg{width:27px;height:27px}header #theme-toggle,header #sound{width:42px;min-width:42px;height:42px;min-height:42px}.intro{text-align:left;padding:24px 2px 20px}.intro h1{font-size:36px;line-height:1.12;margin:0 0 13px}.intro p{font-size:14px;line-height:1.5;margin:0}.intro .eyebrow,.hero-upload{display:none}.intro p br{display:block}
 .bottom-grid{display:flex;flex-direction:column;gap:10px;margin:0 0 26px}.bottom-grid>.upload{order:0;min-height:86px;padding:17px 15px;background:var(--green);border:0;border-radius:16px;color:#fffef6;box-shadow:0 6px 16px #23412b18}.bottom-grid>.upload:hover{background:#28553e}.bottom-grid>.upload .action-icon{background:#ffffff1c;color:#fffef6}#upload-open .action-copy strong{font-size:17px;color:#fffef6}#upload-open .action-copy>span{font-size:12px;color:#edf3df}.bottom-grid>.upload .action-arrow{color:#fffef6}.bottom-grid>.resume{order:1;min-height:76px;padding:14px 15px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:none}.resume .action-icon{width:42px;height:42px;font-size:28px}#resume .action-copy strong{font-size:16px}#resume .action-copy>span{font-size:12px}.bottom-grid>#phone-load{order:2;min-height:46px;padding:10px;font-size:13px;border:0;border-radius:9px;color:var(--green);background:var(--soft);width:100%}.dark .bottom-grid>.upload{background:#3d7050}.dark .bottom-grid>.upload:hover{background:#477b56}
 .gallery{gap:12px}.card{grid-template-columns:38% 1fr;min-height:150px}.card .photo{min-height:150px}.card h3{font-size:21px}.card p{font-size:12px;margin:7px 0 10px}.card-foot{font-size:8px;margin:0;letter-spacing:.3px}.card-foot b{width:28px;height:28px;min-width:28px;font-size:16px}.badge{font-size:7px;letter-spacing:.8px;left:8px;top:9px;padding:6px 8px}.daily-card{display:block}.daily-card .primary,.room-card>button{width:100%;margin-top:16px;min-height:48px;font-size:14px}
 .phone-playing .canvas-viewport{bottom:calc(258px + env(safe-area-inset-bottom))}.phone-playing #piece-shelf{height:calc(258px + env(safe-area-inset-bottom))}#phone-title{font-size:14px}.shelf-filters{gap:3px;padding:3px;background:var(--soft);border-radius:11px}.shelf-tools button{min-height:36px;padding:6px 11px;border:0;border-radius:8px}#phone-picture{border:1px solid var(--line);min-height:40px}.shelf-filters [aria-pressed=true]{box-shadow:0 1px 3px #0001}#shelf-pieces{grid-template-rows:repeat(2,62px);height:128px}.shelf-piece{height:62px;min-height:62px;border-radius:11px}.dark .shelf-piece{background:#354b37}.shelf-piece[aria-pressed=true]{border-color:#c39236;background:#edddb9;box-shadow:inset 0 0 0 1px #c39236}.dark .shelf-piece[aria-pressed=true]{background:#59623b}.shelf-bottom{height:44px;gap:4px}.shelf-bottom button{min-height:40px;border:0;background:var(--soft);border-radius:9px}.shelf-bottom #phone-fit{font-size:13px}#shelf-page{font-variant-numeric:tabular-nums}#toast{bottom:calc(268px + env(safe-area-inset-bottom))}
 .phone-playing #game-menu{max-height:calc(88dvh - env(safe-area-inset-top))}.phone-playing #new-puzzle-actions{padding-bottom:15px;display:grid;gap:8px}.phone-playing #new-puzzle-actions button{width:100%;text-align:left;min-height:48px;font-size:14px;border-radius:10px}.phone-playing #new-puzzle-actions #menu-upload{background:var(--green);color:white;border:0;display:flex;align-items:center;justify-content:space-between}.view-actions{gap:7px}.view-actions button{font-size:12px;min-height:44px;border-radius:9px}.phone-playing #game-menu .room-bar button,.phone-playing #game-menu aside button{font-size:14px;min-height:46px}
}
@media(max-width:800px) and (orientation:landscape),(max-height:600px) and (max-width:1100px) and (orientation:landscape){.phone-playing .canvas-viewport{bottom:0}.phone-playing #piece-shelf{height:auto}.shelf-filters{justify-content:space-between}.shelf-tools button{min-height:30px;padding:5px 8px;font-size:12px}.shelf-tools #phone-picture{min-height:32px}.shelf-piece{height:54px;min-height:54px}#shelf-pieces{grid-template-rows:repeat(2,54px);height:112px}.shelf-bottom{height:auto}.shelf-bottom button{min-height:36px}#toast{bottom:20px}}
@media(max-width:350px){.intro h1{font-size:33px}.bottom-grid>.upload{gap:10px;padding:15px 12px}#upload-open .action-copy strong{font-size:15px}#upload-open .action-copy>span{font-size:11px}.bottom-grid>.upload .action-icon{width:40px;height:44px}.action-arrow{font-size:20px}.card h3{font-size:19px}.shelf-tools button{padding:6px 9px;font-size:12px}}
@media(max-width:800px),(max-height:600px) and (max-width:1100px){.bottom-grid>#phone-load{color:var(--ink);border:1px solid var(--line)}}
