/* Wii Channels / Home Menu theme */
:root{
  --wii-bg-top: #aad5ff;
  --wii-bg-bottom: #6bb6ff;
  --wii-channel: #ffffff;
  --wii-channel-shadow: rgba(0,0,0,0.15);
  --wii-text: #333;
  --wii-text-muted: #666;
  --wii-accent: #1a7fff;
  --wii-accent-soft: rgba(26,127,255,0.3);
  --wii-border: rgba(255,255,255,0.6);
  --wii-panel: #ffffff;
  --wii-panel-shadow: rgba(0,0,0,0.12);
  --wii-overlay-bg: rgba(107,182,255,0.5);
  --wii-surface: rgba(255,255,255,0.95);
  --wii-surface-soft: rgba(255,255,255,0.5);
  --wii-card-label-bg: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,248,252,0.95));
  --wii-card-shine: rgba(255,255,255,0.4);
  --wii-btn-bg: white;
  --wii-primary-from: #e8f2ff;
  --wii-primary-to: #d4e8ff;
}

/* Dark mode */
body[data-theme="dark"]{
  --wii-bg-top: #1a2332;
  --wii-bg-bottom: #0f1419;
  --wii-channel: #252d3d;
  --wii-channel-shadow: rgba(0,0,0,0.4);
  --wii-text: #e2e8f0;
  --wii-text-muted: #94a3b8;
  --wii-accent: #60a5fa;
  --wii-accent-soft: rgba(96,165,250,0.35);
  --wii-border: rgba(255,255,255,0.1);
  --wii-panel: #1e293b;
  --wii-panel-shadow: rgba(0,0,0,0.35);
  --wii-overlay-bg: rgba(0,0,0,0.65);
  --wii-surface: rgba(30,41,59,0.98);
  --wii-surface-soft: rgba(30,41,59,0.7);
  --wii-card-label-bg: linear-gradient(180deg, rgba(30,41,59,0.95), rgba(15,23,42,0.98));
  --wii-card-shine: rgba(255,255,255,0.08);
  --wii-btn-bg: #1e293b;
  --wii-primary-from: rgba(59,130,246,0.25);
  --wii-primary-to: rgba(59,130,246,0.15);
}

*{box-sizing:border-box;}

html,body{
  height:100%;
  margin:0;
  background:linear-gradient(180deg, var(--wii-bg-top) 0%, var(--wii-bg-bottom) 100%);
  color:var(--wii-text);
  font-family:Nunito,ui-sans-serif,system-ui,-apple-system,sans-serif;
  transition:background 220ms ease, color 220ms ease;
}

body{
  min-height:100vh;
  background-attachment:fixed;
}

#app{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:12px;
  padding:14px 16px 16px;
  position:relative;
  overflow:visible;
  color:var(--wii-text);
  will-change:transform;
  transition:transform 180ms ease-out;
}

/* Carousel outer - [Prev] [viewport] [Next] */
.carousel-outer{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:12px 8px;
}

.carousel-viewport{
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  overflow-anchor:none; /* prevent scroll shift when .center card scales */
  scrollbar-width:none;
  cursor:grab;
}
.carousel-viewport:active{
  cursor:grabbing;
}
.carousel-viewport::-webkit-scrollbar{
  display:none;
}

.carousel-track{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:16px;
  padding:16px calc(50% - clamp(60px, 11vw, 90px));
  align-items:stretch;
  box-sizing:border-box;
}

/* Nav buttons - outside the viewport */
.carousel-outer .nav-btn{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--wii-border);
  background:var(--wii-surface);
  color:var(--wii-text);
  font-size:24px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 1px 4px var(--wii-channel-shadow);
  transition:border-color 120ms, color 120ms, transform 100ms;
}
.carousel-outer .nav-btn:hover{
  border-color:var(--wii-accent);
  color:var(--wii-accent);
}
.carousel-outer .nav-btn:active{
  transform:scale(0.95);
}

#main-layout .carousel-viewport{
  min-height:220px;
}
#custom-main-layout .carousel-viewport{
  min-height:160px;
}

/* Desktop: constrain layout */
@media (min-width:721px){
  body{
    display:flex;
    justify-content:center;
    align-items:flex-start;
  }
  #app{
    width:100%;
    max-width:1100px;
    margin:0 auto;
    padding:20px 24px 24px;
    gap:16px;
  }
  #top-bar{
    padding:8px 12px 10px;
  }
  #top-title{
    font-size:18px;
  }
  #top-subtitle{
    font-size:12px;
  }
  #main-layout{
    padding:14px 12px 12px;
  }
  .section-label{
    font-size:12px;
  }
  #custom-section{
    padding:14px 12px 12px;
  }
  #custom-main-layout{
    padding:4px 0;
  }
  #footer{
    padding:10px 12px 8px;
    font-size:10px;
  }
}

/* PANEL + LABELING */

.section-label{
  font-family:Nunito,system-ui,sans-serif;
  font-size:11px;
  font-weight:600;
  color:var(--wii-text-muted);
  letter-spacing:.06em;
}

#main-label{
  margin-top:2px;
  margin-bottom:2px;
}
#main-label-row{
  margin-top:2px;
  margin-bottom:2px;
}

/* top bar - Wii style */
#top-bar{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px 10px;
  margin-bottom:4px;
  background:linear-gradient(180deg, var(--wii-surface), var(--wii-surface-soft));
  border-radius:12px;
  border:1px solid var(--wii-border);
  box-shadow:0 2px 8px var(--wii-channel-shadow);
  position:relative;
}

#header-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}

#header-actions .pill-btn{
  font-size:10px;
  padding:5px 10px;
}

#top-title{
  font-family:Nunito,system-ui,sans-serif;
  font-size:18px;
  font-weight:700;
  color:var(--wii-text);
}

#top-subtitle{
  font-size:14px;
  font-weight:600;
  color:var(--wii-accent);
}

/* main layout - Wii style */
#main-layout{
  flex:1;
  width:100%;
  background:linear-gradient(180deg, var(--wii-surface-soft), var(--wii-panel));
  border-radius:12px;
  border:1px solid var(--wii-border);
  box-shadow:0 2px 12px var(--wii-channel-shadow);
  position:relative;
}

/* custom shortcuts section */
#custom-section{
  width:100%;
  margin-top:4px;
  padding:8px 12px 12px;
  background:linear-gradient(180deg, var(--wii-surface-soft), var(--wii-panel));
  border-radius:12px;
  border:1px solid var(--wii-border);
  box-shadow:0 2px 12px var(--wii-channel-shadow);
  position:relative;
}

.section-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 2px 2px;
}

#custom-empty{
  font-size:11px;
  color:var(--wii-text-muted);
}

/* custom main layout - grid container */
#custom-main-layout{
  width:100%;
  margin-top:4px;
}

/* Wii channel card */
.card{
  aspect-ratio:3/4;
  border-radius:16px;
  position:relative;
  transform-origin:center center;
  transition:transform 180ms ease-out, box-shadow 180ms ease-out;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  box-shadow:0 4px 12px var(--wii-channel-shadow);
  background:var(--wii-channel);
  border:2px solid var(--wii-border);
  -webkit-tap-highlight-color:transparent;
}

/* Cards in carousel: fixed width, no wrap */
.carousel-track .card{
  flex:0 0 auto;
  min-width:clamp(120px, 22vw, 180px);
}

/* subtle glossy highlight on top */
.card::before{
  content:"";
  position:absolute;
  top:0;
  left:10%;
  right:10%;
  height:30%;
  background:linear-gradient(180deg, var(--wii-card-shine) 0%, transparent 100%);
  pointer-events:none;
  border-radius:16px 16px 0 0;
}

/* poster image fill */
.card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:14px;
}

/* channel label - Wii style */
.card-label{
  position:relative;
  z-index:2;
  padding:8px 10px;
  width:100%;
  color:var(--wii-text);
  font-family:Nunito,system-ui,sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:.02em;
  background:var(--wii-card-label-bg);
  border-top:1px solid var(--wii-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:36px;
}

/* centered card in carousel - bigger, accent outline */
.carousel-track .card.center{
  transform:scale(1.1);
  box-shadow:0 6px 24px var(--wii-channel-shadow), 0 0 0 3px var(--wii-accent-soft);
  z-index:2;
}

/* channel hover - Wii pointer highlight (non-centered cards) */
.carousel-track .card:not(.center):hover{
  transform:scale(1.05);
  box-shadow:0 6px 20px var(--wii-channel-shadow), 0 0 0 2px var(--wii-accent-soft);
}

.carousel-track .card.center:hover{
  transform:scale(1.12);
  box-shadow:0 8px 28px var(--wii-channel-shadow), 0 0 0 3px var(--wii-accent);
}

.card:focus-within{
  box-shadow:0 6px 20px var(--wii-channel-shadow), 0 0 0 3px var(--wii-accent);
  outline:none;
}

/* edit/delete buttons on custom cards - Wii style */
.custom-delete{
  position:absolute;
  top:6px;
  right:6px;
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid var(--wii-border);
  background:var(--wii-surface);
  color:var(--wii-text-muted);
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  z-index:3;
  box-shadow:0 1px 4px var(--wii-channel-shadow);
}

.custom-delete:hover{
  border-color:var(--wii-accent);
  color:var(--wii-accent);
  background:var(--wii-channel);
}

.custom-delete:active{
  transform:scale(0.95);
}

/* tools modal overlay - Wii style */
#tools-overlay,
#custom-create-overlay,
#reorder-overlay,
#profile-overlay,
#choice-overlay{
  position:fixed;
  inset:0;
  background:var(--wii-overlay-bg);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  opacity:0;
  pointer-events:none;
  transition:opacity 220ms ease-out;
  z-index:40;
}
#tools-overlay.open,
#custom-create-overlay.open,
#reorder-overlay.open,
#profile-overlay.open,
#choice-overlay.open{
  opacity:1;
  pointer-events:auto;
}

body.modal-open #app{
  filter:blur(6px);
  transition:filter 220ms ease-out;
}

/* Wii-style panels */
#tools-panel,
#custom-create-panel,
#reorder-panel,
#profile-panel,
#choice-panel{
  position:relative;
  transform:scale(0.96);
  width:100%;
  max-width:360px;
  max-height:90vh;
  border-radius:16px;
  background:linear-gradient(180deg, var(--wii-channel), var(--wii-panel));
  box-shadow:0 8px 32px var(--wii-channel-shadow);
  padding:18px 18px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  outline:none;
  border:2px solid var(--wii-border);
  opacity:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  transition:transform 220ms ease-out, opacity 220ms ease-out;
}

#tools-overlay.open #tools-panel,
#custom-create-overlay.open #custom-create-panel,
#reorder-overlay.open #reorder-panel,
#profile-overlay.open #profile-panel,
#choice-overlay.open #choice-panel{
  transform:scale(1);
  opacity:1;
}

#tools-close,
#custom-create-close,
#reorder-close,
#profile-close,
#tools-edit{
  position:absolute;
  top:10px;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--wii-border);
  background:var(--wii-surface);
  color:var(--wii-text);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  box-shadow:0 1px 4px var(--wii-channel-shadow);
}

#tools-close{
  right:10px;
}
#tools-edit{
  right:48px;
}

#tools-close:hover,
#custom-create-close:hover,
#reorder-close:hover,
#profile-close:hover,
#tools-edit:hover{
  border-color:var(--wii-accent);
  color:var(--wii-accent);
}

#tools-close:active,
#custom-create-close:active,
#reorder-close:active,
#profile-close:active{
  transform:scale(0.95);
}

#tools-title,
#custom-create-title,
#reorder-title,
#profile-title,
#choice-title{
  font-family:Nunito,system-ui,sans-serif;
  font-size:18px;
  font-weight:700;
  padding-right:48px;
  color:var(--wii-text);
}

#tools-subtitle,
#reorder-subtitle,
#profile-subtitle{
  font-family:Nunito,system-ui,sans-serif;
  font-size:12px;
  color:var(--wii-text-muted);
}

/* tools list */

#tools-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:2px;
}

.tool-link{
  flex:1 1 calc(50% - 4px);
  min-width:0;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--wii-border);
  text-decoration:none;
  text-align:center;
  font-size:12px;
  font-family:Nunito,system-ui,sans-serif;
  font-weight:600;
  color:var(--wii-text);
  background:var(--wii-surface);
  box-shadow:0 1px 4px var(--wii-channel-shadow);
  transition:background-color 120ms, color 120ms, border-color 120ms, transform 100ms;
}

.tool-link:hover{
  border-color:var(--wii-accent);
  background:var(--wii-channel);
  color:var(--wii-accent);
}

.tool-link:active{
  transform:scale(0.97);
}

.tool-empty{
  font-size:13px;
  color:var(--wii-text-muted);
}

/* form fields for custom shortcut modal */

.field{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.field-label{
  font-family:Nunito,system-ui,sans-serif;
  font-size:11px;
  font-weight:600;
  color:var(--wii-text-muted);
}
.field-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.field input{
  width:100%;
  border-radius:8px;
  border:1px solid var(--wii-border);
  background:var(--wii-channel);
  color:var(--wii-text);
  padding:8px 10px;
  font-size:13px;
}
.field input::placeholder{
  color:var(--wii-text-muted);
}

/* behavior toggle for custom shortcuts */
.field-toggle .toggle-inline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--wii-text);
}

.field-toggle input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:var(--wii-accent);
}

/* toast notification - Wii style */
#toast{
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translateX(-50%) translateY(40px);
  padding:10px 16px;
  border-radius:12px;
  background:var(--wii-surface);
  border:1px solid var(--wii-border);
  box-shadow:0 4px 16px var(--wii-channel-shadow);
  font-family:Nunito,system-ui,sans-serif;
  font-size:12px;
  font-weight:600;
  color:var(--wii-text);
  opacity:0;
  pointer-events:none;
  z-index:40;
  transition:opacity 160ms ease-out, transform 160ms ease-out;
}

#toast.visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* add-tool pill now hardware button */

.share-code-row{
  display:flex;
  align-items:center;
  gap:6px;
}
.share-code-row input{
  flex:1 1 auto;
}

/* add-tool pill now hardware button */

.pill-btn{
  border-radius:10px;
  border:1px solid var(--wii-border);
  padding:6px 12px;
  font-size:11px;
  font-family:Nunito,system-ui,sans-serif;
  font-weight:600;
  background:var(--wii-channel);
  color:var(--wii-text);
  box-shadow:0 1px 4px var(--wii-channel-shadow);
  transition:border-color 120ms, color 120ms, transform 100ms;
}

.pill-btn:hover{
  border-color:var(--wii-accent);
  color:var(--wii-accent);
}

.pill-btn:active{
  transform:scale(0.97);
}

.custom-tool-row{
  display:grid;
  grid-template-columns: 1.3fr 1.7fr auto auto auto;
  gap:6px;
  align-items:center;
  margin-top:6px;
}
.custom-tool-row input{
  border-radius:8px;
  border:1px solid var(--wii-border);
  background:var(--wii-channel);
  color:var(--wii-text);
  padding:6px 8px;
  font-size:12px;
}
.custom-tool-move,
.custom-tool-remove{
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid var(--wii-border);
  background:var(--wii-surface);
  color:var(--wii-text);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  box-shadow:0 1px 4px var(--wii-channel-shadow);
}

.custom-tool-move{
  font-size:10px;
}

.custom-tool-move:hover,
.custom-tool-remove:hover{
  border-color:var(--wii-accent);
  color:var(--wii-accent);
}

.custom-tool-move:active,
.custom-tool-remove:active{
  transform:translateY(1px);
  box-shadow:none;
}

#custom-tools-list{
  max-height:160px;
  overflow-y:auto;
  padding-right:2px;
}

/* custom edit button on cards - Wii style */
.custom-edit{
  position:absolute;
  top:6px;
  left:6px;
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid var(--wii-border);
  background:var(--wii-surface);
  color:var(--wii-text-muted);
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  z-index:3;
  box-shadow:0 1px 0 #000000d0;
}

.custom-edit:hover{
  border-color:var(--wii-accent);
  color:var(--wii-accent);
}

.custom-edit:active{
  transform:translateY(1px);
  box-shadow:none;
}

/* editing header label in modal */
#custom-create-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

#custom-editing-label{
  font-family:"Roboto Condensed",system-ui,sans-serif;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  padding:2px 6px 1px;
  border-radius:2px;
  border:1px solid var(--accent-soft);
  background:rgba(17,19,23,0.9);
  display:none;
}

#custom-editing-label.active{
  display:inline-flex;
}

/* delete button positioning inside actions */
#custom-create-actions{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  margin-top:4px;
}

#custom-delete{
  margin-right:auto;
}

.tool-link.disabled{
  opacity:0.5;
  border-style:dashed;
  cursor:not-allowed;
  pointer-events:none;
  color:var(--wii-text-muted);
}

/* primary / secondary buttons */

#custom-create-actions{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  margin-top:4px;
}

/* reorder actions */
#reorder-actions{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  margin-top:8px;
}

.primary-btn,
.secondary-btn{
  border-radius:10px;
  border:1px solid var(--wii-border);
  padding:8px 16px;
  font-size:13px;
  font-family:Nunito,system-ui,sans-serif;
  font-weight:600;
  box-shadow:0 1px 4px var(--wii-channel-shadow);
  background:var(--wii-btn-bg);
  color:var(--wii-text);
}

.primary-btn{
  border-color:var(--wii-accent);
  background:linear-gradient(180deg, var(--wii-primary-from), var(--wii-primary-to));
  color:var(--wii-accent);
}

.primary-btn:hover{
  background:linear-gradient(180deg, var(--wii-primary-to), var(--wii-primary-from));
}

.secondary-btn:hover{
  border-color:var(--wii-accent);
  color:var(--wii-accent);
}

.primary-btn:active,
.secondary-btn:active{
  transform:translateY(1px);
  box-shadow:none;
}

/* footer - Wii style */

#footer{
  margin-top:6px;
  padding:10px 12px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:linear-gradient(180deg, var(--wii-surface), var(--wii-surface-soft));
  border-radius:12px;
  border:1px solid var(--wii-border);
  box-shadow:0 2px 8px var(--wii-channel-shadow);
  font-family:Nunito,system-ui,sans-serif;
  font-size:11px;
  font-weight:600;
  color:var(--wii-text-muted);
  overflow:hidden;
  position:relative;
}

#footer-actions{
  display:none;
}

#footer-actions .pill-btn{
  font-size:8px;
  padding:3px 7px;
  letter-spacing:.14em;
}

#footer-left{
  display:none;
}

#footer-right{
  display:none;
}

/* panel entrance */
#top-bar{
  animation:panelIn 420ms ease-out forwards;
  opacity:0;
}
#main-layout{
  animation:panelIn 520ms ease-out forwards;
  opacity:0;
}
#custom-section{
  animation:panelIn 620ms ease-out forwards;
  opacity:0;
}
@keyframes panelIn{
  0%{ transform:translateY(10px); opacity:0; }
  100%{ transform:translateY(0); opacity:1; }
}

/* tactile press feedback for channels */
.card:active{
  transform:scale(0.98);
}

#profile-qr-container,
#custom-qr-container{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
}

#profile-qr,
#custom-qr{
  width:240px;
  height:240px;
  border:1px solid rgba(0,0,0,0.1);
  background:white;
  border-radius:8px;
  image-rendering:pixelated;
  display:block;
}

#custom-qr-field{
  display:none;
}

#custom-qr-field.visible{
  display:flex;
}

#profile-actions{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  margin-top:8px;
}

.share-code-row textarea{
  flex:1 1 auto;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.15);
  background:white;
  color:var(--wii-text);
  padding:7px 8px;
  font-size:11px;
  font-family:monospace;
  resize:vertical;
}

/* responsive modal tweaks */
@media (max-width:720px){
  #tools-panel,
  #custom-create-panel,
  #reorder-panel,
  #profile-panel{
    max-width:320px;
    max-height:calc(100vh - 24px);
    padding:12px 12px 10px;
  }

  .custom-tool-row{
    grid-template-columns: 1.2fr 1.8fr auto;
  }
}

/* Carousel responsive */
@media (max-width:420px){
  #app{padding:10px 10px 12px;}
  #main-label-row{margin-top:2px;margin-bottom:2px;}
  #top-bar{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  #header-actions{
    margin-left:0;
    width:100%;
    display:flex;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:6px;
  }
  .carousel-track{
    gap:12px;
    padding:12px calc(50% - clamp(50px, 19vw, 70px));
  }
  .carousel-track .card{
    min-width:clamp(100px, 38vw, 140px);
  }
  .carousel-outer .nav-btn{
    width:36px;
    height:36px;
    font-size:20px;
  }
}

/* Hide inline edit/delete controls on mobile; use long-press menu instead */
@media (max-width:720px){
  .custom-edit,
  .custom-delete{
    display:none !important;
  }
}

/* Reorder list rows */
#reorder-list{
  margin-top:6px;
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:60vh;
  overflow-y:auto;
  padding-right:2px;
}

.reorder-row{
  display:grid;
  grid-template-columns: 1fr auto auto auto;
  gap:6px;
  align-items:center;
}

.reorder-label{
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--wii-border);
  background:var(--wii-channel);
  font-size:13px;
  color:var(--wii-text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.reorder-move{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--wii-border);
  background:var(--wii-channel);
  color:var(--wii-text);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  box-shadow:0 1px 4px var(--wii-channel-shadow);
}

.reorder-move:hover{
  border-color:var(--wii-accent);
  color:var(--wii-accent);
}

.reorder-move:active{
  transform:scale(0.95);
}

.reorder-delete{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid rgba(220,38,38,0.5);
  background:#fef2f2;
  color:#dc2626;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  box-shadow:0 1px 4px var(--wii-channel-shadow);
}

.reorder-delete:hover{
  border-color:#dc2626;
  color:#b91c1c;
  background:#fee2e2;
}

.reorder-delete:active{
  transform:scale(0.95);
}

.reorder-row.deleted .reorder-label{
  opacity:0.4;
  text-decoration:line-through;
}

/* Marketplace overlay & panel */
#marketplace-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:45;
  opacity:0;
  pointer-events:none;
  transition:opacity 220ms ease-out;
}

#marketplace-overlay.open{
  opacity:1;
  pointer-events:auto;
}

/* Marketplace preview overlay */
#marketplace-preview-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:46;
  opacity:0;
  pointer-events:none;
  transition:opacity 220ms ease-out;
}

#marketplace-preview-overlay.open{
  opacity:1;
  pointer-events:auto;
}

#marketplace-panel{
  position:relative;
  width:100%;
  max-width:540px;
  max-height:90vh;
  border-radius:16px;
  padding:18px 20px 14px;
  background:linear-gradient(180deg, var(--wii-channel), var(--wii-panel));
  border:2px solid var(--wii-border);
  box-shadow:0 12px 32px var(--wii-channel-shadow);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Marketplace preview panel */
#marketplace-preview-panel{
  position:relative;
  width:100%;
  max-width:420px;
  max-height:80vh;
  border-radius:3px;
  padding:14px 14px 10px;
  background:linear-gradient(180deg,#181b21,#101216);
  border:1px solid var(--border-strong);
  box-shadow:0 10px 26px #000000f0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

#marketplace-preview-panel:focus{
  outline:none;
}

/* Marketplace header */
.marketplace-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

/* Marketplace search row */
.marketplace-search-row{
  display:flex;
  gap:6px;
  margin-bottom:8px;
}

#marketplace-search-input{
  flex:1 1 auto;
  border-radius:10px;
  border:1px solid var(--wii-border);
  background:var(--wii-channel);
  color:var(--wii-text);
  padding:7px 8px;
  font-size:12px;
}

#marketplace-search-input::placeholder{
  color:var(--wii-text-muted);
}

.marketplace-title-block{
  display:flex;
  flex-direction:column;
  gap:2px;
}

#marketplace-title{
  font-family:Nunito,system-ui,sans-serif;
  font-weight:700;
  font-size:18px;
  color:var(--wii-text);
}

#marketplace-subtitle{
  font-family:Nunito,system-ui,sans-serif;
  font-size:12px;
  color:var(--wii-text-muted);
  text-transform:uppercase;
  letter-spacing:.14em;
}

#marketplace-close,
#marketplace-preview-close{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--wii-border);
  background:var(--wii-channel);
  color:var(--wii-text);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  box-shadow:0 1px 0 #000000e0;
}

#marketplace-close:hover,
#marketplace-preview-close:hover{
  border-color:var(--wii-accent);
  color:var(--wii-accent);
}

#marketplace-close:active,
#marketplace-preview-close:active{
  transform:translateY(1px);
  box-shadow:none;
}

/* Rows under header */
.marketplace-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}

.publish-row{
  flex-wrap:wrap;
}

.publish-row .pill-btn{
  flex:1 1 150px;
}

.tabs-row{
  justify-content:space-between;
}

#marketplace-tabs{
  display:flex;
  gap:4px;
  flex:1 1 auto;
}

#marketplace-refresh{
  flex:0 0 auto;
}

/* Tabs */
.marketplace-tab{
  flex:1 1 0;
  text-align:center;
}

.marketplace-tab-active{
  border-color:var(--wii-accent);
  color:var(--wii-accent);
  background:linear-gradient(180deg, #e8f2ff, #d4e8ff);
}

/* List scrolling */
#marketplace-list{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:4px;
  padding-right:4px;
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* Thin scrollbar */
#marketplace-list::-webkit-scrollbar{
  width:6px;
}
#marketplace-list::-webkit-scrollbar-track{
  background:rgba(15,17,21,0.9);
}
#marketplace-list::-webkit-scrollbar-thumb{
  background:rgba(55,65,81,0.9);
  border-radius:3px;
}
#marketplace-list{
  scrollbar-width:thin;
  scrollbar-color:rgba(55,65,81,0.9) rgba(15,17,21,0.9);
}

/* Marketplace loading indicator */
.marketplace-loading{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:32px 16px;
  color:var(--muted);
  font-size:13px;
}
.marketplace-spinner{
  width:36px;
  height:36px;
  border:3px solid rgba(0,0,0,0.1);
  border-top-color:var(--wii-accent);
  border-radius:50%;
  animation:marketplaceSpin 0.8s linear infinite;
}
@keyframes marketplaceSpin{
  to{transform:rotate(360deg);}
}

/* Marketplace rows */
.marketplace-row-item{
  display:flex;
  flex-direction:column;
  row-gap:8px;
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,0.08);
}

.marketplace-row-item:last-child{
  border-bottom:none;
}

.marketplace-left{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
}

.marketplace-thumb{
  width:64px;
  height:64px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid #000;
  flex-shrink:0;
}

.marketplace-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.marketplace-title-text{
  font-weight:700;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.marketplace-meta-text{
  font-size:11px;
  color:var(--wii-text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.marketplace-official-badge{
  display:inline-block;
  margin-right:4px;
  padding:1px 4px 0;
  border-radius:2px;
  border:1px solid rgba(251,191,36,0.7);
  background:rgba(23,23,23,0.9);
  font-family:"Roboto Condensed",system-ui,sans-serif;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#facc15;
}

.marketplace-fork-badge{
  display:inline-block;
  margin-right:4px;
  padding:1px 4px 0;
  border-radius:2px;
  border:1px solid rgba(96,165,250,0.8);
  background:rgba(15,23,42,0.9);
  font-family:"Roboto Condensed",system-ui,sans-serif;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#bfdbfe;
}

.marketplace-desc-text{
  font-size:11px;
  color:var(--wii-text-muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.marketplace-right{
  display:flex;
  flex-direction:row;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  margin-top:auto;
}

.marketplace-action-btn{
  width:100%;
  text-align:center;
}

/* Marketplace footer */
.marketplace-footer{
  margin-top:10px;
  display:flex;
  justify-content:flex-end;
}

/* Marketplace preview body */
#marketplace-preview-body{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:6px;
}

#marketplace-preview-thumb-wrap{
  flex:0 0 auto;
}

#marketplace-preview-thumb{
  width:120px;
  height:120px;
  border-radius:4px;
  object-fit:cover;
  border:1px solid #000;
}

#marketplace-preview-text{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

#marketplace-preview-title{
  font-weight:700;
  font-size:14px;
}

#marketplace-preview-meta{
  font-size:11px;
  color:var(--muted);
}

#marketplace-preview-desc{
  font-size:11px;
  color:var(--text-soft);
  max-height:6em;
  overflow:hidden;
}

/* Preview tools / buttons list */
#marketplace-preview-tools{
  margin-top:6px;
  border-top:1px solid rgba(31,41,55,0.9);
  padding-top:6px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.marketplace-preview-tools-header{
  font-family:"Roboto Condensed",system-ui,sans-serif;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}

.marketplace-preview-tools-list{
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* Fork lineage + forks for preview */
#marketplace-preview-fork{
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid rgba(31,41,55,0.9);
}

.marketplace-fork-lineage{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:11px;
  color:var(--text-soft);
}

.marketplace-fork-line-primary{
  font-weight:600;
}

.marketplace-fork-line-secondary{
  font-size:10px;
  color:var(--muted);
}

.marketplace-link-button{
  border:none;
  padding:0;
  margin:0 2px 0 2px;
  background:none;
  color:var(--accent);
  font:inherit;
  text-decoration:underline;
  cursor:pointer;
}

.marketplace-link-button:hover{
  color:#fed7aa;
}

.marketplace-link-text{
  color:var(--muted);
}

#marketplace-preview-forks-section{
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid rgba(31,41,55,0.9);
}

.marketplace-forks-header{
  font-family:"Roboto Condensed",system-ui,sans-serif;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}

.marketplace-forks-controls{
  margin-top:4px;
  display:flex;
  justify-content:flex-start;
}

.marketplace-forks-controls .pill-btn{
  font-size:9px;
  padding:3px 8px;
}

.marketplace-forks-list{
  margin-top:6px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.marketplace-fork-item{
  padding:4px 6px;
  border-radius:2px;
  background:#050609;
  border:1px solid rgba(31,41,55,0.9);
}

.marketplace-fork-item-meta{
  font-size:10px;
  color:var(--muted);
  margin-top:1px;
}

.marketplace-fork-item-desc{
  font-size:10px;
  color:var(--text-soft);
  margin-top:2px;
}

.marketplace-preview-tool-row{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:4px 6px;
  border-radius:2px;
  background:#050609;
  border:1px solid rgba(31,41,55,0.9);
}

.marketplace-preview-tool-label{
  font-size:11px;
  font-weight:600;
  color:var(--text-soft);
}

.marketplace-preview-tool-url{
  font-size:10px;
  color:var(--muted);
  word-break:break-all;
}

.marketplace-preview-footer{
  margin-top:10px;
  display:flex;
  justify-content:flex-end;
}

/* Responsive: stack preview on very narrow screens */
@media (max-width:480px){
  #marketplace-preview-panel{
    max-width:360px;
  }
  #marketplace-preview-body{
    flex-direction:column;
    align-items:center;
  }
  #marketplace-preview-thumb{
    width:160px;
    height:160px;
  }
  #marketplace-preview-text{
    width:100%;
  }
}

/* Empty state */
.marketplace-empty{
  padding:10px 0;
}

/* Choice Panel Specifics */
#choice-overlay{
  z-index:50; /* Above custom create (40) */
}

/* --- Redesigned New Game / New Shortcut modal layout --- */

#custom-create-panel{
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  row-gap:10px;
  max-width:380px;
  padding:14px 14px 10px;
  background:linear-gradient(180deg, var(--wii-channel), var(--wii-panel));
  box-shadow:0 8px 32px var(--wii-channel-shadow);
}

#custom-create-header{
  padding:4px 2px 0;
  border-bottom:1px solid rgba(0,0,0,0.08);
  margin-bottom:4px;
}

#custom-create-title{
  font-size:15px;
  letter-spacing:.18em;
}

#custom-editing-label{
  border-radius:999px;
  padding:2px 10px 1px;
  background:rgba(26,127,255,0.15);
  border-color:var(--wii-accent);
  color:var(--wii-accent);
}

/* Place "Paste code" / future controls in a compact toolbar row */
#custom-import-code{
  margin-top:0;
  align-self:flex-start;
}

/* Scrollable body inside the grid cell between header and footer */
#custom-create-panel > .field,
#custom-create-panel > .field-toggle,
#custom-create-panel > .game-only,
#custom-create-panel > .shortcut-only,
#custom-tools-list{
  /* these are wrapped by the grid row (1fr) due to DOM order, no extra container needed */
}

#custom-create-panel .field,
#custom-create-panel .field-toggle{
  padding:8px 10px;
  margin:2px 0;
  border-radius:10px;
  background:rgba(255,255,255,0.7);
  border:1px solid rgba(0,0,0,0.08);
}

/* Stack label row nicely on small screens */
#custom-create-panel .field-label-row{
  flex-wrap:wrap;
}

/* Labels slightly bolder and clearer */
#custom-create-panel .field-label{
  font-size:11px;
  color:var(--wii-text-muted);
}

#custom-create-panel .field input{
  border-radius:8px;
  border:1px solid var(--wii-border);
  background:var(--wii-channel);
  padding:8px 10px;
  font-size:13px;
  color:var(--wii-text);
}

#custom-tools-list{
  margin-top:4px;
  padding:8px;
  border-radius:10px;
  background:var(--wii-surface-soft);
  border:1px solid rgba(0,0,0,0.08);
}

/* Individual tool rows slightly more compact */
#custom-create-panel .custom-tool-row{
  margin-top:4px;
}

#custom-create-actions{
  padding-top:8px;
  margin-top:4px;
  border-top:1px solid rgba(0,0,0,0.08);
}

/* Make primary action more prominent in this modal */
#custom-save.primary-btn,
#custom-save{
  min-width:120px;
}

/* Mobile tweaks for the redesigned sheet */
@media (max-width:420px){
  #custom-create-panel{
    max-width:340px;
    padding:12px 10px 8px;
  }
  #custom-create-panel .field,
  #custom-create-panel .field-toggle{
    padding:7px 8px;
  }
}

#choice-panel{
  max-width:320px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Publish Overlay */
#publish-overlay{
  position:fixed;
  inset:0;
  z-index:55; /* Above marketplace (45) */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,0.6);
  opacity:0;
  pointer-events:none;
  transition:opacity 220ms ease-out;
}
#publish-overlay.open{
  opacity:1;
  pointer-events:auto;
}

#publish-panel{
  width:100%;
  max-width:380px;
  max-height:85vh;
  background:linear-gradient(180deg, var(--wii-channel), var(--wii-panel));
  border:2px solid var(--wii-border);
  border-radius:3px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 16px 40px #000000f0;
  overflow:hidden;
}

.publish-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
#publish-title{
  font-family:"Roboto Condensed",system-ui,sans-serif;
  font-weight:700;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
#publish-close{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,0.12);
  background:white;
  color:var(--wii-text);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}
#publish-close:hover{
  border-color:var(--wii-accent);
  color:var(--wii-accent);
}

#publish-step-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1 1 auto;
  overflow:hidden;
}

.publish-tabs{
  display:flex;
  gap:6px;
}
.publish-tabs .pill-btn{
  flex:1;
  text-align:center;
  opacity:0.6;
}
.publish-tabs .pill-btn.active{
  opacity:1;
  border-color:var(--wii-accent);
  background:linear-gradient(180deg, #e8f2ff, #d4e8ff);
  color:var(--wii-accent);
}

#publish-list-container{
  flex:1 1 auto;
  overflow-y:auto;
  border:1px solid rgba(0,0,0,0.1);
  background:rgba(255,255,255,0.5);
  border-radius:2px;
  max-height:40vh;
}

.publish-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  cursor:pointer;
  transition:background-color 100ms;
}
.publish-item:hover{
  background:rgba(255,255,255,0.04);
}
.publish-item:last-child{
  border-bottom:none;
}
.publish-item img{
  width:40px;
  height:40px;
  border-radius:2px;
  object-fit:cover;
  border:1px solid #000;
}
.publish-item-name{
  font-size:13px;
  font-weight:600;
  color:var(--wii-text);
}
.publish-item-studio{
  font-size:10px;
  color:var(--wii-text-muted);
}
.publish-item-arrow{
  margin-left:auto;
  font-size:18px;
  color:var(--muted);
}

/* Step 2 Details */
#publish-step-details{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.publish-preview-row{
  display:flex;
  gap:10px;
  padding:10px;
  background:rgba(255,255,255,0.7);
  border:1px solid rgba(0,0,0,0.1);
  border-radius:2px;
}
#publish-preview-img{
  width:64px;
  height:64px;
  border-radius:2px;
  object-fit:cover;
  border:1px solid #000;
}
.publish-preview-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
}
#publish-preview-name{
  font-weight:700;
  font-size:14px;
}
#publish-preview-kind{
  font-size:11px;
  color:var(--wii-text-muted);
  text-transform:uppercase;
  letter-spacing:.1em;
}

.publish-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:4px;
}

#choice-title{
  font-size:17px;
  font-weight:700;
  color:var(--wii-text);
}

#choice-message{
  font-size:13px;
  color:var(--wii-text-muted);
  line-height:1.4;
}

#choice-options{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}

#choice-options button{
  width:100%;
  padding:10px;
  text-align:center;
}

/* Responsive adjustments for very narrow screens */
@media (max-width:480px){
  #marketplace-panel{
    padding:14px 12px 10px;
  }
}

/* Hide legacy profile import/export buttons now handled by marketplace */
#profile-export,
#profile-import{
  display:none !important;
}



/* Hide profile code/QR UI from users (still used internally by backend) */
#profile-overlay{
  display:none !important;
}

/* Hide shortcut/game share-code + QR UI from users */
#custom-import-code,
#custom-share-code,
#custom-qr-field,
#custom-share-code ~ .pill-btn,
#custom-copy-code{
  display:none !important;
}

/* Also hide the whole "Share code" field label area */
#custom-share-code{
  /* hide its parent .field container */
}
#custom-share-code{
  pointer-events:none;
}
#custom-share-code-input,
#custom-share-code-field{
  display:none !important;
}